/* ════════════════════════════════════════════
   情境地圖頁・格式 D（樹狀導航）共用樣式
   每個 scenario/*.html 都 link 這支
   ════════════════════════════════════════════ */

/* ── Header：與情境列表頁（scenarios.html / site.css）一致 ──
   導覽列改用上下內距撐開（非固定高度），logo 尺寸對齊列表頁。
   --nav-h 同步成「logo 高 + 上下內距」的實際高度，
   sticky 路線圖（.tree-pane）的 top 才不會被變高的導覽列蓋住。 */
:root { --nav-h: calc(clamp(58px, 7vw, 92px) + 28px); }
.site-nav { height: auto; padding-top: .85rem; padding-bottom: .85rem; }
.site-nav .brand img { height: clamp(58px, 7vw, 92px); width: auto; }

/* ── 頁尾語音來源標註（VOICEVOX 授權要求） ── */
.site-footer .audio-credit { display: block; margin-top: var(--sp-2); color: var(--text-faint); }

/* ── 情境頁首 ── */
.sc-hero { padding: var(--sp-7) 0 var(--sp-5); border-bottom: 1px solid var(--border); }
.sc-hero .pain-note {
  background: var(--accent-bg); border-left: 3px solid var(--accent);
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4);
  font-size: var(--fs-small); color: var(--text-soft); line-height: 1.85; max-width: 640px;
}

/* ── 使用教學：一行一件事 ── */
.usage-guide {
  background: var(--accent-bg); border-left: 3px solid var(--accent);
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
  padding: var(--sp-4); margin-top: var(--sp-4); max-width: 640px;
}
.usage-guide .ug-title {
  margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-small); letter-spacing: .04em; color: var(--text);
  display: flex; align-items: center; gap: var(--sp-2);
}
.usage-guide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.usage-guide li {
  display: grid; grid-template-columns: 1.4em 1fr; gap: var(--sp-2); align-items: baseline;
  font-size: var(--fs-small); color: var(--text-soft); line-height: 1.7;
}
.usage-guide .ug-ico { text-align: center; }
.usage-guide b { color: var(--text); font-weight: 600; }
.usage-guide .gloss-label { vertical-align: baseline; }

/* ── 鷹架拆卸：隱藏中文／拼音 ── */
.scaffold-bar { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4) 0; font-size: var(--fs-small); color: var(--text-muted); flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; user-select: none; }
.toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
/* 播放速度選擇器（0.5／0.75／1×） */
.speed-sel { display: inline-flex; align-items: center; gap: var(--sp-1); margin-right: var(--sp-2); }
.speed-label { font-size: var(--fs-small); color: var(--text-muted); margin-right: var(--sp-1); }
.speed-opt { font-family: inherit; font-size: var(--fs-small); line-height: 1; padding: 6px 12px; min-height: 32px;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted);
  border-radius: var(--pill-radius); cursor: pointer; transition: background .15s ease-out, color .15s ease-out; }
.speed-opt:hover { border-color: var(--accent); color: var(--accent); }
.speed-opt.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
.speed-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .speed-opt { transition: none; } }
body.hide-roma .roma { display: none !important; }
body.hide-zh .zh { display: none !important; }

/* ── 三行格式 ── */
.jp   { font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.6; font-family: var(--font-display); }
.roma { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; word-spacing: .18em; letter-spacing: .01em; }
.zh   { font-size: var(--fs-small); color: var(--text-soft); margin-top: 2px; }
.opt-badge { display: inline-block; font-size: var(--fs-tiny); padding: 1px 7px; border-radius: var(--pill-radius); background: var(--accent-bg); color: var(--accent); margin-bottom: var(--sp-1); }
/* 語音播放鈕：實心朱紅圓鈕＋白色三角，放大好按（全站） */
.audio-dot { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: .95rem; margin-left: var(--sp-2); vertical-align: middle; }
/* 語音播放：尚未升級（無對應音檔）的裝飾性 ▶ 先不顯示；可播放的才出現 */
.audio-dot:not(.is-play) { display: none; }
button.audio-dot { border: none; padding: 0; font-family: inherit; cursor: pointer; transition: background .15s ease-out, color .15s ease-out; }
.audio-dot.is-play:hover { background: var(--accent-hover); color: #fff; }
.audio-dot.is-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.audio-dot.playing { background: var(--accent-hover); color: #fff; }
/* 可替換字選了還沒錄音的詞：▶ 轉灰、不可播（hover 不變色） */
.audio-dot.is-mute { opacity: .35; cursor: default; }
.audio-dot.is-mute:hover { background: var(--accent); color: #fff; }
/* 播放控制群（一句一顆 ▶；速度交給工具列的全域選擇器） */
.audio-ctrls { display: inline-flex; align-items: center; gap: var(--sp-1); vertical-align: middle; }
.audio-ctrls .audio-dot { margin-left: 0; }
.opt > .audio-ctrls:first-child { margin-right: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { button.audio-dot { transition: none; } }

/* ── 樹狀佈局 ── */
.tree-layout { display: grid; grid-template-columns: 290px 1fr; gap: var(--sp-6); align-items: start; padding-bottom: var(--sp-8); }

/* 左：路線圖 */
.tree-pane {
  position: sticky; top: calc(var(--nav-h) + var(--sp-4));
  max-height: calc(100vh - var(--nav-h) - var(--sp-6));
  overflow-y: auto;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--card-radius);
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}
.tree-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  letter-spacing: .08em; margin-bottom: var(--sp-1);
  display: flex; align-items: center; gap: var(--sp-2);
}
.tree-hint { font-size: var(--fs-tiny); color: var(--text-muted); margin-bottom: var(--sp-4); }

.tree { list-style: none; position: relative; }
.tree > li { position: relative; padding-left: var(--sp-6); }
.tree > li::before {
  content: ''; position: absolute; left: 11px; top: 0; bottom: 0;
  width: 2px; background: var(--border-strong);
}
.tree > li:first-child::before { top: 14px; }
.tree > li:last-child::before  { bottom: auto; height: 14px; }

.tnode {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: var(--touch-min);
  font-family: inherit; font-size: var(--fs-small); text-align: left;
  background: transparent; color: var(--text-soft);
  border: none; border-radius: var(--btn-radius);
  padding: var(--sp-2) var(--sp-2);
  cursor: pointer; position: relative;
  transition: color var(--dur-base), background var(--dur-base);
}
.tnode:hover { color: var(--accent); background: var(--accent-bg); }
.tnode:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.tnode .dot {
  position: absolute; left: calc(-1 * var(--sp-6) + 4px);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border-strong);
  transition: border-color var(--dur-base), background var(--dur-base);
}
.tnode.current { color: var(--accent); font-weight: 700; }
.tnode.current .dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }

.twigs { list-style: none; margin: 0 0 var(--sp-2); }
.twigs li { position: relative; padding-left: var(--sp-5); }
.twigs li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: var(--sp-4); height: 0;
  border-top: 2px dashed var(--border-strong);
}
.tnode.twig { font-size: var(--fs-tiny); min-height: 36px; color: var(--text-muted); }
.tnode.twig .twig-letter {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px;
  background: var(--set); color: #fff;
  font-size: .6rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tnode.twig:hover { color: var(--accent); }
.tnode.twig.current { color: var(--accent); }
.tnode.rescue-node { color: var(--accent); }
.tnode.rescue-node .dot { border-color: var(--accent); }

/* 右：對話站點 */
.stations { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 620px; }
.station {
  border: 1px solid var(--border); border-radius: var(--card-radius);
  background: var(--bg-raised);
  padding: var(--sp-5);
  scroll-margin-top: calc(var(--nav-h) + var(--sp-7));
  transition: border-color var(--dur-slow);
}
.station.flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
/* 岔路站：色塊與主線區隔——從地圖點 A–E 落到此區時，一眼可辨「這是支線、不是主線」 */
.station-branch { background: var(--bg-sunken); border-left: 3px solid var(--accent); }
.station-branch .st-hear { background: var(--bg-raised); }
.station-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.station-no {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-sunken); color: var(--text-soft);
  font-size: var(--fs-tiny); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.station-no.letter { border-radius: 7px; background: var(--accent-bg); color: var(--accent); }
.station-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); }
.station-kind { margin-left: auto; font-size: var(--fs-tiny); color: var(--text-faint); letter-spacing: .1em; }
.st-hear { padding: var(--sp-3) var(--sp-4); background: #fff; border: 1px solid var(--border); border-radius: var(--btn-radius); margin-bottom: var(--sp-3); }
.st-hear-label { font-size: var(--fs-tiny); letter-spacing: .12em; color: var(--text-muted); margin-bottom: var(--sp-1); }
.station .opt { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.station .opt:last-child { border-bottom: none; padding-bottom: 0; }
.st-next { margin-top: var(--sp-3); font-size: var(--fs-tiny); color: var(--text-muted); }
.st-next button {
  font-family: inherit; font-size: inherit; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: var(--sp-1);
  text-decoration: underline; text-underline-offset: 3px;
}
.st-next button:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ── 手機：路線圖變底部抽屜 ── */
.tree-fab { display: none; }
.tree-scrim { display: none; }
@media (max-width: 860px) {
  .tree-layout { grid-template-columns: 1fr; }
  .tree-pane {
    position: fixed; inset: auto 0 0 0; top: auto;
    max-height: 72vh;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    box-shadow: 0 -6px 30px rgba(26,20,16,.18);
    z-index: var(--z-modal);
    transform: translateY(105%);
    transition: transform var(--dur-slow) var(--ease-enter);
    padding-bottom: calc(var(--sp-5) + var(--safe-bottom));
  }
  body.tree-open .tree-pane { transform: translateY(0); }
  .tree-scrim {
    display: block;
    position: fixed; inset: 0; background: rgba(26,20,16,.35);
    opacity: 0; pointer-events: none; z-index: var(--z-overlay);
    transition: opacity var(--dur-base);
  }
  body.tree-open .tree-scrim { opacity: 1; pointer-events: auto; }
  .tree-fab {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    position: fixed; right: var(--sp-4); bottom: calc(var(--sp-4) + var(--safe-bottom));
    z-index: var(--z-overlay);
    min-height: var(--touch-min);
    background: var(--accent); color: #fff;
    font-family: inherit; font-size: var(--fs-small); font-weight: 500;
    border: none; border-radius: var(--pill-radius);
    padding: var(--sp-3) var(--sp-5);
    box-shadow: 0 4px 18px rgba(139,57,41,.35);
    cursor: pointer;
  }
  .tree-fab:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
}

/* ════════════════════════════════════════════
   讀→練 交接：地圖讀完後的練習 CTA（頁尾，全寬）
   每個 scenario 頁共用；連到對應情境的練習流程
   ════════════════════════════════════════════ */
.practice-cta {
  margin: var(--sp-5) 0 var(--sp-8);
  padding: var(--sp-7) var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--card-radius);
  text-align: center;
}
.practice-cta .eyebrow { color: var(--accent); margin-bottom: var(--sp-2); }
.practice-cta h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: var(--lh-tight); margin: 0 0 var(--sp-3);
}
.practice-cta p {
  font-size: var(--fs-body); color: var(--text-soft); line-height: var(--lh-body);
  max-width: 460px; margin: 0 auto var(--sp-5);
}
.practice-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--touch-min);
  background: var(--accent); color: #fff; text-decoration: none;
  font-family: inherit; font-weight: 700; font-size: var(--fs-body);
  border-radius: var(--pill-radius); padding: var(--sp-3) var(--sp-6);
  box-shadow: 0 4px 18px rgba(139, 57, 41, .28);
  transition: background var(--dur-base), transform var(--dur-fast);
}
.practice-btn:hover { background: var(--accent-hover); }
.practice-btn:active { transform: scale(.98); }
.practice-btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.practice-cta .cta-foot { margin: var(--sp-4) auto 0; font-size: var(--fs-tiny); color: var(--text-muted); }

