/* ============================================
   區塊內頁
   數值來源：D:\figma-export\<section>-<child>\desktop
   ============================================ */

/* ============================================
   大大寬頻 / 網路方案怎麼選
   ============================================ */

/* ── 拼貼區 ──
   設計稿 Group 529：1364×463，內部元素全為絕對定位。
   舞台固定比例，子元素用百分比，縮放時整組一起等比移動。 */
.plan-collage {
  padding-block: clamp(var(--space-10), 6vw, 100px)
    clamp(var(--space-8), 4vw, 60px);
}

.plan-collage__stage {
  position: relative;
  width: 100%;
  max-width: calc(1364px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  aspect-ratio: 1364 / 463;
}

/* 紅色外框（設計稿 Rectangle 177 / 178：圓角 8、1px 紅框） */
.plan-collage__frame {
  position: absolute;
  border: 1px solid var(--color-brand);
  border-radius: 8px;
}
.plan-collage__frame--a {
  /* Rectangle 177：329×395 @ 313,0 */
  left: 22.95%;
  top: 0;
  width: 24.12%;
  height: 85.31%;
}
.plan-collage__frame--b {
  /* Rectangle 178：286×318 @ 868,69 */
  left: 63.64%;
  top: 14.9%;
  width: 20.97%;
  height: 68.68%;
}

.plan-collage__photo {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: auto;
  border-radius: 8px;
}

/* 8×8 漸層小圓點（設計稿 Ellipse 3/4/5：#e6433e → #802523） */
.plan-collage__dot {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    360deg,
    var(--color-brand) 0%,
    var(--color-brand-dark) 100%
  );
}

/* 左上角標題組（設計稿 Frame 979：196 寬、gap 29） */
.plan-collage__intro {
  position: absolute;
  left: 4.4%; /* 60 / 1364 */
  top: 5.4%; /* 25 / 463 */
  width: 14.37%; /* 196 / 1364 */
  min-width: 196px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
}
.plan-collage__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
}
.plan-collage__underline {
  width: 114px;
  height: auto;
  margin-top: -21px; /* 設計稿底線緊貼標題下方 */
}

/* 白色說明標籤（設計稿 Frame 976/977：內距 10、陰影 4/4/10） */
.plan-collage__note {
  position: absolute;
  margin: 0;
  padding: 10px;
  background: var(--color-bg);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  /* 標籤是絕對定位＋不換行，字級固定 20px 的話，舞台一縮就會衝出右邊
     （1100 視窗時右緣達 1164）。字級跟著舞台寬度縮，整組拼貼才會等比縮放。
     必須有下限 —— 只寫 min() 的話 360 視窗會縮到 5.3px（1.47vw），完全看不見。
     ≤1024 拼貼會改成正常流堆疊，那時再還原成固定字級。 */
  font-size: max(14px, min(var(--fs-lg), 1.47vw));
  line-height: 1.2;
  white-space: nowrap;
}
/* Frame 977：480×44 @ 884,178 —— 右緣 884+480 = 1364，剛好是舞台右緣。
   用 left: 64.81% 錨定的話，字寬一變就會頂出去（1280 視窗時多 2px 可捲動）；
   改成靠右錨定，寬度再怎麼變都不會超出舞台。 */
.plan-collage__note--high {
  right: var(--container-pad);
  top: 38.44%;
}
.plan-collage__note--low {
  /* Frame 976：440×44 @ 0,228 */
  left: var(--container-pad);
  top: 49.24%;
}

/* ── 注意事項：五個圓形項目 ──
   設計稿 Frame 180：1232×200、gap 48；
   每項為 200px 白圓（陰影 4/4/28）＋ 左上角外掛 80px 紅圓。 */
