/* 한국어 과외 AI — Apple HIG 기반 디자인
   근거: systemBlue #007AFF/#0A84FF · label/secondary 그레이 · SF Pro 타입스케일
   · 44pt 터치타깃 · continuous 코너 · 머티리얼 블러 · iMessage 버블 · 다크모드 */

:root{
  --blue:#007aff; --blue-press:#0066d6; --blue-tint:rgba(0,122,255,.10);
  --label:#1d1d1f; --secondary:rgba(60,60,67,.72); --tertiary:rgba(60,60,67,.30);   /* secondary .60→.72 — 야외 가독(회장 개선지시 ⑩) */
  --bg:#f2f2f7; --surface:#fff; --surface-2:#fff;
  --separator:rgba(60,60,67,.16); --fill:rgba(118,118,128,.12);
  --bar:rgba(255,255,255,.72); --sheet:rgba(255,255,255,.86);
  --bubble:#e9e9eb; --bubble-ink:#1d1d1f;
  --me:#007aff; --me-ink:#fff;
  --ok:#34c759; --no:#ff3b30; --warn:#ff9f0a;
  --r-card:20px; --r-btn:14px; --r-bubble:21px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --chip-pattern:#007aff; --chip-meaning:#af52de; --chip-elicit:#30b0c7; --chip-demo:#5856d6;
  --chip-map:#ff9500; --chip-trap:#ff3b30; --chip-compose:#34c759;
}
@media (prefers-color-scheme:dark){
  :root{
    --blue:#0a84ff; --blue-press:#3395ff; --blue-tint:rgba(10,132,255,.22);
    --label:#f5f5f7; --secondary:rgba(235,235,245,.72); --tertiary:rgba(235,235,245,.30);
    --bg:#000; --surface:#1c1c1e; --surface-2:#2c2c2e;
    --separator:rgba(84,84,88,.60); --fill:rgba(118,118,128,.24);
    --bar:rgba(30,30,32,.72); --sheet:rgba(28,28,30,.86);
    --bubble:#262629; --bubble-ink:#f5f5f7;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.5);
    --chip-pattern:#0a84ff; --chip-meaning:#bf5af2; --chip-elicit:#40c8e0; --chip-demo:#5e5ce6;
    --chip-map:#ff9f0a; --chip-trap:#ff453a; --chip-compose:#30d158;
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; height:100dvh; overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    "Hiragino Kaku Gothic ProN","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-.01em;
  color:var(--label); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.screen{ height:100dvh; display:flex; flex-direction:column; }
.hidden{ display:none !important; }

/* ── 버튼 ─────────────────────────────────────────── */
button{
  font:inherit; font-weight:590; letter-spacing:-.01em; border:0; cursor:pointer;
  border-radius:var(--r-btn); padding:13px 18px; min-height:44px;
  background:var(--fill); color:var(--label);
  transition:transform .12s ease, background .15s ease, opacity .15s ease;
}
button:active{ transform:scale(.97); opacity:.85; }
.primary{
  background:var(--blue); color:#fff; font-weight:600; min-height:50px;
  box-shadow:0 1px 1px rgba(0,0,0,.04);
}
.primary:active{ background:var(--blue-press); }
.primary.wide{ width:100%; }
.primary:disabled{ background:var(--tertiary); color:#fff; opacity:.7; transform:none; }
.ghost{ background:transparent; color:var(--secondary); font-weight:400; }
/* Lucide풍 스트로크 아이콘(스프라이트 <use>) — 이모지 전면 대체. 색은 currentColor 상속 */
.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px; }
.ic-s{ width:15px; height:15px; vertical-align:-2.5px; }
.hf-ic .ic{ width:22px; height:22px; color:var(--blue); }
.wordpop .ic-s{ margin-right:5px; }
#streak .ic-s{ color:#ff9500; }
#account{ position:relative; }
.acct-dot{ position:absolute; right:2px; bottom:2px; width:8px; height:8px; border-radius:50%;
  background:var(--ok, #34c759); border:1.5px solid var(--bg, #fff); }
.tiny{ color:var(--tertiary); font-size:13px; text-align:center; margin-top:18px; line-height:1.4; }
/* 무료 베타 고지 — 인테이크(시작 버튼 아래)·계정 시트 공용. 특전(b)만 살짝 강조 */
/* 일본어 본문은 문절 단위로 끊는다 — 기본 규칙은 「無料」를 無/料로 쪼개 읽기 흐름을 끊는다.
   auto-phrase 미지원 브라우저는 기존 동작으로 자연히 폴백된다. */
.beta-note, .beta-note-sheet, .quiz-ja, .l1, .sub{ word-break:auto-phrase; }
.beta-note{ margin-top:10px; font-size:12px; color:var(--secondary); }
.beta-note b{ color:var(--blue); font-weight:600; }
.beta-note-sheet{ margin-top:12px; font-size:12.5px; line-height:1.5; text-align:center; color:var(--secondary); }
.beta-note-sheet b{ color:var(--blue); font-weight:600; }

/* ── 인테이크 ─────────────────────────────────────── */
.intake-box{ margin:auto; max-width:360px; width:100%; padding:28px 22px; text-align:center; }
/* ★인테이크 아바타 전용 — '.tutor'는 채팅 버블(.msg.tutor)과 클래스명이 겹치므로 반드시 스코프 한정 */
.intake-box .tutor{
  width:96px; height:96px; margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
}
/* 마스코트 아트는 자체 파란 링·말풍선을 가진 배지형(투명 배경) — 프레임 없이 그대로 띄운다 */
.mascot{ display:block; }
.intake-box .tutor .mascot{ width:96px; height:96px; }
/* #t-greeting은 h1→h2로 강등(문서 제목은 랜딩의 .lp-eyebrow 하나). 조판은 그대로 유지 —
   ID 선택자라 아래 `.intake-box h2`(15px)보다 우선한다. */
.intake-box h1, .intake-box #t-greeting{ margin:10px 0 6px; font-size:34px; font-weight:700; letter-spacing:-.022em; line-height:1.15; }
.intake-box .sub{ color:var(--secondary); font-size:16px; line-height:1.45; margin:0 4px; }
.intake-box h2{ font-size:15px; font-weight:600; letter-spacing:-.01em; margin:30px 0 12px; }
h2.neutral{ font-size:23px; font-weight:700; letter-spacing:-.02em; color:var(--label); margin:18px 0 20px; line-height:1.2; word-break:keep-all; }
h2.neutral small{ display:block; font-size:15px; font-weight:500; color:var(--secondary); margin-top:5px; letter-spacing:-.01em; }

.chips{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.chips.col{ flex-direction:column; }
.chips button{
  flex:1 1 0; min-width:130px; max-width:100%; min-height:56px; padding:8px 10px;
  font-size:15px; font-weight:500; line-height:1.2; white-space:normal; word-break:keep-all;
  overflow-wrap:anywhere; box-sizing:border-box;   /* 긴 토큰도 칩 밖으로 안 새게 */
  background:var(--surface); border:.5px solid var(--separator);
  box-shadow:var(--shadow);
}
.chips.col button{ width:100%; }
.chips button.sel{
  background:var(--blue-tint); border:1.5px solid var(--blue); color:var(--blue); font-weight:600;
}

/* ── 인트로 화면 스크롤 + 배경(그라디언트 + 흐린 한글). 모바일·데스크탑 공통 ── */
#intake{ overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  position:relative;
  background:
    radial-gradient(85% 45% at 50% 0%, color-mix(in srgb,var(--blue) 12%, transparent), transparent 62%),
    linear-gradient(168deg, color-mix(in srgb,var(--blue) 8%, var(--bg)), var(--bg) 62%);
}
/* 배경 한글 장식 — #intake 전체를 덮는 배경 레이어(콘텐츠 뒤). 크기는 화면폭에 비례(clamp) */
.hero-deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-deco span{ position:absolute; font-weight:800; color:var(--blue); opacity:.05; letter-spacing:-.05em; line-height:1; }
.hero-deco span:nth-child(1){ top:-3%; left:-3%; font-size:clamp(130px,30vw,220px); }
.hero-deco span:nth-child(2){ bottom:-6%; right:-3%; font-size:clamp(160px,40vw,290px); }
.hero-deco span:nth-child(3){ top:34%; left:58%; font-size:clamp(100px,24vw,155px); }
.hero-deco span:nth-child(4){ bottom:7%; left:2%; font-size:clamp(90px,22vw,125px); }
/* 콘텐츠는 배경 장식 위로 */
.intake-box, .hero-inner{ position:relative; z-index:1; }

/* 첫 화면(폴드) — 랜딩(#lp)이 아래 붙으면서 #intake는 페이지 전체 스크롤러가 되고,
   기존 '한 화면' 레이아웃 역할은 .lp-fold가 물려받는다 */
.lp-fold{ position:relative; display:flex; flex-direction:column; min-height:100dvh; overflow:hidden;
  padding-top:56px;        /* 우상단 로그인 띠(.fold-top) 전용 공간 — 콘텐츠와 겹치지 않게(회장 리포트) */
  padding-bottom:64px;     /* 하단 스크롤 큐 전용 공간 — 인테이크 내용과 겹치지 않게(회장 리포트) */
  flex-shrink:0; }         /* ★#intake(플렉스 컬럼)가 폴드를 100dvh로 눌러 카드가 밖으로 삐져나오던
                              원인(회장 리포트: 카드가 도중에 끊김) — 내용만큼 크도록 수축 금지 */
/* ── 데스크탑 히어로(인트로 좌측 브랜드 패널). 모바일은 숨김 → 기존 세로 화면 유지 ── */
.intake-hero{ display:none; }
.intake-right{ display:contents; }   /* 모바일: 래퍼 투명 → 기존 레이아웃 그대로 */
@media (min-width:920px){
  .lp-fold{ flex-direction:row; align-items:stretch; max-width:1400px; margin:0 auto; width:100%; }
  /* 폼이 화면보다 길면 페이지 스크롤이 담당(safe center=넘칠 땐 위 정렬) */
  .intake-right{ display:flex; flex:1 1 46%; flex-direction:column; align-items:center;
    justify-content:safe center; padding:32px 40px; }
  .intake-hero{
    flex:1 1 54%; position:relative; padding:48px;
    display:flex; align-items:safe center; justify-content:center;
    background:transparent;   /* 배경(그라디언트+한글)은 #intake가 전담 → 데스크탑 좌측에 그대로 노출 */
  }
  .hero-inner{ position:relative; z-index:1; width:100%; max-width:380px; }
  .hero-mascot{ width:150px; height:150px; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center; }
  .hero-mascot .mascot{ width:150px; height:150px; }
  .hero-word{ text-align:center; font-size:30px; font-weight:800; letter-spacing:.05em; color:var(--blue); line-height:1; }   /* 카나 워드마크 — 라틴용 음수 자간을 풀고 살짝 벌림 */
  .hero-tag{ text-align:center; font-size:21px; font-weight:700; letter-spacing:-.02em;
    margin:8px 0 28px; color:var(--label); line-height:1.3; word-break:keep-all; }
  .hero-feats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .hero-feats li{ display:flex; gap:13px; align-items:flex-start; border-radius:16px; padding:13px 15px;
    background:color-mix(in srgb,var(--surface) 66%, transparent);
    border:.5px solid var(--separator); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .hf-ic{ font-size:22px; line-height:1.2; flex:0 0 auto; }
  .hf-tx{ font-size:14px; color:var(--secondary); line-height:1.4; word-break:keep-all; }
  .hf-tx b{ display:block; color:var(--label); font-size:15px; font-weight:600; margin-bottom:2px; }
  /* 데스크탑: 히어로에 큰 마스코트가 있으니 폼 상단 아바타는 숨기고, 폼을 카드로 */
  .intake-box{ margin:0; width:100%; background:var(--surface); border-radius:28px;
    box-shadow:var(--shadow); padding:40px 34px; max-width:400px; }
  .intake-box .tutor{ display:none; }
}
#start{ margin-top:26px; width:100%; }

/* 언어선택 = iOS 인셋 그룹 리스트(설정앱 스타일) */
#l1-chips{ flex-direction:column; gap:0; background:var(--surface); border-radius:14px; overflow:hidden;
  border:.5px solid var(--separator); box-shadow:var(--shadow); }
#l1-chips button{
  flex:0 0 auto; width:100%; min-width:0; min-height:58px; justify-content:flex-start; gap:12px;
  padding:0 16px 0 18px; font-size:17px; font-weight:500; text-align:left;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  border-bottom:.5px solid var(--separator); position:relative;
}
#l1-chips button:last-child{ border-bottom:0; }
#l1-chips button::after{ content:"›"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:var(--tertiary); font-size:22px; font-weight:500; }
#l1-chips button:active{ background:var(--fill); transform:none; opacity:1; }

/* ── 채팅 ─────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  width:100%; max-width:860px; margin:0 auto;
  background:var(--bar); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--separator); position:relative; z-index:5;
}
/* 상단바 액션 버튼: 눌리는 느낌(배경 채움·둥근 사각·테두리) */
.topbar button{ flex:0 0 auto; width:40px; height:40px; padding:0; font-size:19px; border-radius:12px;
  background:var(--fill); border:.5px solid var(--separator); }
.topbar button:active{ background:var(--blue-tint); transform:scale(.94); }
.topbar #starCurrent.starred-on{ background:rgba(255,159,10,.16); border-color:transparent; color:var(--warn); }
.who{ font-size:16px; font-weight:600; letter-spacing:-.01em; flex:0 0 auto;
  display:flex; align-items:center; gap:7px; }
.tb-ava{ width:28px; height:28px; }   /* 상단바 민선생님 얼굴 — '누구와 말하는지'를 상시 표시 */
.online{ color:var(--ok); font-size:11px; vertical-align:middle; margin-left:2px; }
.progbar{ flex:1; height:6px; background:var(--fill); border-radius:3px; overflow:hidden; }   /* 5→6px — 진행감 시인성(회장 개선지시 ⑤) */
/* #diagProg도 같은 채움 규칙 — 진단 진행바가 숫자만 늘고 색이 안 차던 원인(회장 리포트) */
#prog, #diagProg{ height:100%; width:0; background:var(--blue); border-radius:3px; transition:width .35s cubic-bezier(.2,.8,.2,1); }
#diag .progbar{ height:8px; border-radius:4px; }

#thread{
  flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:8px;
  width:100%; max-width:860px; margin:0 auto; scroll-behavior:smooth;
}
.msg{
  width:fit-content; max-width:min(82%, 560px); padding:11px 15px; border-radius:var(--r-bubble);
  line-height:1.45; font-size:17px; animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
  word-break:normal; overflow-wrap:break-word; letter-spacing:-.01em;
}
/* 단어표 등 내부 블록이 버블 폭을 1글자로 줄이지 못하게(CJK min-content 붕괴 방지) */
.msg .pat, .msg .culnote{ min-width:220px; }
/* 단어표=자료. 데스크탑은 여러 칸 그리드로 넓게, 폰은 1칸(가로공간 활용).
   ★fit-content가 버블을 줄여 그리드가 안 펼쳐지므로, 정의된 width로 폭을 확보 */
.msg:has(.wtgrid){ width:min(94%, 740px); max-width:none; }
.wtgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); column-gap:24px; }
.wtgrid .wtrow{ min-width:0; }
.wtgrid .culnote{ grid-column:1 / -1; }