/* ════════════════════════════════════════════
   早鳥 Email CTA：破關後的轉換區塊（收 email → 未來衝刺包早鳥優惠）
   ════════════════════════════════════════════ */
.email-cta {
  margin: var(--sp-5) 0 var(--sp-8);
  padding: var(--sp-8) var(--sp-6);
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: var(--card-radius);
  text-align: center;
}
.email-cta .eyebrow { color: var(--accent); margin-bottom: var(--sp-2); }
.email-cta h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3); color: var(--text);
}
.email-cta .ec-lead {
  font-size: var(--fs-body); color: var(--text-soft); line-height: var(--lh-body);
  max-width: 480px; margin: 0 auto var(--sp-5);
}
.email-cta .ec-lead b { color: var(--accent); font-weight: 700; }
.ec-benefits {
  list-style: none; padding: 0;
  margin: 0 auto var(--sp-6); width: max-content; max-width: 100%;
  display: grid; gap: var(--sp-3); text-align: left;
}
.ec-benefits li {
  position: relative; padding-left: 2rem;
  font-size: var(--fs-h3); font-weight: 500; color: var(--text);
  line-height: var(--lh-body);
}
.ec-benefits li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-weight: 700;
}
.ec-form {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
  max-width: 440px; margin: 0 auto;
}
.ec-input {
  flex: 1 1 220px; min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit; font-size: var(--fs-body); color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--pill-radius);
  transition: border-color var(--dur-base);
}
.ec-input::placeholder { color: var(--text-faint); }
.ec-input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-color: var(--accent); }
.ec-btn {
  flex: 0 0 auto; min-height: var(--touch-min);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: var(--fs-body);
  border-radius: var(--pill-radius); padding: var(--sp-3) var(--sp-6);
  box-shadow: 0 4px 18px rgba(139, 57, 41, .28);
  transition: background var(--dur-base), transform var(--dur-fast);
}
.ec-btn:hover { background: var(--accent-hover); }
.ec-btn:active { transform: scale(.98); }
.ec-btn:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.ec-fine { margin: var(--sp-4) auto 0; font-size: var(--fs-tiny); color: var(--text-muted); max-width: 360px; }
.ec-success { display: none; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 0; }
.ec-success .ec-tick {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
.ec-success p { font-size: var(--fs-body); color: var(--text); margin: 0; font-weight: 500; }
.email-cta.is-sent .ec-lead,
.email-cta.is-sent .ec-benefits,
.email-cta.is-sent .ec-form,
.email-cta.is-sent .ec-fine { display: none; }
.email-cta.is-sent .ec-success { display: flex; }
@media (max-width: 520px) {
  .ec-btn { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════
   早鳥彈窗：滑到 CTA 區自動彈出一次（更醒目的轉換）
   ════════════════════════════════════════════ */
.cta-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: none; align-items: center; justify-content: center; padding: var(--sp-4);
}
.cta-modal.is-open { display: flex; }
.cta-modal__scrim { position: absolute; inset: 0; background: rgba(26, 20, 16, .5); }
.cta-modal__card {
  position: relative; z-index: 1; width: 100%; max-width: 400px;
  background: var(--bg); border: 1px solid var(--accent);
  border-radius: var(--card-radius); box-shadow: 0 20px 60px rgba(26, 20, 16, .28);
  padding: var(--sp-7) var(--sp-5) var(--sp-5); text-align: center;
  animation: cta-pop var(--dur-slow) var(--ease-enter);
}
@keyframes cta-pop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.cta-modal__close {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: var(--touch-min); height: var(--touch-min);
  border: none; background: transparent; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--text-muted); border-radius: 50%;
  transition: color var(--dur-base), background var(--dur-base);
}
.cta-modal__close:hover { color: var(--accent); background: var(--bg-sunken); }
.cta-modal__close:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.cta-modal .eyebrow { color: var(--accent); margin-bottom: var(--sp-2); }
.cta-modal h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.6rem, 5vw, 1.9rem); line-height: var(--lh-tight); margin: 0 0 var(--sp-4); color: var(--text);
}
.cta-modal .ec-benefits li {
  font-size: var(--fs-body); white-space: nowrap;
}
.cta-modal__sub { font-size: var(--fs-body); color: var(--text-soft); line-height: var(--lh-body); margin: 0 0 var(--sp-5); }
.cta-modal__sub b { color: var(--accent); font-weight: 700; }
.cta-modal .ec-form { flex-direction: column; max-width: none; }
.cta-modal .ec-input, .cta-modal .ec-btn { flex: 1 1 100%; width: 100%; }
.cta-modal__card.is-sent .eyebrow,
.cta-modal__card.is-sent h3,
.cta-modal__card.is-sent .cta-modal__sub,
.cta-modal__card.is-sent .ec-form,
.cta-modal__card.is-sent .ec-fine { display: none; }
.cta-modal__card.is-sent .ec-success { display: flex; }
@media (prefers-reduced-motion: reduce) { .cta-modal__card { animation: none; } }
body.cta-modal-lock { overflow: hidden; }