.plan-checklist {
  padding-block: clamp(var(--space-8), 4vw, 60px)
    clamp(var(--space-12), 7vw, 110px);
}
.plan-checklist__title {
  margin: 0 0 clamp(var(--space-6), 3vw, 36px);
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-brand);
  text-align: center;
}
.plan-checklist__list {
  width: 100%;
  max-width: calc(1232px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px;
  list-style: none;
}

/* 三層結構：::before 紅色模糊圓 → ::after 毛玻璃圓面 → __label 文字。
   自成堆疊環境，層序才可控（原本用 z-index:-1 讓紅圓沉到背景後面，
   一旦圓面要做毛玻璃就會反過來蓋住文字）。 */
.plan-circle {
  position: relative;
  isolation: isolate;
  flex: 0 0 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  /* 設計稿內距 44 → 內容區僅 112，但最長的「現場可裝網速」需 120，
     在 Figma 裡是溢出的。收到 24 讓六字項目維持單行。 */
  padding: 0 var(--space-6);
  font-size: var(--fs-lg); /* 20px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-brand);
  text-align: center;
}
/* 左上角的紅圓：設計稿 80×80、圓心比白圓左移 8px，而且是模糊的。
   量設計稿水平中線，紅色由 5% 升到 95% 橫跨約 28px → 高斯 σ≈8.5，取 blur(8px)。
   （模糊在 Figma 是 layer blur，匯出外掛的 effects 不會帶出來。） */
.plan-circle::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  width: 80px;
  height: 80px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  filter: blur(8px);
  z-index: 0;
}
/* 毛玻璃圓面：設計稿 Frame 179 的 fill 是 opacity 0.8 的白，不是實心白 ——
   實測圓內像素 (250,217,216) 正好等於 80% 白疊在 #e6433e 上。 */
.plan-circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 4px 4px 28px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.plan-circle__label {
  position: relative;
  z-index: 2;
}

/* ── RWD ──
   拼貼在窄畫面沒有意義（元素會互相重疊），改成正常流的堆疊。 */
@media (max-width: 1024px) {
  /* 拼貼改成兩欄網格：文字整列橫跨、照片兩兩並排。
     原本是單純的 flex column，順序就照 DOM 走 —— DOM 是「先四張照片才輪到
     標題」，所以手機一打開整片都是圖、標題被推到最下面。這裡用 order 重排成
     標題 → 說明 → 照片 → 說明 → 照片。 */
  .plan-collage__stage {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    max-width: calc(480px + var(--container-pad) * 2);
  }
  .plan-collage__frame,
  .plan-collage__dot {
    display: none;
  }

  .plan-collage__intro,
  .plan-collage__photo,
  .plan-collage__note {
    position: static;
    width: 100%;
    max-width: none;
  }
  /* 文字整列橫跨，照片留在兩欄裡 */
  .plan-collage__intro,
  .plan-collage__note {
    grid-column: 1 / -1;
  }
  .plan-collage__intro {
    min-width: 0;
    gap: var(--space-4);
  }
  /* 同一列的兩張照片高度對齊，避免下緣參差 */
  .plan-collage__photo {
    height: 100%;
    object-fit: cover;
  }

  .plan-collage__intro {
    order: 1;
  }
  .plan-collage__note--high {
    order: 2;
  }
  .plan-collage__photo:nth-of-type(1) {
    order: 3;
  }
  .plan-collage__photo:nth-of-type(2) {
    order: 4;
  }
  .plan-collage__note--low {
    order: 5;
  }
  .plan-collage__photo:nth-of-type(3) {
    order: 6;
  }
  .plan-collage__photo:nth-of-type(4) {
    order: 7;
  }

  /* 堆疊之後不再需要跟著舞台縮放，還原成正常字級 */
  .plan-collage__note {
    white-space: normal;
    text-align: center;
    font-size: var(--fs-base);
  }
  .plan-collage__underline {
    margin-top: -14px;
  }
}

@media (max-width: 640px) {
  .plan-checklist__list {
    gap: var(--space-6);
  }
  .plan-circle {
    flex-basis: 150px;
    width: 150px;
    height: 150px;
    padding: 0 var(--space-5);
    font-size: var(--fs-base);
  }
  .plan-circle::before {
    width: 60px;
    height: 60px;
    filter: blur(6px);
  }
}

/* ============================================
   常見問題（六個區塊共用）
   數值來源：D:\figma-export\dada-broadband-faq\desktop
   ============================================ */

.faq-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 288px; /* 設計稿問號底圖高度 */
  padding-block: var(--space-10);
  overflow: hidden;
}
.faq-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.faq-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(500px + var(--container-pad) * 2);
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* 設計稿 Frame 76 */
  text-align: center;
}
.faq-hero__title {
  margin: 0;
  font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.625rem); /* → 26px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
/* 設計稿此行為 #e6433e → #802523 的漸層文字 */
.faq-hero__lead {
  margin: 0;
  font-size: var(--fs-sm); /* 14px */
  line-height: 1.2;
  background: linear-gradient(
    360deg,
    var(--color-brand) 0%,
    var(--color-brand-dark) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.faq-search {
  display: block;
  width: 100%;
}
.faq-search__input {
  width: 100%;
  min-height: 48px;
  padding: 14px 30px;
  background: var(--color-bg);
  border: 1px solid #b8b8b8;
  border-radius: 30px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.faq-search__input::placeholder {
  color: var(--color-text-muted);
}

/* ── 手風琴 ── */
.faq {
  position: relative;
  /* 設計稿 Vector：opacity 0.2、紅色 α1 → α0 的漸層底 */
  background: linear-gradient(
    180deg,
    rgba(230, 67, 62, 0.2) 0%,
    rgba(230, 67, 62, 0) 100%
  );
  padding-block: clamp(var(--space-10), 5vw, 75px)
    clamp(var(--space-12), 8vw, 130px);
}
.faq__list {
  width: 100%;
  max-width: calc(1318px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 20px; /* 設計稿題目間距（92 − 72） */
}

.faq__item {
  background: var(--color-bg);
  border: 1px solid #eee;
  box-shadow: 4px 4px 10px #e4dbc8; /* 設計稿 Group 的 DROP_SHADOW */
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px; /* 設計稿收合高度 */
  padding: var(--space-5) 40px;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q-text {
  font-size: var(--fs-base); /* 16px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.faq__item[open] .faq__q-text {
  color: var(--color-brand);
}

/* ＋／− 記號：展開時為紅色漸層，收合時為灰色 */
.faq__sign {
  position: relative;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  translate: 0 -50%;
  background: var(--color-text-muted);
}
.faq__sign::after {
  rotate: 90deg;
  transition:
    rotate var(--ease-base),
    opacity var(--ease-base);
}
.faq__item[open] .faq__sign::before,
.faq__item[open] .faq__sign::after {
  background: linear-gradient(
    360deg,
    var(--color-brand) 0%,
    var(--color-brand-dark) 100%
  );
}
.faq__item[open] .faq__sign::after {
  rotate: 0deg;
  opacity: 0;
}

.faq__a {
  padding: var(--space-5) 40px var(--space-6);
  border-top: 1px solid #eee; /* 設計稿展開後的分隔線 */
}
.faq__a-text {
  max-width: 755px; /* 設計稿答案區寬度 */
  margin: 0;
  font-size: var(--fs-sm); /* 14px */
  /* 設計稿這段是 14px／16px（比例 1.143，且該節點落在 Georgia 備援字型）。
     本站 60 組答案遠長於設計稿範例，1.14 的中文長文幾乎無法閱讀，
     因此長篇正文統一用 1.8（與文章內文一致），其餘區塊一律照設計稿 1.2。 */
  line-height: var(--lh-loose);
  color: var(--color-text);
}
.faq__empty {
  margin: var(--space-8) auto 0;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .faq__q {
    padding-inline: var(--space-5);
  }
  .faq__a {
    padding-inline: var(--space-5);
  }
}

/* ============================================
   大大寬頻 / 區域服務
   ============================================ */

.cov-intro {
  padding-block: clamp(var(--space-12), 7vw, 110px)
    clamp(var(--space-6), 3vw, 40px);
  text-align: center;
}
.cov-intro__title {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.cov-intro__accent {
  color: var(--color-accent);
} /* 設計稿「住哪裡」為橘色 */
.cov-intro__lede {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-lg); /* 20px */
  line-height: 1.2;
}

/* 四個系統台：大數字在上、白底外框標籤在下並與數字重疊 */
.cov-systems {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px; /* 設計稿 Frame 1044 */
  margin: clamp(var(--space-8), 4vw, 41px) auto 0;
  padding: 0;
  list-style: none;
}
.cov-system {
  position: relative;
  width: 200px;
  padding-top: 62px; /* 數字露出的高度（設計稿 Frame 1043 的 top） */
}
.cov-system__no {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  font-size: 80px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  /* 設計稿：#e6433e 由不透明漸層到 30% */
  background: linear-gradient(
    180deg,
    rgba(230, 67, 62, 1) 0%,
    rgba(230, 67, 62, 0.3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cov-system__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 93px;
  padding: 28px 26px;
  /* 設計稿 Frame 1043 的 fill 同樣是 opacity 0.8 的白，
     後方的大數字才會從盒子上緣透出來（實心白會整個擋掉）。 */
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-text);
  border-radius: 4px;
  font-size: var(--fs-lg); /* 20px */
  color: var(--color-brand);
}
/* 業者名連結只有 18px 高；用內距撐開點擊區，外距抵銷所以盒子外觀不變。 */
.cov-system__box a {
  display: block;
  padding: 11px 16px;
  margin: -11px -16px;
  color: inherit;
  text-decoration: none;
}
.cov-system__box a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── 申辦流程 ── */
.cov-flow {
  position: relative;
  isolation: isolate;
  padding-block: clamp(var(--space-10), 5vw, 78px)
    clamp(var(--space-12), 8vw, 130px);
  overflow: hidden;
}
.cov-flow__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cov-flow__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(930px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: 451fr 421fr;
  align-items: center;
  gap: clamp(var(--space-6), 4vw, 58px);
}
.cov-flow__body {
  display: flex;
  flex-direction: column;
  gap: 32px; /* 設計稿 Frame 1055 */
}
.cov-flow__title {
  margin: 0;
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-brand);
  text-align: center;
}
.cov-flow__side {
  width: 100%;
  height: auto;
  /* 設計稿 Rectangle 180 cornerRadius = 0 */
}

.cov-step {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 設計稿 Frame 885 */
}
.cov-step__title {
  margin: 0;
  padding: 8px var(--space-6);
  border-radius: 4px;
  font-size: var(--fs-lg); /* 20px */
  line-height: 1.2;
  text-align: center;
}
.cov-step__title--outline {
  /* 設計稿 Frame 875：白底紅框 */
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.cov-step__title--solid {
  /* 設計稿 Frame 8752：紅底白字 */
  background: var(--color-brand);
  color: #fff;
}

.cov-step__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 31px; /* 設計稿 Frame 1053 / 884 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.cov-step__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 97px;
  padding: 24px 20px;
  border-radius: 4px;
  font-size: var(--fs-lg); /* 20px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
}
.cov-step__list--outline .cov-step__item {
  background: var(--color-border);
}
.cov-step__list--solid .cov-step__item {
  background: #ffe6e6;
  border: 1px solid var(--color-brand);
}

@media (max-width: 1024px) {
  .cov-flow__inner {
    grid-template-columns: 1fr;
  }
  .cov-flow__side {
    max-width: 421px;
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .cov-systems {
    gap: var(--space-6);
  }
  .cov-system {
    width: 150px;
    padding-top: 48px;
  }
  .cov-system__no {
    font-size: 60px;
  }
  .cov-system__box {
    min-height: 72px;
    padding: var(--space-4);
    font-size: var(--fs-base);
  }
  /* 維持設計稿的 2 欄（2×2）：原本在這裡收成一欄，四個項目直排會把
     「我可以幫你確認」整段拉得非常長。改成縮 gap 與內距，讓兩欄塞得下。 */
  .cov-step__list {
    gap: var(--space-3);
  }
  .cov-step__item {
    min-height: 72px;
    padding: var(--space-4) var(--space-3);
    font-size: var(--fs-base);
  }
}

/* ============================================
   第四台 / 第四台怎麼比較
   ============================================ */
.ct-cmp {
  padding-block: clamp(var(--space-10), 5vw, 98px)
    clamp(var(--space-8), 4vw, 60px);
}
.ct-cmp__inner {
  width: 100%;
  max-width: calc(784px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* 設計稿 Frame 1086 */
  text-align: center;
}
.ct-cmp__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.ct-cmp__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* VS 圓與卡片垂直置中（設計稿 VS 圓心對齊卡片中線） */
  justify-content: center;
  gap: 24px; /* 設計稿 Frame 1072 */
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
/* 卡片全部用 CSS 畫，不用 SVG 素材。
   數值取自原 SVG：白卡 204×164 直角；陰影 dx4 dy4、stdDeviation 12.65
   （SVG 的 σ 換算 CSS box-shadow 模糊半徑要 ×2 → 25px）。 */
.ct-cmp__col {
  position: relative;
  flex: 0 0 auto;
  width: 204px;
  height: 164px;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  box-shadow: 4px 4px 25px rgba(0, 0, 0, 0.25);
}
/* 上緣的漸層倒三角：原 SVG path 為 57×27、水平置中，
   漸層由 #e6433e 垂直漸變到同色 30% 透明度。用 clip-path 切出倒三角。 */
.ct-cmp__col::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: 57px;
  height: 27px;
  background: linear-gradient(
    180deg,
    var(--color-brand) 0%,
    rgba(230, 67, 62, 0.3) 100%
  );
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ct-cmp__col-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px; /* 設計稿 Frame 941 */
  width: 100%;
  padding-inline: var(--space-3);
  text-align: center;
}
.ct-cmp__col-title {
  margin: 0;
  font-size: var(--fs-lg); /* 20px */
  font-weight: var(--fw-normal);
  line-height: 1.2;
  color: var(--color-brand);
}
.ct-cmp__note {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}

.ct-cmp__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px; /* 設計稿 Frame 1069：兩個要點同一列 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-cmp__point {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-base);
}
.ct-cmp__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand);
  border-radius: 6px;
  /* 設計稿寫 9px，但 9px 的中文／數字在任何螢幕上都讀不出來，統一提到 12。 */
  min-width: 20px;
  padding: 2px 5px;
  font-size: var(--fs-xs);
  color: #fff;
}

/* VS 圓（設計稿 Frame 1067：38×38 正圓、1px 紅框）。
   原本靠內距撐開會變成 61×42，一整列 204×3 ＋ 61×2 ＋ 24×4 = 830 > 內容區 784，
   第三張卡就被擠到下一行。固定 38 之後剛好 784。 */
.ct-cmp__vs {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-full);
  font-size: var(--fs-lg);
  line-height: 1.2;
  color: var(--color-brand);
}

/* ── 搭配區（紅色淡底） ── */
/* 註：meta.json 的 rotation 只是紀錄，Figma 匯出素材時已把旋轉烘進圖檔本身
   （SVG 的 path、WebP 的像素都已是傾斜後的樣子），CSS 再轉一次會變成二次旋轉。 */
/* 設計稿 .ct-mix 面板右上的兩個傾斜裝飾（Netflix / YouTube 標誌）。
   YouTube 會超出面板右緣 28，加上自身 132 寬，需要視窗
   ≥ 1054 + 28 + 132 + 兩側留白 ≈ 1374 才放得下，否則會頂出視窗；
   因此 ≤1400 直接隱藏（原本寫 ≤1024，1200 時實測整頁被撐到 1279）。 */
.ct-mix__deco {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1400px) {
  .ct-mix__deco {
    display: none;
  }
}
/* 全部改以「面板」為基準換算（面板設計稿 1054 寬 @433、上緣 138）：
   面板是固定最大寬 1054，裝飾若用視窗百分比，1920 以下就會相對往面板內側跑。
   垂直位移用 translate（百分比算自身高度），同樣鎖在寬度上、不受面板高度影響。 */
.ct-mix__deco--netflix {
  left: 92.13%; /* (1404 − 433) / 1054 */
  top: 0;
  translate: 0 -91.7%; /* (61 − 138) / 84 */
  width: 15.75%; /* 166 / 1054 */
}
.ct-mix__deco--ott {
  left: 102.75%; /* (1516 − 433) / 1054 */
  top: 0;
  translate: 0 29.6%; /* (154 − 138) / 54 */
  width: 12.52%; /* 132 / 1054 */
}

.ct-mix {
  position: relative;
  isolation: isolate;
  /* 設計稿 Rectangle 15：節點 opacity 0.1 的紅色漸層（α1 → α0） */
  background: linear-gradient(
    180deg,
    rgba(230, 67, 62, 0.1) 0%,
    rgba(230, 67, 62, 0) 100%
  );
  padding-block: clamp(var(--space-10), 5vw, 70px)
    clamp(var(--space-12), 7vw, 120px);
}
.ct-mix__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1054px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.ct-mix__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
/* 設計稿 Frame 1074：橘底圓角 18 的數字 */
.ct-mix__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 9px;
  background: var(--color-accent);
  border-radius: 18px;
  color: #fff;
}

.ct-mix__panel {
  position: relative; /* 右上兩個裝飾的定位基準 */
  width: 100%;
  padding: var(--space-8) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ct-mix__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px; /* 設計稿 Frame 1077 */
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 每組為「說明膠囊 + 對象膠囊」左右相疊（設計稿 Group 557，陰影 4/4/10） */
.ct-pair {
  position: relative;
  display: flex;
  align-items: center;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
  border-radius: 60px;
}
/* 設計稿 Frame 1069：三組都是紅底白字（沒有外框變體）。
   z-index 讓紅膠囊疊在白膠囊之上 —— DOM 順序是紅在前、白在後，
   不指定的話白膠囊會蓋住紅膠囊的右半截。 */
.ct-pair__what {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-6);
  background: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: 60px;
  font-size: var(--fs-lg);
  color: #fff;
  white-space: nowrap;
}
/* 設計稿兩顆重疊 41px；白膠囊的左內距要先讓開這 41，再留約 20 才是文字，
   否則文字會被壓在紅膠囊底下（原本 −24 疊、左內距只有 20，文字被吃掉）。 */
.ct-pair__who {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 24px 0 61px;
  margin-left: -41px;
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  border-radius: 60px;
  font-size: var(--fs-lg);
  white-space: nowrap;
}
.ct-mix__foot {
  margin: 0;
  font-size: var(--fs-lg);
}

/* ============================================
   第四台 / 方案與申辦
   ============================================ */
/* 膠囊後方的黃色光暈是位移＋模糊的偽元素，堆疊版型下會往右糊出容器
   （390 視窗整頁多 16px 可捲動）。用 clip 裁掉溢出的光暈 ——
   它是柔邊裝飾，切在視窗邊緣看不出來；clip 也不會建立捲動容器。 */
.ct-signup {
  padding-top: clamp(var(--space-10), 6vw, 100px);
  overflow-x: clip;
}
.ct-signup__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.ct-signup__title {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-brand);
}
.ct-signup__sub {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

/* 舞台＝設計稿 1920 畫布中 y 290～910 這一段，所有元素都用 1920 換算的百分比定位。
   （原本舞台寫死 1500 寬，等於拿錯基準，藥丸與箭頭的位置全部偏掉。） */
.ct-signup__stage {
  position: relative;
  z-index: 1; /* 地圖往上疊時，燈泡要蓋在地圖上面 */
  width: 100%;
  max-width: 1920px;
  margin: clamp(var(--space-6), 3vw, 40px) auto 0;
  aspect-ratio: 1920 / 620;
}
.ct-signup__person {
  position: absolute;
  left: 38.7%; /* 743 / 1920 */
  top: 0;
  width: 22.6%; /* 434 / 1920 */
  height: auto;
}
/* 箭頭在設計稿是各自獨立的位置，不跟藥丸綁在一起 */
.ct-signup__arrow {
  position: absolute;
  height: auto;
}
.ct-signup__arrow--a {
  left: 35.78%; /* 687 / 1920 */
  top: 40.32%; /* (540 − 290) / 620 */
  width: 5.1%; /*  98 / 1920 */
}
.ct-signup__arrow--b {
  left: 61.3%; /* 1177 / 1920 */
  top: 29.35%; /* (472 − 290) / 620 */
  width: 4.06%; /*  78 / 1920 */
}

/* 設計稿 Frame 179／1081：兩顆膠囊都是固定 424×76、文字置中，
   不隨文字長度縮放（原本靠內容撐寬會變成 264 與 364 一大一小）。 */
.ct-signup__pill {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 424px;
  max-width: 100%;
  min-height: 76px;
  margin: 0;
  padding: var(--space-3) var(--space-8);
  /* 設計稿 Frame 179／1081 的 fill 是 opacity 0.8 的白（不是實心白），
     底下的黃色光暈因此會透出來 —— 實測藥丸內 (255,254,237)
     正好等於 80% 白疊在 #fffca8 上。 */
  background: rgba(255, 255, 255, 0.8);
  border-radius: 100px;
  box-shadow: 4px 4px 28px rgba(0, 0, 0, 0.25);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-brand);
  text-align: center;
}
.ct-signup__pill--a {
  left: 23.59%; /* 453 / 1920 */
  top: 24.03%; /* (439 − 290) / 620 */
}
.ct-signup__pill--b {
  left: 52.86%; /* 1015 / 1920 */
  top: 43.71%; /* (561 − 290) / 620 */
}
/* 黃色光暈：設計稿 Frame 1082／1083 是 424×76、圓角 60 的 #fffca8，
   而且是模糊的 —— 量設計稿邊緣，5%→95% 橫跨約 32px，換算高斯 σ≈9.7，取 blur(10px)。
   （模糊是 Figma 的 layer blur，匯出外掛的 effects 不會帶出來，只看 meta.json 找不到。）
   兩顆的位移方向相反：上面那顆往左下（−50,+25），下面那顆往右下（+53,+30）。 */
.ct-signup__pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  translate: var(--pill-shadow-x, 25px) var(--pill-shadow-y, 25px);
  background: var(--color-accent-soft);
  border-radius: inherit;
  filter: blur(10px);
  z-index: -1;
}
.ct-signup__pill--a {
  --pill-shadow-x: -50px;
  --pill-shadow-y: 25px;
}
.ct-signup__pill--b {
  --pill-shadow-x: 53px;
  --pill-shadow-y: 30px;
}

/* 地圖：素材 3840×1240（1x 為 1920×620），直接當區塊背景，文字疊在上面。
   設計稿裡地圖起點 y=773，比燈泡底部（y=886）還早 —— 也就是地圖往上疊進舞台，
   不是接在舞台下面。舞台在設計稿是 y290 起、620 高（底部 910），
   所以地圖要往上拉 910 − 773 = 137px。
   再加上素材本身上緣有約 100px（1x）的純白留白會撐出視覺空隙，實際再多拉 120px → 257。
   用 max() 讓它在 1920 以下隨寬度等比縮，超過 1920 就固定（舞台此時也停止長大）。 */
.ct-signup__map {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 620;
  margin-top: max(-257px, -13.385vw);
  background: url("../../images/hub/ct-signup-map.webp?v=1789372263") center /
    cover no-repeat;
}
/* 設計稿文字塊在地圖上 (1082 − 773) / 620 ≈ 49.8% 的位置，不是正中央。 */
.ct-signup__closing {
  position: absolute;
  left: 50%;
  top: 49.8%;
  translate: -50% 0;
  width: 100%;
  max-width: calc(620px + var(--container-pad) * 2);
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.ct-signup__closing-title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-brand);
}
.ct-signup__closing-body {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

/* ── RWD ── */
@media (max-width: 1024px) {
  .ct-cmp__list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }
  .ct-cmp__vs {
    order: 0;
  }

  .ct-signup__stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    /* 桌機是絕對定位的滿版舞台，沒有內距；改成正常流之後膠囊會直接貼到
       螢幕左右兩側，要補回版心的左右間距。 */
    padding-inline: var(--container-pad);
  }
  .ct-signup__person {
    position: static;
    width: min(320px, 70%);
  }
  /* 桌機是絕對定位、膠囊固定 424；改成正常流之後膠囊要跟著視窗縮，
     否則 424 的固定寬會把整頁撐寬（實測 375 視窗被撐到 408）。 */
  .ct-signup__pill {
    position: static;
    width: 100%;
  }
  .ct-signup__arrow {
    display: none;
  } /* 箭頭指的是桌機的相對位置 */
  /* 窄畫面把影子位移收小，才不會頂出容器 */
  .ct-signup__pill--a {
    --pill-shadow-x: -16px;
    --pill-shadow-y: 14px;
  }
  .ct-signup__pill--b {
    --pill-shadow-x: 16px;
    --pill-shadow-y: 14px;
  }
}
@media (max-width: 640px) {
  /* 手機整體收一階：燈泡與膠囊都比照設計稿的比例縮小，不要佔滿整個畫面。 */
  .ct-signup__stage {
    gap: var(--space-6);
  }
  .ct-signup__person {
    width: min(200px, 52%);
  }
  .ct-signup__pill {
    min-height: 56px;
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-base);
  }
  /* 黃色光暈在手機會糊成一片、也會頂到左右邊，直接關掉 */
  .ct-signup__pill::before {
    display: none;
  }
}

