/* =============================================================
type-scale.css — 字級與行高尺度（2026-10-02 22:0x）
-------------------------------------------------------------
為什麼需要這一支（實測診斷）：
全站 px 字級 **19 種**：12 / 12.5 / 13 / 13.5 / 14 / 14.5 / 15 / 15.5 /
16 / 16.5 / 17 / 17.5 / 18.5 / 19 / 19.5 / 21 / 22 / 23 / 25
行高 **19 種**：1.12 / 1.18 / 1.24 / 1.3 / 1.42 / 1.45 / 1.5 / 1.55 /
1.6 / 1.7 / 1.75 / 1.8 / 1.82 / 1.85 / 1.88 / 1.9 / 1.95
字距 16 種。
其中 12–17px 區間每個值只用 1–2 次，沒有規律 —— 這是「新版被改得亂」的根因：
每次改動各自挑一個看起來差不多的數值，累積成 19 種。
這支做兩件事：
1. 定義 **7 級字級** 與 **4 種行高** 的令牌（--t-* / --lh-*）。
2. 用一層 **輕量覆寫** 把舊元件拉回尺度（不重寫 3,256 行既有 CSS）。
★ 為什麼用「覆寫層」而不是直接改既有 CSS：
既有兩份 CSS 共 3,256 行、19 頁站在用。逐條改動風險高且難回退。
覆寫層是單一檔案，刪掉即回退，且能一次套用到全部頁面。
後續若要徹底清理，再把覆寫層的規則併回主檔（見檔末「遷移註記」）。
============================================================= */
/* ---- 1. 令牌：7 級字級 ---- */
:root {
/* 顯示級（頁面主標） */
--t-display: clamp(30px, 3.2vw, 44px);
/* 區段標題 */
--t-h2: clamp(23px, 2.3vw, 31px);
/* 卡片標題 */
--t-h3: clamp(18px, 1.55vw, 21px);
/* 小標（卡片內的區塊標） */
--t-h4: 16px;
/* ★ 正文：全站統一（原為 15–17px 亂跳） */
--t-body: 17px;
/* 次要說明 */
--t-sm: 15px;
/* 標籤／產品代碼／ eyebrow */
--t-xs: 13px;
/* ★ 12px 只給頁尾版權與裝飾性文字，不進正文 */
--t-micro: 12px;
/* ---- 2. 令牌：4 種行高 ---- */
--lh-tight: 1.2; /* 大標 */
--lh-snug: 1.45; /* 卡片標題 */
--lh-normal: 1.75; /* ★ 正文 */
--lh-loose: 1.9; /* 長段落（專案鐵律 1.9） */
/* ---- 3. 令牌：字距（4 種，取代 16 種）---- */
--ls-display: -.015em; /* 大標微收 */
--ls-body: 0; /* 中文正文不追蹤 */
--ls-label: .04em; /* 標籤／eyebrow */
--ls-code: .06em; /* 產品代碼等寬字 */
}
/* ---- 4. 基礎正文 ---- */
body {
font-size: var(--t-body);
line-height: var(--lh-normal);
letter-spacing: var(--ls-body);
/* 中文長文用 pretty 讓斷行更自然（Chrome 117+ / Safari 17.4+ 支援） */
text-wrap: pretty;
}
/* ---- 5. 標題層級：全部拉回尺度 ---- */
h1, .page-hero__title, .hero__title {
font-size: var(--t-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
text-wrap: balance; /* ★ 標題用 balance：避免末行只剩一兩個字 */
}
h2, .sec-title, .page-hero__sub {
font-size: var(--t-h2);
line-height: var(--lh-snug);
letter-spacing: var(--ls-display);
text-wrap: balance;
}
h3, .card__title, .step__title {
font-size: var(--t-h3);
line-height: var(--lh-snug);
letter-spacing: var(--ls-display);
text-wrap: pretty;
}
h4, .card__subtitle {
font-size: var(--t-h4);
line-height: var(--lh-snug);
}
/* ---- 6. 卡片：這是「產品卡不要塞太多」的核心 ---- */
.card__title { margin-bottom: var(--sp-2); }
/* 定位句：卡片的主要訊息，給足行高與對比 */
.card__lead,
.card__desc {
font-size: var(--t-sm);
line-height: var(--lh-normal);
color: var(--ink-700);
text-wrap: pretty;
}
/* 說明段落（本輪把四層壓成兩層，這些選擇器保留給有需要的頁面） */
.card__desc { color: var(--ink-500); }
/* ---- 7. 標籤類：eyebrow / kicker / 產品代碼 ---- */
.eyebrow,
.card__kicker,
.badge,
.tag {
font-size: var(--t-xs);
line-height: 1.35;
letter-spacing: var(--ls-label);
}
/* 等寬字承載的代碼類 */
.card__kicker b,
code, kbd, samp,
.fcard__meta,
.card__code {
font-family: var(--font-mono);
letter-spacing: var(--ls-code);
}
/* ---- 8. 清單與段落 ---- */
.prose p,
p { line-height: var(--lh-normal); }
ul, ol { line-height: var(--lh-normal); }
/* 長條列的說明文字放寬 */
.prose--loose p { line-height: var(--lh-loose); }
/* ---- 9. 頁尾：唯一允許 12px 的地方 ---- */
.footer__bottom,
.legal__fine {
font-size: var(--t-micro);
line-height: 1.5;
letter-spacing: var(--ls-label);
}
/* ---- 10. 表格：數字欄位用等寬 + tabular，便於對齊閱讀 ---- */
.tbl td, .tbl th,
table td, table th {
line-height: 1.5;
}
.tbl .num, td.num, th.num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--t-sm);
}
/* =============================================================
遷移註記（下次動既有 CSS 時逐步移除本層）
-------------------------------------------------------------
覆寫層覆蓋到的既有選擇器（改這些規則時，確認本層是否還需要）：
body / h1-h4 / .page-hero__title / .hero__title / .sec-title /
.card__title / .card__lead / .card__desc / .card__kicker /
.eyebrow / .badge / .tag / .prose / .tbl / .footer__bottom
★ 若日後把既有 CSS 改成用 var(--t-*)，就可以把對應覆寫刪掉。
============================================================= */
/* =============================================================
首屏緊湊變體（2026-10-02 22:1x）
-------------------------------------------------------------
實測：原本 .page-hero 的 padding 是 calc(header-h + 60px) 0 56px
＝ 上下 184px 留白，hero 高度 571px，
第一張產品卡落在 Y=820px —— 要滑一整屏才見內容。
處理：加 .page-hero--compact 變體，只壓縮垂直留白，
★ 不改品牌漸層、不改字級（那是另一層的事）。
============================================================= */
.page-hero--compact {
padding: calc(var(--header-h) + 28px) 0 32px;
}
.page-hero--compact .page-hero__lead {
margin-bottom: var(--sp-5);
max-width: 62ch; /* ★ 長文不過寬：中文一行約 40 字較易讀 */
}
.page-hero--compact h1 { margin-bottom: var(--sp-3); }
/* ---- 產品卡：兩層版（業主指示「不要全部細節」）---- */
.card--product .card__for {
font-size: var(--t-sm);
line-height: 1.6;
color: var(--ink-500);
margin: 0 0 var(--sp-1);
}
/* 兩層資訊的卡不需要最小高度撐開 */
.card--product { display: flex; flex-direction: column; }
.card--product .card__more { margin-top: auto; padding-top: var(--sp-4); }
/* ---- 產品卡副標：主名與補充說明分兩行，長名不再擠成一團 ---- */
.card--product .card__subtitle {
font-size: var(--t-sm);
line-height: 1.5;
color: var(--ink-500);
margin: calc(var(--sp-1) * -1) 0 var(--sp-2);
}
/* =============================================================
biz 清單的「了解更多」CTA（2026-10-02 22:57）
-------------------------------------------------------------
★ 診斷：這元件本來就沒有「了解更多」文字（只有 CSS 產生的 → 箭頭），
不是被刪掉。箭頭不夠明確 ⇒ 補回文字。
★★ 為什麼是「真的元素」而不是 CSS ::before／::after（我踩了三次）：
① ::before 永遠排在 內容最前面（搶在標題之前）—— 位置錯。
② 改 flex + order ⇒ 說明是 display:block，order 對它無效 ⇒ 箭頭被擠成獨立一行。
③ 把「文字 + 箭頭」併進同一個 content ⇒ 能同行了，但無 JS 時 attr() 讀不到，
而且語意混雜、不好維護。
⇒ **正解：加真正的元素**，位置、語意、無 JS 行為全部自然正確。
============================================================= */
.biz__cta {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
margin-top: var(--sp-2);
font-size: var(--t-xs);
font-weight: 600;
color: var(--accent-700);
}
.biz__cta-arrow { color: var(--accent-500); }
/* 滑過：整個 已有 hover 變色（.biz__list a:hover strong），這裡只做箭頭位移 */
.biz__list a:hover .biz__cta-arrow { transform: translateX(3px); }
.biz__cta-arrow { transition: var(--transition); }
/* =============================================================
深色 hero 裡的 ghost 按鈕（2026-10-03 01:5x 初版；2026-11-01 修正）
-------------------------------------------------------------
★ 實測截圖抓到：`.btn--ghost` 的文字色是 `var(--brand-700)`（深藍），
而 `.page-hero` 是**深色漸層背景** ⇒ 深底深字，按鈕看起來是空的。
★ CSS 已有修正規則，但它綁的是 `.section--brand .btn--ghost`
與 `.cta-band .btn--ghost` —— **`page-hero` 不在裡面**。
⇒ 這是「同規則兩份實作」的另一例：修正規則存在，但覆蓋面不全。
★★★ 2026-11-01 修正（官網工單 V-01，P0）
初版把 `.hero` 也一起納入，並在註解寫「不影響淺色區段」——**那句話是錯的**：
首頁 `.hero` 的底色是 `background: var(--white)`（style.css:515），
於是首屏第二顆 CTA「了解產品與計劃」被套成**白字白底、實測對比 1.00**，
肉眼完全看不見（工單 V-01 就是在說這個）。
⇒ 修法：**只留 `.page-hero`**（深色）；`.hero` 回歸 `.btn--ghost` 的預設深字。
⇒ 驗收：`_test_hero_cta_contrast.py`（真渲染算對比，不用 grep）。
============================================================= */
.page-hero .btn--ghost {
color: var(--white);
border-color: rgba(255, 255, 255, .40);
background: rgba(255, 255, 255, .06);
}
.page-hero .btn--ghost:hover {
border-color: var(--white);
background: rgba(255, 255, 255, .14);
}