.lp-exam-card{padding:32px 24px;}
  .lp-proof{padding:24px 32px;}
  .lp-cta-wrap{padding:16px 32px 56px;}
  .lp-cta{padding:40px;text-align:center;}
}

/* ══════════════════════════════════════════════════════════
   DESIGN SYSTEM v4 — Clean, system-level overrides
   Principles: one token set, no gradient headings, minimal effects
══════════════════════════════════════════════════════════ */

/* ─ App header — solid, no glass ──────────────────────── */
#app-header{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  box-shadow:none;
}
[data-theme="dark"] #app-header{
  background:var(--c-surface);
  border-bottom-color:var(--c-border);
}
.hdr-logo{font-size:var(--fs-15);font-weight:700;letter-spacing:-.01em;}
.hdr-logo .logo-box{background:var(--c-primary);box-shadow:none;}
#login-btn{
  background:var(--c-surface2);
  color:var(--c-text);
  border:1px solid var(--c-border);
  border-radius:999px;font-weight:600;font-size:var(--fs-13);
}
#login-btn:hover{background:var(--c-surface);border-color:var(--c-primary);color:var(--c-primary);}
[data-theme="dark"] #login-btn{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-text);}
[data-theme="dark"] #login-btn:hover{background:var(--c-surface);border-color:var(--c-primary);}

