/* ============================================================
   にほんご道場 — 全站樣式（粉彩可愛配方）
   Token 先行：改這區就換膚，其他區塊不准出現裸 hex
   ============================================================ */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/VarelaRound.woff2') format('woff2');
}

:root {
  /* 色彩 token */
  --bg: #FDF6EC;               /* 奶油底 */
  --surface: #FFFFFF;
  --surface-tint: #FFF9F0;
  --ink: #5D4E4E;              /* 壓場深棕灰（正文 7.3:1） */
  --ink-2: rgba(93, 78, 78, .64);
  --ink-3: rgba(93, 78, 78, .42);
  --line: rgba(93, 78, 78, .16);
  --line-soft: rgba(93, 78, 78, .09);
  --track: #F5EBDC;            /* 進度條底 */

  --green: #44A200;            /* 主 CTA（白粗大字 3.27:1 ✅） */
  --green-edge: #358100;
  --green-pale: #E9F7DD;
  --green-deep: #2E6B00;

  --pink: #FF8FA3;             /* 品牌粉（裝飾用） */
  --pink-strong: #E8607A;      /* 粉 CTA（白粗大字 3.29:1 ✅） */
  --pink-edge: #C2455F;
  --pink-pale: #FDE7EC;
  --pink-deep: #B03A55;

  /* 粉彩配角（同組 S 一致） */
  --mint: #B8E6D9;   --mint-pale: #E2F5EE;   --mint-deep: #1E7A5F;
  --peach: #FFCBA4;  --peach-pale: #FFEEDD;  --peach-deep: #9A5B24;
  --lav: #D1C4E9;    --lav-pale: #EAE4F6;    --lav-deep: #5E4B8A;
  --blue: #A8D8EA;   --blue-pale: #DDF0FA;   --blue-deep: #1D6FA8;
  --yellow: #FFE9A8; --yellow-pale: #FFF4C8; --yellow-deep: #7D6218;

  /* 語意色（軟底） */
  --ok-bg: #E9F7DD;  --ok-tx: #2E6B00;
  --warn-bg: #FFF4C8; --warn-tx: #7D6218;
  --bad-bg: #FDE7EC; --bad-tx: #B03A55;

  /* 字級 scale（相鄰 ≥1.25 差） */
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-19: 19px;
  --fs-24: 24px; --fs-30: 30px; --fs-36: 36px; --fs-48: 48px;

  /* 間距（4px 基數） */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;

  /* 圓角分級 */
  --r-s: 8px; --r-m: 16px; --r-l: 24px; --r-pill: 999px;

  /* 陰影（單一光源：Y 向下） */
  --sh-card: 0 2px 0 rgba(93, 78, 78, .07), 0 10px 24px rgba(93, 78, 78, .10);
  --sh-pop: 0 4px 0 rgba(93, 78, 78, .09), 0 16px 40px rgba(93, 78, 78, .16);

  --font: 'Varela Round', 'Hiragino Maru Gothic ProN', 'Yuanti UI',
          'Meiryo UI', 'Yu Gothic UI', 'Microsoft JhengHei', system-ui, sans-serif;
  --jp-font: 'Hiragino Maru Gothic ProN', 'Meiryo UI', 'Yu Gothic UI',
             'Microsoft JhengHei', system-ui, sans-serif;
}

/* ---------------- 基礎 ---------------- */
* { box-sizing: border-box; margin: 0; padding: 0; scroll-margin-top: 88px; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}

.jp { font-family: var(--jp-font); }

