/* ============ k — 학습 사이트 스타일 (UX 개선판) ============ */
:root{
  --bg:#f4f1ea; --paper:#fffdf9; --paper2:#faf7f0; --ink:#1f1e1b; --ink2:#4a4741; --muted:#7c7870; --line:#e5dfd2; --line2:#efeadf;
  --accent:#b8452b; --accent-soft:rgba(184,69,43,.09); --accent2:#2b6b8c; --accent2-soft:rgba(43,107,140,.09);
  --good:#2b7a4b; --mid:#b3861a; --bad:#b53a2e;
  --code-bg:#1d1f23; --code-ink:#e8e6e3; --kw:#c678dd; --str:#98c379; --cm:#7f848e; --mac:#e5c07b; --ty:#56b6c2; --num:#d19a66; --lt:#e06c75;
  --font:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,"Noto Serif KR",serif;
  --mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.03);
  --fs:17px; --nav-h:54px;
}
/* hidden 속성은 언제나 숨긴다 (2026-10-04): .btn{display:inline-flex} 같은 규칙이 [hidden] 을 이겨 숨긴 단추가 보이던 것 */
[hidden]{display:none !important}

:root[data-theme="dark"]{ --bg:#141518; --paper:#1d1f23; --paper2:#22252a; --ink:#e9e6e0; --ink2:#c9c5bc; --muted:#948f85; --line:#2e3137; --line2:#282b30; --accent:#e5785c; --accent-soft:rgba(229,120,92,.12); --accent2:#79b8dc; --accent2-soft:rgba(121,184,220,.12); --shadow:none; --code-bg:#121316; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#141518; --paper:#1d1f23; --paper2:#22252a; --ink:#e9e6e0; --ink2:#c9c5bc; --muted:#948f85; --line:#2e3137; --line2:#282b30; --accent:#e5785c; --accent-soft:rgba(229,120,92,.12); --accent2:#79b8dc; --accent2-soft:rgba(121,184,220,.12); --shadow:none; --code-bg:#121316; } }
*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;letter-spacing:-.005em}
a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline}
main{max-width:900px;margin:0 auto;padding:18px 18px 80px} main.wide{max-width:1180px}
h1,h2,h3,h4{line-height:1.3;margin:.5em 0;letter-spacing:-.01em} h1{font-size:1.65rem} h2{font-size:1.2rem;font-weight:600} h3{font-size:1rem;margin-top:1.6em;display:flex;align-items:center;gap:8px} h3 .muted{font-weight:400;font-size:.85em}
code{font-family:var(--mono);font-size:.88em;background:rgba(127,127,127,.13);padding:1px 5px;border-radius:5px}
.muted{color:var(--muted)} .small{font-size:.85em} .dim{opacity:.5;font-size:.6em}
.eyebrow{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:14px 0;box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:9px 16px;border-radius:11px;cursor:pointer;font:inherit;font-size:.95rem;transition:transform .08s,border-color .15s,background .15s}
.btn:hover{border-color:var(--accent2);text-decoration:none;background:var(--paper2)} .btn:active{transform:scale(.98)}
.btn.primary,.btn.big{background:var(--accent);color:#fff;border-color:var(--accent)} .btn.primary:hover,.btn.big:hover{background:var(--accent);filter:brightness(1.08)} .btn.big{font-size:1.08rem;padding:13px 24px}
.btn.ghost{background:transparent} .btn.small{padding:5px 11px;font-size:.84rem}
.btn.good{background:var(--good);color:#fff;border-color:var(--good)} .btn.mid{background:var(--mid);color:#fff;border-color:var(--mid)} .btn.bad{background:var(--bad);color:#fff;border-color:var(--bad)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
button.spk{border:none;background:transparent;cursor:pointer;color:var(--accent2);font-size:.9em;padding:0 5px;border-radius:6px} button.spk:hover{color:var(--accent);background:var(--accent-soft)} button.spk.mini{font-size:.75em}
button.spk.playing{color:var(--accent);animation:pulse 1s infinite} @keyframes pulse{50%{opacity:.4}}
.badge{background:var(--accent);color:#fff;border-radius:10px;padding:0 7px;font-size:.72em;vertical-align:middle;font-weight:600}
.alert{background:#fff3cd;color:#5c4a00;border:1px solid #ffe08a;border-radius:10px;padding:10px 14px;margin:10px 0}
.error{color:var(--bad)}
kbd{font-family:var(--mono);font-size:.78em;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--paper2);color:var(--ink2)}

/* ---------- nav ---------- */
nav.top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 18px;height:var(--nav-h);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);position:sticky;top:0;z-index:20}
nav.top .brand{color:var(--ink);font-size:1.05rem;white-space:nowrap} nav.top .brand .sub{color:var(--muted);font-size:.78rem;margin-left:6px}
nav.top .links{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none} nav.top .links::-webkit-scrollbar{display:none}
nav.top .links a{padding:6px 10px;border-radius:9px;color:var(--ink2);font-size:.92rem;white-space:nowrap} nav.top .links a:hover{background:var(--paper2);text-decoration:none} nav.top .links a.on{color:var(--accent);background:var(--accent-soft);font-weight:600} nav.top .links a.muted{color:var(--muted)}
.nav-tools{display:flex;gap:4px;margin-left:8px} .nav-tools button{border:1px solid var(--line);background:transparent;color:var(--ink2);border-radius:8px;padding:3px 8px;cursor:pointer;font:inherit;font-size:.8rem} .nav-tools button:hover{border-color:var(--accent2)}
footer.foot{text-align:center;color:var(--muted);font-size:.78rem;padding:20px;line-height:2}
#scrollbar{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:30;transition:width .1s}
@media(max-width:700px){ nav.top .brand .sub{display:none} nav.top .links a{padding:6px 8px;font-size:.86rem} .nav-tools{display:none} }

/* ---------- login ---------- */
main.login{display:flex;justify-content:center;padding-top:12vh} .login .card{width:min(360px,92vw)}
.login label{display:block;margin:12px 0 6px} .login input{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:var(--bg);color:var(--ink)}
.login button{width:100%;margin-top:14px;padding:11px;border:none;border-radius:9px;background:var(--accent);color:#fff;font:inherit;font-size:1rem;cursor:pointer}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:14px} @media(max-width:760px){.hero{grid-template-columns:1fr}}
.resume{display:flex;flex-direction:column;justify-content:center} .resume h1{font-family:var(--serif);font-size:1.7rem;margin:.2em 0} .resume h2{margin:.1em 0 .4em;font-weight:500} .resume .btns{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.routine{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-direction:column;gap:8px} .routine li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)} .routine .n{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none} .routine li.done{opacity:.6} .routine li.done .n{background:var(--good);color:#fff} .routine .t{flex:1} .routine .t small{display:block;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} @media(max-width:560px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px} .tile .n{font-size:1.6rem;font-weight:700;letter-spacing:-.02em} .tile .l{color:var(--muted);font-size:.8rem} .tile.hot{border-color:var(--accent);background:var(--accent-soft)} .tile.hot .n{color:var(--accent)}
.book-head{display:flex;justify-content:space-between;align-items:center;gap:10px} .book-head h4,.book-head h2{margin:2px 0} .pct{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.bar{height:8px;background:var(--line2);border-radius:4px;overflow:hidden;margin:8px 0} .bar .fill{height:100%;background:linear-gradient(90deg,var(--accent),#e0765a);border-radius:4px;transition:width .4s}
ul.chapters{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px} @media(max-width:560px){ul.chapters{grid-template-columns:1fr}} ul.chapters li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--line2)} ul.chapters li a{color:var(--ink)}
ul.log{list-style:none;padding:0} ul.log li{padding:6px 0;border-bottom:1px dashed var(--line2);font-size:.9rem;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- toc ---------- */
.toc-ch{margin:16px 0} .toc-ch h3{margin:6px 0}
ol.toc-verses{list-style:none;padding:0;margin:0} ol.toc-verses li a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;color:var(--ink);border-bottom:1px dashed var(--line2)} ol.toc-verses li a:hover{background:var(--paper2);text-decoration:none} ol.toc-verses a.done{color:var(--good)} ol.toc-verses a.seen{color:var(--accent2)}
.ref{font-family:var(--mono);color:var(--muted);font-size:.8em;min-width:3.4em}
.chapter-intro .big-en{font-family:var(--serif);font-size:1.15rem}

/* ---------- verse ---------- */
main.verse-main{max-width:960px}
.verse-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px}
.turn{font-size:1.9rem;line-height:1;padding:6px 16px;border-radius:12px;color:var(--ink);border:1px solid var(--line);background:var(--paper)} .turn:hover{border-color:var(--accent);text-decoration:none;color:var(--accent);background:var(--accent-soft)} .turn.off{opacity:.25;pointer-events:none}
.crumb{font-size:.88rem;text-align:center;color:var(--ink2)}
.ch-progress{height:4px;background:var(--line2);border-radius:2px;margin:0 0 12px;overflow:hidden} .ch-progress i{display:block;height:100%;background:var(--accent2);border-radius:2px}
.verse-head h1{font-family:var(--serif);font-size:1.7rem;margin:.3em 0} .verse-head h2{color:var(--muted);font-weight:500}
.modes{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:10px 0;margin:8px 0 14px;position:sticky;top:var(--nav-h);z-index:15;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.modes button{border:1px solid var(--line);background:transparent;color:var(--ink2);padding:7px 14px;border-radius:20px;cursor:pointer;font:inherit;font-size:.92rem;transition:all .15s}
.modes button:hover{border-color:var(--accent2);color:var(--ink)} .modes button.on{background:var(--accent);color:#fff;border-color:var(--accent)} .done-toggle{margin-left:auto;font-size:.88rem;color:var(--ink2)}
.code-wrap{margin:8px 0 18px} .code-head{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--muted);padding:6px 10px;background:var(--code-bg);color:#aaa;border-radius:10px 10px 0 0;border-bottom:1px solid #2e3137}
.code-head .copy{border:1px solid #444;background:transparent;color:#bbb;border-radius:6px;cursor:pointer;font-size:.75rem;padding:2px 8px} .code-head .copy:hover{border-color:#888;color:#fff}
pre.code{background:var(--code-bg);color:var(--code-ink);padding:14px 16px;border-radius:0 0 10px 10px;overflow:auto;font-family:var(--mono);font-size:.85rem;line-height:1.55;margin:0;tab-size:4} .type-ref,.q pre.code{border-radius:10px}
pre.code .kw{color:var(--kw)} pre.code .str{color:var(--str)} pre.code .cm{color:var(--cm);font-style:italic} pre.code .mac{color:var(--mac)} pre.code .ty{color:var(--ty)} pre.code .num{color:var(--num)} pre.code .lt{color:var(--lt)}
.code-note{background:var(--accent2-soft);border-left:3px solid var(--accent2);padding:10px 14px;margin-top:10px;font-size:.93rem;border-radius:0 10px 10px 0;line-height:1.7}
.line-tools{display:flex;gap:6px 14px;align-items:center;font-size:.84rem;color:var(--muted);flex-wrap:wrap;margin:10px 0} .line-tools label{cursor:pointer}
ol.lines{list-style:none;padding:0;margin:0;counter-reset:ln}
.line{position:relative;padding:14px 92px 14px 46px;border-radius:12px;border:1px solid transparent;margin:4px 0;transition:background .15s} .line::before{counter-increment:ln;content:counter(ln);position:absolute;left:14px;top:16px;width:22px;height:22px;border-radius:50%;background:var(--line2);color:var(--muted);font-size:.72rem;display:grid;place-items:center;font-weight:600}
.line:hover{background:var(--paper2);border-color:var(--line)} .line.now{background:var(--accent-soft);border-color:var(--accent)} .line.now::before{background:var(--accent);color:#fff}
.line .en{font-family:var(--serif);font-size:1.25rem;cursor:pointer;line-height:1.95} .line .pron{color:var(--muted);font-size:.9rem;margin:2px 0} .line .ko{font-size:1rem;cursor:pointer;color:var(--ink2)}
.line-btns{position:absolute;right:10px;top:14px;opacity:.55;transition:opacity .15s} .line:hover .line-btns,.line.now .line-btns{opacity:1} .line-btns .spk{font-size:1rem}
.hide-pron .line .pron,.hide-ko .line .ko,.hide-en .line .en{filter:blur(6px);transition:filter .2s} .hide-pron .line:hover .pron,.hide-ko .line:hover .ko,.hide-en .line:hover .en{filter:none}
.pron b{color:var(--accent);font-weight:700}
.keypoints{background:var(--accent2-soft);border-radius:12px;padding:10px 18px;margin:16px 0} .keypoints h3{margin:6px 0} .keypoints ul{margin:6px 0;padding-left:20px} .keypoints li{margin:4px 0}
table.words{width:100%;border-collapse:collapse;font-size:.93rem} table.words th{text-align:left;color:var(--muted);font-weight:500;font-size:.78rem;border-bottom:1px solid var(--line);padding:6px 6px} table.words td{padding:10px 6px;border-bottom:1px dashed var(--line2);vertical-align:top} table.words tr:hover td{background:var(--paper2)}
table.words .ipa{font-family:var(--mono);color:var(--muted);font-size:.8em} table.words .ex .en{font-family:var(--serif)} table.words td.pron{color:var(--accent);white-space:nowrap}
table.words tr.idiom b.en{color:var(--accent2)}
.verse-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.next-step{display:flex;justify-content:flex-end;margin-top:18px} .next-step .btn{gap:8px}
@media(max-width:700px){ .line{padding:12px 12px 12px 40px} .line-btns{position:static;opacity:1;margin-top:6px} .line .en{font-size:1.12rem} table.words{display:block;overflow-x:auto} .verse-nav .crumb{font-size:.8rem} }

/* ---------- player ---------- */
.player-now{min-height:170px;text-align:center;padding:26px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper2)}
.pl-en{font-family:var(--serif);font-size:1.65rem;line-height:1.5} .pl-pron{font-size:1rem;color:var(--muted);margin:8px 0} .pl-ko{font-size:1.2rem;color:var(--ink2)}
.pl-bar{height:6px;background:var(--line2);border-radius:3px;margin:12px 0 4px;overflow:hidden} .pl-bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .3s}
.player-ctl{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0;flex-wrap:wrap}
.player-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px;font-size:.88rem;color:var(--muted);padding:12px 14px;border:1px dashed var(--line);border-radius:12px} .player-opts label{display:flex;align-items:center;gap:6px;justify-content:space-between} .player-opts select{font:inherit;max-width:60%;border:1px solid var(--line);border-radius:7px;padding:3px 6px;background:var(--paper);color:var(--ink)}
.pl-lines{list-style:none;padding:0;margin:14px 0 0;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:12px} .pl-lines li{padding:8px 12px;border-bottom:1px dashed var(--line2);font-size:.9rem;cursor:pointer;display:flex;gap:10px} .pl-lines li .n{color:var(--muted);font-family:var(--mono);font-size:.78em;min-width:1.4em} .pl-lines li.now{background:var(--accent-soft);color:var(--accent);font-weight:600} .pl-lines li:hover{background:var(--paper2)}

/* ---------- flashcards ---------- */
.flash{text-align:center;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--paper)} .flash-head{display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted)}
.flash-bar{height:5px;background:var(--line2);border-radius:3px;margin:8px 0 4px;overflow:hidden} .flash-bar i{display:block;height:100%;background:var(--accent2);width:0;transition:width .3s}
.flash .word{font-family:var(--serif);font-size:2.3rem;margin-top:16px;letter-spacing:-.01em} .flash .ipa{font-family:var(--mono);color:var(--muted)} .flash .pron{color:var(--accent);font-size:1.2rem;margin:6px 0 10px}
.flash .back{border-top:1px dashed var(--line);margin-top:16px;padding-top:16px} .flash .back .ko{font-size:1.5rem;font-weight:600} .flash .ex .en{font-family:var(--serif);font-size:1.05rem;margin-top:8px}
.grades{margin-top:20px} .grades .btn{margin:0 4px;min-width:104px;justify-content:center} .grades .hint{color:var(--muted);font-size:.8rem;margin-top:8px}
.review-tools{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:8px 0 16px;font-size:.9rem}

/* ---------- quiz ---------- */
.q{margin:14px 0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--paper)} .q .qt{font-family:var(--serif);font-size:1.12rem} .q .qk{color:var(--muted);font-size:.9rem}
.q .choices button{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper2);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s} .q .choices button:hover:not(:disabled){border-color:var(--accent2)}
.q .choices button.right{border-color:var(--good);background:rgba(43,122,75,.12)} .q .choices button.wrong{border-color:var(--bad);background:rgba(181,58,46,.12)}
.q .explain{margin-top:8px;font-size:.9rem;color:var(--ink2);background:var(--accent2-soft);padding:8px 12px;border-radius:8px}
.q.cloze code.blank{background:var(--accent);color:transparent;border-radius:4px;padding:0 10px;cursor:pointer} .q.cloze code.blank.shown{color:#fff}

/* ---------- typing ---------- */
.type-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:760px){.type-wrap{grid-template-columns:1fr}}
.type-wrap textarea{width:100%;min-height:280px;font-family:var(--mono);font-size:.86rem;line-height:1.55;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);tab-size:4}
.type-ref.hidden code{filter:blur(6px)} .type-tools{margin-top:8px;display:flex;gap:10px;align-items:center}