/* 漢字語 모듈: 漢字→한글 음 묶음 + 예측문제 */
.hjgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:6px 22px; margin-top:4px; }
.hjrow{ display:flex; align-items:flex-start; gap:12px; padding:8px 0; border-bottom:.5px solid var(--separator); min-width:0; }
.hjchar{ flex:0 0 auto; font-size:34px; font-weight:680; line-height:1; width:46px; text-align:center; }
.hjbody{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hjread{ font-size:15px; } .hjread .roman{ margin:0 4px; }
.hjex{ font-size:13px; color:var(--secondary); line-height:1.5; }
.hjex .ko-tts{ color:var(--blue); border-bottom:1px dotted var(--blue); }
.hjpredict{ margin-top:12px; padding:11px 14px; background:var(--blue-tint); border-radius:12px; font-size:15px; line-height:1.6; }
@keyframes pop{ from{ transform:translateY(8px) scale(.97); opacity:0 } to{ transform:none; opacity:1 } }
.msg.tutor{
  background:var(--bubble); color:var(--bubble-ink); align-self:flex-start;
  border-bottom-left-radius:7px;
}
/* 학습창 배경 한글 — 브랜드 질감을 학습 화면까지(회장 지시). 읽기를 방해하지 않는 최소 농도 */
#chat{ position:relative; }
.chat-deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.chat-deco span{ position:absolute; font-weight:800; color:var(--blue); opacity:.04;
  line-height:1; letter-spacing:-.05em; }
.chat-deco span:first-child{ top:9%; right:-4%; font-size:clamp(140px,22vw,250px); }
.chat-deco span:last-child{ bottom:9%; left:-5%; font-size:clamp(120px,19vw,220px); }
#chat > .topbar, #chat > #thread, #chat > #composer{ position:relative; z-index:1; }

/* 채팅 느낌의 핵심(회장 지적: 상대가 보여야 대화다) — 말풍선 옆 민선생님 아바타.
   표시 주기는 pushMsg가 .ava로 정한다(연속 튜터 2개마다 — 수업의 긴 연속 구간에서도 얼굴 유지).
   들여쓰기는 전 튜터 버블 공통이라 정렬이 흐트러지지 않는다. */
#thread .msg.tutor{ margin-left:46px; }
#thread .msg.tutor.ava::before{ content:""; position:absolute; left:-46px; top:-2px; width:36px; height:36px;
  background:url("mascot.webp?v=1") center/contain no-repeat; }
/* 시각·既読(LINE/카카오식) — data-meta를 ::after로, 말풍선 '옆 하단'에(회장 지시).
   시각이 붙는 버블만 폭을 살짝 양보해(82→76%) 좁은 화면에서도 옆자리가 확보된다. */
#thread .msg{ position:relative; }
#thread .msg[data-meta]{ max-width:min(76%, 560px); }
#thread .msg[data-meta]::after{ content:attr(data-meta); position:absolute; bottom:2px;
  font-size:10.5px; font-weight:500; color:var(--tertiary, #aeaeb2); white-space:nowrap; letter-spacing:0; }
#thread .msg.tutor[data-meta]::after{ right:-8px; transform:translateX(100%); }
#thread .msg.me[data-meta]::after{ left:-8px; transform:translateX(-100%); }
/* 와이드 자료 버블(단어표)은 옆 공간이 없어 예외적으로 아래 배치 */
#thread .msg.tutor:has(.wtgrid)[data-meta]{ max-width:none; margin-bottom:13px; }
#thread .msg.tutor:has(.wtgrid)[data-meta]::after{ right:6px; bottom:-16px; transform:none; }
/* 단어표 와이드 버블은 아바타 들여쓰기만큼 폭을 줄여 가로 넘침 방지 */
#thread .msg.tutor:has(.wtgrid){ width:min(calc(94% - 46px), 740px); }
.msg.me{
  background:var(--me); color:var(--me-ink); align-self:flex-end;
  border-bottom-right-radius:7px;
}
.msg .steptag{
  color:var(--blue); font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  margin-bottom:5px; opacity:.9;
}
.msg.me .steptag{ color:rgba(255,255,255,.85); }

/* 한국어 발음/TTS */
.ko{ font-size:22px; font-weight:680; letter-spacing:-.02em; line-height:1.3; }
.ko-tts{ cursor:pointer; border-bottom:1.5px solid var(--blue); padding-bottom:1px; }
.ko-tts:active{ background:var(--blue-tint); border-radius:4px; }
.roman{ color:var(--secondary); font-size:13px; }
.l1{ color:var(--secondary); font-size:15px; margin-top:3px; line-height:1.45; }
.msg.me .l1,.msg.me .roman{ color:rgba(255,255,255,.85); }
.wtrow{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 0; border-bottom:.5px solid var(--separator); }
.wtrow:last-child{ border-bottom:0; }
.wtrow .pron{ text-align:right; } .wtrow .pron .roman{ display:block; }
.ko-ex{
  display:inline-block; color:var(--blue); font-weight:600; cursor:pointer; margin:3px 0;
  padding:5px 12px; background:var(--blue-tint); border-radius:11px; font-size:16px;
}
.ko-ex:active{ transform:scale(.96); }
.spk{ font-size:13px; color:var(--blue); margin-left:6px; cursor:pointer; }
.fb-ok{ color:var(--ok); font-weight:600; } .fb-no{ color:var(--no); font-weight:600; }
.morewords{
  display:block; width:fit-content; margin-top:12px; padding:9px 16px; background:var(--blue-tint);
  color:var(--blue); border-radius:12px; font-weight:600; font-size:15px; white-space:nowrap; min-height:0;
}
/* 재방문 자동재개: 이어서하기 / 복습하기 */
.resume-row{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.resume-row button{ flex:1 1 0; min-width:120px; padding:13px 16px; border-radius:14px; font-size:16px; font-weight:600; }
.resume-row .alt{ background:var(--surface); border:.5px solid var(--separator); color:var(--blue); }

/* 계정 시트(Google 로그인 / 로그아웃) */
.sheet{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.35); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.sheet-panel{ background:var(--surface); border-radius:18px; width:min(360px,100%); padding:18px 20px 22px;
  box-shadow:0 24px 64px rgba(0,0,0,.28); animation:pop .2s cubic-bezier(.2,.9,.3,1.2);
  /* 계정 시트 항목 증가로 세로 넘침(회장 리포트) → 화면 안에 가두고 내부 스크롤 */
  max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sheet-head b{ font-size:17px; }
.acct{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.acct img{ width:48px; height:48px; border-radius:50%; flex:0 0 auto; }
#gbtn{ display:flex; justify-content:center; }
/* 구글 버튼 모서리 각짐 보정 — 260px 컨테이너에 딱 맞춰 라운드로 클립(GSI가 radius 미노출) */
#gbtn > div, .intake-login #gbtn-intake > div{
  border-radius:var(--r-btn); overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05), inset 0 0 0 .5px var(--separator);
}
#authBody a.alt{ display:block; text-align:center; text-decoration:none; box-sizing:border-box; }
#authBody .alt{ width:100%; padding:13px; border-radius:14px; font-size:15px; font-weight:600;
  background:var(--surface); border:.5px solid var(--separator); color:var(--label); }
/* 계정 버튼 = 프로필 사진 */
#account .avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; display:block; }
#account:has(.avatar){ background:transparent; border-color:transparent; box-shadow:none; padding:0; }
/* 학습 진행상황(계정 시트) */
.acct-prog{ margin:2px 0 16px; }
.progwrap{ height:8px; background:var(--fill); border-radius:6px; overflow:hidden; margin-bottom:8px; }
.progfill{ height:100%; background:var(--blue); border-radius:6px; transition:width .4s; }
.progtxt{ font-size:14px; color:var(--secondary); line-height:1.6; }
.progtxt b{ color:var(--label); }
/* 로그인 프롬프트 이유(게이팅) */
.login-reason{ background:var(--blue-tint); color:var(--blue); font-weight:600; padding:11px 13px; border-radius:12px; margin-bottom:14px; font-size:15px; line-height:1.45; }
/* 인테이크 첫 화면 로그인 */
.intake-login{ margin-top:24px; }
.intake-or{ color:var(--secondary); font-size:13px; margin-bottom:12px; }
.intake-login #gbtn-intake{ display:flex; justify-content:center; }

/* ── 단어표 고도화: 검색·저장·내단어·한자검색 ── */
.wsearch{ width:100%; padding:11px 14px; border-radius:12px; border:.5px solid var(--separator);
  background:var(--surface); color:var(--label); font-size:15px; margin-bottom:12px; box-sizing:border-box; }
.wsearch:focus{ outline:none; border-color:var(--blue); }
.wtrow .wsave{ flex:0 0 auto; font-size:20px; background:none; border:0; cursor:pointer; padding:2px 6px;
  color:var(--tertiary); min-height:0; line-height:1; }              /* ☆ 항상 보이게 */
.wtrow .wsave.on{ color:var(--warn); text-shadow:0 0 8px rgba(255,159,10,.35); }  /* ★ 저장됨 = 앰버 */
.wtrow .wsave:active{ transform:scale(.88); }
.word-loginhint{ padding:16px 8px; text-align:center; background:var(--blue-tint); border-radius:12px; margin-top:6px; color:var(--blue); }
/* 채팅 단어 팝업 [🔊 듣기][🔖 저장] */
.wordpop{ position:fixed; z-index:60; display:flex; gap:6px; background:var(--surface); border:.5px solid var(--separator);
  border-radius:12px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.22); animation:pop .15s ease; }
