/* 첫 화면 디자인 — index.html 안에 있던 <style> 을 그대로 옮김(2026-10-15). 7일 보관이므로 고치면 index.html 의 home.css?v= 를 반드시 올릴 것.
   url(img/…) 는 이 파일 위치(사이트 맨 위) 기준이라 옮기기 전과 같은 주소. */
  :root{
    /* ☀ 라이트 글래스 */
    --bg:#eef1ff; --bg2:#e6e9fb;
    --blob1:rgba(99,102,241,.18); --blob2:rgba(168,85,247,.14);
    --surface:rgba(255,255,255,.58); --surface-edge:rgba(70,80,160,.14);
    --panel-solid:rgba(255,255,255,.93);
    --ink:#1b1e3a; --muted:#646a93; --faint:#a7adcf;
    --accent:#6366f1; --accent2:#a855f7;
    --accent-grad:linear-gradient(135deg,#6366f1,#a855f7);
    --accent-soft:rgba(99,102,241,.12); --glow:rgba(99,102,241,.32);
    --err:#e5484d; --err-soft:rgba(229,72,77,.1);
    --chip:rgba(255,255,255,.5); --chip-edge:rgba(70,80,160,.14);
    --shadow:0 24px 55px -30px rgba(40,40,90,.45);
    --serif:'EB Garamond','Gowun Batang',serif;
    --kr:'Gowun Batang',serif;
    --ui:'Gothic A1',sans-serif;
    --type-font:'Gowun Batang',serif;   /* 타이핑 글꼴 (설정창에서 변경) */
    --type-size:20pt;                   /* 타이핑 글자 크기 (설정창에서 변경) */
  }
  [data-theme="dark"]{
    /* 🌙 다크 글래스 (기본) */
    --bg:#0a0e1f; --bg2:#121732;
    --blob1:rgba(124,131,255,.28); --blob2:rgba(192,132,252,.20);
    --surface:rgba(255,255,255,.05); --surface-edge:rgba(255,255,255,.12);
    --panel-solid:rgba(18,23,48,.93);
    --ink:#edefff; --muted:#9aa0cc; --faint:#595f8c;
    --accent:#8b8cff; --accent2:#c084fc;
    --accent-grad:linear-gradient(135deg,#7c83ff,#c084fc);
    --accent-soft:rgba(139,140,255,.18); --glow:rgba(124,131,255,.5);
    --err:#ff8a9b; --err-soft:rgba(255,138,155,.16);
    --chip:rgba(255,255,255,.06); --chip-edge:rgba(255,255,255,.13);
    --shadow:0 28px 65px -30px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{background:var(--bg);font-family:sans-serif;}   /* 글꼴을 안 정한 뿌리 요소가 브라우저 기본 글꼴 이름(윈도우 11 크롬 = Noto Sans KR)으로 웹 글꼴 529KB 를 헛받던 것을 막음 — 보이는 글은 전부 body 아래에서 글꼴을 따로 정함 */
  body{
    font-family:var(--ui);
    background:
      radial-gradient(55% 50% at 12% -5%, var(--blob1), transparent 60%),
      radial-gradient(50% 45% at 100% 12%, var(--blob2), transparent 60%),
      linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
    background-attachment:fixed;
    color:var(--ink);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    transition:color .4s ease;
  }
  .grain{display:none;}

  .wrap{position:relative;z-index:1;max-width:840px;margin:0 auto;padding:40px 22px 60px;}

  /* header */
  header{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:28px;flex-wrap:wrap;animation:rise .7s ease both;}
  .ctrl{flex-wrap:wrap;justify-content:flex-end;}
  .brand{display:flex;align-items:baseline;gap:14px;}
  .mark{
    font-family:var(--kr);font-weight:700;font-size:2.7rem;letter-spacing:.18em;line-height:1;
    color:var(--ink);position:relative;padding-left:4px;
  }
  .mark::after{content:"";position:absolute;right:-12px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--accent);}
  .brand-text{display:flex;flex-direction:column;gap:3px;}
  .tag{font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--muted);letter-spacing:.02em;}
  .tag2{font-family:var(--serif);font-style:italic;font-size:.82rem;color:var(--faint);letter-spacing:.02em;}
  .ctrl{display:flex;gap:8px;align-items:center;}
  .iconbtn{
    font-family:var(--ui);font-size:.82rem;font-weight:500;
    background:var(--chip);color:var(--ink);border:1px solid var(--chip-edge);
    border-radius:999px;padding:8px 13px;cursor:pointer;transition:all .2s ease;white-space:nowrap;
  }
  .iconbtn:hover{border-color:var(--accent);color:var(--accent);}
  a.iconbtn{display:inline-block;text-decoration:none;line-height:1.35;}

  /* options */
  .options{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;animation:rise .7s ease .06s both;}
  .opt-group{display:flex;background:var(--chip);border:1px solid var(--chip-edge);border-radius:999px;overflow:hidden;}
  .opt-group button{
    font-family:var(--ui);font-size:.84rem;font-weight:500;
    background:none;border:none;color:var(--muted);
    padding:8px 15px;cursor:pointer;transition:all .2s ease;
  }
  .opt-group button.active{background:var(--accent);color:#fff;}
  .opt-group button:hover:not(.active){color:var(--ink);}

  .cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;animation:rise .7s ease .08s both;}
  .cat-chip{
    font-family:var(--ui);font-size:.82rem;color:var(--ink);
    background:var(--chip);border:1px solid var(--chip-edge);border-radius:10px;
    padding:7px 13px;cursor:pointer;transition:all .2s ease;line-height:1.2;
  }
  .cat-chip:hover{border-color:var(--accent);color:var(--accent);}
  .cat-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}

  .works{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 2px 16px;animation:rise .7s ease .1s both;position:relative;z-index:40;}
  .works[hidden]{display:none;}
  .works-label{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.92rem;margin-right:2px;}
  .work-dd{position:relative;}
  .work-dd-btn{
    font-family:var(--ui);font-size:.86rem;color:var(--ink);text-align:left;
    background:var(--chip);border:1px solid var(--chip-edge);border-radius:10px;
    padding:7px 32px 7px 12px;cursor:pointer;transition:border-color .2s;max-width:60vw;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:relative;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .work-dd-btn::after{
    content:'';position:absolute;right:13px;top:46%;width:7px;height:7px;
    border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
    transform:translateY(-50%) rotate(45deg);
  }
  .work-dd-btn:hover{border-color:var(--accent);}
  .work-dd-menu{
    position:absolute;top:calc(100% + 6px);left:0;z-index:30;
    min-width:100%;width:max-content;max-width:80vw;max-height:300px;overflow-y:auto;
    background:var(--panel-solid);border:1px solid var(--surface-edge);border-radius:12px;
    box-shadow:var(--shadow);padding:6px;
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  }
  .work-dd-menu[hidden]{display:none;}
  .work-dd-item{
    display:block;width:100%;text-align:left;font-family:var(--ui);font-size:.86rem;
    color:var(--ink);background:none;border:none;border-radius:8px;padding:8px 12px;
    cursor:pointer;white-space:nowrap;transition:background .15s;
  }
  .work-dd-item:hover{background:var(--accent-soft);}
  .work-dd-item.active{background:var(--accent-grad);color:var(--on-accent,#fff);}
  .works-count{font-size:.78rem;color:var(--muted);}
  /* 긴 글 목록(2026-10-03): 위에 묶음 탭(타닥 글 / 고전 문학), 아래에 스크롤되는 목록과 소제목. 색은 전부 스킨 변수 — 스킨마다 따로 적을 것 없음.
     코드·내 글 목록(.work-dd-menu 만 쓰는 쪽)은 그대로 */
  .work-dd-shelf{
    width:340px;max-height:none;overflow:hidden;padding:0;
    background:linear-gradient(var(--panel-solid),var(--panel-solid)),var(--bg2,transparent);   /* 뒤의 타자 글이 비치지 않게 불투명한 바탕을 한 겹 더 */
  }
  .work-tabs{display:flex;padding:4px 8px 0;border-bottom:1px solid var(--surface-edge);}
  .work-tab{
    flex:1;font-family:var(--ui);font-size:.86rem;font-weight:600;color:var(--muted);
    background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
    padding:9px 6px 8px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s;
  }
  .work-tab small{font-size:.74rem;font-weight:400;margin-left:6px;opacity:.8;}
  .work-tab:hover{color:var(--ink);}
  .work-tab.active{color:var(--ink);border-bottom-color:var(--accent);}
  .work-list{position:relative;max-height:300px;overflow-y:auto;overscroll-behavior:contain;padding:6px;}   /* overscroll-behavior: 목록 끝에서 휠을 더 굴려도 페이지가 따라 내려가지 않게 */
  .work-list::-webkit-scrollbar{width:10px;}
  .work-list::-webkit-scrollbar-track{background:transparent;}
  .work-list::-webkit-scrollbar-thumb{background:var(--faint);border:3px solid transparent;background-clip:padding-box;border-radius:5px;}
  @supports not selector(::-webkit-scrollbar){ .work-list{scrollbar-width:thin;scrollbar-color:var(--faint) transparent;} }
  .work-sec{
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    font-family:var(--ui);font-size:.74rem;font-weight:700;letter-spacing:.03em;color:var(--muted);
    padding:8px 12px 4px;
  }
  .work-sec small{font-size:.72rem;font-weight:400;letter-spacing:0;opacity:.75;}
  .work-dd-item + .work-sec{margin-top:6px;padding-top:12px;border-top:1px solid var(--surface-edge);}
  .work-dd-shelf .work-dd-item{overflow:hidden;text-overflow:ellipsis;}
  .work-by{font-size:.8rem;color:var(--muted);}
  .work-dd-item.active .work-by{color:inherit;opacity:.82;}

  /* stats */
  .stats{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;animation:rise .7s ease .1s both;}
  .stat{flex:1;min-width:78px;background:var(--surface);border:1px solid var(--surface-edge);border-radius:13px;padding:11px 14px;}
  .stat .k{font-size:.72rem;color:var(--muted);letter-spacing:.04em;margin-bottom:3px;}
  .stat .v{font-size:1.45rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;color:var(--ink);}
  .stat .v small{font-size:.7rem;font-weight:400;color:var(--muted);margin-left:3px;}
  #stat-wpm .v{color:var(--accent);}

  /* card */
  .card{
    background:var(--surface);border:1px solid var(--surface-edge);
    border-radius:20px;box-shadow:var(--shadow);overflow:hidden;position:relative;
    animation:rise .7s ease .14s both;
  }
  .progline{height:3px;background:var(--surface-edge);}
  .progline > i{display:block;height:100%;width:100%;background:var(--accent);transition:width 1s linear;border-radius:4px;}

  .typing-area{position:relative;height:clamp(210px,42vh,380px);padding:34px 36px;overflow:hidden;}
  .text{
    font-family:var(--type-font);font-size:var(--type-size);line-height:2.15;letter-spacing:.01em;
    white-space:pre-wrap;word-break:keep-all;overflow-wrap:break-word;color:var(--muted);
    position:relative;z-index:1;user-select:none;
    transition:transform .12s ease-out;will-change:transform;
  }

  .ch{position:relative;transition:color .08s ease;}
  .ch.correct{color:var(--ink);}
  .ch.wrong{color:var(--err);background:var(--err-soft);border-radius:3px;}
  .ch.composing{color:var(--composing);text-decoration:underline;text-decoration-color:var(--composing);text-underline-offset:4px;}
  /* 조합 중/오타 글자는 '목표 글자' 폭으로 고정 렌더(오버레이) — 자모↔음절 폭 차이로 줄이 밀리는 것 방지.
     ⚠ display는 일반 인라인 유지 — inline-block이면 keep-all 줄바꿈 단위가 끊겨, 둘째 줄 단어의 첫 글자를 조합할 때 그 글자만 윗줄로 튀었다 내려오는 점프 발생 */
  .ch.wrong,.ch.composing{text-align:center;}
  .ch.composing.free{display:inline-block;}   /* 공백 자리 조합(오버레이 없음, 자연폭): 공백은 원래 줄바꿈 지점이라 inline-block이어도 레이아웃 동일 */
  .ch .ch-base{visibility:hidden;}
  .ch .ch-live{position:absolute;left:0;right:0;}   /* top 미지정 → 정적 위치(=글자 베이스라인)에 그대로 얹힘. top:0이면 인라인 부모에서 글자가 아래로 처짐 */
  .ch.composing .ch-live{text-decoration:underline;text-decoration-color:var(--composing);text-underline-offset:4px;}
  /* 커서는 가상요소(::before)로 — 레이아웃에 영향 없어 긴 글에서도 빠름 */
  .ch.current::before{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;border-radius:1px;background:var(--composing);animation:blink 1.05s steps(1) infinite;}
  @keyframes blink{50%{opacity:0;}}

  /* 단락 줄바꿈 표시(↵) — Enter 로 입력 */
  .ch.nl{color:var(--faint);}
  .ch.nl.correct{color:var(--accent);opacity:.45;background:none;}
  .ch.nl.wrong{color:var(--err);background:var(--err-soft);border-radius:3px;}

  textarea.io{
    position:absolute;inset:0;z-index:2;width:100%;height:100%;
    padding:34px 36px;margin:0;border:none;resize:none;overflow:hidden;
    font-family:var(--type-font);font-size:var(--type-size);line-height:2.15;letter-spacing:.01em;
    background:transparent;color:transparent;caret-color:transparent;
  }
  textarea.io:focus{outline:none;}
  textarea.io::selection{background:transparent;}

  .hint{
    position:absolute;inset:0;z-index:3;pointer-events:none;
    display:flex;align-items:center;justify-content:center;gap:10px;
    color:var(--muted);font-family:var(--serif);font-style:italic;font-size:1.05rem;
    background:linear-gradient(var(--surface),var(--surface));opacity:0;transition:opacity .3s;
  }
  .hint.show{opacity:1;}
  .hint .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.4s ease infinite;}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:.5;}50%{transform:scale(1.5);opacity:1;}}

  /* results overlay */
  .results{
    position:absolute;inset:0;z-index:4;display:none;
    flex-direction:column;align-items:center;text-align:center;
    padding:10px 26px;background:var(--surface);overflow-y:auto;
    scrollbar-width:none;   /* 내용이 살짝 넘쳐도 스크롤바는 안 보이게(스크롤 자체는 가능) */
  }
  /* 세로 중앙 정렬을 justify-content:center 대신 auto 마진으로: 내용이 넘칠 때
     center는 위쪽이 스크롤 불가 영역으로 잘려 첫 줄을 영영 못 보게 되지만,
     auto 마진은 0으로 줄며 위부터 정렬돼 스크롤로 전부 볼 수 있다. */
  .results > :first-child{margin-top:auto;}
  .results > :last-child{margin-bottom:auto;}
  .results::-webkit-scrollbar{display:none;}
  .results.show{display:flex;animation:fade .4s ease;}
  .results .done{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1rem;margin-bottom:6px;}
  .bigrow{display:flex;gap:30px;justify-content:center;align-items:baseline;flex-wrap:wrap;}
  .results .big{font-family:var(--kr);font-weight:700;font-size:3.4rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;}
  .results .big small{font-family:var(--ui);font-size:1rem;font-weight:400;color:var(--muted);margin-left:6px;}
  .results .sub{font-size:.9rem;color:var(--ink);margin-top:4px;letter-spacing:.04em;}
  .rgrid{display:flex;gap:26px;margin:10px 0 12px;flex-wrap:wrap;justify-content:center;}
  .rgrid div{display:flex;flex-direction:column;gap:4px;}
  .rgrid .rk{font-size:.74rem;color:var(--muted);}
  .rgrid .rv{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);}
  .rbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
  .rbtns button{font-family:var(--ui);font-weight:600;font-size:.9rem;border-radius:999px;padding:11px 24px;cursor:pointer;transition:all .2s;}
  .rbtns .primary{background:var(--accent);color:#fff;border:none;}
  .rbtns .primary:hover{filter:brightness(1.07);}
  .rbtns .ghost{background:transparent;color:var(--ink);border:1px solid var(--surface-edge);}
  .rbtns .ghost:hover{border-color:var(--accent);color:var(--accent);}
  .rkeys{margin-top:6px;font-size:.78rem;color:var(--faint);letter-spacing:.02em;}
  .rkeys b{color:var(--muted);font-weight:600;background:var(--chip);border:1px solid var(--chip-edge);border-radius:5px;padding:1px 6px;}
  .best{margin-top:14px;font-size:.8rem;color:var(--muted);}
  .best b{color:var(--accent);}
  /* 개인 기록(이 기기에 저장) 블록 */
  .myrec{margin-top:4px;display:flex;flex-direction:column;align-items:center;gap:4px;}
  .rec-new{font-size:.84rem;font-weight:700;color:var(--accent);letter-spacing:.02em;}
  .rec-row{display:flex;gap:18px;font-size:.82rem;color:var(--muted);}
  .rec-row b{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;}
  .spark{display:block;opacity:.92;}
  .rec-cap{font-size:.68rem;color:var(--faint);letter-spacing:.01em;}
  /* 결과창 맨 아래: 읽을거리 한 편 권하기 */
  .read-tip{
    margin-top:6px;width:100%;max-width:360px;
    display:flex;align-items:center;gap:8px;
    padding:5px 12px;border-radius:11px;
    background:var(--chip);border:1px solid var(--chip-edge);
    text-decoration:none;transition:all .2s ease;
  }
  .read-tip:hover{border-color:var(--accent);transform:translateY(-1px);}
  .read-tip-ic{flex:none;font-size:.9rem;line-height:1;}
  .read-tip-txt{
    flex:1;min-width:0;text-align:left;font-family:var(--ui);
    font-size:.76rem;line-height:1.4;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .read-tip-txt b{font-weight:700;color:var(--accent);letter-spacing:.04em;margin-right:7px;}
  .read-tip-go{flex:none;color:var(--faint);font-size:.85rem;transition:transform .2s ease;}
  .read-tip:hover .read-tip-go{color:var(--accent);transform:translateX(2px);}

  .credits-link{text-align:center;margin-top:14px;}
  .credits-link button{background:none;border:none;color:var(--faint);font-family:var(--ui);font-size:.76rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
  .credits-link button:hover{color:var(--accent);}
  /* 피드백 모달 */
  .feedback-contact{
    width:100%;box-sizing:border-box;margin-top:10px;
    font-family:var(--ui);font-size:.92rem;color:var(--ink);
    background:var(--chip);border:1px solid var(--chip-edge);border-radius:10px;padding:11px 13px;
  }
  .feedback-contact:focus{outline:none;border-color:var(--accent);}
  .feedback-contact::placeholder{color:var(--faint);}
  .feedback-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}   /* 봇 차단용(사람 눈엔 안 보임) */
  .feedback-msg{margin-top:12px;font-size:.86rem;line-height:1.5;}
  .feedback-msg.ok{color:var(--accent);}
  .feedback-msg.err{color:var(--err);}
  /* 약점 분석 모달 */
  .weak-intro{font-size:.86rem;color:var(--muted);line-height:1.5;margin-bottom:16px;}
  .weak-row{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
  .weak-char{flex-shrink:0;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-family:var(--type-font);font-size:1.5rem;color:var(--ink);background:var(--chip);border:1px solid var(--chip-edge);border-radius:11px;}
  .weak-bar-wrap{flex:1;min-width:0;}
  .weak-bar-top{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:5px;}
  .weak-bar-top b{color:var(--err);font-weight:700;}
  .weak-bar{height:7px;background:var(--chip);border-radius:99px;overflow:hidden;}
  .weak-bar i{display:block;height:100%;background:var(--err);border-radius:99px;}
  .weak-empty{font-size:.9rem;color:var(--muted);text-align:center;padding:22px 0;line-height:1.7;}
  .weak-foot{margin-top:10px;text-align:center;}
  .weak-foot .ghost{background:transparent;color:var(--muted);border:1px solid var(--surface-edge);border-radius:999px;padding:8px 18px;font-family:var(--ui);font-size:.82rem;cursor:pointer;transition:all .2s;}
  .weak-foot .ghost:hover{border-color:var(--err);color:var(--err);}
  /* 내 글로 연습 모달 */
  .custom-desc{font-size:.86rem;color:var(--muted);line-height:1.5;margin-bottom:12px;}
  .custom-input{
    width:100%;box-sizing:border-box;min-height:170px;resize:vertical;
    font-family:var(--type-font);font-size:1rem;line-height:1.7;color:var(--ink);
    background:var(--chip);border:1px solid var(--chip-edge);border-radius:12px;padding:14px 16px;
  }
  .custom-input:focus{outline:none;border-color:var(--accent);}
  .custom-input::placeholder{color:var(--faint);}
  .custom-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap;}
  .custom-count{font-size:.78rem;color:var(--faint);font-variant-numeric:tabular-nums;}
  .custom-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;}
  .custom-btns button{font-family:var(--ui);font-weight:600;font-size:.88rem;border-radius:999px;padding:10px 20px;cursor:pointer;transition:all .2s;}
  .custom-btns .primary{background:var(--accent);color:var(--on-accent,#fff);border:none;}
  .custom-btns .primary:hover{filter:brightness(1.07);}
  .custom-btns .ghost{background:transparent;color:var(--muted);border:1px solid var(--surface-edge);}
  .custom-btns .ghost:hover{border-color:var(--accent);color:var(--accent);}
  .custom-saved-wrap{margin-top:18px;border-top:1px solid var(--surface-edge);padding-top:14px;}
  .custom-saved-label{font-size:.76rem;color:var(--muted);margin-bottom:9px;}
  .custom-saved{display:flex;flex-direction:column;gap:7px;max-height:260px;overflow-y:auto;padding-right:2px;}
  .custom-saved-item{
    display:flex;align-items:center;gap:8px;text-align:left;width:100%;
    background:var(--chip);border:1px solid var(--chip-edge);border-radius:10px;padding:9px 12px;cursor:pointer;transition:border-color .15s;
  }
  .custom-saved-item:hover,.custom-saved-item.active{border-color:var(--accent);}
  .custom-saved-item.active .cs-text{color:var(--accent);}
  .custom-saved-item .cs-num{flex-shrink:0;min-width:1.6em;text-align:center;font-size:.74rem;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;}
  .custom-saved-item.active .cs-num{color:var(--accent);}
  .custom-saved-item .cs-text{flex:1;min-width:0;font-size:.84rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .custom-saved-item .cs-len{font-size:.72rem;color:var(--faint);flex-shrink:0;}
  .custom-saved-item .cs-del{background:none;border:none;color:var(--faint);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px;flex-shrink:0;}
  .custom-saved-item .cs-del:hover{color:var(--err);}
  .credits-intro{font-size:.84rem;color:var(--muted);margin:0 0 16px;line-height:1.6;}
  .credit-item{padding:11px 0;border-bottom:1px solid var(--surface-edge);}
  .credit-item:last-child{border-bottom:none;}
  .ci-name{font-size:.9rem;font-weight:600;color:var(--ink);}
  .ci-meta{font-size:.78rem;color:var(--muted);margin-top:2px;}
  .ci-lic{color:var(--accent);font-weight:600;}
  .ci-link{display:inline-block;margin-top:3px;font-size:.74rem;color:var(--muted);text-decoration:none;}
  .ci-link:hover{color:var(--accent);text-decoration:underline;}
  .credits-full{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--surface-edge);}

  footer{text-align:center;margin-top:28px;font-size:.78rem;color:var(--muted);font-family:var(--serif);font-style:italic;line-height:1.7;}
  footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;}
  footer a:hover{color:var(--accent);border-bottom-color:var(--accent);}
  .footer-hint{text-align:center;font-size:.82rem;color:var(--muted);margin-top:12px;line-height:1.9;opacity:1;transition:opacity .55s ease;}
  body.typing .footer-hint{opacity:.22;}   /* 타이핑 시작하면 슬쩍 흐려짐 (연습 방해 안 하게) */
  .footer-hint .kbd{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:1.15em;height:1.7em;padding:0 .45em;margin:0 .12em;vertical-align:middle;
    font-family:var(--ui);font-size:.8rem;font-weight:600;line-height:1;
    color:var(--ink);background:var(--chip);
    border:1px solid var(--chip-edge);border-bottom-width:2px;border-radius:6px;
  }
  .footer-hint .lbl{color:var(--muted);margin:0 .2em 0 .35em;}
  .footer-hint .sep{color:var(--faint);margin:0 .5em;}

  /* ---------- 온스크린 키보드 (키캐스트 + 다음 키 안내) ---------- */
  .keyboard{margin-top:12px;display:none;flex-direction:column;gap:4px;align-items:center;user-select:none;}
  .kb-row{display:flex;gap:4px;justify-content:center;}
  .kb-key{
    box-sizing:border-box;min-width:33px;height:36px;padding:0 5px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    background:var(--surface);border:1px solid var(--surface-edge);border-radius:7px;
    font-family:var(--ui);color:var(--muted);transition:background .07s,border-color .07s,transform .07s,color .07s;
  }
  .kb-key .kb-en{font-size:.72rem;font-weight:600;line-height:1;}
  .kb-key .kb-ko{font-size:.58rem;color:var(--faint);line-height:1;}
  .kb-key.wide{min-width:48px;}
  .kb-key.space{min-width:210px;}
  .kb-key.pressed{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);transform:translateY(1px);}
  .kb-key.pressed .kb-ko{color:var(--on-accent,#fff);opacity:.85;}
  .kb-key.next{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);}
  .kb-key.next .kb-ko{color:var(--accent);}
  /* 키보드가 켜지면 카드 높이·여백을 줄여 켜기 전과 높이가 거의 안 늘게 (스크롤 방지) */
  body.kb-on .typing-area{height:clamp(140px,28vh,240px);}
  body.kb-on .wrap{padding-top:26px;padding-bottom:24px;}
  body.kb-on .keyboard{display:flex;margin-top:8px;}
  body.kb-on .stats{margin-bottom:0;}
  /* 결과창이 뜨면 키보드 숨기고 카드 높이를 복원 → 결과 내용이 다 들어가 스크롤 안 생김 */
  body.kb-on.results-on .keyboard{display:none;}
  body.kb-on.results-on .typing-area{height:clamp(210px,42vh,380px);}
  @media(max-width:760px){ body.kb-on .keyboard{display:none;} }

  /* ---------- 녹화 모드: 키보드 스펙 패널 (카드 바로 옆 2단) ---------- */
  .type-row{display:block;}                                  /* 평소: 카드만 전체폭 */
  .spec-panel{display:none;}                                 /* 평소: 숨김 */

  body.recording .wrap, body.rec-live .wrap{max-width:1200px;}                    /* 녹화 시 가로 공간 확보 */
  body.recording .type-row, body.rec-live .type-row{display:flex;gap:22px;align-items:flex-start;}
  body.recording .card, body.rec-live .card{flex:1 1 auto;min-width:0;}
  body.recording .spec-panel, body.rec-live .spec-panel{
    display:flex;flex-direction:column;flex:0 0 430px;width:430px;align-self:stretch;
    background:var(--panel-solid);border:1px solid var(--surface-edge);
    border-radius:18px;box-shadow:var(--shadow);padding:24px 24px 18px;
  }
  .spec-title{
    display:flex;align-items:center;gap:9px;
    font-family:var(--ui);font-weight:700;font-size:1.2rem;color:var(--ink);
    margin-bottom:20px;letter-spacing:.01em;
  }
  .rec-dot{width:11px;height:11px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 9px #ff4d4d;animation:recpulse 1.4s ease-in-out infinite;}
  @keyframes recpulse{0%,100%{opacity:1;}50%{opacity:.35;}}
  #specFields{display:grid;grid-template-columns:1fr 1fr;gap:14px 15px;}
  .spec-row.full{grid-column:1 / -1;}
  .spec-row label{display:block;font-size:.86rem;color:var(--muted);margin-bottom:5px;}
  .spec-row input{
    width:100%;box-sizing:border-box;font-family:var(--ui);font-size:1.05rem;color:var(--ink);
    background:var(--chip);border:1px solid var(--chip-edge);border-radius:10px;padding:11px 13px;transition:border-color .15s;
  }
  .spec-row input::placeholder{color:var(--faint);}
  .spec-row input:focus{outline:none;border-color:var(--accent);}
  .spec-hint{margin-top:auto;padding-top:16px;font-size:.74rem;line-height:1.55;color:var(--faint);text-align:center;}
  /* 타건 녹화 버튼 — 스펙 패널(F11 녹화 모드) 안에만 표시 */
  .rec-start-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-bottom:18px;font-family:var(--ui);font-weight:800;font-size:1.02rem;color:var(--on-accent,#fff);background:var(--accent);border:none;border-radius:12px;padding:14px;cursor:pointer;box-shadow:var(--shadow);transition:filter .15s,transform .08s;}
  .rec-start-btn:hover{filter:brightness(1.08);}
  .rec-start-btn:active{transform:translateY(1px);}
  .rec-start-btn[hidden]{display:none;}                 /* 미지원 브라우저: 계속 숨김 */
  body.rec-live .rec-start-btn{display:none;}           /* 녹화 중엔 숨김(하단 정지 바 사용) */
  /* 녹화 중 "스펙 패널 함께 표시" 해제 시: F11(body.recording)이라도 패널을 숨기고 1단 레이아웃 복구 */
  body.rec-nospec .spec-panel{display:none!important;}
  body.rec-nospec .type-row{display:block;}
  body.rec-nospec .wrap{max-width:840px;}

  /* ---------- 안내 모달 ---------- */
  .modal.guide-modal{max-width:540px;}   /* 뒤에 오는 .modal 규칙보다 우선하도록 특정성 확보 */
  .guide-lead{font-family:var(--ui);font-size:.88rem;color:var(--muted);line-height:1.75;margin:0 0 4px;}
  .guide-h{font-family:var(--kr);font-size:1rem;font-weight:700;color:var(--ink);margin:22px 0 8px;padding-top:14px;border-top:1px solid var(--surface-edge);}
  .guide-list{margin:0;padding-left:18px;font-family:var(--ui);font-size:.85rem;color:var(--muted);line-height:1.8;}
  .guide-list li{margin-bottom:5px;word-break:keep-all;}
  .guide-list b{color:var(--ink);font-weight:700;}
  .guide-steps li{margin-bottom:7px;}
  .guide-note{font-family:var(--ui);font-size:.8rem;color:var(--faint);line-height:1.75;margin:10px 0 0;word-break:keep-all;}
  .guide-note b{color:var(--muted);}
  .guide-modal a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;}
  .guide-modal a:hover{border-bottom-color:var(--accent);}

  /* ---------- 첫 화면 안내(타자 연습 칸 아래 · 항상 보이는 본문 · 2026-10-02) ---------- */
  .home-info{margin-top:46px;padding-top:28px;border-top:1px solid var(--surface-edge);font-family:var(--ui);font-size:.93rem;line-height:1.85;color:var(--ink);word-break:keep-all;text-align:left;transition:opacity .55s ease;}
  .first-screen{min-height:100vh;}   /* 처음 한 화면은 타자 연습만 — 안내는 스크롤해야 보임(사용자 선택 10-02) */
  body.typing .home-info{opacity:.35;}   /* 타이핑 중에는 흐리게(연습 방해 안 하게) */
  .home-info h1{font-family:var(--kr);font-weight:700;font-size:1.4rem;line-height:1.5;margin:0 0 12px;color:var(--ink);}
  .home-info h2{font-family:var(--kr);font-weight:700;font-size:1.08rem;margin:34px 0 10px;color:var(--ink);}
  .home-info p{margin:0 0 10px;color:var(--ink);opacity:.9;}
  .home-info ul{margin:0 0 10px;padding-left:1.2em;}
  .home-info li{margin-bottom:6px;color:var(--ink);opacity:.9;}
  .home-info b{font-weight:700;}
  .home-info a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
  .home-info .hi-more{margin:4px 0 0;font-size:.86rem;}
  .home-info table{width:100%;border-collapse:collapse;margin:6px 0 10px;font-variant-numeric:tabular-nums;}
  .home-info th,.home-info td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--surface-edge);color:var(--ink);}
  .home-info th{font-size:.8rem;font-weight:700;color:var(--muted);}
  .home-info .hi-list{list-style:none;padding-left:0;}
  .home-info .hi-list li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--surface-edge);margin:0;}
  .home-info .hi-list span{flex:none;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;}
  .home-info .hi-news li{justify-content:flex-start;}
  body.recording .home-info{max-width:796px;margin-left:auto;margin-right:auto;}
  body.rec-live .home-info{display:none;}   /* 실제 녹화 중에만 숨김 */
  .home-info.hi-anim > *{transition:opacity .7s ease,transform .7s ease;}   /* 스크롤해 내려오면 한 덩이씩 떠오름 — 사람이 움직인 뒤에만 script.js 가 켬 */
  .home-info > .hi-wait{opacity:0;transform:translateY(22px);}   /* 아직 화면 아래에 있어 안 보이는 덩이 */

  /* ---------- settings modal ---------- */
  .backdrop{
    position:fixed;inset:0;z-index:50;display:none;
    align-items:center;justify-content:center;padding:20px;
    background:rgba(20,15,8,.45);backdrop-filter:blur(3px);
  }
  .backdrop.show{display:flex;animation:fade .25s ease;}
  .modal{
    width:100%;max-width:440px;max-height:86vh;overflow-y:auto;
    background:var(--surface);border:1px solid var(--surface-edge);
    border-radius:20px;box-shadow:var(--shadow);padding:26px 26px 24px;
    animation:rise .3s ease both;
  }
  .modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .modal-head h2{font-family:var(--kr);font-weight:700;font-size:1.3rem;letter-spacing:.1em;color:var(--ink);margin:0;}
  .modal-close{
    background:var(--chip);border:1px solid var(--chip-edge);color:var(--muted);
    width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;transition:all .2s;
  }
  .modal-close:hover{border-color:var(--accent);color:var(--accent);}

  .setting{margin-bottom:24px;}
  .setting:last-child{margin-bottom:0;}
  .setting .label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
  .setting .label .name{font-size:.92rem;font-weight:500;color:var(--ink);}
  .setting .label .val{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;}

  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;
    background:var(--surface-edge);outline:none;cursor:pointer;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
    background:var(--accent);border:2px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
  }
  input[type=range]::-moz-range-thumb{
    width:18px;height:18px;border:2px solid var(--surface);border-radius:50%;background:var(--accent);cursor:pointer;
  }

  .font-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .font-opt{
    background:var(--chip);border:1px solid var(--chip-edge);border-radius:12px;
    padding:12px 14px;cursor:pointer;transition:all .2s;text-align:left;
  }
  .font-opt:hover{border-color:var(--accent);}
  .font-opt.active{border-color:var(--accent);background:var(--accent-soft);}
  .font-opt .fname{font-size:.78rem;color:var(--muted);margin-bottom:4px;}
  .font-opt.active .fname{color:var(--accent);}
  .font-opt .fsample{font-size:1.25rem;color:var(--ink);line-height:1.2;}

  .theme-opts{display:flex;flex-wrap:wrap;gap:11px;}
  .theme-dot{
    position:relative;width:32px;height:32px;border-radius:50%;padding:0;cursor:pointer;
    border:1px solid rgba(150,150,170,.4);outline:2px solid transparent;outline-offset:2px;
    box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .15s ease,outline-color .2s;overflow:hidden;
  }
  .theme-dot i{position:absolute;right:4px;bottom:4px;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.25);}
  .theme-dot:hover{transform:scale(1.12);}
  .theme-dot.active{outline-color:var(--ink);}

  .toggle-row{display:flex;align-items:center;justify-content:space-between;}
  .toggle-row .name{font-size:.92rem;font-weight:500;color:var(--ink);}
  .setting-desc{margin:8px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5;}
  .switch{
    position:relative;width:46px;height:26px;flex:none;border-radius:999px;padding:0;
    background:var(--surface-edge);border:1px solid var(--chip-edge);cursor:pointer;transition:background .2s,border-color .2s;
  }
  .switch .knob{
    position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
    background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s;
  }
  .switch.on{border-color:transparent;}
  .switch.on .knob{transform:translateX(20px);background:#fff;}

  /* ============ 모던 글래스 오버라이드 (다크 + 글래스/그라데이션) ============ */
  /* 글래스 블러는 정적인 작은 요소에만. 스크롤·갱신되는 카드/통계는 제외(잔렉 방지) → 테두리+그림자로 패널감 유지 */
  .opt-group,.iconbtn,.cat-chip,.font-opt{
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  .backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(6,8,20,.55);}
  .modal,.results{background:var(--panel-solid);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);}

  /* 그라데이션 포인트 */
  .opt-group button.active,
  .cat-chip.active,
  .rbtns .primary,
  .switch.on{background:var(--accent-grad)!important;color:var(--on-accent,#fff);box-shadow:0 6px 22px -8px var(--glow);}
  .progline{background:rgba(127,131,180,.18);}
  .progline > i{background:var(--accent-grad);box-shadow:0 0 12px var(--glow);}
  input[type=range]{background:var(--surface-edge);}
  input[type=range]::-webkit-slider-thumb{background:var(--accent);box-shadow:0 0 10px var(--glow);border-color:transparent;}
  input[type=range]::-moz-range-thumb{background:var(--accent);border-color:transparent;}

  /* 그라데이션 텍스트 (브랜드 · 큰 숫자) */
  .mark,.results .big,#vWpm,#vCpm{
    background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .mark::after{background:var(--accent2);box-shadow:0 0 12px var(--glow);}
  .results .big small{-webkit-text-fill-color:var(--muted);}

  /* 커서 글로우 */
  .ch.current::before{box-shadow:0 0 8px var(--composing-glow);}

  @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes fade{from{opacity:0;}to{opacity:1;}}

  @media(max-width:600px){
    .wrap{padding:28px 16px 48px;}
    .mark{font-size:2.1rem;}
    .tag,.tag2{display:none;}
    .typing-area{padding:24px 22px;height:clamp(200px,46vh,340px);}
    textarea.io{padding:24px 22px;}
    .results .big{font-size:2.7rem;}
  }

  /* ===== 커스텀 팔레트 ===== */
  .custom-palette{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px;}
  .custom-dot{
    position:relative;width:32px;height:32px;border-radius:50%;padding:0;cursor:pointer;
    border:1px solid rgba(150,150,170,.4);outline:2px solid transparent;outline-offset:2px;
    box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .15s ease,outline-color .2s;overflow:hidden;
  }
  .custom-dot:hover{transform:scale(1.12);}
  .custom-dot.active{outline-color:var(--ink);}
  .custom-dot input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:none;padding:0;}

  /* ===== CRT 스킨 (색상은 JS에서 accent 선택 시 body inline style로 주입) ===== */
  body[data-skin="crt"]{
    --bg:#0c0c0c;--bg2:#111;--blob1:transparent;--blob2:transparent;
    --surface:rgba(14,14,14,.97);--panel-solid:rgba(6,6,6,.99);
    --ink:#d4d4d4;--err:#f87171;--err-soft:rgba(248,113,113,.12);
    --shadow:none;--ui:'Courier New',monospace;--kr:'Courier New',monospace;--serif:'Courier New',monospace;
    background:#0c0c0c;
  }
  body[data-skin="crt"] .text,
  body[data-skin="crt"] textarea.io{
    font-family:'Courier New','Nanum Gothic Coding',monospace!important;
  }
  body[data-skin="crt"] .mark,
  body[data-skin="crt"] .results .big,
  body[data-skin="crt"] #vWpm,
  body[data-skin="crt"] #vCpm{
    background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important;
    -webkit-text-fill-color:var(--accent)!important;
  }
  body[data-skin="crt"] .mark::after{display:none;}
  body[data-skin="crt"] .tag,
  body[data-skin="crt"] .tag2{font-style:normal;}
  body[data-skin="crt"] .opt-group,
  body[data-skin="crt"] .iconbtn,
  body[data-skin="crt"] .cat-chip,
  body[data-skin="crt"] .font-opt,
  body[data-skin="crt"] .backdrop,
  body[data-skin="crt"] .modal,
  body[data-skin="crt"] .results{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body[data-skin="crt"] .card,
  body[data-skin="crt"] .stat,
  body[data-skin="crt"] .cat-chip,
  body[data-skin="crt"] .iconbtn,
  body[data-skin="crt"] .opt-group,
  body[data-skin="crt"] .work-dd-btn,
  body[data-skin="crt"] .work-dd-menu,
  body[data-skin="crt"] .modal,
  body[data-skin="crt"] .modal-close,
  body[data-skin="crt"] .rbtns button,
  body[data-skin="crt"] .font-opt,
  body[data-skin="crt"] .custom-dot,
  body[data-skin="crt"] .theme-dot,
  body[data-skin="crt"] .switch,
  body[data-skin="crt"] .switch .knob{border-radius:0!important;}
  body[data-skin="crt"] .work-list::-webkit-scrollbar-thumb{background-color:var(--muted);}   /* 2026-10-03 CRT 의 --faint 는 밝기 12% 라 어두운 바탕에서 목록 스크롤바 손잡이가 안 보임 → 고르지 않은 탭 글자와 같은 밝기로 */
  @supports not selector(::-webkit-scrollbar){ body[data-skin="crt"] .work-list{scrollbar-color:var(--muted) transparent;} }
  body[data-skin="crt"] .ctrl:has(#acctBtn:not([hidden])) .iconbtn{padding:8px 11px;}   /* 2026-10-03 CRT 는 글자가 넓어 버튼 줄이 본문 폭에 9px 만 남음 → 로그인 버튼이 보일 때만 좌우 여백을 2px 씩 줄임('다시 로그인'이 다음 줄로 내려가지 않게). 버튼이 숨겨져 있으면 지금과 같음 */
  body[data-skin="crt"] .card{
    border:1px solid var(--surface-edge)!important;box-shadow:none!important;
  }
  body[data-skin="crt"] .card::before{
    display:block;font-family:'Courier New',monospace;font-size:.68rem;
    letter-spacing:.1em;color:var(--muted);background:var(--accent-soft);
    border-bottom:1px solid var(--chip-edge);padding:5px 14px;
  }
  body[data-skin="crt"] .typing-area::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
    background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.032) 3px,rgba(0,0,0,.032) 4px);
  }
  body[data-skin="crt"] .stats{
    gap:0;padding:0;margin-bottom:0;border:1px solid var(--surface-edge);
    border-bottom:none;background:var(--accent-soft);
  }
  body[data-skin="crt"] .stat{
    background:none!important;border:none!important;border-radius:0!important;
    border-right:1px solid var(--chip-edge)!important;padding:7px 16px;
    display:flex;align-items:center;gap:6px;
  }
  body[data-skin="crt"] .stat:last-child{border-right:none!important;}
  body[data-skin="crt"] .stat .k{
    font-family:'Courier New',monospace;font-size:.7rem;letter-spacing:.04em;color:var(--muted);
  }
  body[data-skin="crt"] .stat .v{
    font-family:'Courier New',monospace;font-size:.88rem;font-weight:400;color:var(--accent);
  }
  body[data-skin="crt"] .stat .v small{font-size:.65rem;color:var(--muted);margin-left:1px;}
  body[data-skin="crt"] #stat-wpm .v{color:var(--accent)!important;}
  body[data-skin="crt"] .progline{height:2px;background:var(--chip);}
  body[data-skin="crt"] .progline>i{background:var(--accent)!important;box-shadow:none!important;}
  body[data-skin="crt"] .cat-chip{
    background:transparent!important;border:1px solid var(--chip-edge)!important;
    font-family:'Courier New',monospace;font-size:.78rem;padding:5px 7px;
  }
  body[data-skin="crt"] .cat-chip::before{content:'[';}
  body[data-skin="crt"] .cat-chip::after{content:']';}
  body[data-skin="crt"] .cat-chip.active{
    background:var(--accent-soft)!important;border-color:var(--accent)!important;
    color:var(--accent)!important;box-shadow:none!important;
  }
  body[data-skin="crt"] .cat-chip:hover:not(.active){
    border-color:var(--accent)!important;color:var(--accent)!important;
  }
  body[data-skin="crt"] .opt-group button.active,
  body[data-skin="crt"] .rbtns .primary,
  body[data-skin="crt"] .switch.on{
    background:var(--accent)!important;color:var(--bg)!important;box-shadow:none!important;
  }
  body[data-skin="crt"] input[type=range]::-webkit-slider-thumb{background:var(--accent)!important;box-shadow:none!important;}
  body[data-skin="crt"] input[type=range]::-moz-range-thumb{background:var(--accent)!important;}

  body[data-skin="crt"] .card::before{content:'TADAK  \2500  bash';}
  body[data-skin="crt"] .ch.correct{color:var(--accent);}

  /* =================================================================
     종이 스킨
     ================================================================= */
  body[data-skin="paper"]{
    --bg:#f5f0e4;--bg2:#ece5d3;--blob1:transparent;--blob2:transparent;
    --surface:rgba(250,246,238,.9);--surface-edge:rgba(120,80,20,.12);
    --panel-solid:rgba(252,248,240,.98);
    --ink:#2c1a08;--muted:#a07040;--faint:#d4bfa0;
    --accent:#8a5c20;--accent2:#b07c30;--accent-grad:linear-gradient(135deg,#8a5c20,#b07c30);
    --accent-soft:rgba(138,92,32,.08);--glow:rgba(138,92,32,.2);
    --err:#c0392b;--err-soft:rgba(192,57,43,.08);
    --chip:rgba(120,80,20,.06);--chip-edge:rgba(120,80,20,.14);
    --shadow:0 6px 28px -12px rgba(80,40,10,.2),0 2px 8px -4px rgba(80,40,10,.1);
    --ui:'Gowun Batang',serif;--kr:'Gowun Batang',serif;--serif:'Gowun Batang',serif;
    --type-font:'Gowun Batang',serif;
    background:#f5f0e4;
  }
  body[data-skin="paper"] .mark,body[data-skin="paper"] .results .big,
  body[data-skin="paper"] #vWpm,body[data-skin="paper"] #vCpm{
    background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important;
    -webkit-text-fill-color:var(--ink)!important;
  }
  body[data-skin="paper"] .mark::after{background:var(--accent)!important;box-shadow:none!important;}
  body[data-skin="paper"] .tag{font-family:'Gowun Batang',serif;}
  body[data-skin="paper"] .opt-group,body[data-skin="paper"] .iconbtn,
  body[data-skin="paper"] .cat-chip,body[data-skin="paper"] .backdrop,
  body[data-skin="paper"] .modal,body[data-skin="paper"] .results{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body[data-skin="paper"] .card{
    border:none!important;border-radius:4px!important;
    background:#fdf8f0!important;box-shadow:var(--shadow)!important;
  }
  body[data-skin="paper"] .progline{background:rgba(120,80,20,.1);}
  body[data-skin="paper"] .progline>i{background:var(--accent)!important;box-shadow:none!important;}
  body[data-skin="paper"] .stats{
    gap:0;padding:0;margin-bottom:10px;border:none;background:none;
  }
  body[data-skin="paper"] .stat{
    background:none!important;border:none!important;border-radius:6px!important;
    border-right:1px solid rgba(120,80,20,.15)!important;padding:5px 16px;
    display:flex;align-items:center;gap:6px;
  }
  body[data-skin="paper"] .stat:last-child{border-right:none!important;}
  body[data-skin="paper"] .stat .k{font-family:'Gowun Batang',serif;font-size:.72rem;font-style:italic;color:var(--muted);}
  body[data-skin="paper"] .stat .v{font-family:'Gowun Batang',serif;font-size:.95rem;color:var(--ink);}
  body[data-skin="paper"] .stat .v small{font-size:.72rem;color:var(--muted);}
  body[data-skin="paper"] #stat-wpm .v{color:var(--accent)!important;}
  body[data-skin="paper"] .cat-chip{
    background:none!important;border:none!important;border-radius:0!important;
    border-bottom:2px solid transparent!important;padding:6px 12px 4px;
    font-family:'Gowun Batang',serif;font-size:.84rem;color:var(--muted);
  }
  body[data-skin="paper"] .cat-chip.active{
    border-bottom-color:var(--accent)!important;color:var(--ink)!important;
    background:none!important;box-shadow:none!important;
  }
  body[data-skin="paper"] .cat-chip:hover:not(.active){color:var(--ink)!important;}
  body[data-skin="paper"] .opt-group button.active,body[data-skin="paper"] .rbtns .primary,
  body[data-skin="paper"] .switch.on{background:var(--accent)!important;color:#fff!important;box-shadow:none!important;}
  body[data-skin="paper"] input[type=range]::-webkit-slider-thumb{background:var(--accent)!important;box-shadow:none!important;}
  body[data-skin="paper"] input[type=range]::-moz-range-thumb{background:var(--accent)!important;}

  /* =================================================================
     미니멀 스킨
     ================================================================= */
  body[data-skin="minimal"]{
    --bg:#ffffff;--bg2:#f8f8f8;--blob1:transparent;--blob2:transparent;
    --surface:rgba(255,255,255,.97);--surface-edge:rgba(0,0,0,.08);
    --panel-solid:rgba(255,255,255,.99);
    --ink:#111111;--muted:#999999;--faint:#dddddd;
    --accent:#111111;--accent2:#444444;--accent-grad:#111;
    --accent-soft:rgba(0,0,0,.04);--glow:rgba(0,0,0,.1);
    --err:#d00;--err-soft:rgba(200,0,0,.08);
    --chip:rgba(0,0,0,.04);--chip-edge:rgba(0,0,0,.1);
    --shadow:none;
    --ui:'Gothic A1','Apple SD Gothic Neo',sans-serif;
    --kr:'Gothic A1',sans-serif;--serif:'Gothic A1',sans-serif;
    background:#ffffff;
  }
  body[data-skin="minimal"] .mark,body[data-skin="minimal"] .results .big,
  body[data-skin="minimal"] #vWpm,body[data-skin="minimal"] #vCpm{
    background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important;
    -webkit-text-fill-color:var(--ink)!important;
  }
  body[data-skin="minimal"] .mark::after{display:none;}
  body[data-skin="minimal"] .tag{font-style:normal;font-size:.88rem;}
  body[data-skin="minimal"] .tag2{display:none;}
  body[data-skin="minimal"] .opt-group,body[data-skin="minimal"] .iconbtn,
  body[data-skin="minimal"] .cat-chip,body[data-skin="minimal"] .backdrop,
  body[data-skin="minimal"] .modal,body[data-skin="minimal"] .results{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body[data-skin="minimal"] .card{
    border:none!important;border-top:2px solid #111!important;
    border-radius:0!important;box-shadow:none!important;background:transparent!important;
  }
  body[data-skin="minimal"] .progline{background:rgba(0,0,0,.07);}
  body[data-skin="minimal"] .progline>i{background:#111!important;box-shadow:none!important;}
  body[data-skin="minimal"] .stats{gap:0;padding:0;margin-bottom:10px;border:none;background:none;}
  body[data-skin="minimal"] .stat{
    background:none!important;border:none!important;border-radius:0!important;
    border-right:1px solid rgba(0,0,0,.1)!important;padding:4px 16px;
    display:flex;align-items:center;gap:6px;
  }
  body[data-skin="minimal"] .stat:last-child{border-right:none!important;}
  body[data-skin="minimal"] .stat .k{font-size:.72rem;color:#aaa;letter-spacing:.02em;}
  body[data-skin="minimal"] .stat .v{font-size:.9rem;font-weight:500;color:#111;}
  body[data-skin="minimal"] .stat .v small{font-size:.68rem;color:#aaa;}
  body[data-skin="minimal"] #stat-wpm .v{color:#111!important;}
  body[data-skin="minimal"] .cat-chip{
    background:none!important;border:none!important;border-radius:0!important;
    border-bottom:2px solid transparent!important;padding:6px 12px 4px;
    font-size:.84rem;color:var(--muted);
  }
  body[data-skin="minimal"] .cat-chip.active{
    border-bottom-color:#111!important;color:#111!important;
    background:none!important;box-shadow:none!important;
  }
  body[data-skin="minimal"] .cat-chip:hover:not(.active){color:#333!important;}
  body[data-skin="minimal"] .iconbtn,body[data-skin="minimal"] .opt-group,
  body[data-skin="minimal"] .modal,body[data-skin="minimal"] .modal-close,
  body[data-skin="minimal"] .rbtns button,body[data-skin="minimal"] .theme-dot,
  body[data-skin="minimal"] .custom-dot,body[data-skin="minimal"] .switch,
  body[data-skin="minimal"] .switch .knob{border-radius:0!important;}
  body[data-skin="minimal"] .opt-group button.active,body[data-skin="minimal"] .rbtns .primary,
  body[data-skin="minimal"] .switch.on{background:#111!important;color:#fff!important;box-shadow:none!important;}
  body[data-skin="minimal"] input[type=range]::-webkit-slider-thumb{background:#111!important;box-shadow:none!important;border-radius:0!important;}
  body[data-skin="minimal"] input[type=range]::-moz-range-thumb{background:#111!important;}

  /* =================================================================
     신문 스킨
     ================================================================= */
  body[data-skin="newsprint"]{
    --bg:#f0ead8;--bg2:#e6dec8;--blob1:transparent;--blob2:transparent;
    --surface:rgba(240,234,216,.95);--surface-edge:rgba(0,0,0,.15);
    --panel-solid:rgba(245,238,220,.98);
    --ink:#1a1a1a;--muted:#7a7060;--faint:#c0b898;
    --accent:#1a1a1a;--accent2:#444;--accent-grad:#1a1a1a;
    --accent-soft:rgba(0,0,0,.05);--glow:rgba(0,0,0,.15);
    --err:#8b1010;--err-soft:rgba(139,16,16,.08);
    --chip:rgba(0,0,0,.05);--chip-edge:rgba(0,0,0,.14);
    --shadow:none;
    --ui:'Georgia','Gowun Batang',serif;--kr:'Georgia','Gowun Batang',serif;
    --serif:'Georgia',serif;--type-font:'Gowun Batang',serif;
    background:#f0ead8;
  }
  body[data-skin="newsprint"] .mark,body[data-skin="newsprint"] .results .big,
  body[data-skin="newsprint"] #vWpm,body[data-skin="newsprint"] #vCpm{
    background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important;
    -webkit-text-fill-color:var(--ink)!important;
  }
  body[data-skin="newsprint"] .mark::after{display:none;}
  body[data-skin="newsprint"] .mark{letter-spacing:.08em!important;}
  body[data-skin="newsprint"] .tag{font-family:'Georgia',serif;font-size:.88rem;}
  body[data-skin="newsprint"] .tag2{display:none;}
  body[data-skin="newsprint"] .opt-group,body[data-skin="newsprint"] .iconbtn,
  body[data-skin="newsprint"] .cat-chip,body[data-skin="newsprint"] .backdrop,
  body[data-skin="newsprint"] .modal,body[data-skin="newsprint"] .results{
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body[data-skin="newsprint"] .card{
    border:2px solid var(--ink)!important;border-radius:0!important;
    background:#f7f0e0!important;box-shadow:none!important;
  }
  body[data-skin="newsprint"] .card::before{
    content:'\2015\2015\2015  \53E5  \2015\2015\2015';
    display:block;font-family:'Georgia',serif;font-size:.7rem;
    letter-spacing:.12em;color:var(--muted);text-align:center;
    border-bottom:1px solid rgba(0,0,0,.18);padding:5px 14px;
    background:rgba(0,0,0,.02);
  }
  body[data-skin="newsprint"] .progline{height:3px;background:rgba(0,0,0,.08);}
  body[data-skin="newsprint"] .progline>i{background:var(--ink)!important;box-shadow:none!important;}
  body[data-skin="newsprint"] .stats{
    gap:0;padding:4px 0;margin-bottom:10px;border:none;
    border-top:2.5px solid var(--ink);border-bottom:1px solid rgba(0,0,0,.2);background:none;
  }
  body[data-skin="newsprint"] .stat{
    background:none!important;border:none!important;border-radius:0!important;
    border-right:1px solid rgba(0,0,0,.15)!important;padding:4px 16px;
    display:flex;align-items:center;gap:6px;
  }
  body[data-skin="newsprint"] .stat:last-child{border-right:none!important;}
  body[data-skin="newsprint"] .stat .k{font-family:'Georgia',serif;font-size:.7rem;font-style:italic;color:var(--muted);}
  body[data-skin="newsprint"] .stat .v{font-family:'Georgia',serif;font-size:.9rem;font-weight:700;color:var(--ink);}
  body[data-skin="newsprint"] .stat .v small{font-size:.68rem;font-weight:400;color:var(--muted);}
  body[data-skin="newsprint"] #stat-wpm .v{color:var(--ink)!important;}
  body[data-skin="newsprint"] .cat-chip{
    background:none!important;border:1px solid rgba(0,0,0,.18)!important;
    border-radius:0!important;padding:5px 12px;font-family:'Georgia',serif;font-size:.8rem;color:var(--muted);
  }
  body[data-skin="newsprint"] .cat-chip.active{
    background:var(--ink)!important;border-color:var(--ink)!important;
    color:#f0ead8!important;box-shadow:none!important;
  }
  body[data-skin="newsprint"] .cat-chip:hover:not(.active){border-color:var(--ink)!important;color:var(--ink)!important;}
  body[data-skin="newsprint"] .iconbtn,body[data-skin="newsprint"] .opt-group,
  body[data-skin="newsprint"] .modal,body[data-skin="newsprint"] .modal-close,
  body[data-skin="newsprint"] .rbtns button,body[data-skin="newsprint"] .theme-dot,
  body[data-skin="newsprint"] .custom-dot,body[data-skin="newsprint"] .switch,
  body[data-skin="newsprint"] .switch .knob{border-radius:0!important;}
  body[data-skin="newsprint"] .opt-group button.active,body[data-skin="newsprint"] .rbtns .primary,
  body[data-skin="newsprint"] .switch.on{background:var(--ink)!important;color:#f0ead8!important;box-shadow:none!important;}
  body[data-skin="newsprint"] input[type=range]::-webkit-slider-thumb{background:var(--ink)!important;box-shadow:none!important;border-radius:0!important;}
  body[data-skin="newsprint"] input[type=range]::-moz-range-thumb{background:var(--ink)!important;}

  /* ===================== 게임 ===================== */
  /* 게임은 모달 오버레이가 아니라 별도 화면 — 배경 투명(앱 배경 그대로) + 메인(.wrap)은 숨김 */
  .game-backdrop{padding:0;z-index:120;background:transparent;backdrop-filter:none;align-items:stretch;justify-content:center;overflow-y:auto;}
  .game-shell{position:relative;width:100%;max-width:760px;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 22px;min-height:100%;}
  .game-exit{position:absolute;top:18px;right:18px;z-index:2;background:var(--chip);border:1px solid var(--chip-edge);color:var(--muted);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1.05rem;line-height:1;transition:all .2s;}
  .game-mute{position:absolute;top:18px;right:64px;z-index:2;background:var(--chip);border:1px solid var(--chip-edge);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1.05rem;line-height:1;transition:all .2s;padding:0;}
  .game-mute.off{opacity:.5;}
  .game-exit:hover{border-color:var(--accent);color:var(--accent);}
  .game-view{width:100%;display:flex;flex-direction:column;align-items:center;animation:rise .35s ease both;}
  .game-view[hidden]{display:none;}
  /* ── 랭킹 ── */
  .rank-open{margin-top:16px;width:100%;max-width:640px;padding:13px;border-radius:14px;border:1px solid var(--surface-edge);background:var(--surface);color:var(--ink);font-family:var(--kr);font-weight:700;font-size:1rem;cursor:pointer;transition:all .18s;}
  .rank-open:hover{border-color:var(--accent);color:var(--accent);}
  .rank-filters{display:flex;flex-direction:column;gap:9px;align-items:center;margin:4px 0 14px;width:100%;}
  .rank-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;}
  .rank-seg{display:inline-flex;gap:6px;margin:0 6px;}
  .hub-lang{margin-top:10px;} .hub-lang-k{font-size:.82rem;color:var(--muted);} .game-hub-head:has(.hub-lang){margin-bottom:12px;}   /* 2026-10-17 점검 H13: 허브의 게임 언어 */
  .rank-pills button{font-family:var(--ui);font-weight:600;font-size:.82rem;padding:7px 14px;border-radius:999px;border:1px solid var(--chip-edge);background:var(--chip);color:var(--muted);cursor:pointer;transition:all .15s;}
  .rank-pills button:hover:not(.active){color:var(--ink);border-color:var(--accent);}
  .rank-pills button.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);}
  .rank-list{width:100%;max-width:460px;display:flex;flex-direction:column;gap:4px;min-height:180px;}
  .rank-row{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--surface);border:1px solid var(--surface-edge);border-radius:10px;font-family:var(--ui);}
  .rank-row .rr-n{width:2.1em;text-align:right;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;}
  .rank-row.top1 .rr-n{color:#ffd45e;} .rank-row.top2 .rr-n{color:#cdd6e4;} .rank-row.top3 .rr-n{color:#e0a878;}
  .rank-row .rr-nick{flex:1;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rank-row .rr-nick small{color:var(--accent);font-weight:800;margin-left:4px;}
  .rank-row .rr-s{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;flex:none;}
  .rank-row .rr-s small{color:var(--muted);font-weight:500;margin-left:3px;font-size:.72rem;}
  .rank-row.me{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft);}
  .rank-empty{padding:44px 10px;text-align:center;color:var(--muted);font-family:var(--ui);font-size:.9rem;line-height:1.6;}
  .rank-mine{margin-top:10px;padding:9px 18px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent);font-family:var(--ui);font-weight:700;font-size:.85rem;}
  .rank-nickrow{margin-top:12px;font-size:.8rem;color:var(--muted);font-family:var(--ui);display:flex;align-items:center;gap:8px;}
  .rank-nickrow button{background:none;border:none;color:var(--accent);font-weight:700;cursor:pointer;font-size:.8rem;text-decoration:underline;text-underline-offset:3px;padding:0;}
  .rank-note{min-height:1.3em;margin-bottom:12px;font-family:var(--kr);font-weight:700;font-size:.95rem;color:var(--accent);}
  .rank-note .rank-join{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:9px 18px;font-family:var(--kr);font-weight:700;font-size:.88rem;cursor:pointer;transition:all .18s;}
  .rank-note .rank-join:hover{background:var(--accent);color:var(--on-accent,#fff);}
  .nick-box{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(8,8,16,.6);}
  .nick-panel{background:var(--panel-solid);border:1px solid var(--surface-edge);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;width:min(90vw,320px);box-shadow:var(--shadow);}
  .nick-title{font-family:var(--kr);font-weight:700;color:var(--ink);font-size:1.05rem;}
  .nick-panel input{padding:11px 14px;border-radius:10px;border:1px solid var(--surface-edge);background:var(--surface);color:var(--ink);font-family:var(--kr);font-size:1rem;outline:none;}
  .nick-panel input:focus{border-color:var(--accent);}
  .nick-btns{display:flex;gap:8px;justify-content:flex-end;}
  .nick-btns button{border-radius:999px;font-family:var(--kr);font-weight:700;font-size:.9rem;padding:10px 22px;cursor:pointer;transition:all .18s;}
  .nick-btns .primary{background:var(--accent);color:var(--on-accent,#fff);border:none;}
  .nick-btns .primary:hover{filter:brightness(1.08);}
  .nick-btns .ghost{background:transparent;color:var(--muted);border:1px solid var(--surface-edge);}
  .nick-btns .ghost:hover{border-color:var(--accent);color:var(--accent);}
  .nick-hint{font-size:.72rem;color:var(--muted);font-family:var(--ui);}
  .nick-err{font-size:.78rem;line-height:1.5;color:var(--err);font-family:var(--ui);word-break:keep-all;}   /* 닉네임 상자 안 오류 줄(2026-10-03) */
  .nick-err.ok{color:var(--accent);}
  .rank-note{word-break:keep-all;}
  .rank-note .rank-login,.rank-note .rank-nick{background:none;border:none;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0 2px;}   /* 결과 줄의 [로그인] · [닉네임 바꾸기] */
  .rank-nickrow{flex-wrap:wrap;justify-content:center;}
  #acctBtn[hidden]{display:none;}
  /* hidden 섹션은 반드시 숨김 — .ta-start/.ta-result 등의 display:flex가 [hidden]을 덮어써 다 보이던 버그 방지 */
  .game-backdrop [hidden]{display:none!important;}
  .game-hub-head{text-align:center;margin-bottom:30px;}
  .game-logo{font-family:var(--kr);font-weight:800;font-size:2rem;letter-spacing:.08em;color:var(--ink);}
  .game-sub{font-size:.9rem;color:var(--muted);margin-top:8px;}
  .game-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:100%;max-width:520px;}   /* 2×2 + 전폭 1 */
  .game-card.gc-wide{grid-column:1/-1;flex-direction:row;justify-content:center;align-items:center;gap:14px;padding:16px 18px;text-align:left;}
  .game-card.gc-wide .gc-desc br{display:none;}
  .game-card{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;background:var(--surface);border:1px solid var(--surface-edge);border-radius:18px;padding:26px 16px 20px;cursor:pointer;transition:transform .18s ease,border-color .18s ease;position:relative;overflow:hidden;font-family:var(--ui);}
  .game-card:not(.locked):hover{transform:translateY(-4px);border-color:var(--accent);}
  .gc-emoji{font-size:2.4rem;line-height:1;}
  .gc-title{font-family:var(--kr);font-weight:700;font-size:1.05rem;color:var(--ink);}
  .gc-desc{font-size:.75rem;color:var(--muted);line-height:1.4;}
  .gc-best{font-size:.74rem;color:var(--accent);font-weight:600;margin-top:2px;min-height:1em;}
  .gc-sub{font-size:.68rem;color:var(--muted);margin-top:2px;line-height:1.35;word-break:keep-all;}   /* 2026-10-20 H15 일일 카드의 어제 1위 · 오늘 참여 · 연속 */
  .rank-reset{font-size:.74rem;color:var(--muted);margin-top:10px;text-align:center;}   /* H15 랭킹이 새로 시작하는 때 */
  .game-pause{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(4,8,14,.62);cursor:pointer;}   /* H8 배틀·산성비 일시 정지 */
  .game-pause[hidden]{display:none;} .game-pause div{font-family:var(--ui);font-weight:700;font-size:1.5rem;color:var(--ink);text-align:center;padding:22px 34px;border:1px solid var(--accent);border-radius:12px;background:var(--surface);} .game-pause small{display:block;font-weight:500;font-size:.85rem;color:var(--muted);margin-top:6px;}
  .game-card.locked{opacity:.55;cursor:not-allowed;}
  .gc-soon{position:absolute;top:10px;right:10px;background:var(--chip);border:1px solid var(--chip-edge);border-radius:999px;padding:3px 9px;font-size:.64rem;color:var(--faint);}
  .game-back{align-self:flex-start;background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--ui);font-size:.84rem;padding:4px 2px;margin-bottom:8px;transition:color .2s;}
  .game-back:hover{color:var(--accent);}
  .ta-start{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--ui);}
  .ta-title{font-family:var(--kr);font-weight:800;font-size:1.6rem;color:var(--ink);margin-top:6px;}
  .ta-info{font-size:.88rem;color:var(--muted);line-height:1.6;margin:12px 0 22px;}
  .ta-durs{display:flex;gap:6px;background:var(--chip);border:1px solid var(--chip-edge);border-radius:999px;padding:5px;margin-bottom:16px;}
  .ta-durs button{background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--ui);font-size:.86rem;padding:8px 18px;border-radius:999px;transition:all .18s;}
  .ta-durs button.active{background:var(--accent);color:var(--on-accent,#fff);font-weight:600;}
  .ta-best{font-size:.85rem;color:var(--muted);margin-bottom:20px;}
  .ta-best b{color:var(--accent);}
  .ta-play{background:var(--accent);color:var(--on-accent,#fff);border:none;border-radius:999px;font-family:var(--kr);font-weight:700;font-size:1.05rem;letter-spacing:.05em;padding:14px 54px;cursor:pointer;transition:filter .18s,transform .18s;}
  .kbd-hint{font-family:var(--ui);font-size:.7em;font-weight:500;opacity:.72;margin-left:8px;letter-spacing:.02em;}   /* 2026-10-17 점검 H10: 시작·다시 하기 버튼의 'Enter' 표시 */
  .ta-play:hover{filter:brightness(1.08);transform:translateY(-2px);}
  .ta-hint{font-size:.76rem;color:var(--faint);margin-top:14px;}
  .ta-play-wrap{width:100%;max-width:640px;display:flex;flex-direction:column;}
  .ta-hud{display:flex;gap:10px;margin-bottom:12px;}
  .ta-stat{flex:1;text-align:center;background:var(--surface);border:1px solid var(--surface-edge);border-radius:14px;padding:12px 6px;}
  .ta-stat span{font-family:var(--kr);font-weight:800;font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums;}
  .ta-stat small{display:block;font-size:.68rem;color:var(--muted);margin-top:2px;}
  .ta-time span{color:var(--accent);}
  .ta-timebar{height:6px;border-radius:6px;background:var(--surface-edge);overflow:hidden;margin-bottom:20px;}
  .ta-timebar i{display:block;height:100%;width:100%;background:var(--accent);transition:width .12s linear;}
  .ta-text{position:relative;font-family:var(--type-font,var(--kr));font-size:1.5rem;line-height:1.9;letter-spacing:.02em;color:var(--muted);word-break:break-all;min-height:2.4em;background:var(--surface);border:1px solid var(--surface-edge);border-radius:16px;padding:22px 24px;}
  .ta-ch{position:relative;}
  .ta-ch.ok{color:var(--ink);}
  .ta-ch.bad{color:var(--err);background:var(--err-soft);border-radius:3px;}
  /* 게임 오타 칸: 목표 글자(숨김, 폭·줄바꿈 유지) 위에 '내가 친 글자'를 겹쳐 표시 — 한/영 착각을 바로 인지 */
  .ta-ch .ta-b{visibility:hidden;}
  .ta-ch .ta-l{position:absolute;left:0;right:0;text-align:center;}
  /* 한/영 키 경고 배너 (메인 + 게임 공용) */
  .hy-warn{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:8;background:var(--err);color:#fff;font-family:var(--kr);font-weight:800;font-size:.92rem;padding:9px 20px;border-radius:999px;box-shadow:0 8px 26px rgba(0,0,0,.35);white-space:nowrap;pointer-events:none;animation:hyShake .45s ease;}
  .hy-warn.hy-game{position:absolute;top:66px;}
  @keyframes hyShake{0%,100%{transform:translateX(-50%);}20%{transform:translateX(calc(-50% - 9px));}40%{transform:translateX(calc(-50% + 9px));}60%{transform:translateX(calc(-50% - 5px));}80%{transform:translateX(calc(-50% + 5px));}}
  .ta-ch.cur{background:var(--accent-soft);border-radius:3px;box-shadow:inset 0 -2px 0 var(--accent);}
  .ta-comp{color:var(--accent)!important;border-bottom:2px solid var(--accent);}
  .ta-textwrap{position:relative;}
  /* 던전: 두 줄 문장 상자 — 위 원문(고정) / 아래 내가 친 글 */
  @keyframes dnCaret{0%,50%{opacity:1;}51%,100%{opacity:0;}}
  .ta-next{font-family:var(--type-font,var(--kr));font-size:1rem;color:var(--muted);margin-top:14px;opacity:.7;text-align:center;min-height:1.4em;word-break:break-all;}
  .ta-io{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;background:none;resize:none;font-family:var(--type-font,var(--kr));font-size:1.5rem;line-height:1.9;padding:22px 24px;caret-color:transparent;color:transparent;outline:none;}
  .ta-result{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;text-align:center;font-family:var(--ui);}
  .ta-result-title{font-family:var(--kr);font-weight:700;font-size:1.2rem;color:var(--muted);}
  .ta-result-score{margin:14px 0 6px;}
  .ta-result-score span{font-family:var(--kr);font-weight:800;font-size:3.4rem;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;}
  .ta-result-score small{font-size:1rem;color:var(--muted);margin-left:6px;}
  .ta-result-grid{display:flex;gap:12px;margin:22px 0;width:100%;}
  .ta-result-grid>div{flex:1;background:var(--surface);border:1px solid var(--surface-edge);border-radius:14px;padding:14px 8px;}
  .ta-result-grid .rk{font-size:.72rem;color:var(--muted);margin-bottom:5px;}
  .ta-result-grid .rv{font-family:var(--kr);font-weight:700;font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums;}
  .ta-newbest{color:var(--accent);font-weight:700;font-size:1rem;margin-bottom:16px;animation:rise .4s ease both;}
  .ta-result-btns{display:flex;gap:10px;}
  .ta-result-btns button{border-radius:999px;font-family:var(--kr);font-weight:700;font-size:.95rem;padding:12px 30px;cursor:pointer;transition:all .18s;}
  .ta-result-btns .primary{background:var(--accent);color:var(--on-accent,#fff);border:none;}
  .ta-result-btns .primary:hover{filter:brightness(1.08);}
  .ta-result-btns .ghost{background:transparent;color:var(--muted);border:1px solid var(--surface-edge);}
  .ta-result-btns .ghost:hover{border-color:var(--accent);color:var(--accent);}
  .share-btn{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);border-radius:999px;font-family:var(--kr);font-weight:700;font-size:.95rem;padding:12px 22px;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
  /* 결과 공유 팝업: 생성된 카드 PNG 미리보기 + 복사/저장 */
  .share-pop{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,8,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .2s ease;}
  .share-pop-panel{display:flex;flex-direction:column;gap:14px;align-items:center;background:var(--panel-solid);border:1px solid var(--surface-edge);border-radius:20px;padding:20px;max-width:min(92vw,460px);box-shadow:var(--shadow);}
  .share-pop-img{display:block;width:100%;max-height:min(62vh,460px);object-fit:contain;border-radius:12px;}
  .share-pop-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
  .share-pop-btns button{font-family:var(--kr);font-weight:700;font-size:.92rem;border-radius:999px;padding:11px 20px;cursor:pointer;transition:all .18s;border:1px solid var(--surface-edge);background:transparent;color:var(--ink);}
  .share-pop-btns button:hover{border-color:var(--accent);color:var(--accent);}
  .share-pop-btns button.primary{background:var(--accent);color:var(--on-accent,#fff);border-color:var(--accent);}
  .share-pop-btns button.primary:hover{filter:brightness(1.08);color:var(--on-accent,#fff);}
  .share-pop-hint{font-family:var(--ui);font-size:.74rem;color:var(--muted);}
  .share-btn:hover{background:var(--accent);color:var(--on-accent,#fff);}
  .ta-share-row{width:100%;margin-bottom:10px;}
  .ta-share-row .share-btn{width:100%;}
  .ta-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--kr);font-weight:800;font-size:5rem;color:var(--accent);pointer-events:none;}
  @media(max-width:560px){
    .game-cards{grid-template-columns:1fr;max-width:280px;}
    .game-card{flex-direction:row;justify-content:flex-start;text-align:left;padding:16px 18px;gap:14px;}
    .gc-emoji{font-size:1.8rem;}
    .ta-text{font-size:1.2rem;padding:18px;}
    .ta-stat span{font-size:1.2rem;}
  }

  /* 타이핑 레이스 */
  .ra-reset{margin-top:16px;background:none;border:none;color:var(--muted);font-family:var(--ui);font-size:.76rem;cursor:pointer;transition:color .2s;text-decoration:underline;text-underline-offset:3px;}
  .ra-reset:hover{color:var(--err);}
  .ra-reset.confirm{color:var(--err);font-weight:600;}
  .ra-play-wrap{width:100%;max-width:640px;display:flex;flex-direction:column;}
  .ra-track{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
  .ra-lane{position:relative;height:46px;background:var(--surface);border:1px solid var(--surface-edge);border-radius:12px;overflow:hidden;}
  .ra-lane::after{content:'';position:absolute;left:10px;right:10px;top:50%;border-top:2px dashed var(--surface-edge);}
  .ra-lane.ghost{opacity:.65;}
  .ra-lane.ghost[hidden]{display:none;}
  .ra-runner{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:1.5rem;transition:transform .09s linear;will-change:transform;z-index:1;}
  .ra-flag{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:1.3rem;opacity:.5;}
  /* 카운트다운은 문단 위에 반투명으로 — 대기 중에도 칠 내용을 미리 읽을 수 있게 */
  .ra-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--kr);font-weight:800;font-size:4.5rem;color:var(--accent);pointer-events:none;background:transparent;border-radius:16px;text-shadow:0 2px 16px var(--panel-solid),0 0 6px var(--panel-solid),0 0 2px var(--panel-solid);}
  /* 몬스터 배틀 */
  .ba-play-wrap{position:relative;width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;}
  /* 공격 레이저 이펙트 레이어 */
  .ba-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:6;}
  /* 친 단어가 그 자리(버퍼)에서 동그랗게 뭉친 뒤 몬스터로 발사됨 */
  .ba-orb{position:absolute;display:flex;align-items:center;justify-content:center;font-family:var(--type-font,var(--kr));font-weight:800;font-size:1.18rem;line-height:1;color:var(--on-accent,#fff);padding:.5em;background:radial-gradient(circle,var(--accent) 58%,transparent 73%);border-radius:50%;box-shadow:0 0 16px var(--accent),0 0 34px var(--accent);white-space:nowrap;will-change:transform,opacity;transform:translate(-50%,-50%);animation:baOrb .54s cubic-bezier(.45,.03,.5,.97) forwards;}
  @keyframes baOrb{
    0%{opacity:1;transform:translate(-50%,-50%) scale(1.06);letter-spacing:.05em;}      /* 친 단어가 버퍼 자리에 그대로 뜸 */
    24%{opacity:1;transform:translate(-50%,-50%) scale(.56);letter-spacing:-.46em;}      /* 그 자리에서 동그랗게 뭉침 */
    34%{opacity:1;transform:translate(-50%,-50%) scale(.74);letter-spacing:-.46em;}      /* 발사 직전 반동(살짝 팽창) */
    90%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.6);letter-spacing:-.46em;}  /* 몬스터로 발사 */
    100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.92);letter-spacing:-.46em;}
  }
  .ba-play-wrap.dmg{animation:baShake .25s;}
  .ba-top{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-family:var(--ui);}
  .ba-wave{font-family:var(--kr);font-weight:700;color:var(--ink);font-size:1.05rem;}
  .ba-hp-player{display:flex;align-items:center;gap:6px;font-size:.9rem;}
  .ba-hp-player i{display:block;width:130px;height:11px;background:var(--surface-edge);border-radius:6px;overflow:hidden;}
  .ba-hp-player i b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff5b6e,#ff8a9b);transition:width .2s;}
  .ba-monster{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:46px;}
  .ba-mon-emoji{font-size:4.5rem;line-height:1;filter:drop-shadow(0 6px 16px var(--glow));transition:transform .1s;}
  .ba-mon-emoji.hit{transform:scale(1.16) rotate(-6deg);}
  .ba-mon-hp,.ba-mon-charge{width:230px;background:var(--surface-edge);border-radius:7px;overflow:hidden;}
  .ba-mon-hp{height:13px;}
  .ba-mon-hp b{display:block;height:100%;width:100%;background:var(--accent-grad);transition:width .15s;}
  .ba-mon-charge{height:9px;}
  .ba-mon-charge b{display:block;height:100%;width:100%;background:#4ade80;transition:width .12s linear,background .3s;}
  .ba-time-label{font-family:var(--ui);font-size:.74rem;color:var(--muted);margin-top:2px;}
  .ba-time-label b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
  .ba-words{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px;min-height:46px;}
  .ba-word{font-family:var(--type-font,var(--kr));font-size:1.1rem;padding:8px 14px;background:var(--chip);border:1px solid var(--chip-edge);border-radius:10px;color:var(--ink);transition:border-color .12s;}
  .ba-word .m{color:var(--accent);font-weight:700;}
  .ba-word.target{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
  .ba-input-wrap{position:relative;width:100%;max-width:320px;height:52px;margin-bottom:8px;}
  .ba-buffer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--type-font,var(--kr));font-size:1.3rem;color:var(--accent);border:1px solid var(--surface-edge);border-radius:12px;background:var(--surface);letter-spacing:.05em;}
  .ba-buffer.miss{animation:baShake .25s;border-color:var(--err);color:var(--err);}
  .ba-combo{height:1.5em;font-family:var(--kr);font-weight:700;color:var(--accent);}
  @keyframes baShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}60%{transform:translateX(7px)}}
  /* ── 산성비 ── */
  .rn-play-wrap{position:relative;width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;}
  .rn-top{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:var(--ui);}
  .rn-lives{font-size:1.02rem;letter-spacing:2px;}
  .rn-stat{color:var(--muted);font-size:.9rem;}
  .rn-stat b{font-family:var(--kr);font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;margin-left:4px;}
  .rn-field{position:relative;width:100%;height:380px;background:var(--surface);border:1px solid var(--surface-edge);border-radius:14px;overflow:hidden;margin-bottom:12px;}
  .rn-field.dmg{animation:baShake .25s;}
  .rn-floor{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--err);opacity:.45;}
  .rn-word{position:absolute;top:0;transform:translateX(-50%);font-family:var(--type-font,var(--kr));font-size:1.05rem;padding:6px 12px;background:var(--chip);border:1px solid var(--chip-edge);border-radius:10px;color:var(--ink);white-space:nowrap;will-change:transform;transition:transform 50ms linear;}   /* 2026-10-17 점검 A49: 위치는 0.05초마다 바뀌므로 그 사이를 이어 그려 뚝뚝 끊기지 않게(캔버스·그림 변화 없음) */
  .rn-word .m{color:var(--accent);font-weight:700;}
  .rn-word.target{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
  @media(max-width:560px){ .rn-field{height:320px;} }
  /* ── 정확도 서바이벌 ── */
  .ta-play-wrap.dmg{animation:baShake .25s;}
  .sv-cause{font-family:var(--ui);font-size:.86rem;color:var(--muted);margin:0 0 10px;}
  .sv-cause b{color:var(--err);font-family:var(--type-font,var(--kr));font-size:1rem;padding:1px 6px;background:var(--err-soft);border-radius:5px;}
  /* ── 급수 검정 결과 라인 ── */
  .ta-gradeline{font-family:var(--kr);font-weight:700;font-size:1.05rem;color:var(--muted);margin:2px 0 8px;}
  .ta-gradeline b{color:var(--accent);font-size:1.25rem;}
  /* ── 연습 잔디 ── */
  .streak-modal{max-width:420px;}
  .streak-tops{display:flex;gap:10px;margin-bottom:16px;}
  .streak-tops>div{flex:1;text-align:center;background:var(--surface);border:1px solid var(--surface-edge);border-radius:12px;padding:12px 6px;}
  .streak-tops b{display:block;font-family:var(--kr);font-weight:800;font-size:1.5rem;color:var(--accent);font-variant-numeric:tabular-nums;}
  .streak-tops span{font-family:var(--ui);font-size:.72rem;color:var(--muted);}
  .grass{display:grid;grid-template-rows:repeat(7,13px);grid-auto-flow:column;grid-auto-columns:13px;gap:3px;justify-content:center;}
  .grass i{width:13px;height:13px;border-radius:3px;background:var(--surface-edge);}
  .grass i.g1{background:var(--accent);opacity:.28;}
  .grass i.g2{background:var(--accent);opacity:.5;}
  .grass i.g3{background:var(--accent);opacity:.75;}
  .grass i.g4{background:var(--accent);opacity:1;}
  @media(max-width:560px){
    .ba-mon-emoji{font-size:3.4rem;}
    .ba-mon-hp,.ba-mon-charge{width:180px;}
  }

  .gc-new{font-family:var(--ui);font-size:.62rem;font-weight:700;color:var(--accent2);margin-left:6px;vertical-align:middle;letter-spacing:.04em;}
  .r0{color:#cfd8dc!important;} .r1{color:#7dffb0!important;} .r2{color:#5cc8ff!important;} .r3{color:#c77dff!important;} .r4{color:#ffb347!important;}
  /* ===================== 게임 화면: 네온 택티컬 HUD (게임 전용 · 메인 타이핑 화면 미영향) ===================== */
  .game-backdrop{
    --accent:#2fe4ec;--accent2:#ff4dd8;--accent-grad:#2fe4ec;--accent-soft:rgba(47,228,236,.12);--glow:rgba(47,228,236,.55);
    --on-accent:#04141a;--ink:#e2f7f9;--muted:#71b3b8;--faint:#3c6b70;
    --surface:rgba(47,228,236,.05);--surface-edge:rgba(47,228,236,.4);--chip:rgba(47,228,236,.05);--chip-edge:rgba(47,228,236,.5);
    --err:#ff3d71;--err-soft:rgba(255,61,113,.16);--panel-solid:#0b1119;
    background:#060a10;
  }
  .game-backdrop::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(47,228,236,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,228,236,.05) 1px,transparent 1px);background-size:30px 30px;}
  .game-backdrop::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);}
  .game-backdrop .game-shell{position:relative;z-index:2;}
  .game-backdrop .game-shell::before{content:"";position:absolute;inset:8px;z-index:5;pointer-events:none;background:linear-gradient(#2fe4ec,#2fe4ec) left top,linear-gradient(#2fe4ec,#2fe4ec) left top,linear-gradient(#2fe4ec,#2fe4ec) right top,linear-gradient(#2fe4ec,#2fe4ec) right top,linear-gradient(#2fe4ec,#2fe4ec) left bottom,linear-gradient(#2fe4ec,#2fe4ec) left bottom,linear-gradient(#2fe4ec,#2fe4ec) right bottom,linear-gradient(#2fe4ec,#2fe4ec) right bottom;background-repeat:no-repeat;background-size:22px 2px,2px 22px;filter:drop-shadow(0 0 3px #2fe4ec);opacity:.85;}
  /* 모노 수치 (숫자·타이머·라벨) */
  .game-backdrop .ta-stat span,.game-backdrop .ta-time span,.game-backdrop .ta-result-score span,.game-backdrop .ta-result-grid .rv,.game-backdrop .ba-time-label b,.game-backdrop .ba-wave,.game-backdrop .raTime,.game-backdrop #raTime{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
  /* 제목/텍스트 글로우 */
  .game-backdrop .game-logo,.game-backdrop .ta-title{text-shadow:0 0 14px var(--glow);letter-spacing:.05em;}
  .game-backdrop .ta-stat span,.game-backdrop .ta-time span,.game-backdrop .ta-result-score span,.game-backdrop .gc-title,.game-backdrop .ba-wave,.game-backdrop .ba-time-label b,.game-backdrop .ta-newbest{text-shadow:0 0 9px var(--glow);}
  /* 각진 코너 */
  .game-backdrop .ta-stat,.game-backdrop .ta-text,.game-backdrop .game-card,.game-backdrop .ta-result-grid>div,.game-backdrop .ba-word,.game-backdrop .ba-buffer,.game-backdrop .ta-durs,.game-backdrop .ba-input-wrap{border-radius:3px;}
  .game-backdrop .ta-timebar,.game-backdrop .ta-timebar i,.game-backdrop .ba-mon-hp,.game-backdrop .ba-mon-charge,.game-backdrop .ba-hp-player i,.game-backdrop .ra-lane{border-radius:2px;}
  /* 바 글로우 */
  .game-backdrop .ta-timebar i{box-shadow:0 0 10px var(--glow);}
  .game-backdrop .ba-mon-hp b{background:repeating-linear-gradient(90deg,var(--accent) 0 8px,rgba(6,10,16,.85) 8px 11px)!important;box-shadow:0 0 9px var(--glow);}
  .game-backdrop .ba-mon-charge b{background:var(--accent);box-shadow:0 0 9px var(--glow);}
  .game-backdrop .ba-hp-player i b{background:var(--err);box-shadow:0 0 8px var(--err);}
  /* 버튼/카드/나가기 글로우 */
  .game-backdrop .ta-play{border-radius:3px;box-shadow:0 0 16px var(--glow);letter-spacing:.08em;font-weight:700;}
  .game-backdrop .game-exit,.game-backdrop .game-mute{border-radius:3px;box-shadow:0 0 10px var(--glow);}
  .ba-boom{position:absolute;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0%,#ff4dd8 42%,rgba(47,228,236,.5) 65%,transparent 78%);pointer-events:none;z-index:4;animation:baBoom .42s cubic-bezier(.2,.6,.3,1) forwards;}
  @keyframes baBoom{0%{opacity:1;transform:translate(-50%,-50%) scale(.4);}70%{opacity:.9;}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2);}}
  .game-backdrop .game-card:not(.locked):hover{box-shadow:0 0 20px var(--glow);}
  .game-backdrop .ta-durs button.active{box-shadow:0 0 10px var(--glow);}
  /* 타이핑 커서 = 시안 깜빡이 캐럿(다음 칠 위치) — 오타(빨강 박스)와 확실히 구분. 조합중은 .ta-comp(마젠타 밑줄) */
  .game-backdrop .ta-ch.cur{background:rgba(47,228,236,.10);box-shadow:inset 0 -2px 0 var(--accent);animation:taCaret 1.05s infinite;}
  @keyframes taCaret{0%,50%{box-shadow:inset 0 -2px 0 var(--accent);}51%,100%{box-shadow:inset 0 -2px 0 transparent;}}
  .game-backdrop .ta-comp{color:var(--accent2)!important;border-bottom-color:var(--accent2);}
  /* 레이스 */
  .game-backdrop .ra-runner{filter:drop-shadow(0 0 6px var(--glow));}
  .game-backdrop .ra-count{text-shadow:0 0 18px var(--glow),0 0 7px var(--glow);}
  /* 배틀 */
  .game-backdrop .ba-word{box-shadow:0 0 8px rgba(47,228,236,.22);}
  .game-backdrop .ba-word .m{color:var(--accent2);}
  .game-backdrop .ba-word.target{color:var(--on-accent);background:var(--accent2);border-color:var(--accent2);box-shadow:0 0 14px rgba(255,77,216,.7);}
  .game-backdrop .ba-word.target .m{color:var(--on-accent);}   /* 마젠타 배경 위 매칭 글자 → 어두운색(안 묻히게) */
  /* 산성비 — 떨어지는 단어도 배틀과 같은 네온 언어 */
  .game-backdrop .rn-word{border-radius:3px;box-shadow:0 0 8px rgba(47,228,236,.22);}
  .game-backdrop .rn-word .m{color:var(--accent2);}
  .game-backdrop .rn-word.target{color:var(--on-accent);background:var(--accent2);border-color:var(--accent2);box-shadow:0 0 14px rgba(255,77,216,.7);}
  .game-backdrop .rn-word.target .m{color:var(--on-accent);}
  .game-backdrop .rn-field{border-radius:3px;background:rgba(47,228,236,.03);}
  .game-backdrop .rn-floor{box-shadow:0 0 9px var(--err);}
  .game-backdrop .rn-stat b{text-shadow:0 0 9px var(--glow);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
  .game-backdrop .ba-buffer{color:var(--accent2);}
  .game-backdrop .ba-time-label b{color:#fff;}
  .game-backdrop .ba-combo{text-shadow:0 0 8px var(--glow);}
  .game-backdrop .ba-mon-emoji{filter:drop-shadow(0 0 16px var(--glow));position:relative;}
  .game-backdrop .ba-mon-emoji::before{content:"";position:absolute;top:-8px;right:-16px;width:15px;height:15px;border-top:2px solid var(--accent2);border-right:2px solid var(--accent2);filter:drop-shadow(0 0 4px var(--accent2));}
  .game-backdrop .ba-mon-emoji::after{content:"";position:absolute;bottom:-8px;left:-16px;width:15px;height:15px;border-bottom:2px solid var(--accent2);border-right:0;border-left:2px solid var(--accent2);filter:drop-shadow(0 0 4px var(--accent2));}
  .game-backdrop .ba-orb{background:radial-gradient(circle,var(--accent2) 58%,transparent 73%)!important;color:#20060f!important;box-shadow:0 0 16px var(--accent2),0 0 34px var(--accent2)!important;text-shadow:none!important;}

  /* ============ 부드러운 움직임 (A~E) — ⚠ 타이핑 글자/커서·게임 피드백엔 영향 없음(겉면·전환만), reduced-motion 존중 ============ */
  @keyframes statPop{0%{transform:scale(1);}28%{transform:scale(1.14);}100%{transform:scale(1);}}
  @media (prefers-reduced-motion: no-preference){
    /* D. 부드러운 스크롤 */
    html{scroll-behavior:smooth;}
    .game-backdrop,.modal,.rank-list{scroll-behavior:smooth;}
    /* B. 테마·스킨 색 전환 (겉면만 — .ch 글자는 목록에서 제외, 기존 0.08s 색전환 그대로라 타이핑 반응 불변) */
    body,.card,.typing-area,.stats .stat,.stat .v,header .mark,footer,.footer-hint,.cats,.works{
      transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease;
    }
    /* C. 버튼 눌림 피드백 */
    .iconbtn:active:not(:disabled),.opt-group button:active,.cats button:active,.works button:active,
    .ta-result-btns button:active,.share-btn:active,.rbtns button:active,.rank-pills button:active,
    .ta-durs button:active,.nick-btns button:active,.share-pop-btns button:active,.rec-start-btn:active,
    .rank-open:active,.custom-btns button:active{transform:translateY(1px) scale(.985);}
    /* A. 화면 전환 — 게임 뷰 페이드 인 + 결과 패널 떠오르기 */
    #gameHub:not([hidden]),#gameTA:not([hidden]),#gameRace:not([hidden]),#gameBattle:not([hidden]),
    #gameRain:not([hidden]),#gameSurv:not([hidden]),#gameRank:not([hidden]){animation:fade .26s ease both;}
    #taResult:not([hidden]),#raResult:not([hidden]),#baResult:not([hidden]),
    #rnResult:not([hidden]),#svResult:not([hidden]){animation:rise .34s cubic-bezier(.22,.61,.36,1) both;}
    /* E. 스탯 팝 — 값이 '착지'하는 순간(완료 시)만. 타이핑 중 매 타 갱신엔 안 붙음(산만함 방지) */
    .stat .v.pop{animation:statPop .42s cubic-bezier(.22,.61,.36,1);}
    .results.show .big{animation:statPop .5s .12s cubic-bezier(.22,.61,.36,1) both;}
  }

  /* 결과 표시 중에는 타이핑 글이 가려져 있으니 높이를 조금 키운다. 상한 416px는 최악 조합
     (🎉 신기록 배너 + 스파크라인 + 읽을거리 카드 = 실측 413px)이 잘리지 않는 값.
     앞의 .typing-area 높이 규칙들보다 뒤에 와야 이기므로 스타일 맨 끝에 둔다. */
  body.results-on .typing-area,
  body.kb-on.results-on .typing-area{height:clamp(210px,54vh,416px);}