/* 페이스북식 배색 — 회색 바탕에 흰 카드, 파란 강조 (사용자 지시).
   바탕과 카드를 뒤집은 것이 핵심이다: 예전엔 흰 바탕에 회색 카드였다. */
/* 글꼴 Be Vietnam Pro — Stitch(구글 AI 디자인 도구)가 만든 디자인 시스템에서 가져옴(2026-09-08).
   베트남어 성조 부호를 잘리지 않게 그리도록 만들어진 폰트라, 한글과 나란히 놓아도 어색하지 않다.
   구글 폰트 CDN에서 못 받아오면(오프라인 등) 시스템 기본 폰트로 조용히 대체된다. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
:root{
  --bg:#f0f2f5; --fg:#050505; --dim:#65676b; --line:#dadde1;
  --card:#ffffff; --accent:#0058bc; --accent-fg:#fff;
  --accent-soft:#d8e2ff;      /* Stitch primary-fixed — 연한 배지·아이콘 배경 */
  --tertiary:#9a4100;          /* Stitch tertiary — 스트릭/불꽃 등 보조 강조색(파랑 외 유일 허용색) */
  --tertiary-soft:#ffdbcb;
  --surface-2:#f6f3f2;         /* Stitch surface-container-low — 카드 안의 옅은 패널 */
  --track:#e5e2e1;             /* Stitch surface-container-highest — 진행바 빈 부분(선 색과 다름) */
  --ok:#10b981; --bad:#e41e3f; --warn:#8a5a00;
  --radius:12px;
  /* 스티치가 실제로 만든 화면(홈/로드맵 HTML 소스)을 직접 받아 확인해 보니(2026-09-09)
     rounded-xl = 0.75rem = 12px 이었다 — 색과 달리 이 값은 설명 글(design-md)이 아니라
     실제 카드에 12px가 그대로 쓰여 있었다. 그래서 14px가 아니라 12px로 맞춘다. */
  --radius-lg:12px;
  --shadow:0 1px 2px rgba(0,0,0,.1);
  /* 위 색·반경 값은 Stitch(구글 AI 디자인 도구) 시안(stitch-home.html)의 실제 토큰을 그대로 옮긴 것 — 2026-09-08 */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#18191a; --fg:#e4e6e9; --dim:#b0b3b8; --line:#3e4042;
    --card:#242526; --accent:#5a9cff; --accent-fg:#0a1a33;
    --accent-soft:#1d3866; --tertiary:#ffb691; --tertiary-soft:#4a2410;
    --surface-2:#2a2b2c; --track:#3a3b3c;
    --ok:#34d399; --bad:#f02849; --warn:#e3b341;
    --shadow:0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme=dark]{
  --bg:#18191a; --fg:#e4e6e9; --dim:#b0b3b8; --line:#3e4042;
  --card:#242526; --accent:#5a9cff; --accent-fg:#0a1a33;
  --accent-soft:#1d3866; --tertiary:#ffb691; --tertiary-soft:#4a2410;
  --surface-2:#2a2b2c; --track:#3a3b3c;
  --ok:#34d399; --bad:#f02849; --warn:#e3b341;
  --shadow:0 1px 2px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.6 "Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  -webkit-text-size-adjust:100%;
}
/* 머리띠 — 스티치 실제 HTML(홈 화면 소스)을 그대로 받아 확인한 값(2026-09-09):
   밑줄 테두리가 아니라 반투명 흰 배경 + 블러 + 아주 옅은 그림자였다. */
header{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  min-height:64px;
  background:color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:none;
  box-shadow:0 1px 8px rgba(0,0,0,.04);
}
header h1{color:var(--accent); font-weight:800}
/* 제목이 길어도 줄이 늘어나면 안 된다 — min-width:0 이 없으면 flex 칸이 글자만큼 벌어진다 */
header h1{flex:1 1 0; min-width:0; margin:0; font-size:16px; font-weight:650; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
header > button{flex:0 0 auto; white-space:nowrap}
/* #title(h1)가 display:none이라 더는 가운데 spacer 역할을 못 한다 — 내 정보를
   우측 상단에 고정하려면 그 앞에 auto 여백을 줘야 한다 (대표님 지시, 2026-09-12). */
header > #goMe{margin-left:auto}
/* 좁은 폰(375px)에서 머리띠 단추 여섯 개가 22px 넘쳤다 — 제목 칸이 0이 되어 사라졌다.
   여백을 줄이고 '북부→북' 처럼 뒷글자를 숨긴다 (2026-08-30 검수) */
@media (max-width:420px){
  header{gap:4px; padding-left:8px; padding-right:8px}
  /* 손가락으로 누르는 자리는 40px 밑으로 내리지 않는다 — 36×35 는 눌리지 않는다 */
  header > button.ghost{min-width:40px; min-height:40px; padding:6px 8px}
  header .wo{display:none}
}
/* 아래 탭 막대를 이제 모든 화면에서 켠다(대표님 지시, 2026-09-09: "항상 화면 하단에는
   버튼 4개가 표시되도록, 학습 중에도 언제든 이동할 수 있게") — 그래서 main 여백도
   화면 구분 없이 늘 탭 막대 높이만큼 확보한다. */
:root{ --tabbar-h: calc(64px + env(safe-area-inset-bottom)); }
main{max-width:640px; margin:0 auto; padding:16px 14px calc(var(--tabbar-h) + 20px)}

/* ── 아래 탭 막대 (2026-09-08) ──────────────────────────────────
   목록·복습 메뉴·순위처럼 훑어보는 화면에서만 켠다(JS 가 hidden 을 넣고 뺀다) —
   자판·녹음처럼 화면 아래에 이미 붙박이 것이 있는 학습 화면과는 겹치지 않는다. */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around;
  height:64px; padding-bottom:env(safe-area-inset-bottom);
  background:var(--card); border-top:1px solid var(--line);
  box-shadow:0 -1px 4px rgba(0,0,0,.06);
}
.tabbtn{
  flex:1 1 0; min-width:44px; min-height:44px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  background:transparent; border:none; border-radius:0; color:var(--dim); font-size:11px;
}
.tabbtn svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.tabbtn.on{color:var(--accent); font-weight:700}
button{font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line); transition:.12s}
button:active{transform:scale(.98)}
.ghost{background:transparent; color:var(--fg); padding:6px 12px; min-width:44px}
.primary{background:var(--accent); color:var(--accent-fg); border-color:transparent; padding:10px 18px; font-weight:650}
.big{padding:14px 22px; font-size:17px}
.lede{color:var(--dim); margin:0 0 18px}
.foot{color:var(--dim); font-size:13px; margin-top:24px; text-align:center}

/* 홈 */
.banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:18px;
}
.banner strong{font-size:20px; margin-right:6px}
.days{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.days li{margin:0}
.days button{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  background:var(--card); padding:14px 16px; border-radius:var(--radius); color:var(--fg);
}
.days .num{
  flex:none; width:44px; font-variant-numeric:tabular-nums; font-weight:700;
  color:var(--dim); font-size:13px;
}
.days .nm{flex:1; font-weight:600}
.days .st{flex:none; font-size:13px; color:var(--dim)}
.days button[data-done="1"]{border-left:4px solid var(--ok)}
.days button[data-done="1"] .st{color:var(--ok)}

/* 학습 카드 */
.intro{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; font-size:14px; color:var(--dim); margin-bottom:14px;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 20px; min-height:250px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center;
}
.vi{font-size:38px; font-weight:700; line-height:1.25; word-break:keep-all}
.vi.sm{font-size:26px}
.ko{font-size:19px}
.tone-shape{font-size:15px; color:var(--dim); letter-spacing:.1em}
.hanja{
  font-size:14px; color:var(--warn); border:1px dashed var(--warn);
  border-radius:8px; padding:4px 10px;
}
.reveal{
  font-size:15px; color:var(--dim); background:transparent;
  border:1px dashed var(--line); padding:8px 14px;
}
.reveal[data-open="1"]{border-style:solid; color:var(--fg)}
.sound{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.ex{
  width:100%; margin-top:6px; display:grid; gap:6px; text-align:left;
}
.ex button{
  background:transparent; color:var(--fg); padding:9px 12px; font-size:15px;
  display:flex; gap:10px; align-items:baseline;
}
.ex .exvi{flex:1; font-weight:600}
.pager{display:flex; align-items:center; gap:12px; margin-top:18px}
.pager #pos{flex:1; text-align:center; color:var(--dim); font-size:14px; font-variant-numeric:tabular-nums}

/* 퀴즈 — 진행바·선택지는 스티치 디자인 시스템 실제 수치를 그대로 옮김(2026-09-09):
   진행바 8px/선 색/4px, 선택지 최소 52px에 상태별 2px 테두리 + 옅은 배경 틴트. */
.bar{height:8px; background:var(--track); border-radius:4px; overflow:hidden; margin-bottom:20px}
.bar div{height:100%; background:var(--accent); width:0; border-radius:4px; transition:.25s}
.q{font-size:15px; color:var(--dim); margin-bottom:6px}
.qmain{font-size:30px; font-weight:700; margin:6px 0 20px; text-align:center; word-break:keep-all}
.opts{display:grid; gap:9px}
/* 스티치 실제 화면(오답 복습 퀴즈 소스, 2026-09-09 확인) 은 58px — 52px 아니었다.
   그림자도 있었다. 다만 정답/오답을 색만으로 안 가르는 이 앱 원칙(아래 굵기 다른 이유)은
   스티치보다 우선한다 — 테두리 굵기 구분은 그대로 둔다. */
.opts button{
  background:var(--card); color:var(--fg); padding:14px 16px; text-align:left; font-size:16px;
  min-height:58px; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow);
}
.opts button[data-s="sel"]{border-width:2px; border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 4%, var(--card))}
.opts button[data-r="ok"]{border-width:2px; border-color:var(--ok); color:var(--fg); font-weight:650;
  background:color-mix(in srgb, var(--ok) 6%, var(--card))}
.opts button[data-r="no"]{border-width:2px; border-color:var(--bad); color:var(--fg);
  background:color-mix(in srgb, var(--bad) 6%, var(--card))}
.result{text-align:center; padding:30px 0}
.result .n{font-size:44px; font-weight:700}
/* 실제 시험 점수와 급 — 맞힌 개수(.n)보다 이쪽이 학습자에게 더 중요한 숫자다.
   색만으로 구분하지 않는다: 굵기와 크기로도 갈린다(색각 배려). */
.result .exscore{font-size:22px; font-weight:700; margin-top:8px}
.result .exgrade{display:inline-block; margin-top:8px; padding:4px 12px;
  border:1.5px solid var(--accent); border-radius:999px;
  font-size:14px; font-weight:700; color:var(--accent)}

/* 미션 */
.mgoal{font-size:22px; font-weight:700; margin:0 0 10px; word-break:keep-all}
.mhow{color:var(--dim); margin:0 0 20px}
.roles{display:grid; gap:10px; margin-bottom:18px}
.role{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px}
.role b{display:block; font-size:13px; color:var(--accent); margin-bottom:4px}
.note{font-size:13px; color:var(--dim); border-top:1px solid var(--line); padding-top:14px}

[hidden]{display:none !important}

.days .grp{padding:16px 4px 4px; font-size:13px; font-weight:700; color:var(--dim); letter-spacing:.02em}
.days .grp:first-child{padding-top:0}

/* 문장 세트 배지 */
.setbadge{
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:99px;
  border:1px solid var(--line); letter-spacing:.02em;
}
.setbadge.daily{color:var(--accent); border-color:var(--accent)}
.setbadge.work{color:var(--warn); border-color:var(--warn)}

/* 단어별 풀이 — 쌩초보용 */
.gloss{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  width:100%; margin:4px 0 2px;
}
.gcell{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
  padding:6px 10px; min-width:56px;
}
.gcell .gw{font-size:15px; font-weight:700}
/* 확대·축소 금지 — 두 손가락 벌리기와 더블탭 확대를 막는다 (meta만으론 iOS가 무시) */
html{touch-action:pan-x pan-y}

/* 뜻이 길면 두 줄로 접는다 — 한 줄 고집(nowrap)이 화면 밖으로 밀어내던 원인 */
.gcell{max-width:100%}
.gcell .gm{font-size:12px; color:var(--dim); text-align:center; overflow-wrap:anywhere}

.exline{font-size:15px; color:var(--dim)}
.exline b{color:var(--fg); font-size:18px}
.ex .exhead{
  font-size:12px; font-weight:700; color:var(--dim); padding:2px 4px 4px;
  border-top:1px solid var(--line); margin-top:4px; padding-top:12px;
}
.qplay{display:flex; gap:8px; align-items:center; justify-content:center; margin:18px 0 22px}

/* 성조 훈련 */
.banner.tone{border-left-color:var(--warn)}
.tonehint{font-size:14px; color:var(--dim); text-align:center; margin-bottom:4px}
.tonehint b{color:var(--fg); font-size:17px}
.tonelist button{display:flex; align-items:baseline; gap:10px}
.tonelist .tvi{font-size:22px; font-weight:700; min-width:64px}
.tonelist .tmark{font-size:12px; color:var(--dim); min-width:52px}
.tonelist .tko{font-size:14px; color:var(--dim)}
.tonelist button[data-r="ok"] .tmark,.tonelist button[data-r="ok"] .tko{color:var(--ok)}

.backup{display:flex; gap:8px; justify-content:center; margin-top:18px}
.backup button{flex:1; max-width:170px; font-size:14px; padding:10px 8px}
.foot.small{font-size:12px; margin-top:10px; line-height:1.5}
.foot.small b{color:var(--fg)}

.banner button{white-space:nowrap; flex:none}
.banner>div{min-width:0}
.banner.tone span{display:block; font-size:14px; color:var(--dim); margin-top:2px}

/* 성조 표시 */
.tones{display:flex; gap:5px; flex-wrap:wrap; justify-content:center}
.tones.sm{justify-content:flex-start; margin-top:6px}
.tchip{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line); border-radius:99px; padding:3px 10px;
  font-size:11px; color:var(--dim); background:var(--bg);
}
.tchip i{font-style:normal; font-weight:700; font-size:12px; color:var(--fg)}
.tchip b{color:var(--fg); line-height:1; display:inline-flex}
.tchip.ngang b{color:var(--dim)}
.tchip.huyền b,.tchip.nặng b{color:var(--accent)}
.tchip.sắc b,.tchip.ngã b{color:var(--warn)}
.tchip.hỏi b{color:var(--bad)}

