/* ═══════════════════════════════════════════════════════════════
   home-sprint.css 內容：
   1. Sprint-mode card（≤30 days）— 衝刺卡 + 30 天日曆 + Tomorrow Hook
   2. Editorial Practice Interface — 練習答題卡判決書美學（Wave 1-5）
   3. iOS 觸控 / safe area / measure 等 helpers
   （拆 home-features.css 時順 cascade 一起拉過來）
═══════════════════════════════════════════════════════════════ */

/* Sprint-mode card (≤30 days to exam) — 2026-05-11 大幅瘦身
   舊版：32px padding + 2-col body (1fr/240px) + 24-32px hero title + 三段 side panel
   新版：18-22px padding + single-col + 18-22px hero title + 階段建議/mocks inline
   高度減少 ~40%，30 天日曆每格放日期數字、今天 cell 加「今」徽章 */
.edit-action-sprint .edit-action-h2 { color: var(--c-vermilion); }

/* 2026-05-12 UI mesh：升級到 hero 等級玻璃容器，砍 border-left vermilion 條
   理由：原本 paper-2 + border-left 是 admin/dashboard 風，跟首頁 hero 編輯誌
   感（玻璃 + 大圓角 + 浮層陰影）視覺斷層。改用同 token 對齊。 */
.sprint-card {
  background: color-mix(in oklch, var(--c-surface) 65%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--c-border);
  border-radius: clamp(16px, 1.6vw, 24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
              0 24px 64px -16px rgba(0,0,0,.18);
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 28px);
  position: relative;
  overflow: hidden;
}

/* 2026-05-11 v3 user：「考前衝刺 · 基礎複習」H2 還是跟 card 分開的
   原本 greet + H2 在 .edit-action 外層、card 在底下 → 兩塊視覺分離
   v3 把 greet + H2 搬進 card 頂端，整張卡是一個視覺單位 */
.sprint-card-title {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-rule);
}
.sprint-card-title .edit-action-greet {
  margin-bottom: 4px;
}
.sprint-card-h2 {
  font-size: clamp(20px, 2vw, 26px) !important;   /* 從 30-46 縮到 20-26（卡內 hero 級別）*/
  margin: 0 !important;
  line-height: 1.3;
}
/* card 內已含 title，下方 hdr 就不需要再加 border-bottom 重複分隔 */
.sprint-card-title + .sprint-hdr {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
}
.sprint-card::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 180px; height: 180px;
  background: radial-gradient(circle at top right, rgba(178,58,43,.08), transparent 70%);
  pointer-events: none;
}

/* 2026-05-12：「這週做什麼」一句話任務（UX Architect 建議）
   放在 h2 下、hdr 上，是這張卡的「目標行動」總結 */
.sprint-weekly {
  margin: 0 0 14px;
  font-family: var(--ff-serif-cn, var(--ff-serif), serif);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: var(--c-ink, var(--c-text));
  letter-spacing: .01em;
}

/* Header — 累積 + mock-flag inline
   2026-05-12：砍 PHASE chip（已用中文期別名取代）+ sprint-days（跟 hero 倒數重複） */
.sprint-hdr {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--c-rule);
}
.sprint-cum {
  font-family: var(--ff-mono);
  font-size: clamp(12px, .9vw, 13.5px);
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .04em;
}
.sprint-cum strong {
  font-family: var(--ff-serif-en);
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--c-ink); font-weight: 700;
  font-variant-numeric: tabular-nums; margin: 0 2px;
}
.sprint-mock-flag {
  font-family: var(--ff-mono);
  font-size: clamp(10.5px, .8vw, 12px);
  font-weight: 700;
  color: var(--c-vermilion); background: rgba(178,58,43,.12);
  padding: 4px 10px; border-radius: 999px; margin-left: auto;
  letter-spacing: .04em;
}

/* Hero — 今日重點 + spec/錯題/進度 inline + CTA row */
.sprint-hero {
  margin-bottom: 12px;
}
.sprint-hero-eyebrow {
  font-family: var(--ff-mono);
  font-size: clamp(10.5px, .8vw, 12px);
  font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-vermilion); margin-bottom: 6px;
}
.sprint-hero-title {
  font-family: var(--ff-serif-cn);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -.01em; color: var(--c-ink);
  line-height: 1.3; margin-bottom: 8px;
}
.sprint-hero-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px;
  font-family: var(--ff-mono);
  font-size: clamp(12px, .9vw, 13.5px);
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.sprint-hero-meta strong { color: var(--c-ink); font-weight: 700; }
.sprint-hero-wrong { color: var(--c-vermilion); }
.sprint-hero-progress { color: var(--c-ink-2, var(--c-muted)); }
.sprint-hero-progress.is-done {
  color: var(--c-success); font-weight: 700;
}
.sprint-hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

/* Meta row — 階段建議 + 未來模考 並排（>768px）／堆疊（手機）*/
.sprint-meta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: 4px;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .sprint-meta-row {
    grid-template-columns: 1fr auto;
    gap: 14px 20px;
    align-items: start;
  }
}
.sprint-advice-inline {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.sprint-advice-h,
.sprint-mocks-h {
  font-family: var(--ff-mono);
  font-size: clamp(10px, .75vw, 11.5px);
  letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted);
  font-weight: 700;
}
.sprint-advice-body {
  font-family: var(--ff-sans-cn);
  font-size: clamp(12.5px, .95vw, 14px);
  line-height: 1.55;
  color: var(--c-ink);
}
.sprint-mocks-inline {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.sprint-mock-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sprint-mock-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 8px;
  background: var(--c-rule);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: clamp(11px, .85vw, 12.5px);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: .04em;
}
.sprint-mock-chip-when {
  font-weight: 400;
  font-size: .88em;
  color: var(--c-muted);
}
.sprint-mock-chip.is-today {
  background: var(--c-vermilion);
  color: #fff8ec;
}
.sprint-mock-chip.is-today .sprint-mock-chip-when {
  color: rgba(255,248,236,.85);
}

/* 30-day calendar — 2026-05-11 v2 RWD（user 反映「手機看不清、桌機也看不完整」）
   3-tier breakpoint：
     - 小手機 ≤380px：5×6 grid（每格 ~55-66px @ 320-380px viewport，極易讀）
     - 手機/平板 381-720px：6×5 grid（每格 ~50-100px）
     - 桌機 ≥721px：10×3 grid（每格 ~50-65px，narrative 左→右一路滑到今天）
   cell aspect-ratio:1 確保正方形、min-height 36px 保證數字 ≥12px 仍清楚
   今天 cell 朱印紅 + 「今」徽章；月份切換點打 vertical break + 月份小標 */