a { color: var(--pink-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:disabled { cursor: not-allowed; }

:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; border-radius: var(--r-s); }

::selection { background: var(--pink); color: #fff; }

/* ---------------- 頂部導覽 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 246, 236, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in {
  max-width: 1080px; margin: 0 auto; padding: var(--s3) var(--s4);
  display: flex; align-items: center; gap: var(--s4);
}
.logo {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: var(--fs-19); color: var(--ink);
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo .mark {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--pink-pale); border: 2px solid var(--pink);
  display: grid; place-items: center; font-size: 19px;
}
.nav-links {
  display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  padding: var(--s2) var(--s3); border-radius: var(--r-pill);
  color: var(--ink-2); font-weight: 700; font-size: var(--fs-14);
  white-space: nowrap; transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--pink-pale); color: var(--pink-deep); text-decoration: none; }
.nav-links a.on { background: var(--pink); color: #fff; }

/* ---------------- 版面 ---------------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s16); }
.wrap.narrow { max-width: 760px; }

.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-bottom: var(--s6); }
.page-head h1 { font-size: var(--fs-30); line-height: 1.2; }
.page-head .sub { color: var(--ink-2); font-size: var(--fs-14); }

.section { margin: var(--s8) 0; }
.section > h2 {
  font-size: var(--fs-24); margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s2);
}
.section > h2 .n {
  font-size: var(--fs-14); color: var(--pink-deep); background: var(--pink-pale);
  border: 1px solid var(--pink); border-radius: var(--r-pill);
  padding: 2px 10px; font-weight: 700;
}

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-m); padding: var(--s6);
  box-shadow: var(--sh-card);
}
.card + .card { margin-top: var(--s4); }

/* ---------------- 按鈕（實體按壓感） ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: var(--s2) var(--s6);
  border-radius: var(--r-m); font-weight: 700; font-size: var(--fs-19);
  line-height: 1.3; text-decoration: none;
  transition: transform .06s, box-shadow .06s, filter .15s;
  user-select: none;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:active { transform: translateY(4px); box-shadow: none !important; }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-edge); }
.btn-pink { background: var(--pink-strong); color: #fff; box-shadow: 0 4px 0 var(--pink-edge); }
.btn-ghost {
  background: var(--surface); color: var(--ink); box-shadow: 0 4px 0 var(--line);
  border: 1px solid var(--line);
}
.btn-soft { background: var(--pink-pale); color: var(--pink-deep); box-shadow: 0 4px 0 rgba(176,58,85,.25); }
.btn-sm { min-height: 40px; font-size: var(--fs-14); padding: var(--s1) var(--s4); border-radius: var(--r-s); }
.btn-block { width: 100%; }
.btn:disabled { filter: saturate(.25) brightness(.95); box-shadow: 0 4px 0 rgba(93,78,78,.15); }

/* 小圖案按鈕（朗讀、翻譯等） */
.icon-btn {
  min-width: 44px; min-height: 44px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; background: var(--surface-tint);
  border: 1px solid var(--line); transition: background .15s, transform .06s;
}
.icon-btn:hover { background: var(--pink-pale); }
.icon-btn:active { transform: scale(.92); }

/* ---------------- 徽章・膠囊 ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-12); font-weight: 700;
  padding: 2px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent; line-height: 1.7; white-space: nowrap;
}
.lv-starter { background: var(--yellow-pale); color: var(--yellow-deep); border-color: var(--yellow); }
.lv-n5 { background: var(--mint-pale); color: var(--mint-deep); border-color: var(--mint); }
.lv-n4 { background: var(--blue-pale); color: var(--blue-deep); border-color: var(--blue); }
.lv-n3 { background: var(--lav-pale); color: var(--lav-deep); border-color: var(--lav); }
.lv-n2 { background: var(--peach-pale); color: var(--peach-deep); border-color: var(--peach); }
.lv-n1 { background: var(--pink-pale); color: var(--pink-deep); border-color: var(--pink); }
.bd-ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--green); }
.bd-warn { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--yellow); }
.bd-bad { background: var(--bad-bg); color: var(--bad-tx); border-color: var(--pink); }
.bd-gray { background: var(--surface-tint); color: var(--ink-2); border-color: var(--line); }

/* ---------------- 篩選膠囊列 ---------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0; }
.chip {
  min-height: 44px; padding: var(--s1) var(--s4);
  border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-14);
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); transition: all .15s;
}
.chip:hover { background: var(--pink-pale); color: var(--pink-deep); }
.chip.on { background: var(--pink); color: #fff; border-color: var(--pink-strong); }

/* ---------------- 進度條 ---------------- */
.bar { height: 12px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--green); border-radius: var(--r-pill); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.bar.pink > i { background: var(--pink-strong); }

/* ---------------- 搜尋框 ---------------- */
.search {
  width: 100%; min-height: 48px; padding: var(--s2) var(--s4);
  border: 2px solid var(--line); border-radius: var(--r-m);
  font-family: inherit; font-size: var(--fs-16); color: var(--ink);
  background: var(--surface); transition: border-color .15s;
}
.search:focus { outline: none; border-color: var(--pink); }

/* ---------------- 首頁 ---------------- */
.hero {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-l); padding: var(--s8);
  box-shadow: var(--sh-card);
  display: flex; flex-wrap: wrap; gap: var(--s6); align-items: center;
  justify-content: space-between;
}
.hero h1 { font-size: var(--fs-36); line-height: 1.15; }
.hero .hello { font-size: var(--fs-19); color: var(--pink-deep); font-weight: 700; }
.hero .desc { color: var(--ink-2); margin-top: var(--s2); }
.hero-review {
  text-align: center; min-width: 220px;
  background: var(--pink-pale); border: 2px dashed var(--pink);
  border-radius: var(--r-m); padding: var(--s4) var(--s6);
}
.hero-review .num { font-size: var(--fs-48); font-weight: 700; color: var(--pink-deep); line-height: 1.1; font-variant-numeric: tabular-nums; }

.entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); }
.entry {
  display: block; padding: var(--s6); border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--line-soft);
  box-shadow: var(--sh-card); color: var(--ink);
  transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s;
}
.entry:hover { transform: translateY(-4px); text-decoration: none; }
.entry .ico {
  width: 56px; height: 56px; border-radius: var(--r-m);
  display: grid; place-items: center; font-size: 28px; margin-bottom: var(--s3);
}
.entry h3 { font-size: var(--fs-19); margin-bottom: 4px; }
.entry p { color: var(--ink-2); font-size: var(--fs-14); }
.entry .meta { margin-top: var(--s3); font-size: var(--fs-12); color: var(--ink-3); }

