/* 拾光重機 TIME CAPSULE MOTO — 設計系統
   依據：2026-07-27 精品車廠視覺語言逆向（Porsche / Harley-Davidson / Audi / Lexus 實查）
   2026-08-03 P1 改版（設計評估）：三條硬規改成四條——
   ① 層次交給**明度差**（底 vs 卡片差 8% 以上），不再靠 1px 半透明白框撐
      （深色底＋極淡背景差＋半透明白框＝Bootstrap 深色佈景／AI 生成介面的預設長相）
   ② **圓角歸零**（4px 是最尷尬的值：看得出有、又小到像沒調過。要嘛 0、要嘛 12px+；
      這是重機、選 0，機械感）
   ③ 全站只有一個彩色——**這次真的做到**：LINE 綠退成 16px 圖示，不再當按鈕底
      （#06C755 是第三方品牌色，把它放成最大色塊＝宣告「這站是用現成零件拼的」）
   ④ 深色底一律不用 box-shadow（深色上的投影只會糊成一團髒） */

@font-face {
  /* 思源宋體 TC（Noto Serif TC，SIL OFL 1.1、Adobe 出品、可商用可自架）。
     🔴 2026-08-04 Strider 從三個方向裡挑了 B（展間）——宋體是這個方向的骨：
     明體的橫細豎粗在深色底上會產生「印刷感」，而黑體只會產生「介面感」。
     只載 400／600 兩個字重（CJK 每個字重都是獨立檔案，不像拉丁可以合成）；
     子集＝全站實際用字 847 字元 → 各 188／190KB（原檔 16.1MB 可變字型）。
     ⚠️ 同時把上一版的窄黑體 Glow Sans Compressed（219KB）整支拿掉——
     B 方向不需要窄體，而且 Strider 實看後判定「瘦瘦高高、有夠醜」。 */
  font-family: "Serif TC";
  src: url("/static/fonts/noto-serif-tc-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Serif TC";
  src: url("/static/fonts/noto-serif-tc-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* 中性階改**暖黑**：原本 #0e1013 偏藍，跟銅色店徽是兩種色溫、擺在一起就散。
     底與卡片明度差從 4% 拉到 8%，卡片才「浮」得起來。 */
  /* 🔴 2026-08-03 二修（實測反推）：上一版的「暖黑」其實不暖也沒階。
     實測 #0B0B0C/#141416/#1D1D20 的 L* ＝ 3.0 / 6.4 / 10.9，
     **相鄰階只差 3.3 和 4.5**（要 6–10 才看得出是兩個平面），而且 RGB 三色差只有 1–3，
     chroma ≈ 0.002＝肉眼是純中性、甚至偏冷。等於「以為換了暖黑」但畫面沒有任何改變。
     新階 L* ＝ 3.1 / 8.9 / 15.9 / 22.9（階差 5.8 / 6.9 / 7.0），R>G>B 讓中性色真的帶暖。
     這一項就是「不用陰影怎麼做層次」的答案：明度階 ＋ 邊框 ＋ 材質暖度，三者一起做。 */
  /* B 方向（展間）的色：暖炭底、暖灰階、金色重點。
     金 #B08D57 取代原本的橘紅——橘紅在深色上彩度太高、會跳；
     金是金屬本身的顏色，跟鉻管與引擎同一個世界。 */
  --c-canvas: #131211;
  --c-surface: #1B1917;
  --c-surface-raised: #24211E;
  /* 分隔線改**實色**：rgba 白疊在照片邊緣會變灰霧，不是乾淨的線。
     亮度設在該層 +12～18 L*，線才「收得住」邊而不是浮一層灰。 */
  --c-line: #332F2B;
  --c-line-strong: #47413A;

  --c-text: #EDEAE4;
  --c-text-2: #A6A099;
  --c-text-3: #8B857C;   /* 4.79:1 在卡片底上也過 AA（#837C74 只有 4.26） */
  --c-text-4: #8B857C;

  /* 火焰紅：案主要「黑紅黑紅、很 rock」的哈雷調性，明確說不要綠色。
     選 #E8543D 是因為它在深底 5.23:1、卡片底 4.79:1，兩個都過 WCAG AA——
     更深的紅（#D6342A）雖然更沉，但只有 3.64:1、小字會看不清。 */
  --c-accent: #B08D57;
  --c-accent-hover: #C9A574;
  --c-accent-ink: #131211;
  --c-sold: rgba(242, 244, 247, .45);
  --c-line-green: #06C755;

  --ff: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
        -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* 標題／價格用窄體。內文維持系統字：CJK 內文字型動輒數百 KB，
     而客人真正要讀的是規格與來歷，那裡「好讀」比「有個性」重要。 */
  --ff-display: "Serif TC", "Songti TC", "PingFang TC", serif;
  --fw-normal: 400;
  --fw-bold: 700;

  /* 🔴 尺度落差（2026-08-03 設計評估）：原本最大 64px、最小 13px＝只有 4.9 倍，
     而且中間 44/32/22/20/17/15 每一階都站了人＝一條平滑的斜坡＝沒有戲劇性。
     改成手機 56px、桌機 132px（對 13px ＝ 10 倍），**中間那幾階故意空著**。
     落差本身就是表情——這是模組化級距（每階 ×1.25）永遠做不到的事。 */
  /* 🔴 2026-08-04 收字級：桌機 122px 太大（Strider 實看）。
     上一版那個尺寸是為了「首頁放一台車」那個版型設的——大字壓在單一主角上才撐得住；
     現在 hero 回到店景，B（展間）的調性是**慢、留白多、字不吼**，樣張的標題是 52px。
     改成桌機 72px 上限、手機 40px 下限。
     ⚠️ 下限仍照**最壞情況**設：320px 螢幕、字型還沒載到 fallback 成系統字（字寬多 26%）時
     六個字也要放得下。 */
  --fs-display: clamp(2.5rem, 1.4rem + 3.2vw, 4.5rem);
  --fs-h1: clamp(1.75rem, 1.379rem + 1.52vw, 2.75rem);
  --fs-h2: clamp(1.375rem, 1.143rem + .95vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.032rem + .38vw, 1.375rem);
  --fs-body: 1rem;
  /* 15px 是 TypoGate 的字級地板：再小老花就看不清，而買重機的客層年齡不低。
     原本 .875rem＝14px，全站 13 處次要文字（規格、台數、篩選鈕）整批踩線。
     一處一處補是補不完的，改在 token 這裡才是根治。 */
  --fs-small: .9375rem;
  --fs-caption: .75rem;   /* 只給全大寫的英文標籤用（DREAM MOTO GARAGE、IN STOCK），不裝中文內文 */

  --lh-display: 1.15;
  --lh-h1: 1.25;
  --lh-h2: 1.30;
  --lh-h3: 1.40;
  --lh-body: 1.75;
  --lh-small: 1.60;
  --lh-caption: 1.40;

  --ls-display: -.01em;
  --ls-eyebrow: .12em;
  --ls-body: .01em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --sp-10: 128px;   /* 區塊之間要拉到這階：原本最大 96 對常用 32 只有 3 倍，
                       眼睛讀不出段落邊界；5 倍以上才有「換氣」的感覺 */
  --sp-section: clamp(4rem, 2.7rem + 5.33vw, 7.5rem);
  --sp-gutter: clamp(1.25rem, .786rem + 1.9vw, 2.5rem);
  --sp-cardgap: clamp(1rem, .721rem + 1.14vw, 1.75rem);

  --w-container: 1280px;
  --w-measure: 34em;
  --w-herotext: 760px;   /* Harley 原值 480px 是拉丁文用的；中文 display 級要更寬才不會被切碎 */

  --btn-h: 48px;
  /* 圓角歸零：卡片與圖片 0、按鈕與輸入框留 2px（純粹讓點擊區不那麼刺） */
  --r-xs: 2px;
  --r-sm: 0px;

  --t-fast: 250ms; --t-mid: 400ms; --t-slow: 600ms;
  --e-inout: cubic-bezier(.25, .1, .25, 1);
  --e-standard: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* 🔴 `hidden` 屬性必須贏過任何作者樣式（2026-08-04 實測炸出來的）。
   出身：篩選器 15 項行為測試 **13 項失敗**——計數器算對了「5 台」，
   但畫面上 37 張卡片一張都沒消失。根因是 `.card { display: flex }`
   蓋掉了瀏覽器對 `[hidden]` 的預設 `display: none`
   （**使用者代理樣式的優先權低於任何作者樣式**，這是規範定義的，不是 bug）。
   `filter.js` 用的是 `card.hidden = !ok`，語意完全正確，壞的是 CSS。
   這條是 normalize.css 等 reset 的標準做法，`!important` 在這裡是對的：
   `hidden` 的語意就是「不該被看到」，沒有任何樣式該蓋過它。
   ⚠️ 任何時候給元素設了自訂 display，都要記得它會不會用到 hidden。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--c-canvas);
  color: var(--c-text);
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; height: auto; }   /* 沒有這行，HTML 的 height 屬性會蓋掉 aspect-ratio */
a { color: inherit; }

/* 標題一律走窄體＋字距收緊。中文標題用 Compressed 的效果是：
   同樣的字數少佔約 15% 橫向空間，省下來的直接變成留白——
   「高級」在版面上的定義就是留白比別人多。
   `font-feature-settings: "tnum"` 讓價格與里程的數字等寬，並排比價時不會跳動。 */
/* 🔴 2026-08-03 Strider 實看後修正：窄體（Compressed）**只留首頁大標一處**。
   他的原話：「這個字體看起來瘦瘦高高的，並不好看，而且你很多文字都用這種字體。」
   他是對的——窄體是**展示用**字型：一句話、一個大字級、當海報標題時有力；
   一旦拿去排 h2／h3／卡片車名／價格，滿頁瘦長字身就變成壓迫感，中文尤其明顯
   （中文方塊字被壓窄之後，筆畫間距跟著縮，密度直接上升）。
   結論：窄體用在「一頁只有一個」的地方，其餘一律回系統字。 */
/* 🔴 2026-08-04 B 方向（展間）：標題一律**宋體**、字重 600、字距放開 .01em。
   明體的橫細豎粗在深色底上有印刷的重量感——黑體只會有介面感。
   ⚠️ 內文維持系統無襯線：明體小字在螢幕上橫畫會掉，內文要能讀不是要有味道。 */
h1, h2, h3 { margin: 0; font-family: var(--ff-display); font-weight: 600;
  text-wrap: balance; word-break: keep-all; letter-spacing: .01em; }
.hero__title { font-family: var(--ff-display); font-weight: 600; line-height: 1.45; letter-spacing: .02em; }
.car-price, .card__price { font-family: var(--ff-display); font-weight: 600; }
/* 數字等寬照留——那跟字型個性無關，是價格並排比較時不跳動 */
.car-price, .card__price, .count { font-feature-settings: "tnum" 1; letter-spacing: 0; }
.card__spec, .nav a, .badge, .btn, .card__id { word-break: keep-all; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
p { margin: 0; text-wrap: pretty; }
/* 條列句也要 pretty：買車須知整頁都是 <li>，一句一句手動焊尾巴是打地鼠
   （焊完 414px 冒出 430px 那句）。交給瀏覽器自己避開末行孤兒字才是治本。 */
li { text-wrap: pretty; }

.nb { white-space: nowrap; }

.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.section { padding-block: var(--sp-section); }
.section__head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-3);
}
/* 中文的小標：字級不能用 caption（12px 中文踩 TypoGate 地板），字距也要收
   ——.12em 是拉丁大寫字距，套在中文上會鬆到像沒排過。 */