/* ---------- status / md ---------- */
.status-wrap{display:grid;grid-template-columns:200px 1fr;gap:12px} @media(max-width:760px){.status-wrap{grid-template-columns:1fr}}
.side ul.files{list-style:none;padding:0} .side a.on{font-weight:700;color:var(--accent)}
.md{line-height:1.75} .md h1{font-size:1.5rem} .md h2{font-size:1.25rem;border-bottom:1px solid var(--line);padding-bottom:4px;margin-top:1.6em;font-weight:600} .md h3{font-size:1.05rem;display:block}
.md table{border-collapse:collapse;width:100%;font-size:.92rem} .md th,.md td{border:1px solid var(--line);padding:6px 8px;text-align:left} .md pre{background:var(--code-bg);color:var(--code-ink);padding:12px;border-radius:8px;overflow:auto} .md pre code{background:none;color:inherit}
.md blockquote{border-left:3px solid var(--accent2);margin:0;padding:2px 12px;color:var(--muted)}

/* ---------- words / rules ---------- */
form.search{display:flex;gap:8px;margin:10px 0} form.search input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:var(--paper);color:var(--ink)} form.search select,form.search button{font:inherit;padding:6px 10px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
ruby{ruby-position:over} rt{font-size:.58em;color:var(--accent);font-family:var(--font);font-weight:400;letter-spacing:-.02em;opacity:.95}
rt b{color:var(--accent);font-weight:800}
body:not(.show-ruby) rt{display:none}
.verse-head h1.en{line-height:1.9}
.ipa{display:none} body.show-ipa .ipa{display:block}
.rules{background:var(--accent-soft);border-radius:12px;padding:10px 18px;margin:16px 0} .rules h3{margin:6px 0}
.rule{padding:10px 0;border-top:1px dashed var(--line)} .rules .rule:first-of-type{border-top:none} .rule p{margin:4px 0;line-height:1.7} .rule b{color:var(--accent)}
.rule .ex .en{font-family:var(--serif)}
.pl-ruby{font-family:var(--serif);font-size:1.4rem;line-height:2;margin-top:6px} .pl-ruby:empty{display:none}
details.card summary{cursor:pointer}
.rb{line-height:1.9;font-family:var(--serif)} table.words .ex .rb{font-size:.95rem}
.flash .ex #fEx{line-height:1.9}

/* ---------- page turn ---------- */
body.turning main{animation:turnOut .16s ease-in forwards} @keyframes turnOut{to{opacity:0;transform:translateX(-24px)}}
main.verse-main{animation:turnIn .22s ease-out} @keyframes turnIn{from{opacity:0;transform:translateX(24px)}}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* 문장 연습 (영작·받아쓰기, 2026-10-03) */
.drill .drill-q{margin:14px 0 10px} .drill .drill-mode{font-size:.85rem;color:var(--accent2);font-weight:600;letter-spacing:.02em}
.drill .ko.big{font-size:1.35rem;font-weight:600;margin:10px 0 8px;line-height:1.5}
.drill textarea{width:100%;box-sizing:border-box;font-family:var(--serif);font-size:1.15rem;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper2);color:var(--ink);resize:vertical}
.drill textarea:focus{outline:2px solid var(--accent2-soft);border-color:var(--accent2)}
.drill textarea[readonly]{opacity:.75}
.drill #dResult{text-align:left;margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.drill .drill-score b{font-size:1.4rem}
.drill .drill-diff{font-family:var(--serif);font-size:1.1rem;line-height:1.9;margin:6px 0}
.drill .drill-diff .ok{color:var(--good)} .drill .drill-diff .miss{color:var(--bad);background:rgba(181,58,46,.1);border-radius:4px;padding:0 3px;font-weight:600}
.drill .drill-diff .extra{font-size:.9rem;color:var(--muted)} .drill .drill-diff s{color:var(--bad)}
.drill .answer{font-family:var(--serif);font-size:1.05rem;margin-top:6px} .drill .pron{color:var(--accent);margin:4px 0}
.btn.suggest{outline:3px solid var(--accent2);outline-offset:2px}

