/* ============================================================
   紳新國際 公司首頁 —— 樣式
   命名一律 sx- 開頭，避免撞到 mega-menu 的 mm- 或未來的其他元件
   ============================================================ */

:root {
  --sx-ink:    #0a0a0a;
  --sx-ink-2:  #5a5a5a;
  --sx-ink-3:  #8c8c8c;
  --sx-line:   #e6e6e6;
  --sx-bg:     #ffffff;
  --sx-bg-2:   #f6f6f6;
  --sx-piaa:   #1f6fdb;
  --sx-amon:   #d8433d;
  --sx-diax:   #a8813f;
  --sx-ease:   cubic-bezier(.22, .61, .36, 1);
  --sx-max:    1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sx-bg);
  color: var(--sx-ink);
  font-family: -apple-system, "SF Pro TC", "PingFang TC",
               "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.sx-wrap { max-width: var(--sx-max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .sx-wrap { padding: 0 18px; } }

/* ---------- 區塊通用 ---------- */
.sx-section { padding: 96px 0; }
.sx-section--tint { background: var(--sx-bg-2); }
/* 深色段：技術背書用。放在 tint 與 white 之間當節奏斷點，
   順便解掉「插一段新區塊會打亂明暗交替」的問題。 */
.sx-section--dark { background: #0b0f14; color: #fff; }
.sx-section--dark .sx-eyebrow { color: #7f93ab; }
.sx-section--dark p { color: #c2ccd8 !important; }
.sx-section--dark strong { color: #fff; }
@media (max-width: 720px) { .sx-section { padding: 64px 0; } }

.sx-eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sx-ink-3); font-weight: 700; margin: 0 0 14px;
}
/* ⚠️ 手機把字距收窄。.2em 的字距在 375px 上會讓
   「PIAA・AMON・DIAX 台灣總代理」剛好多擠出一個字換行，
   結果是「理」單獨掉到第二行。 */
@media (max-width: 480px) {
  .sx-eyebrow { letter-spacing: .1em; gap: .5em; }
  .sx-eyebrow::before { width: 20px; }
}
.sx-eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: currentColor; display: inline-block;
}
.sx-h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.25; letter-spacing: -.02em;
  font-weight: 700; margin: 0 0 16px;
}
.sx-lead {
  font-size: 17px; color: var(--sx-ink-2);
  max-width: 640px; margin: 0 0 44px;
}

/* ---------- Hero：雨天視線照當底，深色 ---------- */
.sx-hero {
  position: relative;
  padding: 132px 0 108px;
  color: #fff;
  background: #0b0f14;
  overflow: hidden;
}
.sx-hero__bg {
  position: absolute; inset: 0;
  background: url("img/hero-rain.jpg") center/cover no-repeat;
  /* 照片本身很暗，再壓一層讓文字一定讀得到 */
  opacity: .68;
}
.sx-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,9,13,.92) 0%,
              rgba(6,9,13,.72) 45%, rgba(6,9,13,.35) 100%);
}
.sx-hero .sx-wrap { position: relative; z-index: 1; }
.sx-hero .sx-eyebrow { color: #9fb2c9; }
.sx-hero h1 {
  font-size: clamp(32px, 5.4vw, 62px);
  line-height: 1.16; letter-spacing: -.035em;
  font-weight: 750; margin: 0 0 24px; max-width: 15em;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.sx-hero p {
  font-size: clamp(16px, 1.6vw, 19px);
  color: #cfd8e3; max-width: 40em; margin: 0 0 36px;
}
.sx-hero p strong { color: #fff; }

/* 首屏只剩兩句：一句鋪陳、一句核心。核心句放大並拉開上下距離，
   讓它自己成為一個停頓，而不是段落裡的一行粗體字（2026-09-15）。 */
.sx-hero p { margin: 0 0 16px; }
.sx-hero p.sx-hero__punch {
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.3; letter-spacing: -.02em;
  margin: 26px 0 40px;
}
.sx-hero p.sx-hero__punch strong { font-weight: 750; }
.sx-hero .sx-btn { background: #fff; color: #0a0a0a; }
.sx-hero .sx-btn--ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.35);
}
.sx-hero__meta {
  display: flex; flex-wrap: wrap; gap: 12px 40px;
  padding-top: 32px; margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.sx-stat__n {
  font-size: clamp(24px, 3vw, 34px); font-weight: 750;
  letter-spacing: -.02em; line-height: 1.1;
}
.sx-stat__l { font-size: 13px; color: #9fb2c9; }
/* 可查證的那一格。刻意不畫底線、不換顏色——它排在三個純數字旁邊，
   做得太像連結會讓那一格在視覺上跳出來，變成廣告感。
   標籤末尾的 ↗ 加上 hover 變白，足夠暗示可以點。 */
.sx-stat__link { display: block; text-decoration: none; color: inherit; }
.sx-stat__link:hover .sx-stat__l { color: #fff; }
.sx-stat__link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 6px; }

/* ---------- 按鈕 ---------- */
.sx-btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 14px 26px; border-radius: 999px;
  background: var(--sx-ink); color: #fff;
  font-weight: 650; font-size: 15px; text-decoration: none;
  transition: transform .25s var(--sx-ease), opacity .25s var(--sx-ease);
}
.sx-btn:hover { transform: translateY(-2px); opacity: .88; }
.sx-btn--ghost {
  background: transparent; color: var(--sx-ink);
  border: 1px solid var(--sx-line);
}
.sx-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 三品牌 ---------- */
/* ---------- 三品牌 ----------
   每個品牌是一整排，不是三張並排的小卡。
   ⚠️ 這樣排的原因：原廠主視覺是 2.33:1 的橫幅，logo 與日文標語就排在圖的左側，
   那是構圖的一部分。硬塞進 3:2 的小卡要裁掉近一半，等於把人家設計好的東西丟了。
   版面配合素材，不是素材配合版面。 */
.sx-brands { display: grid; gap: 34px; }

.sx-brand {
  display: block;
  border: 1px solid var(--sx-line); border-radius: 16px;
  overflow: hidden; background: #fff; text-decoration: none;
  transition: box-shadow .3s var(--sx-ease), border-color .3s var(--sx-ease);
}
.sx-brand:hover {
  border-color: var(--brand, var(--sx-ink));
  box-shadow: 0 18px 50px -24px rgba(10,10,10,.28);
}

/* 原廠主視覺：比例跟原圖一致，所以完全不裁 */
.sx-brand__kv { aspect-ratio: 1800 / 772; overflow: hidden; background: #0a0a0a; }
.sx-brand__kv img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--sx-ease);
}
.sx-brand:hover .sx-brand__kv img { transform: scale(1.02); }

.sx-brand__body {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 34px; align-items: center;
  padding: 30px 34px 34px;
}
/* 情境照：這個品牌在台灣長什麼樣 */
.sx-brand__media {
  /* 3:2 是三張情境照的最小公倍數：PIAA 那張是 1.79、AMON 與 DIAX 是 1.33，
     用 4:3 會把 PIAA 裁掉四分之一，用 16:9 會把另外兩張裁掉四分之一。
     3:2 讓三張都保留 84% 以上。 */
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--sx-bg-2);
}
.sx-brand__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--sx-ease);
}
.sx-brand:hover .sx-brand__media img { transform: scale(1.04); }

.sx-brand__since {
  font-size: 12px; letter-spacing: .12em; color: var(--sx-ink-3);
  font-weight: 700; margin-bottom: 10px;
}
.sx-brand__claim {
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 750;
  line-height: 1.4; letter-spacing: -.01em;
  color: var(--brand, var(--sx-ink)); margin-bottom: 12px;
}
.sx-brand__desc {
  font-size: 15.5px; color: var(--sx-ink-2); line-height: 1.85; margin: 0 0 18px;
}
.sx-brand__go { font-size: 14px; font-weight: 700; color: var(--brand, var(--sx-ink)); }

@media (max-width: 860px) {
  .sx-brands { gap: 24px; }
  .sx-brand__body { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px 26px; }
  .sx-brand__media { max-width: 100%; }
}

/* ---------- 產品線 ---------- */
.sx-lines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .sx-lines { grid-template-columns: repeat(2, 1fr); } }
/* 手機改成橫向滑動的一整排。
   ⚠️ 為什麼不是直向排：八張卡直向堆疊在 375px 的螢幕上是 5.4 個螢幕高，
   加上下面的「選購工具」總共要滑十個螢幕才過得去，沒人滑得完。
   橫向的話高度固定成一個卡片，要看幾張自己滑幾張。
   桌機維持四欄不變。 */
@media (max-width: 560px) {
  .sx-lines {
    display: flex; gap: 12px;
    grid-template-columns: none;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 滑出容器、貼齊螢幕邊緣，才不會看起來被框住 */
    margin-inline: -18px; padding-inline: 18px;
    padding-bottom: 4px;
  }
  .sx-lines::-webkit-scrollbar { display: none; }
  .sx-lines > .sx-line {
    flex: 0 0 78%;          /* 露出下一張的邊，暗示可以滑 */
    scroll-snap-align: start;
  }
}