.wordpop.hidden{ display:none; }
.wordpop button{ padding:9px 13px; border-radius:9px; border:0; background:var(--blue-tint); color:var(--blue);
  font-weight:600; font-size:14px; white-space:nowrap; min-height:0; cursor:pointer; }
/* 토스트 */
#toast{ position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(20px); z-index:70;
  background:rgba(0,0,0,.86); color:#fff; padding:11px 18px; border-radius:20px; font-size:14px; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:82%; text-align:center; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
/* 한국어 단어는 한 줄 고정(오빠 등 2글자가 세로로 깨지지 않게), 의미(pron)가 줄바꿈 흡수 */
/* 저장 문장(채팅에서 통째 저장)이 길면: ko가 nowrap으로 발음 열을 짓눌러 카나가 세로 낙하하던
   버그(회장 리포트) → 행을 접게 하고 ko는 어절 단위로 줄바꿈. 짧은 단어는 기존과 동일 렌더 */
.wtrow{ flex-wrap:wrap; }
.wtrow .ko{ min-width:0; flex:0 1 auto; white-space:normal; word-break:keep-all; }
.wtrow .pron{ flex:1 1 10em; min-width:0; }
.wtrow .pron .l1{ white-space:normal; word-break:keep-all; }

/* ── 컴포저 ───────────────────────────────────────── */
#composer{
  padding:9px 14px calc(9px + env(safe-area-inset-bottom)); width:100%; max-width:860px; margin:0 auto;
  background:var(--bar); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--separator);
}
#inputRow{ display:flex; gap:8px; align-items:center; margin-top:8px; }
#msg{
  flex:1; padding:11px 16px; border-radius:21px; border:.5px solid var(--separator);
  font-size:17px; background:var(--surface); color:var(--label); letter-spacing:-.01em;
}
#msg:focus{ outline:none; border-color:var(--blue); }
#mic{ padding:0; width:44px; height:44px; font-size:19px; border-radius:50%; background:var(--fill); }
#mic.rec{ color:#fff; background:var(--no); animation:pulse 1.3s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,59,48,.4) } 50%{ box-shadow:0 0 0 8px rgba(255,59,48,0) } }
.typing{ letter-spacing:3px; color:var(--tertiary); animation:blink 1.2s infinite; }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* ── 답 칸(작문/끌어내기): 질문 칸과 분리 — 질문을 해도 유지된다 ── */
#answerRow{ display:flex; gap:8px; align-items:center; margin-top:8px; }
#answerRow.hidden{ display:none; }
#answerTag{ flex:0 0 auto; font-size:11px; font-weight:700; color:var(--blue);
  background:var(--blue-tint); border-radius:8px; padding:6px 9px; white-space:nowrap; }
#answerBox{ flex:1; min-width:0; padding:11px 16px; border-radius:21px; border:1.5px solid var(--blue);
  font-size:17px; background:var(--surface); color:var(--label); letter-spacing:-.01em; }
#answerBox:focus{ outline:none; box-shadow:0 0 0 3px var(--blue-tint); }
#answerSend{ flex:0 0 auto; padding:0 16px; }
#inputRow #send{ flex:0 0 auto; }
/* 작문 '도전 문장' + 맞춤 단어리스트 */
.chalq{ font-size:13px; color:var(--secondary); margin:11px 0 4px; }
.chalsent{ font-size:18px; font-weight:600; color:var(--label); background:var(--blue-tint);
  border-radius:12px; padding:11px 14px; margin-bottom:9px; text-align:center; letter-spacing:-.01em; }
.wl-h2{ font-size:12px; font-weight:700; color:var(--secondary); margin:8px 0 5px; }

/* ── E: 입력 위계 — 질문 칸은 보조 톤(항상), 답 칸이 주인공 ── */
#inputRow #send{ width:44px; height:44px; min-height:44px; padding:0; border-radius:50%;
  background:var(--fill); color:var(--secondary); box-shadow:none; font-weight:600; }
