:root{color-scheme:light;--app-bg: #eef6fb;--bg-wash-a: rgba(100, 199, 226, .14);--bg-wash-b: rgba(255, 190, 167, .12);--ink: #15191f;--muted: #677280;--subtle: #8994a3;--paper: rgba(255, 255, 255, .7);--paper-soft: rgba(255, 255, 255, .44);--paper-glass: rgba(255, 255, 255, .56);--panel-border: rgba(255, 255, 255, .72);--line: #dbe2ea;--line-strong: #c4ccd6;--teal: #0e7c7b;--teal-dark: #075f61;--coral: #e56f4f;--amber: #b7791f;--green: #087443;--red: #b42318;--shadow: 0 22px 60px rgba(55, 74, 92, .16);--brand-shadow: 0 16px 36px rgba(21, 25, 31, .2), inset 0 1px 0 rgba(255, 255, 255, .32);--focus-ring: 0 0 0 3px rgba(14, 124, 123, .15);--control-shadow: 0 14px 34px rgba(55, 74, 92, .12);--pressed-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);--surface-gradient: linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .36));--control-gradient: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38));--glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .74), inset 1px 0 0 rgba(255, 255, 255, .45);--glass-blur: blur(22px) saturate(160%);--progress-bg: #e3e9ef;--button-on-ink: #ffffff;--brand-bg: #15191f;--brand-ink: #ffffff;--selected-bg: #e8f4f3;--focus-bg: rgba(232, 244, 243, .5);--stage-top: rgba(255, 255, 255, .32);--stage-bottom: rgba(255, 255, 255, .18);--stage-rule: rgba(196, 204, 214, .16);--paper-sheet: rgba(255, 255, 255, .42);--paper-edge: #d2e1eb;--paper-inset: rgba(219, 226, 234, .42);--prompt: #4469be;--prompt-active: #285dbd;--input-rule: rgba(21, 25, 31, .2);--placeholder-rule: rgba(21, 25, 31, .28);--score-bg-a: rgba(14, 124, 123, .12);--score-bg-b: rgba(229, 111, 79, .12)}:root[data-theme=dark]{color-scheme:dark;--app-bg: #0d1218;--bg-wash-a: rgba(65, 176, 205, .1);--bg-wash-b: rgba(255, 139, 104, .07);--ink: #edf2f7;--muted: #a5b0bd;--subtle: #7f8b99;--paper: rgba(25, 34, 44, .62);--paper-soft: rgba(37, 49, 63, .42);--paper-glass: rgba(23, 31, 40, .58);--panel-border: rgba(151, 172, 194, .2);--line: #313a45;--line-strong: #485360;--teal: #39c0bd;--teal-dark: #76d8d5;--coral: #ff8b68;--amber: #f0b45f;--green: #55c991;--red: #ff7770;--shadow: 0 24px 70px rgba(0, 0, 0, .36);--brand-shadow: 0 18px 42px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .42);--focus-ring: 0 0 0 3px rgba(57, 192, 189, .2);--control-shadow: 0 16px 40px rgba(0, 0, 0, .26);--pressed-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);--surface-gradient: linear-gradient(145deg, rgba(33, 45, 58, .62), rgba(16, 23, 31, .42));--control-gradient: linear-gradient(145deg, rgba(43, 58, 73, .58), rgba(19, 27, 36, .4));--glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .14), inset 1px 0 0 rgba(255, 255, 255, .08);--glass-blur: blur(22px) saturate(150%);--progress-bg: #29313a;--button-on-ink: #071112;--brand-bg: #e9f7f6;--brand-ink: #101418;--selected-bg: #123537;--focus-bg: rgba(18, 53, 55, .64);--stage-top: rgba(27, 38, 49, .35);--stage-bottom: rgba(15, 22, 30, .24);--stage-rule: rgba(103, 114, 128, .12);--paper-sheet: rgba(28, 38, 49, .46);--paper-edge: #313a45;--paper-inset: rgba(49, 58, 69, .5);--prompt: #8ea8ee;--prompt-active: #76a7ff;--input-rule: rgba(237, 242, 247, .22);--placeholder-rule: rgba(237, 242, 247, .26);--score-bg-a: rgba(57, 192, 189, .13);--score-bg-b: rgba(255, 139, 104, .1)}*{box-sizing:border-box}body{margin:0;min-width:320px;height:100vh;height:100dvh;overflow:hidden;background:linear-gradient(135deg,var(--bg-wash-a),transparent 32%),linear-gradient(315deg,var(--bg-wash-b),transparent 36%),linear-gradient(180deg,rgba(255,255,255,.34),transparent 44%),var(--app-bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans KR,sans-serif}#root{height:100%;min-height:0;overflow:hidden}.html-fallback{display:grid;min-height:100vh;place-content:center;gap:10px;padding:24px;color:#677280;text-align:center;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans KR,sans-serif}.html-fallback strong{color:#15191f;font-size:1.3rem}.html-fallback span{font-weight:800}button,input,textarea{font:inherit}button{cursor:pointer}button,.template-row,.study-set-row,.word-card,.falling-word,.metric,.score-panel{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}.app{display:grid;grid-template-rows:auto 1fr;gap:12px;height:100%;min-height:0;overflow:hidden;padding:14px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1540px;width:100%;margin:0 auto}.brand-lockup,.topbar-actions,.insight-strip,.metric,.pane-title,.pane-title>div,.editor-actions,.notice{display:flex;align-items:center}.brand-lockup{gap:11px}.brand-mark{display:grid;width:46px;height:46px;place-items:center;overflow:hidden;border-radius:12px;background:transparent;color:var(--brand-ink);box-shadow:0 16px 32px #5a0a1238,0 0 0 1px #ffffff6b}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}.brand-lockup p,.brand-lockup span,.section-kicker,.pane-title h2,.practice-toolbar h1,.metric small,.metric strong{margin:0}.brand-lockup p{font-size:1rem;font-weight:900}.brand-lockup span{display:block;color:var(--muted);font-size:.82rem;font-weight:700}.topbar-actions{gap:8px}.mode-tabs{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--pressed-shadow)}.mode-tabs button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 11px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:.82rem;font-weight:900}.mode-tabs button.active{background:var(--control-gradient);color:var(--teal-dark);box-shadow:var(--control-shadow)}.theme-toggle{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);color:var(--ink);font-weight:900;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--control-shadow),var(--glass-highlight)}.theme-toggle svg{color:var(--teal)}.product-layout{display:grid;grid-template-columns:minmax(292px,328px) minmax(0,1fr) minmax(238px,282px);gap:12px;max-width:1540px;width:100%;height:100%;min-height:0;overflow:hidden;margin:0 auto}.template-pane,.practice-pane,.review-pane{min-width:0;border:1px solid var(--panel-border);border-radius:8px;background:var(--surface-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow),var(--glass-highlight)}.template-pane,.review-pane{display:flex;flex-direction:column;gap:12px;padding:14px;overflow:hidden}.practice-pane{display:grid;grid-template-rows:auto 7px auto minmax(0,1fr) auto;min-height:0;overflow:hidden}.game-pane{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;min-height:0;overflow:hidden;border:1px solid var(--panel-border);border-radius:8px;background:var(--surface-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow),var(--glass-highlight)}.desktop-only-pane{display:grid;min-height:420px;border:1px solid var(--panel-border);border-radius:8px;background:var(--surface-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--shadow),var(--glass-highlight)}.rain-controls{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface-gradient)}.mini-segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--pressed-shadow)}.mini-segmented button{min-height:30px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:.76rem;font-weight:900}.mini-segmented button.active{background:var(--control-gradient);color:var(--teal-dark);box-shadow:var(--control-shadow)}.pane-title{justify-content:space-between;gap:12px}.pane-title>div{gap:9px}.pane-title svg{color:var(--teal)}.pane-title h2{font-size:.9rem;font-weight:900}.mini-action,.icon-action{display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);color:var(--ink);box-shadow:var(--control-shadow)}.mini-action{width:34px;height:34px}.icon-action{width:42px;height:42px}.template-list{display:grid;gap:7px;flex:0 0 194px;min-height:0;overflow:auto;padding-right:3px}.study-set-list{display:grid;gap:8px;min-height:0;overflow:auto;padding-right:3px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.study-set-row{display:grid;gap:5px;width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);color:var(--ink);text-align:left}.study-set-row.selected{border-color:var(--teal);background:var(--selected-bg)}.study-set-row strong{font-size:.88rem}.study-set-row span,.study-set-row small{color:var(--muted);font-size:.75rem;font-weight:800;line-height:1.35}.word-bank{display:grid;align-content:start;gap:7px;min-height:0;overflow:auto;padding-right:3px}.word-card{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-gradient);box-shadow:var(--control-shadow)}.word-card strong{font-size:.84rem}.word-card span{color:var(--muted);font-size:.75rem;font-weight:800}.mobile-resource-pane{display:grid;gap:12px}.mobile-resource-head{display:grid;gap:10px}.mobile-resource-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-resource-grid,.mobile-template-viewer{display:grid;gap:12px}.mobile-template-list{display:grid;gap:8px}.template-reader{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--control-shadow),var(--glass-highlight)}.template-reader header{display:grid;gap:4px}.template-reader header small{color:var(--teal);font-weight:950;letter-spacing:.04em;text-transform:uppercase}.template-reader header strong{font-size:1.02rem}.template-reader div{display:grid;gap:8px}.template-reader p{display:grid;grid-template-columns:24px 1fr;gap:9px;margin:0;color:var(--ink);font-size:.9rem;font-weight:760;line-height:1.5}.template-reader p span{display:grid;width:24px;height:24px;place-items:center;border-radius:8px;background:var(--selected-bg);color:var(--teal-dark);font-size:.72rem;font-weight:950}.template-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:62px;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);color:var(--ink);text-align:left}.template-row.selected{border-color:var(--teal);background:var(--selected-bg);box-shadow:var(--pressed-shadow)}.template-row strong,.template-row small{display:block}.template-row strong{font-size:.86rem;line-height:1.25}.template-row small{margin-top:5px;color:var(--muted);font-size:.76rem;font-weight:800}.editor-stack{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;flex:1;gap:9px;min-height:0}.editor-stack label{display:grid;gap:7px;color:var(--muted);font-size:.78rem;font-weight:900}.editor-stack input,.editor-stack textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface-gradient);color:var(--ink);outline:none}.editor-stack input{height:38px;padding:0 12px}.template-textarea-label{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}.editor-stack textarea{height:100%;min-height:0;padding:11px;resize:none;line-height:1.55}.editor-stack input:focus,.editor-stack textarea:focus{border-color:var(--teal);box-shadow:var(--focus-ring)}.segmented-control{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);box-shadow:var(--pressed-shadow)}.segmented-control button{min-height:34px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-weight:900}.segmented-control button.active{background:var(--control-gradient);color:var(--teal-dark);box-shadow:var(--control-shadow)}.editor-actions{gap:8px}.primary-action,.secondary-action{display:inline-flex;flex:1;align-items:center;justify-content:center;gap:7px;min-height:40px;border-radius:8px;font-weight:900}.primary-action{border:1px solid var(--teal);background:var(--teal);color:var(--button-on-ink)}.primary-action:hover{background:var(--teal-dark);transform:translateY(-1px)}.secondary-action{border:1px solid var(--line-strong);background:var(--control-gradient);color:var(--ink);box-shadow:var(--control-shadow)}.practice-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:13px 20px 11px}.section-kicker{color:var(--teal-dark);font-size:.74rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.practice-toolbar h1{max-width:760px;padding-top:3px;font-size:clamp(1.08rem,1.8vw,1.56rem);line-height:1.12}.progress-track{height:7px;background:var(--progress-bg)}.progress-track span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--coral));transition:width .22s ease}.insight-strip{gap:8px;padding:9px 20px;border-bottom:1px solid var(--line)}.metric{gap:9px;min-width:96px;min-height:38px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);box-shadow:var(--control-shadow)}.metric svg{color:var(--teal)}.metric span{display:grid;gap:1px}.metric small{color:var(--muted);font-size:.68rem;font-weight:900;text-transform:uppercase}.metric strong{font-size:1rem;line-height:1.1}.karaoke-stage{display:block;min-height:0;padding:16px clamp(14px,2.8vw,30px);background:linear-gradient(180deg,var(--stage-top),var(--stage-bottom)),repeating-linear-gradient(0deg,transparent 0 31px,var(--stage-rule) 31px 32px);overflow:hidden}.rain-stage{position:relative;grid-row:4;min-height:0;overflow:hidden;background:linear-gradient(180deg,var(--stage-top),var(--stage-bottom)),repeating-linear-gradient(0deg,transparent 0 34px,var(--stage-rule) 34px 35px)}.rain-stage.stage-hit-pop{animation:stage-bump .22s ease-out}.rain-stage.stage-hit-crack{animation:stage-crack .23s steps(2,end)}.rain-stage.stage-hit-slice{animation:stage-slice .24s ease-out}.rain-stage.stage-hit-bounce{animation:stage-bounce .26s cubic-bezier(.17,.89,.32,1.35)}.rain-stage.stage-hit-burst,.rain-stage.stage-hit-shock{animation:stage-shock .28s cubic-bezier(.2,.9,.25,1.25)}.rain-stage:after{position:absolute;right:18px;bottom:18px;left:18px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--teal),var(--coral));content:""}.falling-word{position:absolute;display:grid;place-items:center;gap:2px;min-width:112px;min-height:48px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-gradient);box-shadow:0 10px 24px #374a5c24,var(--glass-highlight);color:inherit;cursor:pointer;text-align:center;transform:translate(-50%);will-change:transform}.falling-word:hover{border-color:var(--teal);transform:translate(-50%) translateY(-2px)}.falling-word:active{transform:translate(-50%) scale(.94)}.falling-word strong{color:var(--teal-dark);font-size:.95rem;line-height:1.2}.falling-word span{color:var(--muted);font-size:.72rem;font-weight:900;line-height:1.2}.impact-effect{position:absolute;z-index:5;width:1px;height:1px;pointer-events:none;transform:translate(-50%);overflow:visible}.impact-card{position:absolute;z-index:3;display:grid;min-width:118px;min-height:50px;place-items:center;gap:2px;padding:8px 14px;border:1px solid var(--teal);border-radius:8px;background:var(--selected-bg);box-shadow:0 0 0 2px #39c0bd40,0 12px 24px #0e7c7b3d;animation:impact-card .68s cubic-bezier(.18,.89,.32,1.18) forwards;transform:translate(-50%);will-change:transform,opacity}.impact-crack .impact-card{border-color:var(--coral);animation-name:impact-crack-card;background:#ffe8e0e6}.impact-slice .impact-card{animation-name:impact-slice-card}.impact-bounce .impact-card{animation-name:impact-bounce-card}.impact-burst .impact-card,.impact-shock .impact-card{border-color:var(--amber);animation-name:impact-burst-card;box-shadow:0 0 0 4px #f0b45f38,0 14px 28px #e56f4f47}.impact-card strong{color:var(--teal-dark);font-size:.92rem}.impact-card span{color:var(--coral);font-size:.78rem;font-weight:950}.impact-ring{position:absolute;z-index:1;width:118px;height:118px;border:3px solid var(--teal);border-radius:999px;animation:impact-ring .56s ease-out forwards;opacity:.8;transform:translate(-50%,-34px) scale(.18);will-change:transform,opacity}.impact-flash{position:absolute;z-index:2;width:156px;height:22px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);opacity:0;animation:impact-flash .42s ease-out forwards;transform:translate(-50%,12px) rotate(-10deg);will-change:transform,opacity}.impact-crack .impact-ring{border-color:var(--coral);animation-name:impact-crack-ring}.impact-slice .impact-ring{width:178px;height:22px;border-radius:999px;border-color:var(--teal);animation-name:impact-slice-ring}.impact-bounce .impact-ring{animation-name:impact-bounce-ring}.impact-burst .impact-ring,.impact-shock .impact-ring{border-color:var(--amber);animation-name:impact-burst-ring}.impact-shard{position:absolute;z-index:4;width:9px;height:9px;border-radius:2px;background:var(--coral);transform:translate(-50%,16px);will-change:transform,opacity}.impact-slice .impact-shard{width:18px;height:3px;border-radius:999px;background:var(--teal)}.impact-burst .impact-shard,.impact-shock .impact-shard{width:11px;height:11px;background:var(--amber)}.shard-1,.shard-2,.shard-3,.shard-4,.shard-5,.shard-6,.shard-7,.shard-8,.shard-9,.shard-10{animation-duration:.66s;animation-timing-function:ease-out;animation-fill-mode:forwards}.shard-1{animation-name:shard-1}.shard-2{animation-name:shard-2}.shard-3{animation-name:shard-3}.shard-4{animation-name:shard-4}.shard-5{animation-name:shard-5}.shard-6{animation-name:shard-6}.shard-7{animation-name:shard-7}.shard-8{animation-name:shard-8}.shard-9{animation-name:shard-9}.shard-10{animation-name:shard-10}@keyframes impact-card{0%{opacity:1;transform:translate(-50%) scale(1) rotate(0)}18%{transform:translate(-50%,-8px) scale(.9) rotate(-3deg)}36%{transform:translate(-50%,-12px) scale(1.14) rotate(3deg)}58%{opacity:.95;transform:translate(-50%,-18px) scale(1.02) rotate(-1deg)}to{opacity:0;transform:translate(-50%,-38px) scale(.72) rotate(0)}}@keyframes impact-crack-card{0%{opacity:1;transform:translate(-50%) scale(1.04) rotate(0)}16%{transform:translate(calc(-50% - 8px),-4px) scale(.88) rotate(-5deg)}34%{transform:translate(calc(-50% + 9px),-10px) scale(1.16) rotate(4deg)}64%{opacity:.9;transform:translate(calc(-50% - 3px),-18px) scale(.96) rotate(-2deg)}to{opacity:0;transform:translate(-50%,-40px) scale(.65) rotate(7deg)}}@keyframes impact-slice-card{0%{opacity:1;transform:translate(-50%) scale(1) skew(0)}20%{transform:translate(calc(-50% + 18px),-6px) scale(.92) skew(-12deg)}42%{transform:translate(calc(-50% - 16px),-12px) scale(1.12) skew(10deg)}to{opacity:0;transform:translate(calc(-50% + 34px),-34px) scale(.7) skew(-18deg)}}@keyframes impact-bounce-card{0%{opacity:1;transform:translate(-50%) scale(1)}16%{transform:translate(-50%,5px) scale(1.16,.7)}34%{transform:translate(-50%,-26px) scale(.86,1.22)}62%{opacity:.95;transform:translate(-50%,-12px) scale(1.05,.95)}to{opacity:0;transform:translate(-50%,-44px) scale(.68)}}@keyframes impact-burst-card{0%{opacity:1;transform:translate(-50%) scale(1) rotate(0)}18%{transform:translate(-50%,-8px) scale(.78) rotate(-7deg)}36%{transform:translate(-50%,-18px) scale(1.28) rotate(7deg)}58%{opacity:.92;transform:translate(-50%,-24px) scale(1.05) rotate(-2deg)}to{opacity:0;transform:translate(-50%,-56px) scale(.54) rotate(10deg)}}@keyframes impact-ring{to{opacity:0;transform:translate(-50%,-34px) scale(1.45)}}@keyframes impact-crack-ring{to{opacity:0;transform:translate(-50%,-34px) scale(1.55,.9) rotate(-8deg)}}@keyframes impact-slice-ring{to{opacity:0;transform:translate(-50%,-26px) scale(1.55,.44) rotate(-12deg)}}@keyframes impact-bounce-ring{45%{opacity:.45;transform:translate(-50%,-24px) scale(.72,.45)}to{opacity:0;transform:translate(-50%,-34px) scaleX(1.5)}}@keyframes impact-burst-ring{to{opacity:0;transform:translate(-50%,-34px) scale(2.05)}}@keyframes impact-flash{0%{opacity:0;transform:translate(-50%,12px) scaleX(.2) rotate(-10deg)}30%{opacity:1}to{opacity:0;transform:translate(-50%,-18px) scaleX(1.55) rotate(-10deg)}}@keyframes stage-bump{30%{transform:translateY(2px) scale(.998)}70%{transform:translateY(-1px) scale(1.001)}}@keyframes stage-crack{0%{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(5px)}75%{transform:translate(-2px)}to{transform:translate(0)}}@keyframes stage-slice{35%{transform:translate(3px) skew(-.8deg)}70%{transform:translate(-2px) skew(.4deg)}}@keyframes stage-bounce{35%{transform:translateY(4px) scaleY(.995)}65%{transform:translateY(-3px) scaleY(1.003)}}@keyframes stage-shock{0%{transform:translate(0) scale(1)}18%{transform:translate(-5px,3px) scale(.997)}36%{transform:translate(5px,-2px) scale(1.002)}54%{transform:translate(-3px,-2px) scale(1.001)}78%{transform:translate(2px,1px) scale(1)}to{transform:translate(0) scale(1)}}@keyframes shard-1{to{opacity:0;transform:translate(-88px,-42px) rotate(130deg)}}@keyframes shard-2{to{opacity:0;transform:translate(-54px,-76px) rotate(210deg)}}@keyframes shard-3{to{opacity:0;transform:translate(2px,-90px) rotate(170deg)}}@keyframes shard-4{to{opacity:0;transform:translate(58px,-70px) rotate(260deg)}}@keyframes shard-5{to{opacity:0;transform:translate(88px,-30px) rotate(120deg)}}@keyframes shard-6{to{opacity:0;transform:translate(56px,18px) rotate(300deg)}}@keyframes shard-7{to{opacity:0;transform:translate(-18px,28px) rotate(240deg)}}@keyframes shard-8{to{opacity:0;transform:translate(-70px,10px) rotate(190deg)}}@keyframes shard-9{to{opacity:0;transform:translate(98px,-80px) rotate(320deg) scale(.7)}}@keyframes shard-10{to{opacity:0;transform:translate(-98px,-80px) rotate(80deg) scale(.7)}}.rain-input-bar{display:grid;grid-row:5;grid-template-columns:minmax(0,1fr) 128px;gap:9px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface-gradient)}.rain-input-bar input,.phrase-stage textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface-gradient);color:var(--ink);outline:none}.rain-input-bar input{height:40px;padding:0 12px;font-weight:900}.rain-input-bar input:focus,.phrase-stage textarea:focus{border-color:var(--teal);box-shadow:var(--focus-ring)}.phrase-stage{display:grid;grid-row:4 / 6;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;min-height:0;padding:18px;background:linear-gradient(180deg,var(--stage-top),var(--stage-bottom)),repeating-linear-gradient(0deg,transparent 0 34px,var(--stage-rule) 34px 35px)}.phrase-prompt{display:grid;gap:10px;margin:0;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--surface-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--control-shadow),var(--glass-highlight);color:var(--prompt-active);font-weight:900;line-height:1.45}.phrase-prompt small{color:var(--muted);font-size:.78rem}.phrase-prompt strong{color:var(--prompt-active);font-size:clamp(1.02rem,1.7vw,1.42rem)}.phrase-mode-tabs{max-width:420px}.word-chip-row{display:flex;flex-wrap:wrap;gap:7px}.word-chip-row button{min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);color:var(--ink);font-size:.82rem;font-weight:900}.word-chip-row button:hover{border-color:var(--teal);color:var(--teal-dark)}.phrase-stage textarea{min-height:0;padding:14px;resize:none;font-size:1rem;font-weight:800;line-height:1.6}.line-stack{display:grid;align-content:start;gap:11px;height:100%;min-height:100%;overflow:hidden;padding:15px clamp(12px,1.8vw,20px);border:1px solid var(--paper-edge);border-radius:8px;background:var(--paper-sheet);box-shadow:inset 0 0 0 3px var(--paper-inset),var(--control-shadow)}.practice-pair{display:grid;gap:2px;min-width:0}.prompt-line,.typed-line,.typing-mirror,.inline-typing-input{margin:0;min-height:29px;font-family:SFMono-Regular,Cascadia Mono,Menlo,Consolas,Noto Sans Mono CJK KR,monospace;font-size:clamp(.94rem,1.18vw,1.12rem);font-weight:800;letter-spacing:0;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.prompt-line{color:var(--prompt)}.current-prompt{color:var(--prompt-active)}.typed-line,.typing-mirror{color:var(--ink)}.completed-pair{opacity:.78}.active-pair{padding:7px 10px 9px;border-left:4px solid var(--teal);background:var(--focus-bg)}.upcoming-pair{opacity:.42}.inline-input-wrap{position:relative;min-height:33px;border-bottom:2px solid var(--input-rule)}.inline-typing-input{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:block;width:100%;height:100%;min-height:100%;padding:0;border:0;border-radius:0;background:transparent;color:transparent;caret-color:var(--ink);outline:none;overflow:hidden;resize:none}.inline-typing-input:focus{box-shadow:0 2px 0 var(--teal)}.typing-mirror{position:relative;z-index:1;min-height:33px;pointer-events:none}.placeholder-typed{border-bottom:2px solid var(--placeholder-rule)}.correct-char{color:var(--ink)}.wrong-char{color:var(--red);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}.pending-char{color:transparent}.empty-state,.complete-state{display:grid;justify-items:center;align-content:center;min-height:100%;gap:9px;color:var(--muted);text-align:center}.empty-state{max-width:420px;min-height:auto;margin:auto;padding:26px;border:1px solid var(--line);border-radius:8px;background:var(--surface-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--control-shadow),var(--glass-highlight)}.empty-state svg,.complete-state svg{color:var(--teal)}.empty-state strong,.complete-state strong{color:var(--ink);font-size:clamp(1.05rem,1.6vw,1.34rem)}.empty-state span,.complete-state span{max-width:470px;line-height:1.5;font-weight:700}.typing-dock{display:grid;padding:9px 22px 11px;border-top:1px solid var(--line);background:var(--surface-gradient)}.notice{justify-content:space-between;gap:14px;min-height:31px;color:var(--green);font-size:.84rem;font-weight:900}.notice.warning{color:var(--amber)}.notice span:last-child{color:var(--muted);white-space:nowrap}.score-panel{display:grid;place-items:center;min-height:104px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(140deg,var(--score-bg-a),var(--score-bg-b)),var(--surface-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--control-shadow),var(--glass-highlight)}.theme-toggle:hover,.mini-action:hover,.icon-action:hover,.secondary-action:hover,.template-row:hover,.study-set-row:hover,.word-card:hover,.word-chip-row button:hover{transform:translateY(-1px)}.score-panel strong{font-size:2.55rem;line-height:.95}.score-panel span{color:var(--muted);font-weight:900;text-transform:uppercase}.review-list{display:grid;align-content:start;gap:7px;overflow:auto;padding-right:3px}.review-list p{display:grid;grid-template-columns:24px 1fr;gap:9px;margin:0;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--control-gradient);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--control-shadow),var(--glass-highlight);color:var(--muted);font-size:.8rem;font-weight:700;line-height:1.45}.review-list p span{display:grid;width:24px;height:24px;place-items:center;border-radius:8px;background:var(--surface-gradient);color:var(--teal-dark);font-weight:950}.vocab-review-list p{grid-template-columns:24px 1fr}.vocab-review-list p strong,.vocab-review-list p small{grid-column:2}.vocab-review-list p strong{color:var(--ink);font-size:.84rem}.vocab-review-list p small{color:var(--muted);font-size:.73rem;font-weight:800;line-height:1.4}.review-list .review-empty{display:block;color:var(--subtle)}.boot-error{display:grid;min-height:100vh;place-content:center;gap:10px;padding:24px;color:var(--red);text-align:center}.boot-error strong{color:var(--ink);font-size:1.3rem}.boot-error span{max-width:640px;color:var(--muted);font-weight:800}@media(max-width:1180px){.product-layout{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}.practice-pane,.game-pane{min-height:0}.review-pane{grid-column:1 / -1;min-height:260px}}@media(max-width:860px){body{height:auto;min-height:100dvh;overflow:auto}#root{height:auto;min-height:100dvh;overflow:visible}.app{height:auto;min-height:100dvh;overflow:visible;padding:10px}.topbar{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.mode-tabs{grid-column:1 / -1;justify-content:stretch;order:3;overflow-x:auto}.mode-tabs button:not(.active){display:none}.mode-tabs button{flex:1;justify-content:center;min-width:0}.topbar-actions{margin-left:auto}.brand-lockup span,.theme-toggle span{display:none}.product-layout{grid-template-columns:1fr;gap:10px;height:auto;overflow:visible}.template-pane{order:2;height:auto;overflow:hidden}.mobile-resource-shell{display:block;padding:12px;overflow:visible}.practice-pane,.game-pane{order:1;min-height:min(620px,calc(100dvh - 116px))}.review-pane{order:3;min-height:260px}.review-pane{display:none}.study-set-list{max-height:330px;overflow:auto}.word-bank{max-height:260px}.mobile-template-list{max-height:260px;overflow:auto;padding-right:3px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.template-reader{max-height:420px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.editor-stack{min-height:420px}.desktop-only-pane{order:1;min-height:min(420px,calc(100dvh - 148px))}.insight-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.metric{min-width:0}.rain-controls{grid-template-columns:1fr}}@media(max-width:560px){.app{gap:10px;padding:8px}.brand-mark{width:42px;height:42px}.mode-tabs button{min-width:82px;padding:0 8px;font-size:.76rem}.template-pane,.practice-pane,.review-pane,.game-pane{border-radius:8px}.practice-toolbar,.insight-strip,.editor-actions,.notice{align-items:stretch;flex-direction:column}.insight-strip{grid-template-columns:1fr}.topbar{align-items:stretch}.topbar-actions{margin-left:0;justify-content:flex-end}.practice-toolbar{padding:12px}.practice-toolbar h1{font-size:1.08rem}.karaoke-stage,.phrase-stage,.line-stack{padding:12px}.rain-input-bar{grid-template-columns:1fr}.falling-word{min-width:92px;max-width:180px;padding:7px 10px}.falling-word strong{font-size:.84rem;text-align:center}.phrase-prompt{padding:12px}.phrase-prompt strong{font-size:1rem}.word-chip-row button{min-height:28px;font-size:.76rem}.prompt-line,.typed-line,.typing-mirror,.inline-typing-input{font-size:.94rem}}