/* 학교별 내신 단어 앱 엔진 · 색은 index.html의 :root(--brand 등)에서 고객별로 바뀐다 */
:root{--ink:#16232e;--text:#2f3d48;--muted:#61707c;--line:#e3e8ec;--bg:#f5f7f7;--ok:#1f7a55;--bad:#b4413b}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;letter-spacing:-.2px;-webkit-font-smoothing:antialiased}
main{max-width:720px;margin:auto;padding:22px 16px 60px}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
/* 머리 */
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mark{font-size:26px;font-weight:900;letter-spacing:-1px;line-height:1}
.mark b{color:var(--deep)}.mark span{color:var(--brand)}.mark i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:3px;vertical-align:top}
.tag{font-size:12.5px;color:var(--muted);margin-top:6px}
.who{font-size:12px;font-weight:700;color:var(--brand);background:var(--soft);padding:6px 11px;border-radius:999px;white-space:nowrap}
.who.me{border:0;cursor:pointer;font-family:inherit}
/* 로그인 */
.login h1{font-size:22px;font-weight:900;letter-spacing:-.5px;margin:0 0 6px}
.login .lead{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.6}
.login form{display:grid;gap:12px}
.login label{display:grid;gap:6px;font-size:13px;font-weight:800;color:var(--text)}
.login input:not([type=checkbox]){font:inherit;font-size:16px;font-weight:600;min-height:50px;padding:0 14px;border:1.5px solid var(--line);border-radius:13px;background:#fff;color:var(--ink)}
.login input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--soft)}
.login .agree{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:12.5px;color:var(--muted);line-height:1.55;background:var(--soft);padding:12px;border-radius:12px}
.login .agree input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--brand);flex-shrink:0}
.login .err{min-height:0;margin:0;color:var(--bad);font-size:13px;font-weight:700}.login .err:empty{display:none}
/* 과정 고르기 */
.courses{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;margin:0 -16px 14px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.course{flex-shrink:0;border:1px solid var(--line);background:#fff;border-radius:14px;padding:9px 14px;text-align:left;color:var(--ink);min-width:150px}
.course small{display:block;font-size:11.5px;color:var(--muted);font-weight:600}.course strong{font-size:15px;font-weight:800}
.course[aria-pressed=true]{border-color:var(--brand);background:var(--brand);color:#fff}.course[aria-pressed=true] small{color:#ffffffc0}
.course:disabled{opacity:.55;cursor:default}
/* 과정 카드 */
.hero{background:linear-gradient(135deg,var(--deep),var(--brand));color:#fff;border-radius:22px;padding:22px;box-shadow:0 12px 28px #0b2a2622}
.hero .eyebrow{font-size:12px;font-weight:700;opacity:.8}
.hero h1{font-size:25px;font-weight:900;letter-spacing:-.6px;margin:4px 0 2px}
.hero .meta{font-size:13px;opacity:.85}
.dday{float:right;background:var(--accent);color:#2a1d05;font-weight:900;font-size:13px;padding:6px 11px;border-radius:999px}
.track{height:7px;background:#ffffff2e;border-radius:9px;overflow:hidden;margin:16px 0 8px}.track i{display:block;height:100%;background:var(--accent);border-radius:9px;transition:width .4s}
.hero .prog{display:flex;justify-content:space-between;font-size:12.5px;opacity:.9}
/* 이어서 */
.next{display:flex;align-items:center;gap:14px;background:#fff;border-radius:18px;padding:16px 16px 16px 18px;margin-top:12px;box-shadow:0 1px 3px #0b2a260f,0 6px 16px #0b2a260a}
.next div{flex:1;min-width:0}.next small{font-size:12px;color:var(--brand);font-weight:800}.next strong{display:block;font-size:19px;font-weight:900;letter-spacing:-.4px}.next span{font-size:12.5px;color:var(--muted)}
.btn{border:0;border-radius:14px;background:var(--brand);color:#fff;font-weight:800;font-size:15px;min-height:50px;padding:0 20px}
.btn:hover{background:var(--deep)}.btn.ghost{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}.btn.ghost:hover{background:var(--soft)}
.btn.wide{width:100%}
/* 지문 목록 */
h2.sec{font-size:17px;font-weight:900;letter-spacing:-.3px;margin:26px 2px 10px}
.units{display:grid;gap:10px}
.unit{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 1px 3px #0b2a260f}
.unit:hover{box-shadow:0 4px 14px #0b2a2614}
.num{flex-shrink:0;width:44px;height:44px;border-radius:13px;background:var(--soft);color:var(--brand);display:grid;place-items:center;font-weight:900;font-size:16px}
.unit.done .num{background:var(--brand);color:#fff}
.unit .t{flex:1;min-width:0}.unit .t strong{display:block;font-size:16px;font-weight:800;color:var(--ink)}.unit .t span{font-size:12.5px;color:var(--muted)}
.state{font-size:12.5px;font-weight:800;color:var(--brand);white-space:nowrap}.unit.done .state{color:var(--ok)}
.chev{color:#a5b0b8;font-size:22px}
.soon{background:#fff;border-radius:18px;padding:30px 20px;text-align:center;color:var(--muted)}
footer{margin-top:34px;text-align:center;font-size:11.5px;color:#93a0a9;line-height:1.7}
/* 시험 */
.qtop{position:sticky;top:0;z-index:5;background:var(--bg);padding:6px 0 10px}
.qbar{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;color:var(--muted)}
.qbar .x{border:0;background:transparent;font-size:22px;color:var(--muted);width:36px;height:36px;border-radius:50%}
.qbar .x:hover{background:#e9eeee}.qbar .track{flex:1;margin:0;height:6px;background:#e1e8e7}.qbar .track i{background:var(--brand)}
.card{background:#fff;border-radius:22px;padding:26px 18px 20px;box-shadow:0 1px 3px #0b2a260f,0 8px 22px #0b2a260a}
.qlabel{text-align:center;font-size:12.5px;font-weight:800;color:var(--brand)}
.word{text-align:center;font-size:clamp(32px,9vw,44px);font-weight:900;letter-spacing:-1px;margin:6px 0 4px;overflow-wrap:anywhere;line-height:1.2}
.ex{margin:10px 0 0;padding:12px 14px;background:var(--soft);border-radius:12px;font-size:14.5px;color:var(--text);line-height:1.6}.ex b{color:var(--brand)}
.opts{display:grid;gap:10px;margin-top:22px}
.opt{display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:15px;min-height:58px;padding:10px 14px;font-size:16px;font-weight:700;color:var(--ink)}
.opt:hover:not(:disabled){border-color:#bccbc9;background:#fafcfc}
.opt .k{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--brand);display:grid;place-items:center;font-size:13px;font-weight:900}
.opt.ok{border-color:var(--ok);background:#eef7f2;color:#165b40}.opt.ok .k{background:var(--ok);color:#fff}
.opt.no{border-color:var(--bad);background:#fdf1f0;color:#8d2f2b}.opt.no .k{background:var(--bad);color:#fff}
.opt:disabled{cursor:default}
.idk{display:block;margin:14px auto 0;border:0;background:transparent;color:var(--muted);font-weight:700;text-decoration:underline;text-underline-offset:4px;min-height:40px}
.fb{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--soft);font-size:14.5px}.fb strong{display:block;font-size:16px;margin-bottom:2px}
.fb.good strong{color:var(--ok)}.fb.bad strong{color:var(--bad)}
.qact{display:grid;gap:10px;margin-top:14px}
/* 결과 */
.score{text-align:center}.score .big{font-size:52px;font-weight:900;letter-spacing:-2px;color:var(--brand);line-height:1.1}.score .big small{font-size:22px;color:var(--muted)}
.score p{margin:4px 0;color:var(--muted)}
.wrongs{margin-top:16px;border-top:1px solid var(--line)}
.wrongs li{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14.5px}.wrongs li b{font-weight:800}
.wrongs ol{list-style:none;padding:0;margin:0}
@media(min-width:720px){main{padding-top:34px}.units{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}