.sprint-grid-section {
  border-top: 1px solid var(--c-rule); padding-top: 12px;
  margin-top: 0;
}
.sprint-grid-h {
  font-family: var(--ff-sans-cn);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 10px;
  letter-spacing: .01em;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.sprint-grid-h-main { font-weight: 700; }
.sprint-grid-h-sub {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--c-muted);
  letter-spacing: .02em;
}
.sprint-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
/* 平板 / 大手機：6 cols × 5 rows = 30 */
@media (max-width: 720px) {
  .sprint-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
  }
}
/* 小手機 iPhone SE 320-380px：5 cols × 6 rows = 30，每格更大 */
@media (max-width: 380px) {
  .sprint-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
}
.sprint-cell {
  /* 2026-05-11 v3 user：「cell 大字小、浪費空間」
     v2：aspect-ratio:1 + 12-14px font = 數字佔 cell 高 ~18%
     v3：砍 aspect-ratio（intrinsic 高度）+ 字級 ↑ + 字色 ink 黑
     cell 高度 = padding+font ≈ 30px，數字佔 ~55% 高度 */
  border-radius: 4px;
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  display: grid; place-items: center;
  position: relative;
  padding: 7px 2px;
  font-family: var(--ff-mono);
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 700;
  color: var(--c-ink, var(--c-text));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-height: 30px;
  transition: transform .15s;
  overflow: visible;
}
/* 桌機 cell：lock 17px + 微縮高度 */
@media (min-width: 721px) {
  .sprint-cell { font-size: 17px; min-height: 32px; padding: 8px 2px; }
}
.sprint-cell-d { display: block; }
.sprint-cell.done  {
  background: var(--c-vermilion);
  border-color: var(--c-vermilion);
  color: #FFFAF2;
}
.sprint-cell.soft  {
  background: rgba(178,58,43,.16);
  border-color: rgba(178,58,43,.32);
  color: var(--c-ink);
}
.sprint-cell.empty {
  /* 2026-05-11 v5：user「未練習特別大格」— empty cell 視覺退一階
     原本 paper 底 + rule 灰邊 → 在 paper-2 卡上看起來像「outlined 空盒」
     改 transparent 邊、subtle tint → 跟卡底融合、不再像「特別大格」 */
  background: rgba(0, 0, 0, .02);
  border-color: transparent;
  color: var(--c-muted);
}
[data-theme="dark"] .sprint-cell.empty {
  background: rgba(255, 255, 255, .03);
}
.sprint-cell.today {
  background: var(--c-vermilion);
  border-color: var(--c-ink);
  color: #FFFAF2;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--c-paper-2), 0 0 0 3px var(--c-vermilion);
  z-index: 1;
}
.sprint-cell.is-month-break {
  border-left: 2px solid var(--c-ink-2, var(--c-muted));
}
.sprint-cell-month {
  position: absolute;
  top: -7px; left: -2px;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--c-ink);
  background: var(--c-paper-2);
  padding: 0 3px;
  letter-spacing: .02em;
  line-height: 1.3;
  white-space: nowrap;
}
.sprint-cell-today-tag {
  position: absolute;
  top: -7px; right: -4px;
  font-family: var(--ff-serif-cn);
  font-size: 10px;
  font-weight: 700;
  color: #FFFAF2;
  background: var(--c-ink);
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: .04em;
  line-height: 1.4;
  z-index: 2;
}

.sprint-grid-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--c-muted);
  letter-spacing: .04em;
}
.sprint-grid-legend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 4px; vertical-align: middle;
  box-sizing: border-box;
  /* 2026-05-11 fix：base.css 全站 .empty { padding: 48px 20px } 全站 utility
     會撞到 <i class="dot empty"> 的 empty class 害 swatch 被撐成 4-5 倍大
     → 顯式 padding/font/line-height reset 防止 inherit 進來 */
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.sprint-grid-legend i.done { background: var(--c-vermilion); }
.sprint-grid-legend i.soft { background: rgba(178,58,43,.32); }
.sprint-grid-legend i.empty { background: var(--c-rule); }   /* 純灰塊，不再用 border outline */
.sprint-grid-legend i.today { background: var(--c-vermilion); box-shadow: 0 0 0 1px var(--c-ink); }   /* outline 用 box-shadow 不影響尺寸 */

/* Tomorrow Hook 嵌入主卡 sub-section
   2026-05-11 v4 user：「跟 sprint card 結合成一個」
   v3：仍有 eyebrow + title 副標 → 視覺像 sub-section heading 像獨立區塊
   v4：砍 heading（eyebrow + title）、items 改 inline chip row、slot 變小 link
   只剩 top divider 跟主卡尾無縫接續，不再有「卡中卡」感 */
