@media (min-width: 768px) {
  .edit-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .edit-hero-meta .sep { display: inline; opacity: .35; }
}
.edit-hero-meta strong { color: var(--c-ink); font-weight: 600; }

/* ═══════════════════════════════════
   Hero tagline — 1 行 inline 倒數（focus 場考試）
   2026-05-01 第二次調整：取代擠在 hero 內的兩張卡 + strap
═══════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   2026-05-06 Batch 1：Hero asymmetric editorial redesign
   - 結構：左 .hero-lead（標題 + CTA）+ 右 .hero-counter-card（focus exam 倒數）
   - 字符 stagger animation（每個中文字 individually rise + fade）
   - Scroll-driven hero title（CSS animation-timeline: view()）
   - 不再全置中 — left-aligned hero + right-anchored card
═══════════════════════════════════════════════════════════════════ */
.hero-2026 {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 140px) clamp(20px, 5vw, 80px) clamp(60px, 8vw, 96px);
  isolation: isolate;
}

.hero-2026 .hero-grid {
  display: grid;
  grid-template-columns: 1fr;       /* mobile：stacked */
  gap: clamp(28px, 4vw, 48px);
  align-items: end;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .hero-2026 .hero-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);  /* asymmetric 1.5 : 1 */
    gap: clamp(40px, 6vw, 96px);
  }
}

.hero-2026 .hero-lead {
  text-align: left;
  min-width: 0;
}

.hero-2026 .hero-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 clamp(20px, 3vw, 32px);
  display: inline-block;
  opacity: 0;
  animation: fade-up .42s .1s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}

.hero-2026 .hero-title {
  font-family: var(--ff-serif-cn);
  font-weight: 800;
  font-size: clamp(36px, 8.5vw, 104px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--c-ink);
  margin: 0 0 clamp(20px, 3vw, 36px);
  word-break: keep-all;
}
.hero-2026 .hero-line { display: block; }
.hero-2026 .hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(36%);
  animation: heroCharRise .65s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) calc(var(--i, 0) * 55ms + 100ms) forwards;
}
.hero-2026 .hero-char.vermilion { color: var(--c-vermilion); }
@keyframes heroCharRise {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-driven hero title fade（B）— 2026 CSS animation-timeline: view()
   Hero 隨 scroll 退場時 opacity / scale / blur，給「淡出」premium 感 */
@supports (animation-timeline: view()) {
  .hero-2026 .hero-title {
    animation-timeline: view();
    animation-range: exit 0% exit 80%;
    animation-name: heroTitleScrollFade;
    animation-duration: 1ms;
    animation-fill-mode: both;
  }
  @keyframes heroTitleScrollFade {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to   { opacity: .35; transform: translateY(-30px) scale(.94); filter: blur(2px); }
  }
}

.hero-2026 .hero-sub {
  font-family: var(--ff-sans-cn);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 520px;
  opacity: 0;
  animation: fade-up .56s .8s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}

.hero-2026 .hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  opacity: 0;
  animation: fade-up .5s 1s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}

/* 60秒測驗小字連結 — 從原獨立紅磚塊降階成 hero CTA 下方的小字（D 方案）
   first-timer (guest + 0 答題) 才顯示，視覺輕量、跟 footer link 同分量 */
.hero-2026 .hero-cta-trial {
  display: inline-block;
  margin: clamp(12px, 1.5vw, 18px) 0 0;
  font-family: var(--ff-sans);
  font-size: 13px; font-weight: 500;
  color: var(--c-vermilion);
  text-decoration: none;
  letter-spacing: .02em;
  border-bottom: 1px dashed color-mix(in oklch, var(--c-vermilion) 50%, transparent);
  padding-bottom: 1px;
  opacity: 0;
  animation: fade-up .5s 1.2s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
  transition: color .15s, border-color .15s;
}
.hero-2026 .hero-cta-trial:hover {
  color: var(--c-vermilion-h, var(--c-vermilion));
  border-bottom-color: var(--c-vermilion);
}
@media (prefers-reduced-motion: reduce) {
  .hero-2026 .hero-cta-trial { animation: none; opacity: 1; }
}

/* ─ 右側 counter card：focus exam 倒數 hero anchor ─ */
.hero-2026 .hero-counter-card {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  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);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 24px 64px -16px rgba(0, 0, 0, .18);
  border-radius: clamp(16px, 1.6vw, 24px);
  opacity: 0;
  animation: fade-up .7s .4s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
  transform: perspective(1200px) rotateY(-2deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .25s;
}
.hero-2026 .hero-counter-card:hover {
  transform: perspective(1200px) rotateY(0deg) translateY(-4px);
  border-color: color-mix(in oklch, var(--c-vermilion) 25%, var(--c-border));
}
[data-theme="dark"] .hero-2026 .hero-counter-card {
  background: color-mix(in oklch, var(--c-surface) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 24px 64px -16px rgba(0, 0, 0, .55);
}

.hero-2026 .hcc-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-vermilion);
  margin: 0 0 12px;
}
.hero-2026 .hcc-name {
  font-family: var(--ff-serif-cn);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.hero-2026 .hcc-date {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  color: var(--c-muted);
  margin: 0 0 clamp(20px, 3vw, 28px);
  letter-spacing: .02em;
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.hero-2026 .hcc-countdown {
  display: flex; align-items: baseline;
  gap: 10px;
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  position: relative;
}
.hero-2026 .hcc-num {
  font-family: var(--ff-mono);
  font-size: clamp(56px, 8.5vw, 88px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--c-vermilion);
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.hero-2026 .hcc-unit {
  font-size: 16px; font-weight: 500;
  color: var(--c-muted);
}
.hero-2026 .hcc-countdown .hero-live-dot {
  margin-left: 8px; align-self: center;
  position: relative; top: 0;
}
.hero-2026 .hcc-status {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
}
.hero-2026 .hcc-status strong {
  color: var(--c-vermilion);
  font-weight: 600;
}

/* 「下一場考試」mini-card — Linnea 五人 mesh 結論：跟 hero focus 倒數同形式（縮小版）
   stacked layout：label / name + num / metadata 三行，editorial sidebar caption 感 */
.hero-2026 .hcc-other {
  margin-top: clamp(20px, 2.5vw, 28px);
  padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--c-border);
}
.hero-2026 .hcc-other-label {
  font-family: var(--ff-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.hero-2026 .hcc-other-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.hero-2026 .hcc-other-name {
  font-family: var(--ff-serif-cn);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.hero-2026 .hcc-other-num {
  font-family: var(--ff-mono);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--c-vermilion);
  letter-spacing: -.02em;
  line-height: 1;
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.hero-2026 .hcc-other-unit {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 500;
}
.hero-2026 .hcc-other-meta {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--c-muted);
  letter-spacing: .02em;
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}

/* Stamp「114 考古題已上線」蓋在 card 右上角 — 朱印 wax-seal 效果
   user 反映「很帥但被調小了」，調回接近原 size：80-115px
   z-index: 3 確保在 card content 上層、card 加 overflow: visible 讓 stamp 突出邊緣 */
.hero-2026 .hero-counter-card { overflow: visible; }
.hero-2026 .hero-counter-card .edit-stamp {
  top: -22px; right: -24px;
  width: clamp(80px, 8.5vw, 115px);
  height: clamp(80px, 8.5vw, 115px);
  font-size: clamp(12px, 1.4vw, 18px);
  z-index: 3;
}

/* RWD：mobile (< 768px) 卡片 stack 全寬時的微調 — 拿掉 3D tilt（單欄 tilt 看起來怪）+
   stamp 縮回 card 內（避免 -24px 偏移在窄螢幕跑出 viewport） */
@media (max-width: 767.98px) {
  .hero-2026 .hero-counter-card {
    transform: none;       /* 全寬時不傾斜，避免視覺斷層 */
  }
  .hero-2026 .hero-counter-card:hover {
    transform: translateY(-2px);   /* 維持 hover 上浮但無 tilt */
  }
  .hero-2026 .hero-counter-card .edit-stamp {
    /* override base 的 display: none — mobile 仍要看得到帥氣印章 */
    display: flex !important;
    top: 14px; right: 14px;        /* 改縮回 card 邊內 */
    width: 64px; height: 64px;
    font-size: 11px;
  }
}

/* RWD：tablet (768-900px) 右欄較窄時的微調 — 數字 max 限制不要爆 */
@media (min-width: 768px) and (max-width: 899.98px) {
  .hero-2026 .hcc-num { font-size: clamp(48px, 7vw, 64px); }
  .hero-2026 .hcc-other-num { font-size: clamp(20px, 2.4vw, 24px); }
}

/* prefers-reduced-motion 全部 disable */
@media (prefers-reduced-motion: reduce) {
  .hero-2026 .hero-char,
  .hero-2026 .hero-title,
  .hero-2026 .hero-eyebrow,
  .hero-2026 .hero-sub,
  .hero-2026 .hero-ctas,
  .hero-2026 .hero-counter-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ─ 舊 .edit-hero-tagline 保留但 hero 不再用（兩試 panel 仍可能用）─ */
.edit-hero-tagline {
  margin-top: 20px; max-width: 720px;
  font-family: var(--ff-mono); font-size: 14px;
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .03em;
  opacity: 0;
  animation: fade-up .5s 1.0s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}
.edit-hero-tagline strong { color: var(--c-ink); font-weight: 700; }
.edit-hero-tagline .hero-tag-num {
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
  color: var(--c-vermilion); font-weight: 800;
  font-size: 18px; letter-spacing: 0;
}
.edit-hero-tagline .sep { opacity: .35; }
/* Live indicator dot — 暗示「這是 live 數據，時間在流逝」（2026-05-06 PR-B）
   pulse animation 跟 .exam-line-status .status-dot 共用 cd-pulse keyframes */
.edit-hero-tagline .hero-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-vermilion);
  margin-left: 6px;
  vertical-align: middle;
  position: relative; top: -2px;
  animation: heroLivePulse 2s ease-in-out infinite;
}
@keyframes heroLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(178, 58, 43, .55); }
  50%      { opacity: .5; box-shadow: 0 0 0 6px rgba(178, 58, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .edit-hero-tagline .hero-live-dot { animation: none; box-shadow: none; }
}

/* ═══════════════════════════════════
   兩試考期 panel — 獨立 section（從 hero 抽出）
   hairline 風格：無圓角、無底色、純編輯排版
═══════════════════════════════════ */
.edit-exam-panel-section {
  max-width: 880px; margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 80px);
  position: relative; z-index: 1;
}
.edit-exam-panel {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  padding: 28px 0;
}
.edit-exam-panel::before {
  content: ""; grid-column: 2; background: var(--c-rule);
}
@media (max-width: 600px) {
  .edit-exam-panel {
    grid-template-columns: 1fr;
    padding: 20px 0;
  }
  .edit-exam-panel::before { display: none; }
  .exam-line + .exam-line {
    border-top: 1px solid var(--c-rule);
    padding-top: 18px; margin-top: 18px;
  }
}
.exam-line {
  padding: 0 clamp(16px, 3vw, 28px);
  background: none; border: 0; border-radius: 0;
  display: flex; flex-direction: column; gap: 8px;
  transition: opacity .2s;
}
.exam-line.finished { opacity: .5; }
.exam-line-eyebrow {
  font-family: var(--ff-sans);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-muted);
  margin: 0;
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.exam-line.primary .exam-line-eyebrow { color: var(--c-ink-2, var(--c-ink)); }
.exam-line-count {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0;
}
.exam-line-count .num {
  font-family: var(--ff-mono);
  font-size: clamp(36px, 5vw, 48px); font-weight: 700;
  line-height: 1; letter-spacing: -.02em;
  color: var(--c-ink);
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.exam-line.urgent .num,
.exam-line.critical .num { color: var(--c-vermilion); }
.exam-line.critical .num { animation: cd-pulse 2s ease-in-out infinite; }
.exam-line-count .num.finished {
  font-size: clamp(18px, 3vw, 22px); color: var(--c-muted);
  font-weight: 500; letter-spacing: 0; font-family: var(--ff-sans);
}
.exam-line-count .unit {
  font-size: 13px; font-weight: 500; color: var(--c-muted);
  align-self: flex-end; margin-bottom: 4px;
  font-family: var(--ff-sans);
}
.exam-line-flag {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 7px; margin-left: auto;
  color: var(--c-vermilion);
  border: 1px solid var(--c-vermilion);
  border-radius: 2px;
  align-self: center;
}
.exam-line-foot {
  font-family: var(--ff-sans);
  font-size: 12.5px; color: var(--c-muted);
  margin: 0;
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}

/* Info popover (kept for future use, not currently triggered) */
.exam-info-pop {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: 360px; width: calc(100vw - 32px);
  padding: 20px 24px; background: var(--c-surface);
  border: 1px solid var(--c-rule); border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  z-index: 1000;
  font-size: 14px; line-height: 1.7; color: var(--c-ink-2, var(--c-muted));
}
.exam-info-pop strong {
  display: block; font-family: var(--ff-serif-cn, var(--ff-serif));
  font-size: 16px; color: var(--c-ink); margin-bottom: 10px;
}
.exam-info-pop p { margin: 0 0 8px; }
.exam-info-pop p:last-child { margin-bottom: 0; }
.exam-info-close {
  position: absolute; top: 8px; right: 12px;
  background: transparent; border: 0; font-size: 22px; line-height: 1;
  color: var(--c-muted); cursor: pointer;
}
.exam-info-close:hover { color: var(--c-vermilion); }

@keyframes cd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ═══════════════════════════════════
   PWA 安裝 banner（iOS / Android / Desktop 統一）
   底部浮動條，30 天內 dismiss 不再出現
═══════════════════════════════════ */
.lx-install-banner {
  position: fixed;
  /* 必須抬到 #bottom-nav（高 var(--nav-h) + safe-area）之上，
     不然手機 / 平板會把練習・複習・統計・更多 5 個 tab 全遮住 */
  bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  left: 16px; right: 16px;
  max-width: 560px; margin: 0 auto;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 12px;
  z-index: 9998;
  transform: translateY(120%); opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
  font-family: var(--ff-sans);
}
.lx-install-banner.show { transform: translateY(0); opacity: 1; }
.lxib-icon {
  font-size: 24px; line-height: 1; flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: color-mix(in oklch, var(--c-vermilion) 8%, transparent);
  border-radius: 10px;
}
.lxib-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.lxib-text strong {
  font-size: 14.5px; font-weight: 700; color: var(--c-ink);
  line-height: 1.3;
}
.lxib-text span {
  font-size: 12.5px; color: var(--c-muted);
  line-height: 1.4;
}
.ios-share-icon {
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
}
.lxib-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13.5px; font-weight: 700;
  color: #fff; background: var(--c-vermilion);
  border: 0; border-radius: 8px;
  cursor: pointer;
  transition: filter .15s, transform .15s;
  font-family: inherit;
}
.lxib-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.lxib-btn:active { transform: translateY(0); }
.lxib-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: transparent; border: 0;
  font-size: 20px; line-height: 1; color: var(--c-muted);
  cursor: pointer; border-radius: 50%;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.lxib-close:hover { background: color-mix(in oklch, var(--c-muted) 10%, transparent); color: var(--c-ink); }

@media (max-width: 420px) {
  .lx-install-banner {
    bottom: calc(var(--nav-h) + var(--safe-b) + 8px);
    left: 12px; right: 12px; padding: 10px 12px; gap: 10px;
  }
  .lxib-icon { width: 36px; height: 36px; font-size: 22px; }
  .lxib-text strong { font-size: 13.5px; }
  .lxib-text span { font-size: 11.5px; }
  .lxib-btn { padding: 7px 14px; font-size: 13px; }
}

/* 桌機 ≥ 1024px：#bottom-nav 變成左側 sidebar，banner 可以靠底 */
@media (min-width: 1024px) {
  .lx-install-banner { bottom: 20px; }
}

/* Standalone 模式偵測：已安裝就完全隱藏 */
@media all and (display-mode: standalone) {
  .lx-install-banner { display: none !important; }
}

/* Countdown odometer — tabular numerals, breathing */
.edit-countdown {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--ff-mono); font-size: 12.5px;
  color: var(--c-muted); letter-spacing: .03em;
}
.edit-countdown .num {
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
  color: var(--c-ink); font-weight: 700; font-size: 14px;
  letter-spacing: 0;
}

/* CTAs */
.edit-hero-ctas {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 56px;
  opacity: 0;
  animation: fade-up .56s 1.05s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}
/* P2-12: mobile 文案太長易斷成 3 行 — 在小螢幕上保險地不換行（hidden 溢出由 ellipsis 處理）
   並縮 padding 讓寬度可以容納；≥768 恢復原樣 */
.edit-cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--ff-sans-en); font-size: 15px; font-weight: 600;
  letter-spacing: .01em;
  background: var(--c-vermilion); color: #FFFAF2;
  border: 1px solid var(--c-vermilion);
  border-radius: 6px; cursor: pointer;
  transition: all .18s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 2px 0 0 rgba(11,18,32,.08);
  animation: cta-breath 2.4s ease-in-out 1.6s infinite;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
