:root { --bg:#f5f7f6; --card:#fff; --ink:#1c2321; --sub:#66736e; --line:#e2e8e5; --green:#1f9d6b; --green-d:#167a53; --green-l:#e6f5ee; --red:#c0392b; --amber:#b7791f; --amber-l:#fdf3df; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#111815; --card:#1a231f; --ink:#e9efec; --sub:#93a39c; --line:#2a3631; --green:#38c48a; --green-d:#5ad9a3; --green-l:#17332a; --red:#ff8b7b; --amber:#f0b95a; --amber-l:#3a2f17; } }
:root[data-theme="dark"] { --bg:#111815; --card:#1a231f; --ink:#e9efec; --sub:#93a39c; --line:#2a3631; --green:#38c48a; --green-d:#5ad9a3; --green-l:#17332a; --red:#ff8b7b; --amber:#f0b95a; --amber-l:#3a2f17; } 
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",sans-serif; line-height:1.5; }
button { font:inherit; cursor:pointer; }
.wrap { max-width:640px; margin:0 auto; padding:20px 16px 48px; }
.wrap.narrow { max-width:420px; padding-top:32px; }
.brand { text-align:center; margin-bottom:22px; } .brand b { font-size:22px; color:var(--green-d); } .brand span { display:block; color:var(--sub); font-size:14px; margin-top:2px; }
.loading { text-align:center; color:var(--sub); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:12px; }
h2 { margin:0 0 4px; font-size:18px; } p.hint { margin:4px 0 14px; color:var(--sub); font-size:14px; }
label.f { display:block; font-size:13px; color:var(--sub); margin-bottom:6px; }
input.t { width:100%; font-size:20px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); letter-spacing:1px; }
input.code { text-align:center; font-size:28px; letter-spacing:10px; }
.btn { width:100%; margin-top:14px; background:var(--green); color:#fff; border:0; border-radius:12px; padding:14px; font-size:16px; font-weight:600; }
.btn:disabled { opacity:.6; }
.link { display:block; width:100%; text-align:center; margin-top:12px; color:var(--green-d); font-size:14px; background:none; border:0; }
.check { display:flex; gap:8px; align-items:center; margin-top:14px; font-size:14px; color:var(--sub); }
.check input { width:18px; height:18px; accent-color:var(--green); }
.masked { background:var(--green-l); color:var(--green-d); border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:14px; }
.err { color:var(--red); font-size:13px; margin-top:8px; min-height:1em; }
.timer { text-align:center; color:var(--sub); font-size:13px; margin-top:10px; }

header.top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.who b { font-size:18px; } .who span { display:block; color:var(--sub); font-size:13px; }
.out { color:var(--sub); font-size:13px; background:none; border:1px solid var(--line); border-radius:8px; padding:6px 10px; }
.tabs { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.tab { padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); font-size:13px; color:var(--sub); }
.tab.on { background:var(--green-l); color:var(--green-d); border-color:transparent; font-weight:600; }
.hero { padding:24px 22px; }
.hero .label { color:var(--sub); font-size:14px; }
.hero .score { font-size:60px; font-weight:700; color:var(--green); line-height:1.1; margin:4px 0; }
.hero .score small { font-size:22px; color:var(--sub); font-weight:500; margin-left:4px; }
.chips { display:flex; gap:10px; margin:14px 0 10px; flex-wrap:wrap; }
.chip { flex:1; min-width:92px; background:var(--bg); border-radius:12px; padding:10px 14px; }
.chip .k { display:block; } .chip b { font-size:24px; } .chip small { color:var(--sub); margin-left:3px; }
.chip.g { background:var(--green-l); } .chip.g b { color:var(--green-d); }
.fine { font-size:12px; color:var(--sub); }
.notice { background:var(--amber-l); color:var(--amber); border-radius:10px; padding:8px 12px; font-size:13px; margin-top:10px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; } .grid .card { margin:0; }
.k { color:var(--sub); font-size:13px; } .v { font-size:28px; font-weight:700; margin-top:2px; } .v small { font-size:14px; color:var(--sub); font-weight:500; }
.bars { display:flex; align-items:flex-end; gap:6px; height:120px; margin-top:22px; }
.bar { flex:1; background:var(--line); border-radius:6px 6px 0 0; position:relative; min-height:2px; }
.bar.me { background:var(--green); }
.bar em { position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:11px; font-style:normal; color:var(--green-d); white-space:nowrap; }
.ticks { display:flex; gap:6px; margin-top:6px; color:var(--sub); font-size:11px; } .ticks span { flex:1; text-align:center; }
details { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 20px; margin-bottom:12px; }
summary { cursor:pointer; color:var(--green-d); font-weight:600; list-style:none; } summary::-webkit-details-marker { display:none; }
summary::before { content:"▸ "; } details[open] summary::before { content:"▾ "; }
.detail { display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; margin-top:14px; }
.note { color:var(--sub); font-size:12px; text-align:center; margin-top:18px; }
.section { margin:24px 0 8px; font-size:13px; color:var(--sub); }
.list { padding:6px 20px; } .row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); width:100%; background:none; border-left:0; border-right:0; border-top:0; color:inherit; text-align:left; }
.row:last-child { border-bottom:0; } .row small { display:block; color:var(--sub); font-size:12px; } .row .r { text-align:right; } .row .r b { color:var(--green-d); }
.row .miss { color:var(--amber); font-weight:600; }
.back { background:none; border:0; color:var(--green-d); font-size:14px; padding:0; margin-bottom:12px; }

