:root,:root[data-theme=light]{color-scheme:light;--bg: #f6f8fa;--surface: #ffffff;--surface-2: #eef1f4;--surface-raised: #ffffff;--overlay: rgba(17, 24, 39, .45);--text: #1a1f26;--text-muted: #57606a;--text-faint: #7a828c;--text-on-accent: #ffffff;--border: #d5dae0;--border-strong: #b6bdc6;--focus-ring: #1f6feb;--accent: #1f6feb;--accent-hover: #1a5fd0;--accent-soft: #dbe8ff;--ok: #1a7f37;--ok-soft: #d5f2dd;--warn: #9a6700;--warn-soft: #fff1c2;--bad: #cf222e;--bad-soft: #ffdce0;--state-new: #8b95a1;--state-learning: #d29922;--state-familiar: #2f7fe0;--state-mastered: #1a7f37;--state-lapsed: #cf222e;--canvas-bg: #ffffff;--canvas-ink: #1a1f26;--canvas-guide: #c4cbd3;--chart-grid: #e5e9ee;--shadow-sm: 0 1px 2px rgba(16, 22, 26, .08);--shadow-md: 0 4px 16px rgba(16, 22, 26, .12);--radius: 10px;--radius-lg: 16px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-ko: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;--font-hanja: "Apple SD Gothic Neo", "Noto Serif KR", "Nanum Myeongjo", serif}:root[data-theme=dark]{color-scheme:dark;--bg: #0d1117;--surface: #161b22;--surface-2: #1c232c;--surface-raised: #1e2630;--overlay: rgba(1, 4, 9, .6);--text: #e6edf3;--text-muted: #9198a1;--text-faint: #6e7681;--text-on-accent: #ffffff;--border: #2a313c;--border-strong: #3d444d;--focus-ring: #58a6ff;--accent: #4a90ff;--accent-hover: #6aa6ff;--accent-soft: #17325c;--ok: #3fb950;--ok-soft: #12351d;--warn: #d29922;--warn-soft: #3a2d05;--bad: #f85149;--bad-soft: #43171a;--state-new: #8b949e;--state-learning: #d29922;--state-familiar: #58a6ff;--state-mastered: #3fb950;--state-lapsed: #f85149;--canvas-bg: #161b22;--canvas-ink: #e6edf3;--canvas-guide: #3d444d;--chart-grid: #262c36;--shadow-sm: 0 1px 2px rgba(1, 4, 9, .5);--shadow-md: 0 6px 20px rgba(1, 4, 9, .6)}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}*{box-sizing:border-box}html,body{margin:0;min-height:100vh}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}#app{min-height:100vh;display:flex;flex-direction:column}.appbar{display:flex;align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}html,body{overflow-x:hidden}.appbar__brand{font-weight:700;font-size:1.1rem;letter-spacing:-.01em}.appbar__brand .han{font-family:var(--font-hanja);color:var(--accent)}.appbar__spacer{flex:1}.appbar__user{color:var(--text-muted);font-size:.9rem}.container{width:100%;max-width:880px;margin:0 auto;padding:var(--space-5) var(--space-4);flex:1}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}.grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}.card h1,.card h2{margin-top:0}.muted{color:var(--text-muted)}.faint{color:var(--text-faint);font-size:.85rem}.tile{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4);text-align:center}.tile__value{font-size:1.8rem;font-weight:700;line-height:1}.tile__label{color:var(--text-muted);font-size:.8rem;margin-top:var(--space-2);text-transform:uppercase;letter-spacing:.04em}.btn{appearance:none;cursor:pointer;font:inherit;font-weight:600;padding:.6rem 1rem;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);transition:background .15s,border-color .15s,transform .05s}.btn:hover{background:var(--surface-2)}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}.btn--primary:hover{background:var(--accent-hover)}.btn--ghost{border-color:transparent;background:transparent}.btn--block{width:100%}.btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.grade{border-radius:var(--radius);padding:.7rem .4rem;font-weight:700}.grade--again{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}.grade--hard{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}.grade--good{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.grade--easy{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}.field{display:flex;flex-direction:column;gap:var(--space-2)}.field label{font-weight:600;font-size:.9rem}.input{font:inherit;padding:.6rem .75rem;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);width:100%}.input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:1px}.flashcard{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);text-align:center;user-select:none}.flashcard__char{font-family:var(--font-hanja);font-size:6rem;line-height:1;color:var(--text)}.flashcard__word{font-family:var(--font-ko);font-size:3.2rem;line-height:1}.flashcard__prompt{color:var(--text-muted)}.flashcard__answer{font-family:var(--font-ko);font-size:1.6rem}.badge-state{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700;color:#fff}.state-new{background:var(--state-new)}.state-learning{background:var(--state-learning)}.state-familiar{background:var(--state-familiar)}.state-mastered{background:var(--state-mastered)}.state-lapsed{background:var(--state-lapsed)}.kbd{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}.kbd-row{display:flex;gap:6px;justify-content:center}.kbd-key{min-width:40px;height:46px;padding:0 8px;font:inherit;font-family:var(--font-ko);font-size:1.05rem;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);cursor:pointer}.kbd-key:hover{background:var(--surface)}.kbd-key:active{transform:translateY(1px)}.kbd-key--wide{min-width:64px}.kbd-key--space{flex:1;max-width:260px}.kbd-key--active{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}.lesson-row{display:flex;align-items:center;gap:var(--space-3);text-align:left;cursor:pointer;padding:var(--space-3) var(--space-4);position:relative;flex-wrap:wrap}.lesson-row:hover:not(:disabled){border-color:var(--accent);background:var(--surface-2)}.lesson-row--locked{opacity:.55;cursor:not-allowed}.lesson-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.lesson-row__main .faint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lesson-row__status{font-weight:700;color:var(--text-muted);min-width:2.5em;text-align:right}.progressbar{flex-basis:100%;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:var(--space-2)}.progressbar__fill{height:100%;background:var(--accent)}.appfooter{display:flex;gap:var(--space-3);align-items:center;justify-content:center;flex-wrap:wrap;padding:var(--space-4);border-top:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:.85rem}.speaker-btn{padding:.25rem .5rem;font-size:.95rem;line-height:1}.navlink{padding:.4rem .7rem}.navlink--active{color:var(--accent);background:var(--accent-soft)}.appbar__brand.link-btn{font-size:1.1rem;font-weight:700}.browse-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.browse-card{display:flex;gap:var(--space-3);align-items:center;text-align:left;cursor:pointer;padding:var(--space-3) var(--space-4)}.browse-card:hover{border-color:var(--accent);background:var(--surface-2)}.browse-card__glyph{font-family:var(--font-hanja);font-size:2.6rem;line-height:1;min-width:1.4em;text-align:center}.browse-card__glyph--ko{font-family:var(--font-ko);font-size:2rem}.browse-card__reading{font-family:var(--font-ko);font-weight:600}.card ul{margin:0;padding-left:1.2rem}.card li{margin:.25rem 0}.banner{border-radius:var(--radius);padding:var(--space-3) var(--space-4);border:1px solid var(--border)}.banner--warn{background:var(--warn-soft);border-color:var(--warn)}.banner--info{background:var(--accent-soft);border-color:var(--accent)}.theme-toggle{min-width:92px;text-align:center}.toast-host{position:fixed;bottom:var(--space-5);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:var(--space-2);z-index:100}.toast{background:var(--surface-raised);color:var(--text);border:1px solid var(--border);border-left-width:4px;border-radius:var(--radius);padding:.6rem 1rem;box-shadow:var(--shadow-md);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;font-size:.9rem;max-width:90vw}.toast--in{opacity:1;transform:translateY(0)}.toast--error{border-left-color:var(--bad)}.toast--success{border-left-color:var(--ok)}.toast--info{border-left-color:var(--accent)}.auth-wrap{max-width:420px;margin:8vh auto}.center{text-align:center}.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;padding:0}@media(max-width:520px){.flashcard__char{font-size:4.5rem}.kbd-key{min-width:32px;height:42px}}.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--space-3)}.badge-chip{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);opacity:.5;filter:grayscale(.8)}.badge-chip--earned{opacity:1;filter:none;border-color:var(--accent);background:var(--accent-soft)}.badge-chip__icon{font-size:2rem;line-height:1}.badge-chip__name{font-weight:600;font-size:.9rem}