@font-face{font-family:"Jua";src:url(fonts/jua.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Gowun Dodum";src:url(fonts/gowun.woff2) format("woff2");font-display:swap}
@font-face{font-family:"NotoKR";src:url(fonts/noto-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"NotoKR";src:url(fonts/noto-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ground:#F4F8FF; --paper:#FFFFFF; --ink:#172040; --ink2:#434D6E; --line:rgba(23,32,64,.10); --tint:rgba(23,32,64,.05);
  --sound:#E4492A; --sound-bg:#FFEDE6; --sound-ink:#B33A20;
  --letter:#2456E0; --letter-bg:#E6EEFF;
  --sun:#FFC83D; --sun-ink:#7A5600; --ok:#128A58; --ok-bg:#DDF5E9; --calm:#6B5BD6; --calm-bg:#EEEBFF;
  --ease:cubic-bezier(.32,.72,0,1);
  --f-sound:"Jua","Gowun Dodum",sans-serif; --f-letter:"NotoKR","Noto Sans KR","Noto Sans CJK KR",sans-serif; --f-body:"Gowun Dodum","NotoKR",sans-serif;
  --r:28px; --shadow:0 1px 2px rgba(23,32,64,.06),0 14px 30px -18px rgba(23,32,64,.35);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--ground)}
body{font-family:var(--f-body);color:var(--ink);font-size:20px;line-height:1.5;word-break:keep-all;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:4px solid var(--letter);outline-offset:3px}
[hidden]{display:none!important}
.snd{font-family:var(--f-sound);color:var(--sound)}
.ltr{font-family:var(--f-letter);font-weight:900;color:var(--letter)}

#app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) 28px 6px}
.brand{font-family:var(--f-sound);font-size:26px;display:flex;align-items:center;gap:10px}
.brand .avatar{width:44px!important;height:44px!important}
.stars{display:flex;align-items:center;gap:6px;font-family:var(--f-letter);font-weight:900;font-size:24px}
.stars svg{width:34px;height:34px}
.progress{display:flex;gap:8px}
.progress i{width:16px;height:16px;border-radius:50%;background:var(--line)}
.progress i.done{background:var(--letter)} .progress i.cur{background:var(--sun);transform:scale(1.25)}
main{position:relative;overflow:hidden;padding:0 28px calc(20px + env(safe-area-inset-bottom,0px))}
.screen{height:100%;display:flex;flex-direction:column;gap:18px;animation:in .45s var(--ease)}
@keyframes in{from{opacity:.3;transform:translateY(14px)}to{opacity:1;transform:none}}
.center{align-items:center;justify-content:center;text-align:center}

.avatar{display:inline-grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--av) 18%,white);color:var(--av);flex:none}
.avatar svg{width:70%;height:70%}

/* 버튼 */
.big{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:84px;padding:0 44px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--f-sound);font-size:34px;box-shadow:0 18px 30px -18px rgba(23,32,64,.6);transition:transform .35s var(--ease)}
.big:active{transform:scale(.96)}
.big.sun{background:var(--sun);color:var(--ink)}
.big[disabled]{opacity:.35;pointer-events:none}
.soft{min-height:64px;padding:0 26px;border-radius:999px;background:var(--tint);font-family:var(--f-sound);font-size:24px}
.linkbtn{font-size:16px;color:var(--ink2);text-decoration:underline;padding:10px}
.speaker{width:128px;height:128px;border-radius:50%;background:var(--sound-bg);color:var(--sound-ink);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease);position:relative}
.speaker svg{width:62px;height:62px}
.speaker:active{transform:scale(.93)}
.speaker.playing::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:4px solid var(--sound);opacity:.5;animation:ring 1s infinite}
@keyframes ring{from{transform:scale(.9);opacity:.6}to{transform:scale(1.15);opacity:0}}

/* 홈 */
.who{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.who button{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 26px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow);font-family:var(--f-sound);font-size:28px;min-width:180px;transition:transform .3s var(--ease)}
.who button:active{transform:scale(.96)}
.home-hi{font-family:var(--f-sound);font-size:44px;margin:0}
.today{display:flex;gap:14px;align-items:center;font-size:22px;color:var(--ink2)}
.today i{width:26px;height:26px;border-radius:50%;background:var(--line)} .today i.on{background:var(--ok)}

