/* 哈洛克 Haloke — site.css（V2：派案單紙本感）
   全站唯一的樣式表。設計規格在 design/README.md，逐頁數值對照 design/v2-*.dc.html。
   撰寫原則：手機優先、零 JS（選單與 FAQ 都是原生 <details>）、所有小字對比度 ≥ 4.5:1。
   ------------------------------------------------------------------ */

:root {
  --hk-paper: #F3EFE6;
  --hk-card: #FFFDF9;
  --hk-card-hover: #F8F4EB;
  --hk-ink: #1C1A17;
  --hk-text: #3F3B33;
  --hk-text-2: #5C5849;
  --hk-label: #6A6557;
  --hk-line: #D9D2C3;
  --hk-line-2: #EAE4D6;
  --hk-line-3: #BDB39E;

  --hk-primary: #2B4E8F;
  --hk-primary-hover: #1F3A6E;
  --hk-primary-tint: #E3EAF5;
  --hk-on-dark-1: #B9C8E3;
  --hk-on-dark-2: #DDE6F5;
  --hk-on-dark-text: #C9C2B3;
  --hk-on-dark-body: #E4DECF;

  --hk-stamp: #B23A2E;
  --hk-stamp-tint: #F7E5E1;

  /* 四類任務各一色（全站一致） */
  --hk-yt: #B23A2E;   --hk-yt-tint: #F7E5E1;
  --hk-ind: #0F6E63;  --hk-ind-tint: #DDF1EC;
  --hk-blog: #6A3D9A; --hk-blog-tint: #EEE7F6;
  --hk-soc: #A64A08;  --hk-soc-tint: #F9E9DA;

  --hk-serif: 'Noto Serif TC', 'Songti TC', serif;
  --hk-sans: 'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --hk-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --hk-r-lg: 10px;
  --hk-r: 8px;
  --hk-r-btn: 6px;
  --hk-r-tag: 4px;
  --hk-shadow: 0 10px 30px rgba(28, 26, 23, .06);
  --hk-shadow-hover: 0 14px 30px rgba(28, 26, 23, .10);

  /* 元件用的「色調」變數，由 .tone-* 覆寫 */
  --tone: var(--hk-primary);
  --tone-tint: var(--hk-primary-tint);
}