.sx-line {
  border: 1px solid var(--sx-line); border-radius: 14px;
  overflow: hidden; background: #fff; text-decoration: none;
  display: flex; flex-direction: column;
  transition: box-shadow .3s var(--sx-ease), transform .3s var(--sx-ease);
}
.sx-line:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(0,0,0,.25); }
.sx-line__media {
  /* 商品圖是去背方形照，用正方形框才不會有留白或裁切。
     ⚠️ 這裡踩過一次：原本框是 4/3、圖用 width/height:100%，
     但外框高度是 aspect-ratio 撐出來的、不是「確定的高度」，
     百分比高度沒得換算就退回圖片自己的比例 → 方形圖被算成跟寬度一樣高，
     比框高出一截、上下被 overflow 切掉（雨刷底部、喇叭盒底部就是這樣不見的）。
     解法：不要用百分比高度，改 max-width/max-height + width:auto，
     圖片自己決定尺寸、絕不超出框。 */
  aspect-ratio: 1 / 1;
  background: #fff;
  display: grid; place-items: center; overflow: hidden;
  padding: 10%;
  color: #b8b8b8; font-size: 12px; letter-spacing: .1em;
}
.sx-line__media:empty,
.sx-line__media:not(:has(img)) {
  background-image: repeating-linear-gradient(135deg,#ececec 0 10px,#f4f4f4 10px 20px);
}
.sx-line__media img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform .5s var(--sx-ease);
}
.sx-line:hover .sx-line__media img { transform: scale(1.06); }
.sx-line__body { padding: 18px 20px 22px; }
.sx-line__tag {
  font-size: 11px; letter-spacing: .12em; font-weight: 700;
  color: var(--brand, var(--sx-ink-3));
}
.sx-line__title { font-size: 17px; font-weight: 700; margin: 6px 0 6px; }
.sx-line__desc { font-size: 14px; color: var(--sx-ink-2); margin: 0; }

/* ---------- 工具 ---------- */
.sx-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) and (min-width: 561px) { .sx-tools { grid-template-columns: 1fr; } }
/* 同上，手機改橫向滑動。九張卡直向排是 4.8 個螢幕。 */
@media (max-width: 560px) {
  .sx-tools {
    display: flex; gap: 12px;
    grid-template-columns: none;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -18px; padding-inline: 18px;
    padding-bottom: 4px;
  }
  .sx-tools::-webkit-scrollbar { display: none; }
  .sx-tools > .sx-tool {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

.sx-tool {
  display: block; border-radius: 16px; background: #fff; overflow: hidden;
  border: 1px solid var(--sx-line); text-decoration: none;
  transition: border-color .3s var(--sx-ease), transform .3s var(--sx-ease);
}
/* 圖是情境照不是去背商品照，一律 cover。16:9 是為了跟導航列面板裡
   同一批圖共用同一個裁切比例——兩處看到的是同一張構圖。 */
.sx-tool__media { aspect-ratio: 16 / 9; background: var(--sx-bg-2); overflow: hidden; }
.sx-tool__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--sx-ease);
}
.sx-tool:hover .sx-tool__media img { transform: scale(1.05); }
.sx-tool__body { padding: 22px 24px 24px; }
.sx-tool:hover { transform: translateY(-3px); border-color: var(--sx-ink); }
.sx-tool__kind {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; padding: 4px 10px; border-radius: 999px;
  background: var(--sx-bg-2); color: var(--sx-ink-2); margin-bottom: 14px;
}
.sx-tool__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.sx-tool__desc { font-size: 14px; color: var(--sx-ink-2); margin: 0; }

/* ---------- 最近到的幾件 ----------
   沿用 .sx-tool 的卡片語彙（同樣的圓角、邊框、hover 抬起），差別只有兩個：
   ① 圖是商品去背照不是情境照，所以用 contain 不用 cover——去背照被裁切
      會切掉商品本身，那正是要給人看的東西。
   ② 多一行上架年月。那是這一區存在的理由：它證明貨架還在動，
      而且數字是從商店的真實資料來的，不是手寫的。 */
.sx-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) and (min-width: 561px) { .sx-new { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  /* 同工具區：手機改橫向滑動，六張直向排要滑三個螢幕 */
  .sx-new {
    display: flex; gap: 12px; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none;
  }
  .sx-new::-webkit-scrollbar { display: none; }
  .sx-new > .sx-newcard { flex: 0 0 74%; scroll-snap-align: start; }
}
.sx-newcard {
  display: block; border-radius: 16px; background: #fff; overflow: hidden;
  border: 1px solid var(--sx-line); text-decoration: none; color: inherit;
  transition: border-color .3s var(--sx-ease), transform .3s var(--sx-ease);
}
.sx-newcard:hover { transform: translateY(-3px); border-color: var(--sx-ink); }
/* 1:1 而不是 4:3——商店的商品圖幾乎全是正方形去背照，圖框比例一致時
   剛好填滿，不會出現上下留白或左右留白那種「照片被框住」的感覺。 */
.sx-newcard__media { aspect-ratio: 1 / 1; background: var(--sx-bg-2); overflow: hidden; }
.sx-newcard__media img {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #fff;
  transition: transform .5s var(--sx-ease);
}
.sx-newcard:hover .sx-newcard__media img { transform: scale(1.04); }
.sx-newcard__body { padding: 16px 18px 18px; }
.sx-newcard__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.sx-newcard__brand {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--sx-ink-3);
}
.sx-newcard__when {
  font-size: 11px; letter-spacing: .04em; color: var(--sx-ink-3);
  font-variant-numeric: tabular-nums; flex: none;
}
.sx-newcard__name {
  font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--sx-ink);
  margin-bottom: 8px;
}
.sx-newcard__price { font-size: 15px; font-weight: 700; }
.sx-new__all {
  display: inline-block; margin-top: 26px; font-size: 15px;
  color: var(--sx-ink); text-decoration: none; border-bottom: 1px solid var(--sx-line);
  padding-bottom: 3px; transition: border-color .25s var(--sx-ease);
}
.sx-new__all:hover { border-color: var(--sx-ink); }

/* ---------- 分佈圖 ----------
   跟頁面上其他插圖同一套語彙：只有線與點，沒有陰影漸層。
   圓點是可按的，所以要有 hover 與選中兩種狀態，否則看起來像裝飾。 */