@media (min-width: 480px) {
  .edit-cta-primary { padding: 14px 28px; }
}
@keyframes cta-breath {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.008); }
}
@media (hover: hover) {
  .edit-cta-primary:hover {
    background: var(--c-vermilion-h); border-color: var(--c-vermilion-h);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(178,58,43,.4), 0 2px 0 0 rgba(11,18,32,.08);
    letter-spacing: .015em;
    animation: none;
  }
}
.edit-cta-primary svg { width: 14px; height: 14px; }
/* P2-12: mobile 顯示短文案、≥480 顯示完整含考試類別 */
.edit-cta-primary .cta-text-long { display: none; }
.edit-cta-primary .cta-text-short { display: inline; }
@media (min-width: 480px) {
  .edit-cta-primary .cta-text-long { display: inline; }
  .edit-cta-primary .cta-text-short { display: none; }
}

.edit-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px;
  font-family: var(--ff-sans-en); font-size: 15px; font-weight: 500;
  color: var(--c-ink);
  background: transparent; border: 1px solid var(--c-rule);
  border-radius: 6px; cursor: pointer;
  transition: all .18s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) {
  .edit-cta-ghost:hover { border-color: var(--c-ink); }
}

/* Stamp seal — small "115 考古題" red square stamp ornament beside H1 */
.edit-stamp {
  position: absolute; right: clamp(8px, 4vw, 80px); top: clamp(60px, 11vw, 140px);
  width: clamp(80px, 9vw, 120px); height: clamp(80px, 9vw, 120px);
  border: 2px solid var(--c-vermilion);
  background: var(--c-vermilion);
  color: #FFFAF2;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif-cn); font-weight: 800;
  font-size: clamp(14px, 1.6vw, 22px);
  text-align: center; line-height: 1.15;
  transform: rotate(-6deg) scale(0);
  transform-origin: center;
  animation: stamp-press .56s 1.4s cubic-bezier(.2,1.6,.4,1) forwards;
  box-shadow:
    inset 0 0 0 4px var(--c-vermilion),
    inset 0 0 0 5px rgba(255,250,242,.4),
    inset 0 0 0 6px var(--c-vermilion);
  letter-spacing: .04em;
  pointer-events: none;
  user-select: none;
}
@keyframes stamp-press {
  0%   { transform: rotate(-6deg) scale(0); opacity: 0; }
  60%  { transform: rotate(-6deg) scale(1.12); opacity: 1; }
  100% { transform: rotate(-6deg) scale(1); opacity: .92; }
}
/* hide stamp on narrow (≤md) to avoid overlap with hero */
@media (max-width: 767.98px) {
  .edit-stamp { display: none; }
}

/* Dashboard hero action — "今天的 20 分鐘" — for logged-in users
   2026-05-01 重整（3 agent mesh）：字級全 clamp 化、max-width 拉到 960、
   砍 tag 字眼、桌機 grid 重排（title+spec 左、CTA 右）、spec 顏色加深 */
.edit-action {
  max-width: clamp(720px, 92vw, 960px);
  margin: -32px auto 64px;
  padding: 0 clamp(20px, 5vw, 40px);
}
.edit-action-greet {
  font-family: var(--ff-mono);
  font-size: clamp(12px, .85vw, 14px);
  letter-spacing: .08em;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.edit-action-greet strong { color: var(--c-ink); font-weight: 700; }
.edit-action-h2 {
  font-family: var(--ff-serif-cn);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700; letter-spacing: -.02em; color: var(--c-ink);
  margin: 0 0 28px;
}
.edit-action-card {
  background: var(--c-paper-2);
  border: 1px solid var(--c-rule);
  border-left: 4px solid var(--c-vermilion);
  padding: clamp(24px, 3vw, 40px) clamp(28px, 3.5vw, 48px);
  position: relative;
}
.edit-action-card::before {
  content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px;
  background: var(--c-vermilion);
}
.edit-action-tag {
  font-family: var(--ff-mono);
  font-size: clamp(11px, .8vw, 13px);
  letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-vermilion); font-weight: 600;
  margin-bottom: 10px;
}
.edit-action-title {
  font-family: var(--ff-serif-cn);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  color: var(--c-ink); margin: 0 0 10px;
  line-height: 1.25;
}
.edit-action-spec {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-family: var(--ff-mono);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--c-ink-2, var(--c-muted));
  margin-bottom: 24px;
}
.edit-action-spec .num { color: var(--c-ink); font-weight: 700; font-size: 1.05em; }
.edit-action-spec .sep { display: none; }
@media (min-width: 480px) {
  .edit-action-spec .sep { display: inline; opacity: .35; }
}
.edit-action-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: clamp(12px, 1vw, 16px) clamp(24px, 2vw, 32px);
  font-family: var(--ff-sans-en); font-weight: 700;
  font-size: clamp(15px, 1.1vw, 17px);
  background: var(--c-ink); color: #FFFAF2;
  border: none; border-radius: 4px;
  cursor: pointer; transition: all .18s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) {
  .edit-action-cta:hover { background: var(--c-vermilion); }
}
.edit-action-skip {
  display: inline-block; margin-left: 12px;
  font-family: var(--ff-sans-en);
  font-size: clamp(13px, .95vw, 15px);
  color: var(--c-muted);
  background: none; border: none; cursor: pointer;
}
.edit-action-skip:hover { color: var(--c-ink); text-decoration: underline; }

/* 桌機（≥768px）：title+spec 左、CTA+skip 右；節省垂直空間，CTA 上移到首屏 */
@media (min-width: 768px) {
  .edit-action-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tag    tag"
      "title  cta"
      "spec   cta";
    column-gap: clamp(24px, 3vw, 40px);
    align-items: center;
  }
  .edit-action-tag { grid-area: tag; margin-bottom: 6px; }
  .edit-action-title { grid-area: title; margin: 0; }
  .edit-action-spec { grid-area: spec; margin: 8px 0 0; }
  .edit-action-card > .edit-action-cta { grid-area: cta; align-self: center; margin: 0; }
  .edit-action-card > .edit-action-skip { grid-area: cta; align-self: end; justify-self: end; margin: 0 0 -28px; transform: translateY(100%); }
}

/* Editorial section header
   2026-05-06 PR-A 統一 vertical rhythm + 全部 header 置中（之前 padding 64 寫死、
   eyebrow/h2/lead 預設 left-align、看起來不一致；改成 responsive padding + 置中
   header 讓全站節奏整齊） */
.edit-section {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 40px);
}
.edit-section-eyebrow {
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-muted); margin: 0 auto 14px;
  text-align: center;
}
.edit-section-h2 {
  font-family: var(--ff-serif-cn); font-size: clamp(28px, 4vw, 44px);
  font-weight: 700; letter-spacing: -.018em; color: var(--c-ink);
  margin: 0 auto 16px; max-width: 720px;
  text-align: center;
  text-wrap: pretty;
}
.edit-section-h2 .vermilion { color: var(--c-vermilion, var(--c-primary)); }
.edit-section-lead {
  font-family: var(--ff-sans-cn); font-size: 17px; line-height: 1.65;
  color: var(--c-muted); max-width: 640px; margin: 0 auto 40px;
  text-align: center;
}

/* Trust signals — 3 columns with hairline divider
   P1-7: 用 explicit columns + breakpoints；item 加 min-width:0 防溢出
   P1-8: ≤480 1col / ≤768 2col / ≥768 3col */