.tone-primary { --tone: var(--hk-primary); --tone-tint: var(--hk-primary-tint); }
.tone-stamp { --tone: var(--hk-stamp); --tone-tint: var(--hk-stamp-tint); }
.tone-yt { --tone: var(--hk-yt); --tone-tint: var(--hk-yt-tint); }
.tone-ind { --tone: var(--hk-ind); --tone-tint: var(--hk-ind-tint); }
.tone-blog { --tone: var(--hk-blog); --tone-tint: var(--hk-blog-tint); }
.tone-soc { --tone: var(--hk-soc); --tone-tint: var(--hk-soc-tint); }
.tone-muted { --tone: var(--hk-label); --tone-tint: var(--hk-paper); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* 全站索引打開時，背景不跟著捲 */
html:has(#hk-menu[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--hk-paper);
  color: var(--hk-ink);
  font-family: var(--hk-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

a { color: var(--hk-primary); text-decoration: none; }
a:hover { color: var(--hk-primary-hover); }
strong, b { font-weight: 700; }
strong { color: var(--hk-ink); }

:focus-visible { outline: 3px solid var(--hk-primary); outline-offset: 2px; }

/* ---------- 版面骨架 ---------- */
.hk-sec { padding: 36px 16px 8px; }
.hk-sec--first { padding-top: 32px; }
.hk-sec--near { padding-top: 24px; }
.hk-sec--last { padding-bottom: 0; }
.hk-wrap { max-width: 1128px; margin: 0 auto; }

.hk-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.hk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.hk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.hk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.hk-grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.hk-grid--stretch { align-items: stretch; }
.hk-grid--center { align-items: center; }

.hk-stack { display: flex; flex-direction: column; gap: 14px; }
.hk-stack--lg { gap: 20px; }
.hk-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hk-row--between { justify-content: space-between; }
.hk-row--base { align-items: baseline; }

/* ---------- 文字 ---------- */
.hk-h1 {
  font-family: var(--hk-serif); font-weight: 900;
  font-size: clamp(36px, 5.4vw, 62px); line-height: 1.15; letter-spacing: -.01em;
  text-wrap: balance;
}
.hk-h1--xl { font-size: clamp(38px, 6vw, 68px); line-height: 1.1; }
.hk-h1--md { font-size: clamp(34px, 5vw, 58px); }
.hk-h1--article { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.25; }
.hk-h2 {
  font-family: var(--hk-serif); font-weight: 900;
  font-size: clamp(24px, 3.2vw, 38px); line-height: 1.3; text-wrap: balance;
}
.hk-h2--md { font-size: clamp(22px, 3vw, 30px); }
.hk-h3 { font-family: var(--hk-serif); font-weight: 900; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.4; }
.hk-h4 { font-family: var(--hk-serif); font-weight: 700; font-size: clamp(17px, 2vw, 20px); line-height: 1.45; }
.hk-lede { font-size: 16px; line-height: 1.95; color: var(--hk-text); text-wrap: pretty; max-width: 52ch; }
.hk-lede--lg { font-size: 17px; line-height: 1.9; max-width: 44ch; }
.hk-p { font-size: 15px; line-height: 1.95; color: var(--hk-text); text-wrap: pretty; }
.hk-p--sm { font-size: 14px; line-height: 1.85; }
.hk-small { font-size: 13px; line-height: 1.7; color: var(--hk-text-2); }
.hk-muted { color: var(--hk-label); }
.hk-mono { font-family: var(--hk-mono); }

/* 中文標題只在標點與空白處換行，避免 balance 把「接案／平台」這類詞拆成兩行；
   沒有斷點的長句由 overflow-wrap 兜底，不會撐破版面 */
.hk-h1, .hk-h2, .hk-h3, .hk-h4 { word-break: keep-all; overflow-wrap: anywhere; }

/* 標籤：Plex Mono 小字 */
.hk-label {
  display: inline-block;
  font-family: var(--hk-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .14em; line-height: 1.6; color: var(--hk-label);
}
.hk-label--md { font-size: 12px; }
.hk-label--tone { color: var(--tone); }

/* 印章：派案單上的紅色標記 */
.hk-stamp {
  display: inline-block;
  font-family: var(--hk-mono); font-size: 12px; letter-spacing: .12em; line-height: 1.5;
  color: var(--hk-stamp); border: 1.5px solid var(--hk-stamp); border-radius: var(--hk-r-tag);
  padding: 5px 10px; transform: rotate(-1.5deg);
}
.hk-stamp--flat { transform: none; }
.hk-stamp--sm { font-size: 11px; padding: 3px 8px; }
.hk-stamp--plain { color: var(--hk-text); border: 1px solid var(--hk-line-3); transform: none; }

/* 小標籤（任務色） */
.hk-tag {
  display: inline-block; white-space: nowrap;
  font-size: 12px; font-weight: 700; line-height: 1.5;
  padding: 4px 10px; border-radius: var(--hk-r-tag);
  background: var(--tone-tint); color: var(--tone);
}
.hk-tag--plain { background: var(--hk-paper); border: 1px solid var(--hk-line); color: var(--hk-text); }

/* 任務色直條 */
.hk-bar { display: block; width: 6px; height: 44px; border-radius: 3px; background: var(--tone); flex: none; }
.hk-bar--sm { height: 28px; }
.hk-bar--fill { height: 100%; min-height: 36px; }

/* ---------- 按鈕 ---------- */
.hk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 24px; border-radius: var(--hk-r-btn);
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
  text-align: center; border: 0; cursor: pointer;
}
.hk-btn--primary { background: var(--hk-primary); color: #fff; }
.hk-btn--primary:hover { background: var(--hk-primary-hover); color: #fff; }
.hk-btn--outline { border: 1.5px solid var(--hk-ink); color: var(--hk-ink); background: transparent; }
.hk-btn--outline:hover { background: var(--hk-ink); color: #fff; }
.hk-btn--onDark { background: #fff; color: var(--hk-primary); }
.hk-btn--onDark:hover { background: var(--hk-primary-tint); color: var(--hk-primary-hover); }
.hk-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .6); color: #fff; }
.hk-btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hk-btn--paper { background: var(--hk-paper); color: var(--hk-ink); min-height: 48px; padding: 0 22px; font-size: 15px; }
.hk-btn--paper:hover { background: #fff; color: var(--hk-ink); }
.hk-btn--sm { min-height: 44px; padding: 0 16px; font-size: 14px; }

.hk-more { font-size: 14px; font-weight: 700; color: var(--hk-primary); }

/* ---------- 麵包屑 ---------- */
.hk-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: var(--hk-mono); font-size: 12px; letter-spacing: .06em; color: var(--hk-label);
  margin-bottom: 22px;
}
.hk-crumbs a { color: var(--hk-label); }
.hk-crumbs a:hover { color: var(--hk-primary); }
.hk-crumbs b { color: var(--hk-ink); font-weight: 600; }

/* ---------- 頁首 ---------- */
.hk-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 48px; }
.hk-head--ruled { align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--hk-ink); }
.hk-head--split { gap: 28px 48px; align-items: start; }
.hk-head--center { align-items: center; }
.hk-head__main { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; min-width: 0; }
.hk-head--ruled .hk-head__main { gap: 14px; }

/* ---------- 面板與卡片 ---------- */
.hk-panel {
  background: var(--hk-card); border: 1px solid var(--hk-line); border-radius: var(--hk-r-lg);
  padding: clamp(22px, 3.2vw, 36px); min-width: 0;
}
.hk-panel--lg { padding: clamp(24px, 3.6vw, 44px); }
.hk-panel--tint { background: var(--tone-tint); border-color: transparent; }
.hk-panel--dark { background: var(--hk-ink); border-color: var(--hk-ink); color: var(--hk-paper); }
.hk-panel--dark .hk-label { color: var(--hk-on-dark-1); }
.hk-panel--dark .hk-p, .hk-panel--dark .hk-small { color: var(--hk-on-dark-text); }
.hk-panel--dark strong { color: #fff; }
.hk-panel--dark a:not(.hk-btn) { color: var(--hk-on-dark-1); text-decoration: underline; text-underline-offset: 3px; }
.hk-panel--primary { background: var(--hk-primary); border-color: var(--hk-primary); color: #fff; }
.hk-panel--primary .hk-p, .hk-panel--primary .hk-small { color: var(--hk-on-dark-2); }
.hk-panel--primary .hk-label { color: var(--hk-on-dark-2); }
.hk-panel__title { margin: 8px 0 6px; }

.hk-card {
  background: var(--hk-card); border: 1px solid var(--hk-line); border-radius: var(--hk-r);
  padding: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--hk-ink); min-width: 0;
}
.hk-card--top { border-top: 4px solid var(--tone); }
.hk-card--top3 { border-top: 3px solid var(--tone); }
.hk-card--soft { background: var(--hk-paper); border-color: transparent; padding: 20px; }
.hk-card--link { transition: transform .18s ease, box-shadow .18s ease; }
.hk-card--link:hover { transform: translateY(-3px); box-shadow: var(--hk-shadow-hover); color: var(--hk-ink); }
.hk-card__more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--hk-primary); }
.hk-card__rule { border-top: 1px dashed var(--hk-line); padding-top: 12px; margin-top: 6px; }

/* 任務卡 */
.hk-task__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.hk-task__pay { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.hk-task__mode { font-size: 13px; color: var(--hk-label); }
.hk-points { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; border-top: 1px dashed var(--hk-line); padding-top: 12px; }
.hk-points li { display: grid; grid-template-columns: 12px 1fr; gap: 8px; font-size: 13px; line-height: 1.6; color: var(--hk-text); }
.hk-points li::before { content: "—"; color: var(--tone); }

/* ---------- 價格 ---------- */
.hk-price { font-family: var(--hk-mono); font-weight: 600; line-height: 1; letter-spacing: -.01em; color: var(--tone); font-size: 30px; white-space: nowrap; }
.hk-price--sm { font-size: 22px; }
.hk-price--md { font-size: 26px; }
.hk-price--lg { font-size: clamp(48px, 8vw, 68px); letter-spacing: -.02em; }
.hk-price--range { font-size: clamp(30px, 5.4vw, 46px); line-height: 1.1; letter-spacing: -.02em; white-space: normal; }
.hk-unit { font-size: 13px; color: var(--hk-label); }
.hk-unit--strong { font-size: 16px; font-weight: 700; color: var(--hk-text); }

/* ---------- 派案單式的表單卡 ---------- */
.hk-sheet { background: var(--hk-card); border: 1px solid var(--hk-line); border-radius: var(--hk-r-lg); min-width: 0; overflow: hidden; }
.hk-sheet--raised { box-shadow: 0 1px 0 #fff inset, var(--hk-shadow); }
.hk-sheet--top { border-top: 4px solid var(--tone); }
.hk-sheet__bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--hk-line);
  font-family: var(--hk-mono); font-size: 11px; letter-spacing: .12em; color: var(--hk-label);
}
.hk-sheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; padding: 18px 20px; border-bottom: 1px solid var(--hk-ink); }
.hk-sheet__body { padding: 22px 20px 18px; }
.hk-sheet__foot { padding: 14px 20px; font-size: 13px; color: var(--hk-text-2); line-height: 1.7; }
.hk-sheet__foot--rule { border-top: 1px solid var(--hk-line-2); }

/* 一列一項：色條＋名稱＋右側數字 */
.hk-rowlist > li { border-bottom: 1px solid var(--hk-line-2); }
.hk-rowlist > li:last-child { border-bottom: 0; }
.hk-rowlink {
  display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 20px 16px 16px; color: var(--hk-ink);
}
.hk-rowlink--nobar { grid-template-columns: minmax(0, 1fr) auto; padding: 18px 20px; gap: 8px 24px; }
a.hk-rowlink:hover { background: var(--hk-card-hover); color: var(--hk-ink); }
.hk-rowlink__t { display: block; font-family: var(--hk-serif); font-weight: 700; font-size: 18px; line-height: 1.3; }
.hk-rowlink__d { display: block; font-size: 13px; color: var(--hk-label); margin-top: 3px; line-height: 1.6; }
.hk-rowlink__v { text-align: right; }
.hk-rowlink__v .hk-unit { display: block; font-size: 12px; margin-top: 4px; }
@media (max-width: 420px) {
  .hk-rowlink { gap: 12px; padding-right: 14px; }
  .hk-rowlink__t { font-size: 16px; }
  .hk-rowlink .hk-price--md { font-size: 22px; }
}

/* 無外框的色條清單（行情對照、派案單列） */
.hk-ruled { display: flex; flex-direction: column; border-top: 1px solid var(--hk-ink); }
.hk-ruled > li { border-bottom: 1px solid var(--hk-line-2); }
.hk-ruled--primary { border-top-color: var(--hk-primary); }
.hk-ruled--primary > li { border-bottom: 1px dashed var(--hk-on-dark-1); }
.hk-ruled--dark { border-top-color: rgba(243, 239, 230, .25); }
.hk-ruled--dark > li { border-bottom-color: rgba(243, 239, 230, .18); }
.hk-cmprow { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; color: var(--hk-ink); }
.hk-cmprow:hover { color: var(--hk-ink); }
.hk-cmprow:hover .hk-cmprow__n { color: var(--hk-primary); }
.hk-cmprow__n { display: block; font-weight: 700; font-size: 15px; }
.hk-cmprow__d { display: block; font-size: 12px; color: var(--hk-label); line-height: 1.6; margin-top: 2px; }
.hk-cmprow--stack { grid-template-columns: 6px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.hk-cmprow--stack .hk-cmprow__d { font-size: 13px; color: var(--hk-text); line-height: 1.7; }
.hk-cmprow__line { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hk-cmprow__line b:last-child { font-family: var(--hk-mono); color: var(--tone); }

/* 編號清單（流程、因素、方法） */
.hk-numlist > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; align-items: start; }
.hk-numlist--sm > li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 12px 0; font-size: 14px; line-height: 1.8; color: var(--hk-text); }
.hk-numlist__no { font-family: var(--hk-mono); font-size: 13px; color: var(--hk-label); padding-top: 4px; }
.hk-numlist--sm .hk-numlist__no { padding-top: 2px; }
.hk-numlist__t { display: block; font-size: 16px; font-weight: 700; margin-bottom: 3px; line-height: 1.6; }
.hk-numlist__d { display: block; font-size: 14px; line-height: 1.75; color: var(--hk-text); }
.hk-numlist--factor .hk-numlist__t { font-size: 15px; margin-bottom: 4px; }
.hk-numlist--factor .hk-numlist__d { line-height: 1.8; }
.hk-panel--dark .hk-numlist__no { color: var(--hk-on-dark-1); }
.hk-panel--dark .hk-numlist__d, .hk-panel--dark .hk-numlist--sm > li { color: var(--hk-on-dark-text); }
.hk-panel--dark .hk-numlist--sm > li { color: var(--hk-on-dark-body); }

/* 小編號清單（卡片內的目錄、派案單欄位） */
.hk-idx > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px dashed var(--hk-line-2); font-size: 14px; line-height: 1.7; }
.hk-idx--tag > li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; border-top-color: var(--hk-line); }
.hk-idx--tag > li > span:nth-child(2) { font-weight: 700; }
.hk-idx > li > span:first-child { font-family: var(--hk-mono); font-size: 12px; color: var(--hk-label); padding-top: 1px; }
.hk-idx--primary > li > span:first-child { color: var(--hk-primary); font-size: 13px; }
.hk-idx > li > span:nth-child(3) { font-family: var(--hk-mono); font-size: 12px; color: var(--hk-label); }
.hk-idx--toc > li { display: block; padding: 0; }
.hk-idx--toc a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 7px 0; font-size: 13px; line-height: 1.6; color: var(--hk-text); }
.hk-idx--toc a:hover { color: var(--hk-primary); }
.hk-idx--toc a > span:first-child { font-family: var(--hk-mono); font-size: 12px; color: var(--hk-label); }