.eyebrow--zh { font-size: var(--fs-small); letter-spacing: .06em; text-transform: none; }
.lead { color: var(--c-text-2); max-width: var(--w-measure); text-wrap: balance; }
.note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-3); }

/* ── 頁首 ───────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 16, 19, .86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 60px;
}
/* 窄螢幕塞不下就上下排，絕不讓「在店車輛」被折成兩行。
   🔴 斷點是量出來的、不是猜的：一行排下來實測要 452px。
   原本寫 400px → 401–451px 之間整站 43 頁橫向溢出（414 溢 37px、430 溢 21px），
   正好命中 iPhone XR/11/14 Plus/15·16 Pro Max 與多數 Pixel。改斷點前先量。 */
@media (max-width: 452px) {
  .site-head__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding-block: var(--sp-2); }
  .nav { width: 100%; gap: var(--sp-3); }
}
.brand { font-weight: var(--fw-bold); text-decoration: none; letter-spacing: .04em; white-space: nowrap;
         display: inline-flex; align-items: center; gap: var(--sp-3); }
/* 店徽是方形銅牌、四角有雜邊 → 切成圓角方塊，邊界才乾淨；手機縮一號免得擠掉導覽列 */
.brand__mark { width: 44px; height: 44px; border-radius: 10px; flex: none; object-fit: cover; }
.brand__text { display: block; }
@media (max-width: 520px) { .brand__mark { width: 36px; height: 36px; } }

/* 關於我們的店徽：放大到看得清楚「拾光重機／TIME CAPSULE MOTO」兩行字 */
.about-logo { margin: var(--sp-6) 0; text-align: center; }
.about-logo img { width: min(220px, 60vw); height: auto; border-radius: 16px; }
.about-logo figcaption {
  margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--c-text-3);
  letter-spacing: var(--ls-eyebrow);
}
.brand small {
  display: block; font-size: var(--fs-caption); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-eyebrow); color: var(--c-text-4); text-transform: uppercase;
  white-space: nowrap;
}
.nav { display: flex; gap: var(--sp-4); font-size: var(--fs-small); }
.nav a { color: var(--c-text-2); text-decoration: none; white-space: nowrap;
          display: inline-flex; align-items: center; min-height: 44px;
          transition: color var(--t-fast) var(--e-standard); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-text); }

/* ── Hero ───────────────────────────────────────────
   🔴 2026-08-04 收權重（B 定案第 2 項）：原本是 78–88vh 的滿版照片＝第一屏整片被
   一張暗店景吃光。B（展間）的第一屏是**暗底＋標語＋大留白**，照片不是主角。
   但門面要看得到店裡有很多車是**案主的要求**（見 curation `_hero_image`），
   所以照片留著、改成一條**橫帶**：高度砍掉四成，標語照樣壓在帶子的左下。
   ⚠️ 手機那格也一起改成橫帶（見下面的 aspect-ratio）——這才是「只看到氣缸」的根治：
   直立的框配橫式的照片，cover 只能左右各切一半。框跟照片同方向，就沒有這個問題。 */