.edit-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0; border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule);
}
.edit-trust-item {
  padding: 32px 28px;
  border-bottom: 1px solid var(--c-rule);
  min-width: 0;
}
.edit-trust-item:last-child { border-bottom: none; }
@media (min-width: 480px) {
  /* sm: 2 columns */
  .edit-trust { grid-template-columns: 1fr 1fr; }
  .edit-trust-item { border-right: 1px solid var(--c-rule); }
  .edit-trust-item:nth-child(2n) { border-right: none; }
  /* 倒數兩個 (兩欄時最後一行) 移除下邊框 */
  .edit-trust-item:nth-last-child(-n+2) { border-bottom: none; }
}
@media (min-width: 768px) {
  /* md+: 3 columns */
  .edit-trust { grid-template-columns: repeat(3, 1fr); }
  .edit-trust-item { border-right: 1px solid var(--c-rule); border-bottom: none; }
  .edit-trust-item:nth-child(2n) { border-right: 1px solid var(--c-rule); }
  .edit-trust-item:nth-child(3n),
  .edit-trust-item:last-child { border-right: none; }
}
.edit-trust-num {
  font-family: var(--ff-serif-en); font-size: 56px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink); line-height: 1; letter-spacing: -.02em;
  margin-bottom: 10px;
}
.edit-trust-label {
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: 8px;
}
.edit-trust-desc {
  font-family: var(--ff-sans-cn); font-size: 13.5px; line-height: 1.55;
  color: var(--c-ink);
}

/* ═══════════════════════════════════════════════════════════════
   2026-05-07 v4 Sticky Demo（chrome Claude review fixes）
   桌機（≥901）：左 sticky iPhone（修破損）+ 右 6 卡片化 panel（.is-active）
   手機（≤900）：carousel 6 張 slide（scroll-snap + dots + prev/next）
═══════════════════════════════════════════════════════════════ */
.sticky-demo {
  padding-top: clamp(96px, 12vh, 160px);
  padding-bottom: clamp(96px, 12vh, 160px);
  max-width: 1280px;
}
.sticky-demo .edit-section-h2 + .sd-lede { margin-top: 24px; }
.sd-lede {
  font-family: var(--ff-serif-cn);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.75;
  color: var(--c-text);
  max-width: 720px;
  margin: 14px 0 0;
  text-wrap: pretty;
}
.sd-lede strong { color: var(--c-ink); font-weight: 700; }
.sd-lede em {
  font-style: normal;
  color: var(--c-vermilion);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sd-layout {
  margin-top: 80px;            /* lede ↔ layout */
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* === 桌機 ≥901：左 sticky + 右 panels === */
@media (min-width: 901px) {
  .sd-media-col {
    position: sticky;
    top: var(--hdr-h, 56px);
    height: calc(100vh - var(--hdr-h, 56px));
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sd-carousel { display: none; }
}

/* === 手機 ≤900：sd-layout 換成單欄、隱藏 sticky col + panels-col、改 carousel === */
@media (max-width: 900px) {
  .sd-layout { display: block; }
  .sd-media-col,
  .sd-panels-col { display: none; }
}

/* === 左 sticky stage：大編號 + iPhone + 思考 callout === */
.sd-stage {
  position: relative;
  width: 100%;
  max-width: 360px;
}

/* 大編號 outline — 放後方、隨啟用 panel 切 01-06 */
.sd-bignum {
  position: absolute;
  left: -32px;
  bottom: -24px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  line-height: .85;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  transition: opacity .25s ease;
}
.sd-bignum.is-fading { opacity: 0; }
.sd-bignum-text {
  font-family: var(--ff-serif-cn);
  font-size: clamp(140px, 16vw, 220px);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklch, var(--c-ink) 22%, transparent);
  font-variant-numeric: tabular-nums;
}
.sd-bignum-of {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in oklch, var(--c-ink) 40%, transparent);
  vertical-align: top;
  letter-spacing: .04em;
}

/* iPhone wrap：phone z-index 在 bignum 上、是 sd-think 的定位 anchor */
.sd-phone-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

/* 思考中 chip — 浮在 phone 右下「外側」（≥1100 才有空間） */
.sd-think {
  position: absolute;
  right: -28px;
  bottom: 48px;
  transform: translateX(100%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--c-surface) 92%, transparent);
  border: 1px solid color-mix(in oklch, var(--c-ink) 12%, transparent);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .2);
  white-space: nowrap;
  font-size: 12px;
  z-index: 5;
  backdrop-filter: blur(6px);
  transition: opacity .35s ease;
}
[data-theme="dark"] .sd-think {
  background: color-mix(in oklch, var(--c-surface) 88%, transparent);
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5);
}
@media (max-width: 1099px) {
  /* sticky col 左半窄 → callout 改放 phone 下方 */
  .sd-think {
    right: 50%;
    bottom: -48px;
    transform: translateX(50%);
  }
}
.sd-think-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-vermilion);
  flex-shrink: 0;
  animation: sd-think-pulse 1.4s ease-in-out infinite;
}
@keyframes sd-think-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
.sd-think-label {
  font-family: var(--ff-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-vermilion);
}
.sd-think-text {
  font-family: var(--ff-mono);
  font-size: 12px; font-weight: 500;
  color: var(--c-ink);
  transition: opacity .25s ease;
}
.sd-think.is-fading .sd-think-text { opacity: 0; }

/* === iPhone 框（chrome review 規格修正版）=== */
.iphone-frame {
  position: relative;
  width: 320px;
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 44px;
  background: #0b0b0c;
  padding: 10px;             /* 黑色 bezel 厚度 */
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, .35),
    0 60px 120px -40px rgba(0, 0, 0, .2),
    inset 0 0 0 2px #1a1a1c;
  overflow: hidden;          /* 防截圖溢出 */
  isolation: isolate;
}
.iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--c-surface);
}
.iphone-screen > img,
.iphone-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: opacity .45s ease;
}
.iphone-frame.is-swapping .iphone-shot { opacity: 0; }

/* Dynamic Island — 浮在 screen 上 */
.iphone-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 30px;
  background: #000;
  border-radius: 18px;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

/* 側鈕 — z-index 2，在 island 下方 */
.iphone-btn {
  position: absolute;
  background: linear-gradient(90deg, #1a1a1d, #2a2a2e, #1a1a1d);
  border-radius: 2px;
  z-index: 2;
}
.iphone-btn-mute  { left: -2px; top: 84px;  width: 3px; height: 26px; }
.iphone-btn-vup   { left: -2px; top: 124px; width: 3px; height: 50px; }
.iphone-btn-vdn   { left: -2px; top: 184px; width: 3px; height: 50px; }
.iphone-btn-power { right: -2px; top: 140px; width: 3px; height: 76px; }

/* === 桌機右側 panels（卡片化）=== */
.sd-panels-col {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vh, 64px);
}
.sd-panel {
  position: relative;
  max-width: 520px;
  padding: 28px 32px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklch, var(--c-ink) 8%, transparent);
  background: color-mix(in oklch, var(--c-surface) 55%, transparent);
  transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease, opacity .35s ease;
}
@media (min-width: 901px) {
  .sd-panel { min-height: 48vh; display: flex; flex-direction: column; justify-content: center; }
}
.sd-panel:not(.is-active) { opacity: .55; }
.sd-panel.is-active {
  border-color: var(--c-vermilion);
  box-shadow: 0 8px 24px -12px rgba(122, 31, 31, .22);
  transform: translateX(-4px);
  opacity: 1;
}
.sd-panel-caption {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-muted);
  letter-spacing: .1em;
  margin-bottom: 10px;
}

.sd-tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-vermilion);
  padding: 4px 10px;
  background: color-mix(in oklch, var(--c-vermilion) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--c-vermilion) 25%, transparent);
  border-radius: 4px;
  margin-bottom: 14px;
}
.sd-h {
  font-family: var(--ff-serif-cn);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.018em;
  color: var(--c-ink);
  margin: 0 0 12px;
}
.sd-desc {
  font-family: var(--ff-serif-cn);
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.7;
  color: var(--c-text);
  margin: 0;
  text-wrap: pretty;
}
.sd-desc strong { color: var(--c-ink); font-weight: 700; }

/* ═════════ 手機 carousel（≤900）═════════ */
@media (min-width: 901px) {
  .sd-carousel { display: none; }
}
.sd-carousel { position: relative; }
.sd-carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12vw;
  padding: 8px 12vw;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  outline: none;
}
.sd-carousel-track::-webkit-scrollbar { display: none; }
.sd-carousel-track:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--c-vermilion) 50%, transparent);
  outline-offset: 4px;
  border-radius: 8px;
}

.sd-slide {
  flex: 0 0 76vw;
  max-width: 360px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .4s ease, opacity .4s ease;
}
.sd-slide:not(.is-active) {
  transform: scale(.94);
  opacity: .55;
}
.sd-slide-phone {
  width: 240px;
  max-width: 100%;
}
.sd-slide-phone .iphone-frame {
  width: 240px;
  border-radius: 36px;
  padding: 8px;
}
.sd-slide-phone .iphone-screen { border-radius: 28px; }
.sd-slide-phone .iphone-island {
  top: 10px; width: 76px; height: 22px; border-radius: 14px;
}
.sd-slide-phone .iphone-btn-mute  { top: 64px;  height: 20px; }
.sd-slide-phone .iphone-btn-vup   { top: 96px;  height: 38px; }
.sd-slide-phone .iphone-btn-vdn   { top: 142px; height: 38px; }
.sd-slide-phone .iphone-btn-power { top: 108px; height: 56px; }

.sd-slide-card {
  margin-top: 16px;
  width: 100%;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklch, var(--c-ink) 8%, transparent);
  background: var(--c-surface);
  text-align: left;
}
.sd-slide-caption {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-muted);
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.sd-slide h3 {
  font-family: var(--ff-serif-cn);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-ink);
  margin: 0 0 8px;
}
.sd-slide p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0;
}
.sd-slide p strong { color: var(--c-ink); font-weight: 700; }

.sd-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.sd-carousel-prev,
.sd-carousel-next {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--c-ink) 12%, transparent);
  background: transparent;
  color: var(--c-ink);
  display: grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.sd-carousel-prev:hover:not(:disabled),
.sd-carousel-next:hover:not(:disabled) {
  background: color-mix(in oklch, var(--c-ink) 5%, transparent);
}
.sd-carousel-prev:disabled,
.sd-carousel-next:disabled { opacity: .3; cursor: not-allowed; }