@media (max-width: 768px) {
  /* 3.1:1 的地圖在窄畫面只剩 120～250 高，絕對定位的文字會掉出去，
     改成自動高度、文字回到正常流。 */
  .ct-signup__map {
    aspect-ratio: auto;
    margin-top: 0; /* 堆疊後不再與舞台重疊 */
    padding-block: clamp(var(--space-10), 12vw, 80px);
    background-position: center bottom;
  }
  .ct-signup__closing {
    position: static;
    translate: none;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  /* 三組改成直排、每組固定同寬：原本是 flex-wrap 置中，紅白兩顆膠囊各自
     依文字長度決定寬度，三組長短不一又左右參差，看起來像散掉的。 */
  .ct-mix__list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-5);
  }
  .ct-pair {
    flex-direction: column;
    align-items: stretch; /* 紅白兩顆一樣寬，上下對齊 */
    width: 100%;
    max-width: 280px;
    border-radius: 12px;
  }
  /* 桌機是左右相疊的兩顆藥丸（圓角 60）；直向堆疊之後藥丸的圓角太圓，
     上下兩塊看起來像兩顆分開的膠囊。改成圓角方卡，紅色那塊就讀得出是
     白卡的標頭，整組才像一張卡片。
     邊框也從白色那塊移到外層 .ct-pair —— 描一圈整張卡，而不是描兩塊。 */
  .ct-pair {
    border: 1px solid var(--color-brand);
    overflow: hidden; /* 內層的圓角被外框裁掉，轉角才不會露出白邊 */
  }
  .ct-pair__what,
  .ct-pair__who {
    border-radius: 10px;
  }
  /* 用 transparent 而不是 border: 0 —— 保留 1px 的盒子尺寸，
     白色那塊的高度與上方紅塊的重疊量都不會跟著跑掉。 */
  .ct-pair__who {
    border-color: transparent;
  }
  .ct-pair__what {
    justify-content: center;
  }
  /* 直向堆疊後沒有左右重疊，左內距收回來；改成上方壓住 12px，
     白膠囊補 12 的上內距與高度，露出來的部分才維持 44。 */
  .ct-pair__who {
    justify-content: center;
    margin-left: 0;
    margin-top: -12px;
    min-height: 56px;
    padding: 12px 24px 0;
  }
}

