:root{--bg:#fff7ec;--ink:#3a2a1f;--muted:#8a7766;--accent:#ff8a1f;--accent-deep:#e8680a;--accent-soft:#ffe2c2;--card:#fff;--line:#f0dcc6;--good:#2bb673;--warn:#c2410c;--danger:#d9364f;--radius:18px;--tap:48px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:-apple-system,Hiragino Sans,Apple SD Gothic Neo,Noto Sans KR,Noto Sans JP,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);margin:0}body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none;min-height:100dvh}button,select,input{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}.screen{max-width:480px;padding:calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(16px + var(--safe-left));flex-direction:column;gap:14px;margin:0 auto;display:flex}.btn{min-height:var(--tap);border:2px solid var(--line);background:var(--card);border-radius:999px;padding:10px 18px;font-weight:700;transition:transform 80ms}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.4}.btn-primary{background:var(--accent);border-color:var(--accent-deep);color:#fff;box-shadow:0 4px 0 var(--accent-deep)}.btn-big{min-height:72px;font-size:1.25rem}.btn-sub{background:var(--accent-soft);border-color:var(--accent-soft)}.btn-danger{color:var(--danger);border-color:#f5c2cb}.icon-btn{width:var(--tap);height:var(--tap);background:var(--card);border:none;border-radius:50%;font-size:1.6rem;line-height:1}.icon-btn-spacer{width:var(--tap)}.card{background:var(--card);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px 16px;display:flex}.card h2{color:var(--muted);margin:0;font-size:.95rem}.placeholder{color:var(--muted);text-align:center;margin:0;font-size:.9rem}.muted{color:var(--muted)}.warn{color:var(--warn)}.topbar{justify-content:space-between;align-items:center;display:flex}.topbar-title{margin:0;font-size:1.1rem}.hero{align-items:center;gap:12px;padding-top:8px;display:flex}.bubble{background:var(--card);border-radius:var(--radius);margin:0;padding:12px 14px;font-weight:700;position:relative}.pang-total{justify-content:space-between;align-items:baseline;padding:0 4px;display:flex}.pang-total .label{color:var(--muted);font-weight:700}.pang-total .value{color:var(--accent-deep);font-size:1.6rem}.seals{justify-content:space-between;gap:8px;display:flex}.seal{border:2px dashed var(--line);border-radius:50%;width:36px;height:36px}.seal.on{background:var(--accent);border:none}.home-nav{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.btn-nav{border-radius:var(--radius);white-space:nowrap;padding:10px 2px;font-size:.8rem}.stage-road{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.stage{background:var(--card);border-radius:var(--radius);align-items:center;gap:12px;min-height:64px;padding:12px 14px;display:flex}.stage.locked{opacity:.5}.stage-id{background:var(--accent-soft);border-radius:50%;flex:none;place-items:center;width:44px;height:44px;font-weight:800;display:grid}.stage.open .stage-id{background:var(--accent);color:#fff}.stage-body{flex-direction:column;flex:1;min-width:0;display:flex}.stage-body small{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.play-top{align-items:center;gap:8px;display:flex}.dots{flex:1;justify-content:center;gap:4px;display:flex}.dot{background:var(--line);border-radius:50%;width:14px;height:14px}.dot.done{background:var(--accent)}.dot.now{background:var(--card);border:3px solid var(--accent)}.combo{min-width:var(--tap);text-align:center;color:var(--accent-deep);font-weight:800}.pang-bar{background:var(--line);border-radius:999px;height:10px;overflow:hidden}.pang-fill{background:var(--accent);transform-origin:0;width:100%;height:100%;transform:scaleX(.02)}.question{background:var(--card);border-radius:var(--radius);flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:40dvh;display:flex}.question-no{color:var(--muted);margin:0;font-weight:700}.answers{flex-direction:column;gap:10px;display:flex}.mascot-dock{right:calc(8px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));pointer-events:none;position:fixed}.result-title{text-align:center;margin:12px 0 0}.stats{text-align:center;flex-direction:row;justify-content:space-around}.stats div{flex-direction:column;display:flex}.stats strong{font-size:1.4rem}.countdown{text-align:center;color:var(--accent-deep);padding:24px 0;font-size:4rem;font-weight:800}.tabs{background:var(--card);border-radius:999px;grid-template-columns:1fr 1fr;gap:6px;padding:4px;display:grid}.tab{background:0 0;border:none;border-radius:999px;min-height:44px;font-weight:700}.tab.active{background:var(--accent);color:#fff}.grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.grid-cell{aspect-ratio:1;background:var(--card);color:var(--line);border-radius:14px;place-items:center;font-weight:800;display:grid}.row{justify-content:space-between;align-items:center;gap:12px;min-height:44px;display:flex}.row.col{flex-direction:column;align-items:stretch}.row input[type=checkbox]{width:28px;height:28px;accent-color:var(--accent)}.segmented{background:var(--bg);border-radius:999px;grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.segmented button{background:0 0;border:none;border-radius:999px;min-height:44px;font-weight:700}.segmented button.active{background:var(--accent);color:#fff}select{border:2px solid var(--line);background:var(--card);border-radius:12px;min-height:44px;padding:0 10px}.toast{left:50%;bottom:calc(20px + var(--safe-bottom));background:var(--ink);color:#fff;z-index:100;border-radius:999px;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);padding:12px 16px;font-weight:700;display:flex;position:fixed;transform:translate(-50%)}.toast-btn{background:var(--accent);color:#fff;border:none;border-radius:999px;min-height:36px;padding:0 14px;font-weight:800}.test-btns{flex-wrap:wrap;gap:8px;display:flex}.test-btns .btn{white-space:nowrap;flex:1;min-width:140px;padding:10px 8px}.stage-layers{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.stage-layers .bg{opacity:0;transition:opacity .8s;position:absolute;inset:0}.bg-2{background:radial-gradient(120% 80% at 50% 0,#ffe3bf 0%,#fff7ec 70%)}.bg-3{background:radial-gradient(120% 90% at 50% 0,#ffd29e 0%,#ffeede 75%)}.bg-4{background:radial-gradient(130% 90% at 50% 0,#ffb877 0%,#ffe0c2 80%)}.bg-5{background:radial-gradient(140% 100% at 50% 0,#6b3fa0 0%,#2b1c4a 70%)}body.lv2 .bg-2,body.lv3 .bg-3,body.lv4 .bg-4,body.lv5 .bg-5{opacity:1}body.lv5{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body.lv5 .play .pang-label{color:#fff}body.lv5 .play .qtype{color:#8a3ffc}.lights{top:calc(4px + var(--safe-top));opacity:0;justify-content:space-around;transition:opacity .6s,transform .6s;display:flex;position:absolute;left:0;right:0;transform:translateY(-20px)}.bulb{background:hsl(calc(var(--i) * 47), 90%, 62%);width:12px;height:12px;box-shadow:0 0 10px hsl(calc(var(--i) * 47), 90%, 62%);animation:1.2s ease-in-out infinite twinkle;animation-delay:calc(var(--i) * -.17s);border-radius:50%}body.lv3 .lights,body.lv4 .lights,body.lv5 .lights{opacity:1;transform:none}body.lv4 .bulb,body.lv5 .bulb{animation-duration:.6s}@keyframes twinkle{50%{opacity:.35}}.audience{left:0;right:0;bottom:calc(6px + var(--safe-bottom));opacity:0;justify-content:center;gap:6px;padding-right:100px;transition:opacity .6s,transform .6s cubic-bezier(.3,1.5,.5,1);display:flex;position:absolute;transform:translateY(60px)}body.lv3 .audience,body.lv4 .audience,body.lv5 .audience{opacity:1;transform:none}body.left-handed .audience{padding-left:100px;padding-right:0}.fan{animation:1.6s ease-in-out infinite sway;animation-delay:calc(var(--i) * -.3s)}.fan.hop{animation:.5s cubic-bezier(.3,.7,.4,1) fanhop,1.6s ease-in-out .5s infinite sway;animation-delay:calc(var(--i) * 50ms), .5s}@keyframes sway{50%{transform:rotate(-6deg)}}@keyframes fanhop{40%{transform:translateY(-26px)scale(1.1,.92)}}.screen{z-index:1;position:relative}.play{min-height:100dvh;padding-bottom:calc(110px + var(--safe-bottom))}.play .loading{text-align:center;color:var(--muted);margin-top:40dvh}.combo{opacity:0;flex-direction:column;justify-content:center;align-items:center;min-width:72px;height:44px;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);display:flex;transform:scale(.6)}.combo.on{opacity:1;transform:none}.combo strong{color:var(--accent-deep);font-size:1.4rem;line-height:1}.combo small{color:var(--accent-deep);white-space:nowrap;font-size:.6rem;font-weight:800}.combo-timer{background:var(--line);border-radius:2px;width:56px;height:3px;margin-top:2px;display:block;overflow:hidden}.combo-timer i{background:var(--accent);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.pang{align-items:center;gap:8px;display:flex}.pang-bar{background:var(--line);border-radius:999px;flex:1;height:12px;overflow:hidden}.pang-fill{transform-origin:0;background:linear-gradient(90deg,#ffcf3f,#ff8a1f,#ff5c8a);height:100%;transition:transform .5s cubic-bezier(.2,.9,.3,1.2);transform:scaleX(.02)}.pang-label{text-align:right;min-width:64px;color:var(--accent-deep);font-variant-numeric:tabular-nums;font-weight:800}.play .question{min-height:34dvh;padding:16px;position:relative}.qtype{color:var(--muted);margin:0;font-size:.9rem;font-weight:800}.prompt{flex-direction:column;align-items:center;gap:6px;display:flex}.glyph{color:var(--ink);font-size:min(34vw,150px);font-weight:700;line-height:1.1}.glyph.word{font-size:min(14vw,64px)}.speaker{background:var(--accent);color:#fff;width:110px;height:110px;box-shadow:0 6px 0 var(--accent-deep);border:none;border-radius:50%;font-size:3rem;transition:transform 80ms}.speaker:active{transform:translateY(4px)}.prompt small{color:var(--muted)}.choices{grid-template-columns:1fr 1fr;gap:10px;display:grid}.choice{border:3px solid var(--line);background:var(--card);border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:76px;padding:8px;font-weight:800;transition:transform .12s,opacity .25s;display:flex;position:relative}.choice:active{transform:scale(.95)}.choice .label{font-size:1.35rem}.choices.big .choice .label{font-size:2.6rem;font-weight:700}.choice .sub{color:var(--muted);font-size:.8rem;font-weight:700}.choice.correct{border-color:var(--good);background:#e6f8ef;animation:.35s cubic-bezier(.3,1.8,.5,1) pop}.choice.wrong{opacity:.45;animation:.35s nope}.choice.gone{opacity:.25;transform:scale(.94)}.choice.reveal{border-color:var(--good);animation:1s ease-in-out infinite glow;box-shadow:0 0 0 4px #bff0d6}@keyframes pop{50%{transform:scale(1.1)}}@keyframes nope{20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(4px)}}@keyframes glow{50%{transform:scale(1.04)}}.hanamaru{pointer-events:none;animation:.9s ease-out forwards maru;position:absolute;inset:10% 20%}@keyframes maru{0%{opacity:0;transform:scale(.4)rotate(-40deg)}30%{opacity:1;transform:scale(1.05)rotate(0)}80%{opacity:1}to{opacity:0;transform:scale(1.1)}}.screen.shake{animation:.3s shake}@keyframes shake{25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-3px)}75%{transform:translate(-3px,2px)}}.banner{z-index:60;pointer-events:none;text-align:center;animation:1.3s cubic-bezier(.3,1.5,.5,1) forwards bannerIn;position:fixed;top:36%;left:50%;transform:translate(-50%,-50%)}.banner strong{color:#fff;-webkit-text-stroke:2px var(--accent-deep);text-shadow:0 4px 0 var(--accent-deep);white-space:nowrap;font-size:2.6rem;font-weight:900;display:block}.banner small{color:var(--accent-deep);font-weight:900;display:block}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.08)}30%{transform:translate(-50%,-50%)scale(1)}85%{opacity:1}to{opacity:0;transform:translate(-50%,-60%)scale(1)}}.fx-canvas{pointer-events:none;z-index:50;width:100vw;height:100dvh;position:fixed;inset:0}.start-overlay{z-index:70;background:#fff7eceb;border:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;display:flex;position:fixed;inset:0}.start-overlay strong{color:#fff;background:var(--accent);box-shadow:0 6px 0 var(--accent-deep);border-radius:999px;padding:18px 40px;font-size:2rem}.start-overlay small{color:var(--muted);font-weight:700}.mascot-dock{right:calc(6px + var(--safe-right));bottom:calc(6px + var(--safe-bottom));z-index:40;pointer-events:none;position:fixed}body.left-handed .mascot-dock{right:auto;left:calc(6px + var(--safe-left))}.mascot-dock svg .hp-root,.mascot-dock svg .hp-head,.mascot-dock svg .hp-arm-up,.mascot-dock svg .hp-arm-chest,.mascot-dock svg .hp-mouth,.mascot-dock svg .hp-eye,.mascot-dock svg .hp-tail{transform-box:fill-box}.hp-root{transform-origin:50% 100%}.hp-head{transform-origin:50% 90%}.hp-arm-up{transform-origin:85% 95%}.hp-arm-chest{transform-origin:20% 20%}.hp-tail{transform-origin:0 100%}.hp-mouth,.hp-eye{transform-origin:50%}.pose-idle .hp-root{animation:2.4s ease-in-out infinite breathe}.pose-idle .hp-eye{animation:4s infinite blink}.pose-dance .hp-root{animation:.5s ease-in-out infinite alternate bob}.pose-dance .hp-head{animation:1s ease-in-out infinite tilt}.pose-dance .hp-arm-up{animation:.5s ease-in-out infinite alternate wave}.pose-dance .hp-tail{animation:.5s ease-in-out infinite alternate wag}.pose-jump .hp-root{animation:.7s cubic-bezier(.3,.7,.4,1) jump}.pose-jump .hp-arm-up{animation:.18s ease-in-out 4 alternate pump}.pose-clap .hp-root{animation:.5s cubic-bezier(.3,.7,.4,1) 2 jump}.pose-clap .hp-arm-chest{animation:.15s ease-in-out 6 alternate clap}.pose-clap .hp-arm-up{animation:.15s ease-in-out 6 alternate pump}.pose-spin .hp-root{transform-origin:50%;animation:.7s cubic-bezier(.4,.1,.3,1) spin}.pose-oops1 .hp-root{animation:.9s ease-out oopsTilt}.pose-oops2 .hp-root{animation:.9s ease-out oopsFlop}.pose-oops3 .hp-root{animation:.9s ease-out oopsShake}.pose-oops4 .hp-root{animation:.9s ease-out oopsDizzy}.pose-oops .hp-eye{animation:.9s squint}.pose-sleep .hp-root{transition:transform .6s;transform:rotate(-8deg)translateY(4%)}.pose-sleep .hp-eye{transform:scaleY(.12)}.pose-sleep:after{content:"Zzz";color:var(--muted);font-weight:900;animation:2s ease-in-out infinite zzz;position:absolute;top:-6px;right:8px}.talking .hp-mouth{animation:.18s ease-in-out infinite alternate talk}.held{text-align:center;border:3px solid var(--ink);white-space:nowrap;background:#fff;border-radius:14px;min-width:52px;padding:4px 10px;font-size:1.6rem;font-weight:800;animation:1.1s cubic-bezier(.3,1.6,.5,1) forwards held;position:absolute;top:-44px;left:-10px}@keyframes breathe{50%{transform:scale(1.02,.98)}}@keyframes blink{0%,94%,to{transform:scaleY(1)}97%{transform:scaleY(.1)}}@keyframes bob{0%{transform:translateY(0)scale(1.02,.97)}to{transform:translateY(-6%)scale(.98,1.03)}}@keyframes tilt{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes wave{0%{transform:rotate(-10deg)}to{transform:rotate(14deg)}}@keyframes wag{0%{transform:rotate(-8deg)}to{transform:rotate(10deg)}}@keyframes jump{0%{transform:scale(1.1,.88)}35%{transform:translateY(-28%)scale(.94,1.08)}70%{transform:translateY(0)scale(1.08,.9)}to{transform:none}}@keyframes pump{0%{transform:rotate(-8deg)}to{transform:rotate(16deg)}}@keyframes clap{0%{transform:rotate(0)}to{transform:rotate(-28deg)}}@keyframes spin{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-18%)rotate(180deg)}to{transform:translateY(0)rotate(360deg)}}@keyframes oopsTilt{30%{transform:rotate(-16deg)translate(-6%)}60%{transform:rotate(8deg)}}@keyframes oopsFlop{30%{transform:scale(1.15,.7)}60%{transform:scale(.95,1.06)}}@keyframes oopsShake{15%,45%{transform:translate(-6%)}30%,60%{transform:translate(6%)}}@keyframes oopsDizzy{50%{transform:rotate(-10deg)scale(.95)}75%{transform:rotate(8deg)}}@keyframes squint{20%,70%{transform:scaleY(.3)}}@keyframes zzz{50%{opacity:.3;transform:translateY(-6px)}}@keyframes talk{0%{transform:scaleY(.75)}to{transform:scaleY(1.1)}}@keyframes held{0%{opacity:0;transform:translateY(20px)scale(.5)}25%{opacity:1;transform:translateY(-6px)scale(1.1)}40%{transform:none}85%{opacity:1}to{opacity:0;transform:translateY(-16px)}}.btn-play{background:var(--accent);border-color:var(--accent-deep);color:#fff;border-radius:50%;min-width:48px;min-height:48px;padding:0;font-size:1.1rem}.today-stage{text-align:center;color:var(--muted);margin:0;font-weight:700}.small{margin:0;font-size:.85rem}.result-mascot{justify-content:center;display:flex}.result-mascot .mascot{animation:2.4s ease-in-out infinite breathe}@media (prefers-reduced-motion:reduce){.screen.shake,.bulb{animation:none}}.choices.trace-area{justify-content:center;display:flex}.trace-board{border:3px solid var(--line);background:#fff;border-radius:22px;padding:0;line-height:0;position:relative}.trace-canvas{touch-action:none;-webkit-user-select:none;user-select:none;border-radius:20px;display:block}.trace-board.nope{animation:.35s nope}.trace-board.complete{border-color:var(--good);animation:.4s cubic-bezier(.3,1.8,.5,1) pop}.trace-word{justify-content:center;gap:6px;font-size:2.2rem;font-weight:700;display:flex}.trace-word span{text-align:center;opacity:.35;min-width:1.2em;transition:opacity .2s,transform .2s}.trace-word span.now{opacity:1;color:var(--accent-deep);transform:scale(1.1)}.trace-word span.done{opacity:.8}.speaker.small{width:52px;height:52px;box-shadow:0 4px 0 var(--accent-deep);font-size:1.4rem}.play .question:has(.trace-word){flex-direction:row;gap:14px;min-height:auto;padding:10px 16px}.trace-practice .jamo-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.trace-practice .jamo-grid button{border:2px solid var(--line);background:var(--card);border-radius:12px;min-height:48px;font-size:1.4rem;font-weight:700}.trace-practice .jamo-grid button.on{background:var(--accent);color:#fff;border-color:var(--accent-deep)}.trace-practice .jamo-grid button.cleared:after{content:"✓";color:var(--good);vertical-align:top;margin-left:2px;font-size:.7rem}.trace-practice .stage-area{flex-direction:column;align-items:center;gap:10px;display:flex}.trace-practice .tools{justify-content:space-between;gap:10px;width:100%;max-width:360px;display:flex}body.left-handed .trace-practice .tools{flex-direction:row-reverse}.trace-practice .now-glyph{color:var(--muted);font-size:1.1rem;font-weight:800}.play .question:has(.trace-word) .prompt{flex-direction:row;gap:12px}.play .question:has(.trace-word) .qtype{flex:1}.choices.speak-area{display:block}.speak-panel{flex-direction:column;align-items:center;gap:12px;padding:8px 0;display:flex}.mic{background:var(--accent);color:#fff;width:132px;height:132px;box-shadow:0 6px 0 var(--accent-deep);border:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:transform .1s;display:flex}.mic span{font-size:3rem;line-height:1}.mic small{font-weight:800}.mic:active{transform:translateY(4px)}.mic.listening{background:#ff5c8a;animation:1s ease-out infinite micPulse;box-shadow:0 0 #ff5c8a99}@keyframes micPulse{0%{box-shadow:0 0 #ff5c8a8c}to{box-shadow:0 0 0 26px #ff5c8a00}}.speak-msg{text-align:center;min-height:1.4em;color:var(--muted);margin:0;font-weight:700}.speak-msg.live{color:#ff5c8a}.speak-msg.good{color:var(--good)}.speak-msg.again{color:var(--accent-deep)}.speak-panel.self .row-btns{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.speak-panel.self .btn{min-width:96px}.glyph.ja{font-size:min(9vw,40px)}.name-sound{gap:6px;display:flex}.chip{border:2px solid var(--line);background:var(--card);border-radius:999px;min-height:40px;padding:0 12px;font-weight:800}.play .question:has(.speak-msg){min-height:26dvh}.link-btn{color:var(--muted);background:0 0;border:none;min-height:44px;font-weight:700;text-decoration:underline}