@font-face { font-family: "Pretendard Variable"; src: url("/fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 45 920; font-style: normal; font-display: swap; }
:root {
  --fg:#1c1f26; --muted:#5f6674; --line:#e3e6ec; --bg:#f6f7f9; --surface:#fff;
  --accent:#2f5bea; --accent-hover:#2449c4; --accent-soft:#eef2ff;
  --danger:#b42318; --danger-soft:#fef3f2; --danger-line:#fecdca;
  --ok:#067647; --ok-soft:#ecfdf3; --ok-line:#abefc6;
  --warn:#93370d; --warn-soft:#fffaeb; --warn-line:#fedf89;
  --radius:8px; --radius-lg:12px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --ease:cubic-bezier(.22,1,.36,1);
  --accent-fg:#fff; --line-strong:#cdd2db; --line-hover:#a9b0bd; --focus-ring:rgba(47,91,234,.2); --placeholder:#8a919e;
  --badge-bg:#eef0f4; --row-hover:#fafbfc; --active-soft:#f5f7ff; --evidence-bg:#fff6d6; --danger-hover:#8f1c12;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg:#e8eaee; --muted:#9aa2b1; --line:#2b303b; --bg:#12141a; --surface:#1a1d25;
    --accent:#6b9bff; --accent-hover:#8fb2ff; --accent-soft:#1e2a4a; --accent-fg:#0b0f18;
    --danger:#ff8a80; --danger-soft:#3a1d1a; --danger-line:#6e2b25;
    --ok:#5fd39a; --ok-soft:#13291f; --ok-line:#245a40;
    --warn:#ffcc66; --warn-soft:#2e2410; --warn-line:#6b5116;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4);
    --line-strong:#3a404d; --line-hover:#566070; --focus-ring:rgba(107,155,255,.3); --placeholder:#6f7787;
    --badge-bg:#262b36; --row-hover:#20242d; --active-soft:#1c2540; --evidence-bg:#4a3d12; --danger-hover:#ffb0a8;
    color-scheme:dark;
  }
}
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.55 "Pretendard Variable",Pretendard,system-ui,-apple-system,"Noto Sans KR",sans-serif; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent); color:var(--accent-fg); }
a { color:var(--accent); text-underline-offset:.2em; }
a:hover { color:var(--accent-hover); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
h1 { font-size:1.375rem; line-height:1.3; letter-spacing:-.01em; margin:0 0 1.25rem; text-wrap:balance; }
code { font-size:.875em; background:var(--bg); padding:.1em .35em; border-radius:4px; }
.table, .timeline, .total { font-variant-numeric:tabular-nums; }

/* 레이아웃 */
.shell { display:flex; min-height:100vh; }
.sidebar { width:232px; flex:none; background:var(--surface); border-right:1px solid var(--line); padding:1.25rem .75rem; }
.sidebar .brand { display:block; font-weight:700; font-size:1.125rem; letter-spacing:-.01em; padding:0 .75rem; margin-bottom:1.25rem; text-decoration:none; color:var(--fg); }
.sidebar nav { display:grid; gap:2px; }
.sidebar nav a, .sidebar nav .disabled { display:block; padding:.5rem .75rem; border-radius:var(--radius); text-decoration:none; color:var(--fg); transition:background-color .15s var(--ease); }
.sidebar nav a:hover { background:var(--bg); }
.sidebar nav a.active { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.sidebar nav .disabled { color:var(--muted); cursor:not-allowed; }
.main { flex:1; min-width:0; }
.topbar { display:flex; justify-content:flex-end; align-items:center; gap:1rem; padding:.625rem 1.5rem; background:var(--surface); border-bottom:1px solid var(--line); color:var(--muted); font-size:.875rem; }
main { padding:1.5rem; max-width:1200px; overflow-x:auto; }
.center { display:grid; place-items:center; min-height:100vh; padding:1rem; max-width:none; }

/* 카드·패널 */
.card { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.75rem; box-shadow:var(--shadow); }
.card h1 { margin-bottom:1.25rem; }
.card.wide { max-width:640px; max-height:90vh; overflow:auto; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1rem; box-shadow:var(--shadow); }
.panel h2 { font-size:1.0625rem; margin:0 0 .75rem; }
.panel h3 { font-size:.95rem; margin:1.25rem 0 .5rem; }
.panel h4 { margin:0 0 .5rem; }

/* 폼 */
label { display:block; margin-bottom:.875rem; font-size:.875rem; font-weight:500; }
input, textarea, select { display:block; width:100%; margin-top:.3rem; padding:.5rem .625rem; border:1px solid var(--line-strong); border-radius:var(--radius); font:inherit; color:var(--fg); background:var(--surface); transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
input:hover, textarea:hover, select:hover { border-color:var(--line-hover); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-ring); }
input:disabled, textarea:disabled, select:disabled { background:var(--bg); color:var(--muted); cursor:not-allowed; }
::placeholder { color:var(--placeholder); }
input[type=checkbox], input[type=radio] { display:inline-block; width:auto; margin:0 .4rem 0 0; vertical-align:middle; accent-color:var(--accent); }
.toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem; }
.toolbar input, .toolbar select { width:auto; margin:0; }
.spacer { flex:1; }
.row { display:flex; flex-wrap:wrap; gap:.75rem; }
.row > label { flex:1; min-width:140px; }
.row.picked { justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding:.35rem 0; }
fieldset:disabled .row.picked button { display:none; }
.check { display:flex; gap:.5rem; align-items:flex-start; }
.check input { width:auto; margin:.3rem 0 0; }
.file input { margin-top:.25rem; }
.rubric { border:0; padding:0; margin:0; min-width:0; }
.field-error { color:var(--danger); font-size:.85rem; margin:.25rem 0 0; }
label.invalid input, .criterion.invalid { border-color:var(--danger); background:var(--danger-soft); }

/* 버튼 */
button, a.button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.5rem 1rem; border:1px solid transparent; border-radius:var(--radius); background:var(--accent); color:var(--accent-fg); font:inherit; font-weight:500; text-decoration:none; cursor:pointer; transition:background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); }
button:hover, a.button:hover { background:var(--accent-hover); color:var(--accent-fg); }
button:active, a.button:active { transform:translateY(1px); }
button:disabled { opacity:.55; cursor:progress; transform:none; }
button.link { background:none; color:var(--accent); padding:0; font-weight:inherit; }
button.link:hover { background:none; color:var(--accent-hover); text-decoration:underline; text-underline-offset:.2em; }
button.secondary, .tab { background:var(--surface); color:var(--fg); border-color:var(--line-strong); }
button.secondary:hover, .tab:hover { background:var(--bg); color:var(--fg); }
button.chip { background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:.25rem .75rem; }
button.chip:hover { background:var(--bg); color:var(--fg); }
button.chip.active { border-color:var(--accent); color:var(--accent); font-weight:600; }
.actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }
.actions.left { justify-content:flex-start; flex-wrap:wrap; align-items:center; }
.tabs { display:flex; flex-wrap:wrap; gap:.25rem; margin-bottom:1rem; }
.tab.active { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.link.selected { font-weight:700; }

/* 상태 표시 */
.state { padding:.75rem 1rem; border-radius:var(--radius); margin-bottom:1rem; }
.state.error { background:var(--danger-soft); border:1px solid var(--danger-line); color:var(--danger); }
.state.error ul { margin:.5rem 0 0; padding-left:1.25rem; }
.state.ok { background:var(--ok-soft); border:1px solid var(--ok-line); color:var(--ok); }
.state.warn { background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--warn); }
.state.empty { color:var(--muted); text-align:center; border:1px dashed var(--line-strong); padding:2rem 1rem; }
.spinner { display:inline-block; width:.9em; height:.9em; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-.1em; }
@keyframes spin { to { transform:rotate(360deg); } }
.muted { color:var(--muted); font-size:.875rem; }
.badge { display:inline-block; padding:.05rem .55rem; border-radius:999px; background:var(--badge-bg); color:var(--muted); font-size:.8rem; font-weight:500; }
.badge.ok { background:var(--ok-soft); color:var(--ok); }
.badge.bad { background:var(--danger-soft); color:var(--danger); }
.chip { display:inline-block; padding:0 .5rem; margin-right:.25rem; border:1px solid var(--line); border-radius:999px; font-size:.85rem; }
.total { font-weight:600; }
.total.bad { color:var(--danger); }