/* ============================================
   XX 網路比較（四個區塊共用）
   ============================================ */
/* 設計稿的底圖是整張版面的背景（1920×936），橫跨比較區與結語區，
   所以鋪在包住兩段的 .cmp-page 上，而不是塞一張 <img> 在 .cmp 裡。
   素材的 alpha 通道整張都是 51／255 —— 設計稿節點的 20% 不透明度已經烘進圖檔，
   CSS 再套一次 opacity 會變成 4%，整張底圖幾乎看不見。 */
.cmp-page {
  position: relative;
  isolation: isolate;
}
.cmp-page--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cmp-bg) center / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}
.cmp {
  position: relative;
  padding-block: clamp(var(--space-10), 6vw, 100px)
    clamp(var(--space-8), 4vw, 60px);
}
.cmp__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1070px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.cmp__heading {
  margin: 0;
  font-size: var(--fs-2xl); /* 28px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.cmp__lead,
.cmp__suffix {
  margin: 0;
  font-size: var(--fs-base); /* 設計稿四頁都是 16px 一般字重 */
  line-height: 1.2;
}

.cmp__factors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--space-5), 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cmp__factor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
/* 五個圖示在設計稿裡寬高各不相同（北視 49×52～58×58、信和 42×42 與 61×42），
   所以用高度對齊、寬度自動，才不會把寬版圖示壓扁。 */
.cmp__factor img {
  width: auto;
  height: clamp(32px, 3vw, var(--icon-h, 58px));
}
.cmp__factor-label {
  font-size: var(--fs-base); /* 設計稿 16px；數字版的藥丸另外覆寫成 20/500 */
  white-space: nowrap;
}

/* 純文字版：設計稿 Frame 1047 等 —— 160×78、圓角 8、80% 白底、1px 紅框、陰影 4/4/30。
   底圖會從半透明的框底透出來，所以背景不能用純白。 */
.cmp__factors--plain {
  gap: 34px; /* 設計稿五個框的間距 */
}
.cmp__factors--plain .cmp__factor {
  min-width: 160px;
  min-height: 78px;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.25);
}