/* 러스트 실습 (2026-10-03) */
.kind{font-family:var(--mono);font-size:.75rem;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink2);vertical-align:middle;font-weight:500}
.kind.fix{color:var(--bad);border-color:var(--bad)} .kind.write{color:var(--accent2);border-color:var(--accent2)}
.lab-list h3{margin:16px 0 6px;font-size:1rem} .lab-row{display:flex;gap:10px;align-items:center;padding:7px 4px;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none}
.lab-row .state{width:1.2em;text-align:center;color:var(--muted)} .lab-row.solved .state{color:var(--good);font-weight:700} .lab-row .t{flex:1}
.lab-task .ko{font-size:1.05rem;line-height:1.7} .lab-task .en{font-family:var(--serif);margin-top:10px;color:var(--ink2);line-height:1.7}
.lab-task .hints ol{margin:8px 0 0 1.2em;color:var(--ink2)}
.lab-editor textarea{width:100%;box-sizing:border-box;min-height:320px;font-family:var(--mono);font-size:.9rem;line-height:1.55;padding:14px;border-radius:12px;border:1px solid #2c2f36;background:var(--code-bg);color:var(--code-ink);tab-size:4;resize:vertical;white-space:pre;overflow:auto}
.lab-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.lab-out pre{white-space:pre-wrap;font-family:var(--mono);font-size:.82rem;line-height:1.5;background:var(--code-bg);color:var(--code-ink);padding:12px;border-radius:10px;max-height:460px;overflow:auto}
.lab-out .ok{color:var(--good);font-weight:700} .lab-out .bad{color:var(--bad);font-weight:700}
.lab-out #labLinks a{display:inline-block;margin:4px 8px 4px 0}

/* 코드 설명 (2026-10-04) */
.explain{text-align:left} .explain h3{margin:8px 0} .explain pre.code{max-height:340px;overflow:auto}
.explain .xk{margin:8px 0} .explain .xk summary{cursor:pointer;color:var(--accent2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0} .chip{font-size:.85rem;padding:2px 9px;border-radius:999px;border:1px solid var(--line);background:var(--paper2)}
.chip.used{border-color:var(--good);color:var(--good);font-weight:600} .chip.unused{color:var(--muted)}
.explain .model li{font-family:var(--serif);margin:4px 0} .explain .model li small{display:block;font-family:var(--font);color:var(--muted)}

/* 최근 28일 활동 (2026-10-04) - 색은 기존 토큰 */
.activity h3{margin:0 0 10px}
.activity .bars{display:flex;align-items:flex-end;gap:3px;height:120px;border-bottom:1px solid var(--line)}
.activity .bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;min-width:0}
.activity .stack{display:flex;flex-direction:column-reverse;justify-content:flex-start;height:100%}
.activity .stack i{display:block;width:100%;min-height:2px;border-top:1px solid var(--paper)}
.activity .stack i:last-child{border-radius:3px 3px 0 0}
.activity .d{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--muted);white-space:nowrap}
.activity .legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;font-size:.8rem;color:var(--ink2)}
.activity .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.s-review{background:var(--accent2)} .s-sentence{background:var(--accent)} .s-explain{background:var(--good)} .s-lab{background:var(--mid)} .s-verse{background:var(--muted)}