/* Learn Korean (index.html), on top of style.css. */
.brand{color:inherit;text-decoration:none}
.learn{display:grid;grid-template-columns:260px 1fr;max-width:1240px;margin:0 auto;gap:0}
.lessons{border-right:1px solid var(--border);padding:16px 12px;position:sticky;top:57px;align-self:start;max-height:calc(100vh - 57px);overflow-y:auto}
.lessons .level+.level{margin-top:14px}
.lessons h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 6px 6px;font-weight:600}
.lesson-link{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:none;padding:6px 8px;border-radius:7px;font-size:.92rem}
.lesson-link:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.lesson-link.current{background:color-mix(in srgb,var(--accent) 18%,transparent);font-weight:600}
.badge{font-size:.72rem;color:var(--muted);border:1px solid var(--border);border-radius:9px;padding:0 6px;font-variant-numeric:tabular-nums}
.badge.pass{color:var(--accent-text);background:var(--accent);border-color:var(--accent)}
.lesson{padding:18px 26px 48px;min-width:0}
.lesson h1{font-size:1.5rem;margin:6px 0 10px}
.level-intro{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px}
.level-intro summary{cursor:pointer;font-weight:600}
.lesson-body,.level-intro div{max-width:760px}
.lesson-body table,.level-intro table{border-collapse:collapse;margin:8px 0 12px;font-size:.93rem}
.lesson-body th,.lesson-body td{border-bottom:1px solid var(--border);padding:4px 12px 4px 0;text-align:left;vertical-align:top}
.lesson-body td:first-child{font-family:var(--kr);font-size:1.15rem}
code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:color-mix(in srgb,var(--accent) 10%,transparent);padding:0 4px;border-radius:4px}
.note{font-size:.88rem;color:var(--muted)}

.drill{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px 14px;margin-top:16px}
.drill-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.drill-bar label{font-size:.88rem;display:flex;gap:4px;align-items:center}
.words{position:relative;display:flex;flex-wrap:wrap;gap:6px 10px;max-height:300px;overflow-y:auto;padding:4px 2px}
.words.anthem{display:block;max-height:none}
.words .line{margin-bottom:12px}
.words .line-words{display:flex;flex-wrap:wrap;gap:6px 10px}
.words .en{color:var(--muted);font-style:italic;font-size:.92rem;margin:2px 4px 0}
.words .credit{font-size:.8rem;margin:4px}
.word{display:inline-flex;flex-direction:column;align-items:center;padding:4px 8px;border-radius:8px;border:1px solid transparent;min-width:44px}
.word .std{font-size:.72rem;color:var(--muted);font-style:italic}
.word .keys{font-family:ui-monospace,Menlo,monospace;font-size:.78rem;color:var(--accent)}
.word .ko{font-family:var(--kr);font-size:1.45rem;line-height:1.25}
.word .got{font-family:var(--kr);font-size:.78rem;color:#c0392b;text-decoration:line-through}
.no-std .std,.no-keys .keys{visibility:hidden}
.word.current{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.word.ok .ko{color:#2e8b57}
.word.bad .ko{color:#c0392b}
.typing{display:flex;align-items:center;gap:10px;min-height:40px;margin:8px 4px;flex-wrap:wrap}
.typing .preedit{font-family:var(--kr);font-size:1.4rem;border-bottom:2px solid var(--mark);min-width:2em}
.readings{display:flex;gap:6px;list-style:none;margin:0;padding:0;counter-reset:r}
.readings li{font-family:var(--kr);border:1px solid var(--border);border-radius:7px;padding:1px 9px}
.readings li.sel{background:var(--sel);color:#fff;border-color:transparent}
.result{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:9px;padding:10px 12px;margin:6px 0 10px}
.drill .board svg{width:100%;max-width:820px;height:auto;display:block;margin:8px auto 0;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.drill .key{cursor:pointer}
.drill .key .cap{fill:var(--cap);stroke:var(--cap-edge)}
.drill .key.next .cap{fill:color-mix(in srgb,var(--accent) 35%,var(--cap));stroke:var(--accent);stroke-width:2}
.drill .key.on .cap{fill:var(--pressed)}
.drill .latin{font-size:20px;fill:var(--legend);font-weight:500}
.drill .latin.small{font-size:12px;fill:var(--muted)}
.drill .jamo{font-family:var(--kr);font-size:21px;fill:var(--i)}
.drill .jamo.small{font-size:12px;fill:var(--muted)}
.board.shift-next::after{content:"⇧ with the highlighted key";display:block;text-align:center;font-size:.85rem;color:var(--accent);margin-top:4px}
.touch-row{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.touch-row .space{min-width:180px}
#shiftBtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-text)}
#onboarding{max-width:560px;width:fit-content;height:fit-content;max-height:90vh;display:revert;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);padding:20px 24px}
#onboarding::backdrop{background:rgba(0,0,0,.35)}
#onboarding h2{margin:0 0 8px}
#onboarding li{margin-bottom:8px}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end}
@media (max-width:800px){
  .learn{grid-template-columns:1fr}
  .lessons{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--border)}
  .lesson{padding:14px}
}
.pick{font-size:.88rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.pick[hidden]{display:none}
.tracks{display:grid;gap:8px;margin:12px 0 14px}
.track{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 14px;border-radius:10px}
.track b{font-size:1rem}
.track span{color:var(--muted);font-size:.88rem}
.track .caveat{color:var(--f);font-size:.82rem}
.track:hover,.track.current{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.drill .key.mod .cap{fill:var(--mod)}
.drill .key:not(.live){cursor:default}
.drill .latin.mod{font-size:11px;fill:var(--muted)}
@media (max-width:800px){header{flex-wrap:wrap}}