.lv-progress { display: grid; gap: var(--s3); }
.lv-progress .row { display: grid; grid-template-columns: 72px 1fr 88px; align-items: center; gap: var(--s3); }
.lv-progress .row .num { font-size: var(--fs-14); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- 對話 ---------------- */
.dlg { display: grid; gap: var(--s3); }
.dlg-line { display: flex; gap: var(--s3); align-items: flex-start; }
.dlg-line.right { flex-direction: row-reverse; }
.speaker {
  flex: 0 0 auto; width: 48px; text-align: center;
}
.speaker .av {
  width: 44px; height: 44px; border-radius: var(--r-m);
  display: grid; place-items: center; font-size: 24px;
  background: var(--pink-pale); border: 2px solid var(--pink);
}
.speaker .nm { font-size: var(--fs-12); color: var(--ink-2); margin-top: 2px; font-weight: 700; }
.bubble {
  flex: 1; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-m); padding: var(--s3) var(--s4);
  box-shadow: 0 2px 0 rgba(93,78,78,.06);
}
.dlg-line.right .bubble { background: var(--surface-tint); }
.bubble .jp { font-size: var(--fs-19); line-height: 2.1; }
.bubble .zh { color: var(--ink-2); font-size: var(--fs-14); margin-top: 4px; }
.bubble .row2 { display: flex; align-items: flex-start; gap: var(--s2); }
.bubble .row2 .txt { flex: 1; }
.hl { background: linear-gradient(transparent 55%, #FFC7D4 55% 92%, transparent 92%); border-radius: 4px; padding: 0 2px; }

/* furigana */
ruby rt { font-size: .48em; color: rgba(93, 78, 78, .78); letter-spacing: 0; }
.no-furi ruby rt { display: none; }

/* ---------------- 句型拆解 ---------------- */
.pattern { border-left: 6px solid var(--pink); }
.pattern-name { font-size: var(--fs-24); color: var(--pink-deep); font-weight: 700; }
.pattern-mean { color: var(--ink-2); margin: 4px 0 var(--s4); }
.chunks { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s3) 0; }
.chunk { border-radius: var(--r-m); padding: var(--s3) var(--s4); text-align: center; min-width: 76px; }
.chunk .t { font-size: var(--fs-24); font-weight: 700; line-height: 1.3; }
.chunk .r { font-size: var(--fs-12); margin-top: 4px; opacity: .85; }
.c0 { background: var(--pink-pale); color: var(--pink-deep); }
.c1 { background: var(--mint-pale); color: var(--mint-deep); }
.c2 { background: var(--blue-pale); color: var(--blue-deep); }
.c3 { background: var(--lav-pale); color: var(--lav-deep); }
.c4 { background: var(--yellow-pale); color: var(--yellow-deep); }
.c5 { background: var(--peach-pale); color: var(--peach-deep); }

.tip {
  background: var(--warn-bg); border: 1px solid var(--yellow);
  border-radius: var(--r-m); padding: var(--s3) var(--s4);
  font-size: var(--fs-14); color: var(--warn-tx);
}
.tip b { font-weight: 700; }

.ex-grid { display: grid; gap: var(--s2); margin-top: var(--s3); }
.ex-item {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface-tint); border: 1px solid var(--line-soft);
  border-radius: var(--r-s); padding: var(--s2) var(--s3);
}
.ex-item .jp { flex: 1; font-size: var(--fs-16); line-height: 1.9; }
.ex-item .zh { color: var(--ink-2); font-size: var(--fs-14); flex: 1; }