.sx-distrib {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 28px; align-items: center;
  margin: 0 0 28px; padding: 20px 24px;
  border: 1px solid var(--sx-line); border-radius: 16px; background: #fff;
}
.sx-distrib svg { width: 168px; height: auto; display: block; }
.sx-coast { fill: #fbfbfb; stroke: var(--sx-line); stroke-width: 1.2; stroke-linejoin: round; }
@media (max-width: 640px) {
  .sx-distrib { grid-template-columns: 1fr; gap: 14px; justify-items: center; text-align: center; }
  .sx-distrib svg { width: 150px; }
}
.sx-dot circle {
  fill: #fff; stroke: var(--sx-ink); stroke-width: 1;
  transition: fill .2s var(--sx-ease), stroke .2s var(--sx-ease);
}
.sx-dot text { font-size: 9px; font-weight: 700; fill: var(--sx-ink-2); pointer-events: none; }
.sx-dot { cursor: pointer; }
.sx-dot:hover circle { fill: var(--sx-bg-2); }
.sx-dot:focus-visible { outline: none; }
.sx-dot:focus-visible circle { stroke: var(--sx-piaa); stroke-width: 2; }
.sx-dot.is-on circle { fill: var(--sx-piaa); stroke: var(--sx-piaa); }
.sx-dot.is-on text { fill: #fff; }
.sx-dot__cap { font-size: 8px; fill: var(--sx-ink-3); }
.sx-inset { fill: none; stroke: var(--sx-line); stroke-width: 1; }
.sx-distrib__hint { margin: 0; font-size: 14px; color: var(--sx-ink-2); }
/* 前六名的橫條：地圖看得出「哪裡密」，看不出「差多少」。
   數字＋長條回答後者，而且每一行都是同一個篩選器的另一個入口。 */
.sx-rank { list-style: none; margin: 14px 0 0; padding: 0; max-width: 380px; }
.sx-rank li { margin: 0 0 4px; }
.sx-rank button {
  display: grid; grid-template-columns: 4.5em minmax(0,1fr) 2.5em;
  align-items: center; gap: 10px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; color: var(--sx-ink-2); cursor: pointer; text-align: left;
}
.sx-rank button:hover { background: var(--sx-bg-2); }
.sx-rank button[aria-pressed="true"] { color: var(--sx-ink); font-weight: 700; }
.sx-rank i { display: block; height: 6px; border-radius: 3px; background: var(--sx-line); }
.sx-rank i::before {
  content: ""; display: block; width: var(--w); height: 100%;
  border-radius: 3px; background: var(--sx-ink-3);
}
.sx-rank button[aria-pressed="true"] i::before { background: var(--sx-piaa); }
.sx-rank b { text-align: right; font-variant-numeric: tabular-nums; color: var(--sx-ink); }
.sx-distrib__warn { margin: 8px 0 0; font-size: 13px; color: var(--sx-ink-3); }

/* ---------- 經銷地圖 ---------- */
.sx-map-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 32px; }
@media (max-width: 900px) { .sx-map-layout { grid-template-columns: 1fr; } }

.sx-facet { margin-bottom: 26px; }
.sx-facet h3 {
  font-size: 12px; letter-spacing: .14em; color: var(--sx-ink-3);
  font-weight: 700; margin: 0 0 10px;
}
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chip {
  appearance: none; border: 1px solid var(--sx-line); background: #fff;
  font: inherit; font-size: 13px; padding: 7px 14px;
  border-radius: 999px; cursor: pointer; color: var(--sx-ink-2);
  transition: all .2s var(--sx-ease);
}
.sx-chip:hover { border-color: var(--sx-ink-3); }
.sx-chip[aria-pressed="true"] {
  background: var(--sx-ink); border-color: var(--sx-ink); color: #fff;
}

.sx-map-canvas {
  border: 1px solid var(--sx-line); border-radius: 16px;
  background: var(--sx-bg-2); aspect-ratio: 16/7;
  display: grid; place-items: center; text-align: center;
  color: var(--sx-ink-3); font-size: 14px; margin-bottom: 22px; padding: 20px;
}
.sx-count { font-size: 14px; color: var(--sx-ink-2); margin: 0 0 14px; }
/* 掃描時要密。清單區在 1280 版面下約 904px 寬，minmax(200px) 剛好排四欄；
   螢幕變窄會自己掉成三欄、兩欄、一欄，不必為每個斷點各寫一條。 */
.sx-dealers {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* 展開的那張橫跨整排。四欄的卡片只有 216px，照片、街廓地圖、營業時間
   擠在裡面全都讀不了——瀏覽要密，閱讀要寬，這兩件事本來就該分開。 */
.sx-dealer.is-open { grid-column: 1 / -1; min-height: 0; }
@media (max-width: 520px) { .sx-dealers { grid-template-columns: 1fr; } }

/* 搜尋結果的分界線：完整命中在上，只對到部分字的在下。
   佔滿整列（grid-column:1/-1），不然它會被當成一張卡擠進格子裡。 */
.sx-dealers__sep {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0 2px;
  font-size: 13px; color: #8a8a8a; letter-spacing: .02em;
}
.sx-dealers__sep::before, .sx-dealers__sep::after {
  content: ""; flex: 1; height: 1px; background: #e6e6e6;
}

.sx-dealer {
  display: flex; flex-direction: column;
  /* 最後一排不足四張時，grid 只會把它撐到內容高度，比前幾排矮一截。
     這裡把小卡的高度直接定下來，整片格線才會齊。展開時 body 另外長，
     不受這行影響。 */
  min-height: 235px;
  border: 1px solid var(--sx-line); border-radius: 12px;
  background: #fff; overflow: hidden;
  transition: border-color .2s var(--sx-ease);
}
.sx-dealer.is-open { border-color: var(--sx-ink); }
/* 小卡本身不再可點——只有底下那顆按鈕會展開。整張可點的問題是使用者
   不知道自己可以點，畫面上只有一個小箭頭在暗示；明確的按鈕會講出
   自己要做什麼，而且文案可以依內容而定。 */
.sx-dealer__head { display: flex; flex-direction: column; height: 100%; padding: 16px 18px; }

/* 評分留在小卡，因為它是掃描階段唯一能拿來排除的東西——五家汽車美容
   擺一起，4.9（214 則）跟 3.9（12 則）一眼分高下。但只留一顆星、
   字級壓小、不用金色：先前那排大金星太吵，讓卡片看起來很滿。 */
/* 高度寫死不用 min-height：有評分那行的數字比「尚無評分」大一級，
   行框高度就會差 2px——一整片卡片看起來就是「有的高一點點」。
   這種 2px 的參差最惱人，因為看得出不對勁卻找不到原因。 */
.sx-dealer__rate {
  margin: 6px 0 0; font-size: 12.5px; color: var(--sx-ink-3);
  height: 20px; line-height: 20px; overflow: hidden; white-space: nowrap;
}
.sx-dealer__rate b { font-size: 13.5px; font-weight: 500; color: var(--sx-ink-2); line-height: inherit; }
.sx-dealer__rate em { font-style: normal; margin-left: 4px; }

/* 小卡底部的兩個動作。文字連結而不是實心按鈕——一排四張卡，
   四顆黑色實心鈕會讓整片列表變成一片黑；小卡要輕。
   auto ＝ 把剩下的空間推到這一列上面，所以它永遠貼在卡片最底部，
   不會因為店名一行還是兩行而上下浮動。 */
.sx-dealer__acts-sm {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 12px;
}
.sx-dealer__go, .sx-dealer__more {
  font: inherit; font-size: 13px; line-height: 1.4; white-space: nowrap;
  color: var(--sx-ink); text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 2px 0;
  border-bottom: 1px solid var(--sx-line);
  transition: border-color .15s var(--sx-ease);
}
.sx-dealer__go:hover, .sx-dealer__more:hover { border-bottom-color: var(--sx-ink); }
.sx-dealer__go--weak { color: var(--sx-ink-2); }
.sx-dealer__more i { font-style: normal; font-size: 10px; color: var(--sx-ink-3); margin-left: 3px; }

/* 點過的那張留一個記號——不然使用者不知道地圖上亮起來的是哪一家 */
.sx-dealer.is-active { border-color: var(--sx-ink); }
.sx-dealer__body { padding: 0 20px 18px; border-top: 1px solid var(--sx-line); }

/* ---------- 門市照片：滑過換圖 ----------
   把圖片區切成等寬的隱形區塊，滑鼠在哪一塊就顯示哪一張，不用點。
   純 CSS：區塊放在圖片前面當兄弟節點，用 ~ 選擇器往後控制。
   ⚠️ 觸控裝置沒有 hover，手機只會看到第一張——那是刻意的，
   手機要的是「快速看到店長怎樣」，不是逐張瀏覽。 */
.sx-shots {
  position: relative; aspect-ratio: 3/2; margin: 16px 0 4px;
  border-radius: 12px; overflow: hidden; background: #f2f2f2;
}
.sx-shots__z { position: absolute; top: 0; bottom: 0; z-index: 3; }
.sx-shots .z1 { left: 0; width: 100%; }
.sx-shots.is-multi .z1 { width: 33.3334%; }
.sx-shots.is-multi .z2 { left: 33.3333%; width: 33.3334%; }
.sx-shots.is-multi .z3 { left: 66.6666%; width: 33.3334%; }
.sx-shots.is-pair .z1 { width: 50%; }
.sx-shots.is-pair .z2 { left: 50%; width: 50%; }
.sx-shots.is-quad .z1 { width: 25%; }
.sx-shots.is-quad .z2 { left: 25%; width: 25%; }
.sx-shots.is-quad .z3 { left: 50%; width: 25%; }
.sx-shots.is-quad .z4 { left: 75%; width: 25%; }
.sx-shots__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .22s ease;
}
.sx-shots__img.s1 { opacity: 1; }
.z2:hover ~ .s1 { opacity: 0; } .z2:hover ~ .s2 { opacity: 1; }
.z3:hover ~ .s1 { opacity: 0; } .z3:hover ~ .s3 { opacity: 1; }
.z4:hover ~ .s1 { opacity: 0; } .z4:hover ~ .s4 { opacity: 1; }

/* 分段指示條：滑過換圖是隱藏互動，沒有東西暗示就不會有人去滑 */
.sx-shots__pips {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 4;
  display: flex; gap: 5px;
}
.sx-shots__pips i {
  flex: 1; height: 2.5px; border-radius: 2px;
  background: rgba(255, 255, 255, .45); transition: background .22s;
}
.sx-shots__pips i:first-child { background: rgba(255, 255, 255, .95); }
.z1:hover ~ .sx-shots__pips i:nth-child(1) { background: rgba(255, 255, 255, .95); }
.z2:hover ~ .sx-shots__pips i { background: rgba(255, 255, 255, .45); }
.z2:hover ~ .sx-shots__pips i:nth-child(2) { background: rgba(255, 255, 255, .95); }
.z3:hover ~ .sx-shots__pips i { background: rgba(255, 255, 255, .45); }
.z3:hover ~ .sx-shots__pips i:nth-child(3) { background: rgba(255, 255, 255, .95); }
.z4:hover ~ .sx-shots__pips i { background: rgba(255, 255, 255, .45); }
.z4:hover ~ .sx-shots__pips i:nth-child(4) { background: rgba(255, 255, 255, .95); }
.sx-shots__hint {
  position: absolute; right: 12px; top: 10px; z-index: 4;
  font-size: 11px; letter-spacing: .08em; color: var(--sx-ink-2);
  background: rgba(255, 255, 255, .92); padding: 4px 9px; border-radius: 999px;
  transition: opacity .2s;
}
.sx-shots:hover .sx-shots__hint { opacity: 0; }
/* 陳列照：16:9 裁切，卡片展開才載入（loading="lazy"）。
   高度固定住是為了不讓圖片載入時把下面的內容往下推。 */
.sx-dealer__photo {
  margin: 14px 0 0; aspect-ratio: 16 / 10; border-radius: 10px;
  overflow: hidden; background: var(--sx-bg-2);
}
.sx-dealer__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-dealer__about {
  font-size: 14px; line-height: 1.7; color: var(--sx-ink-2); margin: 14px 0 0;
}
.sx-dealer__meta { font-size: 14px; color: var(--sx-ink-2); margin: 10px 0 0; }
.sx-dealer__meta span {
  display: inline-block; min-width: 68px; color: var(--sx-ink-3); font-size: 12.5px;
}
/* Google 的營業時間是七天七句。擠成一行讀不了，一行一天才掃得動。 */
.sx-dealer__meta--hours { display: flex; gap: 0; align-items: flex-start; }
.sx-dealer__meta--hours em {
  display: block; font-style: normal; font-variant-numeric: tabular-nums;
}
.sx-dealer__acts { margin-top: 14px; }
/* 顯示 Google 的資料要標明來源（Google 的服務條款要求）。
   同時也是誠實：評分是抓下來的快照，不是即時的。 */
.sx-dealer__src { margin: 12px 0 0; font-size: 12px; color: var(--sx-ink-3); }

/* 展開卡片裡的小地圖。圖磚是絕對定位的 <img>，容器負責裁切。
   去彩度是為了讓 OSM 那些彩色的地標色塊不要蓋過我們自己的圖釘，
   順便跟站上的黑白調性一致。 */
.sx-minimap {
  position: relative; margin: 12px 0 0; height: 200px; overflow: hidden;
  border: 1px solid var(--sx-line); border-radius: 10px;
  background: var(--sx-bg-2); contain: paint;
}

/* 卡片裡的預覽：整塊是一顆按鈕，一個手勢都不攔——滾輪、觸控滑動
   全部留給頁面。要縮放請點開，衝突從根上就不存在。 */
.sx-minimap--peek {
  display: block; width: 100%; padding: 0; text-align: left;
  cursor: zoom-in; font: inherit; color: inherit;
}
.sx-minimap--peek:hover { border-color: var(--sx-ink-3); }
.sx-minimap--peek:hover .sx-minimap__zoomcue { opacity: 1; }
.sx-minimap__zoomcue {
  position: absolute; left: 8px; top: 8px; z-index: 3;
  padding: 3px 9px; font-size: 12px; color: var(--sx-ink);
  background: rgba(255, 255, 255, .92); border: 1px solid var(--sx-line);
  border-radius: 100px; opacity: .82; transition: opacity .15s var(--sx-ease);
}

/* 燈箱裡的那張才可以操作 */
.sx-minimap--live {
  margin: 0; flex: 1; min-height: 0; border: 0; border-radius: 0;
  cursor: grab; touch-action: none;
}
.sx-minimap--live.is-dragging { cursor: grabbing; }
/* 圖磚全裝在這一層，雙指縮放時整層一起變形才不會出現接縫 */
.sx-minimap__layer { position: absolute; inset: 0; will-change: transform;
  /* 交給合成器處理，變形時不重排版；圖磚放大時用平滑取樣，糊也要糊得均勻 */
  backface-visibility: hidden; transform-origin: 0 0; }
.sx-minimap__t { image-rendering: auto; }
.sx-minimap__t {
  position: absolute; width: 256px; height: 256px; max-width: none;
  filter: grayscale(1) contrast(.88) brightness(1.06);
  user-select: none; pointer-events: none;
}
/* 圖釘固定在正中央——地圖就是照著「店家在中心」切出來的 */
/* left/top 由 JS 依店家實際位置設定——拖動地圖時圖釘要跟著離開中心，
   不然看起來會像店家跟著地圖一起被拖著跑。 */
.sx-minimap__pin {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--sx-piaa); border: 2.5px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45); z-index: 2; pointer-events: none;
}

