:root{
    --en:#1d63c9; --zh:#d6334c; --ko:#7c3aed;
    --bg1:#4facfe; --bg2:#a78bfa; --bg3:#f6ad55;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; min-height:100vh;
    font-family:'Segoe UI','Malgun Gothic','Microsoft YaHei',sans-serif;
    background:linear-gradient(135deg,var(--bg1),var(--bg2) 55%,var(--bg3));
    background-attachment:fixed;
    display:flex; flex-direction:column; align-items:center;
    padding:24px 16px 60px;
  }
  h1{color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.25); font-size:clamp(24px,5vw,34px); margin:0 0 4px;}
  /* without this, #appScreen (a flex item of body) shrink-wraps to its content instead of
     spanning the available width, so .card's own max-width never actually gets room to grow */
  #appScreen{width:100%; display:flex; flex-direction:column; align-items:center;}

  .top-controls{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; justify-content:center; align-items:center;}
  .tabs{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  .tab-btn{
    border:none; padding:12px 22px; border-radius:999px; font-size:16px; font-weight:700;
    cursor:pointer; background:rgba(255,255,255,.55); color:#333;
    transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .tab-btn:hover:not(.active):not(:disabled),
  .cat-btn:hover:not(.active):not(:disabled){
    transform:translateY(-2px); background:rgba(255,255,255,.85); color:#0f766e;
    box-shadow:0 5px 12px rgba(15,118,110,.18);
  }
  .tab-btn:active:not(:disabled), .cat-btn:active:not(:disabled){transform:translateY(0) scale(.96);}
  .tab-btn.active{
    background:#0f766e; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
  .tab-btn.active:hover:not(:disabled){
    transform:translateY(-2px); background:#0d9488; box-shadow:0 7px 16px rgba(15,118,110,.35);
  }
  /* cat-btn (단어/회화) uses its own color so it never looks like it's the same toggle group as the tabs */
  .cat-btn.active{
    background:#6d28d9; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
  .cat-btn.active:hover:not(:disabled){
    transform:translateY(-2px); background:#7c3aed; box-shadow:0 7px 16px rgba(109,40,217,.35);
  }
  .tab-btn:focus-visible, .cat-btn:focus-visible{
    outline:3px solid #fbbf24; outline-offset:3px;
  }
  .tab-btn:disabled, .cat-btn:disabled{
    opacity:.42; cursor:not-allowed; filter:grayscale(.35); box-shadow:none;
  }

  .cat-tabs{display:flex; gap:10px;}
  .cat-btn{
    border:none; padding:10px 20px; border-radius:999px; font-size:15px; font-weight:700;
    cursor:pointer; background:rgba(255,255,255,.55); color:#333;
    transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  }

  .letter-forms{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
  .form-box{background:#f1f5f9; border-radius:14px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .form-label{font-size:13px; color:#64748b; font-weight:700; margin-bottom:4px;}
  .form-glyph{font-size:56px; font-weight:800; color:#1a202c; line-height:1.1;}
  .form-glyph.cursive{font-family:'Comforter',cursive,Georgia,serif; font-weight:400; color:#1a202c; font-size:60px;}
  .ipa-row{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
  .ipa-badge{background:#1a202c; color:#fbbf24; font-weight:800; font-size:19px; padding:5px 14px; border-radius:10px; font-family:'Courier New',monospace;}
  .ipa-name{font-size:15px; color:#555; font-weight:600;}

  .examples-list{margin-top:8px; text-align:left;}
  .examples-title{font-size:13px; color:#888; font-weight:700; margin-bottom:8px;}
  .example-item{
    background:#fff7ed; border:2px solid #fed7aa; border-radius:12px; padding:10px 14px;
    margin-bottom:4px; cursor:pointer; transition:.1s;
  }
  .example-item:hover{border-color:#fb923c;}
  .example-item.playing{border-color:#22c55e; background:#f0fdf4; box-shadow:0 0 0 4px rgba(34,197,94,.35);}
  .example-top{display:flex; align-items:center; gap:8px;}
  .example-word{font-size:19px; font-weight:700; color:#333; flex-shrink:0;}
  .example-cursive{
    font-size:23px; font-weight:400; color:#1a202c;
    font-family:'Comforter',cursive,Georgia,serif; flex-shrink:0;
  }
  .example-play{font-size:16px; flex-shrink:0;}
  /* 홀수 번째(1,3,5,7...)는 인쇄체(소문자)만, 짝수 번째는 필기체만 보여준다 */
  #letterExamples.examples-mode-print .example-cursive{display:none;}
  #letterExamples.examples-mode-cursive .example-word{display:none;}
  .example-gloss-inline{
    font-size:12.5px; color:#777; font-weight:600; text-align:right; flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .hl-letter{color:#e11d48; font-size:1.2em; font-weight:900;}
  .syl{transition:.15s; border-radius:6px; padding:0 1px;}
  .syl.syl-active{background:#64748b; color:#fff; font-weight:900;}

  .card{
    background:#fff; border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,.25);
    width:100%; max-width:520px; padding:32px 24px; text-align:center; position:relative;
  }
  .progress{
    position:absolute; top:14px; right:18px; color:#666; font-size:13px; font-weight:700;
    background:#f1f5f9; padding:4px 12px; border-radius:999px;
  }
  .ru-display{
    min-height:clamp(140px,32vw,220px); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px; margin-bottom:6px;
  }
  .ru-text{
    font-size:clamp(40px,9vw,72px); font-weight:800; color:#1a202c; margin:0;
    overflow-wrap:break-word; max-width:100%; line-height:1.15; border-radius:18px; transition:.2s; padding:2px 10px;
  }
  .ru-text.playing{background:#f0fdf4; color:#1a202c;}
  .ru-cursive-line{
    font-family:'Comforter',cursive,Georgia,serif; color:#1a202c; font-weight:400;
    text-align:center; margin:0; overflow-wrap:break-word;
  }
  .ru-cursive-line:empty{display:none;}
  #quizRu.cursive-mode{font-family:var(--cursive-font,'Neucha'),cursive,Georgia,serif; color:#1a202c;}
  .desc-text{font-size:clamp(20px,4vw,26px); font-weight:700; color:#1a202c; margin:6px 0 22px;}

  .trans-row{
    display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px;
    margin-bottom:10px; font-size:20px; font-weight:600; text-align:left;
  }
  .trans-row.en{background:#e8f1fd; color:var(--en);}
  .trans-row.zh{background:#fdeaec; color:var(--zh);}
  .trans-row.ko{background:#f2ebfd; color:var(--ko);}
  .flag{font-size:24px;}
  #letterDesc .trans-row, #wordTrans.compact .trans-row{padding:8px 12px; margin-bottom:6px; font-size:15px;}
  #letterDesc .flag, #wordTrans.compact .flag{font-size:17px;}

  .controls{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; flex-wrap:wrap;}
  .ctrl-btn{
    border:none; border-radius:50%; width:56px; height:56px; font-size:22px; cursor:pointer;
    background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.25);
    display:flex; align-items:center; justify-content:center; transition:.1s;
  }
  .ctrl-btn:active{transform:scale(.92);}
  .ctrl-btn.play{width:68px; height:68px; font-size:28px; background:linear-gradient(135deg,#f6ad55,#ed64a6);}

  .repeat-stepper{display:flex; align-items:center; gap:6px; margin-left:6px;}
  .step-btn{
    border:none; border-radius:50%; width:30px; height:30px; font-size:16px; font-weight:800; cursor:pointer;
    background:#e2e8f0; color:#333;
  }
  .step-btn:active{transform:scale(.92);}
  .repeat-value{min-width:18px; text-align:center; font-weight:800; font-size:16px; color:#333;}

  .voice-warn{color:#b91c1c; background:#fee2e2; padding:10px 14px; border-radius:12px; font-size:14px; margin-top:16px; max-width:520px;}

  /* quiz */
  .quiz-score{color:#fff; font-weight:700; margin-bottom:10px; font-size:15px;}
  .quiz-prompt{display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:26px;}
  .replay-btn{
    border:none; border-radius:50%; width:48px; height:48px; font-size:20px; cursor:pointer;
    background:#5b21b6; color:#fff;
  }
  .option-btn{
    display:block; width:100%; text-align:left; padding:16px 18px; margin-bottom:12px;
    border-radius:14px; border:2px solid #e2e8f0; background:#fff; font-size:18px; font-weight:600;
    color:#333; cursor:pointer; transition:.15s;
  }
  .option-btn:hover{border-color:#a78bfa;}
  .option-btn.correct{background:#dcfce7; border-color:#16a34a; color:#166534;}
  .option-btn.wrong{background:#fee2e2; border-color:#dc2626; color:#991b1b;}
  .option-btn:disabled{cursor:default;}

  .feedback{font-size:18px; font-weight:700; margin:14px 0; min-height:26px;}
  .feedback.ok{color:#16a34a;}
  .feedback.no{color:#dc2626;}

  .next-btn{
    border:none; padding:12px 26px; border-radius:999px; font-size:16px; font-weight:700;
    cursor:pointer; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.25);
  }
  .next-btn.challenge-btn{margin-top:10px; background:linear-gradient(135deg,#f97316,#dc2626);}

  /* grammar quiz (6격 격변화 / 동사활용) */
  .grammar-tabs{display:flex; gap:8px; justify-content:center; margin-bottom:14px;}
  .grammar-tab{
    border:none; padding:9px 18px; border-radius:999px; font-size:14px; font-weight:700;
    cursor:pointer; background:rgba(255,255,255,.55); color:#333; transition:.15s;
  }
  .grammar-tab.active{background:#0f766e; color:#fff; box-shadow:0 3px 10px rgba(0,0,0,.2);}
  .grammar-tab:not(.active):hover{background:rgba(255,255,255,.85);}
  .grammar-score{color:#666; font-weight:700; font-size:14px; margin-bottom:12px;}
  .grammar-prompt{font-size:clamp(20px,4.5vw,26px); font-weight:800; color:#1a202c; line-height:1.4; margin-bottom:6px;}
  .grammar-prompt .ru{color:#0f766e;}
  .grammar-sub{font-size:14px; color:#888; font-weight:600; margin-bottom:16px;}
  .grammar-expl{
    background:#f1f5f9; border-radius:12px; padding:10px 14px; margin-top:12px;
    font-size:14px; color:#334155; line-height:1.55; text-align:left;
  }
  .grammar-expl b{color:#0f766e;}
  .grammar-blank{
    display:inline-block; min-width:96px; margin:0 4px; padding:0 6px;
    border-bottom:3px solid #0f766e; color:#0f766e; font-weight:900;
  }

  .type-stats{
    display:flex; justify-content:center; gap:18px; font-weight:700; font-size:14px;
    color:#444; margin-bottom:14px; flex-wrap:wrap;
  }
  .type-target{
    font-size:clamp(28px,7vw,46px); font-weight:800; letter-spacing:1px;
    margin-bottom:14px; min-height:70px; display:flex; align-items:center;
    justify-content:center; flex-wrap:wrap; word-break:break-all;
  }
  .type-target.cursive-mode{font-family:var(--cursive-font,'Neucha'),cursive,Georgia,serif; font-weight:400; letter-spacing:0; font-size:clamp(35px,8.75vw,58px);}
  .virtual-kb.kb-cursive .kb-key{font-family:var(--cursive-font,'Neucha'),cursive,Georgia,serif; font-weight:400; font-size:calc(var(--kb-font,13px) * 1.3);}
  .type-char{color:#cbd5e1; transition:.1s; white-space:pre;}
  .type-char.correct{color:#16a34a;}
  .type-char.wrong{color:#fff; background:#dc2626; border-radius:6px;}
  .type-char.current{color:#1a202c; border-bottom:3px solid #667eea;}
  #typeTrans{margin-bottom:16px;}

  .type-keyboard-hint{
    min-height:22px; margin:0 0 8px; padding:7px 10px; border-radius:10px;
    background:#fff7ed; color:#9a3412; border:1px solid #fed7aa;
    font-size:13px; font-weight:800; line-height:1.35;
  }
  .type-keyboard-hint.hidden{display:none;}
  .type-keyboard-hint kbd{
    display:inline-block; min-width:22px; padding:2px 6px; margin:0 2px;
    border:1px solid #cbd5e1; border-bottom-width:3px; border-radius:5px;
    background:#fff; color:#1e293b; font-family:inherit; font-size:12px;
  }
  .virtual-kb{display:flex; flex-direction:column; align-items:flex-start; gap:var(--kb-gap,3px); margin:10px 0 18px; width:100%;}
  .virtual-kb.kb-locked{opacity:.4; pointer-events:none;}
  .kb-row{display:flex; gap:var(--kb-gap,3px);}
  .kb-row.stagger-1{margin-left:calc((var(--kb-size,26px) + var(--kb-gap,3px)) * .5);}
  .kb-row.stagger-2{margin-left:calc((var(--kb-size,26px) + var(--kb-gap,3px)) * 1);}
  .kb-row.stagger-3{margin-left:calc((var(--kb-size,26px) + var(--kb-gap,3px)) * 1.5);}
  .kb-row.kb-space-row{align-self:center;}
  .kb-key{
    position:relative;
    width:var(--kb-size,26px); height:var(--kb-size,26px); border-radius:6px; border:none;
    background:#eef0f4; color:#333; font-weight:700; font-size:var(--kb-font,13px);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .1s; flex-shrink:0;
  }
  .kb-key:active{transform:scale(.9);}
  .kb-shift-char{position:absolute; top:1px; right:3px; font-size:.55em; font-weight:700; opacity:.8;}
  .kb-key.kb-shift{
    background:#334155; color:#fff; font-size:calc(var(--kb-font,13px) * 1.3);
    margin-left:calc(-1 * (var(--kb-size,26px) + var(--kb-gap,3px)));
  }
  .kb-key.kb-shift.active-key{background:#0f172a !important;}
  .kb-key.kb-left{background:#f472b6; color:#4a0d2e;}
  .kb-key.kb-right{background:#f5a35c; color:#3d2200;}
  .kb-key.kb-reach{background:#8b9bf4; color:#1a1a3d;}
  .kb-key.kb-pinky-r{background:#2dd4bf; color:#003d33;}
  .kb-key.kb-num{background:#334155; color:#e2e8f0; font-size:calc(var(--kb-font,13px) * .85);}
  .kb-key.active-key{
    color:#fff; z-index:1; animation:kbActivePulse 1s ease-in-out infinite;
  }
  .kb-key.active-key::after{
    content:''; position:absolute; inset:0; border-radius:6px; border:2px solid;
    animation:kbRipple 1s ease-out infinite; pointer-events:none;
  }
  .kb-key.kb-left.active-key{background:#db2777 !important; box-shadow:0 0 0 3px rgba(244,63,94,.65);}
  .kb-key.kb-left.active-key::after{border-color:#f43f5e;}
  .kb-key.kb-right.active-key{background:#ea580c !important; box-shadow:0 0 0 3px rgba(251,146,60,.65);}
  .kb-key.kb-right.active-key::after{border-color:#fb923c;}
  .kb-key.kb-reach.active-key{background:#4f46e5 !important; box-shadow:0 0 0 3px rgba(129,140,248,.65);}
  .kb-key.kb-reach.active-key::after{border-color:#818cf8;}
  .kb-key.kb-pinky-r.active-key{background:#0d9488 !important; box-shadow:0 0 0 3px rgba(45,212,191,.65);}
  .kb-key.kb-pinky-r.active-key::after{border-color:#2dd4bf;}
  .kb-key.kb-num.active-key{background:#0f172a !important; box-shadow:0 0 0 3px rgba(251,191,36,.65);}
  .kb-key.kb-num.active-key::after{border-color:#fbbf24;}
  @keyframes kbActivePulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.12);}}
  @keyframes kbRipple{
    0%{transform:scale(1); opacity:.9;}
    100%{transform:scale(1.9); opacity:0;}
  }
  .kb-key.key-pop{animation:kbPressPop .22s ease-out;}
  .kb-space.key-pop{animation:kbPressPop .22s ease-out;}
  @keyframes kbPressPop{
    0%{transform:scale(1);}
    45%{transform:scale(1.35);}
    100%{transform:scale(1);}
  }
  .kb-key.wrong-key{animation:kbWrongFlash .25s ease-in-out 2;}
  @keyframes kbWrongFlash{
    0%,100%{background:#dc2626 !important; color:#fff;}
    50%{background:#eef0f4;}
  }
  .kb-space{
    position:relative;
    width:calc(var(--kb-size,26px) * 6); height:var(--kb-size,26px); border-radius:8px; border:none;
    background:#eef0f4; cursor:pointer;
  }
  .kb-space.active-key{
    background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.4);
    z-index:1; animation:kbActivePulse 1s ease-in-out infinite;
  }
  .kb-space.active-key::after{
    content:''; position:absolute; inset:0; border-radius:8px; border:2px solid #22c55e;
    animation:kbRipple 1s ease-out infinite; pointer-events:none;
  }
  .hidden{display:none !important;}

  .arcade-hud{display:flex; justify-content:space-between; font-weight:800; font-size:15px; color:#333; margin-bottom:12px;}
  .arcade-field{
    position:relative; height:340px; border-radius:16px; overflow:hidden; margin-bottom:6px;
    background:linear-gradient(#dbeafe,#e0f2fe 70%,#bbf7d0);
  }
  .arcade-hint-line{
    position:absolute; left:0; right:0; top:20%; border-top:2px dashed rgba(71,85,105,.45);
    pointer-events:none; z-index:1;
  }
  .arcade-hint-line.hidden{display:none;}
  .arcade-word{
    position:absolute; font-size:clamp(32px,9vw,48px); font-weight:800; color:#1a202c;
    background:#fff; padding:5px 12px; border-radius:10px; border:3px solid #64748b;
    box-shadow:0 4px 10px rgba(0,0,0,.35); white-space:nowrap;
  }
  .arcade-word .ac-typed{color:#16a34a;}
  .arcade-word.cursive-mode{font-family:var(--cursive-font,'Neucha'),cursive,Georgia,serif; font-weight:400; font-size:clamp(40px,11.25vw,60px);}
  .arcade-word.type-slow{background:linear-gradient(#bfdbfe,#93c5fd); border-color:#2563eb; color:#1e3a5f;}
  .arcade-word.type-normal{background:linear-gradient(#e0f2fe,#7dd3fc); border-color:#0ea5e9; color:#0c4a6e;}
  .arcade-word.type-zigzag{background:linear-gradient(#fef9c3,#fde047); border-color:#eab308; color:#713f12; font-size:clamp(37px,10.35vw,55px); animation:arcadeZigzag 4.5s ease-in-out infinite;}
  .arcade-word.type-stomp{
    background:linear-gradient(#94a3b8,#64748b); color:#fff; font-size:clamp(42px,11.7vw,62px); padding:9px 16px;
    animation:arcadeStompShake .35s steps(2) infinite;
  }
  .arcade-word.type-tank{
    display:flex; gap:6px; background:linear-gradient(#4ade80,#16a34a); padding:8px 10px;
    border:3px solid #166534; border-radius:14px;
  }
  .tank-word{background:rgba(255,255,255,.9); border-radius:6px; padding:2px 8px;}
  .arcade-word.type-missile{
    padding:8px 16px; border-radius:20px;
    background:linear-gradient(#fca5a5,#ef4444); color:#fff;
  }
  .arcade-word.type-wave{
    background:linear-gradient(#ddd6fe,#a78bfa); border-color:#7c3aed; color:#3b0764;
    animation:arcadeWave 1.8s ease-in-out infinite;
  }
  .arcade-word.type-ghost{
    background:linear-gradient(#f1f5f9,#cbd5e1); border-color:#64748b; color:#1e293b;
    animation:arcadeGhost 1.6s ease-in-out infinite;
  }
  .arcade-word.type-bounce{background:linear-gradient(#fed7aa,#fb923c); border-color:#c2410c; color:#7c2d12;}
  .arcade-word.type-armor{background:linear-gradient(#cbd5e1,#94a3b8); border-color:#334155; color:#0f172a; border-width:4px;}
  .arcade-word.cracked{filter:brightness(.88); box-shadow:inset 0 0 0 3px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.35);}
  .arcade-word.cracked::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:
      linear-gradient(105deg, transparent 46%, rgba(255,255,255,.6) 48%, transparent 50%),
      linear-gradient(15deg, transparent 60%, rgba(255,255,255,.45) 62%, transparent 64%);
  }
  @keyframes arcadeZigzag{0%,100%{margin-left:0;} 25%{margin-left:16px;} 75%{margin-left:-16px;}}
  @keyframes arcadeStompShake{0%,100%{margin-left:0;} 50%{margin-left:5px;}}
  @keyframes arcadeWave{0%,100%{letter-spacing:0px;} 50%{letter-spacing:5px;}}
  @keyframes arcadeGhost{0%,100%{opacity:1;} 50%{opacity:.4;}}
  .arcade-word.boom{animation:arcadeBoom .35s ease-out forwards; pointer-events:none;}
  @keyframes arcadeBoom{0%{transform:scale(1); opacity:1;} 100%{transform:scale(3); opacity:0;}}
  .arcade-overlay{
    position:absolute; inset:0; background:rgba(15,23,42,.72); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px; color:#fff; font-weight:800; font-size:18px;
    text-align:center; padding:20px;
  }
  .is-arcade #catAlphabet, .is-arcade #catTabs, .is-arcade #tabQuiz, .is-arcade #tabType{display:none !important;}
  .is-arcade .top-controls{display:none !important;}
  .is-arcade h1{font-size:15px; margin-bottom:2px;}
  .is-arcade .menu-row1{margin-bottom:8px;}
  .is-arcade .back-to-map{padding:5px 12px; font-size:12px;}
  .is-arcade .current-loc-badge{font-size:12px;}
  .is-arcade #arcadeView{padding:16px 10px; max-width:480px;}
  .is-arcade .arcade-hud{margin-bottom:8px; font-size:13px;}
  .is-arcade .arcade-field{height:min(62vh, 620px); margin-bottom:8px;}
  #mapScreen{
    width:100%; border-radius:28px; padding:20px 0 30px;
    background:
      radial-gradient(circle at 12% 18%, rgba(56,189,248,.55) 0%, transparent 26%),
      radial-gradient(circle at 85% 12%, rgba(74,222,128,.5) 0%, transparent 30%),
      radial-gradient(circle at 78% 55%, rgba(163,230,53,.45) 0%, transparent 32%),
      radial-gradient(circle at 15% 65%, rgba(74,222,128,.5) 0%, transparent 34%),
      radial-gradient(circle at 55% 85%, rgba(250,204,21,.35) 0%, transparent 30%),
      radial-gradient(circle at 40% 40%, rgba(163,230,53,.35) 0%, transparent 40%),
      linear-gradient(160deg,#8fd98f 0%,#a3e635 30%,#facc7a 60%,#5ec3e0 100%);
  }
  /* 장소 카드 목록 - 사람이 자라는 순서(난이도 순)로 정렬된 둥근 카드 */
  .map-head{text-align:center; max-width:640px; margin:0 auto 14px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35);}
  .map-title{font-size:clamp(18px,4.6vw,24px); font-weight:800;}
  .map-sub{font-size:clamp(11px,3vw,13px); font-weight:600; opacity:.95; margin-top:4px;}
  .map-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:clamp(8px,2.2vw,14px); width:100%; max-width:780px; margin:0 auto;
  }
  @media (max-width:400px){ .map-grid{grid-template-columns:repeat(2,1fr); gap:8px;} }
  .map-stage-head{
    grid-column:1/-1; display:flex; align-items:center; gap:10px; padding:10px 2px 0;
    color:#fff; font-weight:800; font-size:clamp(12px,3.2vw,14px); text-shadow:0 1px 4px rgba(0,0,0,.4);
  }
  .map-stage-head::after{content:''; flex:1; height:2px; background:rgba(255,255,255,.45); border-radius:2px;}
  @media (min-width:700px){
    .card{max-width:780px;}
    #ruText{font-size:clamp(48px,10.5vw,86px);}
    .type-target{font-size:clamp(34px,8.5vw,55px);}
    .is-arcade #arcadeView{max-width:620px;}
  }
  .map-card{
    position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    background:rgba(255,255,255,.95); border:none; border-left:5px solid #a78bfa; border-radius:16px;
    padding:12px 13px 13px; cursor:pointer; text-align:left; font-family:inherit;
    box-shadow:0 6px 16px rgba(0,0,0,.2); transition:transform .15s ease, box-shadow .15s ease;
  }
  .map-card:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.28);}
  .map-card:active{transform:scale(.97);}
  .map-card:focus-visible{outline:3px solid #fbbf24; outline-offset:2px;}
  .map-card.current{border-left-color:#f6ad55; box-shadow:0 0 0 3px rgba(246,173,85,.65), 0 8px 20px rgba(0,0,0,.28);}
  .map-card-tier{font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; color:#fff; background:#a78bfa;}
  .map-card-tier.t1{background:#34d399;}
  .map-card-tier.t2{background:#60a5fa;}
  .map-card-tier.t4{background:#fb923c;}
  .map-card-tier.t5{background:#f472b6;}
  .map-card-icon{font-size:clamp(24px,6vw,30px); line-height:1.15;}
  .map-card-name{font-size:clamp(13px,3.4vw,15px); font-weight:800; color:#2d2a20;}
  .map-card-ru{font-size:clamp(11px,2.9vw,12px); font-weight:700; color:#7c3aed;}
  .map-card-here{
    position:absolute; top:-8px; left:12px; background:#fbbf24; color:#1a202c;
    font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px;
  }

  .menu-row1{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px;
    width:100%; max-width:640px; margin:0 auto 12px;
  }
  .menu-row1 .cat-btn{justify-self:start;}
  .back-to-map{
    justify-self:end; border:none; background:rgba(255,255,255,.6); color:#333;
    padding:8px 18px; border-radius:999px; font-weight:700; cursor:pointer; white-space:nowrap;
    transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
  }
  .back-to-map:hover:not(:disabled){transform:translateY(-2px); background:#fff; box-shadow:0 5px 12px rgba(0,0,0,.15);}
  .back-to-map:active:not(:disabled){transform:scale(.96);}
  .back-to-map:focus-visible{outline:3px solid #fbbf24; outline-offset:3px;}
  .back-to-map:disabled{opacity:.42; cursor:not-allowed;}
  .current-loc-badge{
    justify-self:center; text-align:center; color:#fff; font-weight:800; font-size:15px;
    text-shadow:0 1px 3px rgba(0,0,0,.35); white-space:nowrap;
  }

  .toast{
    position:fixed; left:50%; bottom:30px; transform:translateX(-50%); background:#1a202c; color:#fff;
    padding:10px 20px; border-radius:999px; font-size:14px; font-weight:600; opacity:0; transition:.3s;
    pointer-events:none; z-index:100; white-space:nowrap;
  }
  .toast.show{opacity:1;}
.bgm-control{position:fixed; top:8px; right:8px; z-index:999; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.85); padding:5px 10px; border-radius:20px; box-shadow:0 2px 8px rgba(0,0,0,.15);}
.bgm-control.hidden{display:none;}
.bgm-control button{background:none; border:none; font-size:17px; cursor:pointer; line-height:1; padding:0;}
.bgm-control input[type=range]{width:64px; accent-color:#667eea;}
.study-timer-badge{
  position:fixed; top:8px; left:8px; z-index:999; background:rgba(255,255,255,.85);
  color:#334155; font-weight:800; font-size:13px; padding:6px 12px; border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.15); transition:opacity .3s;
}
.voice-pref-btn{
  position:fixed; top:8px; right:110px; z-index:999; border:none; cursor:pointer;
  background:rgba(255,255,255,.85); color:#334155; font-weight:800; font-size:12px;
  padding:6px 12px; border-radius:20px; box-shadow:0 2px 8px rgba(0,0,0,.15); font-family:inherit;
}
.voice-pref-btn:hover{background:#fff;}
@media (max-width:480px){ .voice-pref-btn{top:auto; bottom:10px; right:10px; font-size:12px; padding:5px 10px;} }
.study-timer-badge.paused{opacity:.5;}
@media (max-width:480px){ .study-timer-badge{top:4px; left:4px; font-size:12px; padding:5px 10px;} }
.back-to-quizking{
  position:fixed; top:44px; left:8px; z-index:999; background:rgba(255,255,255,.85);
  color:#334155; font-weight:700; font-size:12px; padding:5px 10px; border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.15); text-decoration:none;
  opacity:1; pointer-events:auto; transition:opacity .25s ease;
}
/* 좁은 화면(모바일)에서만 평소엔 숨기고 스크롤할 때 잠깐 보여준다(다른 버튼과 겹침 방지).
   PC 등 넓은 화면에서는 항상 보인다. */
@media (max-width:480px){
  .back-to-quizking{top:38px; left:4px; opacity:0; pointer-events:none;}
}
.back-to-quizking.show{opacity:1; pointer-events:auto;}
/* ===== 교과 (집: 성경 교과 병렬 문장 + 단어집) ===== */
.lesson-head{margin-bottom:12px;}
.lesson-title{font-size:17px; font-weight:800; color:#1f2937;}
.lesson-src{font-size:12px; color:#64748b; margin-top:4px;}
.lesson-src a{color:#7c3aed; font-weight:700;}
.lesson-hint{font-size:12px; color:#475569; margin-top:6px; line-height:1.6;}
.lesson-blocks{display:flex; flex-direction:column; gap:8px;}
.lesson-block{border:1px solid #e5e7eb; border-radius:12px; padding:9px 12px; transition:.2s;}
.lesson-title-block{margin-bottom:8px;}
.lesson-block.active{background:#ede9fe; box-shadow:inset 0 0 0 2px #a78bfa;}
/* 1:1이 안 맞는 문장: 구조 차이 표시 (뜻은 같음) */
.lesson-block.flag-split{border-left:4px solid #38bdf8; background:rgba(56,189,248,.06);}
.lesson-block.flag-merge{border-left:4px solid #fbbf24; background:rgba(251,191,36,.07);}
.lesson-block.flag-shift{border-left:4px solid #a3e635; background:rgba(163,230,53,.07);}
.lesson-flag-badge{font-size:10px; font-weight:800; color:#64748b; background:#f1f5f9; border:1px solid #e2e8f0; padding:1px 7px; border-radius:999px; margin-left:6px; white-space:nowrap; cursor:help; flex-shrink:0;}
.flag-split .lesson-flag-badge{color:#0369a1; background:#e0f2fe; border-color:#bae6fd;}
.flag-merge .lesson-flag-badge{color:#92400e; background:#fef3c7; border-color:#fde68a;}
.flag-shift .lesson-flag-badge{color:#3f6212; background:#ecfccb; border-color:#d9f99d;}
.lesson-ko{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#1f2937; line-height:1.55;}
.lesson-idx{background:#f1f5f9; color:#64748b; font-weight:800; font-size:11px; min-width:26px; text-align:center; padding:1px 5px; border-radius:8px; margin-top:1px;}
/* align-items:center였으면 문장이 여러 줄로 길게 줄바꿈될 때 반복/정지 버튼이 세로 중앙(문단
   중간)으로 내려가 바로 아래 단어장 박스와 가까워 보일 수 있어, 버튼을 항상 첫 줄 높이에 고정한다. */
.lesson-ru-row{display:flex; gap:10px; align-items:flex-start; margin-top:6px;}
.lesson-ru{font-size:15px; font-weight:700; color:#5b21b6; line-height:1.5; flex:1;}
.ru-word{border-bottom:1px dashed rgba(124,58,237,.5); cursor:help; position:relative;}
.ru-word[data-tip]:hover::after{content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); width:max-content; max-width:220px; background:#1f2937; color:#fff; font-size:12px; font-weight:600; line-height:1.4; padding:5px 9px; border-radius:8px; z-index:60; pointer-events:none; text-align:center; white-space:normal;}
.ru-word:hover{background:#fef3c7; color:#92400e; border-radius:4px;}
.ru-word.compare-looping{color:#dc2626 !important; border-bottom-color:#dc2626;}
/* 문장 속 단어: 품사별 글자색 (단어집 배지 색과 동일) */
.ru-word[data-pos="명사"]:not(.speaking-now):not(.compare-looping){color:#2563eb; border-bottom-color:#2563eb;}
.ru-word[data-pos="동사"]:not(.speaking-now):not(.compare-looping){color:#16a34a; border-bottom-color:#16a34a;}
.ru-word[data-pos="형용사"]:not(.speaking-now):not(.compare-looping){color:#ea580c; border-bottom-color:#ea580c;}
.ru-word[data-pos="부사"]:not(.speaking-now):not(.compare-looping){color:#7c3aed; border-bottom-color:#7c3aed;}
.ru-word[data-pos="숙어"]:not(.speaking-now):not(.compare-looping){color:#db2777; border-bottom-color:#db2777;}
.ru-word[data-pos="표현"]:not(.speaking-now):not(.compare-looping){color:#0891b2; border-bottom-color:#0891b2;}
.ru-word[data-pos="대명사"]:not(.speaking-now):not(.compare-looping){color:#4f46e5; border-bottom-color:#4f46e5;}
.ru-word[data-pos="전치사"]:not(.speaking-now):not(.compare-looping){color:#0d9488; border-bottom-color:#0d9488;}
.ru-word[data-pos="접속사"]:not(.speaking-now):not(.compare-looping){color:#a16207; border-bottom-color:#a16207;}
.speak-word{border-radius:4px; padding:0 1px; transition:background .1s;}
.speak-word.speaking-now{background:#f59e0b; color:#fff; box-shadow:0 0 0 2px rgba(245,158,11,.35);}
.lesson-inline-vocab{margin-top:9px; padding:8px 10px; background:#f8fafc; border-radius:10px; border:1px dashed #cbd5e1;}
.lesson-inline-vocab .vocab-row{background:#fff; padding:5px 9px;}
.lesson-inline-vocab .vocab-ru{font-size:13px; min-width:140px;}
.lesson-inline-vocab .vocab-ko{font-size:12px;}
.lesson-play{padding:5px 12px; font-size:12px; flex-shrink:0;}
.lesson-end{display:flex; align-items:center; gap:12px; margin:16px 0; padding:12px 14px; background:#fffbeb; border:1px solid #fde68a; border-radius:12px;}
.lesson-end-label{font-weight:800; color:#92400e; font-size:14px;}
.lesson-end-date{border:1px solid #fcd34d; border-radius:8px; padding:5px 9px; font-family:inherit; font-size:13px;}
.lesson-gram-btn{margin:6px 0 0; padding:5px 12px; border:1px solid #c4b5fd; background:#f5f3ff; color:#6d28d9; border-radius:999px; font-size:12px; font-weight:800; cursor:pointer; font-family:inherit;}
.lesson-gram-box{text-align:left; margin-top:6px; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; background:#fff;}
.lesson-gram-row{display:grid; grid-template-columns:minmax(80px,1fr) minmax(70px,.9fr) 2.6fr; gap:8px; padding:6px 10px; font-size:13px; border-top:1px solid #f1f5f9; align-items:baseline;}
.lesson-gram-row:first-child{border-top:0;}
.lesson-gram-w{font-weight:800; color:#1f2937;}
.lesson-gram-w[data-pos="명사"]{color:#2563eb;}
.lesson-gram-w[data-pos="동사"]{color:#16a34a;}
.lesson-gram-w[data-pos="형용사"]{color:#ea580c;}
.lesson-gram-w[data-pos="부사"]{color:#7c3aed;}
.lesson-gram-w[data-pos="숙어"]{color:#db2777;}
.lesson-gram-w[data-pos="표현"]{color:#0891b2;}
.lesson-gram-w[data-pos="대명사"]{color:#4f46e5;}
.lesson-gram-w[data-pos="전치사"]{color:#0d9488;}
.lesson-gram-w[data-pos="접속사"]{color:#a16207;}
.lesson-gram-w{cursor:pointer;}
.lesson-gram-w:hover{background:#fef3c7; border-radius:4px;}
.lesson-gram-w.playing{color:#dc2626 !important; background:#fee2e2; border-radius:4px;}
.lesson-gram-l{color:#64748b; font-size:12px;}
.lesson-gram-n{color:#334155;}
@media (max-width:520px){.lesson-gram-row{grid-template-columns:1fr 1fr;} .lesson-gram-n{grid-column:1 / -1;}}
.gram-ref{margin:10px 0; text-align:left;}
.gram-ref summary{cursor:pointer; padding:8px 14px; border:1px solid #c4b5fd; background:#f5f3ff; color:#6d28d9; border-radius:12px; font-weight:800; font-size:13px; list-style:none;}
.gram-ref summary::-webkit-details-marker{display:none;}
.gram-ref-body{margin-top:6px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; padding:8px 10px; overflow-x:auto;}
.gram-ref-body h4{margin:8px 0 4px; font-size:14px; color:#1f2937;}
.gram-ref-body table{width:100%; border-collapse:collapse; font-size:12px;}
.gram-ref-body th{background:#ede9fe; color:#5b21b6; padding:5px 6px; text-align:left; white-space:nowrap;}
.gram-ref-body td{padding:5px 6px; border-top:1px solid #f1f5f9; vertical-align:top;}
.gram-ref-body td:first-child{font-weight:800; color:#1f2937; white-space:nowrap;}
.gram-ref-tip{font-size:12px; color:#475569; line-height:1.6; margin:4px 0;}
.lesson-vocab{margin-top:8px;}
.lesson-vocab-title{font-size:15px; font-weight:800; color:#1f2937;}
.lesson-vocab-count{background:#7c3aed; color:#fff; font-size:11px; font-weight:800; padding:2px 9px; border-radius:999px; margin-left:6px;}
.lesson-vocab-sub{font-size:11px; color:#64748b; font-weight:600; margin-left:6px;}
.lesson-vocab-search{width:100%; margin-top:10px; padding:9px 12px; border:1px solid #d1d5db; border-radius:10px; font-family:inherit; font-size:13px; box-sizing:border-box;}
.lesson-vocab-search:focus{outline:2px solid #a78bfa; border-color:#a78bfa;}
.lesson-vocab-list{margin-top:10px; display:flex; flex-direction:column; gap:5px;}
.vocab-row{display:flex; gap:10px; align-items:center; background:#fafafa; border-radius:10px; padding:7px 11px;}
.vocab-ru{font-size:14px; font-weight:700; color:#5b21b6; min-width:180px;}
.vocab-pos{font-size:10px; font-weight:800; color:#fff; background:#94a3b8; padding:2px 7px; border-radius:999px; flex-shrink:0;}
.vocab-pos[data-pos="명사"]{background:#2563eb;}
.vocab-pos[data-pos="동사"]{background:#16a34a;}
.vocab-pos[data-pos="형용사"]{background:#ea580c;}
.vocab-pos[data-pos="부사"]{background:#7c3aed;}
.vocab-pos[data-pos="숙어"]{background:#db2777;}
.vocab-pos[data-pos="표현"]{background:#0891b2;}
.vocab-pos[data-pos="대명사"]{background:#4f46e5;}
.vocab-pos[data-pos="전치사"]{background:#0d9488;}
.vocab-pos[data-pos="접속사"]{background:#a16207;}
.vocab-ko{font-size:13px; color:#374151;}
.vocab-empty{color:#94a3b8; font-size:13px; padding:10px; text-align:center;}

/* ===== 구분 (헷갈리는 글자 비교) ===== */
.compare-intro-top{font-size:13px; color:#475569; margin:0 0 12px; line-height:1.6;}
.cp-play-hint{background:#7c3aed; color:#fff; font-weight:800; padding:1px 8px; border-radius:999px; font-size:12px;}
.compare-sec{border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; margin-bottom:14px;}
.compare-sec-head{display:flex; align-items:center; gap:10px; padding:11px 14px; background:#f8fafc; border-bottom:1px solid #e5e7eb;}
.compare-sec-head h3{margin:0; flex:1; font-size:15px; color:#1f2937;}
.compare-play{border:none; background:#7c3aed; color:#fff; font-weight:800; padding:7px 15px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:13px; transition:.15s;}
.compare-play:hover{background:#6d28d9;}
.compare-play.playing{background:#dc2626;}
.compare-body{padding:12px 14px; display:flex; flex-direction:column; gap:8px;}
.compare-intro{margin:0; font-size:13px; color:#475569; line-height:1.55;}
.compare-row{display:flex; gap:10px; align-items:flex-start; background:#fafafa; border-radius:10px; padding:8px 10px; transition:.2s;}
.compare-row.active{background:#ede9fe; box-shadow:inset 0 0 0 2px #a78bfa;}
.compare-letters{font-size:20px; font-weight:800; color:#5b21b6; min-width:78px; line-height:1.3;}
.compare-speakable{cursor:pointer; border-bottom:2px dotted #a78bfa;}
.compare-speakable:hover{color:#7c3aed; background:#ede9fe; border-radius:6px;}
/* 반복 재생 중인 글자/버튼 표시 */
.compare-looping{color:#dc2626 !important; border-bottom-color:#dc2626 !important; animation:loopPulse 1.1s ease-in-out infinite;}
@keyframes loopPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.compare-table .cmp-l.compare-speakable{border-bottom:2px dotted #a78bfa; display:inline-block; padding:0 4px;}
.compare-row p{margin:0; font-size:13px; color:#374151; line-height:1.55;}
.compare-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.compare-table th, .compare-table td{border:1px solid #e5e7eb; padding:6px 8px; text-align:left; color:#374151;}
.compare-table th{background:#f1f5f9; font-weight:800; color:#1f2937;}
.compare-table tr.active td{background:#ede9fe;}
.compare-table .cmp-l{font-weight:800; color:#5b21b6; font-size:14px; white-space:nowrap;}

/* ===== 말하기 연습 (유치원) ===== */
.speak-intro{text-align:left; margin-bottom:14px;}
.speak-title{font-size:1.1rem; font-weight:800; color:#1e293b;}
.speak-desc{font-size:0.82rem; color:#64748b; margin-top:4px;}
.speak-letters{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.speak-letter-btn{
  font-size:1.25rem; font-weight:800; color:#1e293b;
  background:#fff; border:2px solid #e2e8f0; border-radius:12px;
  padding:10px 0; width:58px; cursor:pointer; transition:all .15s;
  box-shadow:0 2px 5px rgba(0,0,0,.08);
}
.speak-letter-btn:hover{border-color:#93c5fd; background:#eff6ff;}
.speak-letter-btn.active{background:#3b82f6; color:#fff; border-color:#3b82f6;}
.speak-syllables{margin-top:14px;}
.speak-syl-title{font-size:0.9rem; font-weight:800; color:#334155; margin-bottom:8px; text-align:left;}
.speak-syl-hint{font-weight:600; font-size:0.75rem; color:#94a3b8;}
.speak-syl-list{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
.speak-syl-btn{
  font-size:1rem; font-weight:800; color:#1e293b;
  background:#fff; border:2px solid #e2e8f0; border-radius:10px;
  padding:7px 0; width:52px; cursor:pointer; transition:all .15s;
}
.speak-syl-btn:hover{border-color:#fca5a5; background:#fef2f2;}
.speak-syl-btn.active{background:#dc2626; color:#fff; border-color:#dc2626;}
.speak-practice{margin-top:16px;}
.speak-target-row{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:8px;}
.speak-target{font-size:clamp(56px,12vw,96px); font-weight:800; color:#1e293b; line-height:1.1;}
.speak-listen-btn{
  font-size:0.95rem; font-weight:700; color:#fff; background:#3b82f6;
  border:none; border-radius:10px; padding:10px 16px; cursor:pointer;
}
.speak-listen-btn:disabled{opacity:.5; cursor:default;}
.speak-status{text-align:center; font-size:1rem; font-weight:700; color:#475569; margin-bottom:12px; min-height:24px;}
.speak-status.listening{color:#dc2626;}
.speak-letter-tip{
  max-width:580px; margin:0 auto 12px; background:#fffbeb; border:1px solid #fcd34d;
  border-radius:10px; padding:8px 14px; font-size:0.85rem; color:#92400e; line-height:1.55; text-align:left;
}
.speak-letter-tip b{color:#78350f;}
.speak-wave-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.speak-wave-box{flex:1 1 260px; min-width:230px; max-width:580px; background:#f8fafc; border-radius:12px; padding:8px;}
/* 모바일(좁은 화면)에서는 두 파형을 세로로 쌓으면 화면이 너무 길어지므로,
   한 박스 위에 겹쳐서 그린다(선생님=파랑 배경박스, 내 발음=빨강 선을 투명 배경으로 위에 얹음). */
@media (max-width: 560px){
  .speak-wave-row{flex-direction:column; align-items:stretch; position:relative;}
  .speak-wave-box{max-width:none;}
  .speak-wave-box:nth-child(2){
    position:absolute; inset:0; background:transparent;
  }
  .speak-wave-box:nth-child(2) canvas{background:transparent;}
  .speak-wave-box:nth-child(2) .speak-wave-label{
    position:absolute; top:4px; right:8px; left:auto; width:auto;
    margin:0; color:#dc2626; background:rgba(255,255,255,.85); padding:1px 6px; border-radius:6px;
  }
  .speak-wave-box:first-child .speak-wave-label{color:#3b82f6;}
}
.speak-wave-label{font-size:0.72rem; font-weight:700; color:#64748b; text-align:center; margin-bottom:4px;}
.speak-wave-summary{font-size:0.78rem; font-weight:700; color:#475569; text-align:center; margin:2px 0 10px;}
.speak-wave-summary b.tgt{color:#3b82f6;}
.speak-wave-summary b.mine{color:#dc2626;}
.speak-wave-box canvas{width:100%; height:90px; display:block; background:#fff; border-radius:8px;}
.speak-feedback{margin-top:14px; text-align:center;}
.speak-verdict{font-size:1.5rem; font-weight:900;}
.speak-verdict.ok{color:#16a34a;}
.speak-verdict.retry{color:#dc2626;}
.speak-heard{font-size:0.9rem; color:#475569; margin-top:4px;}
.speak-tips{font-size:0.85rem; color:#b45309; margin-top:6px; line-height:1.5;}
.speak-controls{display:flex; gap:10px; justify-content:center; margin-top:14px;}
.speak-try-btn{
  font-size:1rem; font-weight:800; color:#fff; background:#dc2626;
  border:none; border-radius:12px; padding:12px 24px; cursor:pointer;
}
.speak-try-btn:disabled{opacity:.5; cursor:default;}
.speak-back-btn{
  font-size:0.9rem; font-weight:700; color:#475569; background:#f1f5f9;
  border:none; border-radius:12px; padding:12px 18px; cursor:pointer;
}
.speak-stop-btn{
  font-size:0.9rem; font-weight:700; color:#475569; background:#f1f5f9;
  border:none; border-radius:12px; padding:12px 18px; cursor:pointer;
}
.speak-stop-btn.paused{background:#3b82f6; color:#fff;}
.speak-best{
  margin-top:16px; background:#ecfdf5; border:2px solid #16a34a;
  border-radius:12px; padding:10px 14px; text-align:center;
}
.speak-best-title{font-size:0.78rem; font-weight:800; color:#16a34a; letter-spacing:0.05em;}
.speak-best-body{font-size:1.05rem; font-weight:800; color:#065f46; margin-top:2px;}
.speak-best-sub{font-size:0.82rem; color:#475569; margin-top:2px;}
.speak-history-title{
  font-size:0.78rem; font-weight:800; color:#64748b; margin:14px 0 6px; text-align:left;
}
.speak-history{display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto;}
.speak-history-item{
  display:flex; align-items:center; gap:10px;
  background:#f8fafc; border-radius:10px; padding:7px 12px; text-align:left;
  font-size:0.85rem; color:#334155;
}
.speak-history-item.best{background:#ecfdf5; border:1px solid #a7f3d0;}
.speak-history-item .h-no{font-weight:800; color:#94a3b8; min-width:34px;}
.speak-history-item .h-verdict{font-weight:800; min-width:60px;}
.speak-history-item .h-verdict.ok{color:#16a34a;}
.speak-history-item .h-verdict.retry{color:#dc2626;}
.speak-history-item .h-heard{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#64748b;}
.speak-history-item .h-score{font-weight:800; color:#475569;}  .group-letter-click{cursor:pointer; border-radius:10px; transition:.15s;}
  .group-letter-click:hover{background:#ede9fe; box-shadow:0 0 0 2px #a78bfa;}
  .group-letter-click:hover .gl-print{color:#5b21b6;}
  .group-card{
  background:linear-gradient(180deg,#fff,#f8fafc);
  border-radius:18px; padding:18px 16px; margin-bottom:16px; text-align:left;
  border-left:5px solid var(--group-accent,#94a3b8);
  box-shadow:0 4px 14px rgba(0,0,0,.09);
}
.group-title{
  font-size:15px; font-weight:800; color:#334155; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.group-icon{font-size:19px;}
.group-count{
  margin-left:auto; font-size:12px; font-weight:800; color:#fff;
  background:var(--group-accent,#94a3b8); padding:3px 11px; border-radius:999px;
}
.group-letters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px;}
.group-letter{background:#fff; border-radius:10px; padding:6px 12px; display:flex; flex-direction:column; align-items:center; gap:3px; box-shadow:0 2px 5px rgba(0,0,0,.1); transition:background .15s,color .15s;}
.gl-print{font-size:20px; font-weight:800; color:#000;}
.gl-cursive{display:flex; gap:4px;}
.gl-cursive img{width:26px; height:26px; mix-blend-mode:multiply;}
.gl-cursive img.gl-boost{transform:scale(1.7);}
.group-letter-print{font-size:19px; font-weight:800; color:#1a202c; line-height:1.15;}
.group-letter-cursive{font-family:'Comforter',cursive,Georgia,serif; font-weight:400; font-size:21px; color:#1a202c; line-height:1.15;}
.group-letter.active{
  background:#fffbeb; border-color:#fbbf24;
  box-shadow:0 0 0 4px rgba(251,191,36,.4), 0 6px 14px rgba(0,0,0,.22);
  animation:groupLetterPop .35s ease;
}
@keyframes groupLetterPop{0%{transform:scale(1);} 45%{transform:scale(1.3);} 100%{transform:scale(1.08);}}
.group-controls{display:flex; align-items:center; justify-content:center; gap:10px;}
.group-controls .repeat-stepper{background:#eef0f6; border-radius:999px; padding:4px 6px 4px 12px; gap:8px;}
.group-controls .step-btn{width:26px; height:26px; font-size:14px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15);}
.group-controls .repeat-value{font-size:15px;}
.group-play-btn{
  background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; border-radius:999px;
  padding:9px 22px; font-size:14px; font-weight:800; cursor:pointer; transition:background .15s;
}
.group-play-btn:active{transform:scale(.96);}
.group-play-btn.playing{background:linear-gradient(135deg,#f97316,#ea580c);}
.is-kindergarten #catTabs{display:none;}
.is-kindergarten #tabQuiz{display:none;}
/* 게임장 내 게임 분류 배지 (타자게임 / 짝짓기) */
.genre-badge{
  display:flex; width:fit-content; align-items:center; justify-content:center; gap:5px;
  margin:0 auto 10px; padding:5px 16px; border-radius:999px;
  background:linear-gradient(135deg,#0f766e,#14b8a6); color:#fff;
  font-size:13px; font-weight:800; letter-spacing:.5px; white-space:nowrap;
  box-shadow:0 3px 8px rgba(15,118,110,.35);
}
/* 짝짓기 게임 (워크시트 선 잇기) */
#matchScore{color:#475569; background:#f1f5f9; display:inline-block; padding:4px 14px; border-radius:999px; margin-bottom:6px;}
.match-board{position:relative; margin-bottom:14px;}
.match-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2;}
.match-lines line{stroke-linecap:round;}
.match-lines line.draw{stroke-dasharray:600; stroke-dashoffset:600; animation:matchLineDraw .45s ease-out forwards;}
@keyframes matchLineDraw{to{stroke-dashoffset:0;}}
.match-cols{position:relative; z-index:1; display:grid; grid-template-columns:3fr 4fr 3fr;}
.match-col{display:flex; flex-direction:column; gap:8px;}
.match-col-label{font-size:12px; font-weight:800; color:#64748b; text-align:center; padding-bottom:2px;}
.match-item{
  border:2.5px solid #e2e8f0; border-radius:12px; background:#fff; min-height:54px;
  font-size:clamp(20px,5vw,28px); font-weight:800; color:#1a202c; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.12s; padding:4px 2px;
}
.match-item:hover{border-color:#a78bfa;}
.match-item.selected{border-color:#f59e0b; background:#fffbeb; box-shadow:0 0 0 4px rgba(245,158,11,.3);}
.match-item.linked{border-color:#93c5fd; background:#eff6ff;}
.match-item.done{border-color:#86efac; background:#f0fdf4; color:#166534;}
.match-item.done:hover{border-color:#86efac;}
.match-item.wrong{animation:matchShake .35s ease-in-out; border-color:#dc2626 !important; background:#fef2f2 !important;}
.match-feedback{font-size:16px; font-weight:800; margin:8px 0 4px; min-height:24px;}
.match-feedback.ok{color:#16a34a;}
.match-feedback.no{color:#dc2626;}
.match-cursive{font-family:'Comforter',cursive,Georgia,serif; font-weight:400; color:#1a202c; font-size:1.2em;}
.match-item.done .match-cursive{color:#166534;}
.is-arcade .bgm-control{top:4px; right:4px; padding:3px 8px;}
.is-arcade .bgm-control input[type=range]{width:36px;}
@media (max-width:480px){ .bgm-control{top:4px; right:4px;} .bgm-control input[type=range]{width:44px;} }

/* ---------- cursive practice (3-line ruled handwriting practice) ---------- */
/* all selectors scoped under .cursive-practice — the source widget used bare
   button/h1/main tags and generic class names (.panel, .grid, .chip, .controls...)
   that collide with this app's own; every one is prefixed cp- or nested here. */
.cursive-practice{
  --cp-paper-panel:#FFFDF6; --cp-ink:#22283E; --cp-ink-soft:#4A5170;
  --cp-guide-red:#C1544A; --cp-guide-blue:#8AA0C7; --cp-accent:#B24A3F; --cp-accent-ink:#FFFDF6;
  --cp-muted:#8C8270; --cp-chip-bg:#F1E9D6; --cp-chip-border:#DCCFAE; --cp-chip-active:#B24A3F;
  --cp-shadow:0 18px 40px -22px rgba(34,40,62,0.35);
  display:flex; flex-direction:column; gap:18px; color:var(--cp-ink); text-align:center;
}
.cp-eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cp-accent);}
.cp-build{display:inline-block; margin-top:4px; font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:.06em;}
.cp-title{margin:2px 0 0; font-size:22px; font-weight:800; color:var(--cp-ink);}
.cp-sub{margin:0; color:var(--cp-ink-soft); font-size:13.5px; line-height:1.6;}
.cp-panel{
  background:var(--cp-paper-panel); border-radius:18px; box-shadow:var(--cp-shadow);
  padding:18px 14px 16px; display:flex; flex-direction:column; gap:14px;
}
.cp-letter-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.cp-letter-name{font-size:14px; font-weight:700; color:var(--cp-ink);}
.cp-letter-name .cp-cy{color:var(--cp-accent); font-size:17px; margin-right:6px;}
.cp-letter-count{font-size:12px; color:var(--cp-muted); font-variant-numeric:tabular-nums;}  /* 종이도 순백으로 맞춰 GIF가 가진 흰 배경 사각형이 종이 위에서 보이지 않게 한다 */
  .cp-ruled{position:relative; height:230px; border-radius:12px; background:#fff; overflow:hidden;}
  .cp-rule-line{position:absolute; left:14px; right:14px; height:0; border-top:1.5px solid var(--cp-guide-red); opacity:.8; z-index:10; pointer-events:none;}

.cp-rule-top{top:38px;}
.cp-rule-base{bottom:56px; border-top-width:2px; opacity:.75;}
.cp-rule-mid{top:calc(38px + (100% - 38px - 56px) / 2); border-top:none; border-bottom:1.5px dashed var(--cp-guide-blue); opacity:.7;}  /* 인쇄체는 3선 영역 바로 위 줄에서, 필기체와 같은 x축으로 함께 이동한다.
     (별도 flex 줄로 나열하면 필기체와 위치가 어긋나므로 글자마다 절대 배치) */
  .cp-print-stage{position:relative; height:56px; overflow:hidden; pointer-events:none;}
  .cp-print-letter{
    position:absolute; top:50%; transform:translate(-50%,-50%);
    color:#334155; font-family:'Segoe UI','Arial',sans-serif; font-weight:800; line-height:1;
    transition:left .5s ease, opacity .16s ease;
  }
  .cp-letter-stage{position:absolute; inset:0; z-index:2;}
  .cp-letter-stage img{position:absolute; mix-blend-mode:multiply; display:block;}

.cp-controls{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;}
.cursive-practice button{
  font:inherit; font-size:13px; font-weight:700; border:1px solid var(--cp-chip-border);
  background:var(--cp-chip-bg); color:var(--cp-ink); padding:9px 14px; border-radius:10px;
  cursor:pointer; transition:background .15s, border-color .15s, transform .1s;
}
.cursive-practice button:hover{border-color:var(--cp-accent);}
.cursive-practice button:active{transform:scale(.96);}
.cursive-practice button.cp-primary{background:var(--cp-accent); color:var(--cp-accent-ink); border-color:var(--cp-accent);}
.cursive-practice button.cp-toggle[aria-pressed="true"]{background:var(--cp-accent); color:var(--cp-accent-ink); border-color:var(--cp-accent);}
.cp-tip{font-size:12.5px; color:var(--cp-muted); line-height:1.6; text-align:center;}
.cp-grid-wrap{display:flex; flex-direction:column; gap:10px;}
.cp-grid-title{font-size:13px; font-weight:700; color:var(--cp-ink-soft); text-align:left;}  .cp-grid{display:flex; flex-direction:column; gap:8px;}
  .cp-grid-sub{font-size:12px; font-weight:700; color:var(--cp-muted);}
  .cp-grid-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:7px;}
.cp-chip{
  background:var(--cp-chip-bg); border:1.5px solid var(--cp-chip-border); border-radius:10px;
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .15s, background .15s, transform .1s; padding:4px;
}
.cp-chip img{max-width:100%; max-height:100%; mix-blend-mode:multiply;}
.cp-chip-fallback{font-size:19px; font-weight:800; color:var(--cp-ink); line-height:1;}
.cp-chip:hover{border-color:var(--cp-accent);}
.cp-chip:active{transform:scale(.92);}
.cp-chip.active{border-color:var(--cp-chip-active); background:#f1e2d0;}
.cp-footer{font-size:11px; color:var(--cp-muted); text-align:center; line-height:1.6;}
.cp-footer a{color:var(--cp-ink-soft);}

.lesson-gram-why{border-top:2px solid #ddd6fe; background:#faf5ff; padding:8px 12px; font-size:13px; line-height:1.6;}
.lesson-gram-why-title{font-weight:800; color:#6d28d9; margin-bottom:4px;}
.lesson-gram-why-item{margin:6px 0; padding-top:6px; border-top:1px dashed #e9d5ff; color:#334155;}
.lesson-gram-why-item:first-of-type{border-top:0; padding-top:0;}
.lesson-gram-why-w{color:#7c3aed; font-weight:700;}
.lesson-gram-why-ex{color:#64748b; font-size:12px;}

.lesson-tabs{display:flex; gap:6px; margin:8px 0; flex-wrap:wrap;}
.lesson-tab{padding:6px 16px; border:1px solid #c4b5fd; background:#fff; color:#6d28d9; border-radius:999px; font-weight:800; font-size:13px; cursor:pointer; font-family:inherit;}
.lesson-tab.on{background:#7c3aed; color:#fff; border-color:#7c3aed;}