:root {
  color-scheme:light;
  --ink:#242d39;
  --muted:#626e7c;
  --line:#dfe4ea;
  --blue:#2455a0;
  --subtle:#f6f8fa;
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
}
* { box-sizing:border-box; }
html { scroll-padding-top:24px; }
body { margin:0;background:#fff;color:var(--ink); }
a { color:var(--blue);text-decoration:none;text-underline-offset:4px; }
a:hover { text-decoration:underline; }
button,input,select { font:inherit; }
button,.button {
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:9px 16px;border:1px solid #cbd3dd;border-radius:4px;
  background:#fff;color:var(--ink);font-weight:500;cursor:pointer;white-space:nowrap;
}
button:hover:not(:disabled),.button:hover { background:#f1f5fa;border-color:#9aabc1;text-decoration:none; }
button.primary { background:var(--blue);border-color:var(--blue);color:#fff; }
button.primary:hover:not(:disabled) { background:#1a4385; }
button:disabled { background:#e9edf2;border-color:#dce2e9;color:#7b8592;cursor:not-allowed; }
.compact { min-height:36px;padding:6px 12px;font-size:13px; }
.full-width { width:100%; }
input,select {
  display:block;width:100%;min-height:44px;border:1px solid #c4ced9;border-radius:4px;
  background:#fff;color:var(--ink);padding:9px 11px;margin:8px 0 20px;
}
input:disabled,select:disabled { background:#f1f3f6;color:#7b8592; }
input[type=file] { padding:8px;line-height:1.7;font-size:13px; }
input[type=file]::file-selector-button {
  min-height:34px;padding:5px 10px;margin-right:10px;border:1px solid #c4ced9;
  border-radius:3px;background:#fff;color:var(--ink);font:inherit;cursor:pointer;
}
input::placeholder { color:#7b8592; }
label { display:block;font-weight:550; }
label .subtle { font-weight:400;margin-left:6px; }
fieldset { border:0;margin:0;padding:0;min-width:0; }
p { margin:8px 0;color:var(--muted); }
h1,h2,h3 { line-height:1.45;margin:0;color:var(--ink); }
h1 { font-size:18px;font-weight:650;word-break:keep-all;overflow-wrap:anywhere; }
h2 { font-size:20px;font-weight:650; }
h3 { font-size:16px;font-weight:600;margin-bottom:16px; }
:focus-visible { outline:3px solid #7a9fdc;outline-offset:3px; }
[hidden] { display:none!important; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link { position:absolute;top:-80px;left:24px;background:#fff;padding:12px;z-index:9; }
.skip-link:focus { top:8px; }

.site-header {
  display:flex;align-items:center;gap:28px;min-height:96px;
  padding:22px max(28px,calc((100vw - 1120px)/2));border-bottom:1px solid var(--line);
}
.brand { display:flex;align-items:center;gap:20px;min-width:0;color:var(--ink); }
.brand:hover { text-decoration:none; }
.brand-logo { display:block;flex-shrink:0;width:100px;height:40px;object-fit:contain; }
.account-tools { display:flex;align-items:center;gap:16px;margin-left:auto;flex-shrink:0; }
#identity { font-size:14px;max-width:150px;overflow-wrap:anywhere; }
main { max-width:1176px;margin:auto;padding:0 28px 56px; }
.notice { padding:14px 16px;margin:24px 0 0;border-left:3px solid #7294c6;background:#f3f6fb;color:#355682;overflow-wrap:anywhere; }
.notice.error { background:#fff4f2;border-color:#b56154;color:#9a3e32; }
.notice:empty { display:none; }
.section-heading { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px; }
.subtle,.note,.field-hint { font-size:13px;color:var(--muted); }
.note { margin:12px 0;line-height:1.7; }
.note:empty,.form-message:empty { display:none; }
.field-hint { margin:-10px 0 20px; }
.form-message { margin:16px 0 0;overflow-wrap:anywhere; }
.form-message.error { color:#a03e3e; }

.guest-layout { display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;padding:56px 0 32px;align-items:start; }
.account-panel { padding-right:32px;border-right:1px solid var(--line); }
.auth-tabs { display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:28px; }
.auth-tabs button { border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:0 0 14px;color:var(--muted);font-size:18px;min-height:44px; }
.auth-tabs button[aria-selected=true] { color:var(--ink);border-bottom-color:var(--blue);font-weight:650; }
.auth-tabs button:hover:not(:disabled) { background:transparent;color:var(--blue); }
.club-section { min-width:0; }
.club-media-grid { display:grid;grid-template-columns:minmax(0,0.32fr) minmax(0,0.68fr);gap:24px;align-items:start; }
.club-poster,.club-video { margin:0;min-width:0; }
.club-poster>a { display:block; }
.club-poster img { display:block;width:100%;height:auto; }
.club-video-column { min-width:0; }
.club-video video { display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#202428; }
.club-media-grid figcaption { margin-top:12px;font-size:13px; }
footer { margin-top:24px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;word-break:keep-all; }

.server-status { display:flex;align-items:center;gap:9px;padding:24px 0;color:var(--muted);font-size:14px; }
.server-status strong { font-weight:500; }
.status-dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:#939eac;flex-shrink:0; }
.status-dot.ready { background:#367954; }
.basis-panel { padding:18px 20px;border:1px solid var(--line);border-radius:4px;background:var(--subtle);min-width:0; }
.current-basis { margin-bottom:28px; }
.basis-panel h2,.basis-panel h3 { margin:0 0 8px;font-size:15px; }
.basis-state { margin:0 0 12px;font-size:13px;color:var(--ink); }
.basis-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:0 0 12px;font-size:13px; }
.basis-list>div { min-width:0; }
.basis-list dt { color:var(--muted); }
.basis-list dd { margin:2px 0 0;overflow-wrap:anywhere; }
.basis-hash { font-size:11px;word-break:break-all; }
.workspace { display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start; }
.upload-area { padding:24px;border:1px solid var(--line);border-radius:4px;background:#fafbfc; }
.upload-area .section-heading { margin-bottom:24px; }
.records-column { min-width:0; }
.history-area { min-width:0; }
.connection { color:var(--muted);font-size:13px;white-space:nowrap; }
.table-scroll { overflow:auto; }
table { border-collapse:collapse;width:100%;font-size:14px;text-align:left;font-variant-numeric:tabular-nums; }
th,td { padding:14px 16px;border-bottom:1px solid #e8ecf1;vertical-align:middle; }
th { background:var(--subtle);color:#566372;font-size:13px;font-weight:550;white-space:nowrap;border-top:1px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
tbody tr.mine,tbody tr.selected { background:#edf3fb; }
tbody tr.selected td:first-child { box-shadow:inset 3px 0 var(--blue); }
.rank { font-weight:650; }
.empty-cell { text-align:center;color:var(--muted);padding:32px 16px; }
table:has(.empty-cell) { min-width:0!important; }
.badge { display:inline-block;font-size:13px;font-weight:550;color:#5b6776;white-space:nowrap; }
.badge.completed { color:#267148; }
.badge.running { color:#2455a0; }
.badge.failed { color:#a63f35; }
.badge.queued { color:#876027; }
.secondary-text { display:block;margin-top:5px;font-size:12px;color:var(--muted); }
.history-scroll { max-height:360px; }
.history-scroll table { min-width:560px; }
.history-scroll td:first-child { max-width:240px;overflow-wrap:anywhere; }
.history-scroll td button { min-height:36px;padding:6px 12px;font-size:13px; }
.history-scroll td button[aria-pressed=true] { border-color:var(--blue);color:var(--blue);background:#fff; }
.results-area { margin-top:32px;padding-top:28px;border-top:1px solid var(--line); }
.empty-result { padding:28px 24px;margin:0;background:var(--subtle);text-align:center;color:var(--muted); }
.demo-banner { padding:12px 16px;background:#fff9e9;border-left:3px solid #c6a05a;margin:16px 0;color:#80642d;font-size:13px; }
.result-layout { display:grid;grid-template-columns:minmax(0,1.55fr) minmax(180px,1fr);gap:24px;margin-top:20px; }
.video-frame { display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#202b39;overflow:hidden; }
.video-frame video { display:block;width:100%;height:100%;object-fit:contain; }
.video-frame p { padding:16px;color:#d5dce6;text-align:center; }
.result-summary h3 { margin:6px 0 16px;overflow-wrap:anywhere; }
.result-summary>.badge { white-space:normal; }
.total-time { display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line); }
.total-time strong { font-size:24px;font-weight:650;font-variant-numeric:tabular-nums; }
.metric-list { margin:10px 0 0; }
.metric-list>div { display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:13px; }
.metric-list dt { color:var(--muted); }
.metric-list dd { margin:0;font-variant-numeric:tabular-nums; }
.record-section { margin-top:28px; }
.artifact-list { display:flex;gap:14px 24px;flex-wrap:wrap; }
.artifact-list a { display:inline-flex;align-items:baseline;gap:8px;min-height:28px; }
.artifact-list small { font-size:12px;color:var(--muted); }
details.record-section { padding-top:20px;border-top:1px solid var(--line); }
details summary { cursor:pointer; }
details pre { font:12px/1.7 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto;padding:16px;background:var(--subtle); }
.ranking-section { margin-top:40px;padding-top:32px;border-top:1px solid var(--line); }
#ranking table { min-width:650px; }

@media(max-width:1000px) {
  .site-header { gap:20px; }
  h1 { font-size:17px; }
  .brand { gap:16px; }
  .brand-logo { width:85px;height:34px; }
  .guest-layout { grid-template-columns:260px minmax(0,1fr);gap:32px; }
  .account-panel { padding-right:24px; }
  .club-media-grid { grid-template-columns:minmax(120px,.35fr) minmax(0,.65fr);gap:20px; }
  .workspace { grid-template-columns:260px minmax(0,1fr);gap:24px; }
  .upload-area { padding:20px; }
  .result-layout { grid-template-columns:1fr; }
  .result-summary { max-width:500px; }
}
@media(max-width:760px) {
  .site-header { padding:20px 20px;flex-wrap:wrap; }
  .brand { align-items:flex-start; }
  .brand-logo { width:80px;height:32px;margin-top:3px; }
  .account-tools { flex-basis:100%;justify-content:flex-end; }
  main { padding:0 20px 40px; }
  .guest-layout { grid-template-columns:1fr;gap:40px;padding-top:32px; }
  .account-panel { max-width:380px;width:100%;margin:auto;border:0;padding:0; }
  .club-section { padding-top:32px;border-top:1px solid var(--line); }
  .club-media-grid { grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:20px; }
  .workspace { grid-template-columns:1fr;gap:32px; }
  .upload-area { padding:24px; }
  .results-area { margin-top:28px;padding-top:24px; }
  .result-layout { grid-template-columns:minmax(0,1.4fr) minmax(180px,1fr); }
  .ranking-section { margin-top:32px;padding-top:28px; }
  .section-heading { margin-bottom:20px; }
}
@media(max-width:500px) {
  .basis-list { grid-template-columns:1fr; }
  h1 { font-size:16px; }
  h2 { font-size:19px; }
  .site-header { padding:18px 20px; }
  .brand { gap:12px; }
  .brand-logo { width:64px;height:26px; }
  .club-media-grid { grid-template-columns:1fr;gap:28px; }
  .club-video-column { grid-row:1; }
  .club-poster { max-width:200px; }
  .result-layout { grid-template-columns:1fr; }
  .upload-area { padding:20px; }
  .history-scroll table { min-width:0;table-layout:fixed; }
  .history-scroll th,.history-scroll td { padding:12px 6px;font-size:12px;overflow-wrap:anywhere; }
  .history-scroll th:first-child { width:34%; }
  .history-scroll th:not(:first-child) { width:22%; }
  .history-scroll th { white-space:normal; }
  .history-scroll .badge { font-size:12px;white-space:normal; }
  .history-scroll td button { width:100%;min-height:44px;padding:6px 4px;font-size:12px;white-space:normal; }
  .history-scroll .secondary-text { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }