/* ============================================================
   ChengMu 共用設計系統 — 工程文件風 (Engineering Dossier)
   4 頁共用，請勿在個別頁面重複定義基礎樣式。
   字級採「老花友善」較大基準。
   ============================================================ */

:root {
  --paper: #f4f2ec;
  --paper-2: #efece4;
  --ink: #1a1a18;
  --ink-2: #44423d;
  --gray: #5d5b55;
  --faint: #6f6c64;
  --hair: #c9c5bb;
  --hair-2: #d9d6cd;
  --blue: #2b4c7e;          /* 藍圖藍 */
  --blue-soft: rgba(43,76,126,0.08);
  --red: #b3422e;           /* 校正紅，極少用 */
  --green: #2f6b4f;         /* 通過/yes */
  --grid: rgba(43,76,126,0.055);
  --serif: 'Noto Serif TC', 'Songti TC', serif;
  --sans: 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  --sheet: 1180px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink-2);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* 工程方格紙底 */
body::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
}
::selection { background: var(--blue-soft); color: var(--ink); }
a { color: var(--blue); text-decoration: none; }
.mono { font-family: var(--mono); }

.sheet {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  position: relative;
}

/* ── Nav ─────────────────────────────────────── */
nav {
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.nav-in {
  max-width: var(--sheet); margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  height: 76px;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(14px, 1.6vw, 26px);
}
.brand { display:flex; align-items:baseline; gap:14px; text-decoration:none; flex-shrink:0; }
.brand .zh {
  font-family: var(--serif); font-weight: 700; font-size: 24px;
  color: var(--ink); letter-spacing: 1px; white-space: nowrap;
}
.brand .en {
  font-family: var(--mono); font-size: 12.5px; color: var(--gray);
  letter-spacing: 0.18em; white-space: nowrap;
}
.nav-links { display:flex; align-items:center; gap: 19px; min-width: 0; overflow-x: auto; }
.nav-links::-webkit-scrollbar { height: 0; }
.nav-links a {
  font-family: var(--mono); font-size: 14.5px; color: var(--ink-2);
  letter-spacing: 0.06em; display:flex; gap:7px; align-items:baseline; white-space:nowrap;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .15s, color .15s;
}
.nav-links a:hover { color: var(--blue); border-color: var(--blue); }
.nav-links a i { font-style:normal; color: var(--faint); font-size: 12.5px; }
.nav-rev {
  font-family: var(--mono); font-size: 12.5px; color: var(--gray);
  letter-spacing: 0.1em; border:1px solid var(--hair); padding: 5px 11px; flex-shrink:0;
}

/* ── 章節骨架：左標註欄 + 內容 ─────────────────── */
section { position: relative; }
.row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(16px, 4vw, 56px);
  padding: clamp(56px, 9vh, 104px) 0;
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.row.last { border-bottom: none; }
.rail { position: relative; }
.rail .no {
  font-family: var(--mono); font-size: 16px; font-weight: 600;
  color: var(--blue); letter-spacing: 0.08em;
}
.rail .tag {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  letter-spacing: 0.16em; margin-top: 10px; writing-mode: vertical-rl;
  text-orientation: mixed;
}
/* 基準十字記號 */
.datum {
  position: absolute; width: 11px; height: 11px; color: var(--blue); opacity:.5;
  pointer-events:none;
}
.datum::before, .datum::after { content:''; position:absolute; background: currentColor; }
.datum::before { left:5px; top:0; width:1px; height:11px; }
.datum::after  { top:5px; left:0; height:1px; width:11px; }
.row > .datum.tl { left:-6px; top:-6px; }
.row > .datum.tr { right:-6px; top:-6px; }

.sec-head { display:flex; align-items:baseline; gap:16px; margin-bottom: 36px; flex-wrap:wrap; }
.sec-head h2 {
  font-family: var(--serif); font-weight: 700; color: var(--ink);
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 1px;
}
.sec-head .en {
  font-family: var(--mono); font-size: 13px; color: var(--gray);
  letter-spacing: 0.16em; padding-bottom: 3px;
}
.sec-head .rule { flex:1; height:1px; background: var(--hair); align-self:center; min-width:40px; }
.lead {
  font-size: clamp(15.5px, 1.2vw, 17px); color: var(--ink-2);
  line-height: 1.9; max-width: 60ch; margin-bottom: 36px;
}

/* ── Hero ────────────────────────────────────── */
.hero { padding-top: clamp(64px, 12vh, 120px); padding-bottom: clamp(40px, 7vh, 72px); }
.hero h1 {
  font-family: var(--serif); font-weight: 900; color: var(--ink);
  font-size: clamp(34px, 6vw, 76px); line-height: 1.18;
  letter-spacing: 1px; margin-bottom: 40px;
}
.hero h1 .blue { color: var(--blue); }
.hero-deck {
  font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2);
  max-width: 50ch; line-height: 1.95; margin-bottom: 48px;
}
.hero-meta { display:flex; flex-wrap:wrap; gap: 28px 56px; align-items:flex-end; }
.est { font-family: var(--mono); font-size: 13.5px; color: var(--gray); letter-spacing: 0.1em; line-height: 2; }
.est b { color: var(--ink); font-weight: 600; }
.hero-cta { display:inline-flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* 尺寸標註線 |── label ──| */
.dim {
  position: relative; display:inline-flex; align-items:center; justify-content:center;
  min-width: clamp(220px, 34vw, 360px); height: 1px; background: var(--blue);
  margin: 6px 0;
}
.dim::before, .dim::after { content:''; position:absolute; top:-4px; width:1px; height:9px; background: var(--blue); }
.dim::before { left:0; } .dim::after { right:0; }
.dim span {
  background: var(--paper); padding: 0 12px; transform: translateY(-1px);
  font-family: var(--mono); font-size: 13.5px; color: var(--blue); letter-spacing: 0.1em;
}

/* ── 按鈕 ────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em;
  padding: 12px 24px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

/* ── 編號清單（服務 / 特色）────────────────────── */
.specs { border-top: 1px solid var(--ink); }
.spec {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 24px; align-items: baseline;
  padding: 26px 4px; border-bottom: 1px solid var(--hair);
}
.spec .sn { font-family: var(--mono); font-size: 15.5px; color: var(--blue); font-weight:600; }
.spec .body h3 {
  font-family: var(--serif); font-weight: 700; font-size: 21px; color: var(--ink);
  letter-spacing: .5px; margin-bottom: 9px;
}
.spec .body p { font-size: 16px; color: var(--ink-2); line-height: 1.75; max-width: 56ch; }
.spec .stack {
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
  letter-spacing: 0.04em; text-align: right; line-height: 1.9; white-space: nowrap;
}
.spec .stack i { font-style: normal; color: var(--faint); }

/* ── 規格表 datasheet（產品 / 比較 / 訂價）──────── */
.ds-wrap { border: 1px solid var(--ink); overflow-x: auto; }
table.ds { width: 100%; border-collapse: collapse; min-width: 720px; }
table.ds caption {
  text-align: left; font-family: var(--mono); font-size: 12.5px; color: var(--gray);
  letter-spacing: 0.12em; padding: 13px 16px; border-bottom: 1px solid var(--hair);
  background: var(--paper-2);
}
.ds th, .ds td {
  text-align: left; padding: 16px; border-bottom: 1px solid var(--hair);
  border-right: 1px solid var(--hair-2); vertical-align: top;
}
.ds th:last-child, .ds td:last-child { border-right: none; }
.ds thead th {
  font-family: var(--mono); font-size: 12.5px; color: var(--gray); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper-2);
}
.ds tbody tr:last-child td { border-bottom: none; }
.ds .code { font-family: var(--mono); font-size: 14.5px; color: var(--blue); font-weight: 600; white-space: nowrap; }
.ds .name { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing:.3px; }
.ds .use { font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.ds .m { font-family: var(--mono); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.ds .more { font-family: var(--mono); font-size: 14px; color: var(--blue); white-space: nowrap; }
.ds .more:hover { text-decoration: underline; }
.ds .yes { color: var(--green); font-weight: 600; }
.ds .no  { color: var(--red); }
.ds .feat { font-size: 14px; color: var(--ink-2); line-height: 1.85; }
.ds .feat li { list-style: none; padding-left: 16px; position: relative; }
.ds .feat li::before { content:'+'; position:absolute; left:0; color: var(--blue); font-family: var(--mono); }
.ds .plan { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--ink); }
.ds .price { font-family: var(--mono); font-size: 16px; color: var(--blue); font-weight: 600; white-space: nowrap; }
.ds tr.featured td { background: var(--blue-soft); }

/* ── ASCII 系統圖（架構 / 流程）────────────────── */
.diagram {
  border: 1px solid var(--ink); background: var(--paper-2);
  padding: 28px clamp(20px,3vw,32px);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
  color: var(--ink-2); white-space: pre; overflow-x: auto;
}
.diagram .l1 { color: var(--blue); font-weight: 600; }
.diagram .l2 { color: var(--ink); }
.diagram .note { color: var(--gray); }
.diagram-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.diagram-split .ds-wrap { overflow: visible; }
.diagram-split .ds { min-width: 0; }
.diagram-split .ds th, .diagram-split .ds td { white-space: normal; padding: 13px 14px; }
@media (max-width: 860px) { .diagram-split { grid-template-columns: 1fr; } }

/* ── 現況 / 解法 對照（痛點破格）──────────────── */
.ba { display:grid; grid-template-columns: 1fr 1fr; border:1px solid var(--ink); }
.ba-col { padding: 28px clamp(20px,3vw,30px); }
.ba-col + .ba-col { border-left: 1px solid var(--hair); }
.ba-h {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gray); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--hair);
}
.ba-after .ba-h { color: var(--blue); border-color: var(--blue); }
.ba ul { list-style:none; display:flex; flex-direction:column; gap:16px; }
.ba li { display:grid; grid-template-columns: 18px 1fr; gap:11px; font-size:15.5px; line-height:1.65; color:var(--ink-2); }
.ba-before li::before { content:'\2715'; color:var(--faint); font-size:13px; }
.ba-after li::before  { content:'\2192'; color:var(--blue); font-family:var(--mono); font-weight:500; }

/* ── 工序 / 安裝程序 ──────────────────────────── */
.proc { border-top: 1px solid var(--ink); }
.proc-step {
  display:grid; grid-template-columns: 70px 1fr; gap:24px; align-items:baseline;
  padding: 22px 4px; border-bottom: 1px solid var(--hair);
}
.proc-step .pn { font-family: var(--mono); font-size: 15px; color: var(--blue); font-weight:600; letter-spacing:0.06em; }
.proc-step h3 { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.proc-step p { font-size: 15px; color: var(--ink-2); line-height: 1.7; }

/* ── FAQ / 註記 ───────────────────────────────── */
.faq { border-top: 1px solid var(--ink); }
.faq-item {
  display:grid; grid-template-columns: 70px 1fr; gap:24px;
  padding: 24px 4px; border-bottom: 1px solid var(--hair);
}
.faq-item .fq-n { font-family: var(--mono); font-size: 13px; color: var(--blue); padding-top:4px; }
.faq-item .fq-q { font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--ink); line-height: 1.45; margin-bottom: 10px; }
.faq-item .fq-a { font-size: 15px; color: var(--ink-2); line-height: 1.8; }

/* ── 關於：宋體敘事 + 邊註 ─────────────────────── */
.about-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(28px, 6vw, 72px); }
.about-body p {
  font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 1.25vw, 18.5px);
  color: var(--ink-2); line-height: 2.05; margin-bottom: 22px;
}
.about-body p .lead-mark { color: var(--blue); font-weight: 700; }
.notes { border-top: 1px solid var(--ink); align-self: start; }
.note {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline;
  padding: 15px 2px; border-bottom: 1px solid var(--hair);
}
.note .k { font-family: var(--mono); font-size: 12.5px; color: var(--gray); letter-spacing: 0.1em; }
.note .v { font-family: var(--mono); font-size: 15px; color: var(--ink); text-align: right; font-weight: 500; }
.note .v.b { color: var(--blue); }

/* ── 聯絡：委託單 title-block 格 ───────────────── */
.form-block { border: 1px solid var(--ink); }
.fb-cap {
  font-family: var(--mono); font-size: 12.5px; color: var(--gray); letter-spacing: 0.12em;
  padding: 12px 16px; border-bottom: 1px solid var(--hair); background: var(--paper-2);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.fb-cell { padding: 22px 20px; border-right: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair); }
.fb-cell:nth-child(3n) { border-right: none; }
.fb-cell .k { font-family: var(--mono); font-size: 12.5px; color: var(--gray); letter-spacing: 0.12em; display:block; margin-bottom: 10px; }
.fb-cell a, .fb-cell .v { font-family: var(--mono); font-size: 16.5px; color: var(--ink); letter-spacing: -.2px; word-break: break-all; }
.fb-cell a:hover { color: var(--blue); }
.fb-note {
  grid-column: 1 / -1; padding: 18px 20px; border-bottom: none;
  font-family: var(--serif); font-size: 17px; color: var(--ink-2); line-height: 1.85;
}
.fb-cta {
  display:inline-flex; align-items:center; gap:10px; margin-top: 14px;
  font-family: var(--mono); font-size: 15px; color: var(--paper); background: var(--blue);
  padding: 11px 22px; letter-spacing: 0.04em; border: 1px solid var(--blue); transition: background .15s, border-color .15s;
}
.fb-cta:hover { background: var(--ink); border-color: var(--ink); }

/* ── Footer title block ───────────────────────── */
footer { border-top: 1px solid var(--ink); }
.tb {
  max-width: var(--sheet); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
}
.tb .cell { padding: 18px clamp(20px, 5vw, 60px); border-right: 1px solid var(--hair); }
.tb .cell:last-child { border-right: none; }
.tb .k { font-family: var(--mono); font-size: 12px; color: var(--gray); letter-spacing: 0.14em; display:block; margin-bottom: 8px; }
.tb .v { font-family: var(--mono); font-size: 14.5px; color: var(--ink); letter-spacing: 0.02em; }
.tb .v.serif { font-family: var(--serif); font-weight: 700; font-size: 16.5px; }
.disc {
  border-top: 1px solid var(--hair); padding: 14px clamp(20px,5vw,60px);
  font-family: var(--mono); font-size: 12.5px; color: var(--gray); letter-spacing: 0.04em;
  max-width: var(--sheet); margin: 0 auto;
}
.disc + .disc { border-top: none; padding-top: 0; color: var(--faint); }

/* ── 系統架構圖 (budget-system 專用) ──────────────── */
.diagram-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* 左側 ASCII 樹佔比略大 */
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}
.diagram {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre; /* 關鍵：保留 ASCII 的空白與換行，防止架構圖崩塌 */
  overflow-x: auto; /* 若字元過長，允許水平滾動 */
  background: var(--paper-2);
  padding: 24px;
  border: 1px solid var(--hair);
  color: var(--ink-2);
}
.diagram .l1 { color: var(--blue); font-weight: 600; /* 第一層目錄顏色 */ }
.diagram .l2 { color: var(--ink); /* 第二層技術內容顏色 */ }
.diagram .note { color: var(--gray); font-size: 12.5px; /* 註記說明文字調淡 */ }

/* ── RWD ─────────────────────────────────────── */
/* 窄屏：datasheet 拆成直式 spec 區塊，免橫向捲動 */
@media (max-width: 720px) {
  .ds-wrap { border: none; overflow: visible; }
  table.ds { min-width: 0; border: 1px solid var(--ink); display: block; }
  .ds caption { display: block; }
  .ds thead { display: none; }
  .ds tbody, .ds tr, .ds td { display: block; width: 100%; }
  .ds tr { border-bottom: 2px solid var(--ink); }
  .ds tbody tr:last-child { border-bottom: none; }
  .ds td {
    border-right: none; border-bottom: 1px solid var(--hair-2);
    padding: 11px 16px; display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: baseline;
  }
  .ds tr td:last-child { border-bottom: none; }
  .ds td::before {
    content: attr(data-label); font-family: var(--mono); font-size: 12px;
    color: var(--gray); letter-spacing: 0.1em; text-transform: uppercase; align-self: center;
  }
  .ds td:empty { display:none; }
  .ba { grid-template-columns: 1fr; }
  .ba-col + .ba-col { border-left: none; border-top: 1px solid var(--hair); }
}
@media (max-width: 860px) {
  .nav-rev { display:none; }
  .nav-in { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 0; }
  .brand { padding-bottom: 12px; }
  .nav-links {
    order: 3; width: 100%; gap: 20px; margin: 0;
    overflow-x: auto; flex-wrap: nowrap;
    border-top: 1px solid var(--hair); padding: 11px 0;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { height: 0; }
  .nav-links a { white-space: nowrap; border-bottom: none; padding-bottom: 0; }
  .row { grid-template-columns: 1fr; gap: 18px; padding: 48px 0; }
  .rail { display:flex; align-items:center; gap:14px; }
  .rail .tag { writing-mode: horizontal-tb; margin-top:0; }
  .about-grid { grid-template-columns: 1fr; }
  .diagram-split { grid-template-columns: 1fr; /* 窄螢幕下改為單欄上下排列，防止橫向擠壓 */ }
  .spec { grid-template-columns: 40px 1fr; }
  .spec .stack { grid-column: 2; text-align:left; white-space: normal; margin-top: 8px; }
  .fb-grid { grid-template-columns: 1fr; }
  .fb-cell { border-right:none; }
  .tb { grid-template-columns: 1fr 1fr; }
  .tb .cell:nth-child(2n){ border-right:none; }
  .proc-step, .faq-item { grid-template-columns: 50px 1fr; gap: 16px; }
}

/* ════════════════════════════════════════════════════════════
   FX — 工程製圖式特效（漸進增強）
   靜態質感（字體 / 紙紋 / a11y）恆常生效；
   動態僅在 prefers-reduced-motion:no-preference 且 <html.fx-ready> 生效。
   所有動作皆須是「製圖機 / 量測儀會做的動作」。
   ════════════════════════════════════════════════════════════ */

/* ── 質感層｜恆常生效、零 JS ─────────────────────────────── */

/* a11y + 老花友善：淡灰小字提深、承載內容的小字升 16px */
:root {
  --faint: #63605a;             /* 由 #6f6c64 提深，對 --paper 對比 > 4.5:1 */
}
.ds .use, .faq-item .fq-a, .proc-step p { font-size: 16px; }

/* 數字對齊：工程感的根本——等寬數字、關閉 mono 連字 */
.mono, .est, .nav-rev, .rail .no, .sn, .pn, .fq-n,
.ds .m, .ds .code, .ds .price, .note .v, .stack,
.tb .v, .disc, .fb-cell a, .fb-cell .v, .dim span {
  font-variant-numeric: tabular-nums lining-nums;
}
.mono, .est, .nav-rev, .stack, .ds .m, .ds .code, .price {
  font-variant-ligatures: none;   /* 標籤裡的 → / -- 不被合體 */
}

/* 標題排版：襯線大標優化字形渲染 + 短標題自動平衡斷行 */
.hero h1, .sec-head h2, .spec .body h3, .ds .name,
.about-body p, .fq-q, .proc-step h3, .plan {
  text-rendering: optimizeLegibility;
}
.sec-head h2, .spec .body h3, .fq-q, .proc-step h3 { text-wrap: balance; }

/* 連結底線改工程細線 */
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* sticky nav 下的錨點跳轉不被遮住 */
section[id], header[id] { scroll-margin-top: 92px; }

/* 方格紙維持原本單層 26px 細格（見基礎樣式的 body::before），不再疊次方格——
   次方格較粗的線會與章節橫線 / 表格邊線 / 註記底線打架，看起來不工整。 */
/* 紙纖維紋理（固定、只加紋不加色、multiply 疊淡） */
body::after {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='140'%20height='140'%20filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .38; mix-blend-mode: multiply;
}
/* 印刷網點：委託單 / 規格表表頭這些 paper-2 條 → 像真的印刷表頭 */
.ds caption, .fb-cap {
  background-color: var(--paper-2);
  background-image: radial-gradient(rgba(26,26,24,0.055) 0.5px, transparent 0.6px);
  background-size: 5px 5px;
}

/* 資料面板填紙底：面板內只留自身邊線，底圖格線不穿透 → 表格 / 委託單 / 註記工整 */
.ds-wrap, .form-block, .ba, .notes { background: var(--paper); }
/* 註記面板填紙底後需橫向內距，否則右對齊的值會貼齊面板邊緣、看似被裁
   （橫線仍滿版對齊 .notes 上緣線，只有內容內縮，維持 datasheet 一致感） */
.note { padding-left: 16px; padding-right: 16px; }

/* ── 互動層｜針筆 / 油墨壓印 hover（含鍵盤 focus，恆常生效）──── */
.spec, .proc-step { position: relative; transition: background .18s ease; }
.spec::before, .proc-step::before {
  content:''; position:absolute; left:-4px; top:18%; bottom:18%; width:2px;
  background: var(--blue); transform: scaleY(0); transform-origin: top;
  transition: transform .22s ease;
}
.spec:hover, .spec:focus-within,
.proc-step:hover, .proc-step:focus-within { background: var(--paper-2); }
.spec:hover::before, .spec:focus-within::before,
.proc-step:hover::before, .proc-step:focus-within::before { transform: scaleY(1); }

/* datasheet 逐列 hover：左緣藍色油墨壓印（inset 實線非發光） */
table.ds tbody tr { transition: background .16s ease; }
table.ds tbody tr:not(.featured):hover td { background: var(--paper-2); }
table.ds tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--blue); }