.sd-carousel-dots { display: flex; gap: 8px; align-items: center; }
.sd-carousel-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: color-mix(in oklch, var(--c-ink) 18%, transparent);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.sd-carousel-dots button[aria-selected="true"] {
  width: 24px;
  background: var(--c-vermilion);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .iphone-shot,
  .sd-bignum,
  .sd-think,
  .sd-think-text,
  .sd-think-dot,
  .sd-panel,
  .sd-slide { transition: none; animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   2026 Bento Grid（已替換成 Sticky Scroll Demo，CSS 暫保留作為孤兒
   理由：完全移除 risk 高、可能 break 其他 fallback；後續 cleanup PR 再處理）
   ═══════════════════════════════════════════════════════════════ */
.edit-bento {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
  container-type: inline-size;
  container-name: bento;
}

/* 2026-05-06 Batch 2：Bento → Magazine spread
   原 4-col 規則 grid → 12-col asymmetric magazine layout
   每張卡片各自占不同 col span / row span，視覺層次不對稱、編輯雜誌感 */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;       /* mobile 預設單欄 */
  grid-auto-rows: minmax(200px, auto);
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(28px, 3vw, 40px);
}
@media (min-width: 768px) {
  .bento-grid { grid-template-columns: repeat(12, 1fr); }
}

/* Cell base — Linear / Stripe 式深色卡片 */
/* 2026-05-06 PR-B：Bento section 加 subtle radial gradient backdrop（glass 效果的基礎）*/
.edit-bento {
  position: relative;
  isolation: isolate;
}
.edit-bento::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, color-mix(in oklch, var(--c-vermilion) 5%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 80%, color-mix(in oklch, var(--c-gold, #B8893A) 4%, transparent), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Bento cell — 2026-05-06 砍掉重練包 Sub-A：mouse spotlight + 3D tilt + scroll entrance
   - glass morphism 保留（半透明 + backdrop blur + 1px inset highlight）
   - 加 mouse-tracking radial gradient overlay (::after 用 --mx --my CSS vars)
   - 加 3D tilt：transform 用 --rx --ry CSS vars（JS 設）
   - 加 scroll-driven entrance：用 CSS individual properties translate/scale
     (跟 transform 不衝突，可同時 hover tilt + scroll entrance) */
.bento-cell {
  --mx: 50%; --my: 50%;
  --rx: 0deg; --ry: 0deg;
  position: relative;
  display: flex; flex-direction: column;
  background: color-mix(in oklch, var(--c-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--c-border);
  /* 2026-05-06 百萬 polish：強化 inset highlight 雙線 + subtle outer shadow，玻璃質感更明顯 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .06),
    0 2px 8px -4px rgba(0, 0, 0, .04);
  border-radius: clamp(14px, 1.6vw, 20px);
  /* 內部更呼吸 */
  padding: clamp(28px, 3vw, 40px);
  overflow: hidden;
  isolation: isolate;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .25s, background .25s;
  /* 卡片更有重量感 */
  min-height: 280px;
}
[data-theme="dark"] .bento-cell {
  background: color-mix(in oklch, var(--c-surface) 70%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -1px 0 rgba(0, 0, 0, .15),
    0 2px 12px -4px rgba(0, 0, 0, .25);
}
/* ::before — 原 corner gradient 保留（hover 顯示）*/
.bento-cell::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--c-vermilion) 8%, transparent), transparent 50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .35s ease;
  border-radius: inherit;
}
/* ::after — 新加的 mouse-tracking spotlight overlay */
.bento-cell::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    circle 280px at var(--mx) var(--my),
    color-mix(in oklch, var(--c-vermilion) 16%, transparent),
    transparent 60%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: plus-lighter;   /* 讓 spotlight 跟 backdrop 加亮疊合 */
}
.bento-cell:hover::before,
.bento-cell:hover::after { opacity: 1; }
.bento-cell:hover {
  border-color: color-mix(in oklch, var(--c-vermilion) 40%, var(--c-border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(0, 0, 0, .08),
    0 32px 72px -16px color-mix(in oklch, var(--c-vermilion) 30%, transparent),
    0 8px 24px -8px color-mix(in oklch, var(--c-vermilion) 20%, transparent);
}
/* 內容 z-index 提到 spotlight 之上（spotlight 是 z:0、content 預設 auto 在上）*/
.bento-cell > * { position: relative; z-index: 1; }

/* Scroll-driven 個別 cell entrance — 用 individual properties (translate/scale)
   不跟 .bento-cell 的 transform: perspective(...) rotateX/Y 衝突 */
@supports (animation-timeline: view()) {
  .bento-cell {
    animation: bentoCellEnter 1ms linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 75%;
  }
  @keyframes bentoCellEnter {
    from { opacity: 0; translate: 0 50px; scale: 0.95; }
    to   { opacity: 1; translate: 0 0; scale: 1; }
  }
}

/* Reduced motion：所有動效 disable */
@media (prefers-reduced-motion: reduce) {
  .bento-cell { animation: none; transform: none; opacity: 1; translate: 0; scale: 1; }
  .bento-cell::before, .bento-cell::after { display: none; }
}

/* Hero modifier 保留（仍有 gradient bg 區分），但 layout 改用 nth-child 控
   2026-05-07：HERO 內 mockup 撐滿寬度，視覺份量配上 8-col 大空間 */
.bento-hero {
  background: linear-gradient(135deg, var(--c-surface) 0%, color-mix(in oklch, var(--c-vermilion) 4%, var(--c-surface)) 100%);
}
.bento-hero .bento-essay-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bento-hero .bec-card {
  width: 100%;
  max-width: 480px;     /* mockup 卡 max-width，桌面看起來更氣派但不撐爆 */
  margin: 0 auto;
}
/* 移除 .bento-wide 的 grid-column span（改 nth-child 控）— 但保留 class 給可能 nested style 用 */

/* Magazine 不對稱 placement（≥768px）— 2026-05-07 重新設計
   原版 cell 4 (TTS) 只有 2 col 文字字字斷行；改成所有 cell 至少 4 col 寬，
   HERO 8 col 仍是視覺 anchor，平衡「不對稱 magazine 感」+「文字 readability」 */
@media (min-width: 768px) {
  /* Cell 1: AI 申論評分 HERO — 左大 8 col × 2 row */
  .bento-cell:nth-child(1) { grid-column: 1 / span 8; grid-row: 1 / span 2; min-height: 380px; }
  /* Cell 2: SM-2 SRS — 右上 4 col */
  .bento-cell:nth-child(2) { grid-column: 9 / span 4; grid-row: 1; }
  /* Cell 3: 法條 popover — 右中 4 col（堆疊 SRS 下方）*/
  .bento-cell:nth-child(3) { grid-column: 9 / span 4; grid-row: 2; }
  /* Cell 4: TTS — 左下 4 col（修：原 2 col 太窄，文字字字斷行）*/
  .bento-cell:nth-child(4) { grid-column: 1 / span 4; grid-row: 3; }
  /* Cell 5: 學習儀表板 — 中下 4 col */
  .bento-cell:nth-child(5) { grid-column: 5 / span 4; grid-row: 3; }
  /* Cell 6: 跨裝置同步 — 右下 4 col */
  .bento-cell:nth-child(6) { grid-column: 9 / span 4; grid-row: 3; }
}

/* mobile：所有 cell 自動單欄 stack（grid-template-columns: 1fr 已預設）*/

/* 過渡寬度：≥480 < 768 用 2 欄 fallback */
/* RWD：≥1024 桌機 — 卡片更有 presence */
@media (min-width: 1024px) {
  .bento-cell { min-height: 300px; }
  /* HERO 用 2-row span 自然撐高（min-height 不要寫死太高，避免內容稀疏顯空） */
  .bento-cell:nth-child(1) { min-height: 420px; }
}

@media (min-width: 480px) and (max-width: 767.98px) {
  /* 平板過渡：2 欄 + cell 1 (HERO) 跟 cell 6 (sync) 跨整行 */
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-cell:nth-child(1) { grid-column: span 2; min-height: 360px; }
  .bento-cell:nth-child(6) { grid-column: span 2; }
}
@media (max-width: 479.98px) {
  /* mobile 小螢幕：所有 cell 單欄 stack，min-height 縮小避免 6 卡 = 1680px 超長 */
  .bento-cell { min-height: 240px; padding: clamp(20px, 5vw, 28px); }
  .bento-cell:nth-child(1) { min-height: 320px; }
  .bento-h { font-size: clamp(19px, 5vw, 22px); }
  .bento-tag { font-size: 10px; }
  /* mobile 砍 3D tilt（單欄全寬時 tilt 看起來怪）*/
  .bento-cell { transform: none !important; }
}

/* Cell text 區（標籤 + 標題 + 描述）*/
/* 2026-05-06 百萬 polish：text 區有更明確的呼吸 */
.bento-text {
  margin-top: auto;
  padding-top: clamp(20px, 2vw, 28px);
}
.bento-tag {
  display: inline-block;
  font-family: var(--ff-mono, monospace);
  font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-vermilion);
  font-weight: 600;
  margin-bottom: 14px;
  padding: 4px 10px;
  background: color-mix(in oklch, var(--c-vermilion) 8%, transparent);
  border-radius: 4px;
  border: 1px solid color-mix(in oklch, var(--c-vermilion) 25%, transparent);
}
.bento-h {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--c-ink);
  margin: 0 0 10px;
}
.bento-hero .bento-h {
  font-size: clamp(28px, 3.2vw, 40px);
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.bento-desc {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.7;
  color: var(--c-text);
  margin: 0;
  text-wrap: pretty;
}
.bento-hero .bento-desc {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
}
.bento-desc strong {
  color: var(--c-ink);
  font-weight: 700;
}

/* Cell visual 區（SVG 視覺化）— 視覺更呼吸 */
.bento-visual {
  flex-shrink: 0;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  color: var(--c-muted);
}
.bento-visual svg { max-width: 100%; height: auto; display: block; }

/* 2026-05-06 百萬 polish：subtle category-based accent
   每張卡用色相微差讓 6 卡有「同家族不同風味」的層次（hue 偏移 < 30deg、同朱印家族）
   user 看不出明顯顏色變化，但下意識感覺 6 卡有層次而非「6 張 vermilion 複製」 */
.bento-cell:nth-child(2) .bento-tag { /* SRS — 偏溫暖橘 */
  color: color-mix(in oklch, var(--c-vermilion) 88%, #FFB07A);
  background: color-mix(in oklch, var(--c-vermilion) 6%, transparent);
  border-color: color-mix(in oklch, var(--c-vermilion) 20%, #FFB07A);
}
.bento-cell:nth-child(3) .bento-tag { /* Popover — 偏深紅 */
  color: color-mix(in oklch, var(--c-vermilion) 92%, #8B2635);
}
.bento-cell:nth-child(4) .bento-tag { /* TTS — 偏紫紅 */
  color: color-mix(in oklch, var(--c-vermilion) 85%, #C04060);
}
.bento-cell:nth-child(5) .bento-tag { /* Stats — 偏金 */
  color: color-mix(in oklch, var(--c-vermilion) 70%, #B8893A);
  background: color-mix(in oklch, #B8893A 8%, transparent);
  border-color: color-mix(in oklch, #B8893A 25%, transparent);
}
.bento-cell:nth-child(6) .bento-tag { /* Sync — 維持 vermilion */
  /* 預設樣式 */
}

/* Hero radar chart (legacy, 已不使用) */
.bento-radar svg { max-width: 200px; margin: 8px auto; }

/* ═══ 申論評分結果卡 mockup（hero cell 視覺）═══
   貼近實際 AI 評分結果 UI：分數 / 等第 / 法條 badge / 一句總評 /
   進度條 / 優點與改善建議列表 */
.bento-essay-card {
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
}
.bec-card {
  width: 100%; max-width: 320px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 16px 16px 14px;
  box-shadow: 0 4px 14px -4px rgba(178, 58, 43, .12);
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
}
.bec-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.bec-score-wrap {
  display: flex; align-items: baseline; gap: 2px;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.bec-score {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: 38px; font-weight: 900;
  color: var(--c-vermilion);
  line-height: 1;
  letter-spacing: -.02em;
}
.bec-denom {
  font-family: var(--ff-mono);
  font-size: 13px; color: var(--c-muted);
  font-weight: 600;
}
.bec-badges {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.bec-grade {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: 13px; font-weight: 800;
  padding: 3px 10px;
  background: color-mix(in oklch, var(--c-vermilion) 12%, transparent);
  color: var(--c-vermilion);
  border: 1px solid color-mix(in oklch, var(--c-vermilion) 30%, transparent);
  border-radius: 4px;
  letter-spacing: .04em;
}
.bec-law {
  font-family: var(--ff-mono);
  font-size: 10px; font-weight: 600;
  padding: 2px 7px;
  background: color-mix(in oklch, #6b8a73 14%, transparent);
  color: #4d6a55;
  border-radius: 99px;
  letter-spacing: .03em;
}
[data-theme="dark"] .bec-law { color: #92b59c; }

.bec-summary {
  font-size: 12.5px; line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 10px;
  font-style: italic;
}
.bec-bar-track {
  height: 4px;
  background: var(--c-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
}
.bec-bar-fill {
  height: 100%;
  width: 84%;
  background: linear-gradient(90deg, var(--c-vermilion), color-mix(in oklch, var(--c-vermilion) 65%, #d4a847));
  border-radius: 2px;
  transform-origin: left;
  animation: becBarGrow 1.2s .4s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes becBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bec-bar-fill { animation: none; }
}

.bec-section {
  margin-bottom: 8px;
}
.bec-section:last-child { margin-bottom: 0; }
.bec-section-hdr {
  font-family: var(--ff-mono);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bec-hdr-ok { color: #4d6a55; }
[data-theme="dark"] .bec-hdr-ok { color: #92b59c; }
.bec-hdr-tip { color: var(--c-vermilion); }
.bec-item {
  font-size: 11.5px;
  line-height: 1.5;
  padding: 1px 0;
}
.bec-ok {
  color: #4d6a55;
}
[data-theme="dark"] .bec-ok { color: #92b59c; }
.bec-tip {
  color: var(--c-text);
  opacity: .85;
}

/* SRS curve */
.bento-srs svg { max-width: 200px; }

/* Popover mockup — bento 卡在窄欄（~196px）寬度時，popover 不能完全壓在
   paragraph 上面（會把示意文字蓋掉）。改成從容器右下錨定、同時把容器
   min-height 加大留 paragraph + popover 兩段空間。 */
.bento-popover {
  position: relative;
  padding: 12px 14px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-family: var(--ff-serif-cn);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--c-text);
  min-height: 180px;
}
.bp-paragraph { color: var(--c-muted); max-width: 100%; }
.bp-link {
  color: var(--c-vermilion);
  font-weight: 700;
  border-bottom: 1.5px dotted var(--c-vermilion);
  cursor: pointer;
  position: relative;
}
.bp-popover {
  position: absolute;
  /* 從右下錨定，避免覆蓋 paragraph */
  top: auto;
  bottom: 8px;
  right: 8px;
  width: auto;
  max-width: calc(100% - 16px);
  background: var(--c-bg, var(--c-surface));
  border: 1.5px solid var(--c-vermilion);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 8px 20px rgba(178, 58, 43, .25);
  font-size: 11px;
  z-index: 2;
  animation: bpPop 1.5s ease-in-out infinite alternate;
}
/* 因為 transform 不再用於 translateY (改 bottom 錨定)，pulse 改純 scale */
@keyframes bpPop {
  from { transform: scale(1); }
  to   { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-popover { animation: none; }
}
.bp-pop-h {
  font-weight: 800;
  color: var(--c-vermilion);
  margin-bottom: 4px;
  font-size: 11px;
}
.bp-pop-body { color: var(--c-text); line-height: 1.5; }

/* Wave visualization */
.bento-wave svg { max-width: 200px; height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .bento-wave svg animate { animation-duration: 0s; }
}

/* Stats heatmap */
.bento-stats svg { max-width: 200px; }

/* Sync visualization */
.bento-sync {
  display: flex; justify-content: center; align-items: center;
  padding: 8px 0;
}
.bento-sync svg { max-width: 280px; height: 80px; color: var(--c-text); }

/* Hero radar chart specific tweak */
.bento-hero .bento-visual {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 16px;
}
.bento-hero .bento-radar svg {
  max-width: min(260px, 100%);
}

/* Wide card layout: visual left, text right on big screens */
.bento-wide {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.bento-wide .bento-visual { margin-bottom: 0; }
.bento-wide .bento-text { margin-top: 0; padding-top: 0; }
@container bento (max-width: 700px) {
  .bento-wide { grid-template-columns: 1fr; }
  .bento-wide .bento-visual { margin-bottom: 16px; }
}
@media (max-width: 700px) {
  .bento-wide { grid-template-columns: 1fr; }
  .bento-wide .bento-visual { margin-bottom: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   2026-05-08 Workflow 動畫（取代靜態 wf-steps）
   18s 三幕：寫 / 錯 / 熟。每幕 6s（hero 字 → slogan → demo）
   配色翻譯：dark→cream、jade→ink/vermilion、coral→vermilion
   IO 觸發：進入 viewport 才播、滾出停（省電）
   a11y：pause/replay 按鈕 + reduced-motion 退化成 3 張靜態卡
═══════════════════════════════════════════════════════════════ */
.edit-workflow {
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.edit-workflow .edit-section-h2 { text-align: center; }
.edit-workflow .edit-section-eyebrow { text-align: center; }

/* section 之間 subtle vertical divider（沿用既有設計語言） */
.edit-bento + .edit-workflow::before,
.edit-workflow + .edit-section::before,
.sticky-demo + .edit-workflow::before {
  content: '';
  display: block;
  width: 1px; height: clamp(40px, 5vw, 64px);
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in oklch, var(--c-vermilion) 35%, transparent),
    transparent);
  margin: clamp(-32px, -3vw, -48px) auto clamp(20px, 3vw, 32px);
}

/* ── 動畫容器 ──────────────────────────────────────── */
/* 2026-05-08 user 二次回饋：
   - light mode 米色 bg 上 #f4f1ea 文字、#6e6e78 灰、#5fc9a0 淺綠都看不到
   - dark mode 表現良好，保持原稿色
   解法：ink/muted 用 var(--c-ink)/var(--c-muted) 自動隨 theme 翻轉；
        jade 在 light mode 改深綠、dark mode 還原原稿青綠。
        coral / line 在兩 mode 都維持原稿（user 沒抱怨）。*/
.wf-anim {
  --wf-total: 18s;
  --wf-bg:    var(--c-bg);            /* stage bg = 網站 bg（兩 mode 自動 flip）*/
  --wf-ink:   var(--c-ink);           /* light: 墨黑、dark: 暖白 */
  --wf-muted: var(--c-muted);         /* 同上 */
  --wf-jade:  #2D8762;                /* light mode 深森林綠（~5:1 on cream paper）*/
  --wf-coral: #ff6b5b;                /* 原稿珊瑚紅 */
  --wf-line:  #2e2e38;                /* 原稿暗灰 line（key border） */

  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 1100px;
  position: relative;
}
/* dark mode：jade 還原原稿青綠（dark bg 上漂亮） */
[data-theme="dark"] .wf-anim {
  --wf-jade: #5fc9a0;
}

/* 預設整段暫停；is-playing 時所有後代動畫 running */
.wf-anim:not(.is-playing) *,
.wf-anim.is-paused * {
  animation-play-state: paused !important;
}

.wf-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  /* transparent，讓 .home-bg mesh/orb/conic 透上來；不再是純色塊壓在 textured 頁面 bg 上 */
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
}

.wf-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.wf-scene-1 { animation: wfVisible1 var(--wf-total) infinite; }
.wf-scene-2 { animation: wfVisible2 var(--wf-total) infinite; }
.wf-scene-3 { animation: wfVisible3 var(--wf-total) infinite; }
@keyframes wfVisible1 {
  0%, 32.5% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}
@keyframes wfVisible2 {
  0%, 32.5% { opacity: 0; }
  34.17%, 65.83% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}
@keyframes wfVisible3 {
  0%, 65.83% { opacity: 0; }
  67.5%, 99% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Hero 大字 ──────────────────────────────────────── */
.wf-hero {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-weight: 900;
  font-size: clamp(180px, 32vw, 420px);
  line-height: 0.9;
  color: var(--wf-ink);
  letter-spacing: -0.02em;
  user-select: none;
  margin: 0;
}
.wf-scene-1 .wf-hero { animation: wfHero1 var(--wf-total) infinite cubic-bezier(0.34, 1.3, 0.64, 1); }
.wf-scene-2 .wf-hero { animation: wfHero2 var(--wf-total) infinite cubic-bezier(0.34, 1.3, 0.64, 1); }
.wf-scene-3 .wf-hero { animation: wfHero3 var(--wf-total) infinite cubic-bezier(0.34, 1.3, 0.64, 1); }
.wf-scene-2 .wf-hero { color: var(--wf-coral); }   /* 「錯」用朱印紅 */

@keyframes wfHero1 {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; filter: blur(40px); }
  2.78% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; filter: blur(0); }
  4.44% { transform: translate(-50%, -50%) scale(1); }
  8.33% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  10% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  21.11% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  22.5% { opacity: 0; }
  33.33%, 100% { opacity: 0; }
}
@keyframes wfHero2 {
  0%, 33.33% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; filter: blur(40px); }
  36.11% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; filter: blur(0); }
  37.78% { transform: translate(-50%, -50%) scale(1); }
  41.67% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  43.33% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  54.44% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  55.83% { opacity: 0; }
  66.67%, 100% { opacity: 0; }
}
@keyframes wfHero3 {
  0%, 66.67% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; filter: blur(40px); }
  69.44% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; filter: blur(0); }
  71.11% { transform: translate(-50%, -50%) scale(1); }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  76.67% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  87.78% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  89.17% { opacity: 0; }
  100% { opacity: 0; }
}

/* 紅 X 劃過「錯」字 */
.wf-x-strike {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(180px, 32vw, 420px);
  height: 10px;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  opacity: 0;
  animation: wfXShow var(--wf-total) infinite;
}
.wf-x-strike::before {
  content: ''; position: absolute; inset: 0;
  background: var(--wf-coral);
  border-radius: 5px;
  box-shadow: 0 0 32px rgba(255,107,91,0.6);
  transform-origin: left center;
  transform: scaleX(0);
  animation: wfXLine var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes wfXShow {
  0%, 35% { opacity: 0; }
  36.5%, 41.5% { opacity: 1; }
  43%, 100% { opacity: 0; }
}
@keyframes wfXLine {
  0%, 35% { transform: scaleX(0); }
  37.78% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* ── slogan ──────────────────────────────────────── */
.wf-slogan {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
  pointer-events: none;
}
.wf-slogan-main {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--wf-ink);
  overflow: hidden;
}
.wf-slogan-sub {
  font-family: var(--ff-sans-cn, var(--ff-sans));
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 17px);
  color: var(--wf-muted);
  letter-spacing: .05em;     /* chrome review：中文 .12em 太鬆 → .05em */
  margin-top: 18px;
}

.wf-scene-1 .wf-slogan { animation: wfSlogan1 var(--wf-total) infinite; }
.wf-scene-2 .wf-slogan { animation: wfSlogan2 var(--wf-total) infinite; }
.wf-scene-3 .wf-slogan { animation: wfSlogan3 var(--wf-total) infinite; }
@keyframes wfSlogan1 {
  0%, 9.5% { opacity: 0; }
  10.5%, 21.11% { opacity: 1; }
  22.22%, 100% { opacity: 0; }
}
@keyframes wfSlogan2 {
  0%, 42.83% { opacity: 0; }
  43.83%, 54.44% { opacity: 1; }
  55.56%, 100% { opacity: 0; }
}
@keyframes wfSlogan3 {
  0%, 76.17% { opacity: 0; }
  77.17%, 87.78% { opacity: 1; }
  88.89%, 100% { opacity: 0; }
}

.wf-scene-1 .wf-slogan-main span,
.wf-scene-2 .wf-slogan-main span,
.wf-scene-3 .wf-slogan-main span {
  display: inline-block; opacity: 0; transform: translateY(40px);
  animation: wfCharIn var(--wf-total) infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.wf-scene-1 .wf-slogan-main span:nth-child(1) { animation-delay: calc(var(--wf-total) * 0.1000); }
.wf-scene-1 .wf-slogan-main span:nth-child(2) { animation-delay: calc(var(--wf-total) * 0.1033); }
.wf-scene-1 .wf-slogan-main span:nth-child(3) { animation-delay: calc(var(--wf-total) * 0.1067); }
.wf-scene-1 .wf-slogan-main span:nth-child(4) { animation-delay: calc(var(--wf-total) * 0.1100); }
.wf-scene-1 .wf-slogan-main span:nth-child(5) { animation-delay: calc(var(--wf-total) * 0.1133); }
.wf-scene-1 .wf-slogan-main span:nth-child(6) { animation-delay: calc(var(--wf-total) * 0.1167); }
.wf-scene-1 .wf-slogan-main span:nth-child(7) { animation-delay: calc(var(--wf-total) * 0.1200); }
.wf-scene-2 .wf-slogan-main span:nth-child(1) { animation-delay: calc(var(--wf-total) * 0.4333); }
.wf-scene-2 .wf-slogan-main span:nth-child(2) { animation-delay: calc(var(--wf-total) * 0.4367); }
.wf-scene-2 .wf-slogan-main span:nth-child(3) { animation-delay: calc(var(--wf-total) * 0.4400); }
.wf-scene-2 .wf-slogan-main span:nth-child(4) { animation-delay: calc(var(--wf-total) * 0.4433); }
.wf-scene-2 .wf-slogan-main span:nth-child(5) { animation-delay: calc(var(--wf-total) * 0.4467); }
.wf-scene-2 .wf-slogan-main span:nth-child(6) { animation-delay: calc(var(--wf-total) * 0.4500); }
.wf-scene-2 .wf-slogan-main span:nth-child(7) { animation-delay: calc(var(--wf-total) * 0.4533); }
.wf-scene-3 .wf-slogan-main span:nth-child(1) { animation-delay: calc(var(--wf-total) * 0.7667); }
.wf-scene-3 .wf-slogan-main span:nth-child(2) { animation-delay: calc(var(--wf-total) * 0.7700); }
.wf-scene-3 .wf-slogan-main span:nth-child(3) { animation-delay: calc(var(--wf-total) * 0.7733); }
.wf-scene-3 .wf-slogan-main span:nth-child(4) { animation-delay: calc(var(--wf-total) * 0.7767); }
.wf-scene-3 .wf-slogan-main span:nth-child(5) { animation-delay: calc(var(--wf-total) * 0.7800); }
.wf-scene-3 .wf-slogan-main span:nth-child(6) { animation-delay: calc(var(--wf-total) * 0.7833); }
@keyframes wfCharIn {
  0% { opacity: 0; transform: translateY(40px); }
  2.5%, 100% { opacity: 1; transform: translateY(0); }
}

.wf-scene-1 .wf-slogan-sub { animation: wfSubFade1 var(--wf-total) infinite; opacity: 0; }
.wf-scene-2 .wf-slogan-sub { animation: wfSubFade2 var(--wf-total) infinite; opacity: 0; }
.wf-scene-3 .wf-slogan-sub { animation: wfSubFade3 var(--wf-total) infinite; opacity: 0; }
@keyframes wfSubFade1 {
  0%, 13% { opacity: 0; transform: translateY(8px); }
  15%, 21.11% { opacity: 1; transform: translateY(0); }
  22.22%, 100% { opacity: 0; }
}
@keyframes wfSubFade2 {
  0%, 46.33% { opacity: 0; transform: translateY(8px); }
  48.33%, 54.44% { opacity: 1; transform: translateY(0); }
  55.56%, 100% { opacity: 0; }
}
@keyframes wfSubFade3 {
  0%, 79.67% { opacity: 0; transform: translateY(8px); }
  81.67%, 87.78% { opacity: 1; transform: translateY(0); }
  88.89%, 100% { opacity: 0; }
}

/* ── Demo ──────────────────────────────────────── */
.wf-demo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Scene 1 demo: 4 keys + 大勾 ── */
.wf-keys {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
}
.wf-key {
  width: clamp(56px, 8vw, 110px);
  height: clamp(56px, 8vw, 110px);
  border-radius: 14px;
  border: 2px solid var(--wf-line);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 48px);
  color: var(--wf-muted);
}
.wf-key-active {
  animation: wfKeyPress var(--wf-total) infinite cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes wfKeyPress {
  0%, 23.5% { transform: translateY(0); border-color: var(--wf-line); color: var(--wf-muted); background: transparent; box-shadow: 0 0 0 0 transparent; }
  25% { transform: translateY(6px); border-color: var(--wf-jade); color: var(--wf-jade); background: color-mix(in oklch, var(--wf-jade) 12%, transparent); }
  26.5% { transform: translateY(0); border-color: var(--wf-jade); color: var(--wf-jade); background: color-mix(in oklch, var(--wf-jade) 12%, transparent); box-shadow: 0 0 0 8px color-mix(in oklch, var(--wf-jade) 18%, transparent); }
  28.5% { box-shadow: 0 0 0 0 transparent; }
  30.56% { transform: translateY(0); border-color: var(--wf-jade); color: var(--wf-jade); background: color-mix(in oklch, var(--wf-jade) 12%, transparent); }
  31.67%, 100% { transform: translateY(0); border-color: var(--wf-line); color: var(--wf-muted); background: transparent; }
}
.wf-scene-1 .wf-demo { animation: wfDemo1Show var(--wf-total) infinite; }
@keyframes wfDemo1Show {
  0%, 22% { opacity: 0; }
  22.78%, 30.56% { opacity: 1; }
  31.67%, 100% { opacity: 0; }
}
.wf-check {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: clamp(140px, 18vw, 260px);
  height: clamp(140px, 18vw, 260px);
  border-radius: 50%;
  background: var(--wf-jade);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 60px color-mix(in oklch, var(--wf-jade) 30%, transparent);
  animation: wfCheckBig var(--wf-total) infinite cubic-bezier(0.34, 1.5, 0.64, 1);
}
.wf-check svg {
  width: 50%; height: 50%;
  stroke: var(--wf-bg);
  stroke-width: 12;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf-check svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: wfCheckDraw var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes wfCheckBig {
  0%, 26.5% { transform: translate(-50%, -50%) scale(0); }
  28% { transform: translate(-50%, -50%) scale(1.1); }
  29.5% { transform: translate(-50%, -50%) scale(1); }
  30.56% { transform: translate(-50%, -50%) scale(1); }
  31.67%, 100% { transform: translate(-50%, -50%) scale(0); }
}
@keyframes wfCheckDraw {
  0%, 27.5% { stroke-dashoffset: 100; }
  29.5% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* ── Scene 2 demo: 卡 → 堆疊 ── */
.wf-scene-2 .wf-demo { animation: wfDemo2Show var(--wf-total) infinite; }
@keyframes wfDemo2Show {
  0%, 55% { opacity: 0; }
  56.11%, 63.89% { opacity: 1; }
  65%, 100% { opacity: 0; }
}
.wf-err-flow {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 70px);
}
.wf-err-card {
  width: clamp(112px, 14vw, 180px);
  height: clamp(140px, 17vw, 220px);
  border-radius: 12px;
  background: rgba(255,107,91,0.06);
  border: 2px solid var(--wf-coral);
  position: relative;
  transform: rotate(-4deg);
  animation: wfErrCardIn var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1);
}
.wf-err-card::before {
  content: '✕';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(56px, 7vw, 96px);
  color: var(--wf-coral);
  font-weight: 300;
}
@keyframes wfErrCardIn {
  0%, 55% { opacity: 0; transform: translateX(-40px) rotate(-12deg) scale(0.85); }
  57.5% { opacity: 1; transform: translateX(0) rotate(-4deg) scale(1); }
  60% { opacity: 1; transform: translateX(0) rotate(-4deg) scale(1); }
  62% { opacity: 0; transform: translateX(80px) rotate(8deg) scale(0.6); }
  65%, 100% { opacity: 0; }
}
.wf-err-arrow {
  width: clamp(32px, 4vw, 64px);
  height: 2px;
  background: var(--wf-muted);
  position: relative;
  opacity: 0;
  animation: wfArrowShow var(--wf-total) infinite;
}
.wf-err-arrow::after {
  content: '';
  position: absolute;
  right: -2px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--wf-muted);
  border-right: 2px solid var(--wf-muted);
  transform: translateY(-50%) rotate(45deg);
}
@keyframes wfArrowShow {
  0%, 57% { opacity: 0; }
  58.5%, 62% { opacity: 0.6; }
  63%, 100% { opacity: 0; }
}
.wf-err-stack {
  position: relative;
  width: clamp(112px, 14vw, 180px);
  height: clamp(140px, 17vw, 220px);
  opacity: 0;
  animation: wfStackShow var(--wf-total) infinite;
}
@keyframes wfStackShow {
  0%, 58% { opacity: 0; transform: translateX(20px); }
  60%, 63.5% { opacity: 1; transform: translateX(0); }
  65%, 100% { opacity: 0; }
}
.wf-err-layer {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255,107,91,0.04);
  border: 1px solid var(--wf-coral);
}
.wf-err-layer:nth-child(1) { transform: translate(-12px, 10px) rotate(-5deg); opacity: 0.4; }
.wf-err-layer:nth-child(2) { transform: translate(-6px, 5px) rotate(-2deg); opacity: 0.7; }
.wf-err-layer:nth-child(3) {
  background: var(--wf-bg);
  border-color: var(--wf-coral);
  box-shadow: 0 0 32px rgba(255,107,91,0.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
}
.wf-err-label {
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--wf-coral); letter-spacing: 0.2em;
}
.wf-err-clock {
  font-family: var(--ff-serif-cn, serif);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 38px);
  color: var(--wf-ink);
}
.wf-err-when {
  font-size: 12px;
  color: var(--wf-muted);
}

/* ── Scene 3 demo: bars + 大分數 ── */
.wf-scene-3 .wf-demo { animation: wfDemo3Show var(--wf-total) infinite; }
@keyframes wfDemo3Show {
  0%, 88% { opacity: 0; }
  89.44%, 97.22% { opacity: 1; }
  98.33%, 100% { opacity: 0; }
}
.wf-score-block {
  display: grid;
  grid-template-columns: 1fr clamp(140px, 18vw, 240px);
  align-items: center;
  gap: clamp(28px, 4vw, 80px);
  width: min(85%, 900px);
}
.wf-bars {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
}
.wf-bar-row {
  display: grid;
  grid-template-columns: clamp(80px, 10vw, 130px) 1fr clamp(32px, 3.5vw, 48px);
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  font-family: var(--ff-sans-cn, var(--ff-sans));
}
.wf-bar-lbl {
  font-size: clamp(12px, 1.2vw, 16px);
  color: var(--wf-ink);
  font-weight: 500;
}
.wf-bar-val {
  font-family: var(--ff-mono);
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--wf-jade);
  text-align: right;
}
.wf-bar-track {
  height: clamp(6px, 0.7vw, 10px);
  background: var(--wf-line);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.wf-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--wf-jade);
  border-radius: 5px;
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 12px color-mix(in oklch, var(--wf-jade) 40%, transparent);
}
.wf-b1 .wf-bar-fill { animation: wfBar1 var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1); }
.wf-b2 .wf-bar-fill { animation: wfBar2 var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1); }
.wf-b3 .wf-bar-fill { animation: wfBar3 var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1); }
.wf-b4 .wf-bar-fill { animation: wfBar4 var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes wfBar1 {
  0%, 89.44% { transform: scaleX(0); }
  92% { transform: scaleX(0.92); }
  97.22% { transform: scaleX(0.92); }
  98.33%, 100% { transform: scaleX(0); }
}
@keyframes wfBar2 {
  0%, 90.28% { transform: scaleX(0); }
  92.83% { transform: scaleX(0.78); }
  97.22% { transform: scaleX(0.78); }
  98.33%, 100% { transform: scaleX(0); }
}
@keyframes wfBar3 {
  0%, 91.11% { transform: scaleX(0); }
  93.67% { transform: scaleX(0.85); }
  97.22% { transform: scaleX(0.85); }
  98.33%, 100% { transform: scaleX(0); }
}
@keyframes wfBar4 {
  0%, 91.94% { transform: scaleX(0); }
  94.5% { transform: scaleX(0.65); }
  97.22% { transform: scaleX(0.65); }
  98.33%, 100% { transform: scaleX(0); }
}
.wf-total {
  text-align: center;
  opacity: 0;
  animation: wfTotalIn var(--wf-total) infinite cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes wfTotalIn {
  0%, 93% { opacity: 0; transform: scale(0.6); }
  95.5% { opacity: 1; transform: scale(1.05); }
  96.5% { opacity: 1; transform: scale(1); }
  97.22% { opacity: 1; transform: scale(1); }
  98.33%, 100% { opacity: 0; transform: scale(1); }
}
.wf-total-num {
  font-family: var(--ff-serif-cn, serif);
  font-weight: 900;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 1;
  color: var(--wf-jade);
}
.wf-total-den {
  font-family: var(--ff-sans-cn, var(--ff-sans));
  font-weight: 400;
  font-size: clamp(16px, 2vw, 26px);
  color: var(--wf-muted);
  margin-top: 6px;
  letter-spacing: 0.06em;
}

/* ── 場景間色塊轉場 ── */
.wf-wipe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-100%);
}
.wf-wipe-1 { background: var(--wf-coral); animation: wfWipe1 var(--wf-total) infinite cubic-bezier(0.76, 0, 0.24, 1); }
.wf-wipe-2 { background: var(--wf-jade);  animation: wfWipe2 var(--wf-total) infinite cubic-bezier(0.76, 0, 0.24, 1); }
@keyframes wfWipe1 {
  0%, 32.5% { transform: translateX(-100%); }
  33.33% { transform: translateX(0); }
  34.17% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@keyframes wfWipe2 {
  0%, 65.83% { transform: translateX(-100%); }
  66.67% { transform: translateX(0); }
  67.5% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ── Stage overlay click-target（取代 video 按鈕的暫停操作）── */
.wf-stage-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;          /* 在所有 scene/wipe 上方 */
  outline: none;
}
.wf-stage-overlay:focus-visible {
  outline: 2px solid var(--c-vermilion);
  outline-offset: -4px;
  border-radius: 12px;
}

/* hover 浮動提示 — 「點擊暫停 / 點擊繼續」editorial 浮字 */
.wf-hover-hint {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.wf-stage:hover .wf-hover-hint { opacity: 1; transform: translateY(0); }
.wf-hover-hint-text {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wf-ink);
  background: color-mix(in oklch, var(--c-bg) 88%, transparent);
  border: 1px solid color-mix(in oklch, var(--wf-ink) 14%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* ── 編輯式 meta caption（取代 video controls）── */
/* 一行：[●●●] · [寫·錯·熟] · ──────── · 自動播放 · ↻
   看起來像學術圖表 figure caption / 唱片內頁 metadata，不是 video player */
.wf-meta {
  display: flex;
  align-items: center;
  justify-content: center;     /* user 回饋：caption 要置中 */
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--c-muted);
}

/* 場景進度 3 顆點 */
.wf-scene-dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.wf-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--c-ink) 28%, transparent);
  background: transparent;
  transition: background .35s ease, border-color .35s ease;
}
.wf-dot.is-passed { background: color-mix(in oklch, var(--c-vermilion) 35%, transparent); border-color: var(--c-vermilion); }
.wf-dot.is-current {
  background: var(--c-vermilion);
  border-color: var(--c-vermilion);
  animation: wfDotPulse 1.4s ease-in-out infinite;
}
@keyframes wfDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--c-vermilion) 50%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in oklch, var(--c-vermilion) 0%, transparent); }
}

.wf-meta-divider {
  flex-shrink: 0;
  font-family: var(--ff-serif-cn, serif);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: color-mix(in oklch, var(--c-ink) 65%, transparent);
}

/* hairline 進度（不是粗條，是細線像論文 chart axis）
   不再 flex:1 拉滿、改固定 200px，讓整列能置中 */
.wf-meta-rule {
  flex: 0 0 200px;
  height: 1px;
  background: color-mix(in oklch, var(--c-ink) 12%, transparent);
  position: relative;
  overflow: hidden;
}
.wf-meta-rule-fill {
  position: absolute;
  left: 0; top: 0;
  width: 0;
  height: 100%;
  background: var(--c-vermilion);
  transition: width .1s linear;
}

.wf-meta-state {
  flex-shrink: 0;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .12em;
}
.wf-anim.is-paused .wf-meta-state { color: var(--c-vermilion); }

/* ↻ replay：純文字 link，無框 */
.wf-meta-replay {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0 4px;
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in oklch, var(--c-ink) 55%, transparent);
  cursor: pointer;
  transition: color .2s ease, transform .3s cubic-bezier(.34, 1.5, .64, 1);
  line-height: 1;
}
.wf-meta-replay:hover {
  color: var(--c-vermilion);
  transform: rotate(-180deg);
}
.wf-meta-replay:focus-visible {
  outline: 2px solid var(--c-vermilion);
  outline-offset: 2px;
  border-radius: 50%;
}

/* RWD：mobile meta 換行（仍置中）*/
@media (max-width: 600px) {
  .wf-meta { flex-wrap: wrap; gap: 8px 10px; }
  .wf-meta-rule { order: 99; flex-basis: 60%; }
  .wf-meta-divider { font-size: 10.5px; }
}

/* ── reduced-motion fallback ── */
.wf-static-steps {
  display: none;     /* 預設藏起來；reduced-motion 才秀 */
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-rule);
  max-width: 720px;
  margin-inline: auto;
}
.wf-static-step {
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--c-rule);
  text-align: center;
}
.wf-static-num {
  display: block;
  font-family: var(--ff-serif-cn, serif);
  font-size: 13px; font-weight: 500;
  letter-spacing: .3em;
  color: var(--c-muted);
  margin-bottom: 10px;
}
.wf-static-h {
  font-family: var(--ff-serif-cn, serif);
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 700;
  color: var(--c-vermilion);
  line-height: 1;
  margin: 0 0 18px;
}
.wf-static-desc {
  font-family: var(--ff-serif-cn, serif);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.8;
  color: var(--c-text);
  max-width: 540px;
  margin: 0 auto;
  text-align: left;
  text-wrap: pretty;
}
.wf-static-desc strong { color: var(--c-ink); font-weight: 700; }

/* reduced-motion：不播動畫、隱藏 stage/控制、改秀靜態卡 */
@media (prefers-reduced-motion: reduce) {
  .wf-stage,
  .wf-controls { display: none !important; }
  .wf-static-steps { display: block; }
}

/* ── RWD：keys 在 ≤480 改 2x2 grid ── */
@media (max-width: 480px) {
  .wf-keys {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: clamp(120px, 50vw, 180px);
  }
  .wf-key {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
  }
  .wf-score-block {
    grid-template-columns: 1fr;
    gap: 18px;
    width: 90%;
  }
  .wf-err-flow {
    transform: scale(.85);
  }
}
@media (max-width: 720px) {
  .wf-stage { aspect-ratio: 4 / 3; }    /* 手機高瘦比例 */
  .wf-hero { font-size: clamp(120px, 28vw, 200px); }
  .wf-slogan-main { font-size: clamp(28px, 6vw, 48px); }
  .wf-slogan-sub { font-size: 12px; margin-top: 12px; }
}
.wf-cta-row {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
}
.wf-cta-note {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .05em;
  color: var(--c-muted);
  text-transform: uppercase;
}

/* Comparison table — vs 補習班 */
.edit-compare {
  width: 100%; border-collapse: collapse; max-width: 880px;
  margin: 24px auto 0; font-family: var(--ff-sans-cn);
}
.edit-compare th, .edit-compare td {
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--c-rule);
  font-size: 14.5px;
}
.edit-compare thead th {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted); font-weight: 500;
  border-bottom: 2px solid var(--c-ink);
}
.edit-compare th.us { color: var(--c-vermilion); }
.edit-compare td.feat { font-weight: 500; color: var(--c-ink); }
.edit-compare td.us { color: var(--c-vermilion); font-weight: 600; }
.edit-compare td.us::before { content: '✓ '; }
.edit-compare td.no { color: var(--c-muted); }
.edit-compare td.no::before { content: '— '; opacity: .5; }
.edit-compare td.partial { color: var(--c-warning); }
.edit-compare td.partial::before { content: '◐ '; }

