/* ============================================================
   TooPower「Kimi 極致美學平行版 V2」— tp3-kimi-parallel.css
   ------------------------------------------------------------
   版本：2.0.0（豐富書房層次背景版）
   方向：溫潤書房裡的精密考卷文具。可愛但不幼稚，保留手繪墨線品牌。
   V2：多層宣紙纖維、微十字格／點陣、書房光暈、冷暖區段與手繪暗紋。
   主背景：muted sage #b0c6b3 明度階梯衍生的極淺灰綠；
   主要紙面：warm off-white #f0f0e6 的明度衍生色；墨色不用純黑。
   朱砂／琥珀／草綠／靛藍保留為 TooPower 科目與小面積重點，
   朱砂類主色面積 ≤ 8–10%（主按鈕、印章、kicker 短線、得分欄）。

   【掛載順序】
     tp3 首頁／科目／評量頁：
       tp3.css → tp3-r2-shell.css（若有）→ tp3-art.css
       → 其他頁面 CSS（review-print / review-focus / review-items 等）
       → tp3-kimi-parallel.css（本檔，永遠最後）
     quiz / chars（另一套 tp- DOM）：
       tokens.css → base.css → components.css → zhuyin.css → print.css
       → practice.css → tp-tokens-v2.css → theme-v2/quiz.css|chars.css
       → tp3-shell.css → legacy-skin.css → tp3-kimi-parallel.css
       （本檔放在現有最後一支 CSS 之後）

   【紅線】
     ・不改既有 DOM id/class/data-*；不依賴 JS 才看得見內容。
     ・V2 JS 只新增 aria-hidden、pointer-events:none 的背景裝飾層；
       不攔截事件、不碰出卷資料，並可隨 destroy() 完整移除。
     ・絕不改寫、隱藏或破壞 .zy-ruby、.tpz-wrap、.tpz-cell、.tpz-col、
       .tpz-col__tone、.tpz-col__light 的直式注音定位；本檔對注音系統
       只透過 :root 的 --tpz-cell-border／--tpz-grid 權杖值調色
       （無任何定位影響），不出現任何 tpz/zy-ruby 選擇器規則。
     ・不改 SVG 原外輪廓 4–4.5px 規範；UI 外框以 1–1.5px 細線為主。
     ・裝訂孔僅首頁 Hero 一組 4 個；不全站均撒裝飾。
   ============================================================ */

/* ============================================================
   1. Primitive 層（--tpk-p-*）：OKLCH 原色，附 hex fallback
   每個色票先給 hex（舊瀏覽器），再給同義 OKLCH（新瀏覽器覆蓋）。
   ============================================================ */
:root {
  color-scheme: light; /* 全站單一淺色，不跟隨系統深色 */

  /* ---- 灰綠背景階（sage #b0c6b3 = oklch(0.805 0.036 149) 的明度階梯） ---- */
  --tpk-p-bg: #E5F0E6;          /* 頁面主背景：極淺灰綠 */
  --tpk-p-bg: oklch(0.945 0.018 149);
  --tpk-p-bg-deep: #D9EADB;     /* 深一階：頁尾、凹陷面 */
  --tpk-p-bg-deep: oklch(0.92 0.026 149);
  --tpk-p-desk: #CBDFCE;        /* 書桌面：考卷預覽 viewer 底 */
  --tpk-p-desk: oklch(0.885 0.032 149);

  /* ---- 紙面階（warm off-white #f0f0e6 = oklch(0.952 0.013 107) 衍生） ---- */
  --tpk-p-paper: #F4F4EA;       /* 主紙面：卡片、輸入框 */
  --tpk-p-paper: oklch(0.965 0.014 107);
  --tpk-p-paper-2: #F1F1E6;     /* 次紙面 ≈ 參考原色 */
  --tpk-p-paper-2: oklch(0.955 0.014 107);
  --tpk-p-paper-deep: #E9E9DD;  /* 紙上凹陷面、狀態條 */
  --tpk-p-paper-deep: oklch(0.93 0.016 107);

  /* ---- 墨階（不用純黑；帶一點書房綠的墨） ---- */
  --tpk-p-ink: #303A30;         /* 主墨色：對紙 10.7:1 */
  --tpk-p-ink: oklch(0.335 0.022 145);
  --tpk-p-ink-soft: #526152;    /* 次要文字：對紙 5.95:1 */
  --tpk-p-ink-soft: oklch(0.475 0.03 145);
  --tpk-p-ink-faint: #586858;   /* 輔助 caption：對紙 5.37:1、對紙深階 4.85:1 */
  --tpk-p-ink-faint: oklch(0.5 0.032 145);

  /* ---- 線 ---- */
  --tpk-p-line: #CDD2C3;        /* 卡片邊、分隔線 */
  --tpk-p-line: oklch(0.855 0.02 120);
  --tpk-p-line-strong: #B5BAA8; /* 輸入框邊、索引線 */
  --tpk-p-line-strong: oklch(0.78 0.026 120);
  --tpk-p-grid: #CFD7CA;        /* 製版格線、田字格輔助線 */
  --tpk-p-grid: oklch(0.87 0.02 135);

  /* ---- 朱砂（印章主色；僅圖形用色＋文字級深色） ---- */
  --tpk-p-cinnabar: #C05B4B;           /* 僅圖形、波浪線、進度點 */
  --tpk-p-cinnabar: oklch(0.592 0.133 31);
  --tpk-p-cinnabar-dark: #A94A3C;      /* 文字級／主按鈕：對紙 5.08:1、紙字對其 5.08:1 */
  --tpk-p-cinnabar-dark: oklch(0.529 0.128 30);
  --tpk-p-cinnabar-deeper: #93402F;    /* hover 加深：對紙 6.29:1 */
  --tpk-p-cinnabar-deeper: oklch(0.478 0.116 33);
  --tpk-p-cinnabar-soft: #EED3C7;      /* 淺底標記（墨字對其 8.33:1） */
  --tpk-p-cinnabar-soft: oklch(0.885 0.035 45);

  /* ---- 琥珀（進行中、提示） ---- */
  --tpk-p-amber: #C99A4B;              /* 僅圖形、邊框 */
  --tpk-p-amber: oklch(0.715 0.112 78);
  --tpk-p-amber-deep: #94661B;         /* 琥珀文字：對紙 4.54:1 */
  --tpk-p-amber-deep: oklch(0.545 0.105 74);
  --tpk-p-amber-soft: #EBDDB9;         /* 提示淺底 */
  --tpk-p-amber-soft: oklch(0.9 0.05 90);

  /* ---- 草綠／鼠尾草（成功、已複習、自然科） ---- */
  --tpk-p-sage: #7C8B6F;               /* 僅圖形、邊框 */
  --tpk-p-sage: oklch(0.617 0.045 131);
  --tpk-p-grass: #4A6B3D;              /* 草綠文字級：對紙 5.48:1 */
  --tpk-p-grass: oklch(0.49 0.08 137);
  --tpk-p-sage-deep: #5E6E52;          /* 綠字（對紙 4.96:1） */
  --tpk-p-sage-deep: oklch(0.517 0.047 132);
  --tpk-p-sage-soft: #D8E6D5;          /* 淺底 */
  --tpk-p-sage-soft: oklch(0.91 0.028 140);

  /* ---- 靛藍（連結、資訊、數學科） ---- */
  --tpk-p-indigo: #485E78;             /* 靛藍文字級：對紙 6.03:1 */
  --tpk-p-indigo: oklch(0.475 0.05 252);
  --tpk-p-indigo-soft: #D8E5EF;        /* 淺底 */
  --tpk-p-indigo-soft: oklch(0.915 0.02 240);

  /* ---- 科目輔色（文字級，對紙皆 ≥ 4.5:1） ---- */
  --tpk-p-sub-chinese: #A94A3C;  --tpk-p-sub-chinese-soft: #EED3C7; /* 國語：朱砂 */
  --tpk-p-sub-math: #485E78;     --tpk-p-sub-math-soft: #D8E5EF;    /* 數學：靛藍 */
  --tpk-p-sub-english: #75566A;  --tpk-p-sub-english-soft: #EADEE5; /* 英語：灰紫 */
  --tpk-p-sub-science: #4A6B3D;  --tpk-p-sub-science-soft: #D8E6D5; /* 自然：草綠 */
  --tpk-p-sub-social: #7E6238;   --tpk-p-sub-social-soft: #E9DFC8;  /* 社會：赭褐 */

  /* ---- 中文明確字體 stack（全系統字型，無外部請求；中文不 italic） ---- */
  --tpk-p-font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", "Source Han Sans TC", sans-serif;
  --tpk-p-font-serif: "Songti TC", "PMingLiU", "Noto Serif CJK TC", "Noto Serif TC", "Source Han Serif TC", serif;
  --tpk-p-font-kai: "BiauKaiTC-Regular", "BiauKaiTC", "BiauKai", "Kaiti TC", "STKaiti", "DFKai-SB", "TW-Kai", "LXGW WenKai TC", "Songti TC", serif;

  /* ---- 字級／行高（正文 ≥16px、行高 1.5–1.75） ---- */
  --tpk-p-fs-caption: 0.8125rem;  /* 13px：僅輔助標註，配 ink-faint */
  --tpk-p-fs-small: 0.9375rem;    /* 15px：次要內文 */
  --tpk-p-fs-body: 1.0625rem;     /* 17px：內文基準 */
  --tpk-p-fs-lead: 1.1875rem;     /* 19px */
  --tpk-p-fs-h4: 1.1875rem;
  --tpk-p-fs-h3: 1.375rem;
  --tpk-p-fs-h2: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
  --tpk-p-fs-h1: clamp(1.75rem, 1.45rem + 1.6vw, 2.25rem);
  --tpk-p-fs-display: clamp(2rem, 1.5rem + 2.6vw, 2.75rem);
  --tpk-p-lh-title: 1.3;
  --tpk-p-lh-body: 1.7;
  --tpk-p-lh-zhuyin: 1.05;        /* 直排注音逐字緊貼（僅權杖值，無定位影響） */

  /* ---- 線寬（UI 細線 1–1.5px；不動 SVG 外輪廓） ---- */
  --tpk-p-rule-hair: 1px;
  --tpk-p-rule: 1.5px;
  --tpk-p-rule-bold: 2px;

  /* ---- 圓角（文具感：收斂） ---- */
  --tpk-p-radius-s: 4px;
  --tpk-p-radius-m: 8px;
  --tpk-p-radius-l: 10px;
  --tpk-p-radius-pill: 999px;

  /* ---- 動效（互動 < 220ms） ---- */
  --tpk-p-time-fast: 140ms;
  --tpk-p-time-base: 200ms;
  --tpk-p-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- 硬偏移紙影（print-shop 材料語彙的核心） ---- */
  --tpk-p-shadow-hard-1: 2px 2px 0 rgba(48, 58, 48, 0.14);
  --tpk-p-shadow-hard-2: 3px 3px 0 rgba(48, 58, 48, 0.16);
  --tpk-p-shadow-hard-3: 5px 5px 0 rgba(48, 58, 48, 0.13);
  --tpk-p-shadow-soft: 0 1px 2px rgba(48, 58, 48, 0.07);

  --tpk-p-wrap: 70rem;
  --tpk-p-touch: 48px;
  --tpk-p-touch-kid: 56px;
}