/* ---------- 條列 ---------- */
.hk-list { display: flex; flex-direction: column; gap: 12px; }
.hk-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.9; color: var(--hk-text); }
.hk-list--sm li { font-size: 14px; line-height: 1.85; }
.hk-list--ink li { color: var(--hk-ink); }
.hk-list--check li::before { content: "✓"; color: var(--hk-primary); font-weight: 700; }
.hk-list--cross li::before { content: "✕"; color: var(--tone); font-weight: 700; }
.hk-list--x li::before { content: "✕"; color: var(--hk-stamp); font-weight: 700; }
.hk-list--dot li::before { content: "—"; color: var(--hk-primary); }
.hk-list--strike li::before { content: "✓"; color: var(--hk-label); text-decoration: line-through; }
.hk-list--num li { grid-template-columns: 24px minmax(0, 1fr); }
.hk-list--num li > span:first-child { font-family: var(--hk-mono); font-size: 12px; color: var(--tone); padding-top: 5px; }
.hk-list--defs li > span { display: block; }
.hk-list--defs b { display: block; font-size: 15px; }
.hk-list--defs b + span { font-size: 14px; color: var(--hk-text); line-height: 1.8; }
ol.hk-list--ol li { grid-template-columns: 28px minmax(0, 1fr); }
ol.hk-list--ol li > span:first-child { font-family: var(--hk-mono); font-size: 13px; color: var(--tone); padding-top: 3px; }
.hk-panel--dark .hk-list li { color: var(--hk-on-dark-body); }
.hk-panel--dark .hk-list--dot li::before { color: var(--hk-on-dark-1); }