/* Exam category cards (logged-out, choosing exam type) */
.edit-exam-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0; border-top: 1px solid var(--c-rule);
}
.edit-exam-card {
  padding: 40px 32px;
  border-right: 1px solid var(--c-rule);
  background: var(--c-paper);
  text-align: left; cursor: pointer;
  transition: background .25s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.edit-exam-card:last-child { border-right: none; }
/* mobile-first：直排，下邊框；≥768 改回橫排右邊框（已由 grid auto-fit 處理）*/
@media (max-width: 767.98px) {
  .edit-exam-card { border-right: none; border-bottom: 1px solid var(--c-rule); }
  .edit-exam-card:last-child { border-bottom: none; }
}
@media (hover: hover) {
  .edit-exam-card {
    transition: background .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
    transform-style: preserve-3d;
  }
  .edit-exam-card:hover {
    background: var(--c-paper-2);
    transform: translateY(-4px);
    box-shadow: 0 18px 48px -16px color-mix(in oklch, var(--c-vermilion, #b23a2b) 28%, transparent);
    z-index: 1;
  }
  .edit-exam-card:hover .edit-exam-arrow { transform: translateX(6px); color: var(--c-vermilion, #b23a2b); }
  .edit-exam-card .edit-exam-arrow { transition: transform .3s ease, color .3s ease; }
}
.edit-exam-eyebrow {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--c-vermilion); font-weight: 500;
  margin-bottom: 18px;
}
.edit-exam-name {
  font-family: var(--ff-serif-cn); font-size: 36px; font-weight: 800;
  letter-spacing: -.02em; color: var(--c-ink); margin: 0 0 12px;
}
.edit-exam-spec {
  font-family: var(--ff-mono); font-size: 11.5px; color: var(--c-muted);
  letter-spacing: .04em; margin-bottom: 24px;
}
.edit-exam-arrow {
  font-family: var(--ff-serif-en); font-size: 22px; color: var(--c-vermilion);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  display: inline-block;
}

/* Footer / SEO links */
.edit-footer {
  max-width: 1080px; margin: 80px auto 0; padding: 56px clamp(20px, 5vw, 40px) 40px;
  border-top: 1px solid var(--c-rule);
  font-family: var(--ff-sans-cn);
}
.edit-footer-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}
.edit-footer-h {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: 12px;
}
.edit-footer-link {
  display: block; font-size: 13.5px; line-height: 2;
  color: var(--c-ink); text-decoration: none;
  transition: color .15s;
}
.edit-footer-link:hover { color: var(--c-vermilion); }
/* P2-10: mobile（≤375px）「答案以考選部公告為準 · ...」擠成兩行 dot 落單
   提高 line-height、加 wrap，spans 各自不被截斷 */
.edit-footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-rule);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  font-family: var(--ff-mono); font-size: 11px; color: var(--c-muted);
  letter-spacing: .04em; line-height: 1.7;
}
.edit-footer-bottom > span { min-width: 0; }

/* Sprint-mode card (≤30 days to exam) — full 30-day plan with progress grid */
.edit-action-sprint .edit-action-h2 { color: var(--c-vermilion); }

.sprint-card {
  background: var(--c-paper-2);
  border: 1px solid var(--c-rule);
  border-left: 4px solid var(--c-vermilion);
  padding: clamp(20px, 2.4vw, 32px) clamp(24px, 2.8vw, 40px);
  position: relative;
  overflow: hidden;
}
.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;
}

