:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-card: #0f3460;--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--accent: #e94560;--accent-light: #ff6b81;--correct: #4ecca3;--incorrect: #e94560;--key-bg: #2a2a4a;--key-border: #3a3a5a;--key-highlight: #e94560;--key-text: #e0e0e0;--key-dimmed: #555}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Noto Sans KR,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}#root{max-width:900px;margin:0 auto;padding:1rem}.app{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1rem 0}.app-header{text-align:center}.app-header h1{font-size:2rem;color:var(--accent);letter-spacing:.1em}.app-subtitle{color:var(--text-secondary);font-size:.9rem;margin-top:.25rem}.app-main{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.app-footer{color:var(--text-secondary);font-size:.8rem;margin-top:1rem}.level-selector-dropdown{display:none}.level-selector-buttons{display:flex;align-items:center;gap:.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}.level-selector-buttons::-webkit-scrollbar{display:none}@media(max-width:600px){.level-selector-buttons{display:none}.level-selector-dropdown{display:block;width:100%;padding:.5rem;font-size:1rem;border:2px solid var(--key-border);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer}}.level-group{display:flex;gap:.5rem;flex-shrink:0}.level-divider{width:1px;height:2rem;flex-shrink:0;background:var(--key-border)}.level-btn{background:var(--bg-secondary);border:2px solid var(--key-border);color:var(--text-primary);padding:.4rem .75rem;white-space:nowrap;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.15rem}.level-btn:focus{outline:none}.level-btn:hover{border-color:var(--accent)}.level-btn.active{border-color:var(--accent);background:var(--bg-card);box-shadow:0 0 12px #e945604d}.level-label{font-size:1rem;font-weight:600}.level-sublabel{font-size:.7rem;color:var(--text-secondary)}.word-display{background:var(--bg-secondary);border-radius:12px;padding:1.5rem;width:100%;max-width:700px;text-align:center}.progress-bar{color:var(--text-secondary);font-size:.85rem;margin-bottom:1rem}.word-queue{display:flex;align-items:flex-start;justify-content:center;gap:1.5rem;margin-bottom:1rem;min-height:3rem}.active-column{display:flex;flex-direction:column;align-items:flex-start}.active-column .composed-display{justify-content:flex-start;position:relative;width:0;min-width:0;overflow:visible;white-space:nowrap;background:none;padding:0;height:auto;border-radius:0}.queue-word{font-size:1.5rem;transition:all .3s}.queue-word.done{color:var(--text-secondary);opacity:.5;font-size:1.1rem;margin-top:.3rem}.queue-word.active{font-size:2rem;font-weight:700;color:var(--text-primary)}.queue-word.upcoming{color:var(--text-secondary);opacity:.4;font-size:1.1rem;margin-top:.3rem}.target-char{transition:color .2s}.target-char.typed{color:var(--correct)}.target-char.current{color:var(--accent-light);text-decoration:underline;text-underline-offset:4px}.target-char.error{color:var(--incorrect)}.meaning-hint{color:var(--text-secondary);font-size:1.35rem;margin-bottom:1rem}.composed-display{font-size:1.3rem;line-height:2rem;height:2.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden;gap:2px;margin-bottom:.75rem;padding:.25rem .5rem;border-radius:8px;transition:background .15s;word-break:break-all}.composed-display.correct{background:#4ecca326}.composed-display.incorrect{background:#e9456026}.composed-text{min-width:1ch}.cursor{animation:blink 1s step-end infinite;color:var(--accent);font-weight:300}@keyframes blink{50%{opacity:0}}.jamo-progress{display:flex;justify-content:center;gap:.35rem;flex-wrap:wrap}.jamo{font-size:.85rem;padding:.15rem .4rem;border-radius:4px;background:var(--key-bg)}.jamo.done{color:var(--correct);background:#4ecca326}.jamo.error{color:var(--incorrect);background:#e9456033}.jamo.current{color:var(--accent-light);background:#e9456033;font-weight:700}.jamo.pending{color:var(--text-secondary);opacity:.5}.sentence-mode{text-align:left}.sentence-mode .composed-display{justify-content:flex-start;font-size:1.5rem;height:auto;overflow:visible;margin-bottom:.5rem;padding:0;background:none;border-radius:0}.sentence-mode .meaning-hint{margin-bottom:0;font-size:1.1rem}.sentence-target{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;min-height:3rem;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:0;line-height:1.6}.sentence-target.shake{animation:shake .3s ease}.target-char.space-char{width:.5em;display:inline-block}.target-char.space-char.current{background:#e9456026;border-radius:2px}.jamo.jamo-space{letter-spacing:0}.queue-word.active.shake{animation:shake .3s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.complete-message{padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}.complete-icon{font-size:2rem;color:var(--correct)}.complete-message p{font-size:1.1rem;margin:0}.complete-stats{color:var(--text-secondary);font-size:.85rem!important}.complete-scores{display:flex;gap:1.5rem;justify-content:center;font-size:1rem;font-weight:600;color:var(--accent);margin:0}.reset-btn{margin-top:.25rem;background:var(--accent);color:#fff;border:none;padding:.6rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:background .2s}.reset-btn:hover{background:var(--accent-light)}.key-hint{color:var(--text-secondary);font-size:.75rem!important;margin:0}.space-hint{background:var(--accent);color:#fff;font-size:.75rem;padding:.15rem .5rem;border-radius:4px;margin-left:.5rem;animation:pulse 1.5s ease-in-out infinite}.backspace-hint{background:var(--incorrect);color:#fff;font-size:.75rem;padding:.15rem .5rem;border-radius:4px;margin-left:.5rem;animation:pulse 1.5s ease-in-out infinite}.virtual-keyboard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:1rem;background:var(--bg-secondary);border-radius:12px;width:fit-content}.kb-row{display:flex;gap:5px}.kb-spacer.half{width:14px}.kb-key{width:52px;height:52px;background:var(--key-bg);border:1px solid var(--key-border);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .15s;-webkit-user-select:none;user-select:none;cursor:pointer}.kb-key:active{transform:scale(.95)}.spacebar-row{justify-content:center;width:100%;gap:5px}.kb-spacebar{height:42px;width:60%;background:var(--key-bg);border:1px solid var(--key-border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s}.kb-spacebar:active{transform:scale(.97)}.kb-spacebar.highlight{border-color:var(--key-highlight);background:#e9456033;box-shadow:0 0 8px #e9456066;color:var(--accent-light);font-weight:600;animation:pulse 1.5s ease-in-out infinite}.kb-backspace{height:42px;width:20%;background:var(--key-bg);border:1px solid var(--key-border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .15s}.kb-backspace:active{transform:scale(.97)}.kb-backspace.highlight{border-color:var(--incorrect);background:#e9456033;box-shadow:0 0 8px #e9456066;color:var(--accent-light);font-weight:600;animation:pulse 1.5s ease-in-out infinite}.kb-key.dimmed{opacity:.3}.kb-key.highlight{transition:none;border-color:var(--key-highlight);background:#e9456033;box-shadow:0 0 8px #e9456066;animation:pulse 1.5s ease-in-out infinite}.kb-key.flash-correct{transition:none;border-color:var(--correct);background:#4ecca34d;box-shadow:0 0 10px #4ecca380}.kb-key.flash-incorrect{transition:none;border-color:var(--incorrect);background:#e945604d;box-shadow:0 0 10px #e9456080}@keyframes pulse{0%,to{box-shadow:0 0 8px #e9456066}50%{box-shadow:0 0 16px #e9456099}}.kb-korean{font-size:1.1rem;color:var(--key-text);font-weight:600}.kb-shift{position:absolute;top:2px;right:4px;font-size:.6rem;color:var(--text-secondary)}.kb-english{font-size:.55rem;color:var(--text-secondary);margin-top:1px}.kb-bump{position:absolute;bottom:3px;width:14px;height:2px;background:var(--text-secondary);border-radius:1px}.kb-shift-key{height:52px;width:52px;background:var(--key-bg);border:1px solid var(--key-border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--text-secondary);-webkit-user-select:none;user-select:none;transition:all .15s}.kb-shift-key.highlight{border-color:var(--key-highlight);background:#e9456033;box-shadow:0 0 8px #e9456066;color:var(--accent-light);font-weight:600;animation:pulse 1.5s ease-in-out infinite}@media(max-width:600px){.kb-key{width:34px;height:42px}.kb-korean{font-size:.85rem}.kb-english{font-size:.45rem}.kb-shift{font-size:.5rem}.kb-spacer.half{width:9px}.kb-shift-key{width:34px;height:42px;font-size:.55rem}.kb-spacebar{height:36px;font-size:.75rem}.kb-backspace{height:36px;font-size:.9rem}.queue-word.active{font-size:1.5rem}.level-group{flex-direction:column;align-items:center}.sentence-target{font-size:1.2rem}}