/* 注記：左側主色線 */
.hk-note {
  margin-top: 16px; padding: 14px 16px;
  border-left: 3px solid var(--hk-primary); background: var(--hk-primary-tint);
  border-radius: 0 6px 6px 0; font-size: 14px; line-height: 1.8; color: var(--hk-ink);
}
.hk-note--paper { background: var(--hk-paper); }
.hk-dashline { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hk-on-dark-1); font-size: 13px; line-height: 1.75; color: var(--hk-text); }
.hk-panel--tint.tone-stamp .hk-dashline { border-top-color: #E3B9B2; }

/* 先講結論 */
.hk-answer { background: var(--hk-primary-tint); border-left: 3px solid var(--hk-primary); border-radius: 0 8px 8px 0; padding: 16px 20px; }
.hk-answer p { font-size: 16px; line-height: 1.9; color: var(--hk-ink); font-weight: 500; }
.hk-answer .hk-label { color: var(--hk-primary); margin-bottom: 6px; display: block; }

/* ---------- 對照表（首頁：一般平台 vs 哈洛克） ---------- */
.hk-cmp { border-top: 1px solid var(--hk-ink); }
.hk-cmp__row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hk-line-2); align-items: start; }
.hk-cmp__row--head { padding: 10px 0; border-bottom-color: var(--hk-line); font-family: var(--hk-mono); font-size: 11px; letter-spacing: .12em; color: var(--hk-label); }
.hk-cmp__row--head span:last-child { color: var(--hk-primary); }
.hk-cmp__k { font-size: 14px; font-weight: 700; color: var(--hk-text); }
.hk-cmp__a { font-size: 14px; color: var(--hk-label); text-decoration: line-through; line-height: 1.7; }
.hk-cmp__b { font-size: 15px; font-weight: 700; line-height: 1.7; }
@media (max-width: 520px) {
  .hk-cmp__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 14px; }
  .hk-cmp__k { grid-column: 1 / -1; }
  .hk-cmp__row--head span:first-child { display: none; }
}

/* 實收對照 */
.hk-net { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hk-net + .hk-net { padding-top: 10px; }
.hk-net--rule { padding-bottom: 10px; border-bottom: 1px dashed var(--hk-on-dark-1); }
.hk-net__x { font-family: var(--hk-mono); font-size: 20px; font-weight: 500; color: var(--hk-label); text-decoration: line-through; }

/* 行內小清單：dl 三格（首頁 Hero） */
.hk-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 0 28px; margin-top: 8px; }
.hk-facts dt { font-family: var(--hk-mono); font-size: 11px; letter-spacing: .12em; color: var(--hk-label); }
.hk-facts dd { font-weight: 700; font-size: 15px; }