.hero { position: relative; height: clamp(300px, 46vh, 520px); overflow: hidden; background: var(--c-surface); }
.hero--noimg { height: 400px; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media--empty {
  background:
    radial-gradient(120% 90% at 70% 15%, #22262e 0%, transparent 60%),
    linear-gradient(160deg, #14171c 0%, #0e1013 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* 兩道漸層：由下往上是原本的；左側再壓一道，因為標題壓在左下角，
     而 hero 現在是「店裡某一台真車」的照片——每台車的亮度與構圖都不一樣，
     不能假設那個角落剛好是暗的。壓左側等於不管換哪台車，白字都讀得到。 */
  background:
    linear-gradient(to top, var(--c-canvas) 0%, rgba(11, 11, 12, 0) 8%),
    linear-gradient(to right,
      rgba(11, 11, 12, .88) 0%, rgba(11, 11, 12, .58) 38%, rgba(11, 11, 12, 0) 68%),
    linear-gradient(to top,
      rgba(11, 11, 12, .85) 0%, rgba(11, 11, 12, .55) 42%, rgba(11, 11, 12, 0) 76%);
}
.hero__copy {
  position: absolute; left: 0; bottom: var(--sp-6); z-index: 2;
  width: 100%; max-width: 600px;
  padding-inline: var(--sp-gutter);
  display: grid; gap: var(--sp-3);
  animation: rise var(--t-slow) var(--e-inout) 120ms both;
}
.hero__title {
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: var(--fw-bold);
}
.hero__sub { color: var(--c-text-2); }

/* ── 第一屏＝一台車（2026-08-03 六修）──────────────────
   排列的邏輯：車號小、車名中、**價格最大**。
   賣車的網站上最該被看見的就是「這是什麼車、多少錢」，
   而價格原本是 32px 藏在卡片裡——那是把主角關在抽屜。
   ⚠️ 這裡刻意只有三層文字＋一行規格。工具（搜尋、篩選）全部推到第二屏。 */
.hero__id {
  font-family: var(--ff-display); font-size: 15px; letter-spacing: .18em;
  color: var(--c-accent); margin-bottom: 6px;
}
/* ⚠️ 這一組是「首頁放一台車」那版留下的（2026-08-03 六修）。
   Strider 08-04 決定 hero 回到店景＋標語（單車門面沒有「誰來換下一台」的機制），
   所以車名的字級規則改成只作用在 .hero--car 底下，不再覆蓋大標的字體。 */
.hero--car .hero__title { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.35; letter-spacing: .01em; max-width: 18ch; }
/* 價格用窄體＋等寬數字：數字是這一屏的主角，窄體在**純數字**上不會有中文那種瘦長感 */
.hero__price {
  font-family: var(--ff-display); font-feature-settings: "tnum" 1;
  font-size: clamp(3.25rem, 1.6rem + 6.4vw, 6.5rem); line-height: 1.02;
  letter-spacing: -.01em; color: var(--c-text); margin-top: 4px;
}
.hero__meta { font-size: var(--fs-small); color: var(--c-text-3); margin-top: 10px; }
.hero__cta { margin-top: var(--sp-5); }
.hero__cta a {
  font-size: var(--fs-small); color: var(--c-text); text-decoration: none;
  border-bottom: 1px solid var(--c-accent); padding-bottom: 6px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.hero__cta a::after { content: "→"; transition: translate var(--t-fast) var(--e-standard); }
@media (hover: hover) { .hero__cta a:hover::after { translate: 4px 0; } }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 手機：高度交給照片自己的比例（3:2），不要再用 vh 造一個直立的框。
   390px 寬 → 260px 高的一條帶子，整張店景**橫向完整看得到**。 */
@media (max-width: 767px) {
  .hero { height: auto; aspect-ratio: 3 / 2; }
  .hero--noimg { height: 320px; aspect-ratio: auto; }
}

@media (min-width: 768px) {
  .hero { height: clamp(320px, 48vh, 560px); }
  .hero--noimg { height: 460px; }
  /* 🔴 桌機的遮罩原本只留「由左往右」一道、到 70% 就全透明，
     結果大標右半（「愛車的人買」）正好壓在白色整流罩那塊亮部上，白字對白車。
     hero 換一台車、亮部就換一個位置，所以不能靠「那個角落剛好是暗的」。
     改成三道疊：橫向壓左、縱向壓下、再加一塊橢圓罩住標題實際落點。
     顏色同步換成暖黑 rgb(11,11,12)——原本是舊底色的藍黑，疊在新底色上會浮一層冷調。 */
  .hero::after {
    background:
      /* 最底那 10% 融進頁面底色：原本照片下緣是一條硬切邊，
         看起來像把一張圖「貼」在頁面上——這是廉價感最容易被察覺的來源之一。 */
      linear-gradient(to top, var(--c-canvas) 0%, rgba(11, 11, 12, 0) 10%),
      radial-gradient(70% 90% at 22% 68%, rgba(11, 11, 12, .78) 0%, rgba(11, 11, 12, 0) 70%),
      linear-gradient(to right,
        rgba(11, 11, 12, .86) 0%, rgba(11, 11, 12, .60) 42%, rgba(11, 11, 12, .12) 72%, rgba(11, 11, 12, 0) 100%),
      linear-gradient(to top,
        rgba(11, 11, 12, .70) 0%, rgba(11, 11, 12, .30) 45%, rgba(11, 11, 12, 0) 80%);
  }
  .hero__copy { gap: var(--sp-4); }
}
@media (min-width: 1200px) {
  /* 大螢幕也只給一條帶子。原本是 88vh（刻意讓底緣露出下一塊），
     但那是「照片當主角」的版型；B 的主角是車的清單，門面照片只負責交代「這是一家店」。 */
  .hero { height: clamp(360px, 52vh, 620px); }
  .hero--noimg { height: 480px; }
  .hero__copy {
    max-width: var(--w-herotext); gap: var(--sp-5);
  }
  /* 🔴 hero 文字要跟全站對同一條左緣（2026-08-03 設計評估）：
     hero 是全幅背景、`.hero__copy` 從視窗最左起算，文字落在 x=40；
     但下面每一個區塊都在 1280px 置中容器裡、文字落在 x=120。
     首頁因此有兩條左緣——第一屏的字比整站的內容更靠外 80px。
     用 `calc()` 把置中容器的左邊界算出來補進去，全站對齊。 */
  .hero__copy {
    padding-left: calc(var(--sp-gutter) + max(0px, (100vw - var(--w-container)) / 2));
  }
}

/* ── 找車工具（搜尋＋廠牌＋牌照＋排序）─────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.finder { margin-bottom: var(--sp-5); display: grid; gap: var(--sp-3); }

.finder__search { position: relative; max-width: 520px; }
/* 搜尋框改「只有一條底線」：四邊框在深色底上是四條灰線，
   而它要的只是「這裡可以打字」這一個訊號。 */
.finder__search input {
  font: inherit; font-size: var(--fs-small); color: var(--c-text);
  width: 100%; min-height: 48px; padding-inline: var(--sp-4) var(--sp-7);
  background: transparent; border: 0; border-bottom: 1px solid var(--c-line);
  border-radius: 0; appearance: none;
  transition: border-color var(--t-fast) var(--e-standard);
}
.finder__search input::placeholder { color: var(--c-text-4); }
.finder__search input:focus-visible { outline: none; border-color: var(--c-accent); }
/* 用自己的清除鈕，Safari 原生那顆在深色底上幾乎看不見 */
.finder__search input::-webkit-search-cancel-button { display: none; }
.finder__clear {
  position: absolute; inset-block: 0; right: 0; width: 48px;
  font: inherit; color: var(--c-text-3); background: transparent; border: 0; cursor: pointer;
}
.finder__clear:hover { color: var(--c-text); }

.finder__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.finder__label {
  font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-4); text-transform: uppercase; margin-right: var(--sp-1);
  white-space: nowrap;   /* 不焊死的話「廠牌」會被擠成直排＝句中硬斷＋孤兒字 */
}
.finder__label--sort { margin-left: var(--sp-3); }

/* 🔴 篩選鈕改「無框」（2026-08-03 設計評估）：
   原本每一顆都有 1px 外框＋圓角，14 顆並排＝14 個矩形在搶注意力，
   而它們只是工具、不是內容。那是 Bootstrap 按鈕群組的長相。
   改成：預設無框無底、只有文字；選中的那顆才給實心底。
   一排下來只有「一顆是亮的」，眼睛立刻知道現在篩到哪裡。 */
.finder button:not(.finder__clear) {
  font: inherit; font-size: var(--fs-small); color: var(--c-text-3);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
  min-height: 40px; padding-inline: var(--sp-3); cursor: pointer; white-space: nowrap;
  transition: color var(--t-fast) var(--e-standard), background-color var(--t-fast) var(--e-standard);
}
.finder button:not(.finder__clear):hover { color: var(--c-text); background: var(--c-surface-raised); }
/* 選中態不用白色實心底：在暖黑場上那塊白會變成整頁最亮的東西，
   比車的照片還搶眼——工具不該比內容亮。改成「字變亮 ＋ 一條重點色底線」。 */
.finder button[aria-pressed="true"] {
  background: transparent; color: var(--c-text); font-weight: var(--fw-bold);
}
.finder button[aria-pressed="true"]:hover { background: var(--c-surface-raised); color: var(--c-text); }
.finder .count { font-size: var(--fs-small); color: var(--c-text-3); margin: 0; }

/* ── 讓重點色有親戚（2026-08-03 設計評估）─────────────
   🔴 業主原話：「那個用 LINE 問我們你用橘色看起來太突兀。」
   實測：橘 #E8543D 只佔全站著色面積的 **0.04%**，卻是**整個網站唯一一個有彩度的像素**——
   孤島指數破百。所以「突兀」不是面積太大，是**它沒有同伴**。
   ⚠️ 換成綠色不會解決這件事（綠一樣是孤島）；解法是給它 3 個低彩度的親戚，
   讓那個顏色從「意外」變成「這家店的顏色」。 */
.card:hover { border-color: color-mix(in srgb, var(--c-accent) 42%, var(--c-line)); }
.car-price::after, .card__price::after {
  content: ""; display: block; inline-size: 28px; block-size: 2px; margin-top: 10px;
  background: var(--c-accent); opacity: .85;
}
.freshness__dot { background: var(--c-accent); }
.finder button[aria-pressed="true"] {
  box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--c-accent) 70%, transparent);
}
.section__head .eyebrow, .car-head .eyebrow { color: color-mix(in srgb, var(--c-accent) 55%, var(--c-text-3)); }

/* ── 光與材質：🔴 2026-08-04 整段拿掉（B 定案 §六）──────────
   原本這裡有兩層：左上角一道光暈（radial-gradient 5.5%）＋ 全頁顆粒（feTurbulence 2.5%）。
   定案那份的規則是「講不出某個決定為什麼那樣做，就拿掉」——這兩層講得出的理由只有
   「聽說純色平面很數位」，而**手冊與展間上沒有這些東西**：紙就是紙，牆就是牆。
   而且它們正是「均勻的完成度」那條 AI 指紋的幫兇：一層蓋滿全頁、處處一樣用力。
   留著 main/site-head 的 z-index：拿掉那兩個 ::before/::after 之後它們無害，
   但頁首是 sticky、堆疊脈絡動了會有連鎖，這裡不順手改。 */
main, .site-head, .site-foot, .cta-bar { position: relative; z-index: 1; }
/* ③ 表面上緣的高光：同一道光落在每一個平面的頂邊，1px、6% 白。
   這是「被光照著」跟「被填色」的差別。 */
.card, .callout, .spec-table, .finder__search input, .desk-contact {
  position: relative;
}
.card::before, .callout::before, .desk-contact::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.10) 22%, rgba(255,255,255,.10) 78%, transparent);
  pointer-events: none; z-index: 2;
}