.sprint-tomorrow {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--c-rule);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px;
}
.edit-action-card .sprint-tomorrow {
  margin-top: 14px;
}
/* v4：heading 整段隱藏（保留 DOM 給 a11y 但 CSS 收掉） */
.sprint-tomorrow-hdr { display: none; }
.sprint-tomorrow-list {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 4px 12px;
  flex: 1; min-width: 0;
}
.sprint-tomorrow-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-sans-cn);
  font-size: clamp(12px, .9vw, 13px);
  line-height: 1.4;
  color: var(--c-ink-2, var(--c-text));
  white-space: nowrap;
}
.sprint-tomorrow-item strong {
  color: var(--c-vermilion);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sprint-tomorrow-item.is-due strong {
  font-size: 1.1em;
}
.sprint-tomorrow-ico {
  flex-shrink: 0;
  font-size: 14px;
  width: 18px;
  text-align: center;
  line-height: 1;
}
/* v4：slot 從 pill button 變 subtle text link（margin-left auto 推到右邊）*/
.sprint-tomorrow-slot {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--ff-sans-cn);
  font-size: clamp(11.5px, .85vw, 12.5px);
  color: var(--c-muted);
  cursor: pointer;
  transition: color .15s;
  letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.sprint-tomorrow-slot:hover {
  color: var(--c-vermilion);
}
.sprint-tomorrow-slot strong {
  color: var(--c-vermilion);
  font-weight: 700;
}
@media (max-width: 540px) {
  .sprint-tomorrow { padding-top: 10px; gap: 7px; }
  .sprint-tomorrow-slot { font-size: 12px; padding: 5px 10px; }
}

/* Phase tints */
.sprint-card.sprint-sprint-b::before { background: radial-gradient(circle at top right, rgba(184,137,58,.1), transparent 70%); }
.sprint-card.sprint-sprint-c::before { background: radial-gradient(circle at top right, rgba(178,58,43,.14), transparent 70%); }
.sprint-card.sprint-sprint-d {
  border-left-color: #4F6B3A;   /* 文件綠：休息／整理階段 */
}
.sprint-card.sprint-sprint-d .sprint-tag { background: #4F6B3A; }
.sprint-card.sprint-sprint-d::before { background: radial-gradient(circle at top right, rgba(79,107,58,.1), transparent 70%); }

/* ═══════════════════════════════════════════════════════════════
   Editorial Practice Interface — Wave 1-5 (3-expert mesh integration)
   "判決書 + 司法書類" 美學，朱印章戳取代 ✓ ✗
   ══════════════════════════════════════════════════════════════ */

/* Container — paper background under practice view */
#view-practice {
  background: var(--c-paper);
  position: relative;
}

/* .q-progress 進度條：2026-05-13 砍 — 跟 .prog-track (topbar 內) 重複，視覺上跟
   topbar border-bottom + exam-bar 上緣疊三層橫線；保留 .q-progress-chip（右上浮動）
   跟 .q-page-num（左側直書頁碼），那兩個是獨立元件不衝突 */
.q-progress-chip {
  position: fixed; top: 8px; right: 12px; z-index: 31;
  background: rgba(20,17,13,.78); color: #FFFAF2;
  padding: 4px 12px; border-radius: 999px;
  font-family: var(--ff-mono); font-size: 11.5px;
  letter-spacing: .04em; font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

/* 2026-05-14 user 反映:「背景卷之第一題根本沒意義 把可視空間加大才對」
   .q-page-num (左側直書「卷之 第 N 題」) + .q-spine (左側進度線) 是裝飾性元素,
   無功能訊息, 占用桌機左側 80px+ 空間。一律隱藏, 把空間還給內容。 */
.q-page-num { display: none !important; }
.q-spine    { display: none !important; }

/* Practice paper card — relative for ::before/::after sprint decorations.
   2026-05-15 v14: padding / max-width 拿掉, 走 practice.css 的 BS5 .container 規範.
   這裡只留 position 跟最小 padding-bottom (sprint footer 留白). */
.q-area {
  position: relative;
  padding-bottom: 120px;   /* sprint footer space, 不影響 practice.css 的 padding 規則 */
}

.q-card {
  background: var(--c-paper-2) !important;
  border: 1px solid var(--c-rule) !important;
  border-radius: 4px !important;
  box-shadow:
    0 1px 0 rgba(20,17,13,.04),
    0 12px 28px -16px rgba(60,40,20,.12) !important;
  margin-bottom: 16px !important;
  position: relative;
  overflow: visible !important;
}
/* Top-right paper-fold ornament */
.q-card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 14px; height: 14px;
  background: linear-gradient(225deg, var(--c-paper) 50%, transparent 50%);
  border-left: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  pointer-events: none;
}
.q-card-hdr {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--c-rule) !important;
  background: transparent;
}
.q-num {
  font-family: var(--ff-mono) !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .15em !important; text-transform: uppercase;
  background: transparent !important;
  color: var(--c-muted) !important; padding: 0 !important;
}
.q-flag {
  width: 32px !important; height: 32px !important;
  color: var(--c-muted) !important;
  border-radius: 4px !important;
}
@media (hover: hover) {
  .q-flag:hover { background: var(--c-paper) !important; color: var(--c-vermilion) !important; }
}
.q-flag.flagged { color: var(--c-vermilion) !important; background: rgba(178,58,43,.08) !important; }

.q-body { padding: 24px 24px 20px !important; }
.q-text {
  font-family: var(--ff-serif-cn) !important;
  font-size: 18px !important; line-height: 1.85 !important;
  color: var(--c-ink) !important;
  margin-bottom: 24px !important;
  font-weight: 500;
  letter-spacing: -.005em;
}

/* Options — editorial style, larger thumb-zone */
.opt {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
  background: var(--c-paper) !important;
  border: 1px solid var(--c-rule) !important;
  border-radius: 4px !important;
  font-family: var(--ff-sans-cn) !important;
  font-size: 15.5px !important;
  color: var(--c-ink) !important;
  cursor: pointer;
  min-height: 56px !important;
  line-height: 1.65 !important;
  transition: border-color .18s var(--ease-editorial), background .18s, transform .15s;
  position: relative;
}
.opt:disabled { cursor: default; }
@media (hover: hover) {
  .opt:not(:disabled):hover {
    border-color: var(--c-ink) !important;
    background: var(--c-paper-2) !important;
    transform: none !important;
  }
  .opt:not(:disabled):hover::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 1px; background: var(--c-vermilion);
    animation: opt-line .12s ease-out forwards;
  }
}
@keyframes opt-line { from { transform: scaleY(0); transform-origin: top; } to { transform: scaleY(1); } }

.opt-letter {
  width: 32px !important; height: 32px !important;
  flex-shrink: 0;
  background: transparent !important;
  border: 1px solid var(--c-ink) !important;
  border-radius: 50% !important;
  font-family: var(--ff-serif-en) !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: var(--c-ink) !important;
  margin-top: 1px;
  transition: all .14s var(--ease-editorial);
}
/* Dark mode: 強制看得見的字色 + border。
   --c-ink 在 dark mode 已被 override 為 #E8E1D2 但有時 cascade 順序導致
   被前一輪的 color 蓋過去 — 直接用具體色值確保看得見。 */
[data-theme="dark"] .opt-letter {
  color: #E8E1D2 !important;
  border-color: #B8AE9C !important;
  background: rgba(232,225,210,.06) !important;
}