/* 卡內鍵值（任務報酬卡、條款、法律頁） */
.hk-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--hk-line-2); }
.hk-kv dt { font-size: 13px; color: var(--hk-label); padding-top: 2px; }
.hk-kv dd { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.7; }
.hk-kvs { display: flex; flex-direction: column; border-top: 1px solid var(--hk-ink); }
.hk-kvs .hk-kv { border-top: 0; border-bottom: 1px solid var(--hk-line-2); padding: 14px 0; }
.hk-kvs .hk-kv dt { font-weight: 700; padding-top: 3px; }
.hk-kvs .hk-kv dd { font-size: 15px; font-weight: 400; line-height: 1.85; color: var(--hk-ink); }
.hk-kvs--wide .hk-kv { grid-template-columns: 110px minmax(0, 1fr); padding: 12px 0; }
.hk-kvs--wide .hk-kv dd { font-size: 14px; }
.hk-kv code { font-family: var(--hk-mono); font-size: 13px; background: var(--hk-paper); padding: 1px 6px; border-radius: 4px; }
@media (max-width: 480px) {
  .hk-kvs--wide .hk-kv { grid-template-columns: 1fr; gap: 2px; }
}

/* 六因素：灰底小卡 */
.hk-factor { background: var(--hk-paper); border-radius: var(--hk-r-btn); padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.hk-factor dt { font-family: var(--hk-mono); font-size: 11px; color: var(--hk-label); }
.hk-factor dd { font-size: 15px; font-weight: 700; }
.hk-factor dd + dd { grid-column: 2; font-size: 13px; font-weight: 400; color: var(--hk-text-2); line-height: 1.7; }

/* 規格卡（派案單會寫明） */
.hk-spec { background: var(--hk-paper); border-radius: var(--hk-r); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.hk-spec__v { font-family: var(--hk-serif); font-size: 19px; font-weight: 700; line-height: 1.4; }
.hk-spec__d { font-size: 13px; color: var(--hk-text-2); line-height: 1.75; }

/* 分區標題列（下緣墨線） */
.hk-bandhead { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--hk-ink); margin-bottom: 20px; }
.hk-bandhead--plain { border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; }
.hk-bandhead__t { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- 表格 ---------- */
.hk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hk-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.hk-table--sm { min-width: 560px; }
.hk-table th {
  text-align: left; padding: 12px 20px; border-bottom: 1px solid var(--hk-line-2);
  font-family: var(--hk-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--hk-label); white-space: nowrap;
}
.hk-table td { padding: 16px 20px; border-bottom: 1px solid var(--hk-line-2); vertical-align: top; font-size: 14px; color: var(--hk-text); line-height: 1.7; }
.hk-table--sm th, .hk-table--sm td { padding-left: 18px; padding-right: 18px; }
.hk-table td.is-name { font-family: var(--hk-serif); font-weight: 700; font-size: 16px; color: var(--hk-ink); }
.hk-table td.is-bold { font-family: var(--hk-sans); font-weight: 700; font-size: 15px; color: var(--hk-ink); }
.hk-table td.is-num { font-family: var(--hk-mono); font-weight: 600; font-size: 16px; color: var(--tone); white-space: nowrap; }
.hk-table tr.is-own td { background: var(--hk-primary-tint); }
.hk-table tbody tr:last-child td { border-bottom: 0; }
.hk-table__task { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--hk-ink); }
.hk-table__task:hover { color: var(--hk-primary); }
.hk-table__task .hk-bar { height: 38px; margin-top: 2px; }

/* ---------- FAQ 手風琴（原生 details） ---------- */
.hk-acc { display: flex; flex-direction: column; border-top: 1px solid var(--hk-ink); min-width: 0; }
.hk-acc details { border-bottom: 1px solid var(--hk-line); }
.hk-acc summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 4px; min-height: 56px;
  font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--hk-ink);
}
.hk-acc summary::after {
  content: "+"; flex: none;
  font-family: var(--hk-mono); font-size: 22px; font-weight: 400; line-height: 1; color: var(--hk-primary);
  transition: transform .18s ease;
}
/* 旋轉只限 .hk-acc 範圍，否則會把選單的 × 轉成 + */
.hk-acc details[open] > summary::after { transform: rotate(45deg); }
.hk-acc__body { padding: 0 4px 20px; font-size: 15px; line-height: 1.95; color: var(--hk-text); text-wrap: pretty; }
.hk-acc--sm summary { font-size: 15px; padding: 16px 4px; min-height: 52px; }
.hk-acc--sm .hk-acc__body { padding-bottom: 18px; }
.hk-acc--inner { margin-top: 18px; border-top-color: var(--hk-line-3); }
.hk-acc--inner summary { font-size: 14px; min-height: 48px; padding: 12px 2px; }
.hk-acc--inner .hk-acc__body { font-size: 14px; }

/* 左標題、右手風琴 */
.hk-faqblock { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px 48px; align-items: start; }
.hk-faqblock__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (min-width: 900px) {
  .hk-faqblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
  .hk-faqblock__head--sticky { position: sticky; top: 140px; }
}

/* ---------- 照片 ---------- */
.hk-photo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hk-photo__img {
  display: block; width: 100%; aspect-ratio: var(--ar, 16 / 10); object-fit: cover;
  border-radius: var(--hk-r-btn); background: var(--hk-card-hover);
}
.hk-photo--flat .hk-photo__img, .hk-photo--flat .hk-photo__box { border-radius: 0; }
/* 佔位：還沒有實拍照時，只標比例與拍攝內容（Codex 之後補上寫實照片） */
.hk-photo__box {
  position: relative; aspect-ratio: var(--ar, 16 / 10);
  border: 1px dashed var(--hk-line-3); border-radius: var(--hk-r-btn);
  background: repeating-linear-gradient(135deg, var(--hk-line-2) 0 1px, transparent 1px 12px), var(--hk-card-hover);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 18px;
}
.hk-photo__tag { position: absolute; top: 10px; left: 12px; font-family: var(--hk-mono); font-size: 11px; letter-spacing: .14em; color: var(--hk-label); }
.hk-photo__ratio { font-family: var(--hk-mono); font-size: 26px; font-weight: 600; color: var(--hk-text); line-height: 1; }
.hk-photo__hint { font-size: 13px; color: var(--hk-text-2); line-height: 1.6; max-width: 26ch; }
.hk-photo figcaption { font-size: 12px; color: var(--hk-label); line-height: 1.6; }