/* ════════════════════════════════════════════
   文法／記憶解釋浮卡：游標移上、或點一下（手機）、或鍵盤 focus 時顯示
   用在 .st-hear 與 .opt 上：加 class has-note，內含一個 .gloss
   ════════════════════════════════════════════ */
.has-note { position: relative; cursor: help; -webkit-tap-highlight-color: var(--tap-highlight); }
.has-note .jp {
  text-decoration: underline dotted var(--border-strong);
  text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-base);
}
.has-note:hover .jp,
.has-note:focus .jp,
.has-note:focus-within .jp { text-decoration-color: var(--accent); }
.has-note:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--btn-radius); }

.gloss {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-2));
  z-index: var(--z-tooltip);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--btn-radius);
  box-shadow: 0 8px 28px rgba(26, 20, 16, .14);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-tiny); color: var(--text-soft); line-height: 1.9;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-base) var(--ease-enter),
              transform var(--dur-base) var(--ease-enter),
              visibility var(--dur-base);
  pointer-events: none;
}
/* 一張卡內分行：文法一行、單字一行，清楚區分 */
.gloss-row { display: block; }
.gloss-row + .gloss-row {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.gloss-label {
  display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); background: var(--accent-bg);
  padding: 1px 7px; border-radius: var(--pill-radius); margin-right: var(--sp-2);
  vertical-align: 1px;
}
.gloss-label.g-word { color: var(--ok); background: var(--ok-bg); }  /* 單字＝松綠 */
.gloss-label.g-set  { color: var(--set); background: var(--set-bg); }  /* 慣用＝赭金 */
.gloss b, .gloss strong { color: var(--text); font-weight: 700; }
.has-note:hover .gloss,
.has-note:focus .gloss,
.has-note:focus-within .gloss { opacity: 1; visibility: visible; transform: none; }

/* 可替換的字（slot）：句中可換成其他詞，搭配 .gloss 說明替換選項 */
.slot {
  background: var(--accent-bg); color: var(--accent); font-weight: 700;
  border-radius: 4px; padding: 0 5px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

@media (prefers-reduced-motion: reduce) {
  .gloss { transition: opacity var(--dur-base), visibility var(--dur-base); transform: none; }
}

/* ════════════════════════════════════════════
   ⑥ 速查單字表（頁尾、練習 CTA 之前；桌機多欄、永遠攤開）
   每筆一顆可播放 ▶（.vg-audio，由 scenario.js 接 manifest）
   ════════════════════════════════════════════ */
.vocab-section { max-width: none; margin: var(--sp-7) 0 var(--sp-5); }
.vocab-section .eyebrow { color: var(--accent); margin-bottom: var(--sp-2); }
.vocab-section h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); margin: 0 0 var(--sp-2); }
.vocab-section .vocab-lead { font-size: var(--fs-small); color: var(--text-muted); margin: 0 0 var(--sp-4); }
.vocab-group + .vocab-group { margin-top: var(--sp-5); }
.vocab-group-head {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-small); letter-spacing: .08em; margin: 0 0 var(--sp-2);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; list-style: none; user-select: none;
}
.vocab-group-head::-webkit-details-marker { display: none; }
.vocab-group-head:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: var(--btn-radius); }
.vocab-group-head::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.vg-head-gram { color: var(--accent); }
.vg-head-gram::before { background: var(--accent); }
.vg-head-word { color: var(--ok); }
.vg-head-word::before { background: var(--ok); }
.vg-head-set  { color: var(--set); }
.vg-head-set::before  { background: var(--set); }
.vocab-group-head::after { content: '▾'; font-size: .8em; color: var(--text-muted); margin-left: 2px; transition: transform var(--dur-base); }
.vocab-group:not([open]) > .vocab-group-head::after { transform: rotate(-90deg); }