/* ── 動態層｜僅 no-preference + JS 就緒 ───────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* 章節進場：datum 校準對位 */
  html.fx-ready section .row > .datum {
    opacity: 0; transform: scale(.6);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  html.fx-ready section .row.is-visible > .datum { opacity: .5; transform: scale(1); }
  html.fx-ready section .row.is-visible > .datum.tr { transition-delay: .06s; }

  /* 章節線由左落筆 */
  html.fx-ready section .row .sec-head .rule {
    transform: scaleX(0); transform-origin: left;
    transition: transform .55s cubic-bezier(.4,0,.1,1) .1s;
  }
  html.fx-ready section .row.is-visible .sec-head .rule { transform: scaleX(1); }

  /* 標題 / 編號軌微升揭示 */
  html.fx-ready section .row .sec-head h2,
  html.fx-ready section .row .sec-head .en,
  html.fx-ready section .row .rail .no,
  html.fx-ready section .row .rail .tag,
  html.fx-ready section .row > div > .lead {
    opacity: 0; transform: translateY(6px);
    transition: opacity .5s ease, transform .5s ease;
  }
  html.fx-ready section .row.is-visible .sec-head h2,
  html.fx-ready section .row.is-visible .sec-head .en,
  html.fx-ready section .row.is-visible .rail .no,
  html.fx-ready section .row.is-visible .rail .tag,
  html.fx-ready section .row.is-visible > div > .lead { opacity: 1; transform: none; }
  html.fx-ready section .row.is-visible .sec-head .en { transition-delay: .08s; }
  html.fx-ready section .row.is-visible .rail .tag { transition-delay: .12s; }

  /* 逐列印出：spec / proc / faq / datasheet 列 stagger（位移 ≤5px、短） */
  html.fx-ready section .row .spec,
  html.fx-ready section .row .proc-step,
  html.fx-ready section .row .faq-item,
  html.fx-ready section .row table.ds tbody tr {
    opacity: 0; transform: translateY(5px);
    transition: opacity .45s ease, transform .45s ease;
    transition-delay: calc(var(--i, 0) * 45ms);
  }
  html.fx-ready section .row.is-visible .spec,
  html.fx-ready section .row.is-visible .proc-step,
  html.fx-ready section .row.is-visible .faq-item,
  html.fx-ready section .row.is-visible table.ds tbody tr { opacity: 1; transform: none; }

  /* ── Hero 招牌時刻：出圖 plot-in ── */
  html.fx-ready header.hero > .est {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .5s steps(18) .05s;
  }
  html.fx-ready header.hero.hero-in > .est { clip-path: inset(0 0 0 0); }

  html.fx-ready header.hero h1 {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .72s steps(26) .18s;   /* steps＝plotter 逐段落筆 */
  }
  html.fx-ready header.hero.hero-in h1 { clip-path: inset(0 0 0 0); }

  html.fx-ready header.hero .hero-deck {
    opacity: 0; transform: translateY(8px);
    transition: opacity .6s ease .5s, transform .6s ease .5s;
  }
  html.fx-ready header.hero.hero-in .hero-deck { opacity: 1; transform: none; }

  html.fx-ready header.hero .hero-meta {
    opacity: 0; transform: translateY(8px);
    transition: opacity .55s ease .62s, transform .55s ease .62s;
  }
  html.fx-ready header.hero.hero-in .hero-meta { opacity: 1; transform: none; }

  /* 尺寸線：隨 .hero-meta 一起淡入即可。
     不可用 clip-path 揭示——.dim 僅 1px 高，clip 會連同溢出的標籤文字一起裁掉（文字會消失）。 */

  /* 角標 / 基準靶 的進場動效（靜態顯示則由下方 base 規則負責） */
  html.fx-ready header.hero.hero-in .cm { transition: opacity .4s ease; }
  html.fx-ready header.hero.hero-in .cm.tr { transition-delay: .06s; }
  html.fx-ready header.hero.hero-in .cm.bl { transition-delay: .12s; }
  html.fx-ready header.hero.hero-in .cm.br { transition-delay: .18s; }
  html.fx-ready header.hero.hero-in .hf-datum { transition: opacity .5s ease .3s, transform .5s ease .3s; }
}