/* ---------- 流程示意圖 ----------
   取代「證據型畫面」的照片：對話、派案單、驗收與撥款紀錄、平台揭露位置。
   一律帶可見的「流程示意」標記；內容不出現人名、帳號、金額或日期。 */
.hk-mock { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hk-mock__box {
  aspect-ratio: var(--ar, 4 / 5); height: auto;
  border-radius: var(--hk-r); background: var(--hk-card); border: 1px solid var(--hk-line);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
}
.hk-mock__tag {
  align-self: flex-start;
  font-family: var(--hk-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--hk-stamp); border: 1.5px solid var(--hk-stamp); border-radius: var(--hk-r-tag); padding: 2px 8px;
}
.hk-mock__title { font-family: var(--hk-serif); font-size: 14px; font-weight: 700; color: var(--hk-ink); }
.hk-mock__foot { margin-top: auto; font-size: 11px; line-height: 1.6; color: var(--hk-label); }
.hk-mock__chat { display: flex; flex-direction: column; gap: 7px; }
.hk-mock__bubble { font-size: 12px; line-height: 1.6; padding: 8px 11px; border-radius: 12px; max-width: 88%; }
.hk-mock__bubble--out { align-self: flex-end; background: var(--hk-primary); color: #fff; border-bottom-right-radius: 4px; }
.hk-mock__bubble--in { align-self: flex-start; background: var(--hk-paper); color: var(--hk-text); border: 1px solid var(--hk-line); border-bottom-left-radius: 4px; }
.hk-mock__sheet { display: flex; flex-direction: column; gap: 8px; background: var(--hk-paper); border: 1px solid var(--hk-line); border-radius: var(--hk-r-btn); padding: 12px; }
.hk-mock__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 11px; line-height: 1.5; }
.hk-mock__row b { font-weight: 700; color: var(--hk-text); }
.hk-mock__row u { text-decoration: none; color: var(--hk-label); }
.hk-mock__row i { width: 52px; height: 6px; border-radius: 3px; background: var(--hk-line); }
.hk-mock__row--last { border-top: 1px dashed var(--hk-line-3); padding-top: 8px; }
.hk-mock__row--last b { color: var(--hk-primary); }
.hk-mock__sheet--label { gap: 7px; }
.hk-mock__strip { font-size: 11px; font-weight: 700; color: var(--hk-ind); background: var(--hk-ind-tint); border-radius: 4px; padding: 6px 9px; }
.hk-mock__ghost { font-size: 11px; color: var(--hk-label); background: var(--hk-card); border-radius: 4px; padding: 7px 9px; }

/* ---------- 主色 CTA 帶 ---------- */
.hk-cta { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding: clamp(26px, 3.8vw, 44px); }
.hk-cta__text { display: flex; flex-direction: column; gap: 8px; }
.hk-cta__text .hk-p { max-width: 48ch; line-height: 1.8; }
.hk-cta--stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }

/* ---------- 導覽 ---------- */
.hk-nav { position: sticky; top: 0; z-index: 40; background: var(--hk-paper); border-bottom: 1px solid var(--hk-line); }
.hk-nav__bar { max-width: 1160px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; min-height: 64px; }
.hk-nav__logo { display: flex; align-items: center; gap: 10px; color: var(--hk-ink); flex: none; }
.hk-nav__logo:hover { color: var(--hk-ink); }
.hk-nav__mark { width: 30px; height: 30px; border-radius: 50%; flex: none; display: block; }
.hk-nav__name { font-family: var(--hk-serif); font-weight: 900; font-size: 22px; letter-spacing: .04em; line-height: 1; }
.hk-nav__tag { font-family: var(--hk-mono); font-size: 11px; letter-spacing: .14em; color: var(--hk-label); white-space: nowrap; }
.hk-nav__links { display: flex; gap: 2px; margin-left: auto; }
.hk-nav__link { padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--hk-text); border-bottom: 2px solid transparent; white-space: nowrap; }
.hk-nav__link:hover { color: var(--hk-ink); border-bottom-color: var(--hk-line-3); }
.hk-nav__link.is-active { font-weight: 700; color: var(--hk-ink); border-bottom-color: var(--hk-primary); }
.hk-nav__cta { margin-left: auto; flex: none; }

/* 手機：全站索引（details，零 JS） */
#hk-menu { flex: none; margin-left: auto; }
#hk-menu > summary {
  position: relative; z-index: 2;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--hk-ink); border-radius: var(--hk-r-btn); background: var(--hk-card);
}
.hk-i-open { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.hk-i-open i { display: block; width: 18px; height: 2px; background: var(--hk-ink); }
.hk-i-open i:last-child { width: 11px; background: var(--hk-primary); }
.hk-i-x { transform: none; font-family: var(--hk-mono); font-size: 22px; line-height: 1; color: var(--hk-ink); }
#hk-menu[open] > summary .hk-i-open { display: none; }
#hk-menu:not([open]) > summary .hk-i-x { display: none; }
.hk-index {
  position: fixed; inset: 0; z-index: 1; background: var(--hk-paper);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.hk-index__head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 16px; border-bottom: 2px solid var(--hk-ink); }
.hk-index__head b { font-family: var(--hk-serif); font-weight: 900; font-size: 22px; }
.hk-index__nav { flex: 1 0 auto; display: flex; flex-direction: column; padding: 4px 16px; }
.hk-index__group { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hk-line); }
.hk-index__name { padding-top: 10px; }
.hk-index__name span { display: block; font-family: var(--hk-mono); font-size: 11px; color: var(--hk-label); }
.hk-index__name b { display: block; font-family: var(--hk-serif); font-size: 17px; line-height: 1.35; }
.hk-index__links { display: flex; flex-direction: column; }
.hk-index__links a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--hk-ink); }
.hk-index__links a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: transparent; flex: none; }
.hk-index__links a.is-current { font-weight: 700; color: var(--hk-primary); }
.hk-index__links a.is-current::before { background: var(--hk-primary); }
.hk-index__foot {
  flex: none; padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 13px;
}
.hk-index__foot > a { font-family: var(--hk-mono); color: var(--hk-primary); }
.hk-index__foot span { display: flex; gap: 14px; }
.hk-index__foot span a { color: var(--hk-label); }