.vocab-grid { list-style: none; margin: 0; padding: 0; }
.vocab-grid li {
  break-inside: avoid; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border); border-left: 3px solid var(--border-strong);
}
.vocab-grid li.vg-gram { border-left-color: var(--accent); }
.vocab-grid li.vg-word { border-left-color: var(--ok); }
.vocab-grid li.vg-set  { border-left-color: var(--set); }
.vg-text { display: block; }
.vg-jp { display: block; font-family: var(--font-display); font-weight: 600; color: var(--text); font-size: 1rem; }
.vg-roma { display: block; color: var(--text-muted); font-size: var(--fs-small); margin-top: 1px; }
.vg-zh { display: block; color: var(--text-soft); font-size: var(--fs-small); margin-top: 2px; }

.vg-audio {
  flex: 0 0 auto; position: relative; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--bg-sunken); color: var(--text-muted);
  font-size: .55rem; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.vg-audio::after { content: ''; position: absolute; inset: -9px; }   /* 觸控熱區補到 44px */
.vg-gram .vg-audio:hover, .vg-gram .vg-audio.playing { background: var(--accent); color: var(--bg); }
.vg-word .vg-audio:hover, .vg-word .vg-audio.playing { background: var(--ok); color: var(--bg); }
.vg-set  .vg-audio:hover, .vg-set  .vg-audio.playing { background: var(--set); color: var(--bg); }
.vg-audio:active { transform: scale(.9); }
.vg-audio:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.vg-audio--legend { width: 18px; height: 18px; font-size: .5rem; vertical-align: -3px; cursor: default; }
.vg-audio--legend::after { content: none; }

@media (min-width: 720px) {
  .vocab-grid { columns: 18rem; column-gap: var(--sp-6); }
}

/* ════════════════════════════════════════════
   逐詞對齊・優化層（原 scenario-beta.css，已併入正式）
   ①字級 ②拼音逐詞對齊 ③浮卡移右側 ④只標關鍵字虛線
   ⑤階段分割線 ⑦文化小知識 ⑧逐詞排版 ⑨可替換字
   ※ ⑧逐詞排版／④整句去底線只在「已轉成 .tk 逐詞」的句子生效（用 :has(.tk) 把關），
     尚未轉換的情境頁維持整句虛線、不受影響。
   ════════════════════════════════════════════ */

/* ── ① 字級放大：三行對話讀起來不費力 ── */
.jp   { font-size: 1.2rem; line-height: 1.7; }
.roma { font-size: .9rem; }
.zh   { font-size: .92rem; color: var(--text-soft); }
.gloss      { font-size: .82rem; line-height: 1.85; }
.gloss-label { font-size: .66rem; }
.st-hear-label { font-size: var(--fs-small); }
.opt-badge  { font-size: var(--fs-small); }

/* ── ② 羅馬拼音與日文對齊：同左緣、去掉會推開首字的字距 ── */
.roma {
  letter-spacing: 0;
  word-spacing: normal;
  margin-top: 4px;
}
.zh { margin-top: 3px; }

/* ── ④ 只在「有解釋的關鍵字」下虛線，整句不再加底線（僅逐詞頁）── */
.has-note .jp:has(.tk),
.has-note:hover .jp:has(.tk),
.has-note:focus .jp:has(.tk),
.has-note:focus-within .jp:has(.tk) { text-decoration: none; }

.term {
  text-decoration: underline dotted var(--border-strong);
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur-base), color var(--dur-base);
}
.has-note:hover .term,
.has-note:focus .term,
.has-note:focus-within .term { text-decoration-color: var(--accent); color: var(--accent); }

/* 註解三分類：關鍵字虛線＝浮卡標籤同色（文法朱紅／單字松綠／慣用赭金）*/
.term.t-gram { text-decoration-color: var(--accent); }
.term.t-word { text-decoration-color: var(--ok); }
.term.t-set  { text-decoration-color: var(--set); }
.has-note:hover .term.t-gram,
.has-note:focus .term.t-gram,
.has-note:focus-within .term.t-gram { color: var(--accent); text-decoration-color: var(--accent); }
.has-note:hover .term.t-word,
.has-note:focus .term.t-word,
.has-note:focus-within .term.t-word { color: var(--ok); text-decoration-color: var(--ok); }
.has-note:hover .term.t-set,
.has-note:focus .term.t-set,
.has-note:focus-within .term.t-set { color: var(--set); text-decoration-color: var(--set); }