/* 문항 공통 */
.stage{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.ask{font-family:var(--f-sound);font-size:28px;color:var(--ink2);text-align:center}
.word{display:flex;gap:14px;justify-content:center;align-items:flex-end;flex-wrap:nowrap}
.syl{display:flex;flex-direction:column;align-items:center;gap:10px}
.syl .g{width:124px;height:124px;border-radius:28px;background:var(--paper);display:grid;place-items:center;font-family:var(--f-letter);font-weight:900;font-size:86px;line-height:1;color:var(--letter);box-shadow:var(--shadow)}
.syl.fixed .g{color:#6C7AA8;background:#F9FBFF}
.syl .g.q{color:rgba(36,86,224,.28)}
.syl.target .g{outline:4px solid var(--letter-bg)}
.parts{display:flex;gap:6px}
.slot{width:62px;height:62px;border-radius:16px;display:grid;place-items:center;font-family:var(--f-letter);font-weight:900;font-size:34px;background:var(--paper);color:var(--ink);border:3px solid transparent;position:relative;transition:transform .25s var(--ease),border-color .2s}
.slot.fixed{background:transparent;color:#8C97BD;font-size:28px}
.slot.open{border:3px dashed rgba(36,86,224,.45);background:#fff}
.slot.open.sel{border:3px solid var(--letter);transform:translateY(-4px);box-shadow:0 10px 18px -10px rgba(36,86,224,.6)}
.slot.open.filled{border-style:solid;border-color:rgba(36,86,224,.25);color:var(--letter)}
.slot .ghost{position:absolute;inset:0;display:grid;place-items:center;color:rgba(36,86,224,.25)}
.slot.open.filled .ghost{display:none}
.slot small{position:absolute;bottom:-22px;font-size:13px;font-family:var(--f-letter);font-weight:500;color:var(--ink2);white-space:nowrap}
.slot.empty-choice{color:var(--ink2);font-size:18px;font-family:var(--f-sound)}

.keys{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;margin-top:6px}
.key{height:72px;border-radius:18px;background:var(--paper);box-shadow:0 1px 2px rgba(23,32,64,.08),0 8px 14px -12px rgba(23,32,64,.4);font-family:var(--f-letter);font-weight:900;font-size:36px;color:var(--ink);transition:transform .15s var(--ease)}
.key:active{transform:scale(.92);background:var(--letter-bg)}
.key.dbl{background:#F3F6FF}
.key.none{grid-column:span 2;font-family:var(--f-sound);font-weight:400;font-size:24px;background:var(--sun);color:var(--ink)}
.key.none[disabled]{opacity:.3}
.key.shake{animation:shake .35s}
.row-end{display:flex;justify-content:flex-end;gap:14px;align-items:center}

/* 고르기 */
.tiles{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.tile{min-width:220px;min-height:130px;padding:10px 30px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow);font-family:var(--f-letter);font-weight:900;font-size:58px;color:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.tile:active{transform:scale(.96)}
.tile.gone{opacity:0;transform:scale(.85);pointer-events:none}
.tile.right{background:var(--ok-bg);color:var(--ok)}
.tile.sm{font-size:44px;min-width:130px;min-height:110px}

/* 설명 카드 */
.explain{display:flex;flex-direction:column;align-items:center;gap:22px}
.join{display:flex;align-items:center;gap:18px;font-family:var(--f-letter);font-weight:900}
.join .m{padding:14px 26px;border-radius:24px;background:var(--letter-bg);color:var(--letter);font-size:64px}
.join .op{font-family:var(--f-sound);font-size:48px;color:var(--ink2)}
.join .res{font-size:72px;color:var(--letter)}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(720px,100%)}
.vs > div{border-radius:24px;padding:16px 20px;text-align:center}
.vs .s{background:var(--sound-bg)} .vs .l{background:var(--letter-bg)}
.vs .lab{font-size:18px;color:var(--ink2);font-family:var(--f-letter);font-weight:500}
.vs .s b{font-family:var(--f-sound);font-weight:400;color:var(--sound);font-size:56px}
.vs .l b{font-family:var(--f-letter);font-weight:900;color:var(--letter);font-size:56px}
.rule{font-family:var(--f-sound);font-size:28px;text-align:center}
.hl{color:var(--sound);text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:8px}

/* 피드백 */
.fb{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;font-family:var(--f-sound);font-size:46px;padding:18px 36px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow);transition:all .35s var(--ease);z-index:20}
.fb.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fb.ok{color:var(--ok)} .fb.calm{color:var(--calm)} .fb.neutral{color:var(--ink2)}
.burst{position:absolute;width:30px;height:30px;pointer-events:none;z-index:21}
.pop{animation:pop .45s var(--ease)}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}

/* 부모 차례 */
.parent-turn{border-radius:var(--r);background:var(--calm-bg);padding:20px 26px;display:flex;flex-direction:column;gap:14px}
.parent-turn .who-label{font-family:var(--f-letter);font-weight:900;font-size:16px;color:var(--calm)}
.parent-turn h3{margin:0;font-size:26px}
.parent-turn p{margin:0;font-size:18px;color:var(--ink2)}
.pt-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.pt-row input{font:inherit;font-family:var(--f-letter);font-size:36px;font-weight:900;padding:10px 18px;border-radius:18px;border:3px solid var(--line);min-width:0;width:320px;user-select:text;-webkit-user-select:text}
.pt-row input:focus{outline:none;border-color:var(--calm)}
.okx{min-height:72px;padding:0 30px;border-radius:999px;font-family:var(--f-sound);font-size:26px;background:var(--paper);box-shadow:var(--shadow)}
.okx.y{color:var(--ok)} .okx.n{color:var(--ink2)}
.show-word{font-family:var(--f-letter);font-weight:900;font-size:120px;color:var(--ink);line-height:1.1}
.jamo-choices{display:grid;grid-template-columns:repeat(4,160px);gap:18px;justify-content:center}
.jamo-choices button{height:150px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow);font-family:var(--f-letter);font-weight:900;font-size:80px;color:var(--ink)}
.sd{display:flex;gap:26px;justify-content:center}
.sd button{width:230px;height:170px;border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow);font-family:var(--f-sound);font-size:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.sd svg{width:90px;height:40px}

/* PIN */
.pin{display:flex;flex-direction:column;align-items:center;gap:16px}
.pin h2{font-family:var(--f-sound);font-weight:400;margin:0;font-size:30px}
.pin-dots{display:flex;gap:12px;min-height:22px}
.pin-dots i{width:18px;height:18px;border-radius:50%;background:var(--line)} .pin-dots i.on{background:var(--ink)}
.pin-grid{display:grid;grid-template-columns:repeat(3,96px);gap:12px}
.pin-key{height:76px;border-radius:20px;background:var(--paper);box-shadow:var(--shadow);font-family:var(--f-letter);font-weight:900;font-size:30px}
.pin-msg{min-height:26px;color:var(--sound-ink);font-size:18px}

.card{background:var(--paper);border-radius:var(--r);padding:26px 30px;box-shadow:var(--shadow)}
.msg-big{font-family:var(--f-sound);font-size:40px;margin:0}
.sub{font-size:20px;color:var(--ink2);margin:0}
.field{display:flex;gap:10px;align-items:center}
.field input{font:inherit;font-size:28px;padding:12px 16px;border-radius:16px;border:3px solid var(--line);width:260px;user-select:text;-webkit-user-select:text}
.av-pick{display:flex;gap:10px}
.av-pick button{border-radius:50%;padding:4px;border:4px solid transparent}
.av-pick button.sel{border-color:var(--ink)}

/* 세로 화면 */
@media (orientation:portrait){
  .stage{grid-template-columns:minmax(0,1fr);justify-items:center}
  .keys{grid-template-columns:repeat(7,minmax(0,1fr))}
  .key.none{grid-column:span 2}
  .jamo-choices{grid-template-columns:repeat(2,160px)}
}
@media (max-height:700px) and (orientation:landscape){
  .syl .g{width:100px;height:100px;font-size:70px}
  .key{height:60px;font-size:30px}
  .speaker{width:100px;height:100px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* v1.1 */
.beats{display:flex;gap:10px;justify-content:center;margin-top:10px}
.beats i{width:18px;height:18px;border-radius:50%;background:var(--sound)}
.vs .s{display:flex;flex-direction:column;align-items:center;gap:8px}
.vs .s .speaker{width:96px;height:96px}
.vs .s .speaker svg{width:46px;height:46px}
.three{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.three .soft b{font-size:30px}
.keys.vowels{grid-template-columns:repeat(3,120px);justify-content:center}
.idle{top:50%;font-size:34px}