@media (max-width: 899px) { .hk-nav__links, .hk-nav__cta { display: none !important; } }
@media (min-width: 900px) { #hk-menu { display: none !important; } }
@media (max-width: 479px) { .hk-nav__tag { display: none !important; } }

/* ---------- 頁尾 ---------- */
.hk-foot { border-top: 1px solid var(--hk-line); margin-top: 40px; padding: 36px 16px 28px; background: var(--hk-paper); }
.hk-foot__inner { max-width: 1128px; margin: 0 auto; }
.hk-foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 28px; }
.hk-foot__brand { display: flex; flex-direction: column; gap: 12px; }
.hk-foot__brand p { font-size: 14px; line-height: 1.8; color: var(--hk-text); max-width: 32ch; word-break: keep-all; overflow-wrap: anywhere; }
.hk-foot__brand p.hk-mono { font-size: 13px; line-height: 1.9; color: var(--hk-text-2); }
.hk-foot__brand p.hk-mono a { color: var(--hk-text); }
.hk-foot__title { font-family: var(--hk-mono); font-size: 11px; letter-spacing: .14em; color: var(--hk-label); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--hk-line); }
.hk-foot__links { display: flex; flex-direction: column; gap: 9px; }
.hk-foot__links a { font-size: 14px; color: var(--hk-text); }
.hk-foot__links a:hover { color: var(--hk-primary); }
.hk-foot__bar {
  border-top: 1px solid var(--hk-line); margin-top: 30px; padding-top: 16px;
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center;
  font-family: var(--hk-mono); font-size: 12px; color: var(--hk-label);
}
.hk-foot__legal { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.hk-foot__legal a { color: var(--hk-label); white-space: nowrap; }
/* 手機的點擊範圍至少 44px 高（原本 21px），但視覺不變：上下各加 12px 內距再用負外距抵掉，
   排版位置與字距和設計稿一樣，只有看不見的可點區域變大。
   「返回頂部」只放在這裡，不做右下角浮動鈕：導覽列固定在頂端、捲到哪裡都能開全站索引；
   零 JS 的浮動鈕只能一直顯示，會壓到右側的金額與按鈕（D-36） */
@media (max-width: 899px) {
  .hk-foot__legal a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
.hk-foot__legal a:hover { color: var(--hk-primary); }

/* ---------- 文章頁與法律頁 ---------- */
.hk-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 48px; align-items: start; }
.hk-article__main { display: flex; flex-direction: column; gap: 28px; min-width: 0; max-width: 720px; }
.hk-article__aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 900px) {
  .hk-article { grid-template-columns: minmax(0, 1fr) 280px; }
  .hk-article__aside { position: sticky; top: 84px; }
}
.hk-article__head { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.hk-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-family: var(--hk-mono); font-size: 11px; letter-spacing: .12em; color: var(--hk-label); }
.hk-meta .hk-stamp { color: var(--tone); border-color: var(--tone); }
.hk-prose { font-size: 16px; line-height: 2; color: var(--hk-text); text-wrap: pretty; }
.hk-prose--sm { font-size: 15px; }
.hk-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-top: 24px; border-top: 1px solid var(--hk-line); scroll-margin-top: 84px; }
.hk-step__no { font-family: var(--hk-mono); font-size: 14px; color: var(--tone); padding-top: 6px; }
.hk-step h2 { margin-bottom: 10px; }
.hk-step__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hk-endnote { border-top: 2px solid var(--hk-ink); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.hk-endnote__line { font-size: 14px; line-height: 1.8; color: var(--hk-text-2); }
.hk-endnote__line a { font-family: var(--hk-mono); font-weight: 600; }
.hk-anchor { scroll-margin-top: 84px; }
.hk-anchor--faq { scroll-margin-top: 140px; }

/* 資料來源 */
.hk-sources { display: flex; flex-direction: column; gap: 6px; counter-reset: src; }
.hk-sources li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.7; counter-increment: src; }
.hk-sources li::before { content: counter(src, decimal-leading-zero); font-family: var(--hk-mono); font-size: 12px; color: var(--hk-label); padding-top: 1px; }
.hk-sources--sm li { font-size: 13px; grid-template-columns: 24px minmax(0, 1fr); }
.hk-sources a { word-break: break-all; }

/* 相關閱讀 */
.hk-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.hk-related a { color: var(--hk-ink); }
.hk-related a:hover { color: var(--hk-ink); }
.hk-related__m { font-family: var(--hk-mono); font-size: 11px; letter-spacing: .12em; color: var(--tone); }
.hk-related__t { font-family: var(--hk-serif); font-size: 17px; font-weight: 700; line-height: 1.5; }
.hk-related__d { font-size: 13px; color: var(--hk-text-2); line-height: 1.75; }