/* ── 間距：製造「綁在一起」與「單獨隔離」──────────────
   🔴 業主原話：「那些行距，我連任何一點點的美感都感受不到。」
   實測他是對的，但問題不在數值：全站垂直間距落在 12–48px、倍率只有 4 倍——
   **沒有任何兩個元素被綁在一起（<8px），也沒有任何一個被單獨隔離（>160px）**。
   而這兩件事正是間距唯一能製造情緒的方式。等距＝清單，清單沒有美感可言。 */
.car-head .eyebrow { margin-bottom: 2px; }          /* 車號緊貼車名＝同一組 */
.car-head h1 + .car-price { margin-top: 6px; }       /* 車名與價格綁成一塊 */
.car-story { margin-block: var(--sp-10); }           /* 來歷單獨隔離 128px */
.see-in-person { margin-block: var(--sp-10) var(--sp-7); }
.section__head { margin-bottom: var(--sp-8); }
.section__head .eyebrow { margin-bottom: 4px; }      /* 小標緊貼大標 */
.section__head h2 + .lead { margin-top: var(--sp-4); }

/* ── 互動（2026-08-03 設計評估／2026-08-04 再收）───────────────
   卡片 hover 只做**一件事**：邊框提亮（告訴你整張可以點）。不做位移、不做陰影、不做亮度變化。
   🔴 hover 圖片放大**維持拿掉**（2026-08-04）：定案那份的規則是「講不出這個決定為什麼要
   那樣做，就拿掉」，而「滑過去照片會動」在一間展間或一本手冊上不存在——那是網拍的動作。
   ⚠️ 這條屬於 Strider 留下的那一組決定（顏色／字體／材質），不是被換掉的版面骨架；
   他要照片動起來的話，這裡加一行就回來。
   `@media (hover:hover)` 讓觸控裝置完全不套用（手機沒有 hover，套了會卡在 hover 態）。 */
@media (hover: hover) {
  .card { transition: border-color var(--t-fast) linear; }
  .card:hover { border-color: var(--c-line-strong); }
  .nav a { position: relative; }
  /* 導覽底線由中間往兩邊展開，200ms、ease-out */
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: center;
    transition: transform var(--t-fast) var(--e-standard);
  }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
}
@media (min-width: 600px) { .finder .count { text-align: right; } }

.car-grid__empty { color: var(--c-text-3); padding-block: var(--sp-6); }
.linkish {
  font: inherit; color: var(--c-accent); background: transparent;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}

@media (max-width: 599px) {
  /* 手機上 7 個廠牌會擠成三排、光篩選列就吃掉大半個畫面，第一台車要滑很久才看得到。
     改成「一組一行、可左右滑」——手機逛街本來就習慣橫向滑動。 */
  .finder__row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    /* 讓最後一顆按鈕不要貼死在螢幕邊，看得出來「還有東西可以滑」 */
    padding-right: var(--sp-4); scroll-padding-left: var(--sp-4);
  }
  .finder__row::-webkit-scrollbar { display: none; }
  /* 標籤釘在左邊、按鈕從它底下滑過去。底色要跟頁面一致（--c-canvas），
     用 --c-surface 會在標籤後面留一塊看得出來的淺色方塊。 */
  .finder__label {
    position: sticky; left: 0; z-index: 1;
    background: var(--c-canvas); padding-right: var(--sp-2);
  }
  .finder__label--sort { margin-left: var(--sp-2); }
}

/* ── 車輛卡片 ─────────────────────────────────────
   🔴 2026-08-04 Strider 實看後定：**車輛的編排擺放回這一版**（等大卡片格線）。
   同一天稍早試過 B 樣張的骨（前 6 台大塊左右交錯＋其餘精簡列表），他看完的判斷是
   顏色與字體那套留著、車輛的排法回來。那一版的完整 CSS／樣板／測試留在
   `*.bak.blockB`＋vault `18 🎨 設計方向定案（B・展間）`，要回頭拿得到。
   ⚠️ 所以這一段是「他挑過的」，不是沒改過的舊東西——要動之前先確認他改變主意了。 */
.car-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-cardgap);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--e-standard);
}
/* 🔴 卡片要撐滿整格、內容用 flex 由上往下排，價格才貼得住底部。
   原本各卡片高度隨車名長短浮動，同一排價格垂直落差實測最大 27px——
   客人比價時每張卡都要重新找一次價格在哪。 */
.card { display: flex; }
.card > a { display: flex; flex-direction: column; width: 100%;
            text-decoration: none; color: inherit; }