/* ── ③ 解釋浮卡移到右側欄，不再壓住下方文字（桌機寬度足夠時）── */
@media (min-width: 1140px) {
  .tree-layout { grid-template-columns: 260px 1fr; gap: var(--sp-5); }
  .stations { max-width: 480px; }

  .gloss {
    left: calc(100% + var(--sp-5));
    right: auto;
    top: 0;
    width: 260px;
    transform: translateX(-6px);
  }
  .has-note:hover .gloss,
  .has-note:focus .gloss,
  .has-note:focus-within .gloss { transform: none; }

  .gloss::before {
    content: '';
    position: absolute;
    left: -7px; top: 20px;
    width: 12px; height: 12px;
    background: var(--bg-raised);
    border-left: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
    transform: rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .term { transition: none; }
}

/* ── ⑤ 階段分割線：主線／岔路／結帳／救援的段落界線 ── */
.stage-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-3) 0 calc(-1 * var(--sp-2));
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--text-muted);
}
.stage-divider::before,
.stage-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}
.stage-divider span { flex: 0 0 auto; }

/* ── ⑦ 文化小知識：情境潛規則 ── */
.culture-section {
  max-width: 620px;
  margin: var(--sp-7) 0 var(--sp-5);
}
.culture-section .eyebrow { color: var(--set); margin-bottom: var(--sp-2); }
.culture-section h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); margin: 0 0 var(--sp-2);
}
.culture-section .culture-lead {
  font-size: var(--fs-small); color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}
.culture-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.culture-list li {
  display: flex; gap: var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--set);
  border-radius: var(--card-radius);
  padding: var(--sp-3) var(--sp-4);
}
.culture-ico { font-size: 1.2rem; line-height: 1.5; flex: 0 0 auto; }
.culture-body { margin: 0; font-size: var(--fs-small); color: var(--text-soft); line-height: 1.8; }
.culture-body b { color: var(--text); font-weight: 700; }
.culture-body .jp-inline { font-family: var(--font-display); color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ── ⑧ 對話逐詞排版：每個詞 = 振假名(上)／日文／羅馬拼音(下)（僅 .jp:has(.tk)）── */
.jp:has(.tk) {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  column-gap: 2px; row-gap: var(--sp-2);
  line-height: 1.3;
}
.tk { display: inline-flex; flex-direction: column; align-items: center; }
.tk .bs { font-size: 1.2rem; line-height: 1.4; }
.tk rt {
  font-size: var(--fs-kana); color: var(--kana-color);
  font-weight: 400; line-height: 1.2;
}
.tk .rm {
  font-size: .82rem; color: var(--text-soft);
  line-height: 1.25; letter-spacing: 0; margin-top: 2px; min-height: 1em;
}
.tk.pn .bs { color: var(--text-soft); }
.tk .bs.term { text-underline-offset: 3px; }
/* 鷹架拆卸「隱藏拼音」只藏羅馬拼音、留版位不跳動 */
.hide-roma .tk .rm { visibility: hidden; }

/* ── ⑨ 可替換字（slot）：靜置低調（虛線＋⇄），hover 才顯示綠色單字身份 ── */
.bs.slot {
  background: none; color: inherit; font-weight: inherit;
  text-decoration: underline dashed var(--border-strong);
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: color var(--dur-base), text-decoration-color var(--dur-base);
}
.bs.slot::after {
  content: '⇄'; font-size: .68em; margin-left: 2px;
  opacity: .5; vertical-align: 1px; color: var(--text-muted);
}
.has-note:hover .bs.slot,
.has-note:focus .bs.slot,
.has-note:focus-within .bs.slot { color: var(--ok); text-decoration-color: var(--ok); }
.has-note:hover .bs.slot::after,
.has-note:focus-within .bs.slot::after { color: var(--ok); opacity: .85; }

/* ═══════════════════════════════════════════════
   雙人對話：說話者上色 + 名牌 + 醒目下一關（首見於 train-ticket）
   顏色全取自 tokens：你說＝松綠 ok（自己）、站員說＝朱紅 accent（對方）
═══════════════════════════════════════════════ */
/* .spk-you / .spk-staff 加在既有 .st-hear / .opt 上，只覆寫底色、左邊條與名牌色 */
.spk-you,
.spk-staff {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  margin-bottom: var(--sp-3);
}
.spk-you   { background: var(--ok-bg);     border-left: 3px solid var(--ok); }
.spk-staff { background: var(--accent-bg); border-left: 3px solid var(--accent); }

/* .opt 預設「上下底線分隔」，套上說話者色後改成獨立卡片 */
.station .opt.spk-you,
.station .opt.spk-staff { border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); }

/* 岔路站底色較深、特異度較高，需明確覆寫 */
.station-branch .spk-you   { background: var(--ok-bg); }
.station-branch .spk-staff { background: var(--accent-bg); }

/* 說話者「名牌」：你說／站員說 同一格式，只差顏色，每個對話框都有 */
/* 沿用 .st-hear-label 當容器（語音 ▶ 接線靠它定位），改 flex 排版 */
.spk-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.spk-name {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: var(--pill-radius);
  font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .06em;
  color: #fff; white-space: nowrap;
}
.spk-name::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}
.spk-you   .spk-name { background: var(--ok); }
.spk-staff .spk-name { background: var(--accent); }
/* 情境補述（買票／付錢…）＝次要灰框 chip，從屬於名牌 */
.spk-tag {
  padding: 2px 9px; border-radius: var(--pill-radius);
  font-size: var(--fs-tiny); font-weight: 600;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--border-strong); white-space: nowrap;
}
.spk-head .audio-ctrls { margin-left: auto; }