/* ── Hero 製圖角標 / 基準靶 / CAD 游標（JS 注入的 .hero-frame）──── */
.hero-frame { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-frame .cm { position: absolute; width: 14px; height: 14px; opacity: 0; }
header.hero.hero-in .cm { opacity: .55; }
.hero-frame .cm::before, .hero-frame .cm::after { content:''; position:absolute; background: var(--blue); }
.hero-frame .cm::before { width: 14px; height: 1px; }
.hero-frame .cm::after  { width: 1px;  height: 14px; }
.cm.tl { top: -1px; left: -1px; }   .cm.tl::before { top:0; left:0; }   .cm.tl::after { top:0; left:0; }
.cm.tr { top: -1px; right: -1px; }  .cm.tr::before { top:0; right:0; }  .cm.tr::after { top:0; right:0; }
.cm.bl { bottom: -1px; left: -1px; } .cm.bl::before { bottom:0; left:0; } .cm.bl::after { bottom:0; left:0; }
.cm.br { bottom: -1px; right: -1px; } .cm.br::before { bottom:0; right:0; } .cm.br::after { bottom:0; right:0; }

.hf-datum {
  position: absolute; top: 6px; right: 0; width: 15px; height: 15px;
  border: 1px solid var(--blue); border-radius: 50%;
  opacity: 0; transform: scale(.7);
}
header.hero.hero-in .hf-datum { opacity: .5; transform: scale(1); }
.hf-datum::before, .hf-datum::after { content:''; position:absolute; background: var(--blue); opacity:.8; }
.hf-datum::before { left: 7px; top: -4px; width: 1px; height: 23px; }   /* 十字：垂直臂穿出圓 */
.hf-datum::after  { top: 7px; left: -4px; height: 1px; width: 23px; }   /* 十字：水平臂穿出圓 */

/* ── 全站 CAD 十字游標（JS 注入，僅桌機 pointer:fine）──────────────
   固定全視窗、跟指標移動；z-index 40 壓在 nav(50) 之下 → 導覽列保持乾淨。 */
.cad-cursor { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.cad-cursor .cad-x, .cad-cursor .cad-y {
  position: absolute; background: var(--blue); opacity: 0;
  transition: opacity .22s ease; will-change: transform;
}
.cad-cursor.on .cad-x, .cad-cursor.on .cad-y { opacity: .16; }
.cad-cursor .cad-x { top: 0; bottom: 0; width: 1px; left: 0; }   /* 垂直線，跟 X */
.cad-cursor .cad-y { left: 0; right: 0; height: 1px; top: 0; }   /* 水平線，跟 Y */

/* 行動裝置：收起 hero 製圖框與 CAD 游標（避免擁擠、省效能） */
@media (max-width: 860px) {
  .hero-frame .cm, .hf-datum, .cad-cursor { display: none; }
}