.opt.selected { border-color: var(--c-vermilion) !important; background: var(--c-paper-2) !important; }
.opt.selected .opt-letter { background: var(--c-vermilion) !important; border-color: var(--c-vermilion) !important; color: #FFFAF2 !important; transform: scale(.92); }
.opt.selected .opt-letter { animation: opt-letter-pop .14s ease-out; }
@keyframes opt-letter-pop { 50% { transform: scale(.88); } 100% { transform: scale(.92); } }

/* Correct/Wrong: NO green/red. Use ink + muted. Stamp does the heavy lifting. */
.opt.correct {
  border-color: var(--c-vermilion) !important;
  background: var(--c-paper-2) !important;
}
.opt.correct .opt-letter { background: var(--c-vermilion) !important; border-color: var(--c-vermilion) !important; color: #FFFAF2 !important; }
.opt.wrong {
  border-color: var(--c-rule) !important;
  background: transparent !important;
  opacity: .55;
}
.opt.wrong .opt-letter { background: transparent !important; border-color: var(--c-muted) !important; color: var(--c-muted) !important; }
/* 2026-05-12 v3：砍 strikethrough — user 反映「影響視覺」
   靠 opacity .55 已足以表達「錯誤選項」，line-through 反而干擾閱讀 */
.opt.wrong[data-user-chose="true"] {
  opacity: .8;
}

/* Stamp — 朱印「正」「誤」appears on reveal */
.q-stamp {
  position: absolute;
  width: 84px; height: 84px;
  pointer-events: none; z-index: 6;
  font-family: var(--ff-serif-cn);
  font-size: 38px; font-weight: 800;
  color: var(--c-vermilion);
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--c-vermilion);
  border-radius: 4px;
  background: rgba(255,250,242,.6);
  box-shadow:
    inset 0 0 0 5px var(--c-vermilion),
    inset 0 0 0 6px rgba(255,250,242,.5),
    inset 0 0 0 7px var(--c-vermilion),
    0 4px 8px -2px rgba(178,58,43,.3);
  letter-spacing: -.02em;
  opacity: 0;
}
.q-stamp.appear {
  animation: stamp-press-mc .56s cubic-bezier(.2,1.6,.4,1) forwards;
}
.q-stamp.wrong-stamp {
  color: #7A1F18;
  border-color: #7A1F18;
  box-shadow:
    inset 0 0 0 5px #7A1F18,
    inset 0 0 0 6px rgba(255,250,242,.5),
    inset 0 0 0 7px #7A1F18,
    0 4px 8px -2px rgba(122,31,24,.3);
}
@keyframes stamp-press-mc {
  0%   { opacity: 0; transform: rotate(-12deg) scale(2); }
  50%  { opacity: 1; transform: rotate(-7deg) scale(1.15); }
  70%  { opacity: 1; transform: rotate(-7deg) scale(.96); }
  100% { opacity: .92; transform: rotate(-7deg) scale(1); }
}
.q-stamp.right-side  { right: 24px; top: 16px; }

/* Feedback "判決主文" attached paper — desktop inline / mobile bottom sheet */
.feedback {
  margin: -2px 18px 16px !important;
  padding: 22px 24px !important;
  background: var(--c-paper) !important;
  border: 1px solid var(--c-rule) !important;
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
  position: relative;
  font-family: var(--ff-sans-cn) !important;
  color: var(--c-ink) !important;
  /* Slide-down attached-paper animation */
  transform-origin: top center;
  animation: fb-slide .36s cubic-bezier(.2,.7,.2,1) both;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
}
@keyframes fb-slide {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-4px); }
  to   { clip-path: inset(0); transform: translateY(0); }
}

.feedback::before {
  content: '主 文';
  display: block;
  font-family: var(--ff-serif-cn);
  font-size: 11px; font-weight: 700;
  letter-spacing: .35em; color: var(--c-vermilion);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--c-rule);
}
.feedback.correct, .feedback.wrong {
  background: var(--c-paper) !important;
  border-color: var(--c-rule) !important;
}
.feedback-title {
  display: none !important;   /* stamp replaces title */
}
.feedback-answer {
  font-family: var(--ff-serif-cn) !important;
  font-size: 16px !important; font-weight: 700 !important;
  color: var(--c-ink) !important;
  margin-bottom: 12px !important;
  letter-spacing: .04em;
}
.feedback-answer::before {
  content: '正解：'; color: var(--c-vermilion); font-weight: 600;
}
.feedback-exp {
  font-size: 14px !important; line-height: 1.85 !important;
  color: var(--c-ink) !important;
  font-family: var(--ff-sans-cn) !important;
}

/* Mandatory note (Wave 2) — required to unlock next question */
.q-note-prompt {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--c-rule);
}
.q-note-eyebrow {
  font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-vermilion); font-weight: 600;
  margin-bottom: 8px;
}
.q-note-ta {
  width: 100%; min-height: 50px; max-height: 140px;
  padding: 10px 12px;
  background: rgba(255,250,242,.6);
  border: 1px solid var(--c-rule);
  border-radius: 3px;
  font-family: var(--ff-sans-cn); font-size: 14px;
  line-height: 1.6; color: var(--c-ink);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color .15s;
}
.q-note-ta:focus {
  outline: none;
  border-color: var(--c-vermilion);
  background: var(--c-paper);
}
.q-note-meter {
  margin-top: 6px;
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--c-muted); letter-spacing: .04em;
}
.q-note-meter.unlocked { color: var(--c-success); }