/* 성조 화살표 (SVG) — 색은 글자색을 따라간다 */
.tarr{width:19px; height:19px; display:inline-block; vertical-align:-4px}
.tarr path{stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.tarr circle{fill:currentColor}
.tone-shape .tarr{width:46px; height:46px}
.gt .tarr{width:15px; height:15px; vertical-align:-2px}

/* 대화 카드 */
.card.wide{align-items:stretch; text-align:left; padding:18px 16px; gap:14px}
.card.wide .setbadge{align-self:center}
.card.wide>.primary{align-self:center}
.line{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; display:flex; flex-direction:column; gap:7px; background:var(--bg);
}
.line.a{border-left:4px solid var(--accent)}
.line.b{border-left:4px solid var(--ok)}
.lhead{display:flex; align-items:center; gap:6px}
.lhead .who{
  font-size:12px; font-weight:800; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; color:var(--accent-fg); background:var(--accent);
}
.line.b .lhead .who{background:var(--ok)}
.lhead button{padding:4px 9px; font-size:13px; min-width:0}
.lvi{font-size:23px; font-weight:700; line-height:1.35; word-break:keep-all}
.lko{font-size:15px; color:var(--dim)}
.card.wide .gloss{justify-content:flex-start; margin:2px 0 0}
.card.wide .reveal{align-self:flex-start; font-size:13px; padding:6px 11px}

/* 뜻 + 성조를 한 칸에 */
.gtop{display:flex; align-items:center; gap:5px}
.gt{font-size:15px; line-height:1}
.gt.ngang{color:var(--dim)}
.gt.huyền,.gt.nặng{color:var(--accent)}
.gt.sắc,.gt.ngã{color:var(--warn)}
.gt.hỏi{color:var(--bad)}
.card.wide .gcell{min-width:62px; gap:2px}

/* 그림 */
.pic{font-size:56px; line-height:1}
.pic img{max-width:160px; max-height:120px; border-radius:12px; display:block; margin:0 auto}

/* 따라 말하기 */
.speak{width:100%; display:flex; flex-direction:column; gap:8px; align-items:center; margin-top:6px}
.card.wide .speak{align-items:flex-start}
button.rec{
  background:transparent; color:var(--bad); border:1px solid var(--bad);
  padding:8px 16px; font-size:14px; font-weight:650;
}
button.rec[data-on="1"]{background:var(--bad); color:#fff; border-color:var(--bad)}
.cmpbox{width:100%; display:flex; flex-direction:column; gap:6px; align-items:center}
.card.wide .cmpbox{align-items:flex-start}
.cmp{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.cmp button{padding:8px 13px; font-size:13px}
.cmpnote{font-size:12px; color:var(--dim); text-align:center; line-height:1.5}
.card.wide .cmpnote{text-align:left}

/* 노래 */
button.song{
  align-self:center; background:transparent; color:var(--warn);
  border:1px solid var(--warn); padding:9px 18px; font-weight:650;
}

/* 규칙 상자 */
.rule{
  border:1px solid var(--line); border-left:4px solid var(--warn);
  border-radius:var(--radius); padding:12px 14px; font-size:13px;
  color:var(--dim); line-height:1.6; margin:14px 0; text-align:left;
}
.rule b{color:var(--fg)}

/* 저녁엔 성조를 앞으로 */
.banner.tone[data-night="1"]{border-left-color:var(--warn); background:var(--card)}
.banner.tone[data-night="1"] strong::after{content:" 🌙"}

/* 손짓 안내 */
.gest{
  font-size:13px; color:var(--ok); border:1px dashed var(--ok);
  border-radius:9px; padding:7px 12px; line-height:1.5; max-width:320px;
}
.gest.mid{margin:10px auto; text-align:center}
.pic.mid{margin:6px auto; text-align:center}
.sound.mid{justify-content:center}

/* 회상형 정답 상자 */
.ansbox{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 14px; margin:14px 0 18px; display:flex; flex-direction:column;
  align-items:center; gap:10px;
}

/* 이번 주 기록 */
.progress{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:14px; display:flex; flex-direction:column; gap:12px;
}
.phead{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.phead strong{font-size:17px}
.phead span{font-size:12px; color:var(--dim)}
.dots{display:flex; gap:6px}
.dot{
  flex:1; height:34px; border-radius:9px; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:var(--dim);
  background:var(--bg); border:1px solid var(--line);
}
.dot.on{background:var(--accent); color:var(--accent-fg); border-color:transparent}
.dot.today{outline:2px solid var(--accent); outline-offset:1px}
.dot.fut{opacity:.4}

/* 주간 달력 — 요일 글자 + 40px 동그라미(체크·자물쇠). .dot 은 순위판 회원 줄과
   이름이 같아 새로 갈랐다(둘 다 손대면 서로 깨진다). */
.wkrow{display:flex; justify-content:space-between; gap:4px}
.wkday{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px}
.wklabel{font-size:12px; color:var(--dim)}
.wkcirc{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; color:var(--dim); background:var(--bg); border:1.5px solid var(--line);
}
.wkday.on .wkcirc{background:var(--ok); border-color:var(--ok); color:#fff}
.wkday.on .wklabel{color:var(--fg); font-weight:700}
.wkday.today .wkcirc{outline:2px solid var(--accent); outline-offset:2px}
.wkday.today .wklabel{color:var(--accent); font-weight:700}
.wkday.fut .wkcirc{opacity:.5; border-style:dashed; font-size:13px}
.wkday.fut .wklabel{opacity:.5}
.stats{display:flex; gap:8px}
.stat{
  flex:1; background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:8px 4px; text-align:center; display:flex; flex-direction:column; gap:1px;
}
.stat b{font-size:19px; font-variant-numeric:tabular-nums}
.stat span{font-size:11px; color:var(--dim)}
.badges{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.badges.go{cursor:pointer}
.badge{
  display:inline-flex; align-items:center; gap:4px; padding:4px 9px;
  border:1px solid var(--line); border-radius:99px; font-size:11px;
  color:var(--dim); opacity:.45; filter:grayscale(1);
}
.badge.on{opacity:1; filter:none; border-color:var(--ok); color:var(--fg)}
.badge i{font-style:normal; font-size:13px}
.badge em{font-style:normal}

/* 세로 지도 — 끝낸 과 · 지금 · 다음 과를 이은 세로줄 하나. 완료(체크) · 지금(고리, 크게)
   · 다음(자물쇠, 흐리게)를 색뿐 아니라 표시·굵기로도 가른다. */
.roadmap{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:14px; display:flex; flex-direction:column;
}
.roadmap:empty{display:none; border:none; padding:0; margin:0}

/* 성과·분석 — 예전엔 '내 정보' 화면 안에서만 보였다. 홈으로 옮기며(2026-09-09)
   이웃한 .progress·.roadmap과 같은 카드 꼴로 맞춘다. */
.achieve, .analysis{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:16px; margin-bottom:14px;
}
.achieve:empty, .analysis:empty{display:none; border:none; padding:0; margin:0}
.rmnode{position:relative; display:flex; align-items:flex-start; gap:12px; padding:0 0 22px 0}
.rmnode:last-child{padding-bottom:0}
/* 동그라미를 잇는 세로줄 — 마지막 칸만 뺀다 */
.rmnode:not(:last-child)::before{
  content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--line);
}
.rmdot{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; background:var(--bg); border:2px solid var(--line); color:var(--dim); z-index:1;
}
.rmnode.done .rmdot{background:var(--ok); border-color:var(--ok); color:#fff}
.rmnode.lock .rmdot{opacity:.6}
.rmnode.cur .rmdot{
  width:40px; height:40px; margin:-4px 0; border-color:var(--accent); color:var(--accent);
  font-weight:800; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  animation:rmpulse 1.8s ease-in-out infinite;
}
@keyframes rmpulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}
  50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent)}
}
.rmlabel{flex:1; padding-top:4px; font-size:15px; line-height:1.35}
.rmlabel b{display:block}
.rmnode.lock .rmlabel b{color:var(--dim); font-weight:500}
.rmnode.cur .rmlabel b{font-size:17px; font-weight:700}
.rmlabel span{display:block; font-size:12px; color:var(--accent); font-weight:700; margin-top:2px}
.rmnode.cur{cursor:pointer}

.bbtns{display:flex; gap:6px; flex:none}
.bbtns button{white-space:nowrap; padding:10px 13px; font-size:14px}
.result .sub{font-size:13px; color:var(--dim); margin-top:6px}

/* 준비일 안내에 표시 */
.intro[data-prep="1"]{border-left:3.5mm solid var(--warn)}
.intro[data-prep="1"]::before{
  content:"준비 단계 · 소리만 익힙니다";
  display:block; font-size:12px; font-weight:800; color:var(--warn); margin-bottom:6px;
}

/* 바꿔 말하기 — 글자·뜻·한글발음 다 보인다 */
.ex button.exrow{align-items:flex-start; gap:10px; padding:11px 13px}
.exl{flex:1; display:flex; flex-direction:column; gap:2px; text-align:left}
.exl .exvi{font-size:16px; font-weight:700}
.exl .exko{font-size:13px; color:var(--dim)}
.exl .exkr{font-size:12px; color:var(--dim); opacity:.8}
.exspk{flex:none; font-size:15px}

/* 재생 중인 줄 */
.line.now{background:var(--card); box-shadow:0 0 0 2px var(--accent) inset}
.line.b.now{box-shadow:0 0 0 2px var(--ok) inset}

/* 한글 발음이 켜져 있을 때 */
.reveal[data-open="1"]{border-style:solid; color:var(--fg); font-weight:600}
#krToggle{font-size:13px; min-width:40px}

.card.wide>.pic{align-self:center; font-size:44px}

/* 성조 곡선 */
.curvearea{width:100%}
.curvebox{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:4px; margin-top:6px}
svg.curve{width:100%; height:auto; display:block}
svg.curve .mid{stroke:var(--line); stroke-width:1; stroke-dasharray:3 3}
svg.curve .nat{fill:none; stroke:var(--dim); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; opacity:.75}
svg.curve .mine{fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.curvelegend{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--dim); margin-top:5px}
.curvelegend .k{display:inline-block; width:16px; height:3px; border-radius:2px}
.curvelegend .k.nat{background:var(--dim)}
.curvelegend .k.mine{background:var(--accent)}


.banner.week{border-left-color:var(--ok)}
.banner.week[data-due="1"]{background:var(--card)}
.banner.week[data-due="1"] strong::after{content:" ⭐"}
.banner.week span{display:block; font-size:13px; color:var(--dim); margin-top:2px}

/* 성조 부호 붙이기 */
.markbare{font-size:44px; font-weight:700; text-align:center; margin:14px 0 4px; color:var(--dim)}
.markopts{grid-template-columns:1fr 1fr; gap:8px}
.markopts button{display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px}
.markopts .mkvi{font-size:26px; font-weight:800}
.markopts .mkname{font-size:12px; color:var(--dim)}
.markopts .mkko{font-size:11px; color:var(--dim)}
.markopts button[data-r="ok"] .mkname,.markopts button[data-r="ok"] .mkko{color:var(--ok)}

/* 규칙 3개 */
.rulesbtn{
  width:100%; margin-top:14px; background:transparent; color:var(--dim);
  border:1px dashed var(--line); padding:12px; font-size:14px;
}
.rulecard{
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:12px;
}
.rhead{display:flex; align-items:center; gap:9px; font-size:15px; margin-bottom:7px}
.rhead .ri{font-size:20px}
.rbody{font-size:13.5px; line-height:1.75; color:var(--dim)}
.rbody b{color:var(--fg)}
.rex{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.rrow{display:flex; gap:10px; align-items:baseline; font-size:13.5px}
.rrow .rk{flex:none; width:84px; color:var(--dim); font-size:12px}
.rrow .rv{flex:1; line-height:1.6}
.rrow .rv b{color:var(--accent)}
.rrow .dim{color:var(--dim); font-size:12px}

/* 오늘 할 일 — 단추 하나만 크게 */
.hero{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%;
  background:var(--accent); color:var(--accent-fg); border:0; border-radius:var(--radius);
  padding:18px 20px; margin:0 0 18px; text-align:left;
}
.hero b{font-size:19px}
.hero span{font-size:13px; opacity:.85}
.days button[data-next="1"]{border:1px solid var(--accent); box-shadow:inset 4px 0 0 var(--accent)}

/* 남부 차이 표시 */
.south{
  font-size:13px; color:var(--warn);
  border:1px dashed var(--warn); border-radius:8px; padding:4px 10px;
}

/* 퀴즈 만점 축하 */
.result{position:relative}
.result.perfect .n{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.5)}100%{transform:scale(1)}}
.confetti{position:absolute; left:0; right:0; top:0; height:0; pointer-events:none}
.confetti i{
  position:absolute; left:calc(50% + (var(--i) - 7) * 18px); top:-6px; width:7px; height:11px;
  background:hsl(calc(var(--i) * 47deg) 80% 55%); border-radius:2px; opacity:0;
  animation:cfall .9s ease-out calc(var(--i) * 40ms) forwards;
}
@keyframes cfall{
  0%{opacity:1; transform:translateY(0) rotate(0)}
  100%{opacity:0; transform:translateY(110px) rotate(220deg)}
}

/* AI 대화 */
.chatlog{display:flex; flex-direction:column; gap:10px; padding:2px 0 8px}
.cb{max-width:86%; padding:10px 14px; border-radius:16px; font-size:15px; line-height:1.5;
  white-space:pre-line; overflow-wrap:anywhere}
.cb.me{align-self:flex-end; background:var(--accent); color:var(--accent-fg); border-bottom-right-radius:5px}
.cb.ai{align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:5px}
.cb.wait{color:var(--dim)}
.cb.err{color:var(--bad)}
.cb .cvi{font-size:18px; font-weight:700}
.cb .ckr{font-size:13px; color:var(--dim)}
.cb .cko{font-size:14px; margin-top:2px}
.cb .cfix{font-size:13px; color:var(--warn); margin-top:4px}
.cb .ghost.sm{margin-top:6px; padding:4px 10px; font-size:13px}
.chatin{
  /* 아래 탭 막대가 항상 떠 있어서(2026-09-09) 그 위에 붙인다 — 안 그러면 탭 막대가 가린다 */
  position:sticky; bottom:var(--tabbar-h); display:flex; gap:8px; align-items:flex-end;
  padding:10px 0; background:var(--bg);
}
/* 입력칸은 쓴 글을 따라 세로로 자란다 (최대 다섯 줄, 그 뒤로는 칸 안에서 스크롤).
   높이를 재서 맞추면 사파리에서 어긋난다 — 보이지 않는 쌍둥이 글을 겹쳐 두고
   그 글의 키를 그대로 칸의 키로 쓴다. */
.tawrap{flex:1; min-width:0; display:grid; max-height:140px; overflow:hidden}
.tawrap::after{content:attr(data-v) ' '; visibility:hidden; white-space:pre-wrap}
.tawrap > textarea, .tawrap::after{
  grid-area:1 / 1 / 2 / 2; padding:12px 14px; border:1px solid var(--line);
  border-radius:12px; font:inherit; line-height:1.45; box-sizing:border-box;
  overflow-wrap:anywhere; word-break:break-word;
}
.tawrap > textarea{
  resize:none; overflow-y:auto; background:var(--card); color:var(--fg);
  height:100%; max-height:140px;      /* 다섯 줄이 넘으면 칸 안에서 스크롤 */
}
.chatmode{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:10px; text-align:left; color:var(--fg);
}
.chatmode.on{background:var(--accent); color:var(--accent-fg); border-color:transparent}
.chatmode b{font-size:17px}
.chatmode span{font-size:13px; opacity:.8}
.keysteps{margin:0 0 16px; padding-left:22px; display:grid; gap:6px}
.keyin{
  width:100%; padding:12px 14px; border-radius:12px; font:inherit; margin-bottom:10px;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
}
.banner.chat{border-left-color:var(--ok)}
.banner.chat span{display:block; font-size:14px; color:var(--dim); margin-top:2px}

/* 받아쓰기 */
.q.mid{text-align:center; font-size:17px; color:var(--fg); margin:2px 0 12px}
.dictans{
  text-align:center; font-size:24px; font-weight:700; min-height:44px;
  border:1px dashed var(--line); border-radius:12px; padding:8px 12px; margin-bottom:12px;
  color:var(--dim);
}
.dictans[data-r="ok"]{border-color:var(--ok); color:var(--ok)}
.dictans[data-r="no"]{border-color:var(--bad); color:var(--bad)}
.dicttiles{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px}
.tile{
  background:var(--card); color:var(--fg); font-size:19px; font-weight:600;
  padding:10px 16px; border-radius:12px; min-width:44px;
}
.tile:disabled{opacity:.25}

/* AI 대화 역할 고르기 */
.rolepick{display:flex; gap:8px; margin-top:8px}
.chatmode.on .ghost{color:var(--accent-fg); border-color:var(--accent-fg)}
.dimtxt{color:var(--dim); font-size:12px}

/* 손글씨 */
.pad{
  width:100%; height:190px; display:block; touch-action:none;
  background:var(--card); border:1px dashed var(--line); border-radius:var(--radius);
  margin:12px 0 4px;
}
.krline{color:var(--dim); font-size:14px}
.banner.writeb span{display:block; font-size:14px; color:var(--dim); margin-top:2px}

/* 화면 자판 */
.vkb{display:grid; gap:6px; margin-top:14px}
.vkrow{display:flex; gap:5px; justify-content:center}
.vk{
  flex:1; max-width:42px; min-width:0; padding:11px 0; font-size:17px;
  background:var(--card); color:var(--fg); border-radius:8px; text-align:center;
}
.vk.tonek{max-width:50px}
.vk.tonek .tarr{width:17px; height:17px; vertical-align:-3px}
.vk.tonek.ngang{color:var(--dim)}
.vk.tonek.huyền,.vk.tonek.nặng{color:var(--accent)}
.vk.tonek.sắc,.vk.tonek.ngã{color:var(--warn)}
.vk.tonek.hỏi{color:var(--bad)}
.vk.wide{max-width:130px; flex:2; font-size:15px}
.vk.go{background:var(--accent); color:var(--accent-fg); border-color:transparent; font-weight:650}
.hintvi{text-align:center; font-size:22px; font-weight:700; color:var(--dim); letter-spacing:.03em}

/* 홈 메뉴 격자 */
.menu{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px}
.mtile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; display:flex; flex-direction:column; gap:7px;
}
.mtile b{font-size:16px}
.mtile span{font-size:12px; color:var(--dim); line-height:1.4}
.mbtns{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto}
.mbtns button{padding:8px 12px; font-size:14px; min-width:0}