/* 數字版的文字標籤在設計稿是藥丸（Frame 1030：144×34、1px 紅框、圓角 60、內距 11/32） */
.cmp__factors--number .cmp__factor-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 144px;
  min-height: 34px;
  /* 設計稿框是 144×34、1px 紅框畫在框內（strokeAlign INSIDE），
     所以內距要扣掉上下左右各 1px 的框：4+24+4+2 = 34、31+80+31+2 = 144。
     （meta.json 的 paddingTop 寫 11，11+24+11 = 46 遠大於框高，在 Figma 裡是溢出的。） */
  padding: 4px 31px;
  border: 1px solid var(--color-brand);
  border-radius: 60px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-brand); /* 設計稿的藥丸文字是紅的 */
}
/* 設計稿 Frame 1262 的五欄間距是 42 */
.cmp__factors--number {
  gap: 42px;
}

/* 大數字版：01～05，紅色由不透明漸層到 30% */
.cmp__no {
  font-size: clamp(44px, 5vw, 80px);
  font-weight: var(--fw-bold);
  line-height: 1.2; /* 設計稿 80px → 節點高 97（1.2125） */
  background: linear-gradient(
    180deg,
    rgba(230, 67, 62, 1) 0%,
    rgba(230, 67, 62, 0.3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cmp-closing {
  padding-block: clamp(var(--space-8), 4vw, 60px)
    clamp(var(--space-12), 7vw, 110px);
}
.cmp-closing__inner {
  width: 100%;
  max-width: calc(1198px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  /* 原本寫 1fr 520fr —— fr 是比例不是像素，文字欄只分到 1/521，會被壓成幾像素寬。
     設計稿四頁的情境圖是 476～616 寬、文字欄 499 左右，因此文字彈性、圖給上限。 */
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--photo-max, 616px));
  align-items: center;
  gap: clamp(var(--space-8), 5vw, 78px);
}
.cmp-closing__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
/* 設計稿的結語標題是黑字、只有關鍵詞紅（由 dadab_highlight() 包成 .op）；
   信和那頁沒有分段，整句都是紅的。 */
.cmp-closing__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.cmp-page--xinhe .cmp-closing__title {
  color: var(--color-brand);
}
.cmp-closing__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}
.cmp-closing__photo {
  width: 100%;
  max-width: var(--photo-max, 100%);
  height: auto;
  /* 四頁設計稿裡只有北視（Rectangle 193）是圓角 20，其餘三頁 cornerRadius = 0；
     共用模板取多數的直角。 */
  box-shadow: var(--shadow-card);
}

/* ── 南桃園：對齊設計稿 1920×922 的垂直節奏與欄寬 ──
   標籤 81 起、標籤→主標 32、主標→前言 12、前言→因素列 20、因素列→結語 20，
   兩段之間 106（46 + 60），頁尾留 104；結語欄位 444 + 56 + 570 = 1070。
   其餘三頁的設計稿數字不同，所以只掛在這一頁上。 */
.cmp-page--south-taoyuan .cmp {
  padding-block: clamp(var(--space-10), 4.3vw, 81px)
    clamp(var(--space-6), 2.4vw, 46px);
}
.cmp-page--south-taoyuan .cmp__inner {
  gap: 12px;
}
.cmp-page--south-taoyuan .cmp__inner > .hub-tag {
  margin-bottom: 20px;
}
.cmp-page--south-taoyuan .cmp__factors,
.cmp-page--south-taoyuan .cmp__suffix {
  margin-top: 8px;
}
.cmp-page--south-taoyuan .cmp-closing {
  padding-block: clamp(var(--space-8), 3.1vw, 60px)
    clamp(var(--space-12), 5.4vw, 104px);
}
.cmp-page--south-taoyuan .cmp-closing__inner {
  max-width: calc(1070px + var(--container-pad) * 2);
  gap: clamp(var(--space-8), 2.9vw, 56px);
}
.cmp-page--south-taoyuan .cmp-closing__body {
  gap: var(--space-6);
}
/* 設計稿 Rectangle 186 沒有陰影 */
.cmp-page--south-taoyuan .cmp-closing__photo {
  box-shadow: none;
}
/* 設計稿的結語標題是一整行（28px × 16 字 = 448，比 444 的文字欄寬 4px，
   在 Figma 裡是溢出到欄距裡的）。寬螢幕照做，窄螢幕讓它正常換行。 */
@media (min-width: 1200px) {
  .cmp-page--south-taoyuan .cmp-closing__title {
    white-space: nowrap;
  }
}

/* 設計稿 Vector 7：標題與內文之間一條 1px 細線，靠右處有一個往下的 V 形缺口。
   線本身會隨欄寬伸縮，所以 SVG 加了 preserveAspectRatio="none"。 */
.cmp-closing__rule {
  display: block;
  width: 100%;
  height: 11px;
  background: url("../../images/hub/cy-cmp-rule.svg") no-repeat center / 100%
    100%;
}

/* ── 吉元：設計稿 1920×968 ──
   上段版心 943（標籤 →20→ 主標 →24→ 五個大數字 →24→ 結語），
   下段 1023 ＝ 文字 499 ＋ 48 ＋ 情境圖 476。 */
.cmp-page--chi-yuan .cmp {
  padding-block: clamp(var(--space-10), 7.9vw, 151px)
    clamp(var(--space-5), 2.1vw, 40px);
}
.cmp-page--chi-yuan .cmp__inner {
  max-width: calc(943px + var(--container-pad) * 2);
}
/* 黃底往下探出 8，所以標籤到主標要多留 4（24 + 4 = 28，等於設計稿的 20 ＋ 8）。 */
.cmp-page--chi-yuan .cmp__inner > .hub-tag {
  margin-bottom: var(--space-1);
}
.cmp-page--chi-yuan .cmp-closing {
  padding-block: clamp(var(--space-8), 3vw, 58px)
    clamp(var(--space-12), 7.9vw, 151px);
}
.cmp-page--chi-yuan .cmp-closing__inner {
  max-width: calc(1023px + var(--container-pad) * 2);
  gap: clamp(var(--space-6), 2.5vw, 48px);
}
.cmp-page--chi-yuan .cmp-closing__body {
  gap: var(--space-6); /* 設計稿 Frame 1266 的 24 */
  align-items: flex-start;
}
/* 設計稿的結語標題是 24/500、在「，」後換行（文案裡帶 
）。 */
.cmp-page--chi-yuan .cmp-closing__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  white-space: pre-line;
}
.cmp-page--chi-yuan .cmp-closing__text {
  max-width: 473px;
}

/* ============================================
   北視網路比較（獨立版型）
   設計稿 1920×1303：上段左文右地圖（地圖 441×506 疊在文字欄右側），
   下段左照片右白卡、互相重疊 20。
   ============================================ */
.ps-cmp {
  padding-block: clamp(var(--space-12), 10.3vw, 198px) 0;
}
.ps-cmp__inner {
  position: relative;
  width: 100%;
  /* 與下段結語用同一個版心（設計稿 Frame 1242 是 1198 置中）；
     設計稿上段的文字欄再往內縮 79，地圖靠齊版心右緣。 */
  max-width: calc(1198px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.ps-cmp__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 750px;
  margin-left: clamp(0px, 4.1vw, 79px);
}
/* 設計稿 Ellipse 2 是一顆做了圖層模糊的紅圓（模糊沒有匯出到 meta.json，
   是從 design.png 的像素斜坡量出來的：5%→95% 跨 14px → sigma ≈ 4.3）。 */
.ps-cmp__tag::before {
  filter: blur(4.3px);
}
/* 設計稿的疊放順序是地圖在最底層，文字與因素框壓在它上面
   （第五個框的 50% 白底會透出地圖）。 */
.ps-cmp__body {
  position: relative;
  z-index: 1;
}
/* 地圖在設計稿比文字欄高、且往上探出 30，所以用絕對定位疊在右側。 */
.ps-cmp__map {
  position: absolute;
  right: var(--container-pad);
  top: -30px;
  width: 100%;
  max-width: 441px;
  height: auto;
}

/* 設計稿 Group 561：150×36 的白底紅框，左上角露出一顆 28 的紅圓。 */
.ps-cmp__tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 36px;
  /* 紅圓往上探出 10，設計稿 Group 561 的外框因此是 46 高。 */
  margin: 10px 0 var(--space-6);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-brand);
  font-size: var(--fs-base);
  line-height: 1.2;
}
.ps-cmp__tag::before {
  content: "";
  position: absolute;
  left: -12px;
  top: -10px;
  width: 28px;
  height: 28px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  z-index: -1;
}
.ps-cmp__tag-text {
  position: relative;
}