/* 指南列表：精選大卡 */
.hk-feature {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  background: var(--hk-card); border: 1px solid var(--hk-line); border-radius: var(--hk-r-lg); overflow: hidden; color: var(--hk-ink);
}
.hk-feature:hover { box-shadow: var(--hk-shadow-hover); color: var(--hk-ink); }
.hk-feature__body { padding: clamp(22px, 3.2vw, 36px); display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.hk-feature .hk-photo__img { height: 100%; border-radius: 0; }

/* FAQ 分組膠囊列（sticky、橫滑） */
.hk-pills { position: sticky; top: 64px; z-index: 30; background: var(--hk-paper); padding: 20px 16px 8px; }
.hk-pills nav { max-width: 1128px; margin: 0 auto; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.hk-pills nav::-webkit-scrollbar { display: none; }
.hk-pill {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--hk-line-3); border-radius: var(--hk-r-btn); background: var(--hk-card);
  color: var(--hk-ink); font-size: 14px; font-weight: 700; white-space: nowrap;
}
.hk-pill:hover { background: var(--hk-primary-tint); border-color: var(--hk-primary); color: var(--hk-primary); }
.hk-pill span { font-family: var(--hk-mono); font-size: 11px; font-weight: 400; color: var(--hk-label); }

/* 聯絡管道卡 */
.hk-channel { border-radius: var(--hk-r-lg); padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.hk-channel--line { background: var(--hk-primary); color: #fff; }
.hk-channel--line:hover { background: var(--hk-primary-hover); color: #fff; }
.hk-channel--mail { background: var(--hk-card); border: 1px solid var(--hk-line); color: var(--hk-ink); }
.hk-channel--mail:hover { box-shadow: var(--hk-shadow-hover); color: var(--hk-ink); }
.hk-channel__k { display: block; font-family: var(--hk-mono); font-size: 11px; letter-spacing: .14em; color: var(--hk-label); }
.hk-channel--line .hk-channel__k, .hk-channel--line .hk-channel__d { color: var(--hk-on-dark-2); }
.hk-channel__v { display: block; font-family: var(--hk-mono); font-size: 20px; font-weight: 600; margin: 6px 0 4px; word-break: break-all; }
.hk-channel--line .hk-channel__v { font-size: 26px; }
.hk-channel--mail .hk-channel__v { color: var(--hk-primary); }
.hk-channel__d { display: block; font-size: 13px; color: var(--hk-text-2); line-height: 1.7; }
.hk-channel__go { font-size: 24px; }
.hk-channel--mail .hk-channel__go { color: var(--hk-primary); }

/* 關於頁的聯絡 dl */
.hk-contactdl { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.hk-contactdl div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .25); padding-bottom: 10px; }
.hk-contactdl dt { color: var(--hk-on-dark-2); font-size: 13px; padding-top: 2px; }
.hk-contactdl dd { font-family: var(--hk-mono); font-weight: 600; word-break: break-all; }
.hk-contactdl a { color: #fff; }

/* 404 */
.hk-404 { font-family: var(--hk-mono); font-size: clamp(96px, 18vw, 180px); font-weight: 600; line-height: .9; letter-spacing: -.05em; color: var(--hk-primary); }
.hk-shell { min-height: 100vh; display: flex; flex-direction: column; }
.hk-shell .hk-sec--grow { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .hk-card--link, .hk-acc summary::after { transition: none; }
  .hk-card--link:hover { transform: none; }
}

@media print {
  .hk-nav, .hk-foot { display: none; }
  body { background: #fff; }
}

/* ---------- 版型函式用到的小元件 ---------- */
.hk-nav__cta { margin-left: 8px; }
.hk-foot__tag { font-family: var(--hk-mono); font-size: 11px; letter-spacing: .14em; color: var(--hk-label); }
.hk-home { align-items: start; gap: 32px; }
.hk-home__main { gap: 20px; padding-top: 8px; }
.hk-rowlink__v .hk-price { display: block; }
.hk-cta .hk-h2 { font-size: clamp(22px, 3vw, 32px); }
.hk-cardlink { color: var(--hk-ink); }
.hk-cardlink:hover { color: var(--hk-primary); }

/* 淡底小方塊（首頁實收對照、誠實的代價） */
.hk-box { background: var(--tone-tint); border-radius: var(--hk-r); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.hk-box > .hk-label { margin-bottom: 4px; }

/* 小入口卡（行情入口、各任務補充條件） */
.hk-grid--mini { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.hk-mini { display: block; border: 1px solid var(--hk-line); border-radius: var(--hk-r-btn); padding: 12px 14px; color: var(--hk-ink); background: var(--hk-card); }
.hk-mini:hover { background: var(--hk-paper); color: var(--hk-ink); }
.hk-mini b { display: block; font-size: 14px; }
.hk-mini span { display: block; font-size: 12px; color: var(--hk-label); margin-top: 2px; line-height: 1.6; }
.hk-mini--top { border-top: 3px solid var(--tone); }

.hk-grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.hk-grid--factor { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.hk-grid--specs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }

/* 起價三原因 */
.hk-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 28px; border-top: 1px solid var(--hk-ink); }
.hk-why li { padding: 20px 0; border-bottom: 1px solid var(--hk-line-2); }

/* 申請頁右側三件事 */
.hk-upfront { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 18px 20px; }

/* 條款：派案單卡片的最後一列、版本紀錄 */
.hk-slipfoot { margin: 0 22px; padding: 14px 0 20px; border-top: 2px solid var(--hk-ink); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.hk-slipfoot b { font-size: 15px; }
.hk-slipfoot b:last-child { font-family: var(--hk-mono); font-size: 14px; color: var(--hk-primary); white-space: nowrap; }
.hk-changenote { border-left: 2px solid rgba(243, 239, 230, .3); padding-left: 14px; line-height: 1.8; }
.hk-panel--dark .hk-changenote { color: var(--hk-on-dark-text); }

/* 任務報酬卡的鍵值 */
.hk-sheet__kv { display: flex; flex-direction: column; padding: 8px 22px 20px; }

/* 關於頁：定義句、不做什麼的 ✕ */
.hk-defn { font-size: 14px; line-height: 1.85; color: var(--hk-text-2); max-width: 52ch; border-left: 3px solid var(--hk-primary); padding-left: 14px; }
.hk-x { color: var(--hk-stamp); font-weight: 700; font-size: 18px; line-height: 1; }