/* 퀴즈 */
.quizcard { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--green-l); border-color:transparent; }
.quizcard b { display:block; color:var(--green-d); } .quizcard span { font-size:13px; color:var(--sub); }
.quizcard .btn { width:auto; margin:0; padding:10px 16px; white-space:nowrap; }
.quizcard.done { display:block; font-size:14px; color:var(--green-d); }
.quizhead { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; background:var(--bg); padding:12px 0; margin-bottom:6px; border-bottom:1px solid var(--line); }
.quizhead b { font-size:17px; } #qtimer { font-weight:700; color:var(--green-d); font-variant-numeric:tabular-nums; } #qtimer.hurry { color:var(--red); }
.qcard { position:relative; padding-left:52px; }
.qno { position:absolute; left:16px; top:18px; width:26px; height:26px; border-radius:50%; background:var(--green-l); color:var(--green-d); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.qt { margin-bottom:12px; }
.opts { display:grid; gap:8px; } .ox { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt { text-align:left; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:15px; }
.opt span { color:var(--sub); margin-right:8px; } .ox .opt { text-align:center; font-size:22px; font-weight:700; }
.opt.on { background:var(--green-l); border-color:var(--green); color:var(--green-d); } .opt.on span { color:var(--green-d); }
.qcard.ok .ans span { color:var(--green-d); font-weight:700; } .qcard.no .ans span { color:var(--red); font-weight:700; }
.ans { font-size:14px; margin-top:4px; }

.qnav { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.qnav a { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; text-decoration:none; color:var(--sub); background:var(--card); border:1px solid var(--line); }
.qnav a.on { background:var(--green-l); color:var(--green-d); border-color:transparent; font-weight:700; }
.qcard { scroll-margin-top:70px; }
@media (min-width: 900px) { .wrap { max-width:760px; } }   /* PC·태블릿에서 조금 넓게 */
.qt { white-space:pre-line; }

.qnav.study a.bad { background:#fdecea; color:var(--red); border-color:transparent; font-weight:700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qnav.study a.bad { background:#3d2220; } }
:root[data-theme="dark"] .qnav.study a.bad { background:#3d2220; } 
.qnav.study a.cur { outline:2px solid var(--green); }
.opt.bad { background:#fdecea; border-color:var(--red); color:var(--red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .opt.bad { background:#3d2220; } }
:root[data-theme="dark"] .opt.bad { background:#3d2220; } 

.theme { position:fixed; right:14px; bottom:14px; z-index:5; border:1px solid var(--line); background:var(--card); color:var(--sub); border-radius:999px; padding:7px 12px; font-size:13px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.qtab { border-collapse:collapse; margin:6px 0; font-size:14px; white-space:normal; } .qtab th, .qtab td { border:1px solid var(--line); padding:4px 8px; text-align:left; } .qtab th { background:var(--bg); }