/* ════ 對話框底下的導覽鈕（統一系統）════
   一種按鈕外型，角色只靠顏色分；同字級、同圓角、同高、只用 → / ← 兩種箭頭：
   - .next-btn  主線前進 → 朱紅實心、整列寬
   - .branch-btn 分支     → 赭金外框＋字母徽章，放進 .branch-grid（每行兩個）
   - .st-back   回到主線  → 白底描邊、整列寬、開頭 ← */
.st-next2 {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border-strong);
}
.st-next2-cue { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--text-muted); }

/* 主線前進：朱紅實心、整列寬 */
.next-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent); color: #fff;
  border: none; border-radius: var(--btn-radius);
  font-family: inherit; font-weight: 700; font-size: var(--fs-body);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-enter),
              transform var(--dur-fast) var(--ease-enter);
}
.next-btn:hover  { background: var(--accent-hover); }
.next-btn:active { transform: translateY(1px); }
.next-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* 回到主線：白底描邊、整列寬 */
.st-back {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  background: #fff; color: var(--text-soft);
  border: 1.5px solid var(--border-strong); border-radius: var(--btn-radius);
  font-family: inherit; font-weight: 600; font-size: var(--fs-body);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-base) var(--ease-enter),
              border-color var(--dur-base) var(--ease-enter),
              color var(--dur-base) var(--ease-enter);
}
.st-back:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.st-back:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* 分支鈕格線：每行兩個 */
.branch-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
/* 分支鈕：赭金外框＋字母徽章（A/B/C 與路線圖同一套識別），左對齊、無 emoji */
.branch-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3);
  background: var(--set-bg); color: var(--set);
  border: 1.5px solid var(--set); border-radius: var(--btn-radius);
  font-family: inherit; font-weight: 600; font-size: var(--fs-small);
  text-align: left; line-height: 1.25; cursor: pointer;
  transition: background var(--dur-base) var(--ease-enter), color var(--dur-base) var(--ease-enter);
}
.branch-btn:hover { background: var(--set); color: #fff; }
.branch-btn:hover .br-badge { background: #fff; color: var(--set); }
.branch-btn:focus-visible { outline: 2px solid var(--set); outline-offset: 2px; }
.br-badge {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  background: var(--set); color: #fff;
  font-size: var(--fs-tiny); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* 分支站尾容器：回到主線（整列）＋其他分支格線 */
.st-foot {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
}
.st-foot .st-back + .branch-grid { margin-top: var(--sp-2); }

@media (prefers-reduced-motion: reduce) { .next-btn, .branch-btn, .st-back { transition: none; } }

/* 使用教學：標題放大＋「顏色＝誰在說話」色塊圖例 */
.usage-guide .ug-title { font-size: var(--fs-h3); letter-spacing: .02em; }
.spk-chip {
  display: inline-block; padding: 1px 8px; border-radius: var(--pill-radius);
  font-size: var(--fs-tiny); font-weight: 700; vertical-align: middle;
}
.spk-chip-you   { background: var(--ok-bg);     color: var(--ok);     border: 1px solid var(--ok); }
.spk-chip-staff { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); }
/* #1 凡例的「你說／站員說」色塊與文字行對準（中心對齊那一行） */
.usage-guide .spk-chip { vertical-align: 0.08em; }

/* ════════════════════════════════════════════
   逐詞・per-term 浮卡 + 可替換字選單（限 body[data-tips="term"]）
   ② 滑到單一虛線詞才出「該詞」解釋（不再整句一起跳）
   ③ 純 hover 顯示、不靠點擊釘住（觸控由 JS 點按單顆切換、永不同時兩張）
   ⑥ 浮卡加寬、字放大、格式＝[類別] 詞 romaji ／ 註解
   ④⑤ slot 可替換字：點開選單換不同單字／數量
   ════════════════════════════════════════════ */
body[data-tips="term"] .has-note .gloss { display: none; }   /* 改用 per-term 浮卡 */
body[data-tips="term"] .tk { position: relative; }

/* 只讓「游標所在的那個詞」變色，不再整句一起亮 */
body[data-tips="term"] .has-note:hover .term,
body[data-tips="term"] .has-note:focus-within .term,
body[data-tips="term"] .has-note:hover .bs.slot,
body[data-tips="term"] .has-note:focus-within .bs.slot { color: inherit; }
body[data-tips="term"] .has-note:hover .bs.slot { text-decoration-color: var(--border-strong); }
body[data-tips="term"] .tk:hover .term.t-gram { color: var(--accent); text-decoration-color: var(--accent); }
body[data-tips="term"] .tk:hover .term.t-word { color: var(--ok);     text-decoration-color: var(--ok); }
body[data-tips="term"] .tk:hover .term.t-set  { color: var(--set);    text-decoration-color: var(--set); }
body[data-tips="term"] .tk:hover .bs.slot     { color: var(--ok);     text-decoration-color: var(--ok); }
body[data-tips="term"] .tk:hover .bs.slot::after { color: var(--ok); opacity: .85; }

/* ── per-term 浮卡本體（⑥ 加寬＋放大）── */
.tip {
  position: absolute; left: 50%; top: calc(100% + var(--sp-2));
  z-index: var(--z-tooltip);
  width: max-content; min-width: 220px; max-width: min(360px, 86vw);
  text-align: left;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--btn-radius);
  box-shadow: 0 8px 28px rgba(26, 20, 16, .16);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: .92rem; line-height: 1.85; color: var(--text-soft);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);   /* 橫向位置全交給 JS 的 left；transform 只做登場上移 */
  transition: opacity var(--dur-base) var(--ease-enter),
              transform var(--dur-base) var(--ease-enter),
              visibility var(--dur-base);
}
.tip.t-word { border-left-color: var(--ok); }
.tip.t-set  { border-left-color: var(--set); }
.tk:hover > .tip,
.tk.tip-open > .tip {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.tk.menu-open > .tip { display: none; }   /* slot 選單開著時不疊浮卡 */

/* 右側呈現：浮卡擺對話框右邊欄（位置由 JS 算，這裡只補左側小箭頭） */
.tip.tip-right::before {
  content: ''; position: absolute; left: -7px; top: 16px;
  width: 12px; height: 12px; background: var(--bg-raised);
  border-left: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  transform: rotate(45deg);
}

/* 浮卡標頭：[類別] 詞 romaji */
.tip-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.tip-label {
  flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); background: var(--accent-bg);
  padding: 1px 8px; border-radius: var(--pill-radius);
}
.tip-label.t-word { color: var(--ok);  background: var(--ok-bg); }
.tip-label.t-set  { color: var(--set); background: var(--set-bg); }
.tip-word { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text); }
.tip-roma { font-size: .82rem; color: var(--text-muted); }
.tip-body { display: block; }
/* 解釋內文顏色統一：粗體只保留加粗、不另變深色（全站） */
.tip-body b, .tip-body strong { color: inherit; font-weight: 700; }
/* 可替換詞浮卡：目前詞的中文意思（主）＋替換提示（次，淡） */
.tip-mean { display: block; }
.tip-altnote { display: block; margin-top: var(--sp-2); font-size: .85em; color: var(--text-muted); }