/* Streak chip in header（連續學習天數 / 編輯級朱印紅 + 火焰）*/
.hdr-streak {
  display: none; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in oklch, var(--c-vermilion, #b23a2b) 8%, var(--c-surface));
  border: 1px solid color-mix(in oklch, var(--c-vermilion, #b23a2b) 30%, var(--c-border));
  font-family: var(--ff-mono);
  font-size: 12px; font-weight: 700;
  color: var(--c-vermilion, var(--c-primary));
  white-space: nowrap; flex-shrink: 0;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .03em;
}
.hdr-streak:hover {
  background: color-mix(in oklch, var(--c-vermilion, #b23a2b) 16%, var(--c-surface));
  transform: scale(1.04);
}
.hdr-streak strong {
  font-family: var(--ff-serif-cn);
  font-size: 14px; font-weight: 800;
  color: var(--c-ink, var(--c-text));
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.hdr-streak.cool { /* >= 7 天，火焰更旺 */
  background: color-mix(in oklch, var(--c-vermilion, #b23a2b) 12%, var(--c-surface));
  border-color: var(--c-vermilion, var(--c-primary));
  animation: streakBreath 2.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes streakBreath {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--c-vermilion, #b23a2b) 0%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklch, var(--c-vermilion, #b23a2b) 12%, transparent); }
}
@media (max-width: 480px) {
  .hdr-streak { padding: 4px 9px; font-size: 11px; }
  .hdr-streak strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-streak.cool { animation: none; }
}

/* Streak milestone toast */
.streak-toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
  z-index: 9999;
  padding: 18px 26px 16px;
  background: var(--c-surface);
  border: 2px solid var(--c-vermilion, var(--c-primary));
  border-radius: 14px;
  box-shadow: 0 16px 40px -8px color-mix(in oklch, var(--c-vermilion, #b23a2b) 35%, rgba(0,0,0,.2));
  text-align: center;
  font-family: var(--ff-serif-cn);
  max-width: calc(100vw - 40px);
  transition: transform .4s cubic-bezier(.2, .9, .3, 1.1), opacity .3s;
  opacity: 0;
}
.streak-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.streak-toast .st-emoji { font-size: 36px; line-height: 1; margin-bottom: 6px; }
.streak-toast .st-h {
  font-size: 22px; font-weight: 800;
  color: var(--c-vermilion, var(--c-primary));
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.streak-toast .st-sub {
  font-size: 13.5px; color: var(--c-muted);
  font-family: var(--ff-mono);
  letter-spacing: .02em;
}

/* Countdown chip in header (always visible) */
.hdr-countdown{
  display:none;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  background:var(--c-surface2);border:1px solid var(--c-border);
  font-size:var(--fs-12);font-weight:600;color:var(--c-text);
  white-space:nowrap;flex-shrink:0;
}
@media(min-width:360px){.hdr-countdown{display:inline-flex;}}
/* 手機收緊：留下「天數 + 經/政 tag」就好，不放完整文字 */
@media(max-width:480px){
  .hdr-countdown{padding:4px 9px;font-size:11.5px;gap:4px;}
  .hdr-countdown strong{font-size:13px;}
  .hdr-countdown .hc-tag{width:14px;height:14px;font-size:10px;}
}
.hdr-countdown .hc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.hdr-countdown.safe .hc-dot{background:#10b981;}
.hdr-countdown.warn .hc-dot{background:#f59e0b;}
.hdr-countdown.danger .hc-dot{background:#ef4444;}
.hdr-countdown strong{color:var(--c-text);font-weight:700;}
.hdr-countdown.clickable{cursor:pointer;transition:background .15s;}
@media(hover:hover){.hdr-countdown.clickable:hover{background:var(--c-surface);border-color:var(--c-primary);}}
.hdr-countdown .hc-tag{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--c-primary);color:#fff;font-size:.65rem;font-weight:700;
  margin-right:1px;
}

/* Exam focus picker — opened by clicking the header countdown badge. */
.exam-focus-picker{
  position:absolute;z-index:60;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:12px;box-shadow:var(--shadow-md);
  padding:8px;min-width:220px;
  display:flex;flex-direction:column;gap:4px;
}
.exam-focus-picker .efp-hdr{
  font-size:.74rem;color:var(--c-muted);font-weight:600;
  padding:6px 10px 4px;letter-spacing:.04em;
}
.exam-focus-picker .efp-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:10px 12px;border:1px solid transparent;border-radius:8px;
  background:transparent;cursor:pointer;text-align:left;width:100%;
  transition:all .12s;
}
.exam-focus-picker .efp-opt strong{font-size:.88rem;color:var(--c-text);}
.exam-focus-picker .efp-opt span{font-size:.72rem;color:var(--c-muted);}
.exam-focus-picker .efp-opt:hover{background:var(--c-surface2);border-color:var(--c-border);}
.exam-focus-picker .efp-opt.active{background:var(--c-primary-10);border-color:var(--c-primary);}
.exam-focus-picker .efp-opt.active strong{color:var(--c-primary);}

/* 練習頁倒數 cell 可點 → 變按鈕樣式（hover 提示）*/
.ps-meta-clickable {
  background: transparent; border: none;
  cursor: pointer; text-align: left;
  padding: 4px 14px;
  border-radius: 8px;
  transition: background .15s, transform .15s;
}
.ps-meta-clickable:hover {
  background: var(--c-surface2);
  transform: translateY(-1px);
}
.ps-meta-clickable:focus-visible {
  outline: 2px solid var(--c-primary); outline-offset: 2px;
}
.ps-meta-edit {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--ff-mono, monospace);
  font-size: 9.5px;
  color: var(--c-vermilion, var(--c-primary));
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 5px;
  background: color-mix(in oklch, var(--c-vermilion, #b23a2b) 8%, transparent);
  border-radius: 99px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ─ Navigation v4 overrides kept minimal; bulk rules in earlier block ─ */
[data-theme="dark"] .nav-btn{color:var(--c-muted);}
[data-theme="dark"] .nav-btn.active{color:var(--c-primary);}
[data-theme="dark"] .nav-btn:hover:not(.active){color:var(--c-text);}

/* ─ Practice select — section headers (solid color only) ─ */
.section-hdr{padding:var(--sp-4) 0 var(--sp-3);border-bottom:none;}
.section-hdr h2{
  font-size:var(--fs-20);font-weight:700;letter-spacing:-.01em;
  color:var(--c-text);background:none;-webkit-text-fill-color:currentColor;
}
[data-theme="dark"] .section-hdr h2{color:var(--c-text);}
[data-theme="dark"] .section-hdr{border-bottom:none;}
.exam-badge.broker{background:var(--c-primary-10);color:var(--c-primary);border:1px solid var(--c-primary-20);}
.exam-badge.agent{background:rgba(8,145,178,.1);color:var(--c-agent);border:1px solid rgba(8,145,178,.22);}
[data-theme="dark"] .exam-badge.broker{background:rgba(216,90,72,.18);color:var(--c-primary);border-color:rgba(216,90,72,.3);}
[data-theme="dark"] .exam-badge.agent{background:rgba(8,145,178,.18);color:var(--c-text-3);border-color:rgba(8,145,178,.3);}

/* ─ Subject cards — clean solid accent ─────────────────── */
.subj-card{
  border-radius:var(--r-md);border-color:var(--c-border);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:box-shadow .18s ease,transform .18s ease;
}
.subj-card::before{display:block;}
.subj-card::after{display:none;}
.subj-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.subj-card .name{font-size:var(--fs-14);font-weight:600;letter-spacing:0;line-height:1.5;}
.pct-track{height:4px;border-radius:2px;}
.subj-card.broker .pct-fill{background:var(--c-broker);}
.subj-card.agent  .pct-fill{background:var(--c-agent);}
[data-theme="dark"] .subj-card{background:var(--c-surface);border-color:var(--c-border);}

/* ─ Full exam bar — simplified, downweighted ───────────── */
.full-exam-bar{
  background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--r-md);
  box-shadow:none;
}
[data-theme="dark"] .full-exam-bar{background:var(--c-surface);border-color:var(--c-border);}
.full-exam-btn.broker{background:var(--c-broker);box-shadow:none;transition:background .15s;}
.full-exam-btn.broker:hover{background:var(--c-primary-h);transform:none;}
.full-exam-btn.agent{background:var(--c-agent);box-shadow:none;transition:background .15s;}
.full-exam-btn.agent:hover{background:#0e7490;transform:none;}

/* ─ Year pill buttons ────────────────────────────────────── */
.yr-btn{border-radius:999px;font-weight:600;border-color:var(--c-border);transition:all .15s;}
.yr-btn:hover:not(.active){border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-10);}
[data-theme="dark"] .yr-btn:not(.active){background:var(--c-surface2);border-color:var(--c-border);color:var(--c-muted);}
[data-theme="dark"] .yr-btn:hover:not(.active){border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-10);}
/* Active: strong contrast in both modes */
.yr-btn.active{
  background:var(--c-primary) !important;
  border-color:var(--c-primary) !important;
  color:#fff !important;
  font-weight:700;
  box-shadow:0 0 0 2px var(--c-primary-20);
}
[data-theme="dark"] .yr-btn.active{
  background:#B23A2B !important;
  border-color:#B23A2B !important;
  color:#fff !important;
  box-shadow:0 0 0 2px rgba(178,58,43,.35);
}

/* ─ Practice topbar — solid ───────────────────────────── */
.prac-topbar{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  box-shadow:none;
}
[data-theme="dark"] .prac-topbar{background:var(--c-surface);border-bottom-color:var(--c-border);}
.prac-title-row .title{font-weight:700;letter-spacing:-.01em;font-size:var(--fs-17);}

/* ─ Question cards ───────────────────────────────────────── */
.q-card{border-radius:var(--r-lg);border-color:var(--c-border);box-shadow:var(--shadow-sm);}
[data-theme="dark"] .q-card{background:var(--c-surface);border-color:var(--c-border);}
.q-card-hdr{background:var(--c-surface2);border-bottom-color:var(--c-border);}
[data-theme="dark"] .q-card-hdr{background:var(--c-surface2);}
.q-num{
  background:var(--c-surface);color:var(--c-muted);font-weight:700;font-size:var(--fs-12);
  border:1px solid var(--c-border);border-radius:999px;
}
/* .q-text 字級已在 line 1063 用 clamp() 設定，刪除此處衝突的 override */

/* Options — quiet states */
.opt{border-radius:var(--r-md);border:1.5px solid var(--c-border);transition:border-color .15s,background .15s;}
[data-theme="dark"] .opt{background:var(--c-surface);border-color:var(--c-border);color:var(--c-text);}
.opt:hover:not(:disabled){border-color:var(--c-primary);background:var(--c-primary-10);box-shadow:none;}
.opt.selected{border-color:var(--c-primary);background:var(--c-primary-10);box-shadow:none;}
.opt.selected .opt-letter{background:var(--c-primary);border-color:var(--c-primary);box-shadow:none;color:#fff;}
/* editorial 單色 vermilion override — 不再用 success/danger 雙色（綠紅 SaaS 殘留） */
.opt.correct{border-color:var(--c-vermilion);background:var(--c-vermilion-10,rgba(178,58,43,.08));box-shadow:none;}
.opt.correct .opt-letter{background:var(--c-vermilion);border-color:var(--c-vermilion);color:#fff;}
.opt.wrong{border-color:var(--c-border);background:transparent;box-shadow:none;opacity:.55;filter:grayscale(.4);}
.opt.wrong[data-user-chose="true"]{opacity:.75;filter:none;border-color:var(--c-border-2,var(--c-rule));}
.opt.wrong .opt-letter{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-muted);}
.opt-letter{background:var(--c-surface2);border:1.5px solid var(--c-border);font-size:var(--fs-13);font-weight:700;color:var(--c-text);}
[data-theme="dark"] .opt-letter{color:var(--c-text);}

/* ─ Feedback ─────────────────────────────────────────────── */
.feedback{border-radius:var(--r-md);border-left:3px solid;}
.feedback.correct{background:rgba(5,150,105,.07);border-color:var(--c-success);}
.feedback.wrong{background:rgba(220,38,38,.07);border-color:var(--c-danger);}
[data-theme="dark"] .feedback.correct{background:rgba(5,150,105,.1);}
[data-theme="dark"] .feedback.wrong{background:rgba(220,38,38,.1);}

/* ─ Essay cards ──────────────────────────────────────────── */
.essay-card{border-radius:var(--r-lg);border-color:var(--c-border);box-shadow:var(--shadow-sm);}
[data-theme="dark"] .essay-card{background:var(--c-surface);border-color:var(--c-border);}
.essay-tag{background:var(--c-primary-10);color:var(--c-primary);border:1px solid var(--c-primary-20);font-weight:700;letter-spacing:0;}
.essay-reveal-btn{background:var(--c-primary);color:#fff;border-radius:var(--r-md);font-weight:700;box-shadow:none;transition:background .15s;}
.essay-reveal-btn:hover{background:var(--c-primary-h);transform:none;box-shadow:none;}
.essay-grade-btn{background:var(--c-primary);color:#fff;font-weight:700;border-radius:var(--r-md);box-shadow:none;transition:background .15s;}
.essay-grade-btn:hover:not(:disabled){background:var(--c-primary-h);transform:none;box-shadow:none;}
[data-theme="dark"] .essay-ans{border-color:var(--c-border);}

/* ─ Exam bar ─────────────────────────────────────────────── */
#exam-bar{background:var(--c-surface2);border-bottom-color:var(--c-border);}
[data-theme="dark"] #exam-bar{background:var(--c-surface2);border-bottom-color:var(--c-border);color:var(--c-muted);}
.jump-q-btn{background:var(--c-primary-10);border-color:var(--c-primary-20);color:var(--c-primary);font-weight:600;}
.jump-q-btn:hover{background:var(--c-primary-20);}

/* ─ Action bar ───────────────────────────────────────────── */
#action-bar{background:var(--c-surface);border-top-color:var(--c-border);}
[data-theme="dark"] #action-bar{background:var(--c-surface);border-top-color:var(--c-border);}

/* ─ Buttons — solid primary ──────────────────────────────── */
.btn-primary{background:var(--c-primary);border:none;box-shadow:none;font-weight:600;letter-spacing:0;}
.btn-primary:hover:not(:disabled){background:var(--c-primary-h);transform:none;box-shadow:none;}
[data-theme="dark"] .btn-ghost{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-text);}
[data-theme="dark"] .btn-ghost:hover:not(:disabled){background:var(--c-surface);}

/* ─ Laws browser — clean ─────────────────────────────────── */
.laws-search{background:var(--c-surface);border-bottom-color:var(--c-border);}
[data-theme="dark"] .laws-search{background:var(--c-surface);border-bottom-color:var(--c-border);}
.search-inp{border-radius:var(--r-md);border:1.5px solid var(--c-border);background:var(--c-surface);transition:border-color .15s,box-shadow .15s;}
.search-inp:focus{border-color:var(--c-primary);background:var(--c-surface);box-shadow:0 0 0 3px var(--c-primary-10);}
[data-theme="dark"] .search-inp{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-text);}
[data-theme="dark"] .search-inp:focus{border-color:var(--c-primary);}
.law-exam-hdr{background:var(--c-surface2);border-left:3px solid;border-radius:var(--r-md);font-weight:700;letter-spacing:0;}
[data-theme="dark"] .law-exam-hdr{background:var(--c-surface2);border-color:var(--c-border);}
.law-subj-btn{border-radius:var(--r-md);font-weight:600;letter-spacing:0;border-color:var(--c-border);transition:background .15s,border-color .15s;}
.law-subj-btn:hover{background:var(--c-surface2);border-color:var(--c-primary-20);box-shadow:none;}
[data-theme="dark"] .law-subj-btn{background:var(--c-surface);border-color:var(--c-border);color:var(--c-text);}
[data-theme="dark"] .law-subj-btn:hover{background:var(--c-surface2);}
.law-card{border-radius:var(--r-sm);border-color:var(--c-border);transition:border-color .15s,background .15s;}
.law-card:hover{border-color:var(--c-primary);background:var(--c-primary-10);transform:none;box-shadow:none;}
[data-theme="dark"] .law-card{background:var(--c-surface);border-color:var(--c-border);}
[data-theme="dark"] .law-card:hover{border-color:var(--c-primary);background:var(--c-primary-10);}
.law-dot{background:var(--c-primary);width:7px;height:7px;}
[data-theme="dark"] .law-dot{background:var(--c-primary);}
.subj-num{background:var(--c-primary-10);color:var(--c-primary);}

/* Law detail sticky header */
.law-sticky-header,.law-detail-bar,.toc-bar,.law-search-bar{background:var(--c-surface);}
[data-theme="dark"] .law-sticky-header,[data-theme="dark"] .law-detail-bar,
[data-theme="dark"] .toc-bar,[data-theme="dark"] .law-search-bar{
  background:var(--c-surface);border-color:var(--c-border);
}
.law-detail-bar{border-bottom-color:var(--c-border);}
.toc-link{border-color:var(--c-border);}
[data-theme="dark"] .toc-link{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-muted);}
[data-theme="dark"] .toc-link:hover{border-color:var(--c-primary);color:var(--c-primary);}
[data-theme="dark"] .toc-link.active,.toc-link.active{border-color:var(--c-primary);}
.law-switch-btn{border-color:var(--c-border);border-radius:var(--r-sm);}
[data-theme="dark"] .law-switch-btn{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-muted);}

/* ─ Stats view — calm ───────────────────────────────────── */
.kpi-card{border-radius:var(--r-lg);border-color:var(--c-border);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:box-shadow .15s;}
[data-theme="dark"] .kpi-card{background:var(--c-surface);border-color:var(--c-border);}
.kpi-card::after{display:none;}
.kpi-card:hover{transform:none;box-shadow:var(--shadow-md);}
.kpi-val{font-weight:700;letter-spacing:-.02em;color:var(--c-text);}
.kpi-icon{border-radius:var(--r-md);}
.streak-card{background:var(--c-surface);border:1px solid var(--c-border);box-shadow:var(--shadow-sm);}
[data-theme="dark"] .streak-card{background:var(--c-surface);border-color:var(--c-border);}
.streak-num{background:none;-webkit-text-fill-color:var(--c-primary);color:var(--c-primary);font-size:var(--fs-44);font-weight:700;letter-spacing:-.03em;}
[data-theme="dark"] .streak-num{background:none;-webkit-text-fill-color:var(--c-primary);color:var(--c-primary);}
.panel{border-radius:var(--r-lg);border-color:var(--c-border);box-shadow:var(--shadow-sm);}
[data-theme="dark"] .panel{background:var(--c-surface);border-color:var(--c-border);}
.panel-hdr{border-bottom-color:var(--c-border);}
[data-theme="dark"] .panel-hdr{border-bottom-color:var(--c-border);}
.panel-hdr h3{font-weight:700;letter-spacing:-.01em;font-size:var(--fs-15);}
.ach.earned{background:var(--c-primary-10);border-color:var(--c-primary-20);}
[data-theme="dark"] .ach{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-muted);}
[data-theme="dark"] .ach.earned{background:var(--c-primary-10);border-color:var(--c-primary-20);}
.progress-ring-fill{stroke:var(--c-primary);}
.subj-row{border-bottom-color:var(--c-border);}
[data-theme="dark"] .subj-row{border-bottom-color:var(--c-border);}
[data-theme="dark"] .wrong-item{border-bottom-color:var(--c-border);}

/* ─ Scrollbar polish ─────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--c-muted);}
[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--c-bg);}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--c-border);}

/* ─ Modal / forms upgrade ────────────────────────────────── */
[data-theme="dark"] .modal{background:var(--c-surface);}
[data-theme="dark"] .form-inp{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-text);}
[data-theme="dark"] .google-btn{background:var(--c-surface2);border-color:var(--c-border);color:var(--c-text);}
[data-theme="dark"] .google-btn:hover{border-color:var(--c-primary);}

/* ─ Grade result upgrade ─────────────────────────────────── */
[data-theme="dark"] .grade-header{background:var(--c-surface2);border-color:var(--c-border);}
[data-theme="dark"] .grade-section{border-color:var(--c-border);}
[data-theme="dark"] .grade-law-badge{background:var(--c-surface2);border-color:var(--c-border);}
[data-theme="dark"] .essay-grade-result{border-color:var(--c-border);}
[data-theme="dark"] .explain-opts-box{border-color:var(--c-border);background:var(--c-surface);}
[data-theme="dark"] .explain-opts-hdr{background:var(--c-surface2);border-color:var(--c-border);}
[data-theme="dark"] .explain-opt-row{border-color:var(--c-border);}

/* ═══════════════════════════════════════════════════════════════
   Editorial Home v5 — paper + ink + vermilion seal
   "判決書美學"，3 位 UX 專家 mesh 後整合方案
   ══════════════════════════════════════════════════════════════ */

/* Paper texture — subtle grain via SVG noise (data URI), only on home view */
.edit-home {
  --paper-grain: url("data:image/svg+xml;utf8,<svg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0 0.03  0 0 0 0.05 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  position: relative;
  background: var(--c-paper);
}
.edit-home::before {
  content: ''; position: fixed; inset: 0;
  background-image: var(--paper-grain);
  pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  z-index: 0;
}
.edit-home > * { position: relative; z-index: 1; }

/* Continue bar — slim 28px ribbon for logged-in users above hero
   P1-4: mobile 改上下兩行（資訊一行、按鈕靠右），≥768 平板開始恢復同一行 */
.edit-continue {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 9px 22px;
  background: var(--c-paper-2);
  border-bottom: 1px solid var(--c-rule);
  font-family: var(--ff-mono);
  font-size: clamp(12px, .9vw, 14px);
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .04em;
}
.edit-continue > span { flex: 1 1 100%; min-width: 0; }
@media (min-width: 768px) {
  .edit-continue > span { flex: 1 1 auto; }
}
.edit-continue strong { color: var(--c-ink); font-weight: 700; }
.edit-continue-btn {
  font-family: var(--ff-mono);
  font-size: clamp(12px, .9vw, 14px);
  padding: 5px 12px;
  border: 1px solid var(--c-vermilion); color: var(--c-vermilion);
  border-radius: 999px; background: transparent;
  letter-spacing: .04em; cursor: pointer;
  flex-shrink: 0; align-self: flex-end;
  transition: all .18s var(--ease-editorial, cubic-bezier(.2,.8,.2,1));
}
@media (hover: hover) {
  .edit-continue-btn:hover { background: var(--c-vermilion); color: #fff; }
}

/* ═══════════════════════════════════════════════════════════════
   2026 cinematic 首頁升級：scroll progress / mesh gradient /
   floating seal / stat band / scroll-driven reveals / magnetic CTAs
   ═══════════════════════════════════════════════════════════════ */

/* @property 讓 custom property 能參與 CSS 動畫（角度、座標漸層）*/
@property --mesh-rotate { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --mesh-x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }

/* 頁首滾動進度條（朱印紅 hairline）*/
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--c-vermilion, #b23a2b), color-mix(in oklch, var(--c-vermilion, #b23a2b) 60%, transparent));
  transform: scaleX(0); transform-origin: left;
  z-index: 99;
  will-change: transform;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   2026 Premium-tier home-view cinematic background
   Layered: mesh blobs / conic accent / hairline grid / ghost glyphs
            / paper noise / radial vignette
   - position: fixed; inset: 0; z-index: -1 — viewport-spanning，
     不參與 layout，不影響任何前景 content
   - 僅 body[data-view="home"] 時顯示，切到其他 view 立刻消失
   - 全部對 prefers-reduced-motion 友善
   - 手機降配（blur 半徑減 30%、glyph 不浮動）
═══════════════════════════════════════════════════════════════ */
.home-bg {
  position: fixed; inset: 0;
  z-index: 0;             /* 在 body 之上，main 之下（main 文件序在後 → 自然蓋上）*/
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transition: opacity .5s ease;
  will-change: opacity;
}
body[data-view="home"] .home-bg { opacity: 1; }
/* main 必須在 home-bg 上方，否則 home-bg 會覆蓋住卡片（document order 決定，但
   保險起見明確指定 stacking）*/
#main { position: relative; z-index: 1; }

/* ─ Layer 1：mesh blobs（朱印紅 / 古銅金 / 青磁綠 三色低混合） */
.home-bg-mesh {
  position: absolute; inset: -10%;
  filter: blur(120px) saturate(1.08);
  opacity: .42;
  will-change: transform;
  animation: hbgFloat 36s ease-in-out infinite alternate;
}
.home-bg-mesh::before,
.home-bg-mesh::after {
  content: ''; position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.home-bg-mesh::before {
  top: -8%; left: -10%; width: 65%; height: 75%;
  background: radial-gradient(closest-side,
    color-mix(in oklch, var(--c-vermilion, #b23a2b) 55%, transparent),
    transparent 75%);
}
.home-bg-mesh::after {
  bottom: -10%; right: -12%; width: 60%; height: 70%;
  background: radial-gradient(closest-side,
    color-mix(in oklch, #d4a847 52%, transparent),
    transparent 75%);
}
[data-theme="dark"] .home-bg-mesh {
  opacity: .26; filter: blur(140px) saturate(.9);
}
[data-theme="dark"] .home-bg-mesh::before,
[data-theme="dark"] .home-bg-mesh::after { mix-blend-mode: screen; }

/* ─ Layer 2：jade orb（左下偏暖） */
.home-bg-orb {
  position: absolute; bottom: -8%; left: 28%;
  width: 55%; height: 65%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in oklch, #6b8a73 42%, transparent),
    transparent 75%);
  filter: blur(110px) saturate(1);
  opacity: .35;
  mix-blend-mode: multiply;
  will-change: transform;
  animation: hbgFloat 48s -16s ease-in-out infinite alternate;
}
[data-theme="dark"] .home-bg-orb { mix-blend-mode: screen; opacity: .2; }

/* ─ Layer 3：conic accent（旋轉緩慢、emboss 角落 highlight） */
.home-bg-conic {
  position: absolute; inset: -20%;
  background: conic-gradient(from 220deg at 70% 30%,
    transparent 0deg,
    color-mix(in oklch, var(--c-vermilion, #b23a2b) 14%, transparent) 60deg,
    transparent 130deg,
    color-mix(in oklch, #d4a847 10%, transparent) 200deg,
    transparent 270deg);
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
  animation: hbgConicSpin 90s linear infinite;
}
[data-theme="dark"] .home-bg-conic { opacity: .25; }
@keyframes hbgConicSpin {
  to { transform: rotate(360deg); }
}

/* ─ Layer 4：hairline blueprint grid（建築藍圖質感）*/
.home-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,
      color-mix(in oklch, var(--c-ink, #1a1612) 5%, transparent) 1px,
      transparent 1px),
    linear-gradient(to bottom,
      color-mix(in oklch, var(--c-ink, #1a1612) 5%, transparent) 1px,
      transparent 1px);
  background-size: 88px 88px;
  opacity: .65;
  -webkit-mask: radial-gradient(ellipse 95% 70% at 50% 28%,
    black 25%, transparent 78%);
          mask: radial-gradient(ellipse 95% 70% at 50% 28%,
    black 25%, transparent 78%);
}
[data-theme="dark"] .home-bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
}

/* ─ Layer 5：ghost-seal glyphs（巨大書法字、極淡，賦予典籍質感）*/
.home-bg-glyphs {
  position: absolute; inset: 0;
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  color: var(--c-vermilion, #b23a2b);
  pointer-events: none;
  user-select: none;
}
.home-bg-glyphs span {
  position: absolute;
  font-size: clamp(140px, 22vw, 320px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  opacity: .055;
  will-change: transform;
  animation: hbgGlyphFloat 28s ease-in-out infinite alternate;
}
.home-bg-glyphs .g1 { top:  6%; left:  3%; animation-delay:   0s; }
.home-bg-glyphs .g2 { top: 38%; right: 4%; animation-delay:  -9s; }
.home-bg-glyphs .g3 { bottom: 10%; left: 22%; animation-delay: -18s; }
[data-theme="dark"] .home-bg-glyphs span {
  color: #d4a847; opacity: .045;
}

/* ─ Layer 6：paper-grain noise（SVG turbulence inlined）*/
.home-bg-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='8'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: .42;
}
[data-theme="dark"] .home-bg-noise { mix-blend-mode: screen; opacity: .14; }

/* ─ Layer 7：radial vignette（中心聚焦、邊緣淡入背景色）*/
.home-bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 80% at 50% 30%,
    transparent 50%,
    color-mix(in oklch, var(--c-bg) 80%, transparent) 100%);
}

/* ─ Animations */
@keyframes hbgFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 4%, 0) scale(.94); }
}
@keyframes hbgGlyphFloat {
  0%   { transform: translate3d(0, 0, 0) rotate(-2deg); }
  100% { transform: translate3d(2%, -2%, 0) rotate(1deg); }
}

/* ─ Scroll-driven parallax（modern browsers，鞭撻 mesh 隨 scroll 緩慢下沉）*/
@supports (animation-timeline: scroll()) {
  body[data-view="home"] .home-bg-mesh {
    animation: hbgFloat 36s ease-in-out infinite alternate,
               hbgScrollFade linear;
    animation-timeline: auto, scroll(root);
  }
  body[data-view="home"] .home-bg-glyphs span {
    animation-timeline: scroll(root);
    animation-name: hbgGlyphScrollDrift;
    animation-duration: auto;
    animation-timing-function: linear;
  }
  @keyframes hbgScrollFade {
    to { transform: translate3d(0, 8%, 0) scale(1.05); opacity: .85; }
  }
  @keyframes hbgGlyphScrollDrift {
    to { transform: translate3d(-3%, 12%, 0) rotate(2deg); }
  }
}

/* ─ Mobile：blur 重的圖層代價高，降配 */
@media (max-width: 540px) {
  .home-bg-mesh   { filter: blur(80px) saturate(1.05); opacity: .38; }
  .home-bg-orb    { filter: blur(75px); opacity: .3; }
  .home-bg-conic  { filter: blur(60px); opacity: .35; }
  .home-bg-grid   { background-size: 64px 64px; }
  .home-bg-glyphs span { font-size: clamp(120px, 30vw, 200px); opacity: .045; }
  .home-bg-noise  { opacity: .28; }
}

/* ─ A11y：reduced-motion 全停所有動畫，保留靜態構圖 */
@media (prefers-reduced-motion: reduce) {
  .home-bg-mesh,
  .home-bg-orb,
  .home-bg-conic,
  .home-bg-glyphs span {
    animation: none !important;
  }
}

/* Cinematic mesh gradient 背景（hero 專屬，三朵 oklch blob 緩慢漂移）*/
.edit-hero-cinematic { isolation: isolate; }
.edit-hero-mesh {
  position: absolute; inset: -10% -8% -8% -8%;
  z-index: -1; pointer-events: none;
  filter: blur(80px) saturate(1.05);
  opacity: .55;
  will-change: transform;
}
[data-theme="dark"] .edit-hero-mesh { opacity: .35; filter: blur(90px) saturate(.95); }
.ehm-blob {
  position: absolute; border-radius: 50%;
  mix-blend-mode: multiply;
  animation: meshDrift 22s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
[data-theme="dark"] .ehm-blob { mix-blend-mode: screen; }
.ehm-blob-1 {
  top: -10%; left: -8%; width: 55%; height: 70%;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--c-vermilion, #b23a2b) 45%, transparent), transparent);
}
.ehm-blob-2 {
  top: 8%; right: -10%; width: 45%; height: 65%;
  background: radial-gradient(closest-side, color-mix(in oklch, #d4a847 50%, transparent), transparent);
  animation-delay: -6s; animation-duration: 26s;
}
.ehm-blob-3 {
  bottom: -10%; left: 30%; width: 50%; height: 55%;
  background: radial-gradient(closest-side, color-mix(in oklch, #6b8a73 38%, transparent), transparent);
  animation-delay: -14s; animation-duration: 30s;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 3%, 0) scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  .ehm-blob { animation: none; }
}

/* 浮動朱印 SVG（hero 右上 corner，scroll parallax）*/
.edit-hero-seal {
  position: absolute;
  top: clamp(40px, 8vw, 90px);
  right: clamp(16px, 5vw, 80px);
  width: clamp(80px, 12vw, 168px); height: auto;
  color: var(--c-vermilion, #b23a2b);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 6px 22px rgba(178, 58, 43, .22));
  animation: sealFadeIn 1.2s 1.4s cubic-bezier(.2, .8, .2, 1) forwards;
  will-change: transform, opacity;
}
@keyframes sealFadeIn {
  from { opacity: 0; transform: translate3d(20px, -10px, 0) rotate(-12deg) scale(.9); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
}
@media (max-width: 540px) {
  .edit-hero-seal { width: 80px; top: 28px; right: 18px; opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .edit-hero-seal { animation: none; opacity: 1; transform: rotate(-6deg); }
}

/* CTA shine sweep（hover 時光澤滑過）*/
.edit-cta-primary { position: relative; overflow: hidden; }
.cta-shine {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.32) 48%, transparent 66%);
  transform: translateX(-100%);
  pointer-events: none;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.edit-cta-primary:hover .cta-shine { transform: translateX(100%); }

/* Magnetic CTA：JS 設 transform，CSS 補 transition（hover 結束時平滑歸位）*/
[data-mag] { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }

/* ═══ STAT BAND：4 個大字 + 朱印紅 + count-up ═══ */
.edit-stat-band {
  position: relative;
  max-width: 1280px; margin: 24px auto 16px;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 64px);
  border-top: 1px solid var(--c-rule, rgba(0,0,0,.1));
  border-bottom: 1px solid var(--c-rule, rgba(0,0,0,.1));
  overflow: hidden;
  isolation: isolate;
}
.esb-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.esb-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .25; }
.esb-glow-1 {
  top: -30%; left: -10%; width: 50%; height: 200%;
  background: radial-gradient(closest-side, var(--c-vermilion, #b23a2b), transparent);
}
.esb-glow-2 {
  top: 20%; right: -10%; width: 40%; height: 160%;
  background: radial-gradient(closest-side, color-mix(in oklch, #d4a847 70%, transparent), transparent);
}
[data-theme="dark"] .esb-glow { opacity: .15; }

.esb-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);  /* 4 cells + 3 dividers = 7 cols */
  align-items: center;
  gap: 0;
}
@media (max-width: 768px) {
  .esb-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  .esb-divider { display: none; }
}
.esb-cell { text-align: left; padding: 0 12px; }
@media (max-width: 768px) { .esb-cell { padding: 0; } }
.esb-num {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: .95;
  color: var(--c-vermilion, #b23a2b);
  letter-spacing: -.03em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: 8px;
  /* 文字 fill 漸層 - 朱印紅深淺對比 */
  background: linear-gradient(180deg, var(--c-vermilion, #b23a2b) 0%, color-mix(in oklch, var(--c-vermilion, #b23a2b) 70%, #000) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.esb-label {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  color: var(--c-ink, #1a1a1d);
  letter-spacing: .02em;
  margin-bottom: 4px;
}
.esb-sub {
  font-family: var(--ff-mono, monospace);
  font-size: 11px;
  color: var(--c-muted, #666);
  letter-spacing: .03em;
}
.esb-divider {
  width: 1px; height: 60%;
  background: var(--c-rule, rgba(0,0,0,.12));
  justify-self: center;
}

/* ═══ Scroll-driven reveal：進場時淡入 + 上推 ═══ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* 用支援 animation-timeline 的瀏覽器（Chrome 115+）：升級為原生 scroll-driven，效能更好 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal-on-scroll {
      animation: revealScroll linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%;
      transition: none;
    }
    @keyframes revealScroll {
      from { opacity: 0; transform: translateY(40px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* Hero */
.edit-hero {
  position: relative; padding: clamp(80px, 11vw, 160px) clamp(20px, 5vw, 80px) 96px;
  max-width: 1280px; margin: 0 auto;
}
.edit-hero-eyebrow {
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 32px;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0;
  animation: fade-up .42s .12s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}
.edit-hero-eyebrow::before {
  content: '§'; color: var(--c-vermilion); font-family: var(--ff-serif-en);
  font-size: 18px; font-weight: 600;
}
.edit-hero-h1 {
  font-family: var(--ff-serif-cn);
  font-weight: 800;
  /* mobile-first：375px 時 ~32px、≥768px 時放大、≥1280px 時封頂 */
  font-size: clamp(28px, 7vw, 96px);
  line-height: 1.04; letter-spacing: -.025em;
  color: var(--c-ink);
  margin: 0 0 32px;
  position: relative;
  /* 中文不在單字中間斷行（避免「不動產 / 經紀人」「與地政 / 士」）*/
  word-break: keep-all;
  overflow-wrap: break-word;
}
.edit-hero-h1 .line {
  display: block; overflow: hidden;
}
.edit-hero-h1 .line span {
  display: inline-block;
  white-space: nowrap;   /* 「不動產經紀人」「與地政士」永遠在一行 */
  transform: translateY(110%);
  opacity: 0;
  animation: hero-mask-rise .72s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}
.edit-hero-h1 .line:nth-child(2) span { animation-delay: .14s; }
.edit-hero-h1 .vermilion { color: var(--c-vermilion); position: relative; }
.edit-hero-h1 .vermilion::after {
  content: ''; position: absolute; bottom: -6px; left: 0; right: 0; height: 3px;
  background: var(--c-vermilion); opacity: .15;
  transform: scaleX(0); transform-origin: left;
  animation: underline-grow .56s .8s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes hero-mask-rise {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes underline-grow { to { transform: scaleX(1); } }
@keyframes fade-up { from {opacity:0;transform:translateY(8px);} to {opacity:1;transform:translateY(0);} }

/* Two-exam date table under hero meta */
.edit-exam-dates {
  margin-top: 32px; max-width: 720px;
  border-top: 1px solid var(--c-rule);
  border-bottom: 1px solid var(--c-rule);
  opacity: 0;
  animation: fade-up .6s 1.2s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}
/* P2-11: mobile-first — 三欄 (name / when+d / reg)；≥768 改回 4 欄
   原本 110+130+70+1fr 在 mobile 散落不對齊 */
.exam-date-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 4px 12px; padding: 12px 0;
  font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: .03em;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-rule);
  align-items: center;
}
@media (min-width: 768px) {
  .exam-date-row { grid-template-columns: 110px 130px 70px 1fr; gap: 16px; }
}
.exam-date-row:last-child { border-bottom: none; }
.exam-date-row.primary {
  background: linear-gradient(90deg, rgba(178,58,43,.04), transparent);
  margin-left: -16px; padding-left: 16px;
  border-left: 2px solid var(--c-vermilion);
}
.exam-date-name {
  font-family: var(--ff-serif-cn); font-size: 14px; font-weight: 700;
  color: var(--c-ink); letter-spacing: 0;
}
.exam-date-row.primary .exam-date-name { color: var(--c-vermilion); }
.exam-date-when {
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.exam-date-d {
  font-weight: 700; color: var(--c-ink);
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.exam-date-row.primary .exam-date-d { color: var(--c-vermilion); }
.exam-date-reg { font-size: 11.5px; }
.exam-date-reg.open  { color: var(--c-vermilion); font-weight: 600; }
.exam-date-reg.soon  { color: var(--c-warning); font-weight: 600; }
/* mobile-first：name 跨整行、reg 跨整行；中間放 when + d-day */
.exam-date-name { grid-column: 1 / -1; }
.exam-date-reg  { grid-column: 1 / -1; padding-top: 2px; }
@media (min-width: 768px) {
  .exam-date-name { grid-column: auto; }
  .exam-date-reg  { grid-column: auto; padding-top: 0; }
}

/* Hairline + meta row */
.edit-hero-hairline {
  height: 1px; background: var(--c-rule);
  margin: 24px 0 16px;
  transform-origin: left; transform: scaleX(0);
  animation: line-sweep .56s .55s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes line-sweep { to { transform: scaleX(1); } }

/* P1-5: mobile 用 2 欄 grid，避免分隔點 · 跟項目混合斷行
   ≥768 改回 flex 一行（含分隔點） */
.edit-hero-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  font-family: var(--ff-mono); font-size: 12.5px;
  color: var(--c-muted); letter-spacing: .03em;
  opacity: 0;
  animation: fade-up .48s .85s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}
.edit-hero-meta .sep { display: none; }
.edit-hero-meta .edit-countdown { grid-column: 1 / -1; }