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