:root{
  --bg:#EDF0F4; --surface:#FFFFFF; --ink:#18213A; --muted:#5A6478; --line:#CDD3DD;
  --accent:#2F5BEA; --accent-ink:#FFFFFF; --warn:#B4441F; --rec:#D6334A;
  --a1:#86D6C6; --a2:#3FB8A6; --b1:#3C8FD8; --b2:#2F5BEA; --c1:#5B3FD1; --c2:#2A1F7A;
  --faint:#DCE1E8;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#10162A; --surface:#19213A; --ink:#E8ECF5; --muted:#9AA4BA; --line:#2E3956;
    --accent:#7C9BFF; --accent-ink:#0E1430; --warn:#F08A63; --rec:#FF6B80;
    --a1:#8FE0CF; --a2:#4CCAB6; --b1:#5AA9F0; --b2:#7C9BFF; --c1:#A08CFF; --c2:#CFC5FF;
    --faint:#263051;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10162A; --surface:#19213A; --ink:#E8ECF5; --muted:#9AA4BA; --line:#2E3956;
  --accent:#7C9BFF; --accent-ink:#0E1430; --warn:#F08A63; --rec:#FF6B80;
  --a1:#8FE0CF; --a2:#4CCAB6; --b1:#5AA9F0; --b2:#7C9BFF; --c1:#A08CFF; --c2:#CFC5FF;
  --faint:#263051;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
main{max-width:720px;margin:0 auto;padding:32px 20px 64px}
h1,h2,.display{font-family:"Bricolage Grotesque","IBM Plex Sans KR",system-ui,sans-serif}
h1{font-size:clamp(30px,6vw,44px);line-height:1.15;margin:0 0 12px;font-weight:800;letter-spacing:-0.01em}
h2{font-size:22px;margin:0 0 10px;font-weight:600}
p{margin:0 0 14px;max-width:62ch}
.muted{color:var(--muted)}
button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:11px 18px;font-weight:500}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
button:disabled{opacity:.45;cursor:not-allowed}
input,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 14px;width:100%}
textarea{min-height:150px;resize:vertical;font-family:inherit}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* The staircase: 30 rungs, the one bold element */
.stairs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:28px 0 8px;align-items:end}
.band{display:flex;flex-direction:column;gap:6px}
.band .rungs{display:flex;gap:2px;align-items:end;height:150px}
.rung{flex:1;border-radius:3px 3px 0 0;background:var(--faint);position:relative;transition:background .3s}
.rung.on{background:var(--c)}
.rung.me{background:var(--c);outline:2px solid var(--ink);outline-offset:1px}
.band .name{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:14px;text-align:left}
.stairs.grow .rung{transform-origin:bottom;animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.stairs.grow .rung{animation:none}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:22px 0}
.facts div{border-left:3px solid var(--accent);padding-left:12px}
.facts strong{display:block}
.notice{border-left:3px solid var(--warn);padding:10px 14px;background:var(--surface);border-radius:0 10px 10px 0;margin:14px 0;font-size:15px}

/* Question screen */
.progress{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;font-size:14px;color:var(--muted)}
.track{height:4px;background:var(--faint);border-radius:2px;overflow:hidden;margin-bottom:26px}
.track i{display:block;height:100%;background:var(--accent);transition:width .3s}
.question{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(22px,4.4vw,30px);line-height:1.3;font-weight:600;margin:0 0 18px;max-width:30ch}
.recorder{display:flex;align-items:center;gap:18px;margin:24px 0 16px;flex-wrap:wrap}
.mic{width:84px;height:84px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;padding:0;flex:none}
.mic.live{background:var(--rec);color:#fff;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rec) 45%,transparent)}50%{box-shadow:0 0 0 14px transparent}}
@media (prefers-reduced-motion:reduce){.mic.live{animation:none}}
.mic svg{width:34px;height:34px}
.timer{font-family:"Bricolage Grotesque",sans-serif;font-size:28px;font-weight:600;font-variant-numeric:tabular-nums}
.transcript{min-height:110px;padding:14px 16px;border:1px dashed var(--line);border-radius:10px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.transcript .interim{color:var(--muted)}
.transcript:empty::before{content:attr(data-empty);color:var(--muted)}

/* Result */
.level{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(64px,16vw,112px);line-height:1;letter-spacing:-0.02em;margin:6px 0 6px}
.crit{display:grid;grid-template-columns:7.5em 1fr 4em;gap:10px;align-items:center;margin:8px 0;font-size:15px}
.crit .bar{height:10px;background:var(--faint);border-radius:5px;overflow:hidden}
.crit .bar i{display:block;height:100%;border-radius:5px}
.crit .code{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;text-align:right}
ul.clean{padding-left:1.2em;margin:0 0 14px}
ul.clean li{margin:4px 0}
details{margin-top:18px}
summary{cursor:pointer;font-weight:500}
.qa{border-top:1px solid var(--line);padding:12px 0;font-size:15px}
.qa b{display:block;margin-bottom:4px}
section+section{margin-top:28px}
.spinner{width:28px;height:28px;border:3px solid var(--faint);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;display:inline-block;vertical-align:middle;margin-right:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 추가: 입력 폼, 관리자 화면, 인쇄 ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-weight:500;font-size:15px}
.error{color:var(--warn);font-size:14px;margin:6px 0 0;min-height:1.2em}
.done{margin-top:48px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.topbar h1{font-size:26px;margin:0}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-weight:500;color:var(--muted);font-size:13px}
tbody tr{cursor:pointer}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
tbody tr:last-child td{border-bottom:none}
.lv{font-family:"Bricolage Grotesque",sans-serif;font-weight:600}
.tag{font-size:13px;padding:2px 8px;border-radius:6px;border:1px solid var(--line)}
.tag.failed{color:var(--warn);border-color:var(--warn)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 20px;margin:4px 0 18px;font-size:15px}
.meta span{color:var(--muted);display:block;font-size:13px}
.report section{margin-top:24px}
.report h2{font-size:19px}
.report .level{font-size:clamp(56px,12vw,92px)}
.danger{color:var(--warn);border-color:var(--warn)}
@media print{
  @page{size:A4;margin:14mm}
  :root,:root[data-theme],body{--bg:#fff;--surface:#fff;--ink:#111;--muted:#555;--line:#bbb;--faint:#e3e6ea;background:#fff;color:#111;padding:0}
  .noprint{display:none!important}
  main{max-width:none;padding:0}
  .panel{border:1px solid #bbb}
  .report section{break-inside:avoid}
  .qa{break-inside:avoid}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  details{display:block}
  details>summary{list-style:none}
}
table.guide td{white-space:normal;vertical-align:top;font-size:14px;line-height:1.55}
table.guide td:first-child{white-space:nowrap}
table.guide tbody tr{cursor:default}
table.guide tbody tr:hover{background:transparent}
table.guide tr.cur{background:color-mix(in srgb,var(--accent) 10%,transparent)!important;outline:2px solid var(--accent);outline-offset:-2px}