:root{--font-sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--bg-primary: #f8fafc;--bg-surface: #ffffff;--bg-subtle: #f1f5f9;--bg-hover: #e2e8f0;--border-color: #cbd5e1;--border-subtle: #e2e8f0;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #64748b;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-success: #16a34a;--color-success-subtle: #dcfce7;--color-danger: #dc2626;--color-danger-subtle: #fee2e2;--color-warning: #d97706;--color-warning-subtle: #fef3c7;--color-unsure: #7c3aed;--color-unsure-subtle: #ede9fe;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){:root{--bg-primary: #090d16;--bg-surface: #131b2e;--bg-subtle: #1e293b;--bg-hover: #334155;--border-color: #334155;--border-subtle: #1e293b;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--color-primary: #3b82f6;--color-primary-hover: #60a5fa;--color-success: #22c55e;--color-success-subtle: #052e16;--color-danger: #ef4444;--color-danger-subtle: #450a0a;--color-warning: #f59e0b;--color-warning-subtle: #451a03;--color-unsure: #8b5cf6;--color-unsure-subtle: #2e1065}}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;display:flex;flex-direction:column}#app{display:flex;flex-direction:column;min-height:100vh;width:100%}button{font-family:inherit;font-size:1rem;min-height:44px;min-width:44px;cursor:pointer;border-radius:var(--radius-md);border:1px solid transparent;transition:all .15s ease-in-out}input,textarea,select{font-family:inherit;font-size:1rem;color:inherit;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:.5rem .75rem}input:focus,textarea:focus,select:focus{outline:2px solid var(--color-primary);outline-offset:-1px}kbd{display:inline-block;padding:.15rem .45rem;font-family:var(--font-sans);font-size:.85em;font-weight:700;line-height:1.2;color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-color);border-bottom:2px solid #94a3b8;border-radius:5px;box-shadow:0 1px 2px #0000001a;white-space:nowrap;vertical-align:baseline}@media(prefers-color-scheme:dark){kbd{border-bottom:2px solid #475569;box-shadow:0 1px 2px #0006}}.lightbox-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;padding:1.5rem;animation:fadeIn .15s ease-out}.lightbox-content{position:relative;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}.lightbox-image{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--radius-md);box-shadow:0 20px 25px -5px #00000080,0 8px 10px -6px #00000080;border:1px solid rgba(255,255,255,.15)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.topik-level-btn{height:44px;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease-in-out}.topik-level-btn:hover{background:var(--color-primary-hover, #1d4ed8);color:#fff;border-color:var(--color-primary-hover, #1d4ed8);transform:translateY(-2px);box-shadow:var(--shadow-md)}.topik-level-btn.selected{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-subtle, rgba(37, 99, 235, .25));transform:translateY(-1px)}.topik-level-btn.level-1:hover,.topik-level-btn.level-1.selected{background:#10b981;border-color:#10b981;color:#fff}.topik-level-btn.level-2:hover,.topik-level-btn.level-2.selected{background:#0ea5e9;border-color:#0ea5e9;color:#fff}.topik-level-btn.level-3:hover,.topik-level-btn.level-3.selected{background:#3b82f6;border-color:#3b82f6;color:#fff}.topik-level-btn.level-4:hover,.topik-level-btn.level-4.selected{background:#8b5cf6;border-color:#8b5cf6;color:#fff}.topik-level-btn.level-5:hover,.topik-level-btn.level-5.selected{background:#ec4899;border-color:#ec4899;color:#fff}.topik-level-btn.level-6:hover,.topik-level-btn.level-6.selected{background:#f59e0b;border-color:#f59e0b;color:#fff}.container{width:100%;max-width:960px;margin:0 auto;padding:1rem}