.ps-cmp__heading {
  /* 設計稿在 336 斷成「竹北、新竹縣網路怎麼選？／先看你最在意什麼」，剛好是 12 字 × 28。
     3-base.css 對 h1～h6 設了 text-wrap: balance，會把兩行拉成等長（280／280），
     這裡要照設計稿的斷點，所以改回一般的貪婪斷行。 */
  max-width: 340px;
  text-wrap: wrap;
  margin: 0 0 clamp(var(--space-8), 2.5vw, 48px);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.22;
}
.ps-cmp__lead,
.ps-cmp__suffix {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}
.ps-cmp__lead {
  margin-bottom: var(--space-2);
}

.ps-cmp__factors {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.ps-factor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 130px;
}
/* 設計稿 Frame 1231：130×114、圓角 10、50% 白底、1px 紅框 */
.ps-factor__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 114px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-brand);
  border-radius: 10px;
}
/* 五枚圖示在設計稿是 49×52 ～ 58×58，用高度對齊、寬度自動才不會壓扁寬版。 */
.ps-factor__box img {
  width: auto;
  max-width: 100%;
  height: 58px;
}
.ps-factor__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-base);
  line-height: 1.2;
  color: var(--color-brand);
  white-space: nowrap;
}
/* 設計稿 Frame 1232：20×20 的橘色圓，白色數字 */
.ps-factor__no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  color: #fff;
}

/* 設計稿 Frame 1242：照片 616×396 與白卡 602×224 水平重疊 20、垂直置中。 */
.ps-cmp-closing {
  padding-block: clamp(var(--space-12), 7.4vw, 143px)
    clamp(var(--space-12), 8.8vw, 168px);
}
.ps-cmp-closing__inner {
  width: 100%;
  max-width: calc(1198px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: center;
}
.ps-cmp-closing__photo {
  flex: 0 1 616px;
  min-width: 0;
  height: auto;
  border-radius: 20px;
}
.ps-cmp-closing__card {
  flex: 0 1 602px;
  min-width: 0;
  margin-left: -20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-6), 3.6vw, 68px) clamp(var(--space-5), 3vw, 58px);
  background: var(--color-bg);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.ps-cmp-closing__title {
  margin: 0;
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
}
.ps-cmp-closing__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}

@media (max-width: 1200px) {
  /* 地圖改回文件流，放在文字下方置中。 */
  .ps-cmp__map {
    position: static;
    display: block;
    margin: var(--space-8) auto 0;
  }
  .ps-cmp__body {
    max-width: none;
    margin-left: 0;
  }
}
@media (max-width: 900px) {
  .ps-cmp-closing__inner {
    flex-direction: column;
  }
  .ps-cmp-closing__photo {
    flex: 0 0 auto;
    width: 100%;
  }
  .ps-cmp-closing__card {
    flex: 0 0 auto;
    width: 100%;
    margin-left: 0;
    margin-top: -20px;
  }
}
/* 預設（桌機）：短句在上、長句不顯示 */
.ps-cmp__lead-narrow {
  display: none;
}

@media (max-width: 640px) {
  .ps-cmp__factors {
    gap: var(--space-4);
    justify-content: center;
  }
  .ps-factor {
    width: calc(50% - var(--space-2));
  }
  .ps-factor__box {
    height: 96px;
  }
  .ps-factor__box img {
    height: 44px;
  }

  /* 手機換成完整句，句尾那段就不再單獨出現 */
  .ps-cmp__lead-wide {
    display: none;
  }
  .ps-cmp__lead-narrow {
    display: inline;
  }
  .ps-cmp__suffix {
    display: none;
  }

  /* 地圖是上段最後一個元素，下段結語自己還有 48 的上內距，
     兩者之間會空一大塊。手機讓地圖直接貼著下方照片。 */
  .ps-cmp-closing {
    padding-top: 0;
  }
  .ps-cmp__map {
    margin-bottom: 0;
  }
}

/* ============================================
   北視服務地區與優惠（獨立版型）
   設計稿 1920×878：上段置中文字＋地址查詢框，
   下段 1310×214 白卡（左標題／右四張 192×75 方案卡）。
   ============================================ */
.ps-off {
  padding-block: clamp(var(--space-10), 7.5vw, 144px) 0;
}
.ps-off__inner {
  width: 100%;
  /* 設計稿的文字欄是 825，但說明文在瀏覽器裡量出來要 832 才排得下一行
     （Figma 與瀏覽器的中文字距有幾像素落差），放寬到 840 維持設計稿的單行。 */
  max-width: calc(840px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ps-off__inner > .hub-tag {
  margin-bottom: 36px;
}
.ps-off__heading {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
.ps-off__lead {
  margin: 0 0 28px;
  font-size: var(--fs-base);
  line-height: 1.2;
}
/* 設計稿 Frame 1245：510×53、圓角 60、內凹陰影 4/4/11 黑 25%（不是外陰影）。 */
.ps-off__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: 510px;
  min-height: 53px;
  margin: 0;
  padding: 9px 18px;
  background: var(--color-bg);
  border-radius: 60px;
  box-shadow: inset 4px 4px 11px rgba(0, 0, 0, 0.25);
  text-align: left;
}
.ps-off__search-input {
  flex: 1 1 auto;
  min-width: 0;
  /* 撐滿整顆膠囊（含上下內距 = 53），不然可點區只有一行字高。
     輸入框沒有背景，用「內距 ＋ 負外距」把感應範圍推到膠囊邊緣，外觀完全不變。 */
  align-self: stretch;
  padding-block: 9px;
  margin-block: -9px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm); /* 設計稿 14px */
  line-height: 1.2;
  color: var(--color-text);
}
.ps-off__search-input::placeholder {
  color: #6e6e6e;
}
.ps-off__search-input:focus {
  outline: none;
}
/* 焦點框畫在整個框上，才看得見（輸入框本身沒有邊界）。 */
.ps-off__search:focus-within {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
.ps-off__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* 設計稿 34 的紅圓。外圈 3px 透明邊框把點擊區做到 40，圓本身仍是 34。 */
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--color-brand);
  background-clip: padding-box;
  border: 3px solid transparent;
  margin: -3px;
  border-radius: var(--radius-full);
  box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
/* 輸入框本身只有文字行高（約 18px），觸控時不好點；連同送出鈕一起撐到 44。
   設計稿的 34 圓鈕是桌機值，觸控版型以可點擊為優先。 */
@media (max-width: 1200px) {
  .ps-off__search-input {
    min-height: 44px;
  }
  .ps-off__search-btn {
    width: 50px;
    height: 50px;
  }
}

/* 查詢結果（設計稿沒有這一塊 —— 原地驗證是後來加的功能）。 */
.ps-off__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 510px;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-lg);
}
.ps-off__result.is-hit {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}
.ps-off__result.is-miss {
  border-color: var(--color-text);
}
.ps-off__result-text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.4;
}
.ps-off__result-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
}

/* 設計稿 Frame 1254：1310×214、圓角 30、陰影 4/4/29、內距 68／51，左右兩區間距 56。 */
.ps-off-list {
  padding-block: 62px clamp(var(--space-12), 12.5vw, 240px);
}
.ps-off-list__card {
  width: 100%;
  max-width: 1310px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-6), 2.9vw, 56px);
  padding: clamp(var(--space-8), 3.5vw, 68px) clamp(var(--space-5), 2.7vw, 51px);
  background: var(--color-bg);
  border-radius: 30px;
  box-shadow: 4px 4px 29px rgba(0, 0, 0, 0.25);
}
/* 設計稿 Group 562 是 78 高 —— 鈴鐺比標題高出 19，這段留白要算進卡片高度。 */
.ps-off-list__head {
  position: relative;
  flex-shrink: 0;
  max-width: 312px;
  padding-top: 19px;
}
.ps-off-list__title {
  margin: 0;
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.22;
}
/* 設計稿的「當期優惠」自成一行且是紅字 */
.ps-off-list__title .op {
  display: block;
}
/* 鈴鐺在設計稿是壓在「當期優惠」右側、往上探出 19（旋轉已烘進 SVG）。 */
.ps-off-list__bell {
  position: absolute;
  left: 103px;
  top: 0;
  width: 44px;
  height: auto;
}

.ps-off-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 設計稿 Group 514：192×75 白底黑框，右下角一塊紅色直角三角形（32×29）。
   原本是四個一模一樣的 SVG，改用 CSS 畫。 */