/* 縮放控制。手機沒有滾輪，這排是它唯一的縮放方式，所以按鈕要夠大按得到。 */
.sx-minimap__ctl {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
}
.sx-minimap__ctl button {
  width: 30px; height: 30px; padding: 0; font: inherit; font-size: 15px;
  line-height: 1; color: var(--sx-ink); background: rgba(255, 255, 255, .94);
  border: 1px solid var(--sx-line); border-radius: 7px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.sx-minimap__ctl button:hover { background: #fff; border-color: var(--sx-ink-3); }
.sx-minimap__ctl button:active { transform: translateY(1px); }
.sx-minimap__cred {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  padding: 2px 6px; font-size: 10.5px; color: var(--sx-ink-3);
  background: rgba(255, 255, 255, .82); border-radius: 6px 0 0 0;
}
@media (max-width: 700px) { .sx-minimap { height: 170px; } }
/* 非經銷商的安裝店家一定要標明。不講清楚有兩個後果：客人跑去問「你們有賣
   PIAA 嗎」撲空；店家也可能覺得被冠上沒談過的名義。 */
.sx-dealer__flag {
  margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--sx-piaa);
  font-size: 13px; line-height: 1.7; color: var(--sx-ink-2);
}
.sx-dealer__nav {
  display: inline-block; padding: 9px 16px; border-radius: 999px;
  background: var(--sx-ink); color: #fff; font-size: 13.5px; font-weight: 600;
  text-decoration: none;
}
.sx-dealer__nav:hover { opacity: .86; }
/* 沒有原始 Google 連結、只能用地址去搜的，長相要弱一階——
   它到得了，但不保證落在正確的那一家。 */
.sx-dealer__nav--weak {
  background: none; color: var(--sx-ink-2); border: 1px solid var(--sx-line);
}
/* 小卡的每一格都固定行數，整片格線的卡片高度才會一模一樣。
   店名與地址最多兩行、超過截斷；不夠兩行的用 min-height 把位置留著。
   不這樣做的話，店名一行的卡片會比兩行的矮一截，一排四個看起來就是
   高低不平——而且它會隨著篩選條件變來變去，很吵。 */
.sx-dealer__top { min-height: 44px; }
.sx-dealer__name {
  font-size: 15px; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sx-dealer__type { margin: 7px 0 0; }
.sx-dealer__type span {
  display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--sx-bg-2); color: var(--sx-ink-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sx-dealer__addr {
  font-size: 13px; color: var(--sx-ink-2); margin: 7px 0 0; line-height: 1.5;
  min-height: 39px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sx-dealer__row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sx-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 5px; border: 1px solid var(--sx-line);
}
.sx-badge--display { border-color: var(--sx-diax); color: var(--sx-diax); }
/* 安裝服務是「服務」不是「商品」，用 PIAA 藍跟旁邊的商品徽章分開——
   兩種東西擺在同一排，顏色一樣的話客人會以為都是賣的東西。 */
.sx-badge--install { border-color: var(--sx-piaa); color: var(--sx-piaa); }
/* #dealerList 是兩欄 grid，這裡面的整段式區塊要橫跨兩欄，
   否則會擠在左半邊、看起來像沒對齊。 */
.sx-empty { padding: 40px; text-align: center; color: var(--sx-ink-3); grid-column: 1 / -1; }

/* 入口狀態：還沒選縣市、還沒搜尋時，這一格取代整份清單。
   刻意「不用虛線框」——虛線在網頁語彙裡代表「這裡是空的、還沒東西」，
   但這一塊不是空狀態，它是在指路。用實心淺底才讀得出「這是一段訊息」。 */
.sx-prompt {
  grid-column: 1 / -1; padding: 30px 28px; text-align: center;
  border-radius: 16px; background: var(--sx-bg-2);
}
.sx-prompt strong { display: block; font-size: 17px; color: var(--sx-ink); margin-bottom: 8px; }
.sx-prompt p { margin: 0 auto 18px; max-width: 34em; font-size: 14px;
  line-height: 1.75; color: var(--sx-ink-2); }
.sx-prompt__quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sx-prompt__quick .sx-chip em { font-style: normal; margin-left: 6px; color: var(--sx-ink-3); }

/* 「顯示其餘 N 家」。做成整排的次要按鈕而不是連結——
   它是這一區唯一往下展開的動作，要看得見，但不該比店家卡片搶眼。 */
.sx-more {
  grid-column: 1 / -1; appearance: none; font: inherit; font-size: 14px;
  padding: 13px 20px; border: 1px solid var(--sx-line); border-radius: 12px;
  background: #fff; color: var(--sx-ink-2); cursor: pointer;
  transition: all .2s var(--sx-ease);
}
.sx-more:hover { border-color: var(--sx-ink-3); color: var(--sx-ink); }

/* ---------- 兩欄說明區 ---------- */
.sx-split { display: grid; grid-template-columns: repeat(2,1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .sx-split { grid-template-columns: 1fr; gap: 28px; } }
.sx-figure--photo { background: none; padding: 0; overflow: hidden; }
.sx-figure--photo img { width: 100%; height: 100%; object-fit: cover; }
.sx-figure {
  aspect-ratio: 4/3; border-radius: 16px;
  background-image: repeating-linear-gradient(135deg,#ececec 0 12px,#f4f4f4 12px 24px);
  display: grid; place-items: center; color: #b8b8b8; font-size: 12px; letter-spacing: .1em;
}

/* ---------- FAQ ---------- */
.sx-faq { max-width: 820px; }
.sx-faq details {
  border-bottom: 1px solid var(--sx-line); padding: 6px 0;
}
.sx-faq summary {
  cursor: pointer; list-style: none; padding: 18px 0;
  font-size: 17px; font-weight: 650;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after {
  content: "+"; font-size: 22px; font-weight: 400;
  color: var(--sx-ink-3); transition: transform .3s var(--sx-ease);
}
.sx-faq details[open] summary::after { transform: rotate(45deg); }
.sx-faq p { margin: 0 0 20px; color: var(--sx-ink-2); font-size: 15px; }

/* ---------- 口碑 ---------- */

/* ---------- Footer ---------- */
.sx-footer {
  background: #111; color: #b9bdc6;
  padding: 68px 0 40px; font-size: 14px; margin-top: 0;
}
.sx-footer a { color: #d7d9de; text-decoration: none; }
.sx-footer a:hover { color: #fff; }
.sx-footer__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; }
@media (max-width: 820px) { .sx-footer__grid { grid-template-columns: repeat(2,1fr); } }
.sx-footer h4 {
  font-size: 12px; letter-spacing: .16em; color: #8e939c;
  font-weight: 700; margin: 0 0 16px;
}
.sx-footer ul { list-style: none; margin: 0; padding: 0; }
.sx-footer li { margin-bottom: 10px; }
/* 頁尾聯絡資訊。擺在連結格之下、版權列之上——連結是「去哪裡」，
   聯絡是「找到人」，兩件事不該混在同一排。 */
.sx-footer__contact {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid #262626;
}
.sx-fc__name { color: #d8dbe0; font-weight: 700; margin-bottom: 12px; }
.sx-fc__items { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.sx-fc__item {
  color: #9aa0a8; font-size: 14px; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.sx-fc__item:hover { color: #fff; }
.sx-fc__k {
  font-size: 11px; letter-spacing: .14em; color: #6e727a;
  border: 1px solid #333; border-radius: 4px; padding: 2px 6px; flex: none;
}
@media (max-width: 560px) { .sx-fc__items { flex-direction: column; gap: 12px; } }

.sx-footer__bar {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid #262626; color: #6e727a; font-size: 13px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* 資料還沒到齊時的整區替代（誠實版，不放假資料） */
.sx-soon {
  grid-column: 1 / -1; text-align: center;
  padding: 64px 28px; border: 1px solid var(--sx-line);
  border-radius: 18px; background: #fff;
}
.sx-soon strong { font-size: 20px; display: block; margin-bottom: 10px; }
.sx-soon p { color: var(--sx-ink-2); font-size: 15px; margin: 0 0 24px; }

/* 影像版權標示。原始橫幅把 ©TOYOTA GAZOO Racing 燒在圖片左下角，
   裁掉日文文案時一併被裁掉了 —— 第三方著作權不能無聲移除，補在這裡。 */
.sx-credit {
  margin: 28px 0 0; font-size: 12px; color: var(--sx-ink-3); text-align: right;
}

/* 使用者在系統開了「減少動態效果」時，把動畫停掉。
   有一群人（前庭系統敏感，就是容易暈車的那個內耳器官）看到畫面移動會頭暈想吐——
   iPhone／Mac／Windows 都有這個開關，開了等於在說「請不要讓東西動」。

   ⚠️ 刻意用 * 全域，而不是逐條列出本頁那幾個 transition：
   之後新增的動畫會自動被涵蓋，不必記得回來補。mega-menu.css 與 favorites.js
   各自也有同樣的區塊（元件自帶，不依賴頁面），重複宣告無害。

   本頁的動效都只是位移 4px、放大 5%、按鈕抬 2px，關掉不影響任何操作的可讀性；
   若日後加了「靠動畫才看得懂」的互動（例如高度展開的手風琴），要回來改成
   只關 transform 而保留該項，否則會變成瞬間跳出。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 經銷據點：統計卡即篩選器 ----------
   數字卡不只是顯示，點下去就是條件（參考方法論庫「內部審批型系統的七個設計模式」#1）。
   選中狀態要一眼可辨，否則使用者不知道現在的列表是被什麼過濾出來的。 */
.sx-stats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.sx-stat{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-width:118px;padding:12px 16px;border:1px solid var(--line,#e4e4e0);border-radius:12px;
  background:var(--card,#fff);cursor:pointer;font:inherit;text-align:left;
  transition:border-color .18s ease,transform .18s ease}
.sx-stat b{font-size:24px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.sx-stat span{font-size:12px;color:var(--muted,#777)}
.sx-stat span i{font-style:normal;font-size:10.5px;margin-left:4px;opacity:.7}
.sx-stat:hover{border-color:var(--ink,#17181b);transform:translateY(-1px)}
.sx-stat.on{border-color:var(--ink,#17181b);box-shadow:inset 0 0 0 1px var(--ink,#17181b)}
/* 手機：統計卡改成同一排橫向滑。
   ⚠️ 原本是 flex-wrap:wrap + min-width:118px，在 375px 的螢幕上剛好放得下兩個，
   第三個就落單掉到下一行、右邊空一塊，看起來像沒排好。
   數量是資料決定的（可能三個也可能更多），所以不能寫死幾欄——
   讓它不換行、放不下就滑，幾個都不會壞。 */
@media (max-width: 560px) {
  .sx-stats {
    flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -18px; padding-inline: 18px;
    padding-bottom: 2px;
  }
  .sx-stats::-webkit-scrollbar { display: none; }
  .sx-stats > .sx-stat {
    flex: 0 0 auto;
    min-width: 112px;
    scroll-snap-align: start;
  }
}

.sx-facet-note{font-size:11.5px;color:var(--muted,#888);margin:6px 0 0;line-height:1.5}

/* 據點搜尋列（取代原地圖佔位）。同步指示是信任燈：
   回答「我看到的是什麼時候的資料」，成本一行、省掉所有猜測。 */
.sx-count__note {
  display: block; margin-top: 4px; font-size: 13px; color: var(--sx-ink-3);
}
.sx-count__note a { color: var(--sx-ink-2); }
.sx-dealer-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px}
.sx-dealer-tools input{flex:1;min-width:220px;padding:12px 16px;font:inherit;font-size:14.5px;
  border:1px solid var(--line,#e0e0dc);border-radius:999px;background:var(--card,#fff);outline:none}
.sx-dealer-tools input:focus{border-color:var(--ink,#17181b)}
.sx-sync{font-size:11.5px;color:var(--muted,#8a8a86);margin:0;white-space:nowrap}
.sx-sync:empty{display:none}
mark{background:none;color:inherit;font-weight:700;text-decoration:underline;
  text-decoration-color:#b32219;text-decoration-thickness:2px;text-underline-offset:2px}


/* 放大地圖的燈箱 */
.sx-mapmodal {
  /* 網站頁首是 sticky z-index 900（手機版 1000）。燈箱如果比它低，
     標題列連同關閉鍵會被頁首整條蓋掉——手機上就變成「進得去出不來」。
     這個數字必須大於頁首，不是隨手填的。 */
  position: fixed; inset: 0; z-index: 2000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 10, 10, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sx-mapmodal__box {
  display: flex; flex-direction: column;
  width: min(920px, 100%); height: min(680px, 100%);
  background: var(--sx-bg); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.sx-mapmodal__bar {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--sx-line);
}
.sx-mapmodal__bar > div { flex: 1; min-width: 0; }
.sx-mapmodal__bar strong { display: block; font-size: 16px; font-weight: 500; }
.sx-mapmodal__bar span { display: block; margin-top: 3px; font-size: 13px; color: var(--sx-ink-2); }
.sx-mapmodal__x {
  flex: none; width: 34px; height: 34px; padding: 0; font: inherit; font-size: 22px;
  line-height: 1; color: var(--sx-ink-2); background: none;
  border: 1px solid var(--sx-line); border-radius: 8px; cursor: pointer;
}
.sx-mapmodal__x:hover { color: var(--sx-ink); border-color: var(--sx-ink-3); }
/* 底部操作列：看完地圖之後，人只會想做兩件事——出發、或退出去。
   所以這兩個都要是明確的按鈕，不能只靠右上角一個小叉叉；
   手機單手握持時，拇指本來就在畫面下半部。 */
.sx-mapmodal__foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--sx-line);
}
.sx-mapmodal__go {
  padding: 9px 18px; font-size: 14px; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--sx-ink); border-radius: 100px;
}
.sx-mapmodal__close {
  padding: 9px 18px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
  color: var(--sx-ink); background: var(--sx-bg);
  border: 1px solid var(--sx-line); border-radius: 100px;
}
.sx-mapmodal__close:hover { border-color: var(--sx-ink-3); }
.sx-mapmodal__tip { margin: 0; font-size: 12.5px; color: var(--sx-ink-3); }
@media (max-width: 700px) {
  .sx-mapmodal { padding: 0; }
  .sx-mapmodal__box {
    width: 100%; border-radius: 0;
    /* dvh 而不是 %：手機瀏覽器的網址列會伸縮，用百分比算出來的高度
       會讓底部操作列被網址列蓋住——按鈕看得到卻按不到。 */
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* 手機沒有 Esc、全螢幕也沒有背景可以點，關閉只剩按鈕，所以要夠大。 */
  .sx-mapmodal__x { width: 42px; height: 42px; font-size: 26px; }
  .sx-mapmodal__foot { gap: 8px; }
  .sx-mapmodal__go, .sx-mapmodal__close { flex: 1; text-align: center; padding: 12px 14px; }
  .sx-mapmodal__tip { flex: 1 0 100%; text-align: center; }
}

/* ── 區域地圖：選定縣市後取代分佈圖 ── */
.sx-areamap { margin: 0 0 22px; }
.sx-areamap__bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 13px; color: var(--sx-ink-2);
}
.sx-areamap__bar button {
  font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer;
  color: var(--sx-ink); background: var(--sx-bg);
  border: 1px solid var(--sx-line); border-radius: 100px;
}
.sx-areamap__bar button:hover { border-color: var(--sx-ink-3); }
/* 圖資來源標示。OSM 授權要求標示，但沒規定一定要壓在地圖上——
   放在這一列的最後、用最小的字，合法又不擋畫面。 */
.sx-areamap__credit { font-size: 11.5px; color: var(--sx-ink-3); }

.sx-areamap__canvas {
  height: 420px; border: 1px solid var(--sx-line); border-radius: 14px;
  overflow: hidden; background: var(--sx-bg-2); z-index: 0;
}
/* 圖磚去彩度，跟站上的黑白調性一致，也讓我們自己的圖釘不被地標色塊蓋過 */
.sx-areamap__canvas .leaflet-tile-pane { filter: grayscale(1) contrast(.88) brightness(1.06); }
.sx-areamap__canvas .leaflet-container { font-family: inherit; background: var(--sx-bg-2); }

/* 「點一下才能滾」的說明層。不寫出來的話，使用者滾了沒反應只會覺得壞掉。 */
.sx-areamap__veil {
  position: absolute; inset: 0; z-index: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(.5px); backdrop-filter: blur(.5px);
}
.sx-areamap__veil span {
  padding: 8px 16px; font-size: 13.5px; color: var(--sx-ink);
  background: rgba(255, 255, 255, .95); border: 1px solid var(--sx-line);
  border-radius: 100px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.sx-apin {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--sx-piaa); border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: .15s var(--sx-ease);
}
.sx-apin.is-on {
  width: 20px; height: 20px; margin: -3px 0 0 -3px;
  box-shadow: 0 0 0 4px rgba(31, 111, 219, .22), 0 1px 5px rgba(0, 0, 0, .4);
}

/* 從地圖跳到卡片時閃一下——不然使用者不知道畫面捲到哪、該看哪一張 */
@keyframes sx-flash { 0%,100% { box-shadow: 0 0 0 0 rgba(31,111,219,0); }
                      30%     { box-shadow: 0 0 0 3px rgba(31,111,219,.35); } }
.sx-dealer.is-flash { animation: sx-flash 1.2s var(--sx-ease); }

@media (max-width: 700px) { .sx-areamap__canvas { height: 320px; } }

/* ── 總代理圖釘與它的資訊卡 ── */
/* 跟據點圖釘刻意長得不一樣：它不是經銷據點，是我們自己。
   同樣是圓點只是換顏色的話，使用者會以為那也是一家經銷商。 */
/* 總代理的固定入口鍵：跟「回到全台分佈」放同一列，但推到最右邊，
   因為它是另一種動作（不是導覽，是直接跳到某個點）。 */
#areaMapHq {
  margin-left: auto; color: #fff !important;
  background: var(--sx-ink) !important; border-color: var(--sx-ink) !important;
}
#areaMapHq:hover { opacity: .86; }

/* 標籤襯在圖釘下方。沒有文字的話，它只是「一個跟別人不一樣的圖示」，
   說不出哪裡不一樣。 */
.sx-hqpin__cap {
  position: absolute; left: 50%; top: 26px; transform: translateX(-50%);
  padding: 2px 7px; font-size: 11px; font-weight: 500; white-space: nowrap;
  color: #fff; background: var(--sx-ink); border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.sx-hqpin {
  display: block; width: 22px; height: 22px; border-radius: 6px;
  background: var(--sx-ink); border: 2.5px solid #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .45);
  position: relative;
}
.sx-hqpin::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: #fff;
}

.sx-hq strong { display: block; font-size: 15px; font-weight: 600; }
.sx-hq__sub { display: block; margin-top: 2px; font-size: 12px; color: var(--sx-ink-3); letter-spacing: .04em; }
.sx-hq__addr { margin: 8px 0 2px; font-size: 13px; line-height: 1.6; }
.sx-hq__tel { margin: 0 0 10px; font-size: 13px; }
.sx-hq__tel a { color: var(--sx-ink); }
.sx-hq__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.sx-hq__shots a { display: block; text-decoration: none; color: var(--sx-ink-2); }
.sx-hq__shots img {
  display: block; width: 100%; height: 74px; object-fit: cover;
  border: 1px solid var(--sx-line); border-radius: 7px;
}
.sx-hq__shots span { display: block; margin-top: 3px; font-size: 11px; }
.sx-hq__h { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; color: var(--sx-ink-3); }
.sx-hq__park { margin: 0 0 8px; padding: 0; list-style: none; }
.sx-hq__park li { margin-bottom: 6px; font-size: 12.5px; line-height: 1.55; color: var(--sx-ink-2); }
.sx-hq__park b { display: block; font-weight: 500; color: var(--sx-ink); }
.sx-hq__park a { color: var(--sx-ink); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.sx-hq__park a:hover { color: var(--sx-piaa); }
.sx-hq__note { margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--sx-ink-3); }
.sx-hq__nav {
  display: inline-block; padding: 7px 14px; font-size: 13px; text-decoration: none;
  color: #fff; background: var(--sx-ink); border-radius: 100px;
}
/* 這張卡比地圖還高，尤其手機（地圖只有 320px）。不設上限的話會被切掉，
   而且切掉的正好是最下面的導航按鈕。 */
.sx-hq__pop .leaflet-popup-content {
  margin: 13px 14px; font-family: inherit;
  max-height: min(58vh, 360px); overflow-y: auto; overscroll-behavior: contain;
}
.sx-hq__pop .leaflet-popup-content-wrapper { border-radius: 12px; }

/* ── 分享結果 ── */
.sx-share {
  margin-left: 12px; padding: 4px 12px; font: inherit; font-size: 12.5px;
  cursor: pointer; color: var(--sx-ink); background: var(--sx-bg);
  border: 1px solid var(--sx-line); border-radius: 100px; vertical-align: 1px;
}
.sx-share:hover { border-color: var(--sx-ink-3); }
.sx-share::before { content: "↗"; margin-right: 5px; color: var(--sx-ink-3); }

/* 被傳連結進來的人才看得到。沒有這一句，他會以為全台就只有這幾家。 */
/* hidden 屬性是靠瀏覽器預設的 display:none 生效的。只要作者樣式寫了
   display:flex / grid / block，就會贏過它，hidden 直接失效——元素明明
   標了 hidden 卻還在畫面上佔一條。
   這個錯不會報，只會多出一條看不出用途的空白條，而且用 JS 檢查
   element.hidden 會回傳 true，看起來完全正常。
   一條全域規則擋掉，之後新增元素也不會再踩。 */
[hidden] { display: none !important; }

.sx-arrived {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; font-size: 13.5px;
  background: var(--sx-bg-2); border: 1px solid var(--sx-line); border-radius: 10px;
}
.sx-arrived b { font-weight: 600; }
.sx-arrived button {
  margin-left: auto; padding: 5px 13px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--sx-ink); background: var(--sx-bg);
  border: 1px solid var(--sx-line); border-radius: 100px; white-space: nowrap;
}
.sx-arrived button:hover { border-color: var(--sx-ink-3); }

/* 複製成功的回饋。沒有回饋的話，業務不知道到底複製到了沒有，
   會重複按好幾次——然後在 LINE 貼上一個舊的網址。 */
.sx-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  z-index: 3000; padding: 11px 20px; font-size: 14px; color: #fff;
  background: rgba(10, 10, 10, .92); border-radius: 100px;
  opacity: 0; pointer-events: none; transition: .22s var(--sx-ease);
}
.sx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 700px) {
  .sx-arrived button { margin-left: 0; }
}

/* 卡片上的「分享這家」。放在導航旁邊——看完店家資料之後，
   人的下一步不是出發就是把它轉給別人。 */
.sx-dealer__share {
  margin-left: 8px; padding: 9px 16px; font: inherit; font-size: 13.5px;
  cursor: pointer; color: var(--sx-ink); background: var(--sx-bg);
  border: 1px solid var(--sx-line); border-radius: 100px;
}
.sx-dealer__share:hover { border-color: var(--sx-ink-3); }
@media (max-width: 700px) {
  .sx-dealer__acts { display: flex; gap: 8px; flex-wrap: wrap; }
  .sx-dealer__share { margin-left: 0; }
}

/* ── 陳列照輪播 ── */
/* 用瀏覽器原生的 scroll-snap：慣性、觸控滑動、鍵盤都是免費的，
   自己刻 transform 只會做出更差的版本。 */
.sx-carousel { position: relative; }
.sx-carousel__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  border: 1px solid var(--sx-line); border-radius: 16px; background: var(--sx-bg-2);
}
.sx-carousel__track::-webkit-scrollbar { display: none; }
.sx-carousel__track figure {
  flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative;
}
/* 四張已經預先處理成同一個 1600×1200 畫布，所以這裡不需要 object-fit 去救
   ——比例本來就一致，圖不會忽大忽小。 */
.sx-carousel__track img { display: block; width: 100%; height: auto; }
.sx-carousel__track figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 12px; font-size: 12.5px; color: #fff;
  background: rgba(10, 10, 10, .72); border-radius: 100px;
}

.sx-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; padding: 0; font-size: 22px; line-height: 1;
  color: var(--sx-ink); background: rgba(255, 255, 255, .92);
  border: 1px solid var(--sx-line); border-radius: 50%; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .14); transition: .15s var(--sx-ease);
}
.sx-carousel__nav--prev { left: 10px; }
.sx-carousel__nav--next { right: 10px; }
.sx-carousel__nav:hover { background: #fff; }
/* 到頭了就淡掉並且不可按——按了沒反應比按鈕消失更讓人困惑 */
.sx-carousel__nav:disabled { opacity: .25; cursor: default; }

.sx-carousel__dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.sx-carousel__dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sx-line); cursor: pointer; transition: .15s var(--sx-ease);
}
.sx-carousel__dots button[aria-selected="true"] { background: var(--sx-ink); width: 20px; border-radius: 4px; }
.sx-carousel.is-single .sx-carousel__nav,
.sx-carousel.is-single .sx-carousel__dots { display: none; }
@media (max-width: 700px) { .sx-carousel__nav { width: 32px; height: 32px; font-size: 19px; } }

/* 搜尋命中總代理時的引導卡。刻意跟經銷據點卡片長得不一樣——
   它不是據點，長得像會讓人以為我們自己也是一家經銷商。 */
.sx-hqhit {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 16px 18px;
  color: #fff; background: var(--sx-ink); border-radius: 12px;
}
.sx-hqhit strong { display: block; font-size: 16px; font-weight: 600; }
.sx-hqhit span { display: block; margin-top: 3px; font-size: 12px; opacity: .62; letter-spacing: .04em; }
.sx-hqhit p { margin: 7px 0 0; font-size: 13.5px; opacity: .85; }
.sx-hqhit__acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.sx-hqhit__acts a, .sx-hqhit__acts button {
  padding: 8px 15px; font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  text-decoration: none; border-radius: 100px;
}
.sx-hqhit__acts a { color: var(--sx-ink); background: #fff; border: 0; }
.sx-hqhit__acts button { color: #fff; background: none; border: 1px solid rgba(255,255,255,.42); }
.sx-hqhit__acts button:hover { border-color: #fff; }
@media (max-width: 700px) { .sx-hqhit__acts { margin-left: 0; width: 100%; } }
/* ============================================================
   開場動畫 —— 白幕 → SHENXIN logo → 斜切對開
   ------------------------------------------------------------
   結構：兩塊白色面板，各自被 clip-path 斜切成上下半；
   離場時往左上／右下反方向滑走，像一把刀把白幕劃開。
   （水平切會像捲簾，斜切才有「打開」的感覺。）

   失敗條件：這是全屏遮罩，JS 沒跑到就會永遠停在白畫面。
   home.js 的保險機制一定要在，不要單獨移除。
   ============================================================ */

.sx-intro {
  --sx-intro-panel: .72s;
  --sx-intro-logo-out: .28s;
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  width: 100%; height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--sx-bg);
  pointer-events: auto;
  isolation: isolate;
  transform: translateZ(0);      /* 交給 GPU，避免大面積重繪掉幀 */
  backface-visibility: hidden;
}
/* 這一頁的開場已經播過（同分頁），直接不存在 */
.sx-intro-done .sx-intro { display: none !important; }

.sx-intro__panel {
  position: absolute; inset: -15%;   /* 外擴，滑走時邊角不會露出底下 */
  z-index: 1;
  background: var(--sx-bg);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform var(--sx-intro-panel) cubic-bezier(.76, 0, .24, 1);
}
/* ⚠️ 兩塊面板刻意「重疊」約 0.8%，不要改成剛好對齊。
   剛好對齊時抗鋸齒會留一條 1px 的縫，底下的深色 hero 會透出來，
   看起來像畫面被一條線劃破。 */
.sx-intro__panel--top    { clip-path: polygon(0 0,     100% 0,     100% 5.4%,  0 95.4%); }
.sx-intro__panel--bottom { clip-path: polygon(0 94.6%, 100% 4.6%,  100% 100%,  0 100%); }

.sx-intro__logo {
  position: absolute; top: 50%; left: 50%;
  z-index: 2;
  width: min(380px, 56vw);
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
  animation: sx-intro-logo-in .5s var(--sx-ease) both;
  transition: opacity var(--sx-intro-logo-out) ease,
              transform var(--sx-intro-logo-out) ease;
}
.sx-intro__logo img {
  display: block; width: 100%; height: auto;
  pointer-events: none; user-select: none;
}

@keyframes sx-intro-logo-in {
  from { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.94); }
  to   { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
}

/* logo 先走一步，面板才開 —— 同時發生會看起來很亂 */
.sx-intro.is-logo-leaving .sx-intro__logo {
  opacity: 0;
  transform: translate3d(-50%, -52%, 0) scale(1.04);
}

.sx-intro.is-leaving { background: transparent; pointer-events: none; }
/* ⚠️ 白幕一開始拉開，logo 就必須完全不存在。
   只靠 opacity 淡出是不夠的：淡到剩幾 % 的深色字疊在深色 hero 上，
   會變成一個「鏤空字」的殘影，看起來像沒清乾淨。 */
.sx-intro.is-leaving .sx-intro__logo { display: none; }
.sx-intro.is-leaving .sx-intro__panel--top    { transform: translate3d(-110%, -110%, 0); }
.sx-intro.is-leaving .sx-intro__panel--bottom { transform: translate3d( 110%,  110%, 0); }

.sx-intro.is-hidden { display: none; }

/* 開場期間鎖住捲動，避免使用者在白幕後面亂捲 */
.sx-intro-lock, .sx-intro-lock body { overflow: hidden; }

@media (max-width: 767px) {
  .sx-intro__logo { width: min(240px, 62vw); }
}

/* 使用者在系統設定關掉動態效果 → 幾乎瞬間結束，不做位移 */
@media (prefers-reduced-motion: reduce) {
  .sx-intro { --sx-intro-panel: .01ms; --sx-intro-logo-out: .01ms; }
  .sx-intro__logo { animation-duration: .01ms; }
}

/* ---------- 兩代人（沿革的開場） ----------
   ⚠️ 幾個刻意的決定，改之前先讀：
   ① 直幅 3:4 不是 4:3——他們兩位是「人」，橫幅會塞進一半的背景，
      看起來像工作抓拍；直幅才是人像。
   ② 圓角只有 5px。大圓角是介面語言（按鈕、卡片），
      放在人像上會把照片變成 UI 元件。
   ③ 照片只佔 420px，不是主角。這一段的主角是那兩句話。
   ④ 右邊那張下沉 46px 做錯位——切齊會讀成「同一批人的合照」。 */
.sx-gen {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 940px;
  margin: 0 0 52px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--sx-line);
}
.sx-gen__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sx-gen__shots figure {
  margin: 0; aspect-ratio: 3/4; overflow: hidden;
  border-radius: 5px; background: var(--sx-bg);
}
.sx-gen__shots figure:nth-child(2) { margin-top: 46px; }
.sx-gen__shots img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--sx-ease);
}
.sx-gen__shots figure:hover img { transform: scale(1.04); }
.sx-gen__text {
  margin: 0 0 16px; font-size: 15.5px; line-height: 1.9; color: var(--sx-ink-2);
}
.sx-gen__text:last-child { margin-bottom: 0; }
.sx-gen__text strong { color: var(--sx-ink); }

@media (max-width: 860px) {
  .sx-gen { grid-template-columns: 1fr; gap: 30px; margin-bottom: 36px; padding-bottom: 30px; }
  .sx-gen__shots { max-width: 420px; gap: 14px; }
  .sx-gen__shots figure:nth-child(2) { margin-top: 32px; }
}

/* ---------- 沿革（釘住式時間軸） ----------
   年份在左側 sticky 釘住不動，內容往上捲；左邊一條線隨捲動長出來。
   ⚠️ 幾個容易改壞的地方：
     ① .sx-hist 必須 position:relative，那條線與進度條都靠它定位。
     ② 年份的 sticky top 要大於導覽列高度，否則會被蓋住。
     ③ 每一段留大量上方間距（pt）是刻意的——sticky 需要捲動距離才看得出「釘住」，
        段落太密的話年份還沒釘住就被下一段推走了。 */
.sx-hist {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  max-width: 1080px;
}
/* 底線：整條淡灰，兩端用遮罩淡出，不要硬切 */
.sx-hist::before {
  content: "";
  position: absolute; left: 15px; top: 0; bottom: 0;
  width: 2px; background: var(--sx-line);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* 進度線：高度由 JS 隨捲動設定 */
.sx-hist__fill {
  position: absolute; left: 15px; top: 0;
  width: 2px; height: 0;
  background: linear-gradient(to bottom, var(--sx-piaa), var(--sx-ink) 70%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

.sx-hist__row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 40px;
  padding-top: 96px;
}
.sx-hist__row:first-child { padding-top: 24px; }

.sx-hist__side {
  position: sticky; top: 120px;
  align-self: start;
  display: flex; align-items: center; gap: 18px;
  z-index: 2;
}
/* 圓點蓋在線上，所以要有跟頁面同色的底，線才不會穿過去 */
.sx-hist__dot {
  flex: none;
  width: 32px; height: 32px; margin-left: 0;
  border-radius: 50%;
  background: var(--sx-bg-2);
  display: grid; place-items: center;
}
.sx-hist__dot::after {
  content: "";
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sx-bg);
  border: 1px solid var(--sx-ink-3);
}
.sx-hist__year {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 750; letter-spacing: -.02em; line-height: 1.2;
  color: var(--sx-ink-3);
  font-variant-numeric: tabular-nums;
}
.sx-hist__row:last-child .sx-hist__year { color: var(--sx-piaa); }

.sx-hist__body { padding-bottom: 8px; }
.sx-hist__era {
  font-size: clamp(18px, 2vw, 22px); font-weight: 700;
  margin: 0 0 14px; line-height: 1.45; letter-spacing: -.01em;
}
.sx-hist__body ul { margin: 0; padding: 0; list-style: none; }
.sx-hist__body li {
  position: relative; padding-left: 17px;
  font-size: 15px; color: var(--sx-ink-2); line-height: 1.85;
}
.sx-hist__body li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sx-ink-3);
}

/* 配圖：兩欄；只有一張時獨佔整排，兩張時各半 */
.sx-hist__shots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; margin-top: 26px;
}
.sx-hist__shots img {
  width: 100%; height: clamp(150px, 22vw, 260px);
  object-fit: cover; border-radius: 10px;
  background: var(--sx-bg);
  box-shadow: 0 1px 2px rgba(10,10,10,.06), 0 8px 30px rgba(10,10,10,.05);
  transition: transform .5s var(--sx-ease);
}
.sx-hist__shots img:hover { transform: translateY(-3px); }
/* 奇數張時讓第一張橫跨兩欄，避免最後一列落單留一個洞。
   原本只寫 data-n="3"，2026-09-15 補進照片後 2022/2023/2024 變成 7/5/5，
   三年同時破圖式地缺一格——CSS 沒有「奇數」選擇器，只能把奇數值列出來。 */
.sx-hist__shots[data-n="3"] img:first-child,
.sx-hist__shots[data-n="5"] img:first-child,
.sx-hist__shots[data-n="7"] img:first-child,
.sx-hist__shots[data-n="9"] img:first-child,
.sx-hist__shots[data-n="11"] img:first-child,
.sx-hist__shots[data-n="13"] img:first-child { grid-column: 1 / -1; height: clamp(180px, 26vw, 300px); }

@media (max-width: 860px) {
  .sx-hist__row { grid-template-columns: 1fr; gap: 14px; padding-top: 56px; }
  .sx-hist__side { position: static; gap: 12px; }
  .sx-hist__dot { width: 24px; height: 24px; background: transparent; }

  /* ⚠️ 手機不要縮排內容。
     桌機的縮排是為了讓出左邊那條時間線的空間；手機上年份已經自己一行、
     線也隱藏了，再縮排 50px 等於白白丟掉 15% 的螢幕寬度
     ——實測內容欄會從 339px 掉到 289px，照片被擠成 139px。 */
  .sx-hist__body { padding-left: 0; }
  .sx-hist::before, .sx-hist__fill { display: none; }

  /* 配圖改成橫向滑動：一次看一張夠大的，而不是四張看不清的。
     直向堆疊雖然也大，但四張會把這一段拉到三個螢幕高，捲不完。 */
  .sx-hist__shots {
    display: flex; gap: 10px; margin-top: 18px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 讓圖片可以滑出容器邊界、貼齊螢幕邊緣，看起來才不會被框住 */
    margin-inline: -18px; padding-inline: 18px;
  }
  .sx-hist__shots::-webkit-scrollbar { display: none; }
  .sx-hist__shots img {
    flex: 0 0 82%;            /* 露出下一張的邊，暗示可以滑 */
    height: 210px;
    scroll-snap-align: start;
  }
  /* 桌機那條「第一張橫跨兩欄」的規則在 flex 下沒有意義，關掉 */
  .sx-hist__shots[data-n="3"] img:first-child,
  .sx-hist__shots[data-n="5"] img:first-child,
  .sx-hist__shots[data-n="7"] img:first-child,
  .sx-hist__shots[data-n="9"] img:first-child,
  .sx-hist__shots[data-n="11"] img:first-child,
  .sx-hist__shots[data-n="13"] img:first-child { grid-column: auto; height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-hist__shots img { transition: none; }
}

/* ---------- 主要通路夥伴 ----------
   ⚠️ 這裡曾經是純文字清單，因為當初拿不到乾淨的商標檔。
   現在八家都有去背 PNG 了，改用商標。
   關鍵在「等大的方框 + contain」：八個商標的長寬比從 1:1 到 11:1 都有，
   統一高度會讓長條的橫向爆掉，統一寬度會讓方形的變成巨無霸。
   放進同樣大的框裡各自 contain，視覺重量才會接近。 */
.sx-partners {
  margin-top: 40px; padding-top: 32px;
  border-top: 1px solid var(--sx-line);
  max-width: 940px;
}
.sx-partners__lead {
  font-size: 15px; color: var(--sx-ink-2);
  margin: 0 0 26px; max-width: 620px;
}
.sx-partners__list {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
}
.sx-partners__list li { display: block; }
/* 商標本身就是篩選按鈕 */
.sx-partners__list .sx-partner {
  width: 100%; height: 76px;
  display: grid; place-items: center;
  padding: 10px 16px;
  background: var(--sx-bg);
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  overflow: hidden;          /* 最後一道保險：真的超出也不會壓到隔壁 */
  cursor: pointer;
  transition: border-color .2s var(--sx-ease), box-shadow .2s var(--sx-ease);
}
.sx-partners__list .sx-partner:hover { border-color: var(--sx-ink-3); }
/* 選中＝亮起：顯色、加深外框、給一點浮起的陰影 */
.sx-partners__list .sx-partner[aria-pressed="true"] {
  border-color: var(--sx-ink);
  box-shadow: 0 0 0 1px var(--sx-ink), 0 6px 20px rgba(10,10,10,.08);
}
.sx-partners__list .sx-partner[aria-pressed="true"] img {
  filter: grayscale(0); opacity: 1;
}
.sx-partners__list img {
  /* ⚠️ 用固定像素，不要用 max-height:100%。
     百分比高度需要一個「確定的」基準；圖片是格線項目的內容時算不出來，
     於是限制失效、圖片以原始尺寸畫出來，衝出方框互相重疊。
     這個壞法沒有錯誤訊息，只有畫面亂掉。 */
  max-width: 100%;
  max-height: 44px;
  width: auto; height: auto;
  /* 去彩度是刻意的：八個商標各有各的紅綠黃，一起上色會像跳蚤市場。
     滑到才顯色——安靜地列出來，需要辨識時才給顏色。 */
  filter: grayscale(1);
  opacity: .62;
  transition: filter .3s var(--sx-ease), opacity .3s var(--sx-ease);
}
.sx-partners__list .sx-partner:hover img { filter: grayscale(0); opacity: 1; }

.sx-partners__more {
  display: inline-block;
  font-size: 14px; font-weight: 650;
  color: var(--sx-piaa); text-decoration: none;
}
.sx-partners__more:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .sx-partners__list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .sx-partners__list .sx-partner { height: 66px; padding: 8px 12px; }
}
/* 觸控裝置沒有 hover，直接給彩色，不然永遠是灰的 */
@media (hover: none) {
  .sx-partners__list img { filter: grayscale(0); opacity: 1; }
}

/* ---------- 點開看大圖 ---------- */
/* 可以點的圖給游標提示，不然使用者不知道能點 */
.sx-hist__shots img,
.sx-gen__shots img,
#proof .sx-figure--photo img,
#contact .sx-figure--photo img { cursor: zoom-in; }

.sx-lb-lock, .sx-lb-lock body { overflow: hidden; }

.sx-lb {
  position: fixed; inset: 0; z-index: 99999;
  display: none; place-items: center;
  background: rgba(8, 10, 12, .93);
  padding: 40px 64px;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sx-lb.is-on { display: grid; }

.sx-lb__stage { margin: 0; display: grid; place-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.sx-lb__stage img {
  max-width: min(1400px, 100%);
  max-height: calc(100vh - 140px);
  width: auto; height: auto;
  border-radius: 6px;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
}
.sx-lb__stage figcaption {
  color: #c7ced6; font-size: 13.5px; text-align: center;
  max-width: 720px; line-height: 1.7;
}

.sx-lb__x, .sx-lb__nav {
  position: absolute; z-index: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; cursor: pointer;
  border-radius: 999px;
  display: grid; place-items: center;
  transition: background .2s var(--sx-ease);
}
.sx-lb__x:hover, .sx-lb__nav:hover { background: rgba(255,255,255,.2); }
.sx-lb__x { top: 20px; right: 22px; width: 42px; height: 42px; font-size: 26px; line-height: 1; }
.sx-lb__nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; line-height: 1; }
.sx-lb__nav--prev { left: 16px; }
.sx-lb__nav--next { right: 16px; }

@media (max-width: 720px) {
  .sx-lb { padding: 16px 12px 84px; }
  .sx-lb__stage img { max-height: calc(100vh - 210px); }
  /* 手機上左右鈕改放畫面底部並排。
     ⚠️ 原本貼在左右兩側，在 375px 寬的螢幕上會直接壓在照片上，
     而且剛好落在拇指最容易誤觸的位置。 */
  .sx-lb__nav {
    top: auto; bottom: 20px; transform: none;
    width: 46px; height: 46px; font-size: 26px;
  }
  .sx-lb__nav--prev { left: 50%; margin-left: -56px; }
  .sx-lb__nav--next { right: 50%; margin-right: -56px; }
  .sx-lb__x { top: 12px; right: 12px; }
}

/* ══ apple-design §1 press feedback ══
   回饋要發生在「按下」那一刻，不是放開之後。手機沒有 hover，
   原本在觸控下從按下到跳轉之間完全沒有視覺反應。
   用獨立的 scale 屬性（不是 transform），不會蓋掉元素原有的 transform。
   只加 :active，靜態外觀一律不動。
   已排除自帶 :active 縮放的：.sx-minimap__ctl */
button:active:not(.sx-minimap__ctl),
[role="button"]:active:not(.sx-minimap__ctl),
.btn:active:not(.sx-minimap__ctl),
.chip:active:not(.sx-minimap__ctl),
a[class*="btn"]:active:not(.sx-minimap__ctl),
a[class*="cta"]:active:not(.sx-minimap__ctl),
input[type="submit"]:active:not(.sx-minimap__ctl),
input[type="button"]:active:not(.sx-minimap__ctl) {
  scale: .97;
  transition: scale 100ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
button:active:not(.sx-minimap__ctl),
[role="button"]:active:not(.sx-minimap__ctl),
.btn:active:not(.sx-minimap__ctl),
.chip:active:not(.sx-minimap__ctl),
a[class*="btn"]:active:not(.sx-minimap__ctl),
a[class*="cta"]:active:not(.sx-minimap__ctl),
input[type="submit"]:active:not(.sx-minimap__ctl),
input[type="button"]:active:not(.sx-minimap__ctl) { scale: 1; }
}

/* ══ apple-design §12 backdrop-filter fallback ══
   不支援背景模糊的瀏覽器上，這些面板底色只有 0.55、0.38，邊界會整個消失。
   這段只在「不支援」時生效，支援的瀏覽器完全看不出差別。 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sx-mapmodal { background: rgba(10, 10, 10, 0.85); }
  .sx-areamap__veil { background: rgba(255, 255, 255, 0.68); }
}

/* ---------- 在別人的鏡頭裡（影片橫列） ----------
   原生橫向捲動＋scroll-snap，手機用手指滑；桌機沒有橫向滾輪的人靠兩顆箭頭。
   箭頭在頭尾會自己變淡（home.js 的 initRails）。 */
.sx-rail { position: relative; margin-top: 36px; }
.sx-rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 4px; overscroll-behavior-x: contain;
}
.sx-rail__track::-webkit-scrollbar { display: none; }
.sx-voice { scroll-snap-align: start; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.sx-voice__img { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 6px; background: #ddd; }
.sx-voice__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--sx-ease); }
.sx-voice__play {
  position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,10,10,.72);
}
.sx-voice__play::after {
  content: ""; position: absolute; left: 16px; top: 13px;
  border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@media (hover: hover) { .sx-voice:hover .sx-voice__img img { transform: scale(1.04); } }
.sx-voice__tag { margin-top: 14px; font-size: 11.5px; letter-spacing: .12em; color: var(--sx-ink-3); }
.sx-voice__ch { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--sx-ink); }
.sx-voice__title { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--sx-ink-2); }
.sx-rail__nav {
  position: absolute; top: calc((100% - 96px) / 2); width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--sx-line); background: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: opacity .2s;
}
.sx-rail__nav--prev { left: -22px; } .sx-rail__nav--next { right: -22px; }
.sx-rail__nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .sx-rail__track { grid-auto-columns: 78%; gap: 16px; }
  .sx-rail__nav { display: none; }
}

/* ---------- 標準的源頭（關於紳新底下的四張） ---------- */
.sx-origin { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--sx-line); }
.sx-origin__lead { margin: 0 0 22px; font-size: 15px; letter-spacing: .04em; color: var(--sx-ink-2); }
.sx-origin__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sx-origin__row figure { margin: 0; }
.sx-origin__row img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 5px; background: var(--sx-bg-2); }
.sx-origin__row figcaption { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--sx-ink); }
.sx-origin__row figcaption span { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--sx-ink-3); }
.sx-origin__row .is-here figcaption { color: var(--sx-piaa); }
@media (max-width: 900px) { .sx-origin__row { grid-template-columns: 1fr 1fr; gap: 14px 12px; } .sx-origin { margin-top: 44px; } }