/* Bottom action bar — sticky, mobile-friendly thumb zone */
.q-action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 25;
  display: flex; align-items: stretch; gap: 1px;
  background: var(--c-rule);
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  border-top: 1px solid var(--c-rule);
}
.q-action-bar > button {
  flex: 1; min-height: 56px;
  background: var(--c-paper-2);
  font-family: var(--ff-sans-cn); font-size: 14px; font-weight: 600;
  color: var(--c-ink);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.q-action-bar > button:disabled {
  color: var(--c-muted); opacity: .5; cursor: not-allowed;
}
.q-action-bar > button.q-act-prev { flex: 0 0 38%; }
.q-action-bar > button.q-act-flag { flex: 0 0 24%; }
.q-action-bar > button.q-act-next { flex: 0 0 38%; background: var(--c-ink); color: #FFFAF2; }
.q-action-bar > button.q-act-next:disabled { background: var(--c-rule); color: var(--c-muted); }
@media (hover: hover) {
  .q-action-bar > button:not(:disabled):hover { background: var(--c-paper); }
  .q-action-bar > button.q-act-next:not(:disabled):hover { background: var(--c-vermilion); }
}
/* 特例斷點 1100 — q-card (720) + 雙側 spine + page-num 需要此寬度，
   恰好對應「desktop with sidebar (256) 之後內容區仍 ≥720」的視覺臨界點 */
@media (min-width: 1100px) {
  /* Desktop: action bar inline at bottom of card, not fixed */
  .q-action-bar {
    position: static; max-width: 720px; margin: 0 auto 32px;
    border-radius: 4px; box-shadow: var(--shadow-sm);
  }
}
/* 配對 1100 — 在內容區未到完整桌機時保留 sticky bottom bar */
@media (max-width: 1099.98px) {
  .q-area { padding-bottom: 80px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .q-stamp.appear { animation: none; opacity: .92; transform: rotate(-7deg); }
  .feedback { animation: none; }
  .opt:not(:disabled):hover::before { animation: none; }
}

/* IRAC quick-fill row above essay textarea */
.essay-irac-row { display: flex; gap: 6px; padding: 8px 16px 0; flex-wrap: wrap; }
.essay-irac-btn {
  font-family: var(--ff-mono); font-size: 11.5px; font-weight: 500;
  padding: 5px 12px; border-radius: 999px;
  background: var(--c-paper-2); color: var(--c-muted);
  border: 1px solid var(--c-rule);
  cursor: pointer; transition: all .15s;
  letter-spacing: .03em;
}
@media (hover: hover) {
  .essay-irac-btn:hover { background: var(--c-vermilion); color: #FFFAF2; border-color: var(--c-vermilion); }
}

/* Finish ritual — A4 style certificate-of-completion modal */
#finish-ritual {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--c-paper);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
#finish-ritual.show { display: flex; animation: ritual-fade-in .6s ease forwards; }
@keyframes ritual-fade-in {
  from { background: rgba(244,239,230,0); }
  to   { background: rgba(244,239,230,1); }
}
.ritual-paper {
  background: var(--c-paper-2);
  border: 1px solid var(--c-rule);
  width: 100%; max-width: 560px; min-height: 700px;
  padding: 80px 60px;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(60,40,20,.25);
  opacity: 0; transform: translateY(20px) scale(.96);
  animation: ritual-paper-rise .8s .4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes ritual-paper-rise {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ritual-eyebrow {
  font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 56px;
}
.ritual-title {
  font-family: var(--ff-serif-cn); font-size: 56px; font-weight: 800;
  letter-spacing: .35em; color: var(--c-ink);
  margin: 0 0 8px; line-height: 1.2;
}
.ritual-hairline {
  width: 80px; height: 1px;
  background: var(--c-vermilion);
  margin: 28px auto;
}
.ritual-line { font-family: var(--ff-sans-cn); font-size: 14.5px; line-height: 2; color: var(--c-ink); }
.ritual-line strong { font-family: var(--ff-serif-cn); font-weight: 700; }
.ritual-stats {
  display: flex; justify-content: space-around;
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--c-rule);
}
.ritual-stat-num {
  font-family: var(--ff-serif-en); font-size: 40px; font-weight: 700;
  color: var(--c-ink); font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: -.02em;
  opacity: 0;
  animation: ritual-num-fade .6s 1.6s ease forwards;
}
.ritual-stat-num.s2 { animation-delay: 1.7s; }
.ritual-stat-num.s3 { animation-delay: 1.8s; }
@keyframes ritual-num-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ritual-stat-lbl {
  font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-muted); margin-top: 6px;
}
.ritual-stamp {
  position: absolute; right: 56px; bottom: 80px;
  width: 96px; height: 96px;
  border: 3px solid var(--c-vermilion);
  background: var(--c-vermilion);
  color: #FFFAF2;
  font-family: var(--ff-serif-cn); font-size: 17px;
  font-weight: 800; letter-spacing: .06em;
  display: flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.3;
  transform: rotate(-7deg) scale(0); opacity: 0;
  box-shadow:
    inset 0 0 0 5px var(--c-vermilion),
    inset 0 0 0 6px rgba(255,250,242,.5),
    inset 0 0 0 7px var(--c-vermilion);
  animation: ritual-stamp-press .56s 2.4s cubic-bezier(.2,1.6,.4,1) forwards;
}
@keyframes ritual-stamp-press {
  0%   { opacity: 0; transform: rotate(-12deg) scale(2); }
  60%  { opacity: 1; transform: rotate(-7deg) scale(1.15); }
  100% { opacity: .92; transform: rotate(-7deg) scale(1); }
}
.ritual-actions {
  position: absolute; bottom: 24px; left: 0; right: 0;
  text-align: center;
  opacity: 0;
  animation: ritual-num-fade .4s 3.2s ease forwards;
}
.ritual-action-btn {
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--c-muted);
  background: none; border: none; cursor: pointer;
  padding: 8px 16px;
}
.ritual-action-btn:hover { color: var(--c-vermilion); }
@media (prefers-reduced-motion: reduce) {
  .ritual-paper, .ritual-stamp, .ritual-stat-num, .ritual-actions { animation: none; opacity: 1; transform: none; }
  .ritual-stamp { transform: rotate(-7deg); }
}

/* 2026-05-08 user 反映：手機版結業證書卡住，無法滑動、結業字被切、沒關閉按鈕。
   修法：右上角 X 按鈕一定可見、min-height auto（讓內容自然展開）、padding 縮、
   stamp 縮小不蓋內容、actions 改 static 位置 + margin */
.ritual-close-x {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: 50%;
  font-size: 16px;
  color: var(--c-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  z-index: 10;
}
.ritual-close-x:hover {
  border-color: var(--c-vermilion);
  color: var(--c-vermilion);
  background: var(--c-vermilion-10, rgba(178,58,43,.08));
}

@media (max-width: 540px) {
  #finish-ritual {
    padding: 12px;
    align-items: flex-start;        /* 不再強制置中 — 從 top 開始排，可以滑下去看完整 */
  }
  .ritual-paper {
    min-height: auto;                /* 讓內容自然撐開，不強制 700px 卡爆 viewport */
    padding: 60px 24px 32px;          /* 56px → 24px 橫向；80px → 60px 給 X 按鈕空間 */
    max-width: 100%;
  }
  .ritual-eyebrow { margin-bottom: 28px; font-size: 10px; letter-spacing: .18em; }
  .ritual-title {
    font-size: 38px;                 /* 56px → 38px 防被切 */
    letter-spacing: .25em;
  }
  .ritual-line { font-size: 13.5px; line-height: 1.85; }
  .ritual-stats {
    margin-top: 32px; padding-top: 22px;
    flex-wrap: wrap; gap: 18px;
  }
  .ritual-stat-num { font-size: 30px; }
  .ritual-stamp {
    position: absolute;
    right: 16px; bottom: 16px;       /* 56/80 → 16/16 */
    width: 64px; height: 64px;        /* 96 → 64 */
    font-size: 13px;
    /* 不和內容重疊：因 paper min-height auto，content 自然在 stamp 上方 */
  }
  .ritual-actions {
    position: static;                 /* 從 absolute 拿出來 — 跟著內容流，可滑動到 */
    margin-top: 32px;
    padding: 16px 0 0;
    border-top: 1px dashed var(--c-rule);
  }
  .ritual-action-btn { padding: 10px 14px; font-size: 11px; }
}

/* Scroll-driven (progressive enhancement) — title shrinks as user scrolls */
@supports (animation-timeline: scroll()) {
  .edit-hero-h1 {
    animation: hero-shrink linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 240px;
    will-change: transform, font-size;
  }
  @keyframes hero-shrink {
    to { transform: translateY(-8px) scale(.96); opacity: .85; }
  }
  /* card entries trigger when entering viewport */
  .edit-trust-item, .edit-exam-card, .edit-action-card {
    animation: card-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes card-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* prefers-reduced-motion: kill all hero animations, just show static result */
@media (prefers-reduced-motion: reduce) {
  .edit-hero-eyebrow,
  .edit-hero-h1 .line span,
  .edit-hero-meta,
  .edit-hero-ctas,
  .edit-hero-hairline,
  .edit-stamp { animation: none !important; opacity: 1 !important; transform: none !important; }
  .edit-cta-primary { animation: none !important; }
}

/* View Transitions API — smooth route changes between / and study */
@supports (view-transition-name: hero) {
  .edit-hero-h1 { view-transition-name: hero-title; }
  .edit-cta-primary { view-transition-name: hero-cta; }

  /* 練習頁跨題切換 — 翻書感（六法全書），不是 SaaS 滑動 */
  .q-card { view-transition-name: q-card; contain: layout paint; }
  ::view-transition-old(q-card) {
    animation: q-card-out 220ms cubic-bezier(.4, 0, 1, 1) both;
  }
  ::view-transition-new(q-card) {
    animation: q-card-in 280ms cubic-bezier(0, 0, .2, 1) 60ms both;
  }
  @keyframes q-card-out {
    to { opacity: 0; transform: translateX(-16px); }
  }
  @keyframes q-card-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(q-card),
  ::view-transition-new(q-card) { animation: none !important; }
}

/* ══ SEO Internal Link Hub (站內導覽) — 2026-05-08 編輯版重設計 ══
   3 人 mesh 結論：
   - Maya：要跟其他 section 同個編輯語彙（eyebrow + h2 + 朱印 dot rule）
   - Ren：mobile 30+ 連結 1233px 太長，改 2-col grid + 字級壓
   - Aiko：前 3 連結 emphasized，剩下 ghost；list 用 hairline 分隔線
   Always rendered in DOM (outside SPA views) so Googlebot can crawl /p/ pages.
*/
/* 站內導覽：簡潔置中版（2026-05-09 user 反映 editorial 重設計醜，回到樸素風格） */
.seo-link-hub {
  max-width: 1100px;
  margin: 80px auto 0;
  padding: 48px 32px 40px;
  border-top: 1px solid var(--c-border);
}
.seo-link-title {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.005em;
  margin: 0 auto 32px;
  text-align: center;
}
.seo-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
}
/* 2026-05-07 user 反饋：站內導覽下面所有超連結都要置中
   h3 col 標題 + li 內 <a> 都 center；h3 保留 full-width bottom border */
.seo-link-col { text-align: center; }
.seo-link-col h3 {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-border);
}
.seo-link-col ul { list-style: none; padding: 0; margin: 0; }
.seo-link-col li { margin: 0; padding: 5px 0; }
.seo-link-col a {
  font-family: var(--ff-serif-cn, serif);
  font-size: 14px;
  color: var(--c-text);
  text-decoration: none;
  line-height: 1.5;
  transition: color .18s;
}
.seo-link-col a:hover { color: var(--c-vermilion); }

/* 站內導覽下緣 footer 連結（包含付費入口） */
.seo-link-footer {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--c-border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 12px;
  font-size: 13px;
}
.seo-link-footer a {
  color: var(--c-muted);
  text-decoration: none;
  transition: color .15s;
}
.seo-link-footer a:hover { color: var(--c-text); }
.seo-link-footer .seo-link-subscribe {
  color: var(--c-vermilion, #B23A2B);
  font-weight: 700;
  padding: 6px 14px;
  border: 1.5px solid var(--c-vermilion, #B23A2B);
  border-radius: 999px;
  margin-right: 4px;
  transition: background .15s, color .15s;
}
.seo-link-footer .seo-link-subscribe:hover {
  background: var(--c-vermilion, #B23A2B);
  color: #fff;
}
.seo-link-footer .seo-link-sep { color: var(--c-border); }

@media (max-width: 900px) {
  .seo-link-hub { padding: 36px 18px 32px; margin-top: 40px; }
  .seo-link-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .seo-link-col h3 { font-size: 13.5px; }
  .seo-link-col a { font-size: 13px; }
}
@media (max-width: 480px) {
  .seo-link-col:nth-child(3) { grid-column: 1 / -1; }
}

/* ── edit-footer 砍 4-col 後的精簡版（min）─────────── */
.edit-footer-min { padding: 24px 0 16px; }
.edit-footer-min .edit-footer-bottom {
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  text-align: center;
}
.edit-footer-min .edit-footer-bottom a {
  color: var(--c-vermilion);
  text-decoration: none;
}
.edit-footer-min .edit-footer-bottom a:hover { text-decoration: underline; }
/* Hide SEO hub during full-screen law reading modes + 已登入用戶的內部 app views
   user：登入後已認識網站、SEO 連結是干擾 */
body.law-reading .seo-link-hub,
body.law-full .seo-link-hub,
body[data-view="practice-select"] .seo-link-hub,
body[data-view="wrong"] .seo-link-hub,
body[data-view="practice"] .seo-link-hub,
body[data-view="stats"] .seo-link-hub,
body[data-view="laws"] .seo-link-hub,
body[data-view="law-detail"] .seo-link-hub,
body[data-view="compare"] .seo-link-hub,
body[data-view="admin"] .seo-link-hub { display: none; }

/* practice-select / wrong hero 砍 hero 後的 spacing 調整 */
.edit-ps-hero-min,
.edit-wr-hero-min {
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(16px, 2vw, 24px);
  min-height: auto;
}
.edit-ps-hero-min .edit-ps-mesh,
.edit-wr-hero-min .edit-wr-mesh { display: none; }

/* ════════════════════════════════════════════════════════════════
   2026-Q2 RWD 修補（3 RWD 專家 mesh 共識）
   核心問題：var(--ff-mono) + letter-spacing 0.15em + uppercase
   套在中文 label 上是 anti-pattern：
     1. JetBrains Mono 沒 CJK glyph → 系統字體 fallback 醜
     2. letter-spacing 0.15em 把中文每字撐開 15% → 排版斷裂
     3. text-transform: uppercase 對中文 no-op，但浪費規則
   解法：對「主要為中文」的 label 統一改 sans-cn + 砍 letter-spacing/uppercase
   ════════════════════════════════════════════════════════════════ */
.q-note-eyebrow,
.fb-rel-topics-eyebrow,
.essay-ans-tag,
.essay-write-label,
.ritual-eyebrow,
.essay-irac-btn,
.essay-ans-copy-btn,
.ritual-action-btn,
.ritual-stat-lbl,
.exp-correct-label,
.exp-wrong-label,
.exam-ref-strip-label,
.exam-ref-question-meta,
.broken-q-meta,
.dash-eyebrow,
.dash-task-eyebrow,
.exam-name-en {
  font-family: var(--ff-sans-cn) !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}
.q-note-eyebrow,
.fb-rel-topics-eyebrow,
.essay-ans-tag,
.essay-write-label,
.ritual-eyebrow,
.dash-eyebrow,
.dash-task-eyebrow {
  font-size: 12.5px !important;
  font-weight: 700;
}
.essay-irac-btn,
.essay-ans-copy-btn {
  font-size: 13px !important;
  font-weight: 600;
  padding: 9px 14px !important;
  min-height: 36px;
}
.ritual-action-btn {
  font-size: 13px !important;
  font-weight: 600;
}
.exp-correct-label,
.exp-wrong-label {
  font-size: 14px !important;
  font-weight: 700;
}

/* ─ 觸控目標達標 iOS HIG 44×44 ──────────────────────────────── */
.q-flag {
  width: 44px !important;
  height: 44px !important;
  touch-action: manipulation;
}
/* 2026-05-11：.toc-art-* 已退役、改 .law-* — touch-action 規則合併下方 */

/* touch-action: manipulation — 砍 iOS 300ms 雙擊縮放延遲 */
.opt, .nav-btn, .q-flag, .btn, #float-jump-btn,
.law-nav-btn, .law-jump-inp, .law-tts-play, .law-tts-settings-trigger, .law-tts-pick,
#action-bar > *, .cta-btn, .ritual-action-btn {
  touch-action: manipulation;
}

/* ─ Safe area 底部處理（action-bar + bottom-nav 雙層）───────── */
.q-area {
  padding-bottom: calc(
    var(--nav-h, 64px) + var(--action-h, 68px)
    + env(safe-area-inset-bottom, 0px) + 24px
  ) !important;
}

/* ─ iOS 鍵盤遮擋處理（visualViewport keyboard inset）────── */
/* JS 在 visualViewport.resize 時設 --kb-inset；CSS 用它把 fixed bar 上推.
   2026-05-14 v12: base.css 已改 768-1023 全寬 (取消 translateX(-50%) center),
   這裡同步拿掉 translateX, 不然 left:0 + translateX(-50%) → bar 整個飛出畫面左邊
   (user 反映 989×845 viewport bug). */
#action-bar {
  transform: translateY(calc(-1 * var(--kb-inset, 0px)));
  transition: transform 120ms ease;
}
#bottom-nav {
  transform: translateY(calc(-1 * var(--kb-inset, 0px)));
  transition: transform 120ms ease;
}

/* ─ 桌機 measure：解析區也限制 38em（避免一行 50+ 字傷閱讀）── */
.exp-correct-block,
.exp-wrong-block,
.exp-law-quote,
.essay-ans-text {
  max-width: 38em;
}


/* ═══════════════════════════════════════════════════════════════
   累積進度橫條 by 科目 — UX Architect 2026-05-12 建議的新組件
   早鳥用戶（>30 天）的 coverage gap 安全感；視覺對齊 hero 玻璃容器
═══════════════════════════════════════════════════════════════ */
.subject-progress {
  background: color-mix(in oklch, var(--c-surface) 65%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--c-border);
  border-radius: clamp(16px, 1.6vw, 24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
              0 24px 64px -16px rgba(0,0,0,.18);
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 28px);
  margin: 16px auto 0;
  max-width: var(--measure-wide, 1000px);
  width: calc(100% - 24px);
  position: relative;
}
.sp-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "eyebrow summary"
                       "title summary";
  align-items: center;
  gap: 4px 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-rule, var(--c-border));
}
.sp-eyebrow {
  grid-area: eyebrow;
  font-family: var(--ff-mono);
  font-size: clamp(10.5px, .8vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-vermilion, var(--c-primary));
  font-weight: 700;
}
.sp-title {
  grid-area: title;
  margin: 0;
  font-family: var(--ff-serif-cn, var(--ff-serif), serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.sp-summary {
  grid-area: summary;
  text-align: right;
  font-family: var(--ff-mono);
  color: var(--c-ink-2, var(--c-muted));
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.4;
}
.sp-summary strong {
  font-family: var(--ff-serif-en, var(--ff-mono));
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--c-vermilion, var(--c-primary));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sp-summary-sep { margin: 0 4px; opacity: .5; }
.sp-summary-total { color: var(--c-text); }
.sp-summary-unit { margin-left: 2px; }
.sp-summary-pct { margin-left: 6px; opacity: .8; }

.sp-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sp-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.sp-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sp-name {
  font-family: var(--ff-sans-cn, var(--ff-sans));
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  color: var(--c-text);
}
.sp-acc {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--c-muted);
  background: color-mix(in oklch, var(--c-text) 6%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
}
.sp-bar-track {
  height: 8px;
  background: color-mix(in oklch, var(--c-text) 7%, transparent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.sp-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
    var(--c-vermilion, var(--c-primary)) 0%,
    color-mix(in oklch, var(--c-vermilion, var(--c-primary)) 85%, #ff8a6b) 100%);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
.sp-row.is-low .sp-bar-fill {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--c-vermilion, var(--c-primary)) 55%, var(--c-muted)) 0%,
    color-mix(in oklch, var(--c-vermilion, var(--c-primary)) 75%, transparent) 100%);
}
.sp-row-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .04em;
}
.sp-count strong {
  font-family: var(--ff-serif-en, var(--ff-mono));
  font-size: 14px;
  color: var(--c-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.sp-count-sep { margin: 0 3px; opacity: .5; }
.sp-pct {
  font-variant-numeric: tabular-nums;
  color: var(--c-vermilion, var(--c-primary));
  font-weight: 700;
}
.sp-row.is-low .sp-pct { color: var(--c-muted); }
.sp-hint {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-rule, var(--c-border));
  font-family: var(--ff-serif-cn, var(--ff-serif), serif);
  font-size: clamp(13px, 1.1vw, 14.5px);
  line-height: 1.55;
  color: var(--c-ink-2, var(--c-muted));
  font-style: italic;
}

@media (max-width: 540px) {
  .subject-progress {
    padding: 20px 18px;
    margin-top: 12px;
  }
  .sp-head {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow"
                         "title"
                         "summary";
    text-align: left;
  }
  .sp-summary { text-align: left; }
  .sp-list { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   FUSION CARD — 2026-05-12 mesh 重寫
   .fusion-card 在 .sprint-card 玻璃容器內，分 3 段：
     1. .fc-countdown-row 雙倒數並列
     2. .fc-action 今日行動（依 days 階段切內容）
     3. .fc-footer 累積一行 + 看 stats link
═══════════════════════════════════════════════════════════════ */

.fc-countdown-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(12px, 2vw, 24px);
  align-items: stretch;
  padding-bottom: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--c-rule, var(--c-border));
  position: relative;
}
.fc-cd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc-cd-eyebrow {
  font-family: var(--ff-mono);
  font-size: clamp(10.5px, .8vw, 12px);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-vermilion, var(--c-primary));
  font-weight: 700;
}
.fc-cd-other .fc-cd-eyebrow { color: var(--c-muted); }
.fc-cd-name {
  margin: 2px 0 0;
  font-family: var(--ff-serif-cn, var(--ff-serif), serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.fc-cd-other .fc-cd-name {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--c-ink-2, var(--c-muted));
}
.fc-cd-date {
  margin: 0 0 6px;
  font-family: var(--ff-mono);
  font-size: clamp(11.5px, .9vw, 13px);
  color: var(--c-muted);
  letter-spacing: .02em;
}
.fc-cd-num-row {
  display: flex; align-items: baseline; gap: 2px;
  margin: 4px 0 6px;
  position: relative;
}
/* 2026-05-12 v2 user：砍 D- / D+ 前綴 — .fc-cd-num-prefix 已從 markup 移除 */
.fc-cd-num {
  font-family: var(--ff-mono);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  color: var(--c-vermilion, var(--c-primary));
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fc-cd-num.is-small {
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--c-ink, var(--c-text));
}
.fc-cd-num-unit {
  font-family: var(--ff-sans-cn, var(--ff-sans));
  font-size: clamp(13px, 1.1vw, 15px);
  color: var(--c-muted);
  margin-left: 4px;
}
.fc-cd .hero-live-dot {
  margin-left: 10px;
  align-self: center;
}
.fc-cd-other .hero-live-dot { display: none; }
.fc-cd-status {
  font-family: var(--ff-sans-cn, var(--ff-sans));
  font-size: clamp(12px, .95vw, 13.5px);
  color: var(--c-ink-2, var(--c-muted));
  line-height: 1.5;
}
.fc-cd-status strong { color: var(--c-vermilion, var(--c-primary)); font-weight: 700; }
.fc-cd-divider {
  width: 1px;
  background: var(--c-rule, var(--c-border));
  align-self: stretch;
}
.fc-cd.is-post .fc-cd-num { color: var(--c-muted); }

/* 2026-05-12 v2 user 反映：mobile 也要左右並列，stacked 浪費右邊空間 */
@media (max-width: 639px) {
  .fc-countdown-row {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .fc-cd-divider { display: none; }
  .fc-cd-num { font-size: clamp(36px, 11vw, 56px); }
  .fc-cd-num.is-small { font-size: clamp(22px, 7vw, 32px); }
  .fc-cd-name { font-size: 15px; line-height: 1.25; }
  .fc-cd-other .fc-cd-name { font-size: 13.5px; }
  .fc-cd-date { font-size: 11.5px; }
  .fc-cd-status { font-size: 11.5px; line-height: 1.45; }
  .fusion-card .edit-stamp {
    font-size: 8.5px;
    padding: 6px 5px;
    top: 8px; right: 8px;
  }
}
/* iPhone SE/12 mini 等窄螢幕（≤380px）再縮一檔 */
@media (max-width: 380px) {
  .fc-countdown-row { gap: 10px; }
  .fc-cd-num { font-size: clamp(30px, 10vw, 42px); }
  .fc-cd-num.is-small { font-size: clamp(20px, 6vw, 28px); }
}

.fc-action {
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: clamp(14px, 1.8vw, 20px);
  margin-bottom: clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid var(--c-rule, var(--c-border));
}
.fc-stage-tag {
  display: inline-flex; align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: clamp(10.5px, .8vw, 12px);
  font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 3px;
  background: var(--c-vermilion, var(--c-primary));
  color: #FFFAF2;
}
.fusion-card.fc-stage-early .fc-stage-tag {
  background: color-mix(in oklch, var(--c-vermilion, var(--c-primary)) 25%, transparent);
  color: var(--c-vermilion, var(--c-primary));
}
.fusion-card.fc-stage-base .fc-stage-tag {
  background: color-mix(in oklch, var(--c-vermilion, var(--c-primary)) 60%, transparent);
  color: #FFFAF2;
}
.fusion-card.fc-stage-post .fc-stage-tag {
  background: var(--c-muted);
  color: var(--c-surface);
}

.fc-encourage {
  margin: 0;
  font-family: var(--ff-serif-cn, var(--ff-serif), serif);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--c-text);
  letter-spacing: .01em;
}
.fc-recommend {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 12px;
  padding: 12px 14px;
  background: color-mix(in oklch, var(--c-vermilion, var(--c-primary)) 5%, transparent);
  border-left: 3px solid var(--c-vermilion, var(--c-primary));
  border-radius: 4px;
}
.fc-rec-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
}
.fc-rec-name {
  font-family: var(--ff-serif-cn, var(--ff-serif), serif);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  color: var(--c-text);
}
.fc-rec-meta {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--c-vermilion, var(--c-primary));
  margin-left: auto;
}
.fc-today {
  display: flex; flex-direction: column; gap: 4px;
}
.fc-today-label {
  font-family: var(--ff-mono);
  font-size: clamp(10.5px, .8vw, 12px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-vermilion, var(--c-primary));
  font-weight: 700;
}
.fc-today-title {
  font-family: var(--ff-serif-cn, var(--ff-serif), serif);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.fc-today-meta {
  font-family: var(--ff-mono);
  font-size: clamp(12px, .9vw, 13.5px);
  color: var(--c-muted);
}
.fc-mock-flag {
  display: inline-flex; align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: clamp(11.5px, .9vw, 13px);
  font-weight: 700;
  color: var(--c-vermilion, var(--c-primary));
  background: color-mix(in oklch, var(--c-vermilion, var(--c-primary)) 12%, transparent);
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.fc-progress-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
  font-family: var(--ff-mono);
  font-size: clamp(12px, .95vw, 13.5px);
  color: var(--c-ink-2, var(--c-muted));
}
.fc-week-streak strong {
  color: var(--c-vermilion, var(--c-primary));
  font-weight: 700;
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
}
.fc-prog { color: var(--c-ink-2, var(--c-muted)); }
.fc-prog.is-done { color: var(--c-success, #4F6B3A); font-weight: 700; }
.fc-cta-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 4px;
}

.fc-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-family: var(--ff-mono);
  font-size: clamp(12px, .9vw, 13.5px);
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .04em;
}
.fc-foot-cum strong {
  color: var(--c-text);
  font-family: var(--ff-serif-en, var(--ff-mono));
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0 3px;
}
.fc-foot-stats {
  background: transparent; border: 0; padding: 0;
  font: inherit;
  color: var(--c-vermilion, var(--c-primary));
  cursor: pointer;
  letter-spacing: .04em;
  transition: opacity .15s ease;
}
.fc-foot-stats:hover { opacity: .75; }
.fc-foot-stats:focus-visible {
  outline: 2px solid var(--c-vermilion, var(--c-primary));
  outline-offset: 4px;
  border-radius: 3px;
}

.fusion-card .edit-stamp {
  position: absolute;
  top: clamp(12px, 1.8vw, 20px);
  right: clamp(12px, 1.8vw, 20px);
  z-index: 2;
  font-family: var(--ff-serif-cn, var(--ff-serif), serif);
  font-size: clamp(9px, .8vw, 11px);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.35;
  color: #FFFAF2;
  background: var(--c-vermilion, var(--c-primary));
  padding: 8px 7px;
  border-radius: 2px;
  text-align: center;
  transform: rotate(4deg);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(178,58,43,.35);
}

.fusion-card.sprint-a .fc-stage-tag { background: var(--c-vermilion, var(--c-primary)); color: #FFFAF2; }
.fusion-card.sprint-b .fc-stage-tag { background: #C75A2E; color: #FFFAF2; }
.fusion-card.sprint-c .fc-stage-tag { background: #A52A1F; color: #FFFAF2; }
.fusion-card.sprint-d .fc-stage-tag { background: #6B6258; color: #FFFAF2; }