/* 영피디 TRACK — 시안(design/sian_20261110.html)의 토큰 · 레이아웃 · PILL 세 상태를 그대로 옮김.
   시안에 없던 것(듣기 · 틀린 번호 칩 · 문항 카드 · 유형 막대 · 경고)은 같은 토큰으로만 만든다. */
:root{
  --bg:#FAF9F7; --surface:#FFFFFF; --surface-2:#F2F0EC;
  --fg:#1A1917; --muted:#6E6A62; --line:#E3DFD8;
  --accent:#9A6A1E; --accent-soft:#F2E7D2;
  --err:#C0392B;
  --font-display:'Space Grotesk','Noto Sans KR',system-ui,sans-serif;
  --font-body:'Noto Sans KR',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121110; --surface:#1B1917; --surface-2:#232120;
  --fg:#F0EDE8; --muted:#9A948A; --line:#2E2B28;
  --accent:#D9A441; --accent-soft:#3A2F1C; --err:#F08A7A; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#121110; --surface:#1B1917; --surface-2:#232120;
  --fg:#F0EDE8; --muted:#9A948A; --line:#2E2B28;
  --accent:#D9A441; --accent-soft:#3A2F1C; --err:#F08A7A; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--bg); color:var(--fg); font-family:var(--font-body);
  font-size:15px; line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-block:28px 56px}

/* header */
.mast{display:flex;flex-direction:column;gap:6px}
.eyebrow{font-family:var(--font-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--font-display);font-size:26px;line-height:1.2;font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.01em}
.sub{color:var(--muted);font-size:13.5px;margin:0}

/* card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:18px}
.card h2{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:500}

.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.label{font-size:13px;font-weight:500}
.hint{font-size:12px;color:var(--muted);margin:0}

/* pills — 평소 / 올렸을 때 네온 / 고른 상태 */
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{font:inherit;font-size:13px;line-height:1;padding:8px 13px;border-radius:99px;cursor:pointer;
  background:var(--surface-2);color:var(--fg);border:1px solid transparent;transition:background .12s,border-color .12s,box-shadow .12s}
.pill:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pill[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--accent)}
.pill.sm{padding:7px 11px;font-size:12.5px}
.pill:disabled{opacity:.4;cursor:default}
.pill:disabled:hover{border-color:transparent;box-shadow:none}

input[type=text],input[type=password],input[type=number]{
  font:inherit;font-size:15px;width:100%;padding:10px 12px;border-radius:9px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--fg)}
input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.row2{display:flex;gap:10px;flex-wrap:wrap}
.row2>*{flex:1 1 150px;min-width:0}

.go{font:inherit;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.02em;
  padding:14px;border-radius:11px;border:none;cursor:pointer;background:var(--accent);color:var(--bg);width:100%}
.go:hover{filter:brightness(1.08)}
.go:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.go:disabled{opacity:.55;cursor:progress}
.ghost{background:none;border:1px solid var(--line);color:var(--muted);font:inherit;font-size:13px;
  padding:9px 14px;border-radius:9px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ghost:hover{border-color:var(--accent);color:var(--accent)}

.err{color:var(--err);font-size:12.5px;margin:0}
.warn{color:var(--accent);font-size:12.5px;margin:0}

/* 듣기 */
.audio{display:flex;flex-direction:column;gap:10px}
.audio .t{font-size:13px;font-weight:500}
.audio audio{width:100%}
.audio .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* 틀린 번호 칩 */
.chips{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.chip{font-family:var(--font-display);font-size:12.5px;font-variant-numeric:tabular-nums;line-height:1;
  padding:6px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent)}
.chip.p3{font-weight:700}
.chip small{font-size:10px;margin-left:3px;opacity:.8}

/* result */
.result{display:flex;flex-direction:column;gap:20px}
.verdict{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center;padding:6px 0 2px}
.grade{font-family:var(--font-display);font-size:62px;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.grade small{font-size:22px;font-weight:500;margin-left:2px}
.vline{font-size:13.5px;color:var(--muted)}
.score-big{font-family:var(--font-display);font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.stat{background:var(--surface);padding:13px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.stat .k{font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.stat .v{font-family:var(--font-display);font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.stat .n{font-size:11.5px;color:var(--muted)}

/* histogram */
.chart{display:flex;flex-direction:column;gap:9px}
.bars{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-items:end;height:132px}
.bar{position:relative;background:var(--surface-2);border-radius:4px 4px 0 0;min-height:3px}
.bar.me{background:var(--accent)}
.bar .cnt{position:absolute;top:-16px;left:0;right:0;text-align:center;font-family:var(--font-display);
  font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.bar.me .cnt{color:var(--accent);font-weight:700}
.axis{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;font-family:var(--font-display);
  font-size:9.5px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.axis span{overflow:hidden}
.caption{font-size:12px;color:var(--muted);margin:0}

/* peer rows — 같은 출발선 · 유형별 정답률 · 많이 틀린 문항이 같이 쓴다 */
.peers{display:flex;flex-direction:column;gap:10px}
.peer{display:flex;align-items:center;gap:11px;min-width:0}
.peer .pk{font-size:12.5px;color:var(--muted);flex:0 0 92px;min-width:0}
.track{flex:1 1 auto;height:8px;border-radius:99px;background:var(--surface-2);position:relative;min-width:0}
.fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--accent)}
.mark{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--fg)}
.peer .pv{font-family:var(--font-display);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto}
.peer .pv small{font-weight:500;color:var(--muted);font-size:11.5px;margin-left:4px}
.peer.thin .pv{font-weight:500;color:var(--muted);font-size:12px}

.items .peer .pk{flex-basis:118px;color:var(--fg)}
.items .peer .pk .no{font-family:var(--font-display);font-variant-numeric:tabular-nums}
.items .peer .pk .ty{color:var(--muted);font-size:11.5px;margin-left:5px}
.items .peer.mine .pk{font-weight:700}
.items .peer.mine .pk .ty{color:var(--accent)}
.items .peer:not(.mine) .fill{opacity:.45}

.calib{border:1px dashed var(--line);border-radius:11px;padding:14px;display:flex;flex-direction:column;gap:5px;background:var(--surface-2)}
.calib .t{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-family:var(--font-display)}
.calib .b{font-size:14px}
.calib .m{font-size:13px;color:var(--muted)}
.calib b{font-family:var(--font-display);font-variant-numeric:tabular-nums}

.foot{font-size:12px;color:var(--muted);text-align:center;line-height:1.7}
.consent{font-size:11.5px;color:var(--muted);line-height:1.6;margin:0}
.tabs{display:flex;gap:7px}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ts{min-height:65px}

/* 관리자 */
.admin .wrap{max-width:1100px}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:6px 6px;text-align:left;white-space:nowrap}
.tbl th{color:var(--muted);font-weight:500;position:sticky;top:0;background:var(--surface)}
.tbl tr.hid td{opacity:.45;text-decoration:line-through}
.tbl tr.flag td{background:var(--accent-soft)}
.scroll{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:11px}