#inputRow #send:active{ background:var(--separator); transform:scale(.94); }
#msg{ background:var(--fill); border-color:transparent; font-size:16px; }
#msg:focus{ background:var(--surface); border-color:var(--blue); }
#answerRow:not(.hidden){ animation:answerIn .26s cubic-bezier(.2,.9,.3,1.15); }
@keyframes answerIn{ from{ transform:translateY(10px); opacity:0 } to{ transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce){ #answerRow:not(.hidden){ animation:none } }

/* ── 우측 드로어(단어장 + 문법 체크리스트) ───────────── */
.drawer{ position:fixed; inset:0; background:rgba(0,0,0,.32); display:flex; justify-content:flex-end; z-index:9; animation:fade .2s ease; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.drawer-panel{
  background:var(--sheet); backdrop-filter:saturate(180%) blur(30px); -webkit-backdrop-filter:saturate(180%) blur(30px);
  width:min(420px, 92vw); height:100dvh; overflow:auto; padding:0 0 24px;
  box-shadow:-1px 0 0 var(--separator), -20px 0 60px -20px rgba(20,24,45,.35);
  animation:slidein .28s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column;
}
@keyframes slidein{ from{ transform:translateX(40px); opacity:.6 } to{ transform:none; opacity:1 } }
.drawer-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px; padding:12px 14px;
  background:var(--bar); backdrop-filter:saturate(180%) blur(20px); border-bottom:.5px solid var(--separator);
}
.dtabs{ flex:1; min-width:0; display:flex; gap:5px; }
/* 탭: 자연 너비·한 줄·가로 스크롤(6탭이 좁은 모바일에서도 안 깨짐) */
.dtab{ flex:0 0 auto; white-space:nowrap; min-height:34px; padding:6px 11px; font-size:13px; font-weight:600; background:var(--fill); color:var(--secondary); border-radius:10px; }
.dtab.sel{ background:var(--blue-tint); color:var(--blue); }
#drawerBody{ padding:14px 18px; }
.wt-grp h4{ margin:14px 0 6px; color:var(--secondary); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }

/* 문법 체크리스트 */
.lvl-head{ margin:16px 0 6px; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.04em; }
.lvl-head:first-child{ margin-top:2px; }
/* 레벨 아코디언 헤더(클릭해 접기/펼치기) */
.lvlhead{ display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:8px; margin:5px 0 2px;
  background:var(--surface); border:.5px solid var(--separator); border-radius:12px; font-size:15px; color:var(--label); text-align:left; box-shadow:var(--shadow); }
.lvlhead.open{ background:var(--blue-tint); border-color:transparent; box-shadow:none; }
.lvlhead:active{ transform:scale(.99); }
.lvlhead b{ color:var(--blue); font-weight:700; letter-spacing:.03em; }
.lvlhead .chev{ width:16px; text-align:center; color:var(--secondary); font-size:14px; }
.lvlhead .lvlcount{ margin-left:auto; color:var(--tertiary); font-size:13px; font-weight:500; }
.gitem{
  display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:8px 10px; margin:0;
  background:transparent; border:0; border-radius:12px; text-align:left; font-size:15px; color:var(--label);
}
.gitem:active{ background:var(--fill); transform:none; }
.gitem.clickable{ cursor:pointer; }
.gitem.locked{ opacity:.5; }
.gitem .gstat{ width:22px; text-align:center; flex:0 0 auto; font-size:15px; }
.gitem .gname{ flex:1; min-width:0; line-height:1.35; }
.gitem.passed .gstat{ color:var(--ok); font-weight:800; }     /* 배운 문법 = 초록 체크 */
.gitem.current .gstat{ color:var(--blue); }                    /* 지금 배우는 중 = 파랑 화살표 */
.gitem.learning .gstat{ color:var(--warn); }                   /* 배우다 만 것 = 주황 반달 */
.gitem.passed .gname{ color:var(--secondary); }
.gitem.current{ background:var(--blue-tint); }
.gitem.current .gname{ color:var(--blue); font-weight:600; }
#starCurrent.starred-on{ color:var(--warn); }
.gfilter{ width:100%; min-height:38px; margin-bottom:8px; font-size:14px; font-weight:600; background:var(--fill); color:var(--secondary); border-radius:11px; }
.gfilter.on{ background:rgba(255,159,10,.15); color:var(--warn); }
.gstar{ flex:0 0 auto; width:44px; height:44px; padding:0; font-size:19px; background:transparent; color:var(--secondary); border-radius:50%; }
.gstar.on{ color:var(--warn); }
.gstar:active{ background:var(--fill); }
.gitem.clickable:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; border-radius:12px; }
/* 복습 메시지: 진행 중 수업과 구분(좌측 틴트 보더) */
.msg.review{ border-left:3px solid var(--blue); background:var(--blue-tint); }
.msg.review .steptag{ color:var(--blue); }
/* 복습 배너: 지금 어느 문법 문맥인지 + 작문 연습/종료 */
.rev-banner{ display:flex; flex-direction:column; gap:10px; }
.rev-badge{ font-size:13px; font-weight:700; color:var(--blue); }
.rev-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.rev-do{ background:var(--blue); color:#fff; font-weight:600; font-size:14px; min-height:38px; padding:8px 14px; border-radius:11px; }
.rev-do:active{ background:var(--blue-press); }
.rev-x{ background:var(--surface); color:var(--secondary); font-size:14px; min-height:38px; padding:8px 14px;
  border-radius:11px; border:.5px solid var(--separator); }
.culnote{
  background:rgba(255,159,10,.12); border-left:3px solid var(--warn); padding:9px 12px; margin:0 0 8px;
  border-radius:10px; font-size:14px; line-height:1.5; color:var(--label);
}

/* ── 반응형: 폰=세로 전체화면 · 데스크탑=중앙 와이드 컬럼(가로로 넓게) ──
   기기 프레임 강제 없음. 모든 화면이 viewport 높이를 채우고, 폭만 컬럼으로 제한. */
#app{ display:contents; }
@media (min-width:760px){
  body{ background:linear-gradient(180deg,#edeff4 0%,#e7e9f1 100%); }
}
@media (min-width:760px) and (prefers-color-scheme:dark){
  body{ background:#0a0a0c; }
}

/* 인테이크 하단 법적 페이지 링크(Paddle 심사 요건: Terms/Privacy/Refund 접근성) */
.legal-links { margin-top: 22px; text-align: center; font-size: 12px; line-height: 1.8; color: #8e8e93; }
.legal-links a { color: #8e8e93; text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }

/* 한일 표현 차이 탭(違い) */
.ct-hint { padding: 8px 6px 12px; }
.ctrow { padding: 10px 6px; border-bottom: 1px solid var(--line, #e5e5ea); }
.ctko { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ctko .ko { font-size: 17px; font-weight: 600; }
.ctja { color: #8e8e93; font-size: 14px; }
.ctnote { margin-top: 4px; font-size: 13px; opacity: .85; }

/* 이어가기 첫 문장 豆知識 */
.mametip { background: linear-gradient(180deg,#fff7e6,#fff); border:1px solid #ffe08a; border-radius:12px; padding:12px 14px; }
@media (prefers-color-scheme:dark){ .mametip{ background:#2a2400; border-color:#5c4d00; } }
.mametip-h { font-size:12px; font-weight:700; color:#a06800; margin-bottom:6px; }
@media (prefers-color-scheme:dark){ .mametip-h{ color:#ffd666; } }
.tip-ctx { color:#0a84ff; font-weight:600; }
.mametip-q { font-size:16px; margin-bottom:4px; }
.mametip-q .ko { font-weight:600; }

/* 早見表 탭(共感·助詞·接続詞) */
.refrow { padding: 8px 6px; border-bottom: 1px solid var(--line,#e5e5ea); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.refrow .ko { font-size: 16px; font-weight: 600; min-width: 84px; }
.refrow .roman { color: #8e8e93; font-size: 12px; }
.refja { color: #1c1c1e; font-size: 14px; }
@media (prefers-color-scheme: dark){ .refja{ color:#e5e5ea; } }

/* 履歴タブ(過去のQ&A) + タブ横スクロール(6タブ対応) */
.dtabs { overflow-x: auto; scrollbar-width: none; }
.dtabs::-webkit-scrollbar { display: none; }
.histbox { max-height: 72vh; overflow-y: auto; padding: 4px 2px; }
.histbox .msg { margin: 6px 0; }

/* 履歴 質問/練習 フィルター */
.hist-filter { display: flex; gap: 6px; padding: 8px 4px 10px; }
.hist-filter .hf { flex: 1; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--line,#d1d1d6); background: transparent; font-size: 13px; font-weight: 600; color: #8e8e93; cursor: pointer; }
.hist-filter .hf.on { background: #0a84ff; border-color: #0a84ff; color: #fff; }

/* ── 레슨 스텝 리디자인 (문법명 1회 + 칩) ── */
.stephead{ display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.lname{ font-weight:700; font-size:14px; color:var(--label); }
.stepchip{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:var(--secondary);
  background:var(--fill); padding:4px 10px; border-radius:999px; letter-spacing:.02em; text-transform:uppercase; }
.stepchip .n{ color:var(--tertiary); font-variant-numeric:tabular-nums; }
/* A: 7단계 진행 도트 — currentColor(칩 타입색)로 완료/현재 표시 */
.stepchip .dots{ display:inline-flex; gap:3px; align-items:center; }
.stepchip .dots i{ width:5px; height:5px; border-radius:50%; background:var(--tertiary); }
.stepchip .dots i.done{ background:currentColor; opacity:.45; }
.stepchip .dots i.cur{ background:currentColor; box-shadow:0 0 0 2px color-mix(in srgb, currentColor 24%, transparent); }
/* A: 비트 타입별 색(라벨+도트를 currentColor로) */
.stepchip.t-pattern{ color:var(--chip-pattern); background:color-mix(in srgb, var(--chip-pattern) 12%, transparent); }
.stepchip.t-meaning{ color:var(--chip-meaning); background:color-mix(in srgb, var(--chip-meaning) 13%, transparent); }
.stepchip.t-elicit{ color:var(--chip-elicit); background:color-mix(in srgb, var(--chip-elicit) 14%, transparent); }
.stepchip.t-demo{ color:var(--chip-demo); background:color-mix(in srgb, var(--chip-demo) 13%, transparent); }
.stepchip.t-map{ color:var(--chip-map); background:color-mix(in srgb, var(--chip-map) 14%, transparent); }
.stepchip.t-trap{ color:var(--chip-trap); background:color-mix(in srgb, var(--chip-trap) 12%, transparent); }
.stepchip.t-compose{ color:var(--chip-compose); background:color-mix(in srgb, var(--chip-compose) 14%, transparent); }
/* 탭 가능한 한국어: 파란 실선 → 은은한 점선(링크 느낌 완화) */
.ko-tts{ border-bottom:1px dotted color-mix(in srgb, var(--blue) 55%, transparent); }
/* D: 탭하면 발음 — 탭 순간 파동 피드백 */
@keyframes ttsTap{ 0%{ background:var(--blue-tint); border-radius:5px; } 100%{ background:transparent; } }
.ko-tts.tts-tap{ animation:ttsTap .55s ease-out; }
/* D: 첫 한국어 코치(1회) — 펄스 + 안내칩 */
@keyframes ttsPulse{ 0%,100%{ background:transparent } 50%{ background:var(--blue-tint) } }
.ko-tts.tts-pulse{ animation:ttsPulse 1.3s ease-in-out 3; border-radius:5px;
  border-bottom-color:var(--blue); }
.tts-coach{ align-self:center; font-size:12.5px; font-weight:600; color:var(--blue);
  background:var(--blue-tint); border-radius:999px; padding:7px 14px; margin:2px 0 4px; animation:pop .25s ease; }
/* 음성 생성 대기(첫 문장은 수 초) — 은은한 깜빡임으로 '준비 중' 전달, 연타 예방 */
@keyframes ttsWait{ 50%{ opacity:.4 } }
.tts-wait{ animation:ttsWait 1s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .ko-tts.tts-tap, .ko-tts.tts-pulse, .tts-wait{ animation:none; } .tts-wait{ opacity:.5; } }

/* ── C: 본문 렌더(★팁·불릿·섹션·헤더) ── */
.fr-p{ margin:3px 0; } .fr-p:first-child{ margin-top:0; } .fr-p:last-child{ margin-bottom:0; }
.fr-sec{ margin:10px 0 3px; font-weight:650; } .fr-sec:first-child{ margin-top:0; }
.fr-hd{ margin:10px 0 4px; font-weight:700; } .fr-hd:first-child{ margin-top:0; }
.fr-li{ position:relative; padding-left:17px; margin:3px 0; }
.fr-li::before{ content:"•"; position:absolute; left:5px; color:var(--blue); font-weight:700; }
.fr-tip{ display:flex; gap:8px; align-items:flex-start; margin:9px 0;
  background:color-mix(in srgb, var(--warn) 12%, transparent); border-radius:10px; padding:8px 12px; }
.fr-tip:last-child{ margin-bottom:0; }
.fr-tip .fr-star{ color:var(--warn); font-weight:800; flex:0 0 auto; }
.msg.me .fr-tip{ background:rgba(255,255,255,.18); }
.msg.me .fr-tip .fr-star{ color:#fff; }
.msg.me .fr-li::before{ color:rgba(255,255,255,.9); }

/* ── B: 패턴 '공식 카드' ── */
.patcard{ background:var(--surface); border:.5px solid var(--separator);
  border-left:4px solid var(--chip-pattern); border-radius:12px; padding:13px 15px; margin-top:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.06); }
.patcard .fr-p{ font-size:14px; color:var(--secondary); }
.patcard .fr-p:first-child{ font-size:18.5px; font-weight:700; letter-spacing:-.015em; line-height:1.35;
  margin-bottom:8px; color:var(--label);
  padding-bottom:8px; border-bottom:.5px dashed var(--separator); }
.patcard .fr-li{ font-size:15px; color:var(--label); margin:4px 0; }
.patcard .fr-li::before{ color:var(--chip-pattern); }
/* 1행이 긴 활용표형 — 볼드는 유지(공식 표시)하되 크기를 낮춰 읽히게 */
.patcard.longform .fr-p:first-child{ font-size:15.5px; line-height:1.55; letter-spacing:0; }

/* ── 주의(함정) 카드 — 뭐가 틀리고(✗빨강) 뭐가 맞는지(✓초록) 한눈에 ── */
.trapcard{ background:color-mix(in srgb, var(--chip-trap) 7%, var(--surface));
  border:.5px solid var(--separator); border-left:4px solid var(--chip-trap);
  border-radius:12px; padding:10px 14px; margin-top:4px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.trap-pair{ padding:5px 0; }
.trap-pair + .trap-pair{ border-top:.5px dashed var(--separator); }
.trow{ display:flex; align-items:baseline; gap:8px; font-size:16px; line-height:1.45; padding:1px 0; }
.trow .tbad, .trapcard .tx{ flex:0 0 auto; color:var(--no); font-weight:800; font-size:13px; }
.trow .tgood, .trapcard .to{ flex:0 0 auto; color:var(--ok); font-weight:800; font-size:13px; }
.trow .tw{ color:var(--secondary); text-decoration-color:color-mix(in srgb,var(--no) 70%,transparent); }
.trow .tr{ color:var(--label); font-weight:600; }
.trow .tann{ font-size:12.5px; color:var(--secondary); font-weight:400; }
.trapcard .tlabel{ font-size:12.5px; color:var(--secondary); margin:3px 0 2px; }
/* 산문형 함정: fmtRich 렌더 그대로 + ×/○만 색 */
.trapcard .fr-p, .trapcard .fr-sec, .trapcard .fr-li{ font-size:15px; }
.trap-ex{ margin-top:7px; }
/* 함정 예문(비문) 라인 — 모범문장과 혼동 금지: ✗+취소선, 흐린 색, TTS 없음 */
.ko-bad{ display:flex; gap:8px; align-items:baseline; }
.ko-bad .tbad{ color:var(--no); font-weight:800; font-size:15px; }
.ko-bad .tw{ color:var(--secondary); text-decoration-color:color-mix(in srgb,var(--no) 70%,transparent); text-decoration-thickness:2px; }

/* 복습 퀴즈 — 지문(일본어 뜻)은 작게, 빈칸 문장은 크게, 보기는 큼직한 탭 타깃 */
.quiz-ja{ font-size:13px; color:var(--secondary); margin-bottom:4px; }
.quiz-body{ font-size:19px; margin-bottom:10px; }
.quiz-opts{ display:flex; flex-direction:column; gap:7px; }
.quiz-op{ padding:11px 14px; border-radius:12px; border:1px solid var(--line,#d1d1d6);
  background:var(--surface); font-size:16px; font-weight:650; text-align:left; cursor:pointer; }
.quiz-op:active{ transform:scale(.985); }
.quiz-op:disabled{ opacity:.55; cursor:default; }
.quiz-op.qok{ border-color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); opacity:1; }
.quiz-op.qng{ border-color:var(--no); background:color-mix(in srgb,var(--no) 12%,transparent); opacity:1; }

/* 지난 문법 복습 아코디언 — 7비트 일괄 덤프가 벽이 되던 문제: 패턴만 펼치고 나머지는 접어둠 */
/* 복습 아코디언 — '눌러서 열 수 있음'이 한눈에: 칩 카드 + 우측 회전 셰브런 + 44px 터치 타깃
   (기존 12.5px 텍스트+작은 ▸는 클릭 가능한 줄인지 알아차리기 어려웠음 — 회장 리포트) */
.rv-acc{ margin:6px 0; border:.5px solid var(--separator); border-radius:12px; overflow:hidden;
  background:var(--surface); }
.rv-acc > summary{ display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px;
  font-size:13.5px; font-weight:700; color:var(--label); cursor:pointer; list-style:none;
  -webkit-tap-highlight-color:transparent; }
.rv-acc > summary::-webkit-details-marker{ display:none; }
.rv-acc > summary::after{ content:"▾"; margin-left:auto; color:var(--blue); font-size:13px;
  transform:rotate(-90deg); transition:transform .18s ease; }
.rv-acc[open]{ border-color:color-mix(in srgb, var(--blue) 36%, var(--separator)); }
.rv-acc[open] > summary{ color:var(--blue); }
.rv-acc[open] > summary::after{ transform:none; }
.rv-acc > summary:active{ background:var(--fill); }
.rv-acc .rv-bd{ padding:0 14px 12px; }
/* 오답 복습 완료 버튼 */
.qz-go.qz-done{ opacity:.55; }

/* 단어장: 지금 배우는 문법의 단어 표시(레슨↔단어장 매칭) */
.wlesson{ font-size:10px; font-weight:800; color:#fff; background:var(--chip-compose);
  border-radius:5px; padding:1px 5px; margin-left:3px; vertical-align:2px; letter-spacing:0; }
.wtrow-lesson{ background:color-mix(in srgb, var(--chip-compose) 7%, transparent);
  border-radius:8px; margin:0 -6px; padding-left:6px; padding-right:6px; }
/* スキップ=세컨더리(파랑은 '次へ/送信'에만) */
#continueBtn.is-skip{ background:transparent; color:var(--secondary); border:1px solid var(--separator); box-shadow:none; }
#continueBtn.is-skip:active{ background:var(--fill); }

/* ── 課金/Pro(페이월·플랜·구독 상태) ───────────────────────── */
/* 페이월 카드: 무료 경계 도달 시 스레드에 렌더 */
.paywall{ text-align:center; padding:18px 16px 8px; }
.pw-title{ font-size:19px; font-weight:700; margin-bottom:6px; }
.pw-body{ color:var(--secondary); font-size:14px; line-height:1.6; margin-bottom:16px; }
.pw-up{ width:100%; margin-bottom:6px; }
.pw-later{ color:var(--secondary); font-size:13px; }

/* 계정 시트 내 구독 섹션 */
.acct-sub{ margin:2px 0 14px; padding:12px; background:var(--fill); border-radius:12px; }
.sub-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sub-badge{ font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--tertiary); color:var(--surface); }
.sub-badge.pro{ background:linear-gradient(135deg,#ffb300,#ff9500); color:#3a2600; }
.sub-line{ font-size:13px; color:var(--secondary); }
.sub-up{ width:100%; margin-top:10px; }
.sub-manage{ display:inline-block; margin-top:10px; font-size:13px; color:var(--blue); text-decoration:none; }
.sub-manage:active{ opacity:.6; }

/* 계정 버튼 Pro 링(아바타 테두리) */
#account.is-pro{ position:relative; }
.pro-ring{ position:absolute; inset:-2px; border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 2px #ff9500; }

/* 결제 시트: 플랜 카드 2종(연/월) */
#paySheetBody .pay-sub{ font-size:13px; color:var(--secondary); line-height:1.6; margin-bottom:16px; }
.plan-cards{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.plan-card{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:14px 16px; border-radius:14px; border:2px solid var(--blue); background:var(--blue-tint);
  cursor:pointer; text-align:left; width:100%; }
.plan-card.alt{ border-color:var(--separator); background:transparent; }
.plan-card:active{ transform:scale(.99); }
.plan-badge{ font-size:12px; font-weight:700; color:var(--blue); }
.plan-card.alt .plan-badge{ color:var(--secondary); }
.plan-price{ font-size:20px; font-weight:800; color:var(--label); }
.plan-per{ font-size:12px; color:var(--ok); font-weight:600; }
.pay-feat{ font-size:13px; color:var(--label); line-height:1.9; margin-bottom:12px; }
.pay-note{ font-size:12px; color:var(--secondary); line-height:1.5; }

/* 새 소식(업데이트 알림) 배너 — 채팅 상단, 1회 노출 후 닫기 */
.whatsnew{ margin:10px 12px 0; padding:12px 14px; border-radius:14px;
  background:linear-gradient(135deg,var(--blue-tint),color-mix(in srgb,var(--chip-compose) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--blue) 22%,transparent); }
.wn-h{ font-weight:700; font-size:13px; margin-bottom:6px; }
.wn-item{ font-size:13px; line-height:1.55; margin:3px 0; color:var(--label); }
.wn-x{ margin-top:9px; font-size:12px; font-weight:600; color:#fff; background:var(--blue);
  border:none; border-radius:999px; padding:5px 14px; cursor:pointer; }
.wn-x:active{ transform:scale(.97); }

/* 스트릭 칩(연속 학습일) — 톱바, 서버 계산값만 표시 */
.streak { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, #ff9500 14%, var(--surface, #f2f2f7));
  color: #c05f00; white-space: nowrap; user-select: none; }
@media (prefers-color-scheme: dark) { .streak { color: #ffb35c; } }

/* 체험 만료 임박 배너(P0-1b) — 정직한 과금 예고 */
.trial-banner { border-left: 3px solid #ff9500; background: color-mix(in srgb, #ff9500 8%, var(--surface, #fff));
  border-radius: 10px; padding: 10px 12px; line-height: 1.55; }
.trial-banner .sub-manage { font-weight: 600; }

/* 복귀 리캡 카드(P0-1c) — 3일+ 공백 후 따뜻한 재시작 */
.recap { border-left: 3px solid #007aff; background: color-mix(in srgb, #007aff 6%, var(--surface, #fff));
  border-radius: 10px; padding: 10px 12px; line-height: 1.6; }
.recap .recap-form { font-size: 12px; opacity: .85; }

/* SEO 브랜드 라인(인테이크 푸터) — 크롤러블 병기 텍스트 */
.legal-links .brand-line { display:block; margin-top:6px; font-size:11px; color:#aeb3bb; }

/* 발음 평가 단어 색칠 — 60미만/오류=빨강, 60~79=주황 */
.pa-w{ font-weight:600; }
.pa-w.pa-bad{ color:var(--no); border-bottom:2px solid var(--no); }
.pa-w.pa-mid{ color:var(--warn); border-bottom:2px dotted var(--warn); }

/* 말하기 유도 퀵초이스 — 시범 뒤 [言ってみる/スキップ] */
.speak-invite{ display:flex; flex-direction:column; gap:8px; }
.speak-invite .si-q{ font-size:13px; color:var(--secondary); }
.speak-invite .si-acts{ display:flex; gap:8px; }
.speak-invite .si-acts button{ min-height:40px; padding:8px 14px; }
.speak-invite .si-go.rec{ background:var(--no); }

/* 줄 끝 전체 듣기 🔊 — 뜻 괄호로 조각난 문장을 이어서 재생 */
.spk-line{ border-bottom:0; font-size:13px; opacity:.75; margin-left:2px; padding:2px 3px; }
.spk-line:active{ opacity:1; }
/* 듣기 속도 칩 — 문장 듣기 옆. 탭마다 1→0.75→0.5→1.25→1.5 순환(전역·영속) */
.tts-rate{ font-size:11px; font-weight:600; color:var(--secondary); background:var(--fill);
  border-radius:10px; padding:2px 8px; min-height:0; margin-left:5px; vertical-align:2px; }

/* 후리가나(발음 루비) — 한국어[カタカナ]를 글자 위 표기로 */
ruby{ ruby-position: over; }
ruby rt{ font-size:10px; color:var(--secondary); letter-spacing:.02em; user-select:none; }
.msg ruby{ line-height:2.1; }   /* 루비 행 겹침 방지 */

/* 단어 메타줄 — 레벨 배지 + 상황 태그 칩(검색·저장 단어) */
.wtrow.has-meta{ border-bottom:0; padding-bottom:3px; }
.wtagline{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding:0 0 9px;
  border-bottom:.5px solid var(--separator); font-size:11px; }
.wtagline:last-child{ border-bottom:0; }
.wtagline i{ font-style:normal; background:var(--fill); color:var(--secondary); border-radius:6px; padding:1.5px 7px; }
.wtagline .wlv{ font-weight:700; color:var(--blue); background:var(--blue-tint); }

/* 인앱 브라우저(카톡·라인 등) 구글 로그인 불가 안내 */
.inapp-warn { background:#fff7e6; border:1px solid #f0d9a8; border-radius:10px;
  padding:10px 12px; font-size:13px; line-height:1.55; color:#6b5518; text-align:left; }

/* 빌드 번호 — 원격 지원용(어느 버전을 보고 있는지 눈으로 확인) */
.build-tag{ font-size:11px; color:var(--tertiary); text-align:center; padding:8px 0 2px; letter-spacing:.5px; }

/* ── 레벨 진단 — 한 문항 한 화면, 손가락 크기 선지 ── */
/* 중도학습자 진입 카드 — 파인프린트에 묻히던 텍스트 링크를 보조 CTA로 격상(회장 리포트) */
.diag-link{ display:block; width:100%; margin:16px auto 0; background:var(--card, #fff);
  border:1.5px solid var(--blue); border-radius:14px; color:var(--blue);
  cursor:pointer; padding:13px 16px; text-align:center; }
.diag-link b{ display:block; font-size:15px; font-weight:700; }
.diag-link span{ display:block; margin-top:2px; font-size:13px; opacity:.85; }
.diag-body{ flex:1; overflow-y:auto; padding:18px 16px 40px; -webkit-overflow-scrolling:touch; }
.diag-card{ max-width:520px; margin:0 auto; }
.diag-card h1{ font-size:22px; margin:6px 0 8px; }
.diag-card .sub{ color:var(--secondary); font-size:14px; line-height:1.6; margin-bottom:14px; }
.diag-count{ font-size:12px; color:var(--secondary); min-width:38px; text-align:right; }
.diag-inst{ font-size:13px; color:var(--secondary); margin:4px 0 10px; }
.diag-q{ font-size:17px; line-height:1.7; margin:6px 0 14px; white-space:pre-wrap; }
.diag-play{ margin:0 0 12px; }
.diag-choices button{ text-align:left; line-height:1.5; }
.diag-choices button.sel{ border-color:var(--blue); }
/* 배열: 조립 슬롯(위) + 타일(아래). 쓴 타일은 흐리게 남겨 '어디서 왔는지' 보이게 */
.diag-slots{ min-height:44px; border:1.5px dashed var(--separator); border-radius:12px;
  padding:8px; display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.diag-tiles{ display:flex; flex-wrap:wrap; gap:6px; }
.diag-tile{ background:var(--fill); border:.5px solid var(--separator); border-radius:10px;
  padding:9px 12px; font-size:16px; cursor:pointer; }
.diag-tile.in{ background:var(--blue-tint); border-color:var(--blue); }
.diag-tile.sel{ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); }
.diag-tile.used{ opacity:.25; pointer-events:none; }
.diag-acts{ display:flex; gap:8px; margin-top:14px; align-items:center; }
.diag-acts.col{ flex-direction:column; align-items:stretch; }
.diag-fb{ max-width:520px; margin:14px auto 0; border-radius:14px; padding:12px 14px; font-size:15px; }
/* 피드백의 「次へ」 — 데스크톱 와이드에서 화면 왼끝으로 흐르던 문제: 카드 폭에 묶고 오른쪽 정렬 */
#diagFb .diag-acts{ max-width:520px; margin:12px auto 0; justify-content:flex-end; }
.diag-fb.ok{ background:rgba(52,199,89,.12); }
.diag-fb.bad{ background:rgba(255,59,48,.10); }
.diag-ans{ font-size:14px; }
.diag-exp{ font-size:13px; color:var(--secondary); margin-top:6px; line-height:1.6; }
/* 결과·게이트 막대 */
.diag-bars{ display:flex; flex-direction:column; gap:12px; margin:16px 0; }
.diag-bar{ display:grid; grid-template-columns:7.5em 1fr 4em; gap:10px; align-items:center; font-size:14px; }
.diag-bar .bar{ height:14px; border-radius:7px; background:var(--fill); overflow:hidden; position:relative; }
.diag-bar .bar .fill{ height:100%; border-radius:7px; background:var(--blue); transition:width .6s ease; }
/* 게이트: 값이 든 것처럼 보이는 그라데이션(측정 완료·잠김) — 숫자는 로그인 뒤에만 */
.diag-bar .bar.locked{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg, var(--blue-tint) 0%, var(--fill) 85%); }
.diag-bar .bar.locked i{ font-style:normal; font-size:11px; }
.diag-bar em{ font-style:normal; text-align:right; color:var(--secondary); font-size:13px; }
.diag-entry{ border:.5px solid var(--separator); border-radius:14px; padding:12px 14px; margin:8px 0 4px; }
.diag-entry > span{ display:block; font-size:12px; color:var(--secondary); margin-bottom:4px; }
.diag-entry b{ font-size:17px; }
.diag-gbtn{ display:flex; justify-content:center; margin-top:16px; }
/* 계정 시트 '레벨 진단' 섹션 + 기록(성장 데이터) */
.acct-diag{ border-top:.5px solid var(--separator); margin-top:12px; padding-top:10px; }
.acct-diag-head{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:14px; font-weight:600; }
.acct-diag-head > span{ flex:0 0 auto; white-space:nowrap; }   /* 「レベル診断」이 診/断 사이에서 끊기던 문제 */
/* 시트의 .alt는 세로 버튼용이라 width:100% — 이 한 줄짜리 행에서는 내용 폭으로 되돌린다 */
.acct-diag-head button{ font-size:12px; padding:6px 12px; width:auto; flex:0 1 auto; white-space:nowrap; }
.diag-hist{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.diag-hist-row{ display:flex; gap:12px; font-size:12.5px; color:var(--secondary); padding:4px 0;
  border-bottom:.5px solid var(--separator); }
.diag-hist-row:last-child{ border-bottom:0; }
.diag-hist-row b{ color:var(--label); font-weight:600; }
.dh-date{ min-width:5.6em; color:var(--tertiary); }
.dh-empty{ font-size:12px; margin-top:8px; }

/* 발음 점수 '점수 보는 법' — 기본은 접힘. 숫자의 뜻을 몰라 방치되지 않게 손 닿는 곳에 둔다 */
.pa-detail{ margin-top:8px; border-top:.5px solid var(--separator); padding-top:6px; }
.pa-detail > summary{ font-size:12px; color:var(--blue); cursor:pointer; list-style:none;
  padding:7px 0; user-select:none; }        /* 손가락 탭 영역 확보(12px 글자라 패딩으로 벌린다) */
.pa-detail > summary::-webkit-details-marker{ display:none; }
.pa-detail > summary::before{ content:"▸ "; }
.pa-detail[open] > summary::before{ content:"▾ "; }
/* 항목명을 설명 위에 쌓는다 — 좌우 2열은 언어마다 라벨 길이가 달라(일/한/영) 들쭉날쭉해진다 */
.pa-row{ padding:6px 0; border-bottom:.5px solid var(--separator); font-size:12px; line-height:1.5; }
.pa-row:last-of-type{ border-bottom:0; }
.pa-row b{ display:block; font-size:12px; }
.pa-row b::first-letter{ text-transform:uppercase; }   /* 영어 라벨(accuracy…)만 대문자로 — CJK엔 무영향 */
.pa-row span{ color:var(--secondary); }
.pa-legend{ font-size:11px; color:var(--secondary); padding:6px 0 2px; line-height:1.5; }
.pa-why{ margin-top:6px; font-size:13px; line-height:1.6; }
.pa-why b{ color:var(--no); }
.pa-why .ko{ font-size:inherit; }   /* .ko의 큰 한국어 활자 크기를 본문에 맞춤(감점 줄은 요약이라 작게) */
.pa-tip{ margin-top:4px; font-size:13px; line-height:1.6; }
.pa-tip .ko{ font-size:inherit; color:var(--no); }
.pa-noisy{ margin-top:4px; font-size:12px; color:var(--secondary); }
.pa-sylhead{ margin-top:8px; font-size:12px; font-weight:700; }
.pa-sylrow{ font-size:12px; color:var(--secondary); padding:3px 0; }

/* ── 랜딩(#lp) — 신규 방문자 전용. 목표: 실제 화면·정직한 숫자로 '쓰는 내 모습'이 그려지게 ── */
.lp-cue{ position:absolute; left:50%; transform:translateX(-50%); bottom:12px; z-index:2;
  display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
  background:color-mix(in srgb,var(--surface) 72%, transparent); border:.5px solid var(--separator);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--secondary); font-size:12.5px; font-weight:600; cursor:pointer; }
.lp-cue-v{ display:inline-block; animation:lpCue 1.6s ease-in-out infinite; color:var(--blue); }
@keyframes lpCue{ 50%{ transform:translateY(4px); } }

#lp{ position:relative; z-index:1; }
/* 랜딩 전체의 배경 한글 — 첫 화면(hero-deco)과 같은 문법. 섹션 콘텐츠는 z-index로 위에 */
.lp-deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.lp-deco span{ position:absolute; font-weight:800; color:var(--blue); opacity:.05;
  line-height:1; letter-spacing:-.05em; }
.lp-deco span:nth-child(1){ top:4%; right:-3%; font-size:clamp(120px,22vw,230px); }
.lp-deco span:nth-child(2){ top:30%; left:-4%; font-size:clamp(140px,26vw,270px); }
.lp-deco span:nth-child(3){ top:63%; right:-2%; font-size:clamp(110px,20vw,210px); }
.lp-deco span:nth-child(4){ top:88%; left:-3%; font-size:clamp(130px,24vw,250px); }
/* 문서 제목(h1). 스크롤 서사의 첫 훅(.lp-h)이 시각적 주인공이어야 하므로 브랜드 라벨 크기로.
   숨기지 않는다 — 시각적으로 감춘 제목은 색인에서 가중치가 깎인다. */
.lp-eyebrow{ position:relative; z-index:1; max-width:640px; margin:0 auto; padding:52px 22px 0;
  text-align:center; font-size:13.5px; font-weight:600; line-height:1.6; letter-spacing:.01em;
  color:var(--secondary); word-break:auto-phrase; }
.lp-sec{ position:relative; max-width:960px; margin:0 auto; padding:72px 22px; }
.lp-eyebrow + .lp-sec{ padding-top:40px; }   /* 제목 아래 훅까지의 간격 보정 */
.lp-h{ font-size:clamp(26px,5.4vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.22;
  margin:0 0 14px; text-align:center; word-break:auto-phrase; }
.lp-sub{ text-align:center; color:var(--secondary); font-size:15.5px; line-height:1.7; max-width:560px;
  margin:0 auto 34px; word-break:auto-phrase; }

/* 공감 카드 */
.lp-pains{ display:grid; gap:12px; grid-template-columns:1fr; max-width:640px; margin:26px auto 0; }
.lp-pain{ background:var(--surface); border:.5px solid var(--separator); border-radius:18px;
  padding:18px 20px; font-size:14.5px; color:var(--secondary); line-height:1.65; word-break:auto-phrase; }
.lp-pain b{ display:block; color:var(--label); font-size:15.5px; margin-bottom:4px; }
@media (min-width:760px){ .lp-pains{ grid-template-columns:1fr 1fr 1fr; max-width:none; } }

/* 실제 화면 지그재그 */
.lp-row{ display:flex; flex-direction:column; align-items:center; gap:22px; margin:44px 0; }
.lp-shot{ margin:0; padding:12px; background:var(--surface); border:.5px solid var(--separator);
  border-radius:26px; box-shadow:0 18px 44px -18px color-mix(in srgb,var(--blue) 34%, transparent); }
.lp-shot img{ display:block; max-width:min(330px,78vw); height:auto; border-radius:16px; }
.lp-copy{ max-width:420px; text-align:center; }
.lp-copy h3{ font-size:20px; font-weight:750; letter-spacing:-.02em; margin:0 0 8px; }
.lp-copy p{ margin:0; color:var(--secondary); font-size:14.5px; line-height:1.75; word-break:auto-phrase; }
/* 화면 4장 사이 구분선(회장 지시: 어느 이미지의 설명인지 경계가 안 보임) */
.lp-row + .lp-row{ border-top:.5px solid var(--separator); margin-top:0; padding-top:44px; }
@media (min-width:760px){
  .lp-row{ flex-direction:row; justify-content:center; gap:52px; margin:64px 0; }
  .lp-row:nth-child(odd){ flex-direction:row-reverse; }   /* h2 다음부터 지그재그 */
  .lp-row + .lp-row{ margin-top:0; padding-top:64px; }
  .lp-copy{ text-align:left; }
}

/* 숫자 — 원색 대면적은 배너 광고 문법(회장 지적: 촌스럽다). 브랜드색은 면이 아니라
   숫자 그 자체에만 정확히 조금 쓴다: 옅은 틴트 배경 + 블루 숫자 + 헤어라인. */
.lp-numsec{ max-width:none; position:relative; overflow:hidden;
  background:color-mix(in srgb, var(--blue) 5%, var(--surface)); }
.lp-num-deco span{ position:absolute; font-weight:800; color:var(--blue); opacity:.045;
  line-height:1; letter-spacing:-.05em; pointer-events:none; }
.lp-num-deco span:first-child{ top:-44px; left:-16px; font-size:clamp(150px,22vw,260px); }
.lp-num-deco span:last-child{ bottom:-70px; right:-12px; font-size:clamp(180px,26vw,310px); }
.lp-nums{ position:relative; display:grid; grid-template-columns:1fr 1fr; max-width:940px; margin:34px auto 0; }
.lp-num{ text-align:center; color:var(--secondary); font-size:13.5px; line-height:1.55;
  padding:30px 16px; word-break:auto-phrase; }
.lp-num b{ display:block; color:var(--blue); font-size:clamp(40px,7.5vw,58px); font-weight:800;
  letter-spacing:-.035em; line-height:1.05; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.lp-num b small{ font-size:.36em; font-weight:700; margin-left:3px; letter-spacing:0; color:var(--label); }
.lp-num:nth-child(odd){ border-right:.5px solid var(--separator); }
.lp-num:nth-child(-n+2){ border-bottom:.5px solid var(--separator); }
/* 문법 허브 링크 — 숫자(306)의 근거를 열어 보이는 자리. */
.lp-num-more{ position:relative; text-align:center; margin:26px 0 0; font-size:14.5px; font-weight:600; }
.lp-num-more a{ color:var(--blue); text-decoration:none; }
.lp-num-more a:hover{ text-decoration:underline; }
@media (min-width:760px){
  .lp-nums{ grid-template-columns:repeat(4,1fr); }
  .lp-num:nth-child(odd){ border-right:0; }
  .lp-num:nth-child(-n+2){ border-bottom:0; }
  .lp-num:not(:last-child){ border-right:.5px solid var(--separator); }
}

/* 차별화 — 그들/우리 한 쌍씩 */
.lp-diffs{ display:flex; flex-direction:column; gap:12px; max-width:640px; margin:30px auto 0; }
.lp-diff{ background:var(--surface); border:.5px solid var(--separator); border-radius:18px; overflow:hidden; }
.lp-diff span{ display:block; padding:14px 18px; font-size:14.5px; line-height:1.6; word-break:auto-phrase; }
.lp-them{ color:var(--secondary); }
.lp-them::before{ content:"✕ "; color:var(--no); font-weight:800; }
.lp-us{ border-top:.5px solid var(--separator); color:var(--label); font-weight:600;
  background:color-mix(in srgb,var(--blue) 6%, transparent); }
.lp-us::before{ content:"✓ "; color:var(--blue); font-weight:800; }

/* FAQ */
.lp-faqsec{ max-width:640px; }
.lp-faq{ background:var(--surface); border:.5px solid var(--separator); border-radius:16px;
  margin-top:10px; padding:0 18px; }
.lp-faq summary{ cursor:pointer; list-style:none; padding:15px 0; font-size:15px; font-weight:650; }
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary::before{ content:"▸ "; color:var(--blue); }
.lp-faq[open] summary::before{ content:"▾ "; }
.lp-faq p{ margin:0 0 15px; color:var(--secondary); font-size:14px; line-height:1.7; word-break:auto-phrase; }

/* 최종 CTA */
.lp-last{ text-align:center; padding-bottom:96px; }
.lp-last .mascot{ display:block; width:96px; height:96px; margin:0 auto 6px; }
.lp-ctas{ display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:22px; }
.lp-ctas .primary{ width:min(320px,86vw); padding:15px; font-size:16.5px; }
.lp-ctas .alt{ width:min(320px,86vw); padding:13px; font-size:14px; border-radius:14px;
  background:var(--surface); border:.5px solid var(--separator); color:var(--blue); font-weight:600; }

/* 랜딩 맨 하단 법적 링크 — 첫 화면(폴드)에서 옮겨옴(첫인상 정리) */
.lp-foot{ padding:0 22px calc(30px + env(safe-area-inset-bottom)); }

/* 스크롤 페이드인 — 로드 직후에는 숨김, 보이면 .in */
/* 복습·진단 소구 — pain 카드와 같은 문법(면은 조용히, 제목만 잉크) */
.lp-mores{ display:grid; gap:12px; grid-template-columns:1fr; max-width:640px; margin:26px auto 0; }
.lp-more{ background:var(--surface); border:.5px solid var(--separator); border-radius:18px;
  padding:20px 18px; font-size:14px; line-height:1.75; color:var(--secondary); text-align:left; }
.lp-more b{ display:block; color:var(--label); font-size:15.5px; margin-bottom:4px; }
/* 실화면은 카드 상단 풀블리드(액자 속 액자 제거) + 하단은 카드 면으로 디졸브 */
.lp-more-shot{ margin:-20px -18px 16px; border-radius:17.5px 17.5px 0 0; overflow:hidden;
  background:var(--bg); position:relative; }
.lp-more-shot img{ display:block; width:100%; height:auto; }
.lp-more-shot::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:64px;   /* 30→64px — 문장이 '뚝 잘림'으로 안 읽히게(회장 개선지시 ⑪) */
  background:linear-gradient(to bottom, transparent, var(--surface)); pointer-events:none; }
.nb{ white-space:nowrap; }

/* 우상단 로그인 — 재방문자를 온보딩(初めての方へ)과 첫눈에 분리 */
.fold-top{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; justify-content:flex-end;
  align-items:center; gap:10px; padding:10px 16px; pointer-events:none; }
/* 구절 단위 줄바꿈(일본어 어중 절단 방지 — 「ずっ/と」류) */
.nbp{ display:inline-block; }
/* ── 한글 2.0 — 듣기 타일·듣기 드릴·미니 퀴즈·발음 체크(입구 강화, 회장 지시) ── */
.hgrow{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:.5px solid var(--separator); }
.hgrow:last-child{ border-bottom:0; }
.hgtap{ flex:0 0 auto; min-width:64px; min-height:64px; padding:8px 10px 6px; border-radius:14px;
  background:var(--blue-tint); color:var(--blue); border:0; cursor:pointer; font-size:29px; font-weight:700;
  line-height:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.hgtap .ic{ width:13px; height:13px; opacity:.65; }
.hgbody{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; line-height:1.55; }
.hgread{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.hgkana{ font-size:16px; color:var(--label); }
.hgex{ cursor:pointer; }
.hgformula{ font-size:12.5px; color:var(--secondary); background:var(--fill); padding:2px 8px; border-radius:8px; white-space:nowrap; }
.hgblock .hg-title{ font-weight:800; font-size:14.5px; margin-bottom:4px; color:var(--label); }
.hg-opts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.hd-opt{ min-height:48px; min-width:62px; padding:8px 16px; border-radius:12px; font-size:20px; font-weight:700;
  background:var(--surface); border:.5px solid var(--separator); cursor:pointer; color:var(--label); }
.hd-opt.hg-right{ background:var(--blue-tint); border-color:var(--blue); color:var(--blue); }
.hd-opt.hg-wrong{ opacity:.55; text-decoration:line-through; }
.hd-play{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 14px; border-radius:999px;
  background:var(--surface); border:.5px solid var(--separator); color:var(--blue); font-weight:700; cursor:pointer; font-size:14px; }
.hd-item{ padding:12px 0 4px; border-top:.5px dashed var(--separator); margin-top:10px; }
.hd-item:first-of-type{ border-top:0; margin-top:2px; }
.hg-fb{ margin-top:8px; font-size:14px; }
.hg-ok{ color:var(--blue); }
.hg-no{ color:var(--secondary); }
.hg-score{ margin-top:12px; font-weight:800; color:var(--blue); }
.hg-tip{ margin-top:10px; font-size:13px; color:var(--secondary); background:var(--fill); border-radius:10px; padding:9px 12px; line-height:1.65; }
.hq-word{ font-size:26px; margin:2px 0; }
.hp-word{ font-size:23px; margin:2px 0 4px; }
.hp-mic{ margin-top:10px; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 18px;
  border-radius:999px; background:var(--blue); color:#fff; border:0; font-weight:700; font-size:14.5px; cursor:pointer; }
.hp-mic:disabled{ opacity:.6; }
.hp-res{ margin-top:10px; }

/* 문의 폼 — 카테고리 토글 + 자유기재 */
.inq-cats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.inq-cat{ min-height:38px; padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:var(--fill); color:var(--secondary); border:.5px solid transparent; cursor:pointer; }
.inq-cat.sel{ background:var(--blue-tint); color:var(--blue); border-color:var(--blue); }
.inq-ta{ width:100%; min-height:120px; box-sizing:border-box; padding:12px; border-radius:12px;
  border:.5px solid var(--separator); background:var(--bg); color:var(--label); font-size:15px;
  line-height:1.6; resize:vertical; margin-bottom:10px; }
.inq-mail{ width:100%; box-sizing:border-box; padding:11px 12px; border-radius:12px; margin-bottom:10px;
  border:.5px solid var(--separator); background:var(--bg); color:var(--label); font-size:14px; }
#inqSheet .primary{ width:100%; padding:13px; border-radius:14px; font-size:15px; font-weight:700; }
/* 접수함(관리자) */
.inq-row{ padding:12px 0; border-bottom:.5px solid var(--separator); }
.inq-row.done{ opacity:.55; }
.inq-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; color:var(--secondary); margin-bottom:4px; }
.inq-meta b{ color:var(--blue); }
.inq-body{ font-size:14px; line-height:1.6; color:var(--label); white-space:pre-wrap; margin-bottom:8px; }
.inq-st{ font-size:13px; padding:8px 12px; border-radius:10px; background:var(--fill); border:0; cursor:pointer; color:var(--secondary); }

/* 홈 화면 추가 — 브라우저별 단계 안내 */
.a2hs-steps{ list-style:none; margin:14px 0 4px; padding:0; text-align:left;
  display:flex; flex-direction:column; gap:10px; }
.a2hs-steps li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.55; color:var(--label); }
.a2hs-n{ flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--blue-tint); color:var(--blue);
  font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }

/* 진단 이력 접기 토글 */
.dh-more{ display:block; margin-top:6px; padding:6px 0; background:none; border:0; cursor:pointer;
  color:var(--blue); font-size:13px; font-weight:600; }

/* ── 첫 사용자 기능 투어(코치마크) — 스포트라이트+민쌤 말풍선 ── */
#tourOv{ position:fixed; inset:0; z-index:70; }
.tour-spot{ position:absolute; border-radius:14px; box-shadow:0 0 0 9999px rgba(15,20,40,.5);
  border:2px solid var(--blue); transition:all .3s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.tour-bubble{ position:absolute; background:var(--surface); border-radius:18px; padding:16px;
  box-shadow:0 12px 40px rgba(20,24,45,.28); display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.tour-ava{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--blue); flex:0 0 auto; }
.tour-txt{ flex:1; min-width:0; font-size:14.5px; line-height:1.65; color:var(--label); }
.tour-row{ width:100%; display:flex; align-items:center; gap:10px; }
.tour-n{ flex:1; font-size:12px; color:var(--tertiary); font-variant-numeric:tabular-nums; }
.tour-skip{ background:none; border:none; color:var(--secondary); font-size:13px; cursor:pointer; padding:8px 4px; }
.tour-ok{ min-height:38px; padding:8px 20px; border-radius:999px; background:var(--blue); color:#fff;
  border:0; font-weight:700; font-size:14px; cursor:pointer; }
/* 사용법 가이드 시트 */
.help-panel{ max-height:82dvh; display:flex; flex-direction:column; }
.help-body{ overflow-y:auto; min-height:0; }
.help-row{ padding:10px 0; border-bottom:.5px solid var(--separator); font-size:14px; line-height:1.6; }
.help-row:last-of-type{ border-bottom:0; }
.help-row b{ display:block; color:var(--label); margin-bottom:2px; }
.help-row span{ color:var(--secondary); }

/* 연납 할인 배지 + 비교가 취소선 */
.lp-plan-price s{ color:var(--tertiary); font-weight:400; }
.lp-plan-price small b{ color:var(--label); font-weight:700; }
.lp-off{ display:inline-block; margin:0 2px; padding:2px 8px; border-radius:999px;
  background:var(--blue-tint); color:var(--blue); font-size:11.5px; font-weight:700; white-space:nowrap; }
.fold-top>*{ pointer-events:auto; }
.fold-top-hint{ font-size:12px; color:var(--secondary); }
.fold-login{ min-height:38px; padding:8px 20px; border-radius:999px; background:var(--surface);
  color:var(--blue); font-weight:700; font-size:14px; border:.5px solid var(--separator);
  box-shadow:0 2px 12px rgba(20,24,45,.10); cursor:pointer; }
@media (max-width:400px){ .fold-top-hint{ display:none; } }
/* 온보딩 큰 타이틀의 눈썹 라벨 「初めての方へ」 */
.q-eyebrow{ display:block; font-size:13px; font-weight:700; color:var(--blue); letter-spacing:.02em; margin-bottom:4px; }
.lp-more-go{ display:block; margin-top:8px; padding:0; background:none; border:none;
  color:var(--blue); font-weight:700; font-size:14px; cursor:pointer; }
@media (min-width:760px){ .lp-mores{ grid-template-columns:1fr 1fr; max-width:760px; } }

/* 실체험 — 실제 TTS·STT. 카드 하나에 문장+두 버튼, 결과는 카드 안에서 갱신 */
.lp-trysec{ text-align:center; }
.lp-try{ max-width:520px; margin:28px auto 0; background:var(--surface);
  border:.5px solid var(--separator); border-radius:22px; padding:30px 22px 18px; }
/* 실제 수업과 같은 말풍선+아바타 — 체험이라는 게 한눈에 읽히게(회장 지시) */
.lp-try-row{ display:flex; gap:10px; align-items:flex-start; justify-content:center; text-align:left; }
.lp-try-ava{ flex:0 0 36px; width:36px; height:36px; margin-top:2px;
  background:url("mascot.webp?v=1") center/contain no-repeat; }
.lp-try-bubble{ background:var(--bubble); color:var(--bubble-ink); border-radius:var(--r-bubble);
  border-bottom-left-radius:7px; padding:13px 16px; }
.lp-try-lead{ font-size:13.5px; color:var(--secondary); }
.lp-try-ko{ margin-top:4px; font-size:clamp(21px,5.2vw,26px); font-weight:800; letter-spacing:-.02em; line-height:1.35; }
.lp-try-ja{ margin-top:7px; font-size:13px; color:var(--secondary); }
/* 버튼 배치 — 안내 말풍선(약 41px)이 들어갈 자리를 폭에 따라 '결정적으로' 확보한다.
   flex-wrap에 맡기면 좁은 화면에서 마이크가 2행으로 내려가 말풍선이 윗 버튼을 덮었다. */
.lp-try-btns{ display:flex; flex-direction:column; align-items:center; gap:56px;   /* 세로 간격 56px = 말풍선(약 30px)+꼬리 여백 */
  margin-top:18px; }
@media (min-width:560px){                      /* 한 줄에 두 버튼이 확실히 들어가는 폭부터 가로 배치 */
  .lp-try-btns{ flex-direction:row; justify-content:center; gap:10px; padding-top:40px; }
}
/* 「눌러보세요」 말풍선 — 마이크 버튼을 가리키는 꼬리 + 은은한 반동. 색은 불투명 틴트(꼬리 이음새 방지) */
.lp-mic-wrap{ position:relative; display:inline-block; }
.lp-try-cue{ position:absolute; left:50%; bottom:100%; margin-bottom:11px; transform:translateX(-50%);
  white-space:nowrap; background:color-mix(in srgb, var(--blue) 11%, var(--surface)); color:var(--blue);
  font-size:12.5px; font-weight:700; line-height:1.25; padding:7px 13px; border-radius:999px;
  animation:lp-bob 1.9s ease-in-out infinite; }
.lp-try-cue::after{ content:""; position:absolute; left:50%; bottom:-4px; width:10px; height:10px;
  margin-left:-5px; background:color-mix(in srgb, var(--blue) 11%, var(--surface));
  border-radius:2px; transform:rotate(45deg); }
@keyframes lp-bob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-4px); } }
@media (prefers-reduced-motion:reduce){ .lp-try-cue{ animation:none; } }
.lp-try-btn{ border:none; cursor:pointer; border-radius:999px; padding:12px 20px;
  font-size:14.5px; font-weight:700; background:var(--fill); color:var(--label); }
.lp-try-btn:disabled{ opacity:.45; cursor:default; }
.lp-try-mic{ background:var(--blue); color:#fff; }
.lp-try-mic small{ display:block; font-size:11px; font-weight:600; opacity:.85; }
.lp-try-res{ margin-top:16px; padding:14px 16px; border-radius:14px; background:var(--fill);
  font-size:14px; line-height:1.8; color:var(--label); text-align:left; }
.lp-try-res .kq{ font-weight:700; }
.lp-try-res{ font-size:15px; }   /* 본 서비스 채점 카드(paResultHtml)를 그대로 담는다 — 수업 말풍선과 같은 본문 크기 */
.lp-pa-fb{ margin-top:10px; font-size:13.5px; color:var(--secondary); }
.lp-grading{ font-size:14px; color:var(--secondary); }
.lp-spin{ display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px;
  border:2px solid var(--separator); border-top-color:var(--blue); border-radius:50%;
  animation:lp-rot .8s linear infinite; }
@keyframes lp-rot{ to{ transform:rotate(360deg); } }
.lp-try-note{ margin-top:12px; font-size:11.5px; color:var(--tertiary); }
/* 말하기 팝업 — TTS가 끝나면 뜨고, 8초 카운트다운 동안 녹음 */
#lpRecPop, .lp-recpop{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
#lpRecPop.hidden, .lp-recpop.hidden{ display:none; }
.lp-pop-card{ width:min(88vw,340px); background:var(--surface); border-radius:24px; padding:28px 22px;
  text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.25); }
.lp-pop-t{ font-size:19px; font-weight:800; color:var(--label); }
.lp-pop-ko{ margin-top:10px; font-size:17px; font-weight:700; color:var(--blue); }
.lp-pop-dot{ width:14px; height:14px; border-radius:50%; background:#ff3b30; margin:18px auto 6px;
  animation:lp-pulse 1s ease-in-out infinite; }
@keyframes lp-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.35); opacity:.55; } }
.lp-pop-n{ font-size:30px; font-weight:800; color:var(--label); font-variant-numeric:tabular-nums; }
.lp-pop-stop{ margin-top:16px; border:none; cursor:pointer; border-radius:999px; padding:12px 26px;
  font-size:15px; font-weight:700; background:var(--blue); color:#fff; }
.lp-pop-hint{ margin-top:10px; font-size:12px; color:var(--secondary); }

/* 요금 — 카드 2장. 원색은 Pro 가격 숫자에만(면적 금지 원칙), 구분은 헤어라인 */
.lp-plans{ display:grid; gap:12px; grid-template-columns:1fr; max-width:760px; margin:26px auto 0; }
.lp-plan{ background:var(--surface); border:.5px solid var(--separator); border-radius:18px;
  padding:22px 20px; text-align:left; font-size:14px; line-height:1.75; color:var(--secondary); }
.lp-plan > b{ display:flex; align-items:center; gap:8px; color:var(--label); font-size:15.5px; }
.lp-plan-soon{ font-size:11px; font-weight:600; color:var(--blue);
  background:var(--blue-tint); border-radius:999px; padding:2px 9px; }
.lp-plan-price{ margin:6px 0 10px; font-size:27px; font-weight:800; letter-spacing:-.02em; color:var(--label); }
.lp-plan-pro .lp-plan-price{ color:var(--blue); }
.lp-plan-price small{ display:block; font-size:12px; font-weight:500; color:var(--secondary); letter-spacing:0; }
.lp-plan ul{ margin:0; padding:0 0 0 1.15em; }
.lp-plan li{ margin:3px 0; }
.lp-plan li b{ color:var(--label); }
.lp-plan-note{ max-width:760px; margin:14px auto 0; font-size:12.5px; color:var(--tertiary); text-align:center; }
@media (min-width:700px){ .lp-plans{ grid-template-columns:1fr 1fr; } }

/* 앱에서 랜딩을 볼 때의 복귀 버튼 — 어디까지 스크롤해도 항상 닿게 고정 */
#lpBack{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:50; border:none; cursor:pointer; border-radius:999px; padding:13px 22px;
  font-size:15px; font-weight:700; background:var(--label); color:var(--bg);
  box-shadow:0 8px 24px rgba(0,0,0,.22); }
#lpBack.hidden{ display:none; }

.lp-fade{ opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease; }
.lp-fade.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .lp-fade{ opacity:1; transform:none; transition:none; } .lp-cue-v{ animation:none; } }

/* ── 인용 질문(LINE 답장) — 호버 ↩ 버튼·인용 바·내 말풍선 속 인용 발췌 ── */
.q-fab{ position:fixed; z-index:60; width:30px; height:30px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center; color:var(--blue);
  background:var(--surface); border:.5px solid var(--separator); box-shadow:var(--shadow); }
#quoteBar{ display:flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:6px;
  background:var(--blue-tint); border-left:3px solid var(--blue); border-radius:10px;
  font-size:13px; color:var(--secondary); }
#quoteBar.hidden{ display:none; }
#quoteBar .ic-s{ color:var(--blue); flex:0 0 auto; }
#qbTx{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#qbX{ background:none; border:none; color:var(--secondary); font-size:17px; padding:2px 6px; cursor:pointer; }
.q-in{ font-size:12.5px; color:rgba(255,255,255,.88); border-left:2px solid rgba(255,255,255,.65);
  padding:2px 0 2px 8px; margin-bottom:6px; max-width:240px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#thread .msg{ transition:transform .18s ease; }   /* 스와이프 스냅백 */

/* ── LINE식 스크롤백 — 날짜 칩(구분선)·오늘 경계·과거 더 보기 ── */
.hist-chip{ align-self:center; margin:14px 0 6px; padding:5px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--secondary) 14%, transparent);
  color:var(--secondary); font-size:11.5px; font-weight:600; }
.hist-today{ background:var(--blue-tint); color:var(--blue); }
.hist-more{ align-self:center; margin:4px 0; padding:7px 16px; border-radius:999px;
  background:var(--surface); border:.5px solid var(--separator); color:var(--blue);
  font-size:12.5px; font-weight:600; cursor:pointer; }

/* 랜딩 섹션 사이 헤어라인(회장 지시: 구분선) — 파란 숫자 밴드 주변은 밴드 자체가 경계라 제외 */
.lp-sec + .lp-sec{ border-top:.5px solid var(--separator); }
.lp-numsec, .lp-numsec + .lp-sec{ border-top:0; }

/* ── 모바일 12건 개선(회장 지시 2026-08-07) ── */
/* ③ 질문 입력줄 접기 — 次へ 옆 말풍선 아이콘, 누르면 펼침 */
#contRow{ display:flex; gap:8px; align-items:center; }
#contRow #continueBtn{ flex:1; }
#askOpen{ flex:0 0 auto; width:48px; height:48px; min-height:48px; padding:0; border-radius:50%;
  background:var(--fill); border:.5px solid var(--separator); color:var(--secondary); }
#askOpen:active{ background:var(--blue-tint); transform:scale(.94); }
#inputRow.collapsed{ display:none; }

/* ① 오늘의 메뉴 카드 — 첫 화면의 빈 공간에 '다음 행동'을 채운다 */
.today-cards{ display:flex; flex-direction:column; gap:8px; margin-top:4px; min-width:min(66vw, 420px); }
.tcard{ display:block; width:100%; text-align:left; background:var(--surface); border:.5px solid var(--separator);
  border-radius:14px; padding:12px 38px 12px 14px; position:relative; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.tcard b{ display:block; font-size:15.5px; letter-spacing:-.01em; }
.tcard .l1{ margin-top:1px; font-size:13px; }
.tcard::after{ content:"›"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:var(--tertiary); font-size:19px; }
.tcard:active{ background:var(--blue-tint); transform:scale(.985); }

/* ② 한글 1과 완료 — 게스트 진도 저장 넛지 */
.hg-nudge-btn{ margin-top:10px; }

/* ④ 헤더 아이콘 미니 라벨(첫 7일만 — body.tb-labels). data-tblb + ::after라
   renderAccount() 같은 innerHTML 재구축에도 라벨이 살아남는다.
   좁은 화면(390px)에서 배지와 공존해야 해서 슬림 규격: gap 6·라벨 8px·이름 말줄임·상태점 숨김 */
body.tb-labels .topbar{ gap:6px; }
body.tb-labels .online{ display:none; }
body.tb-labels .who b{ max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.tb-labels .topbar button{ width:auto; min-width:44px; height:48px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; padding:0 4px; }
body.tb-labels .topbar button[data-tblb]::after{ content:attr(data-tblb); font-size:8px; line-height:1;
  color:var(--secondary); font-weight:500; letter-spacing:0; }
/* 라벨+코스 배지가 공존하는 좁은 화면: 이름을 숨겨 우측 버튼 잘림 방지(아바타가 정체성 유지) */
@media (max-width:430px){ body.tb-labels .topbar.has-chip .who b{ display:none; } }

/* ⑤ 코스 진행 배지(한글 코스 중에만) */
.course-chip{ flex:0 0 auto; font-size:11px; font-weight:700; color:var(--blue);
  background:var(--blue-tint); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.course-chip.hidden{ display:none; }

/* ⑦ 확인 토스트(별 저장 등) — 컴포저 위에 잠깐 */
#toast{ position:fixed; left:50%; bottom:calc(160px + env(safe-area-inset-bottom));   /* 컴포저(次へ+입력줄) 위로 — 버튼을 가리지 않게 */
  transform:translateX(-50%) translateY(8px); background:rgba(28,28,30,.92); color:#fff;
  font-size:13.5px; line-height:1.4; padding:9px 16px; border-radius:999px; max-width:86vw;
  text-align:center; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:60; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ⑧ 단어장 뉘앙스 해설 — 접힘 기본, 칩 탭으로 펼침 */
.culd{ margin:0 0 8px; }
.wtgrid .culd{ grid-column:1 / -1; }   /* 기존 .wtgrid .culnote 전폭 규칙을 래퍼(details)에 승계 */
.culd summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:var(--warn); background:rgba(255,159,10,.12);
  border-radius:999px; padding:4px 11px; min-height:0; }
.culd summary::-webkit-details-marker{ display:none; }
.culd summary::before{ content:"›"; transition:transform .15s; }
.culd[open] summary::before{ transform:rotate(90deg); }
.culd[open] summary{ margin-bottom:6px; }

/* ⑫ 문법 일람 행 정돈 — 44px 리듬 유지 */
.gitem{ min-height:44px; }

/* ── 「＋」 도구 메뉴 + 자유 발음체크(회장 확정 2026-08-07) ── */
#toolsOpen{ flex:0 0 auto; width:48px; height:48px; min-height:48px; padding:0; border-radius:50%;
  background:var(--fill); border:.5px solid var(--separator); color:var(--secondary); }
#toolsOpen:active{ background:var(--blue-tint); transform:scale(.94); }
.tools-panel .tool-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--surface); border:.5px solid var(--separator); border-radius:14px;
  padding:13px 14px; margin-top:10px; }
.tools-panel .tool-row:active{ background:var(--blue-tint); }
.tools-panel .tool-row .ic{ flex:0 0 auto; color:var(--blue); }
.tools-panel .tool-row b{ display:block; font-size:15.5px; }
.tools-panel .tool-row .l1{ display:block; margin-top:1px; font-size:12.5px; }
.fp-card{ margin-top:2px; }
.fp-in{ width:100%; padding:11px 14px; border-radius:14px; border:1.5px solid var(--blue);
  font-size:17px; background:var(--surface); color:var(--label); }
.fp-in:focus{ outline:none; box-shadow:0 0 0 3px var(--blue-tint); }
.fp-cnt{ text-align:right; font-size:11.5px; margin:3px 2px 8px; }
.fp-btns{ display:flex; gap:8px; flex-wrap:wrap; }
.fp-btns .fp-listen{ flex:1; min-width:120px; }
.fp-btns .fp-run{ flex:1.2; min-width:140px; }
.fp-res{ margin-top:10px; }

/* ＋·말풍선 재배치(회장 리포트): 열림 상태 말풍선=눌린 토글, ＋는 입력줄 왼쪽으로 이동 */
#askOpen.on{ background:var(--blue-tint); color:var(--blue); border-color:transparent; }
#contRow.hidden{ display:none; }
#inputRow #toolsOpen{ width:44px; height:44px; min-height:44px; }