/* ---------------- 重組句子練習 ---------------- */
.quiz { background: var(--surface-tint); border: 1px solid var(--line-soft); border-radius: var(--r-m); padding: var(--s4); }
.quiz .q-zh { color: var(--ink-2); font-size: var(--fs-14); margin-bottom: var(--s2); }
.oq-slots {
  min-height: 76px; border: 2px dashed var(--line); border-radius: var(--r-m);
  background: var(--surface); padding: var(--s2); margin-bottom: var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s2); align-content: flex-start;
}
.oq-slots.drag-over { border-color: var(--pink); background: var(--pink-pale); }
.oq-pool { display: flex; flex-wrap: wrap; gap: var(--s2); min-height: 52px; }
.oq-chip {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: var(--s2) var(--s3);
  font-size: var(--fs-16); font-weight: 700; box-shadow: 0 3px 0 var(--line);
  min-height: 44px; display: inline-flex; align-items: center;
  transition: transform .06s, box-shadow .06s;
}
.oq-chip.placed { background: var(--pink-pale); border-color: var(--pink); }
.oq-chip.ok { background: var(--ok-bg); border-color: var(--green); color: var(--ok-tx); }
.oq-chip.bad { background: var(--bad-bg); border-color: var(--pink-strong); color: var(--bad-tx); animation: shake .3s; }
.oq-chip.locked { background: var(--mint-pale); border-color: var(--mint); color: var(--mint-deep); }
.oq-chip.dragging { opacity: .45; }
.oq-actions { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.oq-feedback { margin-top: var(--s3); font-weight: 700; font-size: var(--fs-16); }
.oq-feedback.ok { color: var(--ok-tx); }
.oq-feedback.bad { color: var(--bad-tx); }
.oq-answer { margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-14); }

/* 填空 */
.fillq .stem { font-size: var(--fs-19); line-height: 1.8; margin-bottom: var(--s3); }
.fillq .stem .blank {
  display: inline-block; min-width: 72px; border-bottom: 3px solid var(--pink);
  text-align: center; font-weight: 700; color: var(--pink-deep); padding: 0 var(--s2);
}
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); }
.opt {
  min-height: 48px; border-radius: var(--r-s); font-weight: 700; font-size: var(--fs-16);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 3px 0 var(--line); transition: transform .06s, box-shadow .06s;
}
.opt:hover { background: var(--pink-pale); }
.opt:active { transform: translateY(3px); box-shadow: none; }
.opt.ok { background: var(--ok-bg); border-color: var(--green); color: var(--ok-tx); }
.opt.bad { background: var(--bad-bg); border-color: var(--pink-strong); color: var(--bad-tx); }
.opt:disabled { opacity: .55; }
.fillq .explain { margin-top: var(--s2); font-size: var(--fs-14); color: var(--ink-2); }