/* ============================================================
   2. Semantic 層（--tpk-*）：頁面與元件以此為準
   ============================================================ */
:root {
  --tpk-bg: var(--tpk-p-bg, #E5F0E6);
  --tpk-bg-deep: var(--tpk-p-bg-deep, #D9EADB);
  --tpk-desk: var(--tpk-p-desk, #CBDFCE);
  --tpk-paper: var(--tpk-p-paper, #F4F4EA);
  --tpk-paper-2: var(--tpk-p-paper-2, #F1F1E6);
  --tpk-paper-deep: var(--tpk-p-paper-deep, #E9E9DD);
  --tpk-ink: var(--tpk-p-ink, #303A30);
  --tpk-ink-soft: var(--tpk-p-ink-soft, #526152);
  --tpk-ink-faint: var(--tpk-p-ink-faint, #586858);
  --tpk-line: var(--tpk-p-line, #CDD2C3);
  --tpk-line-strong: var(--tpk-p-line-strong, #B5BAA8);
  --tpk-grid: var(--tpk-p-grid, #CFD7CA);

  --tpk-primary: var(--tpk-p-cinnabar-dark, #A94A3C);
  --tpk-primary-hover: var(--tpk-p-cinnabar-deeper, #93402F);
  --tpk-primary-soft: var(--tpk-p-cinnabar-soft, #EED3C7);
  --tpk-on-primary: #FFFCF7;                  /* 主按鈕近白字：對 #A94A3C 5.63:1、對 #93402F 6.97:1 */
  --tpk-sage: var(--tpk-p-sage-deep, #5E6E52);
  --tpk-sage-soft: var(--tpk-p-sage-soft, #D8E6D5);
  --tpk-amber: var(--tpk-p-amber, #C99A4B);
  --tpk-amber-deep: var(--tpk-p-amber-deep, #94661B);
  --tpk-amber-soft: var(--tpk-p-amber-soft, #EBDDB9);
  --tpk-blue: var(--tpk-p-indigo, #485E78);
  --tpk-blue-soft: var(--tpk-p-indigo-soft, #D8E5EF);
  --tpk-link: var(--tpk-p-indigo, #485E78);
  --tpk-success: var(--tpk-p-grass, #4A6B3D);
  --tpk-warning: var(--tpk-p-amber-deep, #94661B);
  --tpk-danger: var(--tpk-p-cinnabar-dark, #A94A3C);
  --tpk-focus: var(--tpk-p-cinnabar-dark, #A94A3C);

  --tpk-font-sans: var(--tpk-p-font-sans);
  --tpk-font-serif: var(--tpk-p-font-serif);
  --tpk-font-kai: var(--tpk-p-font-kai);

  /* 製版網點／紙纖維（低對比，只鋪在 Hero 與書桌面，不全站撒） */
  --tpk-plate-dots: radial-gradient(circle, rgba(48, 58, 48, 0.055) 1px, transparent 1.3px);
  --tpk-plate-dots-size: 22px 22px;
  /* 製版格線：實線＋虛線感（雙層錯位），素描本語彙 */
  --tpk-draft-grid:
    repeating-linear-gradient(90deg, transparent 0 55px, rgba(48, 58, 48, 0.05) 55px 56px),
    repeating-linear-gradient(0deg, transparent 0 55px, rgba(48, 58, 48, 0.035) 55px 56px),
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(48, 58, 48, 0.028) 13px 14px);
}

/* ============================================================
   3. 權杖橋接：既有 --tp3-*／--tp-* 全部改指本版色票
   只改權杖「值」，不動任何既有元件規則；凡引用 var() 的舊元件
   （tp3.css、components.css、practice.css、print.css、math.css、
   zhuyin.css、legacy-skin.css、theme-v2/*）自動跟到新色。
   ============================================================ */
:root {
  /* tp3 primitive 層整批換色（語意層在 tp3.css 以 var() 引用，動態跟隨） */
  --tp3-p-paper: var(--tpk-bg);
  --tp3-p-paper-deep: var(--tpk-bg-deep);
  --tp3-p-surface: var(--tpk-paper);
  --tp3-p-ink: var(--tpk-ink);
  --tp3-p-ink-soft: var(--tpk-ink-soft);
  --tp3-p-ink-faint: var(--tpk-ink-faint);
  --tp3-p-line: var(--tpk-line);
  --tp3-p-line-strong: var(--tpk-line-strong);
  --tp3-p-grid-line: var(--tpk-grid);
  --tp3-p-cinnabar: var(--tpk-p-cinnabar, #C05B4B);
  --tp3-p-cinnabar-dark: var(--tpk-primary);
  --tp3-p-cinnabar-deeper: var(--tpk-primary-hover);
  --tp3-p-cinnabar-soft: var(--tpk-primary-soft);
  --tp3-p-sage: var(--tpk-p-sage, #7C8B6F);
  --tp3-p-sage-deep: var(--tpk-sage);
  --tp3-p-sage-soft: var(--tpk-sage-soft);
  --tp3-p-amber: var(--tpk-amber);
  --tp3-p-amber-deep: var(--tpk-amber-deep);
  --tp3-p-amber-soft: var(--tpk-amber-soft);
  --tp3-p-blue: var(--tpk-blue);
  --tp3-p-blue-soft: var(--tpk-blue-soft);
  --tp3-p-sub-chinese: var(--tpk-p-sub-chinese, #A94A3C);
  --tp3-p-sub-chinese-soft: var(--tpk-p-sub-chinese-soft, #EED3C7);
  --tp3-p-sub-math: var(--tpk-p-sub-math, #485E78);
  --tp3-p-sub-math-soft: var(--tpk-p-sub-math-soft, #D8E5EF);
  --tp3-p-sub-english: var(--tpk-p-sub-english, #75566A);
  --tp3-p-sub-english-soft: var(--tpk-p-sub-english-soft, #EADEE5);
  --tp3-p-sub-science: var(--tpk-p-sub-science, #4A6B3D);
  --tp3-p-sub-science-soft: var(--tpk-p-sub-science-soft, #D8E6D5);
  --tp3-p-sub-social: var(--tpk-p-sub-social, #7E6238);
  --tp3-p-sub-social-soft: var(--tpk-p-sub-social-soft, #E9DFC8);
  --tp3-p-font-sans: var(--tpk-font-sans);
  --tp3-p-font-serif: var(--tpk-font-serif);
  --tp3-p-font-kai: var(--tpk-font-kai);
  --tp3-p-lh-body: var(--tpk-p-lh-body);        /* 1.7，落在 1.5–1.75 */
  --tp3-p-time-fast: var(--tpk-p-time-fast);
  --tp3-p-time-base: var(--tpk-p-time-base);    /* 200ms < 220ms */
  --tp3-p-shadow-1: var(--tpk-p-shadow-soft);
  --tp3-p-shadow-2: var(--tpk-p-shadow-hard-1);

  /* tp3 語意層需個別調整者 */
  --tp3-on-primary: var(--tpk-on-primary);
  --tp3-link: var(--tpk-link);
  --tp3-success: var(--tpk-success);
  --tp3-warning: var(--tpk-warning);
  --tp3-focus: var(--tpk-focus);
  --tp3-surface-warm: var(--tpk-paper-deep);    /* review 頁 zh-exam-banner 使用 */
  --tp3-header-bg: var(--tpk-paper);
  --tp3-footer-bg: var(--tpk-bg-deep);

  /* v1／legacy 權杖（quiz、chars 的 tp- DOM 與舊元件） */
  --tp-paper: var(--tpk-bg);
  --tp-paper-deep: var(--tpk-paper-deep);
  --tp-surface: var(--tpk-paper);
  --tp-surface-white: var(--tpk-paper);
  --tp-ink: var(--tpk-ink);
  --tp-ink-soft: var(--tpk-ink-soft);
  --tp-ink-faint: var(--tpk-ink-faint);
  --tp-ink-blue: var(--tpk-blue);
  --tp-line: var(--tpk-line);
  --tp-line-c: var(--tpk-line);
  --tp-line-strong: var(--tpk-line-strong);
  --tp-grid-line: var(--tpk-grid);
  --tp-cinnabar: var(--tpk-p-cinnabar, #C05B4B);
  --tp-cinnabar-dark: var(--tpk-primary);
  --tp-cinnabar-soft: var(--tpk-primary-soft);
  --tp-sage: var(--tpk-p-sage, #7C8B6F);
  --tp-sage-deep: var(--tpk-sage);
  --tp-sage-soft: var(--tpk-sage-soft);
  --tp-amber: var(--tpk-amber);
  --tp-amber-deep: var(--tpk-amber-deep);
  --tp-amber-soft: var(--tpk-amber-soft);
  --tp-success: var(--tpk-success);
  --tp-success-soft: var(--tpk-sage-soft);
  --tp-warning: var(--tpk-warning);
  --tp-warning-soft: var(--tpk-amber-soft);
  --tp-error: var(--tpk-danger);
  --tp-error-soft: var(--tpk-primary-soft);
  --tp-info: var(--tpk-blue);
  --tp-focus-ring: var(--tpk-focus);
  --tp-focus-ring-soft: rgba(169, 74, 60, 0.3);
  --tp-font-sans: var(--tpk-font-sans);
  --tp-font-serif: var(--tpk-font-serif);
  --tp-font-kai: var(--tpk-font-kai);
  --tp-paper-warm: var(--tpk-paper-deep);       /* quiz 面板內嵌區塊使用 */
  --tp-subject-zh: var(--tpk-p-sub-chinese, #A94A3C);
  --tp-subject-zh-soft: var(--tpk-p-sub-chinese-soft, #EED3C7);
  --tp-subject-math: var(--tpk-p-sub-math, #485E78);
  --tp-subject-math-soft: var(--tpk-p-sub-math-soft, #D8E5EF);
  --tp-subject-life: var(--tpk-p-sage, #7C8B6F);
  --tp-subject-life-soft: var(--tpk-sage-soft);
  --tp-subject-en: var(--tpk-p-sub-english, #75566A);
  --tp-subject-en-soft: var(--tpk-p-sub-english-soft, #EADEE5);
  --tp-subject-sci: var(--tpk-p-sub-science, #4A6B3D);
  --tp-subject-sci-soft: var(--tpk-p-sub-science-soft, #D8E6D5);
  --tp-subject-soc: var(--tpk-p-sub-social, #7E6238);
  --tp-subject-soc-soft: var(--tpk-p-sub-social-soft, #E9DFC8);

  /* v2 語意層（quiz.css／chars.css 的 data-tp-theme="v2" 頁） */
  --tp-bg: var(--tpk-bg);
  --tp-bg-deep: var(--tpk-bg-deep);
  --tp-surface-2: var(--tpk-paper-2);
  --tp-text: var(--tpk-ink);
  --tp-text-soft: var(--tpk-ink-soft);
  --tp-text-faint: var(--tpk-ink-faint);
  --tp-accent: var(--tpk-primary);
  --tp-accent-text: var(--tpk-primary);
  --tp-accent-strong: var(--tpk-primary-hover);
  --tp-accent-on: var(--tpk-on-primary);
  --tp-accent-soft: var(--tpk-primary-soft);
  --tp-accent-softer: var(--tpk-paper-deep);

  /* 注音字格系統：只換權杖「值」（紙色／邊色），不碰任何 tpz 定位規則 */
  --tpz-cell-border: var(--tpk-ink-soft);
  --tpz-grid: var(--tpk-grid);
}

/* ============================================================
   4. Component 層（--tpk-<元件>-*）：本檔元件規則只讀這層
   ============================================================ */
:root {
  --tpk-btn-bg: var(--tpk-paper);
  --tpk-btn-text: var(--tpk-ink);
  --tpk-btn-border: var(--tpk-ink-soft);
  --tpk-btn-radius: var(--tpk-p-radius-m);
  --tpk-btn-shadow: var(--tpk-p-shadow-hard-1);

  --tpk-card-bg: var(--tpk-paper);
  --tpk-card-border: var(--tpk-line);

  --tpk-sheet-bg: var(--tpk-paper);
  --tpk-sheet-ink: #242A22;                     /* 卷面用墨（接近 1F1B14 的綠墨版） */
  --tpk-sheet-frame: var(--tpk-line-strong);
  --tpk-sheet-frame-inner: var(--tpk-line);

  --tpk-hole-ring: var(--tpk-ink-soft);         /* 裝訂孔墨圈 */
  --tpk-hole-core: var(--tpk-bg);               /* 打孔後露出的桌面色 */
  --tpk-seal-ink: var(--tpk-p-cinnabar-dark, #A94A3C); /* 印章朱文 */
}

/* ============================================================
   5. 基底：頁面背景、選取、焦點
   ============================================================ */
html {
  background: var(--tpk-bg);
}

body {
  background-color: var(--tpk-bg);
  background-image: none; /* 舊 base.css 的暖色粒紋整站移除，改由灰綠淨底 */
  color: var(--tpk-ink);
  font-family: var(--tpk-font-sans);
  line-height: var(--tpk-p-lh-body);
}

::selection {
  background: var(--tpk-primary-soft);
  color: var(--tpk-ink);
}

/* 鍵盤焦點：明確可見（朱砂聚焦環，對背景 ≥4.8:1） */
:focus-visible {
  outline: 3px solid var(--tpk-focus);
  outline-offset: 2px;
  border-radius: var(--tpk-p-radius-s);
}
.tp3-input:focus-visible, .tp3-select:focus-visible, textarea:focus-visible,
.tp-input:focus-visible, .tp-select:focus-visible, .tp-textarea:focus-visible {
  outline: 3px solid var(--tpk-focus);
  outline-offset: 0;
  border-color: var(--tpk-focus);
}

a { color: var(--tpk-link); }
a:hover { color: var(--tpk-primary); }

/* 中文不 italic：任何元素的斜體一律回正（保護 CJK 字形） */
em, i, cite, dfn, var { font-style: normal; }

/* ============================================================
   6. 導覽：頁首、品牌、年級列、選單鈕、回首頁膠囊
   ============================================================ */
.tp3-header {
  background: var(--tpk-paper);
  border-bottom: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
  box-shadow: inset 0 -3px 0 var(--tpk-paper-deep); /* 裝訂邊的內側壓線 */
}
.tp3-brand__name { color: var(--tpk-ink); }
.tp3-brand:hover .tp3-brand__name { color: var(--tpk-primary); }

.tp3-header-links a { color: var(--tpk-ink-soft); }
.tp3-header-links a:hover { color: var(--tpk-primary); background: var(--tpk-paper-deep); }
.tp3-header-links a[aria-current="page"] {
  color: var(--tpk-primary);
  box-shadow: inset 0 -2px 0 var(--tpk-primary);
}

.tp3-grade-nav { border-top-color: var(--tpk-line); }
.tp3-grade-nav a:hover { background: var(--tpk-paper-deep); color: var(--tpk-ink); }
.tp3-grade-nav a[aria-current="page"] {
  background: var(--tpk-paper-deep);
  color: var(--tpk-ink);
  box-shadow: inset 0 0 0 var(--tpk-p-rule) var(--tpk-ink-soft);
}

.tp3-menu-toggle {
  background: var(--tpk-paper);
  border-color: var(--tpk-line-strong);
  color: var(--tpk-ink);
  box-shadow: var(--tpk-p-shadow-hard-1);
}
.tp3-menu-toggle:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(48, 58, 48, 0.14); }

.tp3-home-pill {
  background: var(--tpk-paper);
  border-color: var(--tpk-line-strong);
  color: var(--tpk-ink);
  box-shadow: var(--tpk-p-shadow-hard-2);
}
.tp3-home-pill:hover { color: var(--tpk-primary); }

/* 舊頁（quiz/chars）頁首後援：JS 未接管時仍是同一套紙感 */
.tp-site-header, .tp-header {
  background: var(--tpk-paper);
  border-bottom: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
}
.tp-site-header .tp-brand__name, .tp-header .tp-brand__name { color: var(--tpk-ink); }
.tp3-legacy-tools { background: var(--tpk-bg); }

/* ============================================================
   7. 首頁 Hero 簽名細節（僅此一處，不全站撒裝飾）
   ・左緣一組 4 個裝訂孔（打孔露出桌面灰綠的墨圈）
   ・低對比製版網點＋製版格線（實線＋虛線感雙層）
   ・右上朱文印章（content 為裝飾字，aria 噪音極低）
   ・手繪插畫裝裱成「標本卡」：雙細框＋硬偏移紙影
   ・桌面非對稱雙欄，並壓縮垂直節奏讓主考卷卡上移
   ============================================================ */
.tp3-home-hero {
  position: relative;
  padding: 18px 28px 18px 42px;               /* 裝訂邊距：左留 42px 給裝訂孔與呼吸空間 */
  border: 1px solid rgba(181, 186, 168, 0.74);
  border-radius: var(--tpk-p-radius-m);
  background-image: var(--tpk-plate-dots), var(--tpk-draft-grid);
  background-size: var(--tpk-plate-dots-size), auto;
  background-position: 0 0, 0 0;
}

/* 一組 4 個裝訂孔：高度固定 = 4 倍孔距，恰好 4 孔 */
.tp3-home-hero::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 160px;                              /* 4 × 40px */
  pointer-events: none;
  background-image:
    radial-gradient(circle 5.5px at 7px 20px, transparent 4.4px, var(--tpk-hole-ring) 4.6px, var(--tpk-hole-ring) 5.4px, transparent 5.6px),
    radial-gradient(circle 4.2px at 7px 20px, var(--tpk-hole-core) 3.6px, rgba(48, 58, 48, 0.12) 3.9px, transparent 4.3px);
  background-size: 14px 40px;
  background-repeat: repeat-y;
}
@media (min-width: 768px) {
  .tp3-home-hero::before {
    height: 184px;                            /* 4 × 46px */
    background-image:
      radial-gradient(circle 5.5px at 7px 23px, transparent 4.4px, var(--tpk-hole-ring) 4.6px, var(--tpk-hole-ring) 5.4px, transparent 5.6px),
      radial-gradient(circle 4.2px at 7px 23px, var(--tpk-hole-core) 3.6px, rgba(48, 58, 48, 0.12) 3.9px, transparent 4.3px);
    background-size: 14px 46px;
  }
}

/* 朱文印章：雙圈圓印，微旋轉，低調落在插畫卡角上 */
.tp3-home-hero::after {
  content: "評量";
  position: absolute;
  right: 2px;
  top: -8px;
  z-index: 2;
  display: none;                              /* 手機空間不足時收起 */
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: var(--tpk-p-rule) solid var(--tpk-seal-ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2.5px var(--tpk-paper), inset 0 0 0 4px var(--tpk-seal-ink);
  background: var(--tpk-paper);               /* fallback：不支援 color-mix 時為紙面 */
  background: color-mix(in srgb, var(--tpk-paper) 88%, transparent);
  color: var(--tpk-seal-ink);
  font-family: var(--tpk-font-kai);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-align: center;
  transform: rotate(-7deg);
  opacity: 0.88;
  pointer-events: none;
}
@media (min-width: 640px) {
  .tp3-home-hero::after { display: inline-flex; }
}

/* 手繪插畫裝裱：紙面＋雙細框＋硬偏移紙影（標本卡） */
.tp3-home-art {
  background: var(--tpk-paper);
  border: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
  outline: var(--tpk-p-rule-hair) solid var(--tpk-line);
  outline-offset: -6px;
  border-radius: var(--tpk-p-radius-s);
  box-shadow: var(--tpk-p-shadow-hard-2);
  padding: 6px;
}
.tp3-art-host { color: var(--tpk-ink); }      /* SVG 線稿若用 currentColor 即為墨色；不動原 4–4.5px 外輪廓 */

/* 非對稱雙欄：主文案欄明顯重於插畫欄 */
@media (min-width: 1024px) {
  .tp3-home-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.62fr);
    gap: 32px;
  }
}

/* 垂直壓縮：讓第一張主考卷卡盡量進入上半個視窗（1440px 桌面原版主 CTA y≈1450）。
   只壓間距與外距，不動字級行高，可讀性不變。 */
body[data-page="home"] .tp3-main { padding-block: 12px 40px; }
body[data-page="home"] .tp3-section { margin-block: 20px; }
body[data-page="home"] .tp3-home-hero { margin-block-start: 4px; }
@media (min-width: 768px) {
  body[data-page="home"] .tp3-section { margin-block: 28px; }
  body[data-page="home"] .tp3-home-hero .tp3-title { margin-block-end: 8px; }
  body[data-page="home"] .tp3-home-hero .tp3-lead { margin-block-end: 8px; }
}
@media (min-width: 1024px) {
  body[data-page="home"] .tp3-home-hero .tp3-art--hero { max-height: 150px; }
}

/* ============================================================
   8. 第一步 Hub：雙細框＋硬偏移紙影的「設定文具盒」＋hub chips
   ============================================================ */
.tp3-hub-bar {
  position: relative;
  background: var(--tpk-paper);
  border: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
  outline: var(--tpk-p-rule-hair) solid var(--tpk-line);
  outline-offset: -7px;                       /* 內框細線：雙框 */
  border-radius: var(--tpk-p-radius-m);
  padding: 14px 18px;
  box-shadow: var(--tpk-p-shadow-hard-3);
}
.tp3-hub-bar__row { margin-top: 8px; }
.tp3-hub-bar__label { color: var(--tpk-ink); min-width: 76px; }

.tp3-hub-chips { gap: 8px; }
.tp3-hub-chip {
  min-height: 44px;                           /* 觸控目標 ≥44px */
  padding: 6px 16px;
  border: var(--tpk-p-rule) solid var(--tpk-line-strong);
  border-radius: var(--tpk-p-radius-pill);
  background: var(--tpk-paper);
  color: var(--tpk-ink);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              border-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              box-shadow var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              transform var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
.tp3-hub-chip:hover {
  border-color: var(--tpk-ink);
  background: var(--tpk-paper-deep);
}
.tp3-hub-chip:active { transform: translate(1px, 1px); }
/* 選取態用墨底（非朱砂），控制朱砂面積 ≤ 8–10% */
.tp3-hub-chip[aria-pressed="true"] {
  background: var(--tpk-ink);
  border-color: var(--tpk-ink);
  color: var(--tpk-paper);
  box-shadow: var(--tpk-p-shadow-hard-1);
}
.tp3-hub-chip:focus-visible {
  outline: 3px solid var(--tpk-focus);
  outline-offset: 2px;
}

.tp3-hub-status {
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--tpk-paper-deep);
  border: var(--tpk-p-rule-hair) solid var(--tpk-line);
  border-radius: var(--tpk-p-radius-s);
  color: var(--tpk-ink-soft);
}

/* ============================================================
   9. 主副考卷卡：明確尺度層級
   主卡（--featured）：雙細框＋硬偏移大紙影＋放大標題與內距
   次卡：單細框＋小硬影＋較緊內距
   ============================================================ */
.tp3-exam-grid { gap: 16px; }
@media (min-width: 1024px) {
  /* 非對稱欄比：兩張主考卷卡重於第三張副卡 */
  #exam-center .tp3-exam-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.18fr) minmax(0, 0.86fr); }
  #daily-practice .tp3-exam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tp3-exam-card {
  background: var(--tpk-paper);
  border: var(--tpk-p-rule-hair) solid var(--tpk-line);
  border-radius: var(--tpk-p-radius-m);
  padding: 16px 18px;
  box-shadow: var(--tpk-p-shadow-hard-1);
  transition: box-shadow var(--tpk-p-time-base) var(--tpk-p-ease-out),
              transform var(--tpk-p-time-base) var(--tpk-p-ease-out),
              border-color var(--tpk-p-time-base) var(--tpk-p-ease-out);
}
.tp3-exam-card:hover {
  border-color: var(--tpk-line-strong);
  box-shadow: var(--tpk-p-shadow-hard-2);
  transform: translate(-1px, -1px);
}

.tp3-exam-card--featured {
  background: var(--tpk-paper);
  border: var(--tpk-p-rule) solid var(--tpk-line-strong);
  outline: var(--tpk-p-rule-hair) solid var(--tpk-line);
  outline-offset: -8px;                       /* 考卷雙細框 */
  border-radius: var(--tpk-p-radius-m);
  padding: 22px 24px;                         /* 主卡尺度大於次卡 */
  box-shadow: var(--tpk-p-shadow-hard-3);
}
.tp3-exam-card--featured:hover {
  border-color: var(--tpk-ink-soft);
  box-shadow: 6px 6px 0 rgba(48, 58, 48, 0.15);
}
.tp3-exam-card--featured .tp3-exam-card__title { font-size: 1.3rem; }
.tp3-exam-card--featured .tp3-exam-card__badge { margin-bottom: 8px; }

.tp3-exam-card__badge {
  background: var(--tpk-primary-soft);
  color: var(--tpk-primary-hover);            /* 對 soft 底 ≥5.4:1 */
  border: var(--tpk-p-rule-hair) solid var(--tpk-line);
}
.tp3-exam-card__title {
  color: var(--tpk-ink);
  font-family: var(--tpk-font-serif);
  line-height: var(--tpk-p-lh-title);
}
.tp3-exam-card__desc { color: var(--tpk-ink-soft); line-height: 1.65; }
.tp3-exam-card__actions { gap: 8px; }

/* 主按鈕：深朱砂底＋近白字（#A94A3C 配 #FFFCF7 ≈ 5.6:1），hover 更深（6.97:1）。
   硬偏移紙影是文具語彙的一部分；互動 140–200ms。 */
.tp3-btn-main, .tp3-btn.tp3-btn--primary {
  background: var(--tpk-primary);
  border: var(--tpk-p-rule) solid var(--tpk-primary);
  color: var(--tpk-on-primary);
  box-shadow: var(--tpk-p-shadow-hard-1);
  transition: background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              border-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              box-shadow var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              transform var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
.tp3-btn-main { min-height: 48px; border-radius: var(--tpk-p-radius-m); }
.tp3-btn-main:hover, .tp3-btn.tp3-btn--primary:hover {
  background: var(--tpk-primary-hover);
  border-color: var(--tpk-primary-hover);
  color: var(--tpk-on-primary);
  box-shadow: var(--tpk-p-shadow-hard-2);
  transform: translate(-1px, -1px);
}
.tp3-btn-main:active, .tp3-btn.tp3-btn--primary:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 rgba(48, 58, 48, 0);
}
.tp3-btn-main:focus-visible { outline: 3px solid var(--tpk-focus); outline-offset: 2px; }

/* 次按鈕：紙面墨線 */
.tp3-btn-sub {
  min-height: 44px;
  background: var(--tpk-paper-2);
  border: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
  border-radius: var(--tpk-p-radius-m);
  color: var(--tpk-ink);
  transition: background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              border-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              color var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
.tp3-btn-sub:hover {
  background: var(--tpk-sage-soft);
  border-color: var(--tpk-sage);
  color: var(--tpk-ink);
}
.tp3-btn-sub:focus-visible { outline: 3px solid var(--tpk-focus); outline-offset: 2px; }

/* ============================================================
   10. tp3 按鈕體系（次級／幽靈／kid 尺寸）與一般卡片
   ============================================================ */
.tp3-btn {
  box-shadow: none;
  transition: background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              border-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              box-shadow var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              transform var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
.tp3-btn:hover { border-color: var(--tpk-ink); }
.tp3-btn:active { transform: translate(1px, 1px); }
.tp3-btn--secondary { background: var(--tpk-paper); }
.tp3-btn--secondary:hover { background: var(--tpk-paper-deep); color: var(--tpk-ink); }
.tp3-btn--ghost { color: var(--tpk-blue); }
.tp3-btn--ghost:hover { color: var(--tpk-primary); background: transparent; }
.tp3-btn[disabled], .tp3-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 一般卡片：紙面細線；可點卡 hover 微微抬起 */
.tp3-card {
  background: var(--tpk-card-bg);
  border: var(--tpk-p-rule-hair) solid var(--tpk-card-border);
  border-radius: var(--tpk-p-radius-l);
  box-shadow: var(--tpk-p-shadow-soft);
}
a.tp3-card:hover {
  border-color: var(--tpk-line-strong);
  box-shadow: var(--tpk-p-shadow-hard-1);
}

.tp3-card-icon { background: var(--tpk-paper-deep); color: var(--tpk-ink-soft); }

/* choice：整卡可點選項（年級、科目、方向） */
.tp3-choice {
  background: var(--tpk-card-bg);
  border: var(--tpk-p-rule) solid var(--tpk-line);
  border-radius: var(--tpk-p-radius-l);
  transition: border-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              box-shadow var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              transform var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
a.tp3-choice:hover {
  border-color: var(--tpk-ink-soft);
  box-shadow: var(--tpk-p-shadow-hard-1);
  transform: translate(-1px, -1px);
}
.tp3-choice[aria-current="page"], .tp3-choice.is-active,
#grade-grid .tp3-choice[data-current="true"] {
  border-color: var(--tpk-ink);
  box-shadow: inset 0 0 0 1px var(--tpk-ink);
}

/* ============================================================
   11. row／list：講義索引線清單（第三區集中收斂）
   ============================================================ */
.tp3-list { min-width: 0; max-width: 100%; }
.tp3-row { border-top-color: var(--tpk-line-strong); }
.tp3-row:last-child { border-bottom-color: var(--tpk-line-strong); }
.tp3-row-link {
  transition: background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
a.tp3-row-link:hover { background: var(--tpk-bg-deep); }
a.tp3-row-link:hover .tp3-row-title { color: var(--tpk-primary); }
.tp3-row-desc { color: var(--tpk-ink-soft); }

.tp3-back { color: var(--tpk-ink-soft); }
.tp3-back:hover { color: var(--tpk-primary); }

/* 橫線索引標題 */
.tp3-title--index::after, .tp3-title--group::after { border-top-color: var(--tpk-line-strong); }
.tp3-kicker { color: var(--tpk-primary); }
.tp3-kicker::before { border-top-color: var(--tpk-primary); }  /* 朱砂短線，面積極小 */
.tp3-lead { color: var(--tpk-ink-soft); }

/* ============================================================
   12. tp3 表單：field／input／select／check／chip
   ============================================================ */
.tp3-input, .tp3-select, textarea.tp3-input {
  background: var(--tpk-paper);
  border: var(--tpk-p-rule) solid var(--tpk-line-strong);
  border-radius: var(--tpk-p-radius-m);
  color: var(--tpk-ink);
}
.tp3-input:hover, .tp3-select:hover { border-color: var(--tpk-ink-soft); }
.tp3-input[disabled], .tp3-select[disabled] { opacity: 0.55; cursor: not-allowed; }

.tp3-check {
  background: var(--tpk-paper);
  border: var(--tpk-p-rule) solid var(--tpk-line);
  border-radius: var(--tpk-p-radius-m);
}
.tp3-check:hover { border-color: var(--tpk-ink-soft); }
.tp3-check input { accent-color: var(--tpk-primary); }
.tp3-check:has(input:checked) {
  border-color: var(--tpk-primary);
  background: var(--tpk-primary-soft);
}

.tp3-chip {
  background: var(--tpk-paper);
  border: var(--tpk-p-rule) solid var(--tpk-line-strong);
  color: var(--tpk-ink);
  transition: background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              border-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              color var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
.tp3-chip:hover { border-color: var(--tpk-ink); }
.tp3-chip[aria-pressed="true"], .tp3-chip[aria-checked="true"], .tp3-chip.is-active {
  background: var(--tpk-ink);
  border-color: var(--tpk-ink);
  color: var(--tpk-paper);
}
.tp3-chip[disabled] { opacity: 0.55; cursor: not-allowed; }

/* 提示條、步驟、進度、空狀態、徽章 */
.tp3-notice {
  border-color: var(--tpk-amber);
  border-left-color: var(--tpk-amber);
  background: var(--tpk-amber-soft);
  color: var(--tpk-ink);
}
.tp3-notice--info { border-color: var(--tpk-blue); background: var(--tpk-blue-soft); }
.tp3-notice--success { border-color: var(--tpk-sage); background: var(--tpk-sage-soft); }

.tp3-steps > li::before {
  border-color: var(--tpk-primary);
  color: var(--tpk-primary);
  background: var(--tpk-paper);
}

.tp3-progress { border-color: var(--tpk-line-strong); background: var(--tpk-paper-deep); }
.tp3-progress::-webkit-progress-bar { background: var(--tpk-paper-deep); }
.tp3-progress::-webkit-progress-value { background: var(--tpk-sage); }
.tp3-progress::-moz-progress-bar { background: var(--tpk-sage); }

.tp3-empty {
  border: var(--tpk-p-rule-hair) dashed var(--tpk-line-strong);
  background: var(--tpk-paper);
}
.tp3-empty svg, .tp3-empty [data-tp-icon] svg { color: var(--tpk-ink-faint); }

.tp3-badge {
  border-color: var(--tpk-line-strong);
  background: var(--tpk-paper-deep);
  color: var(--tpk-ink-soft);
}
.tp3-badge--sage { background: var(--tpk-sage-soft); border-color: var(--tpk-sage); color: var(--tpk-sage); }
.tp3-badge--amber { background: var(--tpk-amber-soft); border-color: var(--tpk-amber); color: var(--tpk-amber-deep); }
.tp3-badge--blue { background: var(--tpk-blue-soft); border-color: var(--tpk-blue); color: var(--tpk-blue); }

/* 入口卡與 404 */
.tp3-portal__title { color: var(--tpk-ink); }
.tp3-404 svg { color: var(--tpk-ink-faint); }

/* ============================================================
   13. 頁尾（兩套 DOM 都吃）
   ============================================================ */
.tp3-footer {
  background: var(--tpk-bg-deep);
  border-top: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
  box-shadow: inset 0 3px 0 var(--tpk-bg);    /* 雙線裝訂邊 */
}
.tp3-footer p, .tp3-footer .tp3-footer__sign { color: var(--tpk-ink-soft); }
.tp3-footer__report-btn { color: var(--tpk-link); }
.tp3-footer__report-btn:hover { color: var(--tpk-primary); }

.tp-site-footer, .tp-footer {
  background: var(--tpk-bg-deep);
  border-top: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
  color: var(--tpk-ink-soft);
}
.tp-site-footer a { color: var(--tpk-ink-soft); }
.tp-site-footer a:hover { color: var(--tpk-primary); }
.tp-site-footer__links h4 { color: var(--tpk-ink); }
.tp-site-footer__note { color: var(--tpk-ink-soft); }

/* ============================================================
   14. quiz／chars（tp- DOM）：工作區、設定面板、chips、
       tabs、dialog、toast、badge、way 導覽
   ============================================================ */
.tp-workspace { min-width: 0; }
.tp-workspace > * { min-width: 0; }

/* 設定面板＝出卷文具盒：雙細框＋硬偏移紙影 */
.tp-panel {
  background: var(--tpk-paper);
  border: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
  outline: var(--tpk-p-rule-hair) solid var(--tpk-line);
  outline-offset: -7px;
  border-radius: var(--tpk-p-radius-m);
  box-shadow: var(--tpk-p-shadow-hard-3);
}
.tp-panel__title { color: var(--tpk-ink); }
.tp-panel__section { border-top-color: var(--tpk-line); }

.tp-field__label { color: var(--tpk-ink); }
.tp-field__hint { color: var(--tpk-ink-faint); }
.tp-field__error { color: var(--tpk-danger); }

.tp-input, .tp-select, .tp-textarea {
  background: var(--tpk-paper);
  border-color: var(--tpk-line-strong);
  color: var(--tpk-ink);
  border-radius: var(--tpk-p-radius-m);
}
.tp-input:focus, .tp-select:focus, .tp-textarea:focus {
  border-color: var(--tpk-focus);
  box-shadow: 0 0 0 3px var(--tp-focus-ring-soft);
}

/* 舊 chip：紙面膠囊；選取態墨底（朱砂留給主按鈕） */
.tp-chip {
  background: var(--tpk-paper);
  border-color: var(--tpk-line-strong);
  color: var(--tpk-ink-soft);
  transition: background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              border-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              color var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
.tp-chip:hover { border-color: var(--tpk-ink); color: var(--tpk-ink); }
.tp-chip[aria-pressed="true"], .tp-chip--active {
  background: var(--tpk-ink);
  border-color: var(--tpk-ink);
  color: var(--tpk-paper);
  font-weight: 700;
}
.tp-chip--sage[aria-pressed="true"], .tp-chip--sage.tp-chip--active {
  background: var(--tpk-sage-soft);
  border-color: var(--tpk-sage);
  color: var(--tpk-sage);
}

/* 七大題勾選區（.exam-sec-box）：390px 實機溢出修復。
   只對此介面區塊設 min-width:0／換行／小螢幕內距；
   不含任何注音定位元素，不影響 tpz 系統。 */
#exam-sec-box, .exam-sec-box { min-width: 0; max-width: 100%; }
#exam-sec-box > *, .exam-sec-box > * { min-width: 0; }
#exam-sec-box label, .exam-sec-box label {
  min-width: 0;
  max-width: 100%;
  align-items: flex-start;        /* 換行時 checkbox 對齊首行 */
  line-height: 1.5;
}
#exam-sec-box label input, .exam-sec-box label input { flex: none; margin-top: 3px; }
#exam-sec-box label span, .exam-sec-box label span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;        /* 長題名可斷行，不撐出 390px 面板 */
  white-space: normal;
}
@media (max-width: 420px) {
  #exam-sec-box, .exam-sec-box { padding: 10px !important; } /* 收斂內距換取欄寬；僅本區塊 */
  .tp-panel { padding-inline: 12px; }
}

/* segmented／switch／range（token 已換色，補互動細節） */
.tp-segmented { background: var(--tpk-paper-deep); border-color: var(--tpk-line); }
.tp-segmented input:checked + span {
  background: var(--tpk-paper);
  color: var(--tpk-primary);
  box-shadow: var(--tpk-p-shadow-hard-1);
}
.tp-switch__track { background: var(--tpk-paper-deep); border-color: var(--tpk-line-strong); }
.tp-switch input:checked ~ .tp-switch__track { background: var(--tpk-sage); border-color: var(--tpk-sage); }

/* tabs */
.tp-tab { color: var(--tpk-ink-soft); }
.tp-tab:hover { color: var(--tpk-ink); }
.tp-tab[aria-selected="true"] { color: var(--tpk-primary); }
.tp-tab[aria-selected="true"]::after { background: var(--tpk-primary); }

/* 字卡 dialog 與 toast */
.tp-dialog, dialog.tpr-dialog {
  background: var(--tpk-paper);
  color: var(--tpk-ink);
  border: var(--tpk-p-rule) solid var(--tpk-line-strong);
  border-radius: var(--tpk-p-radius-l);
  box-shadow: 6px 6px 0 rgba(48, 58, 48, 0.18);
}
.tp-dialog::backdrop, dialog.tpr-dialog::backdrop { background: rgba(36, 42, 34, 0.4); }
.tp-dialog__close { color: var(--tpk-ink-soft); }
.tp-dialog__close:hover { color: var(--tpk-primary); }

.tp-badge { background: var(--tpk-paper-deep); color: var(--tpk-ink-soft); border-color: var(--tpk-line-strong); }
.tp-badge--cinnabar { background: var(--tpk-primary-soft); color: var(--tpk-primary); }
.tp-badge--sage { background: var(--tpk-sage-soft); color: var(--tpk-sage); }
.tp-badge--amber { background: var(--tpk-amber-soft); color: var(--tpk-amber-deep); }
.tp-badge--blue { background: var(--tpk-blue-soft); color: var(--tpk-blue); }

/* 「你在這裡」導覽列 */
.tp-way { background: var(--tpk-paper); border-bottom-color: var(--tpk-line-strong); }
.tp-way__crumbs a { color: var(--tpk-link); }
.tp-way__crumbs [aria-current="page"] { color: var(--tpk-ink); }

/* 生字總表字卡按鈕（tpz-open）：hover 僅換底，不動內部注音定位 */
.tpz-open { border-radius: var(--tpk-p-radius-m); }
.tpz-open:hover { background: var(--tpk-sage-soft); }
.tpz-open:focus-visible { outline: 3px solid var(--tpk-focus); outline-offset: 2px; }

/* ============================================================
   15. 練習畫面（practice.css 的 tp- DOM）：token 已換色，
       補紙感舞台與硬影細節
   ============================================================ */
.tp-practice__stage {
  background: var(--tpk-paper);
  border: var(--tpk-p-rule-hair) solid var(--tpk-line);
  box-shadow: var(--tpk-p-shadow-hard-2);
}
.tp-option { background: var(--tpk-paper-2); border-color: var(--tpk-line-strong); }
.tp-option:hover { border-color: var(--tpk-amber); background: var(--tpk-amber-soft); }
.tp-result__card { background: var(--tpk-paper); box-shadow: 6px 6px 0 rgba(48, 58, 48, 0.18); }

/* 舊版 tp-btn 系列（components.css）換硬影互動 */
.tp-btn {
  transition: background-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              border-color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              color var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              box-shadow var(--tpk-p-time-fast) var(--tpk-p-ease-out),
              transform var(--tpk-p-time-fast) var(--tpk-p-ease-out);
}
.tp-btn--primary {
  background: var(--tpk-primary);
  color: var(--tpk-on-primary);
  box-shadow: var(--tpk-p-shadow-hard-1);
}
.tp-btn--primary:hover:not([disabled]) {
  background: var(--tpk-primary-hover);
  color: var(--tpk-on-primary);
  box-shadow: var(--tpk-p-shadow-hard-2);
  transform: translate(-1px, -1px);
}
.tp-btn--primary:active:not([disabled]) { transform: translate(2px, 2px); box-shadow: none; }
.tp-btn--secondary { background: var(--tpk-paper); border-color: var(--tpk-ink-soft); color: var(--tpk-ink); }
.tp-btn--secondary:hover:not([disabled]) { border-color: var(--tpk-ink); color: var(--tpk-ink); background: var(--tpk-paper-deep); }
.tp-btn--ghost { color: var(--tpk-primary); }
.tp-btn--ghost:hover:not([disabled]) { background: var(--tpk-primary-soft); }
.tp-btn--danger { color: var(--tpk-danger); border-color: var(--tpk-danger); }

/* ============================================================
   16. 評量頁（review，tpr-* 作答介面）：token 換色外的局部補強
   ============================================================ */
.tpr-stepnav [aria-current] { color: var(--tpk-ink); }
.tpr-stepnav .tpr-stepdot { border-color: var(--tpk-line-strong); background: var(--tpk-paper); }
.tpr-stepnav [aria-current] .tpr-stepdot { background: var(--tpk-ink); border-color: var(--tpk-ink); color: var(--tpk-paper); }

.tpr-unit label { background: var(--tpk-paper); border-color: var(--tpk-line); border-radius: var(--tpk-p-radius-m); }
.tpr-unit label:hover { border-color: var(--tpk-ink-soft); }
.tpr-unit input { accent-color: var(--tpk-primary); }
.tpr-counts span { background: var(--tpk-paper); border-color: var(--tpk-line-strong); border-radius: var(--tpk-p-radius-m); }
.tpr-counts input:checked + span { background: var(--tpk-ink); color: var(--tpk-paper); border-color: var(--tpk-ink); }
.tpr-counts input:focus-visible + span { outline: 3px solid var(--tpk-focus); outline-offset: 2px; }

.tpr-focusbar { border-bottom: var(--tpk-p-rule-hair) solid var(--tpk-line-strong); }
.tpr-qnav button { background: var(--tpk-paper); border-color: var(--tpk-line-strong); color: var(--tpk-ink-soft); }
.tpr-qnav button[aria-current] { border-color: var(--tpk-ink); outline-color: var(--tpk-ink); color: var(--tpk-ink); }
.tpr-qnav button.tpr-done { background: var(--tpk-ink); color: var(--tpk-paper); }
.tpr-qnav button.tpr-done[aria-current] { outline-color: var(--tpk-primary); }
.tpr-qnav button:focus-visible { outline: 3px solid var(--tpk-focus); outline-offset: 2px; }

.tpr-options > .tpr-opt { background: var(--tpk-paper); border-color: var(--tpk-line); border-radius: var(--tpk-p-radius-m); }
.tpr-options > .tpr-opt:hover { border-color: var(--tpk-ink-soft); }
.tpr-options > .tpr-opt:has(input:checked) { border-color: var(--tpk-ink); background: var(--tpk-paper-deep); }
.tpr-answerbox { border-color: var(--tpk-line-strong); background: var(--tpk-paper-2); }

.tpr-resultitem { background: var(--tpk-paper); border-color: var(--tpk-line); border-radius: var(--tpk-p-radius-m); box-shadow: var(--tpk-p-shadow-hard-1); }
.tpr-status--ok { background: var(--tpk-sage-soft); color: var(--tpk-success); }
.tpr-status--no { background: var(--tpk-primary-soft); color: var(--tpk-primary-hover); }
.tpr-status--skip { background: var(--tpk-paper-deep); color: var(--tpk-ink-soft); }
.tpr-score { color: var(--tpk-primary); font-family: var(--tpk-font-serif); }

.tpr-print-more > summary { background: var(--tpk-paper); border-color: var(--tpk-line-strong); border-radius: var(--tpk-p-radius-m); }
.tpr-print-more > summary:hover { border-color: var(--tpk-ink-soft); }
.tpr-print-more > summary:focus-visible { outline: 3px solid var(--tpk-focus); outline-offset: 2px; }

/* 回報對話框（tpr-* modal）：換色不換結構 */
.tpr-modal {
  background: var(--tpk-paper);
  color: var(--tpk-ink);
  border: var(--tpk-p-rule) solid var(--tpk-line-strong);
  border-radius: var(--tpk-p-radius-l);
  box-shadow: 6px 6px 0 rgba(48, 58, 48, 0.2);
}
.tpr-chip { background: var(--tpk-paper); border-color: var(--tpk-line-strong); color: var(--tpk-ink); }
.tpr-chip.tpr-checked { border-color: var(--tpk-sage); background: var(--tpk-sage-soft); }
.tpr-chip input { accent-color: var(--tpk-success); }
.tpr-chip:focus-within { outline: 3px solid var(--tpk-focus); outline-offset: 2px; }

/* ============================================================
   17. 考卷紙張（.tp-sheet，螢幕預覽限定語彙）
   ・卷面雙細框（外框 1px＋內框 hairline）
   ・左緣密封線（螢幕限定的虛線直書條，列印移除）
   ・得分欄朱砂底線；題號墨色編輯體
   ・硬偏移紙影浮在書桌面上
   列印樣式主責在 print.css／review-print.css，本節全部可於
   下方 @media print 內撤回，且絕不藏題目或答案。
   ============================================================ */
.tp-sheet-viewer {
  background-color: var(--tpk-desk);
  background-image: var(--tpk-plate-dots);
  background-size: var(--tpk-plate-dots-size);
  border: var(--tpk-p-rule-hair) solid var(--tpk-line-strong);
  border-radius: var(--tpk-p-radius-m);
}
.tp-sheet-viewer .tp-sheet {
  box-shadow: var(--tpk-p-shadow-hard-3);
  outline: none;
}

.tp-sheet {
  background: var(--tpk-sheet-bg);
  color: var(--tpk-sheet-ink);
  border: var(--tpk-p-rule-hair) solid var(--tpk-sheet-frame);
  box-shadow: inset 0 0 0 3px var(--tpk-sheet-bg), inset 0 0 0 4px var(--tpk-sheet-frame-inner);
}

/* 密封線：螢幕預覽的裝訂語彙（絕對定位，不影響卷面 flex 排版） */
.tp-sheet::before {
  content: "密　封　線";
  position: absolute;
  left: 3mm;
  top: 24mm;
  bottom: 24mm;
  writing-mode: vertical-rl;
  font-family: var(--tpk-font-kai);
  font-size: 8.5pt;
  letter-spacing: 0.35em;
  color: var(--tpk-ink-faint);
  border-left: 1px dashed var(--tpk-line-strong);
  padding-left: 1.6mm;
  pointer-events: none;
}

/* 卷首與欄位：全卷統一使用台灣國小考卷標準楷體／標楷體 */
.tp-sheet,
.tp-sheet__title,
.tp-sheet__subtitle,
.tp-sheet__fields,
.tp-sheet__serial,
.tp-sheet__section-title,
.tp-sheet__section-hint,
.tp-item__no,
.tp-item__body,
.tp-sheet table,
.tp-sheet th,
.tp-sheet td,
.tp-sheet .tp-caption,
.tp-sheet__foot {
  font-family: var(--tpk-font-kai);
}
.tp-sheet {
  font-size: 11.5pt;
  line-break: strict;
  word-break: normal;
}
.tp-sheet p {
  max-width: none;
}
.tp-sheet .tp-item {
  align-items: baseline;
}
.tp-sheet .tp-item:has(.tpz-cell) {
  align-items: center;
}
.tp-sheet .tp-item__body {
  line-break: strict;
  word-break: normal;
  text-wrap: pretty;
}
.tp-sheet__head { border-bottom-color: var(--tpk-sheet-ink); }
.tp-sheet__title { color: var(--tpk-sheet-ink); font-family: var(--tpk-font-kai); }
.tp-sheet__subtitle { color: var(--tpk-ink-soft); font-family: var(--tpk-font-kai); }
.tp-sheet__serial { color: var(--tpk-ink-faint); font-family: var(--tpk-font-kai); }
.tp-sheet__line { border-bottom-color: var(--tpk-sheet-ink); }
/* 得分欄：朱砂底線（小面積重點，列印保留，屬真實考卷語彙） */
.tp-sheet__line--score { border-bottom: 1.6px solid var(--tpk-primary); }
.tp-sheet__field[data-field="score"] > span:first-child { color: var(--tpk-primary); }

/* 大題標題與題號 */
.tp-sheet__section-title { color: var(--tpk-sheet-ink); font-family: var(--tpk-font-kai); }
.tp-sheet__section-hint { color: var(--tpk-ink-soft); font-family: var(--tpk-font-kai); }
.tp-item__no { color: var(--tpk-sheet-ink); font-family: var(--tpk-font-kai); }
.tp-sheet__foot { border-top-color: var(--tpk-line-strong); color: var(--tpk-ink-soft); font-family: var(--tpk-font-kai); }

/* ============================================================
   18. 375／768／1024／1440 不產生橫向捲動的保險
   （不新增任何固定大寬度；只歸零 grid/flex 子項最小寬）
   ============================================================ */
.tp3-home-hero, .tp3-hub-bar, .tp3-exam-grid, .tp3-exam-card,
.tp3-exam-card__actions, .tp3-hub-chips, .tp3-hub-bar__row {
  min-width: 0;
  max-width: 100%;
}
.tp3-exam-card > *, .tp3-hub-bar > *, .tp3-home-hero > * { min-width: 0; }
.tp3-exam-card__title, .tp3-exam-card__desc, .tp3-choice-title, .tp3-choice-desc,
.tp3-row-title, .tp3-row-desc, .tp3-lead, .tp3-title {
  overflow-wrap: break-word;
  line-break: strict;
  max-width: 100%;
}
.tp3-title, .tp3-exam-card__title, .tp3-choice-title, h1, h2, h3 {
  text-wrap: balance;
}
.tp3-lead, .tp3-exam-card__desc, .tp3-row-desc {
  text-wrap: pretty;
}
.tp3-nowrap {
  display: inline-block;
  white-space: nowrap;
}
/* 卡片動作列按鈕可換行可縮，不頂破卡片 */
.tp3-exam-card__actions { flex-wrap: wrap; }
.tp3-exam-card__actions .tp3-btn-main,
.tp3-exam-card__actions .tp3-btn-sub { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* ============================================================
   19. 動效降級：prefers-reduced-motion 完整降級
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tp3-home-hero::before, .tp3-home-hero::after { transition: none; }
  .tp3-exam-card, .tp3-choice, .tp3-btn, .tp-btn, .tp3-btn-main, .tp3-btn-sub,
  .tp3-hub-chip, .tp3-chip, .tp-chip, .tp3-row-link, .tp3-card,
  .tp3-menu-toggle, .tp3-home-pill {
    transition: none !important;   /* 僅降級互動過場，局部使用 */
  }
  .tp3-exam-card:hover, .tp3-choice:hover,
  .tp3-btn-main:hover, .tp3-btn.tp3-btn--primary:hover, .tp-btn--primary:hover:not([disabled]) {
    transform: none;               /* 降級時不做位移，只留換色 */
  }
}

/* ============================================================
   20. 列印：保留真正考卷內容與直式注音；移除螢幕紙影、
       背景網點、裝訂孔、印章、密封線與多餘裝飾。
       不隱藏任何題目或答案；注音系統規則完全不動。
   ============================================================ */
@media print {
  html, body {
    background: #FFFFFF !important;
    background-image: none !important;
  }

  /* Hero 簽名裝飾（裝訂孔、印章、網點、格線）與裱框全部移除 */
  .tp3-home-hero { background-image: none; padding-inline-start: 0; }
  .tp3-home-hero::before, .tp3-home-hero::after { display: none !important; }
  .tp3-home-art {
    background: none;
    border: 0;
    outline: none;
    box-shadow: none;
    padding: 0;
  }

  /* 介面容器去紙影、去雙框，白紙黑墨 */
  .tp3-hub-bar, .tp3-exam-card, .tp3-exam-card--featured, .tp3-card,
  .tp3-choice, .tp-panel, .tp-practice__stage, .tpr-resultitem,
  .tp-dialog, .tpr-modal {
    box-shadow: none !important;
    outline: none;
  }

  /* 書桌面與網點移除（print.css 已重置 viewer 盒模型，此處只去色） */
  .tp-sheet-viewer {
    background: none !important;
    background-image: none !important;
    border: 0;
    border-radius: 0;
  }

  /* 卷面：撤掉螢幕雙細框與密封線，內容（題目、答案、注音）完整保留 */
  .tp-sheet {
    border: 0;
    box-shadow: none;
    background: #FFFFFF;
    color: #1F1B14;
  }
  .tp-sheet::before { display: none !important; }
  .tp-sheet-viewer .tp-sheet { box-shadow: none !important; }
}

/* ============================================================
   21. 實機驗收修正：1440px 家長任務動線與旋轉印章邊界
   只調整螢幕版面；列印與任何注音定位均不介入。
   ============================================================ */
@media screen {
  /* 旋轉後仍留在紙面內，避免右緣產生 1px 全頁橫捲。 */
  .tp3-home-hero::after { right: 10px; }
}

@media screen and (min-width: 1200px) {
  body[data-page="home"] .tp3-section { margin-block: 16px; }
  body[data-page="home"] .tp3-home-hero {
    padding-block-start: 12px;
    margin-block-start: 4px;
  }
  body[data-page="home"] .tp3-home-copy { gap: 8px; }

  /* 三組選擇併排；標題與說明共用第一列，狀態列獨佔最後一列。 */
  .tp3-hub-bar {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.95fr) minmax(0, 0.75fr);
    gap: 8px 12px;
    padding: 12px 16px;
  }
  .tp3-hub-bar > h2 { grid-column: 1 / 3; }
  .tp3-hub-bar > p { grid-column: 3 / 4; align-self: center; }
  .tp3-hub-bar__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    margin-top: 0;
  }
  .tp3-hub-bar__label { min-width: 0; }
  .tp3-hub-chips { flex-wrap: nowrap; }
  .tp3-hub-status { grid-column: 1 / -1; margin-top: 0; }

  /* 段考標題與說明左右並置，將真正的出卷入口推入首屏。 */
  #exam-center > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 24px;
    align-items: start;
  }

  /* 兩張主卷先給行動、後給規格說明；原連結與 JS 完全不換。 */
  #exam-center .tp3-exam-card--featured {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #exam-center .tp3-exam-card--featured .tp3-exam-card__actions {
    margin-block: 10px 0;
    padding-top: 0;
  }
  #exam-center .tp3-exam-card--featured .tp3-btn-main { flex-basis: 100%; }
}

/* 第二輪實機修正：避免 chip 直排斷字，並收斂首屏高度。 */
@media screen and (min-width: 1200px) {
  body[data-page="home"] .tp3-home-copy { gap: 4px; }
  body[data-page="home"] .tp3-home-hero .tp3-kicker,
  body[data-page="home"] .tp3-home-hero .tp3-title,
  body[data-page="home"] .tp3-home-hero .tp3-lead,
  body[data-page="home"] .tp3-home-hero .tp3-small { margin-block: 0; }
  body[data-page="home"] .tp3-home-hero .tp3-title {
    font-size: clamp(1.75rem, 2.2vw, 2.2rem);
    line-height: 1.25;
  }
  body[data-page="home"] .tp3-home-hero .tp3-lead {
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  .tp3-hub-bar > h2 { grid-column: 1 / 2; align-self: center; }
  .tp3-hub-bar > p {
    grid-column: 2 / 4;
    font-size: 0.8125rem;
    line-height: 1.55;
  }
  .tp3-hub-chip {
    flex: 0 0 auto;
    padding-inline: 10px;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .tp3-hub-status {
    padding-block: 6px;
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  #exam-center { gap: 16px; }
  #exam-center > div:first-child .tp3-title {
    font-size: 1.75rem;
    line-height: 1.25;
  }
  #exam-center > div:first-child .tp3-lead {
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* 跨寬度任務優先與回報元件收編。 */
@media screen {
  #exam-center .tp3-exam-card--featured {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #exam-center .tp3-exam-card--featured .tp3-exam-card__actions {
    margin-block: 10px 0;
    padding-top: 0;
  }
  #exam-center .tp3-exam-card--featured .tp3-btn-main { flex-basis: 100%; }

  /* 原站在 body 後段另有 FAB 樣式；以較高特定性收編，不改其 JS。 */
  body .tpr-fab {
    background: var(--tpk-ink);
    border-color: var(--tpk-paper);
    color: var(--tpk-paper);
    box-shadow: var(--tpk-p-shadow-hard-2);
    font-family: var(--tpk-font-sans);
  }
  body .tpr-fab:hover,
  body .tpr-fab:focus-visible { background: var(--tpk-primary-hover); }
  body .tpr-fab:focus-visible {
    outline-color: var(--tpk-paper);
    box-shadow: 0 0 0 6px var(--tpk-focus);
  }
}

@media screen and (max-width: 767px) {
  body[data-page="home"] .tp3-home-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px 14px 34px;
  }
  body[data-page="home"] .tp3-home-hero::before { left: 8px; }
  body[data-page="home"] .tp3-home-art { display: none; }
  body[data-page="home"] .tp3-home-copy { gap: 8px; }
  body[data-page="home"] .tp3-home-hero .tp3-title {
    font-size: clamp(1.55rem, 6.6vw, 1.95rem);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  body[data-page="home"] .tp3-home-hero .tp3-lead {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* 七大題勾選區：任何寬度都維持橫向閱讀，不讓中文逐字直排。 */
@media screen {
  #exam-sec-box,
  .exam-sec-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #exam-sec-box label,
  .exam-sec-box label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  #exam-sec-box label span,
  .exam-sec-box label span {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   22. V2｜豐富書房層次背景版（2.0.0）
   材料順序：書房光暈 → 宣紙纖維 → 微十字格／疏點陣 → 手繪暗紋。
   定量邊界：
   ・邊側插畫僅 ≥1280px 顯示，最多 3 組；首頁區塊角印最多 2 組。
   ・<768px 隱藏全部 JS 插畫；紋理仍保留，但不影響正文對比。
   ・所有新增圖層 aria-hidden、pointer-events:none；列印裝飾 0 件。
   ============================================================ */
:root {
  /* 冷暖紙階：皆由 V1 灰綠、暖紙與參考紙色明度階梯衍生。 */
  --tpk-v2-hero-paper: #F3F1E5;
  --tpk-v2-hub-paper: #EDF2E8;
  --tpk-v2-exam-paper: #F2EFE2;
  --tpk-v2-daily-paper: #E9F0E6;
  --tpk-v2-warm-light: rgba(255, 246, 216, 0.72);
  --tpk-v2-edge-light: rgba(255, 250, 229, 0.42);
  --tpk-v2-press-light: rgba(255, 255, 248, 0.76);
  --tpk-v2-press-shade: rgba(48, 58, 48, 0.075);

  /* 180px 無外部請求宣紙纖維：固定種子，平鋪接縫由 stitchTiles 收合。 */
  --tpk-v2-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.085'/%3E%3Cpath d='M8 24l23-3M97 11l17 2M43 83l31-2M121 129l35 3M19 155l21-2M76 46l13 1M138 66l25-2M59 139l18 2' fill='none' stroke='%23526152' stroke-width='.55' opacity='.12'/%3E%3C/svg%3E");

  /* 日本方眼紙的微十字，不畫滿粗格線；24px 一單位。 */
  --tpk-v2-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 9.5v5M9.5 12h5' fill='none' stroke='%23526152' stroke-width='.55' opacity='.15'/%3E%3C/svg%3E");
  --tpk-v2-dots: radial-gradient(circle at 1px 1px, rgba(82, 97, 82, 0.09) 0.7px, transparent 0.9px);
}

@media screen {
  html {
    min-height: 100%;
    background-color: var(--tpk-bg);
    background-image:
      radial-gradient(ellipse 68% 72% at 50% 0%, var(--tpk-v2-warm-light) 0%, rgba(255, 246, 216, 0.24) 42%, transparent 76%),
      radial-gradient(ellipse 70% 54% at 0% 26%, var(--tpk-v2-edge-light) 0%, transparent 72%),
      radial-gradient(ellipse 66% 52% at 100% 18%, rgba(255, 250, 229, 0.48) 0%, transparent 74%),
      var(--tpk-v2-fiber),
      var(--tpk-v2-cross),
      var(--tpk-v2-dots);
    background-size:
      100% 760px,
      52vw 1080px,
      48vw 960px,
      180px 180px,
      24px 24px,
      48px 48px;
    background-position: center top, left 110px, right 260px, 0 0, 0 0, 7px 11px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, repeat;
  }

  body {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    background-color: transparent;
    background-image: none;
  }

  /* 頁首、頁尾與通用工作面只鋪極細纖維，不疊粗格線。 */
  .tp3-header, .tp-site-header, .tp-header, .tp3-footer {
    background-image: var(--tpk-v2-fiber);
    background-size: 180px 180px;
  }

  .tp3-card, .tp-panel, .tp-practice__stage {
    background-image: var(--tpk-v2-fiber);
    background-size: 180px 180px;
  }

  /* Hero：偏暖的卷首紙，右上有窗光，左下保留裝訂邊的壓痕。 */
  .tp3-home-hero {
    background-color: var(--tpk-v2-hero-paper);
    background-image:
      radial-gradient(ellipse 62% 88% at 96% 0%, rgba(255, 250, 229, 0.74), transparent 72%),
      linear-gradient(105deg, rgba(255, 255, 248, 0.26), transparent 46%),
      var(--tpk-v2-fiber),
      var(--tpk-plate-dots),
      var(--tpk-draft-grid);
    background-size: auto, auto, 180px 180px, var(--tpk-plate-dots-size), auto;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    box-shadow:
      inset 0 1px 0 var(--tpk-v2-press-light),
      inset 0 -2px 0 var(--tpk-v2-press-shade),
      var(--tpk-p-shadow-hard-3);
  }

  /* 第一步：偏冷的校準紙，微十字只在設定文具盒內出現。 */
  .tp3-hub-bar {
    background-color: var(--tpk-v2-hub-paper);
    background-image:
      linear-gradient(115deg, rgba(255, 255, 248, 0.46), transparent 48%),
      var(--tpk-v2-fiber),
      var(--tpk-v2-cross);
    background-size: auto, 180px 180px, 24px 24px;
    box-shadow:
      inset 0 1px 0 var(--tpk-v2-press-light),
      inset 0 -2px 0 var(--tpk-v2-press-shade),
      var(--tpk-p-shadow-hard-3);
  }

  /* 兩個主區段用外擴紙帶，不改盒模型，因此 V1 的 CTA 位置不後退。 */
  #exam-center, #daily-practice {
    position: relative;
    isolation: isolate;
  }

  #exam-center::before, #daily-practice::before {
    content: "";
    position: absolute;
    inset: -14px -18px;
    z-index: 0;
    border: 1px solid rgba(181, 186, 168, 0.74);
    border-radius: var(--tpk-p-radius-m);
    box-shadow:
      inset 0 1px 0 var(--tpk-v2-press-light),
      inset 0 -2px 0 var(--tpk-v2-press-shade),
      2px 3px 0 rgba(48, 58, 48, 0.055);
    pointer-events: none;
  }

  #exam-center::before {
    background-color: var(--tpk-v2-exam-paper);
    background-image:
      linear-gradient(100deg, rgba(255, 250, 231, 0.42), transparent 52%),
      var(--tpk-v2-fiber);
    background-size: auto, 180px 180px;
  }

  #daily-practice::before {
    background-color: var(--tpk-v2-daily-paper);
    background-image:
      linear-gradient(100deg, rgba(255, 255, 248, 0.34), transparent 52%),
      var(--tpk-v2-fiber),
      var(--tpk-v2-cross);
    background-size: auto, 180px 180px, 32px 32px;
  }

  #exam-center > :not(.tpk-section-watermark),
  #daily-practice > :not(.tpk-section-watermark) {
    position: relative;
    z-index: 2;
  }

  /* 考卷桌：比頁面略深，讓白卷仍是最亮、最乾淨的閱讀面。 */
  .tp-sheet-viewer {
    background-color: var(--tpk-desk);
    background-image:
      radial-gradient(ellipse 70% 42% at 50% 0%, rgba(255, 248, 222, 0.38), transparent 74%),
      var(--tpk-v2-fiber),
      var(--tpk-v2-cross),
      var(--tpk-plate-dots);
    background-size: auto, 180px 180px, 32px 32px, var(--tpk-plate-dots-size);
  }

  /* JS 全域邊側暗紋：絕對定位跟隨文件，不固定遮罩、不接收滑鼠。 */
  .tpk-study-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    color: var(--tpk-ink-soft);
  }

  .tpk-study-motif {
    position: absolute;
    width: clamp(64px, calc((100vw - 1180px) / 2), 144px);
    opacity: 0.2;
    pointer-events: none;
  }

  .tpk-study-motif svg, .tpk-section-watermark svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .tpk-study-motif--stationery {
    top: 150px;
    left: max(10px, calc(50vw - 730px));
    transform: rotate(-5deg);
  }

  .tpk-study-motif--owl {
    top: 350px;
    right: max(8px, calc(50vw - 730px));
    width: clamp(72px, calc((100vw - 1180px) / 2), 164px);
    opacity: 0.23;
  }

  .tpk-study-motif--subject {
    top: 720px;
    left: max(12px, calc(50vw - 724px));
    width: clamp(64px, calc((100vw - 1180px) / 2), 150px);
    opacity: 0.16;
    transform: rotate(2deg);
  }

  /* 區塊角印：只在考試與日常練習各放 1 件，內容永遠在上一層。 */
  .tpk-section-watermark {
    position: absolute;
    z-index: 1;
    width: 78px;
    pointer-events: none;
    user-select: none;
    opacity: 0.13;
    color: var(--tpk-primary);
  }

  .tpk-section-watermark--exam {
    top: -29px;
    right: -27px;
    transform: rotate(8deg);
  }

  .tpk-section-watermark--daily {
    right: -20px;
    bottom: -23px;
    width: 96px;
    color: var(--tpk-ink-soft);
    opacity: 0.11;
    transform: rotate(-3deg);
  }
}

@media screen and (min-width: 1280px) {
  .tpk-study-atmosphere[data-tpk-v2-page="home"] { display: block; }
  .tpk-study-atmosphere[data-tpk-v2-page="inner"] .tpk-study-motif { display: none; }
}

/* 內頁多為滿版工作區；只在真正留得下邊側空間時放 1 隻小墨。 */
@media screen and (min-width: 1600px) {
  .tpk-study-atmosphere[data-tpk-v2-page="inner"] { display: block; }
  .tpk-study-atmosphere[data-tpk-v2-page="inner"] .tpk-study-motif--owl {
    display: block;
    top: 350px;
    right: 12px;
    width: clamp(64px, calc((100vw - 1480px) / 2), 160px);
    opacity: 0.18;
  }
}

@media screen and (min-width: 1440px) {
  .tpk-study-motif { opacity: 0.24; }
  .tpk-study-motif--owl { opacity: 0.27; }
  .tpk-study-motif--subject { opacity: 0.18; }
}

@media screen and (max-width: 1279px) {
  .tpk-study-motif--subject { display: none; }

  #exam-center::before, #daily-practice::before { inset: -12px 0; }
  .tpk-section-watermark--exam { right: 12px; }
  .tpk-section-watermark--daily { right: 12px; }
}

@media screen and (max-width: 767px) {
  .tpk-study-atmosphere, .tpk-section-watermark { display: none !important; }

  #exam-center::before, #daily-practice::before {
    inset: -9px 0;
    border-radius: var(--tpk-p-radius-s);
  }
}

/* V2 列印最後一道保險：所有紋理、光暈、壓紋與自動掛載 SVG 全數歸零。 */
@media print {
  html, body,
  .tp3-header, .tp-site-header, .tp-header, .tp3-footer,
  .tp3-card, .tp-panel, .tp-practice__stage,
  .tp3-home-hero, .tp3-hub-bar, .tp-sheet-viewer, .tp-sheet {
    background: #FFFFFF !important;
    background-image: none !important;
  }

  body {
    position: static;
    isolation: auto;
    min-height: 0;
  }

  #exam-center::before, #daily-practice::before,
  .tpk-study-atmosphere, .tpk-section-watermark {
    display: none !important;
    content: none !important;
  }

  .tp3-home-hero, .tp3-hub-bar, .tp-sheet-viewer, .tp-sheet {
    box-shadow: none !important;
  }
}