.sprint-hdr {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--c-rule);
}
.sprint-tag {
  font-family: var(--ff-mono);
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--c-vermilion); color: #FFFAF2;
  padding: 5px 11px; border-radius: 3px;
}
.sprint-days {
  font-family: var(--ff-mono);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .04em;
}
.sprint-days strong {
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--c-vermilion); font-weight: 700;
  font-variant-numeric: tabular-nums; margin: 0 4px;
}
.sprint-mock-flag {
  font-family: var(--ff-mono);
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 700;
  color: var(--c-vermilion); background: rgba(178,58,43,.12);
  padding: 5px 12px; border-radius: 999px; margin-left: auto;
  letter-spacing: .04em;
}

.sprint-body {
  display: grid; grid-template-columns: 1fr 260px; gap: 32px;
  margin-bottom: 24px;
}
@media (max-width: 767.98px) { .sprint-body { grid-template-columns: 1fr; gap: 20px; } }

.sprint-today-eyebrow {
  font-family: var(--ff-mono);
  font-size: clamp(11px, .85vw, 13px);
  font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-vermilion); margin-bottom: 10px;
}
.sprint-today-title {
  font-family: var(--ff-serif-cn);
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 700;
  letter-spacing: -.015em; color: var(--c-ink); margin-bottom: 10px;
  line-height: 1.3;
}
.sprint-today-spec {
  font-family: var(--ff-mono);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--c-ink-2, var(--c-muted));
  line-height: 1.7; margin-bottom: 18px;
}
.sprint-today-spec strong { color: var(--c-ink); font-weight: 700; }
.sprint-today-cta-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sprint-today-done {
  margin-top: 12px;
  font-family: var(--ff-mono);
  font-size: clamp(12.5px, .9vw, 14.5px);
  font-weight: 700;
  color: var(--c-success); letter-spacing: .04em;
}
.sprint-today-progress {
  margin-top: 12px;
  font-family: var(--ff-mono);
  font-size: clamp(12.5px, .9vw, 14.5px);
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .04em;
}