.card__body { flex: 1; }
.card__price { margin-top: auto; }
.card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-surface-raised); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-mid) var(--e-inout); }
.card__media--empty { display: grid; place-items: center; color: var(--c-text-4); font-size: var(--fs-caption); }
.card__body { display: grid; gap: var(--sp-2); padding: var(--sp-4); }
.card__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 車號＝倉庫語言，只給要對帳的人看：推到規格行最右、字最小、色最淡 */
.card__id { float: right; font-size: 13px; letter-spacing: .08em; color: var(--c-text-4); }
.card__spec { display: flow-root; }
.card__spec { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-3); }
.card__price { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); }
.card__cond {
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2);
  text-wrap: balance;
  padding-top: var(--sp-3); border-top: 1px solid var(--c-line);
}
/* 🔴 平板直放（768–1023）原本是全站最長的一頁：10,308px／11.5 屏，比 390 手機還多捲 26%。
   原因是欄數規則 minmax(300px,1fr) 在 768 只排得下 2 欄，卻用桌機的卡片尺寸。
   把最小欄寬放小 → 排得下 3 欄，捲動長度掉三分之一。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .car-grid { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
  .card__price { font-size: var(--fs-h3); }
}

@media (hover: hover) {
  .card:hover { border-color: var(--c-line-strong); }
  .card:hover .card__media img { transform: scale(1.03); }
}

/* 手機改兩欄。實測依據：整頁 20.4 屏，其中 37 張卡片就佔 91.6%（15,734/17,184px）——
   hero、篩選列、頁尾加起來才 6.7%，所以唯一有效的槓桿是卡片本身，砍別的地方都是白費力氣。
   客人是「先掃過全部、再挑一台細看」，掃的時候要的是輪廓與價格，不是細節。
   ⚠️ 這段一定要放在 .card 基礎樣式「之後」——同權重下後寫的才會贏。 */
/* ⚠️ 斷點必須到 767px：`minmax(300px,1fr)` 在 600–767px 只塞得下一欄，
   量出來是 25.9 屏（比手機的 20 屏還糟）——平板直放與小筆電正好落在這一段。 */
@media (max-width: 767px) {
  .car-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .card__body { padding: var(--sp-3); gap: var(--sp-1); }
  /* 兩欄之後卡片只剩 169px 寬，2 行裝不下哈雷的長車名——
     實測 24/37 台被截斷（桌機 0 台），而 23 台哈雷開頭都一樣、截斷就分不出誰是誰。
     手機放到 3 行；桌機維持 2 行（那裡本來就不會截）。 */
  .card__body h3 { font-size: var(--fs-small); line-height: var(--lh-small); -webkit-line-clamp: 3; }
  .card__price { font-size: var(--fs-body); line-height: var(--lh-body); }
  .card__spec { font-size: var(--fs-small); }
}

.badge {
  display: inline-block; font-size: var(--fs-caption); line-height: 1;
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-xs); letter-spacing: .06em;
}
.badge--new { background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); }
.badge--hold { border: 1px solid var(--c-line-strong); color: var(--c-text-2); background: rgba(14, 16, 19, .72); }
.badge--sold { border: 1px solid var(--c-line); color: var(--c-sold); background: rgba(14, 16, 19, .72); }
.card__flags { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; gap: var(--sp-2); z-index: 1; }
.card--sold .card__media img { filter: grayscale(.7) opacity(.6); }

/* ── 車輛詳情 ───────────────────────────────────── */
.car-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }

/* 規格快覽：價格底下、相簿上面的三個關鍵數字，客人不用滑到最底才看得到 */
.spec-quick {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-2) 0 0; padding: var(--sp-4) 0;
  border-block: 1px solid var(--c-line);
}
.spec-quick dt {
  font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-4); text-transform: uppercase; white-space: nowrap;
}
.spec-quick dd {
  margin: var(--sp-1) 0 0; font-size: var(--fs-body); color: var(--c-text);
  white-space: nowrap;   /* 「2021 年 10 月」「1868cc · 紅牌」不准從中間斷開 */
}

/* 資料新鮮度：客人第一個疑問是「這是現在還有的車嗎」，所以擺在車輛清單開頭、不是頁尾 */
/* 用 flex 排會把「車輛清單今天剛更新」當成一個不能拆的欄位、擠成兩行還跟圓點錯開。
   改成一般段落、圓點用 inline-block 跟著文字流走，長短句都不會歪。 */
.freshness {
  margin: var(--sp-3) 0 0; font-size: var(--fs-small);
  color: var(--c-text-3); line-height: var(--lh-small);
}
.freshness__dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: var(--sp-2); vertical-align: middle;
  background: var(--c-accent);   /* 原本是綠點；案主明確不要綠色 */
}

/* 車款來歷：照片之後、規格表之前。這段是要被「讀」的，不是被掃的，
   所以給它比規格更寬鬆的行高與可讀寬度，並用左邊那條線跟前後的圖表分開。 */
.car-story {
  margin-block: var(--sp-7);
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-line-strong);
  max-width: var(--w-measure);
}
.car-story h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 0 0 var(--sp-3); }
.car-story p + p { margin-top: var(--sp-4); }   /* 段落之間要有換氣的地方 */
.car-story p {
  margin: 0; color: var(--c-text-2);
  line-height: 1.9;   /* 中文長段落要比預設再鬆一點才讀得下去 */
  /* 不用 justify：這幾段是中英混排（Softail、Twin Cam…），
     兩端對齊會為了湊齊右邊在字距上撐出大空隙，比參差不齊還難看。 */
}

/* 老闆寫的賣點：原本用 .note（小灰字）＝看起來像免責聲明，實際上是他最想被看到的話 */
.car-highlight { margin-top: var(--sp-2); max-width: var(--w-measure); }
.car-highlight p:last-child {
  margin: var(--sp-1) 0 0; color: var(--c-text-2); line-height: var(--lh-body);
}
.car-price { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
.gallery { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); width: 100%; }
/* 相簿每張包一層 <a>：桌機只看得到 230px 縮圖，但檔案裡有 1600px 版本。
   買重機最在意的烤漆與傷痕，縮圖一項都看不出來。先讓它「點得開」，
   真正的燈箱之後再做——現在至少不是死圖。 */
.gallery a { display: block; }
.gallery a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (hover: hover) { .gallery a:hover img { opacity: .88; transition: opacity var(--t-fast); } }
.gallery--empty {
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-sm);
  padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--c-text-3);
}
.spec-table { width: 100%; border-collapse: collapse; margin-block: var(--sp-6); }
.spec-table th, .spec-table td {
  text-align: left; padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.spec-table th { color: var(--c-text-3); font-weight: var(--fw-normal); width: 8em; }
/* 🔴 配備改「條列」不是「標籤雲」（2026-08-03 Strider：「配備你怎麼是一格一格放在那邊？這樣子不好閱讀」）。
   他是對的：chip（標籤）的用途是**可以點、可以篩**的東西——這裡點不了、篩不了，
   卻長了 20 個帶框的小方塊，眼睛得一格一格跳著讀，還讀不出哪個重要。
   配備是**清單**，清單就該一行一項、由上往下讀。桌機分兩欄免得一長條。 */
.chip-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0; column-gap: var(--sp-6);
}
@media (min-width: 768px) { .chip-list { grid-template-columns: 1fr 1fr; } }
.chip-list li {
  font-size: var(--fs-body); line-height: var(--lh-small); color: var(--c-text-2);
  padding-block: 10px; border-bottom: 1px solid var(--c-line);
  display: flex; align-items: baseline; gap: 10px;
}
/* 行首一個小點：不用 ・ 或 - 那種字元，用實心方塊對齊得比較準 */
.chip-list li::before {
  content: ""; inline-size: 4px; block-size: 4px; flex: none;
  background: var(--c-text-3); translate: 0 -3px;
}

