/* 학교별 내신 단어 앱 엔진 · 색은 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{text-decoration:none;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}
/* 과정이 많을 때: 현재 과정 한 줄 + 고르기 창 */
.curc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:12px 14px;margin-bottom:12px;color:var(--ink)}
.curc .ic{font-size:20px}.curc .tx{flex:1;min-width:0}.curc small{display:block;font-size:11.5px;color:var(--muted);font-weight:700}.curc strong{display:block;font-size:15.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.curc .chg{flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--brand);background:var(--soft);padding:6px 10px;border-radius:999px}
.picker{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;max-height:82vh;border-radius:22px 22px 0 0;display:flex;flex-direction:column}.picker:not([open]){display:none}
.picker::backdrop{background:#0b1a1a66}
.picker .ph{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}.picker .ph strong{font-size:18px;font-weight:900}
.picker .x{border:0;background:var(--soft);width:34px;height:34px;border-radius:50%;font-size:18px;color:var(--ink)}
.picker .q{margin:0 16px 8px;font:inherit;font-size:15px;min-height:46px;padding:0 14px;border:1.5px solid var(--line);border-radius:13px}
.picker .q:focus{outline:none;border-color:var(--brand)}
.picker .pl{overflow-y:auto;padding:4px 16px 24px}
.picker .grp{margin-top:12px}.picker .gname{font-size:12.5px;font-weight:900;color:var(--brand);margin:0 2px 6px}
.picker .pi{display:flex;align-items:center;width:100%;text-align:left;gap:10px;border:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 4px;color:var(--ink)}
.picker .pi span{flex:1}.picker .pi b{font-size:15px}.picker .pi small,.picker .pi em{display:block;font-size:12px;color:var(--muted);font-style:normal}
.picker .pi.on b{color:var(--brand)}.picker .pi i{color:var(--brand);font-style:normal;font-weight:900}.picker .pi:disabled{opacity:.5}
.picker .none{color:var(--muted);font-size:14px;text-align:center;padding:20px 0}
/* 과정 카드 */
.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}}
/* 누적 랭킹 */
.rank{background:#fff;border-radius:18px;margin-top:12px;padding:14px 16px 12px;box-shadow:0 1px 3px #0b2a260f,0 6px 16px #0b2a260a}
.rk-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}.rk-h strong{font-size:15.5px;font-weight:900}.rk-h span{font-size:11.5px;color:var(--muted)}
.rank ol{list-style:none;margin:0;padding:0}.rank li{display:grid;grid-template-columns:28px 1fr auto 62px;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:14px}
.rank li:last-child{border-bottom:0}.rank li b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank li.me{background:var(--soft);border-radius:10px;margin:0 -6px;padding-left:8px;padding-right:8px}
.rank .pt{font-weight:800;font-variant-numeric:tabular-nums}.rank .ca{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.rank .ca i{font-style:normal;color:var(--ok);font-weight:800}
.md{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;color:var(--muted)}
.md.m1{background:#f4c542;color:#5a4300}.md.m2{background:#cfd6de;color:#3b4652}.md.m3{background:#e3a06a;color:#4f2a0c}
.rank ol.mine{margin-top:4px;border-top:1px dashed var(--line);padding-top:4px}
.rk-f,.rk-l{margin:6px 2px 0;font-size:11.5px;color:var(--muted)}.rk-l{font-size:13px;padding:8px 0}

/* 통과(80%)·재시험 표시 */
.unit .state em{font-style:normal;display:block;font-size:11px;font-weight:800}.unit .state em.ok{color:var(--ok)}.unit .state em.re{color:#c25b12}
.unit.retry{border-color:#f0c9a8;background:#fffaf5}
.next.retry{border:1.5px solid #f0c9a8;background:#fffaf5}.next.retry small{color:#c25b12}.next.retry .btn{background:#c25b12;border-color:#c25b12}
.score .badge{display:inline-block;margin:6px 0 2px;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:800}
.score .badge.ok{background:#e4f5ea;color:var(--ok)}.score .badge.re{background:#fff0e3;color:#c25b12}
.score.fail .big{color:#c25b12}.wrongs .wh{font-size:13px;font-weight:800;color:#c25b12;margin:0 0 6px}
.rank li b em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}

/* 홈 화면 추가 안내 막대 */
.install-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 4px 14px #0b1a3014}
.install-bar[hidden]{display:none}
.install-bar img{border-radius:10px;flex-shrink:0}
.install-bar div{flex:1;min-width:0}.install-bar strong{display:block;font-size:14px;color:var(--ink)}
.install-bar span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:1px;word-break:keep-all}
.install-bar.open span{color:var(--ink);font-size:13px}.install-bar b{color:var(--brand)}
#install-btn{border:0;background:var(--brand);color:#fff;font:inherit;font-size:14px;font-weight:800;border-radius:10px;padding:9px 14px;white-space:nowrap}
.install-x{border:0;background:transparent;color:var(--muted);font-size:20px;width:30px;height:30px;flex-shrink:0}
footer .tlink{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 단어 발음 */
.wordrow{display:flex;align-items:center;justify-content:center;gap:8px}
.wordrow .word{margin:6px 0 4px}
.say{flex-shrink:0;border:0;background:var(--soft);width:42px;height:42px;border-radius:50%;font-size:19px;line-height:1;cursor:pointer}
.say:active{transform:scale(.94)}
.sayauto{display:block;margin:0 auto 6px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.sayauto[aria-pressed=true]{color:var(--brand)}

/* 단원 줄: 시험 + 듣기·PDF */
.urow{display:flex;flex-direction:column;gap:6px}
.uacts{display:flex;gap:6px;padding:0 4px}
.ua{border:1px solid var(--line);background:#fff;color:var(--brand);font:inherit;font-size:12.5px;font-weight:800;border-radius:999px;padding:6px 12px;text-decoration:none;cursor:pointer}
/* 단어 듣기 화면 (수능 D-50 듣기와 같은 구성) */
.lh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.lb{font-size:13px;font-weight:800;color:var(--accent)}
.btn.sm{min-height:36px;padding:0 16px;font-size:13.5px;border-radius:999px}
.lt{font-size:clamp(26px,6vw,36px);font-weight:900;letter-spacing:-.8px;color:var(--brand);margin:14px 0 4px;line-height:1.25}
.ls{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.lnav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:0 0 12px}
.lnav button{border:0;background:transparent;color:var(--brand);font:inherit;font-weight:800;font-size:14px;padding:8px;cursor:pointer}
.lnav button:last-child{text-align:right}.lnav .lback{color:var(--muted)}
.lctl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;position:sticky;top:0;background:#f6f8fb;padding:8px 0;z-index:5}
.lctl button,.lctl a{border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:14px;font-weight:800;border-radius:12px;padding:9px 14px;text-decoration:none;cursor:pointer}
.lctl .lplay{background:var(--brand);color:#fff;border-color:var(--brand)}
.lctl .ltog[aria-pressed=true]{background:var(--soft);border-color:var(--accent);color:var(--brand)}
.lw{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.lw li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:14px 10px;border-radius:14px;cursor:pointer}
.lw li.on{background:var(--soft)}
.lw .n{color:var(--accent);opacity:.55;font-weight:800;font-size:14px;padding-top:4px}
.lw .w{font-size:21px;font-weight:900;color:var(--brand);letter-spacing:-.3px}
.lw .m{font-size:15px;color:#33415a;margin-top:2px}.lw .m i{font-style:normal;font-size:12px;font-weight:800;color:var(--accent);border:1px solid var(--line);border-radius:6px;padding:1px 5px;margin-right:4px}
.lw .e{font-size:14px;color:#6b7a90;margin-top:4px;line-height:1.55}.lw .e b{color:var(--brand)}
.lw .k{font-size:13px;color:#8a95a6;margin-top:2px;line-height:1.5}
.lw.hide li:not(.show) .m,.lw.hide li:not(.show) .k{filter:blur(6px);user-select:none}
/* 듣기 단어마다 네모 칸 (2026-10-23, D-50처럼 카드로 나눠 보기 쉽게) */
.lw{gap:10px}
.lw li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 14px;box-shadow:0 1px 3px #0b1a300d}
.lw li.on{background:var(--soft);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
@media(max-width:480px){.lctl{gap:6px;flex-wrap:nowrap}.lctl button,.lctl a{font-size:13px;padding:8px 10px;white-space:nowrap}}

/* 단어 / 반의어 탭 (수능 D-50 탭과 같은 모양) */
.ctabs{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:4px;padding:5px;background:#e9eef6;border-radius:14px;margin:4px 0 14px}
.ctabs button{border:0;background:transparent;color:var(--brand);font:inherit;font-size:clamp(13px,3.8vw,15px);padding:0 2px;font-weight:800;min-height:44px;border-radius:10px;cursor:pointer}
.ctabs button[aria-selected=true]{background:var(--brand);color:#fff;box-shadow:0 3px 10px #172e5820}

.defq{text-align:left;font-size:clamp(17px,4.6vw,20px);font-weight:700;line-height:1.5;margin:6px 0 4px;flex:1;letter-spacing:-.2px}
/* 단어 300 책 앱 추가 스타일 */
.lw li.stp{display:block;margin:18px 0 6px;padding:6px 10px;border-radius:8px;background:var(--soft);color:var(--deep);font-weight:800;font-size:14px;cursor:default;list-style:none;border:0;box-shadow:none}
.lw li.stp::before{content:none}
.src{display:inline-block;margin-left:4px;padding:0 6px;border-radius:6px;background:#f1f3f6;color:#7a8394;font-size:11px;font-weight:600;white-space:nowrap;vertical-align:1px}
/* 표지 배경 조금 쓰기 (2026-11-16): 첫 화면 큰 상자 오른쪽에 표지 그림, 화면 위쪽에 아주 옅게 */
body{background:linear-gradient(180deg,rgba(246,248,252,.86) 0,#f6f8fc 420px),url(cover-bg.jpg) center top/760px auto no-repeat,#f6f8fc}
.hero{background:linear-gradient(95deg,var(--deep) 0,rgba(3,44,99,.92) 42%,rgba(5,65,143,.35) 78%,rgba(5,65,143,.1) 100%),url(cover-bg.jpg) right 35%/auto 150% no-repeat,var(--brand);min-height:170px}