.sprint-side { display: flex; flex-direction: column; gap: 14px; }
.sprint-side-block {
  padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.4vw, 20px);
  background: var(--c-paper);
  border: 1px solid var(--c-rule);
  border-radius: 4px;
}
.sprint-side-h {
  font-family: var(--ff-mono);
  font-size: clamp(10.5px, .8vw, 12px);
  letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted);
  margin-bottom: 8px; font-weight: 700;
}
.sprint-side-block p {
  font-family: var(--ff-sans-cn);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.65;
  color: var(--c-ink); margin: 0;
}
.sprint-mock-list { margin: 0; padding: 0; list-style: none; }
.sprint-mock-list li {
  font-family: var(--ff-mono);
  font-size: clamp(12.5px, .95vw, 14px);
  color: var(--c-ink); padding: 4px 0; letter-spacing: .03em;
}
.sprint-side-num {
  font-family: var(--ff-serif-en);
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 700;
  color: var(--c-ink); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sprint-side-num .unit {
  font-family: var(--ff-sans-cn); font-size: 12px; font-weight: 400;
  color: var(--c-muted); margin-left: 4px;
}

.sprint-grid-section { border-top: 1px solid var(--c-rule); padding-top: 18px; }
.sprint-grid-h {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--c-muted);
  margin-bottom: 12px; font-weight: 600;
}
.sprint-grid {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 4px;
  margin-bottom: 12px;
}
/* < sm 小手機 sprint 30 天 grid 縮成 10 欄（3 列）以避免每格 < 16px tap target */
@media (max-width: 479.98px) { .sprint-grid { grid-template-columns: repeat(10, 1fr); } }
.sprint-cell {
  aspect-ratio: 1; border-radius: 2px;
  background: var(--c-surface2);
  border: 1px solid transparent;
  transition: transform .15s;
}
.sprint-cell.done  { background: var(--c-vermilion); }
.sprint-cell.soft  { background: rgba(178,58,43,.32); }
.sprint-cell.empty { background: var(--c-rule); opacity: .35; }
.sprint-cell.today { background: var(--c-vermilion); border-color: var(--c-ink); transform: scale(1.15); box-shadow: 0 0 0 2px rgba(178,58,43,.25); }