/* ── 按鈕與聯絡 ─────────────────────────────────── */
.btn {
  /* 🔴 原本是 height 寫死：車輛頁主按鈕的字在 ≤393px 折成兩行（56px）塞進 48px 框、上下各溢 1px。
     改成 min-height＝窄螢幕自己撐高，寬螢幕外觀完全不變。 */
  min-height: var(--btn-h); padding-block: var(--sp-2); padding-inline: var(--sp-5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: .02em;
  border-radius: var(--r-xs); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--e-standard),
              border-color var(--t-fast) var(--e-standard),
              color var(--t-fast) var(--e-standard);
}
.btn--primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--primary:hover { background: var(--c-accent-hover); }
.btn--secondary { background: transparent; color: var(--c-text); border-color: rgba(255, 255, 255, .35); }
.btn--secondary:hover { border-color: var(--c-text); }
/* 🔴 2026-08-03 Strider 實看後改回綠色。他的原話：
   「那個『用 LINE 問我們』你用橘色看起來太突兀，我還乾脆寧願你用綠色。」
   我原本的理由是「#06C755 是第三方品牌色、不該當最大色塊」——那個理由在**真實觀感**面前站不住：
   ① 客人對 LINE 綠有既定認知，看到就知道那顆按鈕會發生什麼事，**熟悉＝不刺眼**；
   ② 橘紅在暖黑底上彩度更高、面積又大，反而更跳；
   ③ 那顆按鈕的任務是「被按」，不是「維持色彩理論的純度」。
   保留的部分：綠色只出現在**行動按鈕**這一個角色上，不外溢到其他元素。 */
.btn--line { background: var(--c-line-green); color: #fff; }
/* LINE 圖示（inline SVG 當 mask，不多一個 HTTP 請求） */
:root { --line-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2C6.5 2 2 5.7 2 10.2c0 4 3.6 7.4 8.4 8.1.3.07.8.2.9.5.1.3.07.7.03 1l-.14.9c-.04.26-.2 1.03.9.56 1.1-.47 5.96-3.5 8.13-6h.01C21.6 13.8 22 12.1 22 10.2 22 5.7 17.5 2 12 2M8 13H6.2c-.15 0-.27-.12-.27-.26V8.5c0-.15.12-.27.27-.27h.7c.15 0 .27.12.27.27v3.4H8c.15 0 .27.12.27.27v.6c0 .14-.12.26-.27.26m2-.26c0 .14-.12.26-.27.26h-.7c-.15 0-.27-.12-.27-.26V8.5c0-.15.12-.27.27-.27h.7c.15 0 .27.12.27.27zm4.6 0c0 .14-.12.26-.27.26h-.7a.27.27 0 0 1-.2-.1l-1.9-2.6v2.44c0 .14-.12.26-.27.26h-.7c-.15 0-.27-.12-.27-.26V8.5c0-.15.12-.27.27-.27h.75l.05.02.03.03 1.9 2.56V8.5c0-.15.12-.27.27-.27h.7c.15 0 .27.12.27.27zm3.6-3.53c0 .15-.12.27-.27.27h-1.8v.7h1.8c.15 0 .27.12.27.26v.6c0 .15-.12.27-.27.27h-1.8v.7h1.8c.15 0 .27.12.27.26v.6c0 .15-.12.27-.27.27h-2.77c-.15 0-.27-.12-.27-.26V8.5c0-.15.12-.27.27-.27h2.77c.15 0 .27.12.27.27z"/></svg>'); }
.btn--line:hover { background: #05b34c; }
/* 🔴 LINE 綠不再當按鈕底（2026-08-03 設計評估）：#06C755 是**第三方的品牌色**，
   使用者對它的既有印象是「LINE 官方帳號的加好友按鈕」＝免費工具的視覺簽名。
   把它放成全站最大的視覺元素，等於宣告這站是用現成零件拼的。
   綠色退回它該在的位置——按鈕左邊那顆 16px 圖示。 */
.btn--line::before {
  content: ""; inline-size: 16px; block-size: 16px; flex: none;
  background: #fff;
  -webkit-mask: var(--line-icon) center/contain no-repeat;
  mask: var(--line-icon) center/contain no-repeat;
}

.cta-bar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-gutter) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: rgba(14, 16, 19, .92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-line);
}
/* 黏底行動列＝手機專用（拇指可及區）。桌機有滑鼠、有版面，不需要一條橫條常駐佔位，
   而且它在 1280px 容器裡會拉出一條 780px 的巨大色塊。 */
@media (min-width: 768px) { .cta-bar { display: none; } }
.btn--line { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cta-bar .btn { padding-inline: var(--sp-3); }
.cta-bar .btn--line { flex: 65; }
.cta-bar .btn--secondary { flex: 35; }

.desk-contact {
  margin-top: var(--sp-5); padding: var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2);
  display: grid; gap: var(--sp-2);
}
.desk-contact strong { color: var(--c-text); }
/* 這段開頭就寫「用電腦看的話…」——手機看到它只會困惑。
   底下那條固定的 LINE 按鈕本來就是手機專用的動線，兩個同時出現是互相打架。 */
@media (max-width: 767px) { .desk-contact { display: none; } }

.site-foot__fresh { color: var(--c-text-4); }

/* ── 內文區塊 ───────────────────────────────────── */
/* 🔴 一頁只准一條左緣（2026-08-03 設計評估）：
   `.prose` 蓋掉 `.container` 的 1280px 變成 34em，但 `.container` 的 `margin-inline:auto`
   還在 → 主內容被置中在 x≈487，頁尾仍從 x≈120 起排。同一頁兩條對齊軸，
   是人眼最先偵測到的「這沒被檢查過」訊號，比字型、比配色都早。
   行長仍用 34em 控（中文一行 34 字左右最好讀），但靠容器左緣起排、不置中。 */
.prose { display: grid; gap: var(--sp-4); }
/* 行長仍要控（中文一行 34 字左右最好讀），但控在**內部元素**上、不控在容器上——
   容器一旦被壓成 34em，`.container` 的 `margin-inline:auto` 就會把整塊內容推到頁面中央，
   而頁尾還在 1280px 的容器裡，同一頁就出現兩條左緣。 */
.prose > * { max-width: var(--w-measure); }
.prose h2 { margin-top: var(--sp-6); }
.prose ul { margin: 0; padding-left: 1.25em; display: grid; gap: var(--sp-2); color: var(--c-text-2); }

.callout {
  border: 1px solid var(--c-line-strong); border-left: 3px solid var(--c-accent);
  border-radius: var(--r-xs); background: var(--c-surface);
  padding: var(--sp-5); display: grid; gap: var(--sp-3);
}
.callout h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-top: 0; }
.callout p { color: var(--c-text-2); text-wrap: balance; }

/* ── 頁尾 ───────────────────────────────────────── */
main { flex: 1 0 auto; }

.site-foot {
  margin-top: auto;
  border-top: 1px solid var(--c-line); padding-block: var(--sp-7);
  color: var(--c-text-4);
  /* 15px 是 TypoGate 的字級地板（再小老花看不清）。
     店名、地址、電話是最需要被看清楚的資訊，不該是全站最小的字。 */
  font-size: 15px; line-height: var(--lh-small);
}
.site-foot .container { display: grid; gap: var(--sp-3); }
/* 🔴 這條原本沒有 :not(.btn)：`.site-foot a`(0,1,1) 權重壓過 `.btn--line`(0,1,0)，
   把 LINE 按鈕的白字換成 55% 灰（對比 1.43:1）、還把 inline-flex 降成 inline-block。
   43 頁全中，而那顆是「沒找到想要的車」唯一的出口。頁尾的連結樣式不准碰按鈕。 */