/* 직무 갈래 표찰 */
.catchip{
  font-style:normal; font-size:10px; font-weight:700; margin-left:6px;
  border:1px solid var(--line); border-radius:6px; padding:1px 5px; color:var(--dim);
  vertical-align:1px;
}
.mtile.wide{grid-column:1 / -1}

/* 업적 화면 */
.awrow{display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:10px; margin-bottom:8px; opacity:.55}
.awrow.on{opacity:1; border-color:var(--ok)}
.awrow .awi{font-size:20px}
.awrow .awn{font-weight:700}
.awrow .awh{margin-left:auto; font-size:12px; color:var(--dim); text-align:right}
.ghost.sm{padding:4px 10px; font-size:13px}

/* 규칙 예문 카드의 한 줄 설명 */
.rulenote{font-size:14px; color:var(--dim); text-align:center; margin:6px 0 2px;
  border:1px dashed var(--line); border-radius:10px; padding:7px 10px}

/* 손글씨 판 — 종이처럼 */
.wpad{display:block; width:100%; max-width:560px; margin:12px auto; border-radius:12px;
  border:1px solid var(--line); touch-action:none; background:#fff}

/* 대화 속 사진 */
.camth{max-width:150px; border-radius:10px; display:block}

/* 오늘 기사 목록 */
.newsrow{display:block; text-decoration:none; color:var(--fg); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; margin-bottom:10px}
.newsrow b{display:block; font-size:15px; line-height:1.45; margin-bottom:4px}
.newsrow span{font-size:12px; color:var(--dim)}

/* AI 선생님 캐릭터 — 몸은 천천히 흔들, 눈은 깜빡, 입은 말할 때만 */
.tch{text-align:center; padding:6px 0 2px}
.tchsvg{width:150px; height:112px; animation:tsway 5s ease-in-out infinite; transform-origin:50% 100%}
.tchsvg .teye{animation:tblink 4.2s infinite; transform-box:fill-box; transform-origin:center}
.tch.talk .tmouth{animation:ttalk .22s infinite alternate; transform-box:fill-box; transform-origin:center}
.tchname{display:block; font-size:12px; color:var(--dim); margin-top:-2px}
@keyframes tsway{0%,100%{transform:rotate(-1.4deg)} 50%{transform:rotate(1.4deg) translateY(1px)}}
@keyframes tblink{0%,90%,100%{transform:scaleY(1)} 94%{transform:scaleY(.08)}}
@keyframes ttalk{from{transform:scaleY(.6)} to{transform:scaleY(2.2)}}

/* 선생님 선택 표시 */
.rolepick .pick{border-color:var(--ok); color:var(--fg)}

/* 자랑 카드 (공유 창이 없는 기기용 미리보기) */
.cardimg{width:100%; max-width:420px; display:block; margin:0 auto 14px; border-radius:14px}

/* 위 토글의 켜진 쪽 표시 */
#region i,#voice i{font-style:normal; opacity:.38; padding:0 3px}
#region i.on,#voice i.on{opacity:1; font-weight:700}

/* 기사 날짜 머리글 */
.newsday{font-size:13px; color:var(--dim); font-weight:700; margin:14px 2px 8px}

/* 날씨 · 시간 */
.wxclock{font-size:20px; font-weight:700; text-align:center; margin:6px 0 18px;
  border:1px solid var(--line); border-radius:12px; padding:14px 10px}
.wxrow{display:flex; gap:6px; margin-bottom:6px}
.wxday{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  border:1px solid var(--line); border-radius:10px; padding:8px 2px}
.wxday.today{border-color:var(--ok)}
.wxday span{font-size:11px; color:var(--dim)}
.wxday i{font-style:normal; font-size:20px}
.wxday b{font-size:14px}
.wxday em{font-style:normal; font-size:11px; color:var(--dim)}

/* 홈 일정 미리보기 */
.plan{margin:10px 0 4px}
.planrow{display:flex; align-items:center; gap:10px; padding:7px 12px;
  border:1px solid var(--line); border-radius:10px; margin-bottom:6px}
.planrow .pk{font-size:12px; color:var(--dim); flex:0 0 60px}
.planrow .pv{font-size:14px; flex:1}
.planrow button{margin-left:auto}

/* 듣기 문제 보기: 단어 + 뜻 */
.opts .ovi{display:block; font-weight:700}
.opts .oko{display:block; font-size:12px; color:var(--dim); margin-top:2px}

/* 일정판 행 클릭 */
.planrow.go{cursor:pointer}
.planrow .parrow{margin-left:auto; font-size:13px; color:var(--ok); font-weight:700; flex:0 0 auto}
.planrow .pk{flex:0 0 64px}

/* 완료 취소 — 위의 .days button{width:100%} 가 이 작은 단추에도 걸려서
   줄을 반씩 갈라 먹었다. 날짜 제목이 한 글자씩 세로로 쌓이던 원인이다. */
.days li{display:flex; gap:6px; align-items:stretch}
.days li > button:first-child{flex:1 1 auto; min-width:0}
.days .nm{min-width:0}
.days .undo{
  flex:0 0 auto; width:auto; display:inline-flex; align-items:center; justify-content:center;
  padding:6px 10px; font-size:12px; white-space:nowrap; align-self:center;
}

/* 단어 예문 */
.wex{border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0; text-align:center}
.wex .wexvi{font-weight:700; font-size:17px}
.wex .wexkr{font-size:12px; color:var(--dim); margin-top:2px}
.wex .wexko{font-size:13px; color:var(--dim); margin:2px 0 6px}
/* 동그란 소리 단추 없애고 상자 전체를 누르면 재생되게 (대표님 지시, 2026-09-09) —
   눌러도 되는 상자라는 걸 커서·눌림 반응으로 알려준다. 안의 낱말 단추는 각자 따로 논다
   (tapw 자체 hover는 아래 낱말별 규칙이 이미 처리). */
.wexplay{cursor:pointer}
.wexplay:active{background:var(--surface-2)}

/* 통계 4칸 */
.stats{flex-wrap:wrap}

/* 월별 기후표 — 옆으로 민다 */
.wxscroll{overflow-x:auto; margin-bottom:10px}
.wxclim{min-width:640px}

/* 업종 고르기 줄 */
.catpick{display:flex; align-items:center; gap:6px; padding:4px 2px 10px; font-size:13px; color:var(--dim)}

/* 주간 성적표 과목 막대 */
.subj{display:flex; align-items:center; gap:8px; margin:7px 0}
.subj .sname{flex:0 0 42px; font-size:13px; font-weight:700}
.subj .sbar{flex:1; height:10px; background:var(--line); border-radius:6px; overflow:hidden}
.subj .sbar i{display:block; height:100%; background:var(--ok)}
.subj .spct{flex:0 0 42px; text-align:right; font-size:13px; font-weight:700}
.subj .sn{flex:0 0 56px; text-align:right; font-size:11px; color:var(--dim)}

/* 문화 카드 */
.cultemo{font-size:56px; text-align:center; margin:6px 0 2px}

/* 사용법 — 짧은 제목 + 한 줄씩 */
.gsec{border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:12px}
.gsec .ghead{font-size:16px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:8px}
.gsec .ghead span{color:var(--ok)}
.gsec ul{margin:0; padding-left:18px}
.gsec li{font-size:14px; line-height:1.65; margin-bottom:5px; color:var(--dim)}
.gsec li b{color:var(--fg)}

/* 날씨 — 강수량과 지역 설명 */
.wxday u{text-decoration:none; font-size:10px; color:#6aa9ff}
.wxnote{margin:2px 0 10px; padding-left:18px}
.wxnote li{font-size:14px; line-height:1.65; color:var(--dim); margin-bottom:6px}
.wxnote li b{color:var(--fg)}

/* 기사 분야 표찰 */
.newsrow .ncat{display:inline-block; font-size:10px; font-weight:700; color:var(--ok);
  border:1px solid var(--line); border-radius:6px; padding:1px 6px; margin-bottom:5px}

/* 선생님 사진 */
.tchface{width:132px; height:132px; object-fit:cover; border-radius:50%;
  animation:tsway 5s ease-in-out infinite; display:block; margin:0 auto}
.vi.mid{text-align:center; font-size:20px; margin-top:-6px}

/* 대화창 아이콘 버튼 */
.chatin .icon{padding:8px; line-height:0; flex:0 0 auto}
.chatin .icon svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.chatin .icon.pick{border-color:var(--ok); color:var(--fg)}
.chatin .icon.rec{border-color:#e05561; color:#e05561}
/* 성조 줄 — 입력칸 바로 위에 붙는 얇은 한 줄. 폰 자판을 막지 않는다. */
/* ── 화면 자판 — 베트남어 · 한글 ────────────────────────────────
   글자 배열은 베트남 사람들이 실제로 쓰는 QWERTY 그대로. 한글은 두벌식. */
/* 입력 막대 **아래**에 붙는다. 위에 있으면 화면 밖으로 밀려 아래 줄이 잘렸다. */
.tonebar{
  /* 아래 탭 막대가 항상 떠 있어서(2026-09-09) 그 위에 붙인다 — 안 그러면 겹쳐서 자판이 가린다 */
  position:sticky; bottom:var(--tabbar-h); z-index:40;
  padding:6px 0 6px; background:var(--bg);
  display:none; flex-direction:column; gap:5px;
  border-top:1px solid var(--line);
}
.tonebar.up{display:flex}
.kbrow{display:flex; gap:4px; justify-content:center}
.kbrow.r1{padding:0 4%}
.kbrow.r2{padding:0 1%}
/* 어느 자판을 보일지 — 베트남어 / 한글 / 숫자 */
.kbrow.ko,.kbrow.num{display:none}
.tonebar.koma .kbrow.vi,.tonebar.koma .kbrow.marks{display:none}
.tonebar.koma .kbrow.ko{display:flex}
.tonebar.num .kbrow.vi,.tonebar.num .kbrow.ko,.tonebar.num .kbrow.marks{display:none}
.tonebar.num .kbrow.num{display:flex}
.tk{
  flex:1 1 0; min-width:0; padding:11px 0; font-size:17px; line-height:1.1;
  touch-action:manipulation;                 /* 빠르게 두 번 눌러도 확대되지 않는다 */
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  background:var(--card); color:var(--fg); border:1px solid var(--line);
  border-radius:7px; text-align:center;
}
.kbrow.marks .tk{padding:8px 0; font-size:15px}
.tk.wide{flex:1.4 1 0; font-size:14px}
.tk.space{flex:3.6 1 0}
.tk.punc{flex:.7 1 0}
.tk.lang{background:var(--accent); color:var(--accent-fg); border-color:transparent; font-weight:700}
.tonebar.num .tk.numk{background:var(--fg); color:var(--bg)}
.tk.del,.tk.down{color:var(--dim)}
.tonebar.caps .kbrow.vi .tk.let{text-transform:uppercase}
.tonebar.caps .tk.shift{background:var(--fg); color:var(--bg)}
.tk.tonek .tarr{width:15px; height:15px; vertical-align:-3px}
.tk.tonek.ngang{color:var(--dim)}
.tk.tonek.huyền,.tk.tonek.nặng{color:var(--accent)}
.tk.tonek.sắc,.tk.tonek.ngã{color:var(--warn)}
.tk.tonek.hỏi{color:var(--bad)}

/* 헤더 프로필 아이콘 */
/* 홈 단추 — 메신저·내 정보와 **같은 선 아이콘**으로 그린다 (2026-08-31).
   규칙이 없으면 svg 의 기본 채우기(검정)가 먹어 홈만 새까맣게 보였다. */
#goHome{padding:7px; line-height:0}
#goHome svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
#goMe{padding:7px; line-height:0}
#goMe svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}

/* 대화 화면 선택 상자 — 파란 강조 없이 */
.pickbox{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:12px}
.rolepick .pick{border-color:var(--ok); color:var(--fg); font-weight:700}

/* 간략 복습 진행 점 */
.fldots{display:flex; gap:4px; justify-content:center; margin:10px 0 4px; flex-wrap:wrap}
.fldots i{width:6px; height:6px; border-radius:50%; background:var(--line)}
.fldots i.on{background:var(--ok)}

/* 홈 일정판 2×2 */
/* 홈 화면 — 대표님이 Stitch로 직접 만든 시안(이미지자료/디자인-소스/stitch-home.html)을
   그대로 따른다 (대표님 지시, 2026-09-12: "스티치가 디자인해준 화면을 보여주라고").
   색·반경 토큰은 이미 :root에 그 시안 값 그대로 있다 — 여기서는 그 시안의 짜임(인사말
   카드 → 주간 스트릭 카드 → 오늘 할 일 카드 2장 → 내일)만 새로 만든다. */
.plan{display:flex; flex-direction:column; gap:14px; margin:10px 0 6px}

/* 주간 스트릭 카드 (시안의 "Weekly Streak Widget") */
.weekcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg,12px);
  padding:16px; display:flex; flex-direction:column; gap:12px}
.weekcard-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.weekcard-title{display:flex; align-items:center; gap:8px}
.weekcard-title b{font-size:18px; font-weight:600}
.weekpill{font-size:13px; font-weight:600; color:var(--dim); background:var(--surface-2,var(--bg));
  padding:5px 10px; border-radius:999px; white-space:nowrap}

/* 오늘 할 일 — 섹션 머리 + 카드 2장 (시안의 "Today's Action Cards") */
.actionhead{display:flex; align-items:baseline; justify-content:space-between; padding:0 2px}
.actionhead b{font-size:18px; font-weight:600}
.actionhead span{font-size:13px; color:var(--dim)}
.actioncard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg,12px);
  padding:16px; display:flex; flex-direction:column; gap:12px}