.sprint-grid-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  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: 5px; vertical-align: middle;
}
.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); }
.sprint-grid-legend i.today { background: var(--c-vermilion); border: 1px solid var(--c-ink); }

/* 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;
}

/* Top progress bar (sticky, mobile + desktop) */
.q-progress {
  position: sticky; top: 0; z-index: 30;
  height: 3px; width: 100%;
  background: var(--c-rule);
  overflow: hidden;
}
.q-progress::after {
  content: ''; display: block; height: 100%;
  width: var(--p, 0%);
  background: var(--c-vermilion);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.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);
}

/* Side page number — desktop only; vertical 漢數字 */
.q-page-num {
  position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--ff-serif-cn);
  font-size: 22px; font-weight: 500; letter-spacing: .35em;
  color: var(--c-muted); opacity: .55;
  pointer-events: none; z-index: 5;
  user-select: none;
  display: none;
}
/* 特例斷點 1100 — q-card (720) + 雙側 spine + page-num 邊欄需要這寬度 */
@media (min-width: 1100px) { .q-page-num { display: block; } }

/* Side spine progress (desktop) — replaces progress bar visually */
.q-spine {
  position: fixed; left: 56px; top: 120px; bottom: 120px;
  width: 1px; z-index: 5;
  background: linear-gradient(to bottom,
    var(--c-vermilion) 0%, var(--c-vermilion) var(--p, 0%),
    var(--c-rule) var(--p, 0%), var(--c-rule) 100%);
  pointer-events: none;
  display: none;
}
@media (min-width: 1100px) { .q-spine { display: block; } }

/* Practice paper card — replaces .q-card visual */
.q-area {
  padding: 28px 16px 120px;
  max-width: 720px; margin: 0 auto;
  position: relative;
}
@media (min-width: 1100px) { .q-area { padding-top: 56px; } }

.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; }
/* User's wrong choice gets a strikethrough vibe */
.opt.wrong[data-user-chose="true"] {
  opacity: .8;
  text-decoration: line-through; text-decoration-color: rgba(155,44,44,.4);
}

/* 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); }
}

/* 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 (站內導覽) ══
   Always rendered in DOM (outside SPA views) so Googlebot can crawl
   /p/ static SEO pages from the home document. */
.seo-link-hub {
  max-width: 1100px;
  margin: 60px auto 0;
  padding: 32px 24px 24px;
  border-top: 1px solid var(--c-border);
  background: var(--c-paper, #F4EFE6);
}
.seo-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.seo-link-col h3 {
  font-family: var(--ff-serif, 'Noto Serif TC', serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-primary, #B23A2B);
  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: 6px 0; }
.seo-link-col a {
  font-size: .87rem;
  color: var(--c-text, #0b1020);
  text-decoration: none;
  transition: color .15s;
}
.seo-link-col a:hover {
  color: var(--c-primary, #B23A2B);
  text-decoration: underline;
}
[data-theme="dark"] .seo-link-hub {
  background: var(--c-bg);
  border-top-color: var(--c-border);
}
@media (max-width: 767.98px) {
  .seo-link-grid { grid-template-columns: 1fr; gap: 20px; }
  .seo-link-hub { padding: 24px 16px 80px; }
}
/* Hide SEO hub during full-screen law reading modes
   so it doesn't appear under the main view when user is focused. */
body.law-reading .seo-link-hub,
body.law-full .seo-link-hub { 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;
}
.toc-art-btn {
  width: 44px;
  height: 44px;
  touch-action: manipulation;
}
.toc-art-inp {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 16px;        /* iOS Safari < 16px 會自動 zoom — 必設 16px */
  width: 88px;
}
.toc-art-jump .btn {
  min-height: 44px !important;
  padding: 8px 12px !important;
  touch-action: manipulation;
}

/* touch-action: manipulation — 砍 iOS 300ms 雙擊縮放延遲 */
.opt, .nav-btn, .q-flag, .btn, #float-jump-btn,
.toc-art-btn, #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 上推 */
#action-bar, #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;
}

/* ════════════════════════════════════════════════════════════════
   Mobile < 540px override — 邊到邊紙面、解析卡砍雙側 margin
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .q-area { padding: 8px 0 calc(var(--nav-h,64px) + var(--action-h,68px) + env(safe-area-inset-bottom,0px) + 24px) !important; }
  .q-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-bottom: 8px !important;
  }
  .q-card-hdr { padding: 8px 12px !important; }
  .q-body { padding: 14px 14px 12px !important; }
  .q-text {
    font-size: 16.5px !important;
    line-height: 1.78 !important;
    max-width: none !important;
    letter-spacing: 0 !important;
  }
  .opt {
    padding: 13px 14px !important;
    min-height: 56px !important;
    font-size: .95rem !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
    border-width: 1.5px !important;
  }
  .opt-letter {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  /* feedback：邊到邊（砍 line 6046 後加的雙側 18px margin） */
  .feedback {
    margin: -1px 0 12px !important;
    padding: 18px 14px !important;
    border-radius: 0 !important;
    font-size: 14.5px !important;
  }
  .feedback-exp { font-size: 14.5px !important; line-height: 1.78 !important; }
  .exp-law-quote { margin: 14px 0 14px 4px !important; padding-left: 12px !important; font-size: 14.5px !important; }
  /* exp-block 在 < 540px 沿用 mobile-first 上下堆疊（line 1309 已 flex-direction:column）*/
  /* < 540px：保留左右雙欄，僅縮 gap + 字級；標籤寬度由內容決定 */
  .exp-correct-block, .exp-wrong-block {
    gap: 10px !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .exp-correct-label, .exp-wrong-label {
    min-width: 60px !important;     /* 手機略縮：60px 仍夠塞「第 8 條」「正確答案 C」 */
    font-size: 11.5px !important;
    padding: 3px 8px !important;
  }
  details.exp-opts > summary { padding: 16px 0 !important; font-size: 12.5px !important; }
  .q-note-prompt { padding-top: 14px !important; }
  .q-note-ta {
    min-height: 88px !important;
    font-size: 16px !important;     /* iOS 防 zoom */
    padding: 12px !important;
  }
  .fb-rel-topic { padding: 9px 14px !important; font-size: .82rem !important; min-height: 38px !important; }
}

/* ═══════════════════════════════════
   邀請好友 / Referral modal
═══════════════════════════════════ */
/* Feature flag：付費 / 推薦 各自獨立 gate（2026-05-04 拆開）
   - body.lx-paid-features-disabled 只藏付費（Lemon KYC 還沒過時開著）
   - body.lx-referral-disabled       只藏推薦（推薦獎勵是免費 +5 次評分，
                                                跟付費無關，原本被綁一起是 bug） */
body.lx-paid-features-disabled .lx-paid-feature { display: none !important; }
body.lx-referral-disabled .lx-referral-feature { display: none !important; }
.ref-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(11,16,32,.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(4px);
  animation: refFadeIn .18s ease-out;
}
@keyframes refFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ref-modal-card {
  background: var(--c-surface, #fff);
  border-radius: 16px; padding: 28px 26px 24px;
  max-width: 440px; width: 100%;
  box-shadow: 0 18px 48px rgba(11,16,32,.28);
  position: relative;
  font-family: var(--ff-sans-cn, system-ui);
  color: var(--c-text, #0b1020);
  max-height: 90vh; overflow-y: auto;
}
.ref-modal-card h2 {
  font-family: var(--ff-serif-cn, serif);
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 8px;
}
.ref-x {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  font-size: 1.1rem; line-height: 1; color: var(--c-muted, #888);
  cursor: pointer; transition: background .12s, color .12s;
  z-index: 2;
}
.ref-x:hover { background: var(--c-surface2, #f0f0f0); color: var(--c-text); }
.ref-x:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.ref-lead { font-size: 14px; line-height: 1.7; color: var(--c-muted, #5a6782); margin: 0 0 20px; }
.ref-lead strong { color: var(--c-vermilion, #B23A2B); font-weight: 700; }
/* 顯眼的「免費會員也能用」橫幅 — 解開「我是不是要先付費才能推薦」的疑慮 */
.ref-eligibility-banner {
  background: linear-gradient(135deg, rgba(178,58,43,.08), rgba(34,153,84,.06));
  border: 1px solid rgba(34,153,84,.25);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-text, #111);
  margin: 0 0 14px;
}
.ref-eligibility-banner strong { color: var(--c-vermilion, #B23A2B); }
.ref-code-row {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.ref-code-input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 13px;
  border: 1px solid var(--c-border, #dde1ed);
  border-radius: 8px;
  background: var(--c-bg, #f7f8fc);
  color: var(--c-text, #0b1020);
}
.ref-copy-btn {
  padding: 10px 16px;
  background: var(--c-vermilion, #B23A2B); color: #fff;
  border: none; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.ref-copy-btn:hover { filter: brightness(.92); }
.ref-share-row { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.ref-share-btn {
  flex: 1; min-width: 96px;
  padding: 10px 8px;
  text-align: center; text-decoration: none;
  font-size: 12px; font-weight: 600;
  border-radius: 8px;
  transition: filter .15s;
}
.ref-share-btn:hover { filter: brightness(1.06); }
.ref-share-btn.line { background: #06C755; color: #fff; }
.ref-share-btn.fb   { background: #1877F2; color: #fff; }
.ref-share-btn.threads { background: #000; color: #fff; }
.ref-stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 14px 4px;
  border-top: 1px solid var(--c-border, #dde1ed);
  border-bottom: 1px solid var(--c-border, #dde1ed);
  margin-bottom: 12px;
}
.ref-stat { text-align: center; }
.ref-stat-num {
  font-family: var(--ff-serif-cn, serif);
  font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--c-text, #0b1020);
}
.ref-stat-num.on { color: var(--c-vermilion, #B23A2B); }
.ref-stat-lbl { font-size: 11px; color: var(--c-muted, #5a6782); margin-top: 4px; }
.ref-foot { font-size: 12px; color: var(--c-muted, #5a6782); text-align: center; margin: 6px 0 16px; }
.ref-close {
  display: block; width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--c-border, #dde1ed);
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--c-muted, #5a6782);
  cursor: pointer;
}
.ref-close:hover { background: var(--c-bg, #f7f8fc); }
@media (max-width: 480px) {
  .ref-modal-card { padding: 22px 18px; }
  .ref-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .ref-stat-num { font-size: 18px; }
}