/* ---------------- 閃卡 ---------------- */
.fc-stage { display: grid; place-items: center; gap: var(--s4); }
.fc-card {
  width: 100%; max-width: 560px; min-height: 300px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-l); box-shadow: var(--sh-pop);
  display: grid; place-items: center; padding: var(--s8); text-align: center;
  cursor: pointer; position: relative;
}
.fc-card .side { display: grid; gap: var(--s3); justify-items: center; }
.fc-card .big { font-size: var(--fs-48); font-weight: 700; line-height: 1.2; }
.fc-card .mid { font-size: var(--fs-30); color: var(--ink-2); }
.fc-card .ex { font-size: var(--fs-14); color: var(--ink-2); background: var(--surface-tint); border-radius: var(--r-s); padding: var(--s2) var(--s3); }
.fc-card .corner { position: absolute; top: var(--s3); left: var(--s3); }
.fc-card .tap-hint { position: absolute; bottom: var(--s2); color: var(--ink-3); font-size: var(--fs-12); }
.fc-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); width: 100%; max-width: 560px; }
.grade { min-height: 56px; border-radius: var(--r-m); font-weight: 700; font-size: var(--fs-19); color: #fff; box-shadow: 0 4px 0 rgba(93,78,78,.25); }
.grade:active { transform: translateY(4px); box-shadow: none; }
.grade.g-no { background: var(--pink-strong); box-shadow: 0 4px 0 var(--pink-edge); }
.grade.g-hard { background: #D9A400; box-shadow: 0 4px 0 #A87F00; }
.grade.g-ok { background: var(--green); box-shadow: 0 4px 0 var(--green-edge); }
.grade .sub { display: block; font-size: var(--fs-12); font-weight: 400; opacity: .9; }

/* ---------------- 五十音 ---------------- */
.kana-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s2); }
.kana-cell {
  aspect-ratio: 1; border-radius: var(--r-s); background: var(--surface);
  border: 1px solid var(--line-soft); box-shadow: 0 3px 0 var(--line-soft);
  display: grid; place-items: center; align-content: center;
  transition: transform .06s; user-select: none;
}
.kana-cell:hover { background: var(--pink-pale); border-color: var(--pink); }
.kana-cell:active { transform: translateY(3px); box-shadow: none; }
.kana-cell .k { font-size: var(--fs-30); font-weight: 700; line-height: 1.1; }
.kana-cell .r { font-size: var(--fs-12); color: var(--ink-3); }
.kana-cell.dead { visibility: hidden; }

/* ---------------- 單字庫 ---------------- */
.vrow {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-m); padding: var(--s3) var(--s4);
  box-shadow: 0 2px 0 rgba(93,78,78,.05);
}
.vrow .head { flex: 1; min-width: 0; }
.vrow .jp { font-size: var(--fs-19); font-weight: 700; }
.vrow .kana { color: var(--ink-2); font-size: var(--fs-14); margin-left: var(--s2); font-weight: 400; }
.vrow .zh { color: var(--ink-2); font-size: var(--fs-14); margin-top: 2px; }
.vrow .ex { margin-top: var(--s2); font-size: var(--fs-14); color: var(--ink-2); background: var(--surface-tint); border-radius: var(--r-s); padding: var(--s2) var(--s3); display: none; }
.vrow.open .ex { display: block; }
.vrow .btns { display: flex; gap: var(--s1); align-items: center; flex: 0 0 auto; }
.vlist { display: grid; gap: var(--s2); }
.count-line { color: var(--ink-2); font-size: var(--fs-14); margin: var(--s2) 0; }

/* ---------------- 閱讀 ---------------- */
.article-card { display: block; color: var(--ink); transition: transform .12s cubic-bezier(.2,.8,.2,1); }
.article-card:hover { transform: translateY(-3px); text-decoration: none; }
.article-card h3 { font-size: var(--fs-19); margin-bottom: var(--s1); }
.article-card .meta { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; color: var(--ink-2); font-size: var(--fs-14); }

