.practice-app{color:#22242a;background:#f7f8fa;flex-direction:column;min-height:100vh;display:flex}.practice-header{background:#fff;border-bottom:1px solid #e8eaee;justify-content:space-between;align-items:center;gap:24px;padding:16px 40px;display:flex}.brand,.practice-header__actions,.jamo-hint,.keyboard__row{align-items:center;display:flex}.brand{gap:13px}.brand__mark{border:1.5px solid #22242a;border-radius:11px;place-items:center;width:38px;height:38px;font-size:19px;font-weight:600;display:grid;box-shadow:2.5px 2.5px #3b5bdb}.brand h1{letter-spacing:-.03em;margin:0;font:700 19px/1 Space Grotesk,sans-serif}.brand p,.eyebrow,.practice-footer p{color:#6c7078;letter-spacing:.14em;text-transform:uppercase;margin:4px 0 0;font-size:11px;font-weight:500}.practice-header__actions{gap:12px}.progress,.button{color:#4c5058;background:#fff;border:1px solid #e2e4e8;border-radius:8px;padding:7px 12px;font:500 13px/1.2 IBM Plex Mono,monospace}.progress{background:#f2f3f6}.button{cursor:pointer}.button:hover{color:#14151a;border-color:#c9ccd2}.practice-main{flex-direction:column;flex:1;align-items:center;padding:80px 24px 44px;display:flex}.eyebrow{margin:0;font-size:13px}.phrase{flex-wrap:wrap;justify-content:center;gap:7px;margin-top:44px;font-size:clamp(48px,8vw,72px);line-height:1.1;display:flex}.phrase__syllable{text-align:center;border-bottom:3px solid #0000;min-width:.65em}.phrase__syllable[data-state=complete]{color:#22242a;border-color:#e2e4e8}.phrase__syllable[data-state=future]{color:#93989f}.phrase__syllable[data-state=active]{color:#3b5bdb;border-color:#3b5bdb;animation:1.1s step-end infinite caret-blink}.phrase__syllable[data-state=wrong]{color:#b3564f;border-color:#b3564f}.jamo-hint{gap:8px;min-height:32px;margin-top:44px}.jamo-hint__label,.jamo-hint__error{color:#6c7078;font-size:13px}.jamo-hint__divider{background:#e0e2e7;width:1px;height:16px;margin:0 2px}.jamo-hint__item{color:#7d828a;background:#fff;border:1px solid #e8eaee;border-radius:7px;padding:4px 11px}.jamo-hint__item[data-state=complete]{color:#4c5058;background:#eceef1;border-color:#e2e4e8}.jamo-hint__item[data-state=next]{color:#3b5bdb;background:#e7ecfc;border-color:#3b5bdb}.jamo-hint__error{color:#b3564f;margin-left:6px}.practice-footer{text-align:center;padding:12px 24px 44px}.keyboard-shell{padding:2px 0 8px;overflow-x:auto}.keyboard{flex-direction:column;gap:7px;min-width:650px;display:inline-flex}.keyboard__row{justify-content:center;gap:7px}.keyboard__row--bottom{margin-top:9px}.keyboard-key{color:#5c6068;cursor:pointer;background:#fff;border:1px solid #e4e6ea;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:1px;width:44px;height:44px;font:400 16px/1 IBM Plex Sans KR,sans-serif;display:inline-flex;box-shadow:0 1px 1px #14161c08}.keyboard-key--wide{color:#6c7078;width:76px;font-size:12px}.keyboard-key:disabled{cursor:default;opacity:.6}.keyboard-key__shifted{color:#7d828a;height:11px;font-size:11px}.keyboard-key[data-state=next]{color:#3b5bdb;background:#e7ecfc;border-color:#3b5bdb;font-weight:600;box-shadow:0 0 0 3px #3b5bdb1a}.keyboard-key[data-state=wrong]{color:#b3564f;background:#f8ecea;border-color:#b3564f;font-weight:600}.practice-footer p{letter-spacing:0;text-transform:none;margin-top:16px;font-size:12.5px}@keyframes caret-blink{0%,55%{opacity:1}56%,to{opacity:.15}}@media (width<=680px){.practice-header{align-items:flex-start;padding:16px 18px}.practice-header__actions{flex-wrap:wrap;justify-content:flex-end;gap:7px}.practice-main{padding-top:64px}.jamo-hint{flex-wrap:wrap;justify-content:center}.practice-footer{padding-inline:12px}}:root{color:#22242a;font-synthesis:none;text-rendering:optimizelegibility;background:#f7f8fa;font-family:IBM Plex Sans KR,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button{font:inherit}