/* ⚠️ 觸控面積用 min-height 做、不要用 padding 撐：padding-block 會直接墊高行盒，
   結果頁尾六行裡只有「含連結那幾行」被上下各撐開 12px＝行距忽寬忽窄（三張桌機截圖都看得到）。 */
.site-foot a:not(.btn) { color: var(--c-text-3); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-foot a:not(.btn):hover { color: var(--c-text); }

/* ── 管理視圖（只有我們跟老闆看得到）───────────── */
/* 後台表格：手機上欄位被擠成兩三個字一行，車款尾字會單獨掉一行（排版安檢會擋）。
   → 讓表格在自己的框裡橫向捲，欄寬不被螢幕壓扁；捲的是表格，不是整頁。 */
.manage-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.manage-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.manage-table th, .manage-table td {
  text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--c-line);
}
/* 每一格都不換行＝不可能有孤兒字；看不完的往旁邊捲（後台是查表，不是閱讀） */
.manage-table th, .manage-table td { white-space: nowrap; }
.manage-table th { color: var(--c-text-3); font-weight: var(--fw-normal); }
.days--fresh { color: #7bbf8a; }
.days--warn { color: var(--c-accent); }
.days--old { color: #c98b7a; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* 頁尾行動區：整站唯一「沒找到想要的車」也接得住的出口 */
.foot-cta {
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line); display: grid; gap: var(--sp-2);
  color: var(--c-text-2);
}
.foot-cta strong { color: var(--c-text); }
.foot-cta .btn { justify-self: start; margin-top: var(--sp-2); }

/* CTA 之前那句「現場才準」：要看得見但不能搶過按鈕 */
.see-in-person {
  margin-top: var(--sp-6); color: var(--c-text-2);
  padding-left: var(--sp-4); border-left: 2px solid var(--c-accent);
}

.freshness__hint { color: var(--c-text-3); }

/* ── 照片放大檢視（燈箱）─────────────────────────────
   🔴 2026-08-04 Strider 定：點縮圖不要開新分頁，要**在這一頁裡**放大、還能左右切換。
   原本每張是 `<a target="_blank">`，客人想看清楚烤漆＝被踢出網站，手機上更變成一個圖片檔案頁。
   買二手車最花時間的動作就是看照片，這一步不能把人趕走。
   行為在 lightbox.js（原生、零套件）；<a href> 留著＝JS 沒載到也點得開。 */
.lb-open { overflow: hidden; }          /* 燈箱開著時鎖住背景捲動 */
.lb {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-3); padding: var(--sp-4);
  /* 不用純黑：暖黑底跟全站同一個世界，照片邊緣才不會像貼在別人的網站上。
     🔴 .94 實拍不夠：手機上後面那顆綠色 LINE 按鈕與標題整片透出來，
     看照片的時候旁邊有東西在閃＝專注不了。改成幾乎不透光＋一點模糊收邊。 */
  background: rgba(11, 11, 12, .985);
  backdrop-filter: blur(6px);
  animation: lb-in var(--t-fast) var(--e-standard);
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
/* 🔴 2026-08-04 二版：一版是「換 img.src」＝瞬間硬切，手指在動畫面卻不動（Strider：
   「桌機不能滑」「滑動很不絲滑」）。二版改成**軌道**：所有照片並排在一條 track 上，
   拖到哪跟到哪，放開才吸附。滑鼠與觸控同一套（Pointer Events）。 */
.lb__stage { margin: 0; min-width: 0; width: 100%; overflow: hidden; }
.lb__track {
  display: flex; width: 100%;
  transition: translate var(--t-mid) cubic-bezier(.22, .61, .36, 1);
  /* 🔴 none（原本 pan-y）：燈箱開著的時候背景本來就鎖捲了，直向沒有東西要捲；
     而**兩指捏放大必須由我們自己接**——留 pan-y 的話瀏覽器會拿去縮放整個頁面，燈箱就散了。 */
  touch-action: none;
  cursor: grab;
}
.lb__track:active { cursor: grabbing; }
.lb__slide {
  flex: 0 0 100%; margin: 0; min-width: 0;
  display: grid; place-items: center;
}
.lb__img {
  max-width: 100%; max-height: 86dvh; width: auto; height: auto;
  object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none;
}
.lb__close, .lb__nav {
  background: transparent; border: 1px solid var(--c-line-strong); color: var(--c-text);
  cursor: pointer; border-radius: var(--r-xs);
  display: grid; place-items: center;
  transition: border-color var(--t-fast) var(--e-standard),
              background-color var(--t-fast) var(--e-standard),
              translate var(--t-fast) var(--e-standard);
}
.lb__nav { inline-size: 48px; block-size: 64px; font-size: 28px; line-height: 1; }
.lb__close {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 1;
  inline-size: 44px; block-size: 44px; font-size: 18px;
}
.lb__count {
  position: absolute; left: 0; right: 0; bottom: var(--sp-4);
  text-align: center; color: var(--c-text-3); font-size: var(--fs-small);
  font-feature-settings: "tnum" 1;
}
/* 「點兩下放大看細節」——買二手車最想確認刮痕與鍍鉻，但沒人會憑空猜這張圖點得大。
   只有這張真的有多餘像素可以放大時才出現（文字由 lightbox.js 決定）。 */
.lb__hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--sp-4) + 22px);
  text-align: center; color: var(--c-text-3); font-size: var(--fs-small);
  opacity: .75; pointer-events: none; margin: 0;
}
.lb--zoomed .lb__track { cursor: move; }
.lb--zoomed .lb__nav { opacity: .35; }        /* 放大時翻頁鈕退到後面，但不消失 */

/* 往下拉退出的時候：按鈕與計數器讓開，畫面上只剩「照片正在被收回去」這件事
   （IG 也是這樣——手一往下拉，介面就退場，注意力回到後面那一頁）*/
.lb--pulling .lb__nav,
.lb--pulling .lb__close,
.lb--pulling .lb__count,
.lb--pulling .lb__hint { opacity: 0; transition: opacity var(--t-fast) var(--e-standard); }
.lb--pulling { backdrop-filter: none; }       /* 模糊留著會擋住後面正在透出來的車輛資訊 */
@media (hover: hover) {
  .lb__close:hover, .lb__nav:hover { border-color: var(--c-accent); background: rgba(255, 255, 255, .06); }
  .lb__nav--prev:hover { translate: -3px 0; }
  .lb__nav--next:hover { translate: 3px 0; }
  .lb__close:hover { rotate: 90deg; }
}
/* 手機：箭頭壓在照片下緣兩側，中間讓給照片（而且手機本來就用滑的） */
@media (max-width: 599px) {
  .lb { grid-template-columns: 1fr; padding: var(--sp-3); }
  /* 位置要避開頁面底部那條固定的 LINE 按鈕條——雖然燈箱蓋在它上面，
     但兩個東西疊在同一個位置，手指按下去會分不清自己按到哪一個。 */
  .lb__nav { position: absolute; bottom: var(--sp-9); inline-size: 44px; block-size: 44px; font-size: 22px; }
  .lb__nav--prev { left: var(--sp-4); }
  .lb__nav--next { right: var(--sp-4); }
  .lb__count { bottom: calc(var(--sp-9) + 56px); }
  /* 🔴 手機改放頂部：照片幾乎頂到計數器，提示擺在下面會**壓在照片上、整句讀不到**
     （實拍才看得出來——390px 下照片底緣 660、提示原本落在 656）。
     上面那條帶只有右上角的 ✕，置中的短句不會撞到。 */
  .lb__hint { top: calc(var(--sp-4) + 12px); bottom: auto; }
  .lb__img { max-height: 72dvh; }
}
/* 燈箱開著的時候，底部那條固定 CTA 直接收起來：它不是這一刻的動作 */
.lb-open .cta-bar { display: none; }