.reader-text { font-size: var(--fs-24); line-height: 2.1; }
.word { border-bottom: 2px dotted var(--pink); cursor: pointer; padding: 0 1px; }
.word:hover { background: var(--pink-pale); border-radius: 4px; }

.sent-view { display: grid; gap: var(--s4); justify-items: center; text-align: center; }
.sent-view .jp { font-size: var(--fs-30); line-height: 1.8; }
.sent-detail { min-height: 76px; }
.sent-detail .zh { font-size: var(--fs-19); color: var(--ink-2); }
.sent-detail .note { font-size: var(--fs-14); color: var(--ink-2); background: var(--surface-tint); border-radius: var(--r-s); padding: var(--s2) var(--s4); margin-top: var(--s2); display: inline-block; }
.sent-nav { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; justify-content: center; }

/* 詞典彈窗 */
.dict-pop {
  position: fixed; left: 50%; bottom: var(--s4); transform: translateX(-50%);
  width: min(480px, calc(100% - 32px));
  background: var(--surface); border: 2px solid var(--pink);
  border-radius: var(--r-m); box-shadow: var(--sh-pop);
  padding: var(--s4); z-index: 100; animation: pop-in .2s cubic-bezier(.2,.8,.2,1);
}
.dict-pop .w { font-size: var(--fs-24); font-weight: 700; }
.dict-pop .k { color: var(--ink-2); margin-left: var(--s2); font-size: var(--fs-16); }
.dict-pop .z { margin: var(--s2) 0; }
.dict-pop .acts { display: flex; gap: var(--s2); margin-top: var(--s2); }

/* ---------------- 口語專區 ---------------- */
.accordion { border: 1px solid var(--line-soft); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--sh-card); overflow: hidden; }
.accordion + .accordion { margin-top: var(--s3); }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4); text-align: left; font-size: var(--fs-16); font-weight: 700;
  min-height: 56px;
}
.acc-head:hover { background: var(--pink-pale); }
.acc-head .arrow { margin-left: auto; transition: transform .2s; color: var(--ink-3); }
.accordion.open .acc-head .arrow { transform: rotate(90deg); }
.acc-body { display: none; padding: 0 var(--s4) var(--s4); }
.accordion.open .acc-body { display: block; animation: fade-in .2s; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.compare > div { border-radius: var(--r-m); padding: var(--s3) var(--s4); }
.compare .formal { background: var(--surface-tint); border: 1px solid var(--line); }
.compare .casual { background: var(--pink-pale); border: 1px solid var(--pink); }
.compare .tag { font-size: var(--fs-12); font-weight: 700; display: inline-block; margin-bottom: var(--s1); padding: 1px 10px; border-radius: var(--r-pill); }
.compare .formal .tag { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.compare .casual .tag { background: #fff; border: 1px solid var(--pink); color: var(--pink-deep); }
.compare .jp { font-size: var(--fs-16); font-weight: 700; line-height: 1.7; }
.compare .zh { font-size: var(--fs-14); color: var(--ink-2); }

.points { margin: var(--s3) 0; padding-left: 20px; color: var(--ink-2); font-size: var(--fs-14); display: grid; gap: var(--s1); }

table.pairs { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
table.pairs th { text-align: left; padding: var(--s2) var(--s3); color: var(--ink-2); font-size: var(--fs-12); border-bottom: 2px solid var(--line); }
table.pairs td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-soft); }
table.pairs td.jpc { font-weight: 700; }

/* ---------------- 課程列表 ---------------- */
.lesson-grid { display: grid; gap: var(--s3); }
.lesson-item {
  display: flex; align-items: center; gap: var(--s4); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-m); padding: var(--s4); box-shadow: var(--sh-card);
  transition: transform .12s cubic-bezier(.2,.8,.2,1);
}
.lesson-item:hover { transform: translateY(-3px); text-decoration: none; }
.lesson-item .no {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-m);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-14);
  background: var(--surface-tint); border: 1px solid var(--line);
}
.lesson-item .tt { flex: 1; min-width: 0; }
.lesson-item h3 { font-size: var(--fs-16); }
.lesson-item p { color: var(--ink-2); font-size: var(--fs-14); margin-top: 2px; }
.lesson-item .done-ico { font-size: 20px; }