.ps-off-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 192px;
  height: 75px;
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  overflow: hidden;
}
.ps-off-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 32px;
  height: 29px;
  background: var(--color-brand);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.ps-off-card__no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #fff;
}
.ps-off-card__label {
  font-size: var(--fs-lg); /* 20px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--color-brand);
  white-space: nowrap;
}

@media (max-width: 1400px) {
  .ps-off-list__card {
    flex-direction: column;
  }
  .ps-off-list__head {
    max-width: none;
    text-align: center;
  }
  .ps-off-list__bell {
    position: static;
    display: block;
    margin: 0 auto var(--space-2);
  }
  .ps-off-list__items {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .ps-off-card {
    width: 100%;
  }
}

/* ============================================
   吉元服務地區與優惠（獨立版型）
   設計稿 1920×821：黑框標籤 ＋ 黃底主標 ＋ 說明，
   下段紅色膠囊小標 ＋ 664×224 白卡（三欄圖示）。
   ============================================ */
.cy-off {
  padding-block: clamp(var(--space-10), 7.8vw, 150px) 0;
}
.cy-off__inner {
  width: 100%;
  /* 設計稿的文字欄是 665，但說明整行在瀏覽器裡要 672（42 字 × 16）才排得下；
     放寬到 690 維持設計稿的單行，下段的膠囊與白卡仍是 665。 */
  max-width: calc(690px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cy-off__inner > .hub-tag {
  margin-bottom: var(--space-5);
} /* 設計稿 Frame 1269 的 20 */
/* 設計稿 Group 565：主標是 24/500，下方壓一條 220×12 的黃底（從左邊起算）。 */
.cy-off__heading {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.cy-off__heading-text {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.cy-off__heading-text::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 220px;
  max-width: 100%;
  height: 12px;
  background: var(--color-accent-soft);
  z-index: -1;
}
.cy-off__lead {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}

.cy-off-list {
  padding-block: 68px clamp(var(--space-12), 9.7vw, 185px);
}
.cy-off-list__inner {
  width: 100%;
  max-width: calc(665px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6); /* 設計稿 Frame 1282 的 24 */
}
/* 設計稿 Frame 1271：整條 665×30 的紅色膠囊，白字 16px */
.cy-off-list__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  margin: 0;
  padding: 4px var(--space-5);
  background: var(--color-brand);
  border-radius: 60px;
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: 1.2;
  color: #fff;
  text-align: center;
}
/* 設計稿 Frame 1283：664×224、圓角 10、陰影 */
.cy-off-list__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: 38px var(--space-6);
  background: var(--color-bg);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
/* 設計稿 Frame 1280：三欄、間距 48，每欄 120 寬 */
.cy-off-list__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cy-off-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* 設計稿 Frame 1277 */
  width: 120px;
}
/* 設計稿 Frame 1272：14×14 的紅圓，白色數字 12px */
.cy-off-item__no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); /* 12px */
  line-height: 1;
  color: #fff;
}
.cy-off-item__icons {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cy-off-item__icons img {
  width: 38px;
  height: 38px;
}
.cy-off-item__plus {
  font-size: var(--fs-lg);
  line-height: 1;
}
.cy-off-item__label {
  font-size: var(--fs-lg); /* 20px */
  line-height: 1.2;
  white-space: nowrap;
}
.cy-off-list__note {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-align: center;
}

@media (max-width: 560px) {
  .cy-off-list__items {
    gap: var(--space-6);
  }
  .cy-off-item {
    width: calc(50% - var(--space-3));
  }
  .cy-off-item__label {
    white-space: normal;
  }
}
/* 第三欄是「網路 ＋ 第四台」兩個 38px 圖示（含加號至少要 86px），
   320 的視窗兩欄放不下，收成單欄。 */
@media (max-width: 380px) {
  .cy-off-item {
    width: 100%;
  }
}

/* ── 信和網路比較：設計稿 1920×1008 ──
   上段版心 1104（標籤 →36→ 主標 →40→ 五格粉底 176×112，中間夾細直線），
   下段 1081 ＝ 情境圖 537 ＋ 56 ＋ 右側卡（紅色標題條 ＋ 白底說明）。 */
.cmp-page--xinhe .cmp {
  padding-block: clamp(var(--space-10), 8.1vw, 156px)
    clamp(var(--space-6), 2.3vw, 44px);
}
.cmp-page--xinhe .cmp__inner {
  max-width: calc(1104px + var(--container-pad) * 2);
  gap: 0;
}
/* 標籤後面那層紅藥丸往下探出 7，設計稿的 Group 570 因此是 58 高；
   主標與它的間距 36 要從 58 的底部起算，所以這裡是 36 + 7。 */
.cmp-page--xinhe .cmp__inner > .hub-tag {
  margin-bottom: 43px;
}
.cmp-page--xinhe .cmp__heading {
  margin-bottom: 40px;
}
/* 設計稿 Frame 1153：五格間距 56，正中央夾一條 112 高的細直線。 */
.cmp-page--xinhe .cmp__factors {
  gap: 56px;
}
.cmp-page--xinhe .cmp__factor {
  position: relative;
  justify-content: center;
  gap: 10px;
  width: 176px;
  min-height: 112px;
  background: var(--color-brand-soft);
}
.cmp-page--xinhe .cmp__factor:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -28px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--color-text);
}
.cmp-page--xinhe .cmp__factor img {
  height: 42px;
}

.cmp-page--xinhe .cmp-closing {
  padding-block: clamp(var(--space-8), 2.6vw, 45px)
    clamp(var(--space-12), 8.1vw, 156px);
}
/* 設計稿是照片在左、說明卡在右。 */
.cmp-page--xinhe .cmp-closing__inner {
  max-width: calc(1081px + var(--container-pad) * 2);
  grid-template-columns: minmax(0, 537fr) minmax(0, 488fr);
  gap: clamp(var(--space-8), 2.9vw, 56px);
}
.cmp-page--xinhe .cmp-closing__body {
  order: 2;
  gap: var(--space-6); /* 設計稿 Frame 1282 的 24 */
}
/* 設計稿 Frame 1271：紅底白字的標題條，只有上面兩角是圓的（20／20／0／0）。 */
.cmp-page--xinhe .cmp-closing__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: var(--space-3) var(--space-5);
  background: var(--color-brand);
  border-radius: 20px 20px 0 0;
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  color: #fff;
  text-align: center;
}
/* 設計稿 Frame 1283：488×140 白底、陰影 4/4/30，只有下面兩角是圓的（0／0／10／10）。 */
.cmp-page--xinhe .cmp-closing__text {
  display: flex;
  align-items: center;
  min-height: 140px;
  padding: var(--space-6) var(--space-6);
  background: var(--color-bg);
  border-radius: 0 0 10px 10px;
  box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.25);
}
.cmp-page--xinhe .cmp-closing__photo {
  max-width: 537px;
  box-shadow: none;
}

@media (max-width: 900px) {
  .cmp-page--xinhe .cmp-closing__body {
    order: 0;
  }
}
@media (max-width: 640px) {
  .cmp-page--xinhe .cmp__factors {
    gap: var(--space-4);
  }
  .cmp-page--xinhe .cmp__factor {
    width: calc(50% - var(--space-2));
  }
  .cmp-page--xinhe .cmp__factor:not(:last-child)::after {
    display: none;
  }
}

/* ============================================
   信和服務地區與優惠（獨立版型）
   設計稿 1920×950：上段左文右圖（387 ＋ 58 ＋ 450），
   下段 918×264 的白色圓角卡（小標 ＋ 三顆紅膠囊 ＋ 結語）。
   ============================================ */
.xh-off {
  padding-block: clamp(var(--space-10), 9.2vw, 176px) 0;
}
.xh-off__inner {
  width: 100%;
  max-width: calc(895px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 387fr) minmax(0, 450fr);
  align-items: center;
  gap: clamp(var(--space-6), 3vw, 58px);
}
.xh-off__body {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 設計稿 Frame 1295 */
}
/* 設計稿的主標是 24/500、在「等地，」後換行（文案裡帶 
）。 */
.xh-off__heading {
  margin: 0;
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: pre-line;
}
.xh-off__lead {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}
/* 設計稿 Rectangle 201（450×252）cornerRadius = 0 */
.xh-off__photo {
  width: 100%;
  max-width: 450px;
  height: auto;
  justify-self: end;
}