/* ── ④⑤ 可替換字（slot）→ 一眼看得出可點：淡綠小膠囊＋▾ ── */
body[data-tips="term"] .slot[data-alts] {
  cursor: pointer;
  text-decoration: none;
  background: var(--ok-bg); color: var(--ok);
  border: 1px dashed var(--ok); border-radius: 5px;
  padding: 0 3px 0 5px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
body[data-tips="term"] .slot[data-alts]::after {
  content: '▾'; font-size: .72em; margin-left: 3px;
  color: var(--ok); opacity: .9; vertical-align: 1px;
}
body[data-tips="term"] .tk:hover .slot[data-alts],
body[data-tips="term"] .slot[data-alts]:focus-visible { background: var(--ok); color: #fff; }
body[data-tips="term"] .tk:hover .slot[data-alts]::after,
body[data-tips="term"] .slot[data-alts]:focus-visible::after { color: #fff; opacity: 1; }
body[data-tips="term"] .slot[data-alts]:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.slot-menu {
  position: absolute; left: 50%; top: calc(100% + var(--sp-2));
  transform: translateX(-50%);
  z-index: var(--z-tooltip);
  min-width: 168px; max-width: 86vw;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong); border-radius: var(--btn-radius);
  box-shadow: 0 8px 28px rgba(26, 20, 16, .18);
  padding: var(--sp-2);
}
.slot-menu-title {
  font-size: var(--fs-tiny); color: var(--text-muted); letter-spacing: .04em;
  padding: 2px var(--sp-2) var(--sp-2);
}
.slot-opt {
  display: flex; align-items: baseline; gap: var(--sp-2);
  width: 100%; min-height: 38px; text-align: left;
  padding: var(--sp-2) var(--sp-2);
  background: transparent; border: none; border-radius: 5px;
  font-family: inherit; color: var(--text-soft); cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.slot-opt:hover, .slot-opt:focus-visible { background: var(--ok-bg); color: var(--ok); outline: none; }
.slot-opt[aria-current="true"] { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.slot-opt .so-jp { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.slot-opt .so-rm { font-size: .8rem; color: var(--text-muted); }
.slot-opt:hover .so-rm, .slot-opt:focus-visible .so-rm { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .tip { transition: opacity var(--dur-base), visibility var(--dur-base); }
}

/* ── #9 在地眉角：區塊加寬＋6 點主標與解釋一起放大 ── */
.culture-section { max-width: 860px; }
.culture-section .culture-body { font-size: 1rem; line-height: 1.9; }
/* 主標獨立一行、解釋換下一行（只切每點開頭那個粗體，內文的 <b>左</b> 等不受影響） */
.culture-section .culture-body > b:first-child { display: block; margin-bottom: var(--sp-1); }
.culture-section .culture-ico { font-size: 1.45rem; }

/* ── #10 單字複習：字體放大、更好讀 ── */
.vg-jp   { font-size: 1.2rem; }
.vg-roma { font-size: .85rem; }
.vg-zh   { font-size: .92rem; }