/* 표 */
.table { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.table th, .table td { text-align:left; padding:.65rem .875rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.table th { background:var(--bg); color:var(--muted); font-size:.8125rem; font-weight:600; white-space:nowrap; }
.table tbody tr { transition:background-color .15s var(--ease); }
.table tbody tr:hover { background:var(--row-hover); }
.table tr:last-child td { border-bottom:0; }
.table td button, .table .badge { white-space:nowrap; }
.table td input, .table td select { margin:0; }
.table td input[type=number] { display:inline-block; width:6rem; margin-right:.25rem; }
.table td.actions { display:table-cell; margin:0; text-align:right; white-space:nowrap; }
.table td.actions button + button { margin-left:.25rem; }
.pager { display:flex; gap:1rem; align-items:center; justify-content:center; margin-top:1rem; }

/* 모달 */
.modal { position:fixed; inset:0; background:rgba(17,24,39,.5); display:grid; place-items:center; padding:1rem; overflow:auto; z-index:10; }
.modal .card { box-shadow:0 20px 40px -12px rgba(16,24,40,.28); }
.modal[x-cloak] { display:none; }

/* 루브릭·평가 */
.criterion { border:1px solid var(--line); border-radius:var(--radius); padding:.75rem; margin-bottom:.75rem; }
.sample { border-top:1px solid var(--line); padding:.75rem 0; }
.levels, .quotes, .signals { margin:.25rem 0; padding-left:1.25rem; }
.levels li.current { font-weight:600; }

/* 응시자 상세 */
.review video { width:100%; max-height:420px; background:#000; border-radius:var(--radius); }
.timeline { position:relative; height:1.25rem; margin:.5rem 0; background:var(--line); border-radius:4px; }
.marker { position:absolute; top:0; width:.6rem; height:100%; padding:0; transform:translateX(-50%); background:var(--danger); border:0; border-radius:2px; cursor:pointer; }
.marker:hover { background:var(--danger-hover); }
.transcript { list-style:none; padding:0; margin:0; max-height:360px; overflow:auto; }
.transcript li { padding:.25rem .5rem; border-left:3px solid transparent; }
.transcript li.active { border-left-color:var(--accent); background:var(--active-soft); }
.transcript li.evidence { background:var(--evidence-bg); }

/* 좁은 화면: 사이드 메뉴를 상단 가로 막대로 */
@media (max-width: 760px) {
  .shell { flex-direction:column; }
  .sidebar { width:auto; display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto; }
  .sidebar .brand { margin:0; flex:none; }
  .sidebar nav { display:flex; gap:2px; }
  .sidebar nav a, .sidebar nav .disabled { white-space:nowrap; }
  .topbar { padding:.5rem 1rem; flex-wrap:wrap; gap:.5rem 1rem; }
  main { padding:1rem; }
  .card { padding:1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; }
  .spinner { animation-duration:2s; }
}

/* 대시보드 — 시스템 상태 배지, 세션 아코디언, 응시자 상태 누적 막대 */
.badge.bad { background:var(--danger-soft); color:var(--danger); }
.accordion { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.5rem; background:var(--surface); }
button.accordion-head { display:flex; width:100%; justify-content:space-between; align-items:center; gap:1rem; background:none; color:var(--fg); border:0; border-radius:var(--radius); padding:.75rem 1rem; text-align:left; font-weight:400; }
button.accordion-head:hover { background:var(--row-hover); color:var(--fg); }
.accordion-body { padding:0 1rem 1rem; }
.stack { display:flex; height:1.5rem; border-radius:999px; overflow:hidden; background:var(--badge-bg); margin:.5rem 0; }
.stack .seg { display:block; height:100%; }
.legend { list-style:none; display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin:.5rem 0 .75rem; padding:0; font-size:.875rem; }
.legend .dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.35rem; }
.st-invited { background:#9aa2b1; } .st-in_progress { background:#2f5bea; } .st-submitted { background:#7a5af8; }
.st-processing { background:#f79009; } .st-evaluated { background:#12b76a; } .st-needs_review { background:#f04438; } .st-expired { background:#475467; }