/* 設計稿 Frame 1305：918×264、圓角 20、陰影 4/4/26 */
.xh-off-list {
  padding-block: 60px clamp(var(--space-12), 10.3vw, 198px);
}
.xh-off-list__card {
  width: 100%;
  width: calc(100% - var(--container-pad) * 2);
  max-width: 918px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 設計稿 Frame 1304 的 32 只在小標與下半段之間；
     下半段（Frame 1303）裡的膠囊列與結語是 20。 */
  gap: 0;
  padding: 57px var(--space-8);
  background: var(--color-bg);
  border-radius: 20px;
  box-shadow: 4px 4px 26px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.xh-off-list__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
/* 設計稿 Frame 1302：三顆膠囊、間距 32 */
.xh-off-list__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) 32px;
  margin: 32px 0 20px;
  padding: 0;
  list-style: none;
}
/* 設計稿 Frame 1299～1301：50 高的紅色膠囊，上緣內凹陰影 0/−3/4（不是外陰影）。 */
.xh-off-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  /* 設計稿的內距是不對稱的：左 31、右 45（31 + 內容 + 45 = 148／228）。 */
  padding: 13px 45px 13px 31px;
  background: var(--color-brand);
  border-radius: 60px;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.25);
  font-size: var(--fs-lg); /* 20px */
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}
/* 設計稿 Frame 1297：22×22 的白圓，黑色數字 */
.xh-off-item__no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--color-bg);
  border-radius: var(--radius-full);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-text);
}
.xh-off-list__note {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}

@media (max-width: 860px) {
  .xh-off__inner {
    grid-template-columns: 1fr;
  }
  .xh-off__photo {
    justify-self: center;
  }
}

/* ============================================
   服務地區與優惠（四個區塊共用）
   ============================================ */
.offers {
  padding-block: clamp(var(--space-10), 6vw, 100px)
    clamp(var(--space-6), 3vw, 40px);
}
.offers__inner {
  width: 100%;
  max-width: calc(916px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
/* 設計稿四頁的主標都是黑字、只有地名／關鍵詞紅（由 dadab_highlight() 包成 .op）。 */
.offers__heading {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
/* 說明卡（設計稿 Frame 1006：陰影 4/4/20、圓角 20） */
.offers__card {
  margin: 0;
  padding: var(--space-8) clamp(var(--space-5), 3vw, 41px);
  background: var(--color-bg);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  font-size: var(--fs-base);
  line-height: 1.2;
}
.offers__hint {
  margin: 0;
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent-soft);
  border-radius: var(--radius-full);
  /* 設計稿 Frame 1245 是 INNER_SHADOW 4/4/11 黑 25%（內凹），不是外陰影。
     meta.json 的 effects 才有這筆，匯出的 CSS 不含。 */
  box-shadow: inset 4px 4px 11px rgba(0, 0, 0, 0.25);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.offers__photo {
  width: 100%;
  /* 上限由 inc/subpages.php 的 photo_w 帶入（南桃園 1164、信和 450），
     不同頁的圖在設計稿裡本來就不是同一個尺寸。 */
  max-width: var(--photo-max, 100%);
  height: auto;
}

.offers-list {
  padding-block: clamp(var(--space-8), 4vw, 60px)
    clamp(var(--space-12), 7vw, 110px);
}
.offers-list__inner {
  width: 100%;
  max-width: calc(1310px + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--space-6), 3vw, 40px);
  text-align: center;
}
.offers-list__title {
  margin: 0;
  font-size: var(--fs-xl); /* 24px */
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.offers-list__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--space-5), 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.offer-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 50px;
  padding: var(--space-3) var(--space-6);
  background: var(--color-bg);
  border-radius: var(--radius-full);
  /* 設計稿 Frame 1299/1300/1301 是 INNER_SHADOW 0/−3/4 黑 25%（上緣內凹），
     原本寫成外陰影 4/4/26，方向與性質都不同。 */
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.25);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
}
.offer-item__label {
  white-space: nowrap;
}
.offer-item__no {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 設計稿序號圓：信和 22×22、北視 20×20、吉元 14×14，共用模板取 22。 */
  width: 22px;
  height: 22px;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  font-size: var(--fs-base);
  color: #fff;
}
.offers-list__note {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.2;
}

/* ── 南桃園：設計稿 1920×1244 是另一套版型 ──
   照片 1164×400 在最上面，白色說明卡（916×243、圓角 20）壓在照片下緣 38px，
   標籤與主標都在卡片裡；下半部是四個 158 的純色圓，不是帶序號的藥丸。
   其餘三頁的設計稿各自不同，所以整組只掛在這一頁上。 */
.offers-page--south-taoyuan {
  padding-top: clamp(var(--space-10), 6.3vw, 120px);
}
.offers-page--south-taoyuan .offers__photo {
  display: block;
  width: calc(100% - var(--container-pad) * 2);
  max-width: var(--photo-max, 1164px);
  margin-inline: auto;
}
.offers-page--south-taoyuan .offers {
  padding-block: 0;
}
.offers-page--south-taoyuan .offers__inner {
  /* 設計稿卡片 916 寬、左右內距 68；窄螢幕留出版心邊距。 */
  width: calc(100% - var(--container-pad) * 2);
  max-width: 916px;
  /* 設計稿 Frame 1006 的 paddingTop 寫 30，但框高 243、內容 162，置中後上下各是 40。 */
  padding: clamp(var(--space-6), 2.1vw, 40px) clamp(var(--space-5), 3.5vw, 68px);
  background: var(--color-bg);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  gap: var(--space-5);
  /* 壓在照片下緣 38px */
  margin-top: -38px;
  position: relative;
  z-index: 1;
}
.offers-page--south-taoyuan .offers__inner > .hub-tag {
  margin-bottom: var(--space-1);
}
/* 卡片內文在設計稿只排到 588 寬（卡片內距以內再收窄），超過就換行。 */
.offers-page--south-taoyuan .offers__heading,
.offers-page--south-taoyuan .offers__card {
  max-width: 588px;
}
/* 說明文在這一頁不是獨立的卡片，卡片是外層的 .offers__inner。 */
.offers-page--south-taoyuan .offers__card {
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.offers-page--south-taoyuan .offers-list {
  padding-block: clamp(var(--space-10), 4.2vw, 80px)
    clamp(var(--space-12), 9.3vw, 178px);
}
.offers-page--south-taoyuan .offers-list__inner {
  max-width: calc(728px + var(--container-pad) * 2);
  gap: var(--space-6);
}
.offers-page--south-taoyuan .offers-list__items {
  gap: 32px;
}
/* 四個 158×158 的圓，粉／灰交錯（設計稿 Frame 949／1007／1008／1009）。 */
.offers-page--south-taoyuan .offer-item {
  flex-direction: column;
  justify-content: center;
  width: 158px;
  height: 158px;
  min-height: 0;
  padding: var(--space-3);
  background: #dedede;
  border-radius: var(--radius-full);
  box-shadow: none;
  text-align: center;
}
.offers-page--south-taoyuan .offer-item:nth-child(odd) {
  background: var(--color-brand-soft);
}
/* 第四顆在設計稿是「第四台／＋／網路等方案」三行，文案裡用換行字元帶。 */
.offers-page--south-taoyuan .offer-item__label {
  white-space: pre-line;
}
.offers-page--south-taoyuan .offers-list__note {
  margin-top: 7px;
}

/* ── RWD ── */
@media (max-width: 1024px) {
  .cmp-closing__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  /* 信和那頁在非 media 的規則裡自己宣告了兩欄（權重 0,2,0），比上面這條
     （0,1,0）強，不補一條同權重的覆寫，手機就會維持兩欄 ——
     實測 390 寬時文字欄只剩 171px，一行擠 9 個字。 */
  .cmp-page--xinhe .cmp-closing__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .cmp-page--xinhe .cmp-closing__photo {
    width: 100%;
    justify-self: center;
  }
  /* 紅色標題條是 20/20/0/0、白卡是 0/0/10/10，本來就是要接在一起的；
     單欄滿版之後中間那 24 的間距會讓它們變成兩塊不相干的東西。 */
  .cmp-page--xinhe .cmp-closing__body {
    gap: 0;
  }
}
@media (max-width: 640px) {
  .cmp__factors {
    gap: var(--space-4);
  }
  .cmp__factors--plain .cmp__factor {
    min-width: 130px;
    min-height: 64px;
  }
  .offers-list__items {
    gap: var(--space-4);
  }
  .offer-item {
    width: 100%;
    justify-content: center;
  }

  /* 南桃園的四顆圓固定排成 2×2：原本是寫死 158，視窗窄於約 380 就擠不下
     兩顆而掉成一欄、四顆直排拉得很長。改成跟著欄寬縮，上限仍是設計稿的 158。 */
  .offers-page--south-taoyuan .offers-list__items {
    gap: var(--space-4);
  }
  .offers-page--south-taoyuan .offer-item {
    width: min(158px, calc(50% - var(--space-2)));
    height: auto;
    aspect-ratio: 1;
  }
}