/* ── 微互動：滑鼠移過去，東西往你要去的方向動一點點 ──────────
   🔴 2026-08-04 Strider 定：每一個可以點的東西都要有 hover 的微互動，為的是質感。
   **只有一套動作語言**：往「按下去會發生的方向」移動 1–4px，250ms，其餘不動。
   不做放大彈跳、不做陰影、不做顏色亂閃——那是廉價 hover 的定義，而且處處不一樣＝沒有設計。
   ⚠️ 全部包在 `@media (hover: hover)`（觸控裝置沒有 hover、套了會卡在 hover 態）；
   `prefers-reduced-motion: reduce` 由檔案上方那條全域規則統一關掉。 */
@media (hover: hover) {
  /* 按鈕：整顆往上浮 1px＝「它有回應」，不是「它在跳」 */
  .btn { transition: background-color var(--t-fast) var(--e-standard),
                     border-color var(--t-fast) var(--e-standard),
                     color var(--t-fast) var(--e-standard),
                     translate var(--t-fast) var(--e-standard); }
  .btn:hover { translate: 0 -1px; }
  .btn:active { translate: 0 0; }          /* 按下去回到原位＝有被按到的手感 */
  .btn--line:hover::before { scale: 1.08; }
  .btn--line::before { transition: scale var(--t-fast) var(--e-standard); }

  /* 卡片：照片微推近 ＋ 車名提亮 ＋ 價格底下那條金線往右長出去 */
  .card__media { overflow: hidden; }
  .card__media img { transition: scale var(--t-mid) cubic-bezier(.22,.61,.36,1); }
  .card:hover .card__media img { scale: 1.03; }
  .card__body h3 { transition: color var(--t-fast) var(--e-standard); }
  .card:hover .card__body h3 { color: #fff; }
  .card__price::after { transition: inline-size var(--t-fast) var(--e-standard); }
  .card:hover .card__price::after { inline-size: 46px; }

  /* 相簿縮圖：同一套動作（推近一點、亮一點） */
  .gallery a { overflow: hidden; display: block; }
  .gallery img { transition: scale var(--t-mid) cubic-bezier(.22,.61,.36,1), opacity var(--t-fast) linear; }
  .gallery a:hover img { scale: 1.04; opacity: 1; }

  /* 文字連結：底線從左邊長出來（不是整條硬換顏色） */
  .rules-link a, .linkish, .site-foot a:not(.btn) { position: relative; text-decoration: none; }
  .rules-link a::after, .linkish::after, .site-foot a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
    background: currentColor; scale: 0 1; transform-origin: left center;
    transition: scale var(--t-fast) var(--e-standard);
  }
  .rules-link a:hover::after, .linkish:hover::after, .site-foot a:not(.btn):hover::after { scale: 1 1; }

  /* 篩選鈕：底部那條重點色線從中間展開 */
  .finder button:not(.finder__clear) { position: relative; }
  .finder button:not(.finder__clear)::after {
    content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 4px; height: 2px;
    background: var(--c-accent); scale: 0 1; transform-origin: center;
    transition: scale var(--t-fast) var(--e-standard);
  }
  .finder button:not(.finder__clear):hover::after { scale: 1 1; }
  .finder button[aria-pressed="true"]::after { scale: 0 1; }   /* 選中態自己已經有底線，不要疊兩條 */

  /* hero 的「看這一台」：箭頭往前滑（已經有，這裡只是把時間對齊全站） */
  .hero__cta a::after { transition: translate var(--t-fast) var(--e-standard); }
}

/* ── 手機右下角固定聯絡鈕 ─────────────────────────────
   🔴 2026-08-04 案主要求：手機上不管往上往下滑，右下角都要有 LINE 與粉絲團的按鈕。
   **只在手機出現**：桌機頁尾兩個連結都在、滑鼠也好點，圓鈕浮在角落只會擋內容。
   造型刻意不是「夜市浮動廣告」那種滿色大圓：暖黑底＋髮絲邊框＋品牌色圖示——
   認得出是哪個平台就夠了，全站「只有一個彩色」的紀律不必為了兩顆按鈕破功。
   ⚠️ 44px 是觸控目標地板（Apple HIG／WCAG 2.5.5 都用這個數）。 */
.fab { display: none; }
:root {
  --fb-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.45 2.91h-2.33V22c4.78-.79 8.44-4.94 8.44-9.94"/></svg>');
}
@media (max-width: 767px) {
  .fab {
    position: fixed; z-index: 40;
    right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
    display: grid; gap: var(--sp-2);
  }
  /* 車輛頁底部那條固定 CTA 高約 64px，讓開它＋一個手指的距離 */
  .fab--above-cta { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .fab__btn {
    inline-size: 44px; block-size: 44px; border-radius: 50%;
    background: rgba(27, 25, 23, .92); border: 1px solid var(--c-line-strong);
    backdrop-filter: blur(8px);
    display: grid; place-items: center;
    transition: border-color var(--t-fast) var(--e-standard),
                translate var(--t-fast) var(--e-standard);
  }
  .fab__btn::before {
    content: ""; inline-size: 22px; block-size: 22px;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .fab__btn--line::before {
    background: var(--c-line-green);
    -webkit-mask-image: var(--line-icon); mask-image: var(--line-icon);
  }
  .fab__btn--fb::before {
    background: #0866FF;
    -webkit-mask-image: var(--fb-icon); mask-image: var(--fb-icon);
  }
  .fab__btn:active { translate: 0 1px; border-color: var(--c-accent); }
}
/* 燈箱開著時收起來：那一刻的動作是看照片，不是聯絡 */
.lb-open .fab { display: none; }
/* 車輛頁底下已經有一顆固定的「用 LINE 問 D-XX」（而且它帶車號、比浮動鈕有用），
   浮動鈕再放一顆 LINE ＝同一個動作在同一個畫面出現兩次。那一頁只留粉絲團。 */
@media (max-width: 767px) { .fab--above-cta .fab__btn--line { display: none; } }

/* ── 2026-08-04 全站體檢後的修正 ────────────────────────
   兩隻 agent 逐個點過桌機與手機、Mate 回線上逐條複驗之後改的。 */

/* ① 桌機也要有帶車號的 LINE 按鈕。
   原本 `.cta-bar` 在 ≥768px 整條 display:none——那是「這條是手機貼底列」的思路，
   結果桌機客人看完車，全站唯一帶車號的入口就消失了（實測 768/1024/1440 都只剩通用鈕）。
   同一份 markup 兩種身分：手機貼底、桌機當內容後面的一般區塊。 */
@media (min-width: 768px) {
  .cta-bar {
    display: flex; position: static; z-index: auto;
    background: transparent; backdrop-filter: none; border-top: 0;
    padding-inline: var(--sp-gutter); padding-block: 0;
    margin-block: var(--sp-7) var(--sp-9);
    justify-content: flex-start; gap: var(--sp-3);
  }
  .cta-bar .btn { flex: none; padding-inline: var(--sp-6); }
}

/* ② 可以左右滑的篩選列，右緣要看得出「還有」。
   實測 390px：廠牌排有 4 個廠牌、價格排有「30 萬以上」都在畫面外，
   而且切齊得像整排就到這裡為止——沒有捲軸、沒有陰影、沒有任何提示。
   用 mask 讓最右邊淡出＝一眼知道右邊還有東西。 */
@media (max-width: 599px) {
  .finder__row {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  /* 已經滑到底就不要再淡出（不然最後一顆永遠看起來是半透明的） */
  .finder__row:has(> *:last-child:target) { -webkit-mask-image: none; mask-image: none; }
}

/* ③ 浮動鈕：往下捲的時候讓開（行為在 ui.js） */
.fab { transition: translate var(--t-mid) var(--e-standard), opacity var(--t-fast) linear; }
.fab--away { translate: 0 120%; opacity: 0; pointer-events: none; }