.actioncard.main{border-width:2px; border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.actionrow{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.actiontag{display:inline-block; font-size:13px; font-weight:700; padding:2px 10px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); width:fit-content}
.actiontag.tertiary{background:var(--tertiary-soft); color:var(--tertiary)}
.actionmeta{font-size:13px; color:var(--dim); margin-left:8px}
.actiontitle{font-size:18px; font-weight:600; margin-top:4px}
.actionsub{font-size:14px; color:var(--dim); margin-top:2px}
.actionicon{width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:22px}
.actioncard.tertiary .actionicon{background:var(--tertiary-soft); color:var(--tertiary)}
.actionbtn{width:100%; height:50px; border-radius:var(--radius-lg,12px); font-size:16px; font-weight:700;
  border:1px solid var(--line); background:var(--card); color:var(--fg); cursor:pointer}
.actionbtn.primary{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}
.actionbtn:disabled{opacity:.55; cursor:default}

/* 내일 — 오늘보다 가볍게, 작은 두 칸으로 (시안엔 없지만 우리 앱은 예습도 보여줘야 함) */
.plantom{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.plancell{border:1px solid var(--line); border-radius:12px; padding:12px 12px 14px;
  min-height:74px; display:flex; flex-direction:column; gap:4px}
.plancell.go{cursor:pointer}
.plancell .pk{font-size:11px; color:var(--dim)}
.plancell .pv{font-size:14px; font-weight:700; line-height:1.35; white-space:pre-line}
.plancell.todo{border-color:#8c4a52; background:rgba(224,85,97,.09)}
.plancell.done{border-color:var(--ok); background:rgba(47,158,99,.10)}
.plancell.next{border-color:#3a4a6b; background:rgba(122,162,255,.07)}
.plancell.none .pv{color:var(--dim); font-weight:400}

/* 분석 막대 */
.bars{margin:2px 0 12px}
.barrow{display:flex; align-items:center; gap:8px; margin:6px 0}
.barrow .bname{flex:0 0 84px; font-size:12px}
.barrow .bbar{flex:1; height:12px; background:var(--line); border-radius:7px; overflow:hidden}
.barrow .bbar i{display:block; height:100%}
.barrow .bbar i.hi{background:var(--ok)}
.barrow .bbar i.mid{background:#d8a13c}
.barrow .bbar i.lo{background:#d1555f}
.barrow .bpct{flex:0 0 38px; text-align:right; font-size:13px; font-weight:700}
.barrow .bn{flex:0 0 50px; text-align:right; font-size:11px; color:var(--dim)}

/* 선생님 고르기 라벨 */
.pklab{font-size:12px; color:var(--dim); align-self:center; margin:0 2px}

/* 분석 머리말 */
.anahead{font-size:17px; font-weight:800; margin:6px 0 2px}

/* 타일 내용은 위로 붙인다 */
.mtile{justify-content:flex-start}
.mtile .mbtns{margin-top:8px}

/* 표본이 모자란 막대 */
.barrow.thin .bbar{background:repeating-linear-gradient(90deg,var(--line),var(--line) 6px,transparent 6px,transparent 12px)}
.barrow.thin .bpct,.barrow.thin .bn{color:var(--dim)}

/* 말하기 채점 결과 */
.judge{min-height:20px; margin-top:6px}
.okmsg{color:var(--ok)}
.nomsg{color:#e0757f}
.qmain.sent{font-size:24px; line-height:1.4}

/* 홈 큰 타일 — 칸 전체가 버튼 */
.menu{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.menu .mtile{position:relative; display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px; padding:12px 12px 14px; min-height:74px;
  background:transparent; color:var(--fg); text-align:left; cursor:pointer; font:inherit}
.menu .mtile b{font-size:15px}
.menu .mtile .msub{font-size:11px; color:var(--dim)}
.menu .mtile .mbadge{position:absolute; top:10px; right:10px; font-size:11px; font-weight:700;
  color:var(--ok); border:1px solid var(--ok); border-radius:10px; padding:1px 7px}

/* 하위 메뉴의 큰 버튼 */
.bigmenu{display:block; width:100%; text-align:left; font-size:16px; font-weight:700;
  padding:16px 18px; margin-bottom:8px; border:1px solid var(--line); border-radius:12px;
  background:transparent; color:var(--fg); cursor:pointer}
/* TOPIK 말하기 — 준비/응답 시간판.
   색만으로 두 상태를 나누지 않는다(색각 배려): 준비는 점선 테두리, 응답은 굵은 실선. */
.spkbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:12px 0 8px; padding:14px 16px; border-radius:12px}
.spkbar.prep{border:2px dashed var(--line); background:transparent}
.spkbar.resp{border:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.spklab{font-weight:700; font-size:16px}
.spknum{font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.spkbar.resp .spknum{color:var(--accent)}
.spkmeta{font-size:13px; color:var(--dim); margin-bottom:8px}
.spkstage{margin-top:4px}
/* 다시 풀 문항 — 목록 맨 위. 색만으로 알리지 않고 왼쪽 굵은 띠를 같이 둔다(색각 배려) */
.bigmenu.redo{border-color:var(--accent); border-left:5px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cb.note{background:transparent; border:1px dashed var(--line); color:var(--dim); font-size:13px; white-space:pre-line}

/* 동아리 — 이번 주 출석판 */
.cmem{display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:6px;
  border:1px solid var(--line); border-radius:10px}
.cmem.me{border-color:var(--accent)}
.cmem .cn{flex:0 0 78px; font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmem .dots{flex:1}
.cmem .dot{flex:0 0 auto; width:16px; height:16px; border-radius:4px}
.cmem .cw{font-size:12px; color:var(--dim); flex:0 0 auto}
.chk{display:flex; align-items:center; gap:8px; margin:10px 0 14px; font-size:14px; color:var(--dim)}
.chk input{width:18px; height:18px}

/* 첫 화면 맨 위 요약 세 칸 — 연속 / 진도 / 외운 단어 */
.dash{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:4px 0 10px}
.dcell{display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px 11px;
  border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--fg);
  font:inherit; cursor:pointer; text-align:center}
.dcell b{font-size:22px; font-weight:800; line-height:1.1}
.dcell .dk{font-size:12px; color:var(--dim)}
.dcell .dsub{font-size:10px; color:var(--dim); opacity:.75}

/* 전체 평균 막대 + 내 자리 눈금 */
.barrow .bbar.avg{position:relative; overflow:visible}
.barrow .bbar.avg i.avgfill{background:var(--dim); opacity:.55; border-radius:7px}
.barrow .bbar.avg u{position:absolute; top:-4px; width:3px; height:20px; border-radius:2px;
  background:var(--accent); transform:translateX(-1px)}

/* ── 단어 카드 (그림을 크게 두려고 글자 요소를 줄였다) ── */
.pic.big img{max-width:100%; max-height:230px; width:auto}
.wrow{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:4px}
.wrow .wkr{font-size:15px; color:var(--dim)}
button.bigw{background:transparent; border:0; padding:2px 4px; display:inline-flex; gap:10px;
  align-items:flex-end; cursor:pointer; color:var(--fg); font:inherit}
.bwsyl{display:inline-flex; flex-direction:column; align-items:center; line-height:1}
.bwsyl b{font-size:38px; font-weight:700}
.bwsyl i{display:block; height:22px; margin-top:3px}
.bwsyl i .tarr{width:22px; height:22px}
.bwsyl.ngang i{color:var(--dim)}
.bwsyl.huyền i,.bwsyl.nặng i{color:var(--accent)}
.bwsyl.sắc i,.bwsyl.ngã i{color:var(--warn)}
.bwsyl.hỏi i{color:var(--bad)}
.ibtn{background:transparent; border:1px solid var(--line); border-radius:10px; padding:7px;
  line-height:0; color:var(--fg); cursor:pointer}
.ibtn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.ibtn.mic{color:var(--bad); border-color:var(--bad)}
.ibtn.rec{background:var(--bad); color:#fff}

/* 예문 — 칸 전체가 버튼 (누르면 소리) */
button.wex{width:100%; background:transparent; color:var(--fg); font:inherit; cursor:pointer}
.wex .wextop{display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap}
.wex .wexvi{font-weight:700; font-size:17px}
.wex .wexkr{font-size:12px; color:var(--dim)}
.wex .wexko{font-size:13px; color:var(--dim); margin-top:3px}

/* 표지 — 설명은 단어 앞 한 장으로 */
.covert{font-size:24px; font-weight:800; margin-bottom:10px}
.coverb{font-size:15px; line-height:1.75; color:var(--dim)}
.coverb b{color:var(--fg)}

/* 한 번만 뜨는 안내 */
.modalback{position:fixed; inset:0; background:rgba(0,0,0,.62); display:grid; place-items:center;
  padding:24px; z-index:50}
.modalbox{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:20px 18px; max-width:340px; width:100%}
.modalb{font-size:15px; line-height:1.7; color:var(--dim); margin-bottom:16px}
.modalb b{color:var(--fg)}

/* 첫 화면 진도 카드는 일정판 바로 아래 */
.progress{margin:8px 0 4px}

/* 분석 [자세히] */
.moreana{margin:6px 0 14px; border:1px solid var(--line); border-radius:12px; padding:0 12px}
.moreana summary{cursor:pointer; padding:11px 0; font-size:14px; font-weight:700; color:var(--dim)}
.moreana[open] summary{color:var(--fg); border-bottom:1px solid var(--line); margin-bottom:8px}
.moreana .newsday{margin-top:12px}
.moreana .dimtxt{margin:-4px 0 6px; line-height:1.6}

/* ── 글자 키우기 (가독성) ────────────────────────────────
   폰에서 읽는 앱이다. 작은 글씨는 멋져 보이지만 매일 5분씩 보는 사람에게는 피로다. */
.menu .mtile b{font-size:19px}
.menu .mtile{min-height:66px; justify-content:center; padding:16px 14px}
.bigmenu{font-size:19px; padding:19px 20px}
.plancell .pk{font-size:13px}
.plancell .pv{font-size:16px}
.gsec li{font-size:15px}
.gsec .ghead{font-size:17px}
.lede{font-size:16px}
.note{font-size:14px}
.days button .nm{font-size:16px}
.days button .num{font-size:14px}
.days button .st{font-size:13px}
.opts button{font-size:17px}
.q{font-size:17px}
.ko{font-size:21px}
.wex .wexvi{font-size:19px}
.wex .wexko{font-size:15px}
.wex .wexkr{font-size:13px}
.rulecard .rbody{font-size:15px}
.rulenote{font-size:15px}
.awrow .awn{font-size:15px}
.stat b{font-size:22px}
.stat span{font-size:12px}
.phead strong{font-size:19px}

/* 표지에 얹는 문화 한 조각 */
.cultbox{margin-top:16px; border-top:1px solid var(--line); padding-top:14px; text-align:left}
.cultt{font-size:16px; font-weight:800; margin-bottom:6px}
.cultb{font-size:14px; line-height:1.75; color:var(--dim)}
.cultb b{color:var(--fg)}

/* 기사 원문 링크 */
.srclink{display:inline-block; margin-top:14px; font-size:14px; color:var(--accent); text-decoration:none}
.bigmenu .msub{display:block; font-size:13px; font-weight:400; color:var(--dim); margin-top:4px; line-height:1.5}

/* 기능어 카드 — 그림 대신 한 줄 공식 (그림으로 못 그리는 말은 자리를 보여줘야 이해된다) */
.formbox{border:1px dashed var(--line); border-radius:14px; padding:18px 16px; margin:6px 0 2px;
  min-height:120px; display:flex; flex-direction:column; justify-content:center; gap:8px}
.formf{font-size:22px; font-weight:800; line-height:1.4}
.formex{font-size:15px; color:var(--dim)}

/* 녹음 중 — 단추 이름은 그대로 두고 색으로만 알린다 */
.ibtn.rec-on, button.rec.rec-on{background:var(--bad); color:#fff; border-color:var(--bad)}
.ibtn.rec-on{animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.55}}

/* 머리 왼쪽 — 베트남 시각과 날씨. 시각 옆에 나란히 (밑에 붙이면 너무 작아 안 보인다) */
.wxnow{display:flex; align-items:center; gap:7px; padding:6px 10px; line-height:1.1}
.wxnow .wxt{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums}
.wxnow .wxd{display:inline-flex; align-items:center; gap:3px; font-size:17px}
.wxnow .wxd b{font-size:15px; font-weight:700; color:var(--dim)}

/* 버튼 글자는 가운데로 */
.menu .mtile{align-items:center; text-align:center}
.bigmenu{text-align:center}
.bigmenu .msub{text-align:center}
#subBody{text-align:center}
#subBody .lede, #subBody .note, #subBody .dimtxt{text-align:center}
.chatmode{align-items:center; text-align:center}

/* 메신저 — 대화 목록 (페이스북 메신저·자로 같은 모양) */
.msgrow{display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; margin-bottom:6px;
  border:0; border-radius:14px; background:transparent; color:var(--fg); cursor:pointer; text-align:left; font:inherit}
.msgrow:active{background:var(--card)}
.msgav{flex:0 0 auto; width:54px; height:54px; border-radius:50%; background:var(--card);
  display:grid; place-items:center; font-size:20px; font-weight:800; color:var(--dim); overflow:hidden}
.msgav img{width:54px; height:54px; object-fit:cover; border-radius:50%}
.msgmid{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; text-align:left}
.msgmid b{font-size:16px; font-weight:700}
.msgmid b i{font-style:normal; font-size:11px; font-weight:600; color:var(--dim);
  border:1px solid var(--line); border-radius:8px; padding:1px 6px; margin-left:5px}
.msglast{font-size:13px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msgbadge{flex:0 0 auto; min-width:22px; height:22px; border-radius:11px; background:#e0384a; color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center; padding:0 6px}
/* 알림 동그라미는 앱 전체에서 한 모양 — 쪽지(.msgbadge)와 같은 빨강·같은 굵기 */
.menu .mtile .mbadge.red{
  color:#fff; background:#e0384a; border-color:transparent;
  min-width:20px; height:20px; border-radius:10px; padding:0 6px;
  display:grid; place-items:center; font-weight:800;
}

/* 안내 줄 — 말풍선이 아니라 가로로 편다 (좌측에 뭉치면 선생님 말처럼 보인다) */
.cb.note.wide{align-self:stretch; max-width:100%; width:100%; text-align:center;
  background:transparent; border:1px dashed var(--line); color:var(--dim); font-size:13px}
/* 하위 메뉴의 안 읽음 표시 */
.bigmenu .mbadge{margin-left:8px; font-size:12px; font-weight:800; border-radius:11px; padding:2px 8px}
.bigmenu .mbadge.red{background:#e0384a; color:#fff; border-color:transparent}
/* 얼굴은 가운데를 보게 (오른쪽으로 치우쳐 잘리던 것) */
.msgav img, .tchface{object-position:center 22%}

/* 방 안 '문장 고르기' 단추 */
.pickline{display:block; margin:0 auto 10px; padding:7px 14px; font-size:13px}

/* 발음 판정 — 성조 그림 위에, 초록/빨강으로 */
.saidbox{width:100%}
.ainote{border-radius:12px; padding:10px 12px; margin:2px 0 8px; text-align:center; font-size:14px}
.ainote b{display:block; font-size:16px}
.ainote span{display:block; font-size:12px; margin-top:3px; opacity:.85}
.ainote.ok{color:var(--ok); border:1px solid var(--ok)}
.ainote.no{color:var(--bad); border:1px solid var(--bad)}

/* 대화 속 새 단어와 현지 표현 */
.cb .cnew{font-size:13px; color:var(--ok); margin-top:5px}
.cb .creal{font-size:13px; color:var(--accent); margin-top:3px}

/* 표지 그림 — 글보다 먼저 눈에 들어오되 주인공은 아니다 */
.pic.cover img{max-width:100%; max-height:170px; width:auto; border-radius:14px}
.pic.cover{margin-bottom:14px; font-size:52px}

/* 대화 속 새 단어와 현지 표현 */
.cb .cnew{font-size:13px; color:var(--ok); margin-top:5px}
.cb .creal{font-size:13px; color:var(--accent); margin-top:3px}

/* 표지 그림 — 글보다 먼저 눈에 들어오되 주인공은 아니다 */
.pic.cover img{max-width:100%; max-height:170px; width:auto; border-radius:14px}
.pic.cover{margin-bottom:14px; font-size:52px}

/* 머리 메신저 단추 — 안 읽은 것이 있으면 빨간 점 */
#goChat{padding:7px; line-height:0; position:relative}
#goChat svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round}
/* 안 읽은 **개수**를 적는다(점 하나였던 것을 바꿈 — '몇 개 왔나'가 다른 정보다).
   색만으로 알리지 않는다: 숫자와 흰 테두리를 같이 둬서 색을 못 가리는 눈에도 보이게 한다. */
#goChat .chatdot{position:absolute; top:1px; right:1px; min-width:16px; height:16px; padding:0 4px;
  border-radius:9px; background:#e0384a; border:2px solid var(--bg); box-sizing:border-box;
  color:#fff; font:700 10px/12px -apple-system,sans-serif; font-style:normal;
  text-align:center; letter-spacing:-.3px}

/* 표지의 짧은 사용법 */
.coverhow{margin-top:14px; border:1px dashed var(--line); border-radius:12px; padding:11px 13px;
  font-size:13px; line-height:1.7; color:var(--dim); text-align:left}
.coverhow b{color:var(--fg)}

/* ---------- 동아리 사람들 ----------
   사진을 안 올린 사람은 실루엣. 색 하나로만 구별하지 않게 테두리도 함께 준다. */
.mav{flex:0 0 auto; width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--card); border:1px solid var(--line); display:inline-flex;
  align-items:center; justify-content:center; vertical-align:middle}
.mav img{width:100%; height:100%; object-fit:cover}
.mav .silh{width:100%; height:100%; fill:var(--line); display:block}
.mav.row{width:54px; height:54px}
.mav.big{width:88px; height:88px}
.mhead{display:flex; align-items:center; gap:14px; margin:6px 0 12px}
.mname{display:flex; flex-direction:column; gap:3px; min-width:0}
.mname b{font-size:20px}
.mname b i{font-style:normal; font-size:12px; color:var(--dim)}
.mname .msub{font-size:13px; color:var(--dim)}
.dots.wk{margin:4px 0 6px}
.stats.mine{margin:10px 0 4px}
.newdot{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#e0384a}
.cmem{width:100%; text-align:left; color:var(--fg)}
.cmem .mav{width:30px; height:30px}
.cb .dmt{display:block; margin-top:3px; font-size:11px; opacity:.65}
.dmwarn{border:1px solid var(--line); border-radius:10px; padding:9px 12px; margin-bottom:4px}
/* 같은 갈래 — 표지 아래에 붙는 이어가기 단추들 */
.kinbox{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px}
.kint{width:100%; font-size:13px; color:var(--dim); margin-bottom:2px}
.kinbox .ghost.sm{font-size:13px; padding:6px 10px}

/* 머리말과 번호는 줄이 늘어나면 안 된다 ('보기'가 '보/기'로 쪼개지던 자리) */
.catpick > span{white-space:nowrap; flex:0 0 auto}
.days .num{white-space:nowrap}
/* 미리 나오는 말 — 표지 아래 */
.prew{font-size:13px; background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:5px 9px}
.prew b{font-weight:700}
.cb .tonenote{display:block; margin-top:5px; font-size:12px; opacity:.8}
.vnbox .cultb{font-size:15px; line-height:1.75}
/* 한국어로 썼을 때 — 베트남어로 어떻게 말하는지 발판을 준다 */
.csay{margin-top:8px; padding:9px 12px; border-radius:10px; background:var(--bg);
  border:1px solid var(--accent); display:flex; flex-direction:column; gap:3px; align-items:flex-start}
.csayh{font-size:12px; color:var(--dim)}
.csay b{font-size:17px}
.csaykr{font-size:13px; color:var(--dim)}

/* 판정 칸 — 그래프 아래. 발음(AI가 글자를)과 높낮이(곡선이 성조를)는 서로 다른 것을 본다.
   색만으로 가르지 않는다: O/X 모양과 테두리가 함께 말해 준다. */
.saidbox{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.vrow{
  flex:1 1 0; min-width:0; display:grid; grid-template-columns:auto auto;
  justify-content:center; align-items:baseline; column-gap:8px; row-gap:3px;
  padding:12px 8px; border:1px solid var(--line); border-radius:12px; text-align:center;
}
.vrow.ok{border-color:var(--ok)}
.vrow.no{border-color:var(--bad)}
.vname{grid-column:1; font-size:15px; font-weight:700}
.vmark{grid-column:2; font-size:24px; font-weight:800; line-height:1}
.vrow.ok .vmark{color:var(--ok)}
.vrow.no .vmark{color:var(--bad)}
.vsub{grid-column:1 / 3; font-size:12px; color:var(--dim); line-height:1.5;
  word-break:keep-all; overflow-wrap:anywhere}

/* 한글 ↔ 베트남어 바꿈 글쇠 — 실제 자판의 한/영 키 자리 */
.tk.lang{flex:0 0 auto; min-width:46px; font-weight:700; background:var(--bg)}
.tk.lang.vi{border-color:var(--accent); color:var(--accent)}
/* 틀렸을 때 어떻게 하라는 한 줄 */
.fixtip{flex-basis:100%; margin-top:8px; padding:9px 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--line); font-size:13px; line-height:1.6;
  color:var(--fg); word-break:keep-all}
.fixtip i{font-style:normal; color:var(--dim)}
/* 녹음 중 실시간 표시 */
.livebox{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:10px;
  padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.livehead{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--dim)}
.livehead b{color:var(--fg); font-variant-numeric:tabular-nums; font-size:15px}
.livedot{width:10px; height:10px; border-radius:50%; background:#e0384a; animation:blip 1s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}
.livecv{width:100%; height:150px; display:block}
.livetip{font-size:13px; color:var(--dim); text-align:center; word-break:keep-all}
.livetip b{color:var(--fg)}
/* 손글씨 채점 — 볼 곳 셋을 따로 보여준다 */
.hrow{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px}
.hchip{font-size:12px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); color:var(--dim); white-space:nowrap}
.hchip.ok{border-color:var(--ok); color:var(--ok)}
.hchip.no{border-color:var(--bad); color:var(--bad)}
.fixtip.soft{background:transparent; border-style:dashed; color:var(--dim)}
.fixtip.soft b{color:var(--fg)}
.nickerr{color:var(--bad)}
/* 사용법 — 왜 이렇게 만들었나 */
.gwhy{font-size:19px; font-weight:700; margin:30px 0 4px; padding-top:20px; border-top:2px solid var(--line)}
.grow{display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line)}
.gnum{flex:0 0 76px; text-align:right; font-size:23px; font-weight:800; line-height:1.15;
  color:var(--accent); font-variant-numeric:tabular-nums; padding-top:1px}
.gnum span{font-size:14px; font-weight:700}
.gtxt{flex:1; min-width:0; font-size:14px; line-height:1.72; color:var(--dim); word-break:keep-all}
.gtxt > b:first-child{color:var(--fg); font-size:15.5px}
.gsrc{display:inline-block; margin-left:4px; font-size:11.5px; padding:1px 7px; border-radius:999px;
  background:var(--card); border:1px solid var(--line); white-space:nowrap}
.gfoot{margin-top:18px; font-size:11.5px; line-height:1.85; color:var(--dim); word-break:keep-all}
.gfoot i{font-style:italic}

/* ── 녹음 중 — 화면 전체 ─────────────────────────────────────────
   작은 상자 안에서 녹음하니 지금 녹음 중인지, 어디를 눌러야 끝나는지 몰라 헤맸다. */
.recfull{
  position:fixed; inset:0; z-index:60; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding:24px; text-align:center;
}
.rechead{display:flex; align-items:baseline; gap:8px; font-size:16px; color:var(--dim)}
.rechead .recleft{font-size:34px; font-weight:800; color:var(--fg); font-variant-numeric:tabular-nums}
.rechead .recsec{font-size:15px}
.recfull .livedot{
  width:12px; height:12px; border-radius:50%; background:var(--bad);
  align-self:center; animation:recblink 1s steps(2,end) infinite;
}
@keyframes recblink{50%{opacity:.25}}
.recstop{
  width:172px; height:172px; border-radius:50%; border:6px solid var(--bad);
  background:transparent; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 0 rgba(220,60,60,.45); animation:recpulse 1.6s ease-out infinite;
}
@keyframes recpulse{70%{box-shadow:0 0 0 26px rgba(220,60,60,0)}100%{box-shadow:0 0 0 0 rgba(220,60,60,0)}}
.recstop .recsq{width:74px; height:74px; border-radius:12px; background:var(--bad); display:block}
.recfull .livecv{width:100%; max-width:520px; height:110px}
.recfull .livetip{font-size:17px; color:var(--fg)}
.recfull .rechint{font-size:14px; color:var(--dim)}
@media (prefers-reduced-motion:reduce){
  .recfull .livedot,.recstop{animation:none}
}

/* 자판 사용법 */
.kbdemo{border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0; line-height:2}
.kbdemo .big{font-size:22px; color:var(--accent)}
.kbtab{display:flex; flex-direction:column; gap:6px}
.kbtr{display:flex; align-items:center; gap:10px; padding:8px 10px;
      background:var(--card); border-radius:10px}
.kbtr .kbk{flex:0 0 68px; font-weight:700; font-family:ui-monospace,monospace; color:var(--accent)}
.kbtr .kbt{flex:0 0 92px; color:var(--dim); font-size:14px}
.kbtr .kbm{flex:0 0 54px; font-size:20px; font-weight:700}
.kbtr .kbko{flex:1; color:var(--dim); font-size:13px}

/* 문장 줄 — 듣기 단추는 문장 오른쪽 */
.lrow{display:flex; align-items:flex-start; gap:8px}
.lrow .lvi{flex:1; min-width:0}
.lrow .ibtn{flex:0 0 auto; margin-top:2px}
.ibtn.playi svg{fill:currentColor; stroke:none}
/* 낱말 칸 — 누르면 소리가 난다 */
.gcell{cursor:pointer; border-radius:8px; transition:.12s}
.gcell:active{transform:scale(.97)}
.gcell:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 시험 화면의 '따라 말하기' — 누를 사람만 누르는 작은 자리 */
.qsay:empty{display:none}
.qsay{margin:10px 0 0}
.qplay .ibtn.mic{flex:0 0 auto}

/* 기본기·문법 문제의 정답 줄 — 하루 5분 카드와 같은 틀 */
.rsay{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line)}
.rsay .wrow{justify-content:center}

/* 시험의 낱말 — 누르면 소리가 난다 (따로 듣기 단추를 두지 않는다) */
.qmain.qtap{
  display:block; width:100%; background:transparent; border:1px dashed var(--line);
  color:var(--fg); cursor:pointer; padding:14px 10px; border-radius:12px;
}
.qmain.qtap:active{transform:scale(.99)}

/* 계정 화면 */
.row2{display:flex; gap:8px; margin-top:12px}
.row2 .primary{flex:2} .row2 .ghost{flex:1}
#subBody .keyin{width:100%; margin-top:8px; padding:12px 14px; font:inherit;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg)}
/* 쪽지방 프로필 줄 */
.dmprof{align-self:center; margin-bottom:4px}

/* ── 페이스북식 카드 느낌 ── */
.card,.bigmenu,.days button,.msgrow,.cmem,.result,.wex,.kbtr,.planrow,.q{
  background:var(--card); box-shadow:var(--shadow); border-color:transparent;
}
.banner{background:var(--card); box-shadow:var(--shadow)}
.opts button{background:var(--card); box-shadow:var(--shadow)}
.tk{box-shadow:var(--shadow)}
/* 자판 눌림 반응 */
.tk.hit{background:var(--accent); color:var(--accent-fg)}
.tk{position:relative}
.kpop{
  position:absolute; left:50%; top:-44px; transform:translateX(-50%);
  min-width:40px; padding:8px 6px; border-radius:9px; font-style:normal;
  background:var(--card); color:var(--fg); font-size:24px; font-weight:700;
  box-shadow:0 3px 12px rgba(0,0,0,.3); pointer-events:none; z-index:50;
}
/* 폰 자판 모드 — 돌아오는 한 줄만 남는다 */
.kbrow.nat{display:none}
.tonebar.natmode .kbrow{display:none}
.tonebar.natmode .kbrow.nat{display:flex}
.tk.natk{color:var(--dim)}

/* 동아리 갈래 고르기·가입 프로필 */
.catpick{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px}
.catchipbtn{background:var(--card); box-shadow:var(--shadow); border-color:transparent;
  padding:8px 12px; border-radius:999px; font-size:14px; color:var(--fg)}
.catchipbtn.on{background:var(--accent); color:var(--accent-fg); font-weight:700}
.clubrow .minechip{font-style:normal; font-size:11px; color:var(--accent); margin-left:6px}
.profbox{margin:10px 0}

/* 동아리 담벼락 */
.feedin{display:flex; gap:8px; margin:6px 0 12px}
.feedin .keyin{flex:1; min-width:0}
.feedlist{display:flex; flex-direction:column; gap:8px}
.feedcard{background:var(--card); box-shadow:var(--shadow); border-radius:var(--radius); padding:10px 12px}
.feedhd{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.feedhd .dmt{margin-left:auto}
.feedtx{white-space:pre-wrap; overflow-wrap:anywhere}
/* 쪽지 번역·교정 */
.dmtools{display:flex; gap:6px; margin-top:6px}
.dmtrans{display:block; margin-top:6px; padding-top:6px; border-top:1px dashed var(--line);
  color:var(--dim); font-size:14px}

/* ---------- 모의고사 ----------
   연습 화면과 눈에 띄게 달라야 한다 — 시험을 보고 있다는 게 느껴져야 긴장이 붙는다.
   그래서 시간이 늘 위에 떠 있고, 고른 답은 테두리를 굵게 해 색맹이어도 구분된다. */
.exhead{font-size:15px; margin:20px 0 4px}
.exmeta{color:var(--dim); font-weight:400; font-size:13px; margin-left:8px}
.exbar{display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; margin-bottom:10px; border-radius:12px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow)}
.expos{font-weight:700}
.extime{font-variant-numeric:tabular-nums; font-weight:700; font-size:18px; color:var(--dim)}
.extime.hot{color:var(--bad)}          /* 1분 남으면 색이 바뀐다 */
.exsec{background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:7px 12px; font-size:13px; color:var(--dim); margin:0 0 10px}
.excard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow); margin-bottom:12px}
.excard.wrong{border-left:4px solid var(--bad)}
.exask{font-weight:700; font-size:17px; line-height:1.5}
.exbody{background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:10px 14px; margin:10px 0; line-height:1.6}
.expic{display:block; max-width:190px; width:60%; margin:12px auto;
  border:1px solid var(--line); border-radius:10px}
.exopt{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  font-size:16px; padding:13px 15px; margin-top:8px; cursor:pointer;
  background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:10px}
/* 고른 답 — 색만으로 알리지 않는다. 테두리 굵기와 배경을 같이 바꾼다 */
.exopt.on{border:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  font-weight:700; padding:12px 14px}
.exnum{color:var(--dim); font-weight:700; flex-shrink:0}
.exopt.on .exnum{color:var(--accent)}
/* 답이 잠긴 상태(EPS) — 색만으로 알리지 않는다. 고르지 않은 보기는 흐려지고,
   고른 보기는 자물쇠가 붙어 '못 누르는' 것이 아니라 '정해진' 것으로 읽힌다. */
.exopt.lockd,.exopti.lockd{cursor:default; opacity:.45}
.exopt.lockd.on,.exopti.lockd.on{opacity:1}
.exopt.lockd.on::after{content:"🔒"; margin-left:auto; font-size:15px}
.lockmsg{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line)}
/* 단답형(KIIP 사전평가) — 보기 대신 직접 써 넣는 칸. 보기와 같은 크기·모서리로 맞춘다 */
.exshort{width:100%; font-size:18px; padding:14px 15px; margin-top:10px;
  background:transparent; color:var(--fg); border:2px solid var(--line); border-radius:10px}
.exshort:focus{outline:none; border-color:var(--accent)}
.exnav{display:flex; gap:8px; margin:14px 0}
.exnav button{flex:1}
.expad{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; padding-top:14px;
  border-top:1px dashed var(--line)}
.expn{width:38px; height:38px; font-size:14px; cursor:pointer; border-radius:8px;
  background:transparent; color:var(--dim); border:1px solid var(--line)}
/* 푼 문항은 채워서, 지금 문항은 테두리로 — 두 가지를 다른 방식으로 표시해야 겹쳐 보이지 않는다 */
.expn.done{background:var(--accent); color:var(--accent-fg); border-color:var(--accent); font-weight:700}
.expn.cur{outline:2px solid var(--fg); outline-offset:1px}
/* 안 푼 문제 — 공식 IBT 가 붉은색으로 표시한다("붉은색 표시는 안 푼 문제입니다").
   푼 것을 칠하는 것보다 **안 푼 것을 드러내는 것**이 실제 시험의 방식이다.
   색만으로 알리지 않는다: 테두리를 굵게 하고 아래에 점을 하나 찍는다(색각 배려). */
.expn.todo{border:2px solid var(--bad); color:var(--bad); font-weight:700;
  position:relative}
.expn.todo::after{content:""; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--bad)}
.exans{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line);
  font-size:14px; color:var(--dim)}
@media (max-width:400px){ .expn{width:34px; height:34px; font-size:13px} }

/* 듣기·읽기 문항 */
.expass{background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:8px; padding:14px 16px; margin-bottom:14px; line-height:1.75; font-size:15px}
.exptit{font-weight:700; margin-bottom:8px; color:var(--accent)}
.explay{display:block; width:100%; margin:14px 0 4px; padding:15px; font-size:17px; font-weight:700;
  cursor:pointer; background:var(--accent); color:var(--accent-fg); border:0; border-radius:10px}
/* 듣고 그림 고르기 — 보기가 그림이면 두 칸으로 늘어놓아야 한눈에 견준다 */
.exgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.exopti{position:relative; padding:8px; cursor:pointer; background:transparent;
  border:1px solid var(--line); border-radius:10px}
.exopti img{width:100%; aspect-ratio:1; object-fit:contain; display:block}
.exopti .exnum{position:absolute; top:6px; left:8px; font-size:15px}
.exopti.on{border:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); padding:7px}
/* 채점 뒤 듣기 대본 — 못 알아들은 말을 눈으로 확인하는 자리 */
.exscript{background:var(--bg); border:1px dashed var(--line); border-radius:8px;
  padding:10px 14px; margin:10px 0; font-size:14px; line-height:1.7; color:var(--dim)}

/* 구술·작문 — AI 채점 결과 */
.exwrite{width:100%; font-family:inherit; font-size:16px; line-height:1.7; padding:14px;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg);
  margin-top:12px; resize:vertical}
.exgrade{margin-top:12px}
/* 채점 결과는 줄마다 끊어 보여준다 — 한 덩어리로 주면 '고칠 점'이 눈에 안 들어온다 */
.exgline{padding:9px 13px; margin-top:6px; border-radius:8px; background:var(--bg);
  border:1px solid var(--line); font-size:15px; line-height:1.6}
.exgline:first-child{background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:var(--accent); font-weight:700}

/* ---------- 기초 문법 카드 ---------- */
.gpat{display:inline-block; font-size:15px; font-weight:700; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px;
  padding:4px 14px; margin-bottom:10px}
.gexp{font-size:15px; line-height:1.6; color:var(--dim); margin-top:10px}
.gexp.vi{border-top:1px dashed var(--line); padding-top:10px; margin-top:10px}
.gex{background:var(--bg); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin-top:14px}
/* 그림이 붙는 줄은 가로로 눕힌다 — 그림 왼쪽, 글 오른쪽.
   그림이 없으면 .gexwrap 이 아예 안 생기므로 예전 모양 그대로다. */
.gexwrap{display:flex; align-items:center; gap:12px}
.gexwrap>.gextxt{flex:1; min-width:0}
.gexpic{flex-shrink:0; width:64px; height:64px; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:34px;
  background:var(--card); border:1px solid var(--line)}
.gexpic img{width:100%; height:100%; object-fit:cover; display:block}
.gexko{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:17px; font-weight:700}
.gexvi{font-size:15px; color:var(--dim); margin-top:6px}
/* 스티치 실제 화면(플래시카드 소스)의 소리 단추 그대로: 44px 원, 옅은 파랑 배경,
   테두리 없음 — 손가락 최소 크기(44px) 규정과도 맞아떨어진다(2026-09-09). */
.iconbtn{flex-shrink:0; width:44px; height:44px; border-radius:50%; border:none;
  background:var(--accent-soft); color:var(--accent); font-size:18px; cursor:pointer}

/* ---------- 나만의 단어장 · 문장 눌러보기 (2026-08) ---------- */
.starb { background:none; border:0; font-size:22px; line-height:1; padding:2px 6px;
  color:var(--dim,#9aa0a6); cursor:pointer; }
.starb.on { color:#f5a623; }
.wbtabs { display:flex; gap:8px; margin-bottom:14px; }
.wbtab { flex:1; padding:12px 8px; border-radius:12px; border:1px solid var(--line,#e4e6eb);
  background:var(--card,#fff); font-weight:700; font-size:15px; cursor:pointer; }
.wbtab.on { background:var(--accent,#1877F2); color:#fff; border-color:var(--accent,#1877F2); }

/* 문장 속 낱말 — 누르면 소리와 뜻 */
.tapwrap { margin:6px 0; }
.tapline { line-height:2; }
.tapw { background:none; border:0; border-bottom:1px dashed var(--line,#cbd2db);
  font:inherit; color:inherit; padding:0 1px; cursor:pointer; border-radius:4px; }
.tapw.nom { border-bottom-style:dotted; opacity:.75; }
.tapw.on { background:var(--accent,#1877F2); color:#fff; border-bottom-color:transparent; }
.tapinfo { min-height:1.4em; margin-top:4px; font-size:14px; color:var(--dim,#65676B); }
.tapinfo b { color:var(--fg,#050505); }
.lvi .tapw { font-size:inherit; }

/* ---------- 출석 크레딧 ---------- */
.crbig { text-align:center; padding:22px 0 6px; }
.crnum { font-size:52px; font-weight:900; color:var(--accent,#1877F2); line-height:1; }
.crsub { font-size:15px; color:var(--dim,#65676B); margin-top:8px; font-weight:500; }
.crcmp { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  background:var(--card,#fff); border:1px solid var(--line,#E4E6EB); border-radius:14px;
  padding:14px 16px; margin:14px 0 6px; font-size:16px; }
.crdiff { font-weight:800; color:#D93025; }
.crdiff.up { color:#1E8E3E; }
.crclub { background:var(--card,#fff); border:1px solid var(--line,#E4E6EB);
  border-radius:16px; padding:16px; margin:14px 0; }
.crct { font-weight:800; margin-bottom:12px; font-size:16px; }
.crgrid { display:flex; gap:10px; }
.crcell { flex:1; text-align:center; background:var(--bg); border-radius:12px; padding:12px 6px; }
.crcell b { display:block; font-size:26px; font-weight:900; color:var(--accent,#1877F2); }
.crcell span { font-size:13px; color:var(--dim,#65676B); }
.crearn { background:var(--card,#fff); border:1px solid var(--line,#E4E6EB);
  border-radius:16px; overflow:hidden; }
.crrow { display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-top:1px solid var(--line,#E4E6EB); }
.crrow:first-child { border-top:0; }
.crplus { flex:0 0 62px; font-weight:900; font-size:19px; color:var(--accent,#1877F2); }
.crwhy { flex:1; font-size:15px; color:var(--fg); text-align:left; }
/* 이번 주 순위판 — 월요일마다 초기화되므로 '영영 꼴찌'가 없다 */
.crreset { float:right; font-size:11px; font-weight:600; color:var(--dim); }
.crank { display:flex; align-items:center; gap:10px; padding:9px 2px;
  border-top:1px solid var(--line); }
.crank:first-of-type { border-top:0; }
.crank.me { background:var(--bg); border-radius:10px; padding-left:8px; padding-right:8px; }
.crno { flex:0 0 22px; font-weight:900; font-size:15px; color:var(--dim); text-align:center; }
.crno.hi { color:var(--accent); }
.crmine { font-weight:400; color:var(--dim); font-size:12px; margin-left:4px; }
.crnick { flex:0 0 100px; font-size:14px; font-weight:700; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.crbar { flex:1; height:8px; background:var(--bg); border-radius:99px; overflow:hidden; }
.crbar i { display:block; height:100%; background:var(--accent); border-radius:99px; }
.crval { flex:0 0 42px; text-align:right; font-weight:800; font-size:14px;
  font-variant-numeric:tabular-nums; }
/* 순위 화면 — 등수가 주인공, 크레딧 지갑은 아래로 */
.crgap { margin-top:10px; font-size:14px; color:var(--accent); font-weight:700; }
.crgap.top { color:var(--ok); }
.crwallet { margin-top:26px; padding:16px; border:1px dashed var(--line);
  border-radius:14px; background:var(--card); }
.crwline { display:flex; align-items:baseline; gap:12px; margin:8px 0 2px; }
.crwline b { font-size:24px; font-weight:900; color:var(--accent); }
.crwline span { font-size:13px; color:var(--dim); }
.crwallet .note { margin-top:8px; }
/* 내 정보 — 직접 고르는 줄 */
.pickrow { margin:10px 0; }
.pklab { font-size:13px; color:var(--dim); margin-bottom:6px; font-weight:600; }
.pkopts { display:flex; gap:8px; flex-wrap:wrap; }
.pkopt { flex:1 1 auto; min-width:96px; padding:12px 10px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  font-size:14px; font-weight:700; cursor:pointer; }
.pkopt.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.crnote { display:block; font-size:12px; color:var(--dim); font-weight:400; margin-top:2px; }

/* ── 오답 해설 ─────────────────────────────────────────────── */
.exwhy{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.exwhead{font-size:12px;letter-spacing:.06em;color:var(--dim);margin-bottom:7px}
.exwrow{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;
  font-size:14px;line-height:1.6;border:1px solid transparent}
.exwrow+.exwrow{margin-top:3px}
.exwno{flex:0 0 auto;color:var(--dim);font-weight:700}
.exwtx{flex:1 1 auto}
.exwrow.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);
  border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.exwrow.ok .exwno{color:var(--ok)}
.exwrow.mine{background:color-mix(in srgb,var(--bad) 12%,transparent);
  border-color:color-mix(in srgb,var(--bad) 40%,transparent);border-style:dashed}
.exwrow.mine .exwno{color:var(--bad)}
.exwtag{display:inline-block;margin-left:6px;font-size:11px;padding:1px 6px;border-radius:99px;
  background:var(--bad);color:#fff;vertical-align:1px}
.exnote{font-size:13px;color:var(--dim)}

/* ── 시험 목록: 목적별로 접어 둔다 ─────────────────────────── */
.excat{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--card);overflow:hidden}
.excat>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;
  font-size:16px;list-style:none;user-select:none}
.excat>summary::-webkit-details-marker{display:none}
.excat>summary::after{content:'▾';margin-left:auto;color:var(--dim);transition:transform .18s}
.excat[open]>summary::after{transform:rotate(180deg)}
.excat>summary:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.exicon{font-size:20px;line-height:1}
.excat>summary .exmeta{margin-left:6px;color:var(--dim);font-size:13px}
.excat>*:not(summary){margin-left:16px;margin-right:16px}
.excat>*:last-child{margin-bottom:14px}
.excat .exhead{margin-top:14px}

/* ── 동아리 목록: 고르는 재미가 절반이다 ───────────────────── */
.chiprow{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--fg);
  border-radius:99px;padding:6px 12px;font-size:13px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--dim)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:600}
.grp.sub{font-size:12px;color:var(--dim);margin-top:14px}

.clubcard{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;margin-bottom:8px;cursor:pointer;color:var(--fg)}
.clubcard:hover{border-color:var(--dim)}
.clubcard.mine{border-color:var(--accent);border-width:2px;
  background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.clubcard.big{padding:16px}
.ccat{flex:0 0 auto;font-size:26px;line-height:1.1;width:34px;text-align:center}
.clubcard.big .ccat{font-size:34px;width:42px}
.cmid{flex:1 1 auto;min-width:0}
.ctitle{display:block;font-weight:700;font-size:16px;line-height:1.35}
.clubcard.big .ctitle{font-size:18px}
.ctitle .minechip{display:inline-block;margin-left:6px;font-size:11px;font-style:normal;
  padding:1px 7px;border-radius:99px;background:var(--accent);color:#fff;vertical-align:2px}
.cdesc{display:block;font-size:13px;color:var(--dim);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ctag{font-style:normal;font-size:11.5px;padding:2px 8px;border-radius:99px;
  background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--dim)}
.ctag.num{font-variant-numeric:tabular-nums}
.ctag.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.cgo{flex:0 0 auto;color:var(--dim);font-size:20px;align-self:center}
.clubcard.mine .cgo{color:var(--accent)}

/* ── 담벼락 사진 ───────────────────────────────────────────── */
.camb{flex:0 0 auto;padding:0 12px;font-size:18px;line-height:1}
.feedprev{position:relative;display:inline-block;margin:4px 0 2px}
.feedprev img{max-width:170px;max-height:130px;border-radius:10px;display:block}
.prevx{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;
  border:none;background:var(--fg);color:var(--bg);font-size:13px;line-height:24px;
  padding:0;cursor:pointer}
.feedimg{margin-top:8px}
.feedimg img{width:100%;max-width:420px;border-radius:10px;display:block}
.imgwait{font-size:12px;color:var(--dim);padding:14px 0}

/* ── 순위: 메달과 딸림글 ───────────────────────────────────── */
.crno.hi{font-size:17px}
.cnsub{display:block;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:1px}

/* ── TOPIK II 쓰기: 빈칸 두 자리 ─────────────────────────── */
.blankrow{display:flex;align-items:center;gap:10px;margin:10px 0}
.blankno{flex:0 0 auto;font-size:19px;font-weight:700;color:var(--accent);width:26px;text-align:center}
.blankrow .keyin{flex:1 1 auto;margin:0}
.exgline.dim{color:var(--dim);font-size:13px;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}

/* 더 공부할 곳 — 우리 자료가 아니라 남의 자료라는 것이 한눈에 보여야 한다.
   그래서 카드 왼쪽에 다른 색 띠를 두고, 주소를 그대로 드러낸다(어디로 가는지 알고 눌러야 한다). */
.morelink:hover,.morelink:focus-visible{border-color:var(--accent); outline:none}

/* 짝 미션 — 세트를 끝낸 뒤에 나온다. 카드 두 장은 각자 자기 것만 연다. */
.mission{margin-top:18px; border-left:3px solid var(--accent)}
.msgoal{font-size:17px; font-weight:700; line-height:1.5}
.msrow{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.msrole{flex:1 1 46%; min-width:150px; display:flex; flex-direction:column; gap:5px;
  align-items:flex-start; text-align:left; padding:13px 15px; border-radius:12px;
  border:1px dashed var(--line); background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.55; cursor:pointer}
.msrole b{font-size:15px}
.msrole span{color:var(--dim)}
.msrole.open{border-style:solid; border-color:var(--accent); cursor:default}
.msrole.open span{color:var(--ink)}

/* 공통문항 — 회차끼리 견줄 수 있는 유일한 숫자라 눈에 띄어야 한다 */
.anchor{border-left:3px solid var(--accent); margin-top:14px}
.anch{font-size:19px; font-weight:800}

/* 로그인 화면의 말 고르기 — 여기가 앱의 문이다. 읽지 못해도 누를 수 있어야 한다. */
.langpick{display:flex; gap:8px; justify-content:center; margin:0 0 16px}
.langbtn{padding:7px 16px; border-radius:999px; border:1px solid var(--line);
  background:var(--bg); color:var(--dim); font-size:14px; cursor:pointer}
.langbtn.on{border:2px solid var(--accent); color:var(--ink); font-weight:700;
  background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* 과정 고르기 — 앱에서 가장 중요한 한 번의 선택. 두 말을 나란히 보여 준다. */
.learnpick{display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  text-align:left; padding:18px 20px}
.learnpick b{font-size:20px}
.learnpick span{font-size:16px; color:var(--accent); font-weight:600}
.learnpick i{font-style:normal; font-size:13px; color:var(--dim)}

/* 과 표지 — 가로로 넓은 한 장. 낱말 그림(정사각)과 달라 보여야 장이 바뀐 것이 보인다. */
.kcover{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:10px;margin:-4px 0 12px;background:var(--soft)}

/* 시험 구간 표시 — 지금이 읽기인지 듣기인지 늘 보여야 한다(실제 화면과 같게) */
.expart{font-weight:800; font-size:12.5px; letter-spacing:.02em; padding:2px 8px;
  border-radius:999px; background:var(--soft); color:var(--accent); margin-right:8px}
.expn:disabled{opacity:1; cursor:default}

/* 되돌릴 수 없는 단추 — 탈퇴처럼 지우는 일. 파란 '확인' 단추와 같은 색이면
   손이 먼저 나간다. 색만으로 가르지 않고 테두리도 함께 준다(색각 배려, 프로젝트 규칙). */
.danger{background:var(--bad); border-color:var(--bad); color:#fff}
.danger.ghost{background:transparent; color:var(--bad); border:1.5px solid var(--bad)}

/* 예문 — 통째 단추에서 낱말마다 누르는 줄로 (2026-08-30) */
.wex{margin-top:12px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--card)}
.wex .wextop{display:flex; justify-content:flex-end; margin-bottom:2px}
.wex .wexvi{font-size:1.05rem; line-height:1.9}
.wex .wexko{margin-top:4px; color:var(--muted); font-size:.9rem}
.tapinfo .gkr{margin:0 .35em 0 .2em; color:var(--muted); font-size:.9em}

/* 교재 문법 카드 (1권) */
.gramt{font-size:1.22rem; font-weight:800; line-height:1.4; margin-bottom:6px}
.gramk{display:inline-block; padding:.28em .7em; border-radius:8px; margin-bottom:10px;
  border:1px dashed var(--line); background:var(--card); color:var(--muted);
  font-size:.88rem; font-weight:600}
.wex .wexkr{margin-top:2px; color:var(--muted); font-size:.82rem}

/* 7권 베트남 바로알기 — 요약 카드 */
.knowsum{margin:10px 0; display:flex; flex-direction:column; gap:10px}
.knowli{margin:0; padding:10px 12px; border-radius:10px; line-height:1.65;
  border:1px solid var(--line); background:var(--card)}

/* 뜻이 같은 다른 낱말 — 같이 보여 준다 */
.altrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px}
.altrow .altlab{font-size:.76rem; color:var(--muted); letter-spacing:.02em}
.altrow .altw{padding:.2em .6em; border-radius:999px; font-size:.92rem;
  border:1px solid var(--line); background:var(--card); cursor:pointer}
.altrow .altkr{margin-left:.35em; font-size:.82em; color:var(--muted)}

/* 베트남 바로알기 — 숫자 막대 (글보다 길이로 보는 게 빠르다) */
.nbars{margin-top:14px; display:flex; flex-direction:column; gap:7px}
.nbrow{display:flex; align-items:center; gap:8px; font-size:.9rem}
.nbrow .nblab{flex:0 0 6.5em; color:var(--muted); text-align:right}
.nbrow .nbtrack{flex:1; height:14px; border-radius:7px; overflow:hidden;
  border:1px solid var(--line); background:var(--card)}
.nbrow .nbtrack i{display:block; height:100%; background:var(--accent); border-radius:7px}
.nbrow .nbval{flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:700}
.nbunit{text-align:right; font-size:.76rem; color:var(--muted)}

/* 일터에서 뜻이 달라지는 낱말 */
.workuse{margin-top:8px; padding:.4em .7em; border-radius:9px; font-size:.88rem;
  border:1px solid var(--line); background:var(--card); color:var(--muted)}

/* 자유 복습 — 끝낸 레슨을 골라 푼다 */
.freelist{display:flex; flex-direction:column; gap:5px; margin:12px 0}
.freerow{display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:.55em .8em; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:var(--card)}
.freerow.on{border-color:var(--accent); font-weight:600}
.freerow .freebox{font-style:normal; font-size:1.05rem}
.freerow .freenm{flex:1}
.freerow .freen{color:var(--muted); font-size:.84rem; font-variant-numeric:tabular-nums}

/* 대화 — 골라서 답하기 (AI 안 씀) */
.chatmode{display:flex; gap:6px; margin:0 0 10px}
.chatmodeb{flex:1; display:flex; flex-direction:column; gap:1px; padding:.5em .6em;
  border-radius:10px; cursor:pointer; text-align:center;
  border:1px solid var(--line); background:var(--card)}
.chatmodeb.on{border-color:var(--accent); font-weight:700}
.chatmodeb span{font-size:.72rem; color:var(--muted); font-weight:400}
.pickrow{display:flex; flex-direction:column; gap:6px; margin:10px 0 4px}
.pickopt{display:flex; flex-direction:column; gap:1px; text-align:left; cursor:pointer;
  padding:.55em .8em; border-radius:12px; border:1px solid var(--line); background:var(--card)}
.pickopt .pickko{font-size:.8rem; color:var(--muted)}
.cb.ok{border-color:var(--accent)}

/* 7권 바로알기의 숫자 막대 — 길이와 숫자를 함께 보인다(색만으로는 안 된다) */
/* 카드가 flex 라 그대로 두면 막대가 내용 폭(117px)으로 쪼그라든다 */
.nbars{display:grid; gap:8px; margin:14px 0 4px; width:100%; align-self:stretch}
.nbar{display:grid; grid-template-columns:minmax(56px,auto) 1fr auto; align-items:center; gap:10px}
.nbnm{color:var(--dim); font-size:13px; white-space:nowrap}
.nbtrack{background:var(--line); border-radius:999px; height:16px; overflow:hidden}
.nbfill{display:block; height:100%; border-radius:999px; background:var(--accent)}
.nbfill[data-k="1"]{background:#7a5af8}
.nbfill[data-k="2"]{background:#0f9d76; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 4px,transparent 4px 8px)}
.nbfill[data-k="3"]{background:#c2410c; background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.35) 0 4px,transparent 4px 8px)}
.nbval{font-variant-numeric:tabular-nums; font-weight:700; font-size:14px}
.nbunit{color:var(--dim); font-size:12px; text-align:right}

/* 직무 갈래 고르기 — 체크는 색만이 아니라 **✔ 글자와 테두리 굵기**로도 갈린다(색각 배려).
   .days button 이 width:100% 라 그대로 두면 두 단추가 겹친다 — 여기서 다시 잡는다. */
.days li.jobhead{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:2px 2px 8px}
.days li.jobhead > span{flex:1 1 auto; min-width:0; white-space:normal;
  font-size:13px; color:var(--dim); line-height:1.4}
/* .days button 이 width:100% 라 안내 글이 0px 로 눌렸다 — 여기서 되돌린다 */
.days li.jobhead > button{width:auto; flex:0 0 auto}
.jsmall{padding:4px 10px; font-size:12px; min-width:0; flex:none}
.days li.jobrow{display:flex; align-items:stretch; gap:8px; margin:0}
.days li.jobrow > button{width:auto}
.days li.jobrow > button.jobcb{flex:0 0 46px; display:flex; align-items:center; justify-content:center;
  padding:0; border:2px solid var(--line); background:var(--card);
  font-weight:800; font-size:18px; color:var(--accent); border-radius:var(--radius)}
.days li.jobrow > button.jobcb[data-on="1"]{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.days li.jobrow > button:last-child{flex:1 1 auto; min-width:0}
.days button[data-dim="1"]{opacity:.45}

/* 메신저 말풍선 — 베트남어·발음·뜻을 층으로 */
.cbrich{display:flex; flex-direction:column; gap:3px}
.cbrich .cbvi{font-weight:650; font-size:16px}
.cbrich .cbkr{font-size:12.5px; color:var(--dim)}
.cbrich .cbko{font-size:13.5px}
.cb.me.cbrich .cbkr, .cb.me.cbrich .cbko{color:inherit; opacity:.8}

/* 실력 분석 — 갈래 제목을 눈에 띄게 (대표님 지시, 2026-08-30) */
.anasec{margin:22px 0 10px; font-size:17px; font-weight:800; color:var(--accent);
  border-left:4px solid var(--accent); padding-left:10px; line-height:1.35}
.anasec span{display:block; font-size:12.5px; font-weight:500; color:var(--dim); margin-top:2px}
.barrow .bname .tarr{width:16px; height:16px; vertical-align:-3px; margin-left:4px}
.barrow .bname .tarr path, .barrow .bname .tarr circle{fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.barrow .bname .tarr circle{fill:currentColor}
.barrow.thin .bn{color:var(--dim)}

/* 예/아니오 창 — 두 단추를 나란히 */
.modalbox .rolepick{display:flex; gap:10px; margin-top:14px}
.modalbox .rolepick button{flex:1; padding:12px 10px; font-weight:650}
.modalbox .primary.danger{background:var(--bad,#c62828); border-color:transparent; color:#fff}

/* 기사 갈래표 — 무엇에 대한 기사인지 먼저 보인다 */
.newstop{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.newscat{font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px; background:var(--line); color:var(--fg)}

/* 사전 — 찾기 칸과 결과 줄 */
.dictin{width:100%; margin:6px 0 12px; font-size:17px}
.dictout{display:grid; gap:8px}
.dictrow{display:grid; grid-template-columns:auto auto 1fr; gap:8px 10px; align-items:baseline;
  width:100%; text-align:left; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px; color:var(--fg)}
.dictrow .dvi{font-size:16px; font-weight:700}
.dictrow .dkr{font-size:12.5px; color:var(--dim); white-space:nowrap}
.dictrow .dko{font-size:14px}
.dictrow .dex{grid-column:1/-1; font-size:12.5px; color:var(--dim); line-height:1.45; margin-top:2px}

/* 카드뉴스 */
.cardbtn{margin:-6px 0 12px; align-self:flex-start}
.cardbox{display:grid; gap:14px}
.cardimg{width:100%; border-radius:var(--radius); border:1px solid var(--line); display:block}

/* 기사 세트 맨 앞 카드뉴스 — 정사각형이라 화면 폭에 맞춰 통째로 보인다 */
.newscardimg{display:block;width:100%;max-width:520px;margin:0 auto;
  border-radius:var(--radius);box-shadow:var(--shadow)}

/* 학습 화면 좌우 붙박이 넘김 단추 (2026-08-31)
   화면 가운데 높이에 붙여 둔다. 엄지가 닿는 자리라 한 손으로 넘긴다. */
.pagearrow{position:fixed; top:50%; transform:translateY(-50%); z-index:40;
  width:44px; height:64px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--dim); font-size:26px; line-height:1;
  box-shadow:var(--shadow); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center}
.pagearrow.left{left:6px}
.pagearrow.right{right:6px}
.pagearrow:disabled{opacity:.28; cursor:default}
@media (max-width:420px){ .pagearrow{width:38px; height:56px; font-size:23px} }

/* 문장 소리 단추 — 잘 안 보인다고 하셔서 크고 뚜렷하게 (2026-08-31).
   '듣기' 글자를 살리고 테두리·바탕을 줘서 단추로 보이게 한다. 최소 44px. */
.sound{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0}
.sound > button{min-height:44px; padding:8px 18px; font-size:16px; font-weight:650;
  border:1px solid var(--accent); border-radius:24px;
  background:var(--accent); color:var(--accent-fg)}
.sound > button.ghost{background:var(--card); color:var(--accent)}
.sound > button:active{transform:scale(.97)}

/* 성조만 틀렸을 때 — 오답이지만 '거의 맞았다'는 것이 보이게 (2026-08-31) */
.tonemiss{margin-top:8px; font-size:14px; font-weight:600; color:var(--warn)}
[data-r=tone]{border-color:var(--warn) !important}

/* ── 단어장 한 줄 — 낱말 · 발음 · 두 속도 단추 · 뜻 (2026-09-03) ── */
.wbrow{background:var(--bg); border:1px solid var(--line,#e4e6eb); border-radius:12px;
       padding:10px 12px; margin-bottom:8px}
.wbtop{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.wbvi{font-size:17px; font-weight:700}
.wbkr{font-size:12.5px; color:var(--dim); white-space:nowrap}
.wbtop .exmeta{font-size:12px; color:var(--dim)}
.wbtop .iconbtn{margin-left:auto}
.wbtop .iconbtn + .iconbtn{margin-left:0}
.wbko{font-size:14.5px; margin-top:4px; color:var(--fg,#1c1e21); text-align:left}
.wbrow{text-align:left}
.wbtabs{flex-wrap:wrap}
.wbtab{min-width:30%}

/* ── 짝 맞추기 — 왼쪽 뜻, 오른쪽 베트남어 ── */
.match{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
.matchcol{display:flex; flex-direction:column; gap:8px}
.matchbtn{padding:14px 10px; border-radius:12px; border:1.5px solid var(--line,#e4e6eb);
          background:var(--bg); font-size:15px; line-height:1.35; text-align:center;
          min-height:52px; transition:transform .08s}
.matchbtn[data-s="sel"]{border-color:var(--accent,#1877F2); border-width:2.5px;
                        background:color-mix(in srgb, var(--accent,#1877F2) 10%, transparent)}
.matchbtn[data-s="ok"]{border-color:#2e7d32; background:#e8f5e9; color:#2e7d32; opacity:.55}
.matchbtn[data-s="no"]{border-color:#c62828; background:#ffebee; animation:shake .3s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.matchdone{text-align:center; font-size:15px; margin:14px 0 4px; color:var(--dim)}

/* ── 문장 퍼즐 — 조각을 눌러 문장을 만든다 ── */
.puzzans{min-height:64px; border:2px dashed var(--line,#e4e6eb); border-radius:12px;
         padding:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;
         font-size:17px; margin:10px 0}
.puzzans[data-r="ok"]{border-style:solid; border-color:#2e7d32; background:#e8f5e9}
.puzzans[data-r="no"]{border-style:solid; border-color:#c62828; background:#ffebee}
.puzzhint{font-size:14.5px; color:var(--dim); text-align:center; margin-bottom:4px}
.puzztiles{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.puzztile{padding:10px 14px; border-radius:10px; border:1.5px solid var(--line,#e4e6eb);
          background:var(--bg); font-size:16px}
.puzztile:disabled{opacity:.28}
.puzzpick{padding:8px 12px; border-radius:9px; border:1.5px solid var(--accent,#1877F2);
          background:color-mix(in srgb, var(--accent,#1877F2) 8%, transparent); font-size:16px}
.ghost.slow{margin-left:8px}

/* ── 인사말 카드 (Stitch 시안 재현, 사진 대신 아이콘) ── */
/* #plan 이 .plancell 넉 장을 2열 그리드로 놓느라 grid-template-columns:1fr 1fr 인데,
   인사말 카드도 같은 #plan 의 자식이라 그 좁은 한 칸에 낑겨 글자가 세로로 한 자씩
   쪼개져 나오고 있었다(2026-09-09 스크린샷 검수에서 발견) — 두 칸을 다 쓰게 편다. */
.kogreet{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg,14px);
  padding:16px; margin-bottom:12px;
}
.kogtxt{min-width:0}
.kogbadge{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--dim); margin-bottom:4px}
.kogdot{width:8px; height:8px; border-radius:50%; background:var(--ok); flex:0 0 auto}
.kogh1{font-size:22px; font-weight:700; line-height:1.36}     /* headline-lg 실측치 그대로 */
.kogsub{font-size:14px; color:var(--dim); margin-top:2px}
.kogicon{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto;
  background:color-mix(in srgb, var(--accent) 12%, var(--card));
  display:grid; place-items:center; font-size:28px;
}

/* ── 소셜 로그인 버튼(구글/페북, 2026-09-08) ── */
.socialrow{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.social{display:flex; align-items:center; justify-content:center; gap:10px; width:100%}
.socialmark{font-weight:800; font-size:18px}

/* ── VLPT 능력시험 모의고사 (2026-09-08) ── */
.vlptpassage{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin:10px 0; font-size:15px; line-height:1.6}
.vlptq{font-size:17px; font-weight:700; margin:10px 0}
.vlptcard{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px}
.vlptcard.ok{border-left:4px solid var(--ok)}
.vlptcard.no{border-left:4px solid var(--bad)}

/* ── 최상단 헤더 정리(2026-09-08 대표님 지시) — 날씨·시각·어플이름 제거.
   #title/#wxnow는 내부 로직(show() 등)이 계속 참조하므로 DOM에서 지우면
   앱이 깨진다 — 안 보이게만 한다(기능은 그대로 살아있고 화면에만 없음).
   #goMe(내 정보)는 2026-09-12 지시로 다시 켰다 — 우측 상단 고정 자리다. */
#title, #wxnow { display: none !important; }

/* ── 레슨 학습방법 탭: 카드/강의/애니메이션/노래 (2026-09-08) ── */
.lessontabs{display:flex; gap:6px; padding:8px 10px 0; overflow-x:auto}
.lessontabs button{flex:0 0 auto; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:14px; font-weight:600}
.lessontabs button.on{background:var(--accent); color:var(--accent-fg); border-color:transparent}
.lessonextra{padding:40px 20px; text-align:center; color:var(--dim)}