/* ---------------- Toast ---------------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #FFF6EC; font-weight: 700; font-size: var(--fs-14);
  padding: var(--s3) var(--s6); border-radius: var(--r-pill);
  box-shadow: var(--sh-pop); z-index: 200; opacity: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s;
  max-width: calc(100vw - 32px); text-align: center;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ---------------- 空狀態 ---------------- */
.empty { text-align: center; padding: var(--s12) var(--s4); color: var(--ink-2); }
.empty .big { font-size: 48px; margin-bottom: var(--s3); }
.empty p { font-size: var(--fs-14); }

/* ---------------- 通用工具 ---------------- */
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.mt2 { margin-top: var(--s2); } .mt4 { margin-top: var(--s4); } .mt6 { margin-top: var(--s6); } .mt8 { margin-top: var(--s8); }
.dim { color: var(--ink-2); } .small { font-size: var(--fs-14); } .center { text-align: center; }
.stat-row { display: flex; gap: var(--s6); flex-wrap: wrap; justify-content: center; }
.stat { text-align: center; }
.stat .n { font-size: var(--fs-30); font-weight: 700; color: var(--pink-deep); font-variant-numeric: tabular-nums; }
.stat .l { font-size: var(--fs-12); color: var(--ink-2); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes pop-in {
  from { transform: translateX(-50%) translateY(16px) scale(.96); opacity: 0; }
  to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bounce-in {
  0% { transform: scale(.7); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.bounce-in { animation: bounce-in .3s cubic-bezier(.2,.8,.2,1); }

/* ---------------- 響應式 ---------------- */
@media (max-width: 720px) {
  .wrap { padding: var(--s4) var(--s3) var(--s12); }
  .hero { padding: var(--s4); }
  .hero h1 { font-size: var(--fs-24); }
  .hero-review { width: 100%; }
  .compare { grid-template-columns: 1fr; }
  .dlg-line, .dlg-line.right { flex-direction: column; align-items: stretch; }
  .speaker { display: flex; gap: var(--s2); align-items: center; width: auto; }
  .reader-text { font-size: var(--fs-19); }
  .sent-view .jp { font-size: var(--fs-24); }
  .fc-card .big { font-size: var(--fs-36); }
  .lv-progress .row { grid-template-columns: 60px 1fr 72px; }
  .vrow { flex-wrap: wrap; }
  .vrow .btns { width: 100%; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- 語音懸浮設定（右側可拖曳小鈕 + 面板） ---------------- */
.jd-fab {
  position: fixed; z-index: 90;
  left: 0; top: 0;               /* 實際位置由 JS 寫 px */
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--pink-pale); border: 2px solid var(--pink);
  box-shadow: var(--sh-pop);
  display: grid; place-items: center; font-size: 22px;
  cursor: grab; touch-action: none; user-select: none;
  transition: transform .15s;
}
.jd-fab:hover { transform: scale(1.08); }
.jd-fab:active { cursor: grabbing; transform: scale(1.02); }

.jd-fab-panel {
  position: fixed; z-index: 91;
  left: 0; top: 0;
  width: min(320px, calc(100vw - 24px));
  max-height: min(72vh, 560px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-m); box-shadow: var(--sh-pop);
  padding: var(--s4);
}
.jd-fab-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.jd-fab-head strong { font-size: var(--fs-16); }
.jd-fab-x {
  min-width: 36px; min-height: 36px; border-radius: 50%;
  font-size: 16px; color: var(--ink-2); transition: all .15s;
}
.jd-fab-x:hover { background: var(--pink-pale); color: var(--pink-deep); }
.jd-fab-label {
  font-size: var(--fs-12); font-weight: 700; color: var(--ink-2);
  letter-spacing: .5px; margin: var(--s3) 0 var(--s1);
}
.jd-fab-panel .search { min-height: 42px; }
.jd-fab-panel select.search { padding: var(--s1) var(--s2); }