/* 匠‧殺蟲病媒防治 官網樣式：風格 2「米白親切」
   數值取自設計畫布 Desktop.dc.html（電腦 1440）與 Cream.dc.html（手機 390）。
   斷點：768px 以下是手機版（底部固定按鈕）；1239px 以下頁首改用「選單」按鈕
   （選單全部 7 項加上 LOGO 時，一排約需 1180px，再留捲軸與餘裕）。 */

:root {
  /* 顏色（名稱固定，後面的版型都用這些；對比度由 test/palette.test.js 檢查） */
  --bg: #F7F1E6;
  --card: #FFFFFF;
  --ink: #1E2547;
  --muted: #5B5468;
  --navy: #192A87;
  --accent: #C24F17;
  --decor: #E5692A;
  --tint: #FBE6D9;
  --tag-text: #A3410F;
  --line: #E7DCC8;
  --footer-bg: #EFE6D6;
  --footer-text: #3E3A52;
  --line-green: #00873C;
  --on-navy: #D5DBF5;
  --on-navy-kicker: #FFB27D;
  /* 深藍、深橘區塊（.on-dark）裡的聚焦框：深藍框在那裡看不到 */
  --focus-on-dark: #FFFFFF;
  /* 輔助色：滑過按鈕、頁尾分隔線、箭頭 */
  --navy-hover: #0F1A5C;
  --accent-hover: #A8440F;
  --line-green-hover: #006E31;
  --footer-line: #DDD0B9;
  --chevron: #A39A88;

  --font: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;
  --radius-btn: 16px;
  --radius-card: 24px;
  --radius-block: 32px;
  --shadow-float: 0 12px 32px rgba(30, 37, 71, 0.16);
  --action-bar-h: 74px;
}

/* ---------- 基本 ---------- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }

a { color: var(--navy); }
a:hover { color: var(--navy-hover); }

h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 1.3; text-wrap: balance; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -200px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #FFFFFF; }

.draft-ribbon {
  padding: 8px 20px;
  background: var(--tint);
  color: var(--tag-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.6;
  text-align: center;
}

/* ---------- 共用版面 ---------- */

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}

.section { padding-top: 80px; }

.section-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.section-title { font-size: 38px; }
.section-lead { font-size: 16px; color: var(--muted); }

/* 小標：粗體、字距大；.kicker-dot 前面加裝飾橘圓點 */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
}
.kicker-dot { color: var(--ink); }
.kicker-dot::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--decor);
}

/* 淺橘標籤（場所、分類） */
.tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--tag-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.card {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 24px 26px 28px;
}

/* ---------- 按鈕 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-lg { min-height: 58px; padding: 0 32px; font-size: 17px; gap: 10px; }
.btn-sm { min-height: 48px; padding: 0 24px; border-radius: 14px; font-size: 15px; }

.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-hover); color: #FFFFFF; }

.btn-outline { background: var(--card); border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #FFFFFF; }

.btn-navy { background: var(--navy); color: #FFFFFF; }
.btn-navy:hover { background: var(--navy-hover); color: #FFFFFF; }

.btn-line { background: var(--line-green); color: #FFFFFF; }
.btn-line:hover { background: var(--line-green-hover); color: #FFFFFF; }

/* 深色區塊（深藍、深橘）上的按鈕 */
.btn-white { background: #FFFFFF; color: var(--navy); }
.btn-white:hover { background: var(--bg); color: var(--navy-hover); }
.btn-outline-white { border-color: #FFFFFF; color: #FFFFFF; }
.btn-outline-white:hover { background: #FFFFFF; color: var(--ink); }

/* 文字連結加箭頭（「看更多案例 →」） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- 頁首 ---------- */

.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding-block: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  min-height: 48px;
  text-decoration: none;
}
.brand-logo { flex: none; width: 48px; height: 48px; }
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.brand-name { font-size: 22px; font-weight: 900; letter-spacing: 3px; color: var(--navy); }
.brand-sub { font-size: 12px; letter-spacing: 3px; color: var(--muted); }

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  font-size: 15px;
  font-weight: 500;
}
.main-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.main-nav a:hover { color: var(--navy); }
.main-nav a[aria-current] {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline 2px var(--decor);
  text-underline-offset: 8px;
}

.header-actions { display: flex; align-items: center; gap: 16px; }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* 選單按鈕（details/summary）：寬螢幕隱藏 */
.menu { display: none; }
.menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--card);
  color: var(--navy);
  list-style: none;
  cursor: pointer;
}
.menu-button::-webkit-details-marker { display: none; }
.menu-button .icon-close,
.menu[open] .menu-button .icon-open { display: none; }
.menu[open] .menu-button .icon-close { display: block; }

.menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 40px;
  width: min(380px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-float);
}
.menu-panel nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.menu-panel nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 52px;
  padding: 0 12px 0 16px;
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}
.menu-panel nav a svg { color: var(--chevron); }
.menu-panel nav a:hover { background: var(--tint); color: var(--ink); }
.menu-panel nav a[aria-current] { background: var(--tint); }
.menu-book { display: none; }

/* ---------- 內容頁（page.njk） ---------- */

.page { padding-top: 56px; padding-bottom: 80px; }
.page-title { margin-bottom: 24px; font-size: 44px; letter-spacing: 1px; }
/* 內文（Markdown 產生、沒有 class 的元素）。有 class 的清單、段落是版型元件（卡片格、步驟），自己排版。
   固定頁面的段落裡（.prose）沒有 class 的段落、清單也用同一套。 */
.page > h2:not([class]) { max-width: 760px; margin: 48px 0 12px; font-size: 28px; }
.page > h3:not([class]) { max-width: 760px; margin: 32px 0 8px; font-size: 21px; }
.page > p:not([class]),
.page > ul:not([class]),
.page > ol:not([class]),
.prose > p:not([class]),
.prose > ul:not([class]),
.prose > ol:not([class]) { max-width: 760px; margin: 0 0 1em; font-size: 17px; line-height: 1.9; }
.page > ul:not([class]),
.page > ol:not([class]),
.prose > ul:not([class]),
.prose > ol:not([class]) { padding-left: 1.4em; }
.prose > :last-child { margin-bottom: 0; }
/* 標題下面的說明（page.njk 的頁面沒有 .page-head，說明直接接在 h1 後面） */
.page > .page-lead { margin-bottom: 8px; }

/* ---------- 內容類別：列表頁（list.njk）與各版型（place／pest／article／case／area） ----------
   畫法沿用首頁設計稿：白色卡片（圓角 18～24）、淺橘圓底的線條圖示、白底膠囊、淺橘標籤。 */

.page-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.page-head .page-title { margin-bottom: 0; }
.page-head-text { display: flex; flex-direction: column; gap: 14px; }
.page-lead { max-width: 680px; font-size: 18px; line-height: 1.9; color: var(--muted); text-wrap: pretty; }
.listing .page-head { margin-bottom: 48px; }
.entry-article .page-head,
.entry-cover { max-width: 760px; }

/* 標題旁邊有照片（場所頁、有照片的害蟲頁）：電腦版左右兩欄 */
.page-head.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 28px 64px;
}
.entry-photo,
.pest-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(30, 37, 71, 0.18);
}

/* 害蟲照片（lib/pestImage.js 產生的 figure）：照片同場所頁的 .entry-photo，下面一行小字寫來源與授權 */
.pest-photo { margin: 0; }
.pest-photo figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}
.pest-photo figcaption a { color: var(--muted); text-underline-offset: 3px; }
.pest-photo figcaption a:hover { color: var(--navy); }
.pest-photo-license { white-space: nowrap; }

/* 標題上的小字連回列表：點擊範圍上下各撐 12px（滿 44px），版面不變 */
.kicker a {
  padding-block: 12px;
  margin-block: -12px;
  color: inherit;
  text-decoration: none;
}
.kicker a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }

.entry-heading { display: flex; align-items: center; gap: 18px; }

/* 淺橘圓底的線條圖示（場所卡、場所頁與縣市頁標題） */
.place-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--navy);
}
.place-icon-lg { width: 68px; height: 68px; }

.entry-meta,
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 14px;
  color: var(--muted);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row:empty { display: none; }

.entry-section,
.list-section + .list-section { margin-top: 56px; }
.entry-section-title { margin-bottom: 20px; font-size: 28px; }

.entry-cover { margin-bottom: 40px; }
.entry-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); }
/* 文章封面（文章頁與列表卡片）：直式照片裁成橫的時，留住重點（手電筒照冰箱底下，不是後腦勺） */
.cover-flashlight { object-position: 50% 22%; }

.entry-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  margin-top: 40px;
}
.entry-section .entry-gallery { margin-top: 0; }
.gallery-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }

/* 場所卡：圖示＋名稱＋箭頭，整張可點 */
.place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.place-card {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.15s;
}
.place-card:hover { color: var(--ink); box-shadow: 0 10px 28px rgba(30, 37, 71, 0.10); }
.place-name { flex-grow: 1; font-size: 17px; line-height: 1.4; }
.place-chevron { color: var(--chevron); }
.empty-cases .link-arrow { margin-top: 12px; }

/* 白底膠囊（害蟲連結）與淺橘標籤清單 */
.pill-list,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.pill:hover { border-color: var(--navy); color: var(--navy); }
.tag-list .tag { padding: 6px 16px; font-size: 15px; }

/* 內容卡片（害蟲、文章、案例）：標題連結用 .stretch 撐滿整張卡 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card-grid > li { display: flex; }
.pest-card,
.article-card,
.case-card {
  --card-r: var(--radius-card);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--card-r);
  background: var(--card);
  transition: box-shadow 0.15s;
}
.pest-card:hover,
.article-card:hover,
.case-card:hover { box-shadow: 0 12px 32px rgba(30, 37, 71, 0.10); }
.card-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.article-card .card-photo { aspect-ratio: 16 / 10; }
.pest-card-body,
.article-card-body { display: flex; flex-grow: 1; flex-direction: column; gap: 10px; padding: 24px 26px 28px; }
.case-card-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; }
.card-title { font-size: 19px; font-weight: 700; line-height: 1.45; }
.pest-card .card-title { font-size: 22px; font-weight: 900; }
.card-title a { color: var(--ink); text-decoration: none; }
.stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--card-r);
}
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 3px solid var(--navy); outline-offset: 3px; }
.card-desc { font-size: 15px; line-height: 1.8; color: var(--muted); }
.card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.case-card-steps {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  row-gap: 6px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
.case-card-steps dt { font-weight: 700; color: var(--navy); }
.case-card-steps dd { margin: 0; color: var(--muted); }

/* 案例頁：問題／處理／改善三張卡（數字圈照首頁設計稿） */
.case-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.case-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px 30px;
  border-radius: var(--radius-card);
  background: var(--card);
}
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--decor);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 900;
  line-height: 1;
}
.case-step h2 { font-size: 22px; color: var(--navy); }
.case-step p { font-size: 16px; line-height: 1.85; }

/* 場所頁「適合的方案」 */
.plan-card {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 760px;
  padding: 24px 28px;
  border-radius: var(--radius-card);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.15s;
}
a.plan-card:hover { color: var(--ink); box-shadow: 0 12px 32px rgba(30, 37, 71, 0.10); }
.plan-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--navy);
}
.plan-text { display: flex; flex-grow: 1; flex-direction: column; gap: 4px; }
.plan-kicker { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--accent); }
.plan-name { font-size: 24px; font-weight: 900; line-height: 1.3; }
.plan-note { font-size: 15px; line-height: 1.7; color: var(--muted); }
.plan-arrow { color: var(--navy); }

.empty-state { max-width: 640px; font-size: 17px; line-height: 1.9; color: var(--muted); }

/* ---------- 內容頁結尾的行動區（cta.njk） ---------- */

.cta {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  align-items: center;
  gap: 32px 56px;
  margin-top: 64px;
  padding: 56px;
  border-radius: var(--radius-block);
  background: var(--card);
}
.cta-text { display: flex; flex-direction: column; gap: 14px; }
.cta-title { font-size: 34px; line-height: 1.35; }
.cta-lead { max-width: 560px; font-size: 17px; line-height: 1.9; color: var(--muted); }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 頁尾 ---------- */

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: 14px;
  line-height: 1.9;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 40px;
  padding-block: 56px 36px;
}
.footer-col { display: flex; flex-direction: column; }
.footer-col h2 { margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.footer-company { gap: 6px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-logo { flex: none; width: 44px; height: 44px; }
.footer-brand strong { font-size: 20px; font-weight: 900; letter-spacing: 2px; color: var(--navy); }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li { display: flex; align-items: center; min-height: 44px; }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--footer-text); text-decoration: none; }
.footer-links a:hover { color: var(--navy); text-decoration: underline; }
.footer-company .footer-links a,
.footer-links .footer-more,
.footer-social a { color: var(--navy); font-weight: 700; }
.footer-social { gap: 20px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  padding: 10px 0 20px;
  border-top: 1px solid var(--footer-line);
  font-size: 13px;
  color: var(--muted);
}
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }

/* ---------- 手機底部固定按鈕（action-bar.njk） ---------- */

.action-bar { display: none; }

/* ---------- 斷點 ---------- */

@media (max-width: 1239px) {
  .main-nav { display: none; }
  .menu { display: block; }
}

@media (max-width: 999px) {
  /* 標題旁邊的照片改到標題下面 */
  .page-head.has-media { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* 底部固定按鈕會蓋住畫面下緣：用鍵盤聚焦或跳到錨點時，目標要停在按鈕上方，不能躲在後面 */
  html { scroll-padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom, 0px) + 8px); }

  .container { padding-inline: 20px; }

  .section { padding-top: 40px; }
  .section-head { margin-bottom: 20px; }
  .section-title { font-size: 23px; }
  .section-lead { font-size: 15px; }
  .kicker { gap: 8px; font-size: 13px; letter-spacing: 2px; }
  .kicker-dot::before { width: 9px; height: 9px; }

  .card { border-radius: 18px; padding: 20px 18px; }
  .btn { min-height: 52px; padding: 0 22px; border-radius: 14px; }
  .btn-lg { font-size: 16px; }

  .site-header { border-bottom: 0; }
  .header-inner { gap: 10px; padding: 12px 12px 12px 20px; }
  .brand { gap: 10px; min-height: 44px; }
  .brand-logo { width: 40px; height: 40px; }
  .brand-name { font-size: 18px; letter-spacing: 2px; }
  .brand-sub { font-size: 11px; letter-spacing: 2px; }
  .header-actions { display: none; }
  .menu-panel { right: 12px; }
  .menu-book { display: inline-flex; }

  .page { padding-top: 28px; padding-bottom: 48px; }
  .page-title { margin-bottom: 16px; font-size: 30px; letter-spacing: 0.5px; }
  .page > h2:not([class]) { margin-top: 36px; font-size: 22px; }
  .page > h3:not([class]) { font-size: 18px; }
  .page > p:not([class]),
  .page > ul:not([class]),
  .page > ol:not([class]),
  .prose > p:not([class]),
  .prose > ul:not([class]),
  .prose > ol:not([class]) { font-size: 16px; line-height: 1.85; }

  .page-head,
  .page-head-text { gap: 10px; }
  .page-head { margin-bottom: 28px; }
  .listing .page-head { margin-bottom: 32px; }
  .page-head.has-media { gap: 22px; }
  .page-lead { font-size: 15px; line-height: 1.8; }
  .entry-photo,
  .pest-photo img { border-radius: 20px; box-shadow: 0 14px 36px rgba(30, 37, 71, 0.14); }
  .pest-photo figcaption { margin-top: 10px; }
  .entry-heading { gap: 12px; }
  .place-icon-lg { width: 52px; height: 52px; }
  .entry-section,
  .list-section + .list-section { margin-top: 40px; }
  .entry-section-title { margin-bottom: 14px; font-size: 22px; }
  .entry-cover { margin-bottom: 28px; }
  .entry-cover img { border-radius: 18px; }
  .entry-gallery { gap: 12px; margin-top: 28px; }
  .gallery-photo { border-radius: 16px; }

  /* 場所卡改成三欄、圖示在上（照手機設計稿） */
  .place-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .place-card {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 16px 6px 14px;
    border-radius: 16px;
    text-align: center;
  }
  .place-card .place-icon { width: 48px; height: 48px; }
  .place-name { flex-grow: 0; font-size: 14px; }
  .place-chevron { display: none; }

  .pill-list,
  .tag-list { gap: 8px; }
  .pill { padding: 0 16px; font-size: 14px; }
  .tag-list .tag { font-size: 14px; }

  .card-grid { gap: 16px; }
  .pest-card,
  .article-card,
  .case-card { --card-r: 18px; }
  .pest-card-body,
  .article-card-body { padding: 20px 18px 22px; }
  .case-card-body { padding: 20px 18px 22px; }
  .card-title { font-size: 17px; }
  .pest-card .card-title { font-size: 20px; }
  .card-desc { font-size: 14px; line-height: 1.75; }
  .card-more { font-size: 14px; }

  .case-steps { gap: 12px; }
  .case-step { gap: 10px; padding: 22px 20px 24px; border-radius: 18px; }
  .case-step h2 { font-size: 19px; }
  .case-step p { font-size: 15px; line-height: 1.8; }

  .plan-card { gap: 14px; padding: 20px 18px; border-radius: 18px; }
  .plan-icon { width: 48px; height: 48px; }
  .plan-name { font-size: 21px; }
  .plan-note { font-size: 14px; }

  .empty-state { font-size: 15px; line-height: 1.8; }

  .cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-top: 40px;
    padding: 28px 22px 24px;
    border-radius: var(--radius-card);
  }
  .cta-text { gap: 10px; }
  .cta-title { font-size: 24px; line-height: 1.4; }
  .cta-lead { font-size: 15px; line-height: 1.8; }
  .cta-actions { gap: 10px; }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    padding-block: 32px 20px;
    font-size: 13px;
    line-height: 1.8;
  }
  .footer-company,
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-brand strong { font-size: 18px; }

  .action-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    box-shadow: 0 -6px 20px rgba(30, 37, 71, 0.10);
  }
  .action-bar .btn { min-height: 50px; padding: 0 12px; font-size: 15px; }

  /* 底部按鈕固定在畫面上，body 留出它的高度，最後的內容才不會被蓋住 */
  body { padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 共用元件（首頁與固定頁面都用） ----------
   打勾清單、合約區塊（照片＋報告書骨架卡＋匠丸）、稽查常被點名的三個地方（深藍底）、合作流程 6 步。
   數值照首頁設計稿 Desktop.dc.html（電腦）與 Cream.dc.html（手機）。 */

/* 說明文字：避免最後一行只剩一兩個字（例如「告。」「心」） */
.contract-lead,
.inspection-lead,
.inspection-item span,
.process-desc { text-wrap: pretty; }

/* 打勾清單（首頁合約區塊、/contract/） */
.check-list { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 500; line-height: 1.6; }
.check-list svg { margin-top: 2px; color: var(--decor); }

/* 合約區塊（首頁「定期防治合約」、/contract/ 的報告書段落）：白色大區塊，右邊照片＋報告書骨架卡＋匠丸 */
.contract-block {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 56px;
  padding: 56px;
  border-radius: var(--radius-block);
  background: var(--card);
}
.contract-text { display: flex; flex-direction: column; gap: 18px; }
.contract-title { font-size: 44px; }
.contract-lead { font-size: 17px; line-height: 1.9; color: var(--muted); }
.contract-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 10px; }
.contract-actions .btn { padding: 0 30px; }
.contract-media { position: relative; padding: 0 40px 40px 0; }
.contract-figure { position: relative; }
.contract-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.contract-mascot { position: absolute; right: -8px; bottom: -12px; width: 150px; }
/* 報告書骨架卡：只是示意，值用灰色條代替（疊在照片左下角） */
.report-card {
  position: absolute;
  left: -24px;
  bottom: -32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 230px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 14px 36px rgba(30, 37, 71, 0.16);
}
.report-card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.report-card-title svg { color: var(--navy); }
.report-rows {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.report-bar { height: 8px; border-radius: 4px; background: var(--footer-bg); }

/* 稽查常被點名的三個地方（inspection-spots.njk：首頁深藍橫幅、/inspection/ 深藍區塊） */
.inspection-kicker { color: var(--on-navy-kicker); }
.inspection-lead { font-size: 17px; line-height: 1.9; color: var(--on-navy); }
.inspection-list { display: flex; flex-direction: column; gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.inspection-list li { display: flex; align-items: flex-start; gap: 16px; }
.inspection-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--decor);
  border-radius: 50%;
  font-weight: 900;
  line-height: 1;
}
.inspection-item { display: flex; flex-direction: column; gap: 2px; }
.inspection-item strong { font-size: 18px; line-height: 1.5; }
.inspection-item span { font-size: 15px; line-height: 1.7; color: var(--on-navy); }

/* 合作流程 6 步（process-steps.njk：首頁、/process/） */
.process-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.process-step { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: 20px; background: var(--card); }
.process-num { font-size: 34px; font-weight: 900; line-height: 1; color: var(--decor); }
.process-title { font-size: 17px; line-height: 1.4; }
.process-desc { font-size: 14px; line-height: 1.8; color: var(--muted); }

@media (max-width: 1239px) {
  .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  .contract-block { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contract-media { max-width: 560px; }
}

@media (max-width: 768px) {
  .check-list { gap: 12px; margin-top: 4px; }
  .check-list li { gap: 10px; font-size: 15px; line-height: 1.5; }
  .check-list svg { width: 20px; height: 20px; margin-top: 1px; }

  /* 合約區塊：照手機設計稿，匠丸站在文字右邊（文字留出它的位置）；照片和報告書卡放到下面 */
  .contract-block { gap: 32px; padding: 28px 22px 24px; border-radius: var(--radius-card); }
  .contract-text { gap: 14px; }
  .contract-title { font-size: 26px; }
  .contract-lead { font-size: 14px; line-height: 1.8; }
  .contract-lead,
  .contract-text .check-list { max-width: calc(100% - 104px); }
  .contract-actions { position: relative; z-index: 1; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 10px; }
  .contract-actions .btn { padding: 0 22px; }
  .contract-actions .link-arrow { align-self: center; }
  .contract-media { position: static; max-width: none; padding: 0 0 20px; }
  .contract-photo { border-radius: 18px; }
  .contract-mascot { top: 64px; right: -12px; bottom: auto; width: 118px; }
  .report-card { left: 10px; bottom: -20px; gap: 8px; width: 188px; padding: 12px 14px; border-radius: 14px; }
  .report-card-title { font-size: 14px; }
  .report-rows { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 8px; font-size: 11px; }

  .inspection-lead { font-size: 15px; line-height: 1.8; }
  .inspection-list { gap: 14px; margin-top: 4px; }
  .inspection-list li { gap: 12px; }
  .inspection-num { width: 32px; height: 32px; font-size: 15px; }
  .inspection-item strong { font-size: 16px; }
  .inspection-item span { font-size: 14px; }

  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .process-step { gap: 6px; padding: 18px 16px; border-radius: 18px; }
  .process-num { font-size: 28px; }
  .process-title { font-size: 16px; }
  .process-desc { font-size: 13px; line-height: 1.7; }
}

/* ---------- 固定頁面（合約、稽查、費用、流程、關於、聯絡、個資、服務區域、404） ----------
   沿用首頁的視覺語言：白色卡片、淺橘圓底圖示、橘色圓圈數字、深藍區塊。 */

/* 段落標題（.entry-section-title）下面的說明 */
.entry-section > .section-lead { max-width: 680px; margin: -8px 0 24px; text-wrap: pretty; }
/* 段落最後的「看更多 →」 */
.section-more { margin-top: 12px; }

/* 左文右圖（平板、手機改成上下） */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px 64px; }
.split-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.split-photo-flashlight { object-position: 50% 35%; }

/* 白色小卡（橘色圓圈數字或淺橘圓底圖示＋標題＋說明）：費用因素、稽查怎麼幫忙、關於我們的做法 */
.step-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-cards-5 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.step-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; border-radius: 20px; background: var(--card); }
.step-card h3 { font-size: 18px; line-height: 1.45; }
.step-card p { font-size: 15px; line-height: 1.8; color: var(--muted); text-wrap: pretty; }
.step-card .place-icon { width: 48px; height: 48px; }

/* 方案對照表（packages-table.njk）：電腦版整張攤開；比畫面寬時在框裡左右滑，第一欄固定不動 */
.packages-hint { display: none; }
.packages-scroll { overflow-x: auto; border-radius: var(--radius-card); background: var(--card); }
.packages-table {
  width: 100%;
  min-width: 680px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.7;
}
.packages-table th,
.packages-table td { padding: 18px 22px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.packages-table tbody tr:last-child > * { border-bottom: 0; }
.packages-table thead > tr > * { padding-top: 26px; vertical-align: bottom; }
/* 欄寬由第一列決定（table-layout: fixed）：項目欄固定寬度，三個方案平分其餘寬度 */
.packages-corner { width: 128px; }
.packages-table tbody th { color: var(--navy); font-weight: 700; white-space: nowrap; }
.packages-table .is-featured { background: var(--tint); }
.package-badge {
  display: block;
  width: fit-content;
  margin-bottom: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.6;
}
.package-name { display: block; font-size: 22px; font-weight: 900; line-height: 1.3; }
.packages-note { max-width: 760px; margin-top: 14px; font-size: 14px; line-height: 1.8; color: var(--muted); }

/* 合約期間：單次、3、6、12 個月 */
.term-list { margin-top: 20px; }
.term-list .tag { padding: 8px 20px; background: var(--card); color: var(--ink); font-size: 16px; }
.term-text { margin-top: 16px; }

/* 稽查頁：深藍區塊（常被點名的三個地方＋照片） */
.inspection-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 40px 56px;
  padding: 56px;
  border-radius: var(--radius-block);
  background: var(--navy);
  color: #FFFFFF;
}
.inspection-block-text { display: flex; flex-direction: column; gap: 18px; }
.inspection-block .entry-section-title { margin-bottom: 0; }
.inspection-block-photo { width: 100%; aspect-ratio: 4 / 5; max-height: 520px; object-fit: cover; object-position: 50% 45%; border-radius: var(--radius-card); }

/* 稽查頁：消毒證明書卡片下面的定期合約連結 */
.plan-card + .section-more { margin-top: 24px; }
/* 字號、證號這類不要從中間斷行 */
.nowrap { white-space: nowrap; }

/* 費用頁的固定結尾句 */
.closing-line { max-width: 760px; margin-top: 56px; font-size: 22px; font-weight: 900; line-height: 1.6; color: var(--navy); text-wrap: balance; }

/* 流程頁：處理方式（照片卡） */
.method-card { display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: var(--radius-card); background: var(--card); }
.method-body { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 28px; }
.method-desc { text-wrap: pretty; }
.method-photo-drain { object-position: 50% 45%; }
.method-photo-under-counter { object-position: 50% 20%; }
.method-photo-station { object-position: 50% 75%; }
.methods-note { max-width: 760px; margin-top: 20px; font-size: 15px; line-height: 1.8; color: var(--muted); }

/* 關於我們：公司資料 */
.info-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  max-width: 760px;
  margin: 0;
  padding: 8px 28px;
  border-radius: var(--radius-card);
  background: var(--card);
  font-size: 16px;
  line-height: 1.7;
}
.info-list dt,
.info-list dd { display: flex; align-items: center; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.info-list dt { padding-right: 28px; color: var(--navy); font-weight: 700; }
.info-list dd { flex-wrap: wrap; column-gap: 16px; margin: 0; }
.info-list > :nth-last-child(-n + 2) { border-bottom: 0; }
.info-list a { display: inline-flex; align-items: center; min-height: 44px; }

/* 聯絡我們 */
.contact-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 24px; margin-top: 32px; }
.contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.contact-item { display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 22px 24px; border-radius: 20px; background: var(--card); }
.contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-label { font-size: 14px; font-weight: 700; color: var(--muted); }
.contact-value {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.contact-value:hover { color: var(--navy-hover); text-decoration: underline; text-underline-offset: 4px; }
.contact-text .link-arrow { min-height: 44px; font-size: 14px; }
.contact-qr { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.contact-qr img { flex: none; width: 104px; height: 104px; }
.contact-book { display: flex; flex-direction: column; gap: 14px; padding: 32px 30px; border-radius: var(--radius-card); background: var(--card); }
.contact-book h2 { font-size: 24px; }
.contact-book p { font-size: 16px; line-height: 1.8; color: var(--muted); text-wrap: pretty; }
.contact-book .btn { align-self: flex-start; margin-top: 4px; }
.contact-map iframe { display: block; height: 400px; border: 0; border-radius: var(--radius-card); background: var(--footer-bg); }
.contact-map .section-lead { margin-bottom: 16px; }

/* 服務區域總覽：縣市卡（有專頁的整張可點） */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.area-grid > li { display: flex; }
.area-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.15s;
}
a.area-card { outline-offset: 3px; }
a.area-card:hover { color: var(--ink); box-shadow: 0 10px 28px rgba(30, 37, 71, 0.10); }
.area-text { display: flex; flex-grow: 1; flex-direction: column; gap: 2px; }
.area-name { font-size: 18px; font-weight: 900; line-height: 1.4; }
.area-note { font-size: 14px; line-height: 1.6; color: var(--muted); }
.area-more { font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--accent); }
.area-card .place-chevron { color: var(--navy); }

/* 404 */
.not-found-inner { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: center; gap: 32px 64px; max-width: 960px; }
.not-found-mascot { width: 100%; }
.not-found-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.not-found-text .page-title { margin-bottom: 0; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* 常見問題（faq.md）：說明 → 白色卡片，點題目展開。
   解說的匠丸：電腦、平板站在問題右邊（往下捲時跟著），手指著問題；手機站在說明文字旁邊、腳踩在第一題上。 */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 860px) 200px;
  grid-template-areas: "lead mascot" "list mascot";
  align-items: start;
  gap: 28px 56px;
}
.faq-lead { grid-area: lead; }
.faq-mascot { grid-area: mascot; position: sticky; top: 32px; width: 100%; }
.faq-list { grid-area: list; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border-radius: 20px; background: var(--card); transition: box-shadow 0.15s; }
.faq-item:hover,
.faq-item[open] { box-shadow: 0 10px 28px rgba(30, 37, 71, 0.08); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 24px;
  border-radius: 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--navy); }
.faq-chevron { color: var(--accent); transform: rotate(90deg); transition: transform 0.15s; }
.faq-item[open] .faq-chevron { transform: rotate(-90deg); }
.faq-a { padding: 0 24px 22px; }
.faq-a p { max-width: 720px; font-size: 16px; line-height: 1.9; color: var(--muted); text-wrap: pretty; }

@media (max-width: 999px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .faq-layout { grid-template-columns: minmax(0, 1fr) 150px; column-gap: 32px; }
  .inspection-block { grid-template-columns: minmax(0, 1fr); }
  .inspection-block-photo { max-height: none; aspect-ratio: 16 / 10; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  /* 平板、手機本身就能開 LINE：不用掃 QR Code */
  .contact-qr { display: none; }
}

@media (max-width: 768px) {
  .entry-section > .section-lead { margin: -4px 0 18px; }

  .split { gap: 22px; }
  .split-photo { border-radius: 18px; }

  /* 小卡改成「數字（圖示）在左、標題和說明在右」，一張不會太高 */
  .step-cards { gap: 10px; }
  .step-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 14px; padding: 18px 18px 20px; border-radius: 18px; }
  .step-card > .step-num,
  .step-card > .place-icon { grid-row: 1 / span 2; }
  .step-card > h3,
  .step-card > p { grid-column: 2; }
  .step-card > h3 { padding-top: 4px; }
  .step-card .place-icon { width: 44px; height: 44px; }
  .step-card h3 { font-size: 17px; }
  .step-card p { font-size: 14px; line-height: 1.75; }

  .packages-hint { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
  .packages-scroll { border-radius: 18px; }
  .packages-table { min-width: 560px; font-size: 14px; line-height: 1.65; }
  .packages-table th,
  .packages-table td { padding: 14px; }
  .packages-table thead > tr > * { padding-top: 18px; }
  /* 左右滑的時候，第一欄（項目名稱）固定在左邊 */
  .packages-table tbody th,
  .packages-corner { position: sticky; left: 0; z-index: 1; width: 84px; background: var(--card); box-shadow: 1px 0 0 var(--line); }
  .package-name { font-size: 18px; }
  .packages-note { font-size: 13px; }

  .term-list .tag { padding: 6px 16px; font-size: 15px; }

  .inspection-block { gap: 28px; padding: 28px 22px; border-radius: var(--radius-card); }
  .inspection-block-text { gap: 14px; }
  .inspection-block-photo { aspect-ratio: 4 / 3; border-radius: 18px; }

  .closing-line { margin-top: 40px; font-size: 19px; }

  .method-card .card-photo { aspect-ratio: 16 / 10; }
  .method-body { padding: 20px 18px 22px; }
  .methods-note { font-size: 14px; }

  .info-list { grid-template-columns: minmax(0, 1fr); padding: 6px 20px; font-size: 15px; }
  .info-list dt { min-height: 0; padding: 14px 0 0; border-bottom: 0; font-size: 14px; }
  .info-list dd { min-height: 0; padding: 0 0 12px; }
  .info-list > :nth-last-child(2) { border-bottom: 0; }

  .contact-grid { gap: 16px; margin-top: 24px; }
  .contact-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .contact-item { gap: 14px; padding: 16px 18px; border-radius: 18px; }
  .contact-item .place-icon { width: 44px; height: 44px; }
  .contact-value { font-size: 17px; }
  .contact-book { padding: 24px 22px; border-radius: 18px; }
  .contact-book h2 { font-size: 21px; }
  .contact-book p { font-size: 15px; }
  .contact-book .btn { align-self: stretch; }
  .contact-map iframe { height: 300px; border-radius: 18px; }

  /* 縣市卡改兩欄；有專頁的（高雄）一張占一整列 */
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  .area-grid > .area-item-page { grid-column: 1 / -1; }
  .area-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 14px; border-radius: 16px; }
  .area-item-page .area-card { flex-direction: row; align-items: center; padding: 16px 18px; }
  .area-card .place-icon { width: 40px; height: 40px; }
  .area-card .place-chevron { display: block; }
  .area-name { font-size: 16px; }
  .area-note,
  .area-more { font-size: 13px; }

  .not-found-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; text-align: center; }
  .not-found-mascot { width: 140px; }
  .not-found-text { align-items: center; gap: 12px; }
  .not-found-actions { flex-direction: column; align-self: stretch; gap: 10px; }

  .faq-layout { grid-template-columns: minmax(0, 1fr) 92px; grid-template-areas: "lead mascot" "list list"; align-items: end; gap: 0 12px; }
  .faq-lead { padding-bottom: 20px; }
  .faq-mascot { position: relative; top: 0; z-index: 1; margin-bottom: -4px; }
  .faq-list { gap: 10px; }
  .faq-item,
  .faq-q { border-radius: 16px; }
  .faq-q { gap: 12px; min-height: 56px; padding: 14px 18px; font-size: 16px; }
  .faq-a { padding: 0 18px 18px; }
  .faq-a p { font-size: 15px; line-height: 1.85; }
}

/* ---------- 首頁（index.njk） ----------
   數值照 Desktop.dc.html（1440）；1000～1239 一樣兩欄（主標隨寬度縮小）；
   769～999 平板改單欄；768 以下照 Cream.dc.html（手機）。 */

/* 深藍、深橘區塊：預設的深藍聚焦框在這裡看不到，改成白色 */
.on-dark :focus-visible { outline-color: var(--focus-on-dark); }

/* 說明文字：避免最後一行只剩一兩個字（例如「告。」「心」） */
.home :is(.hero-lead, .section-lead, .trust-text span, .situation-desc) { text-wrap: pretty; }

/* 主視覺：左邊文字，右邊照片＋匠丸＋浮動卡片 */
.hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 64px;
  padding-block: 64px 80px;
}
.hero-text { display: flex; flex-direction: column; gap: 22px; }
.hero-title { font-size: clamp(42px, 4.05vw, 58px); line-height: 1.25; letter-spacing: 1px; }
.hero-title span { color: var(--accent); }
.hero-lead { max-width: 520px; font-size: 18px; line-height: 1.9; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-line { gap: 8px; padding: 0 28px; font-size: 16px; }
.hero-media { position: relative; padding: 0 0 36px 28px; }
.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(30, 37, 71, 0.18);
}
.hero-mascot { position: absolute; left: -36px; bottom: -8px; width: 200px; }

/* 疊在照片上的白色小卡（主視覺「先找源頭」） */
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-float);
}
.hero-badge { right: -18px; bottom: 64px; }
.float-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent);
}
.float-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.float-text strong { font-size: 16px; }
.float-text span { font-size: 13px; color: var(--muted); }

/* 五個保證：白色橫條。欄寬跟著字的長度（等寬的話「施作完成後提供，備查更安心」會剩一個字掉到下一行），
   多出來的空間平均分在欄與欄之間。 */
.trust { background: var(--card); }
.trust-list {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 28px 0;
  list-style: none;
}
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--navy);
}
.trust-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.45; }
.trust-text strong { font-size: 16px; }
.trust-text span { font-size: 13px; color: var(--muted); }

/* 你現在遇到的是哪一種？：照片卡，整張可點（連結用 .stretch 撐滿） */
.situation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.situation-card {
  --card-r: var(--radius-card);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--card-r);
  background: var(--card);
  transition: box-shadow 0.15s;
}
.situation-card:hover { box-shadow: 0 12px 32px rgba(30, 37, 71, 0.10); }
.situation-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* 直式照片裁成橫的：留住人和排水孔、監測站的標籤、拿手電筒的手 */
.situation-photo-drain { object-position: 50% 45%; }
.situation-photo-station { object-position: 50% 85%; }
.situation-photo-flashlight { object-position: 50% 35%; }
.situation-body { display: flex; flex-grow: 1; flex-direction: column; gap: 10px; padding: 24px 26px 28px; }
.situation-title { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; line-height: 1.4; }
.situation-title .step-num { flex: none; }
.situation-desc { font-size: 15px; line-height: 1.8; color: var(--muted); }
.situation-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.situation-card:hover .situation-link { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 4px; }

/* 我們常去的場所（場所卡沿用 .place-grid）＋常見蟲害 */
.places-title { margin-bottom: 28px; }
.pest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 28px; }
.pest-row-title { font-size: 17px; font-weight: 700; line-height: 1.4; }

/* 稽查前整頓：深藍色橫幅 */
.inspection { margin-top: 80px; background: var(--navy); color: #FFFFFF; }
.inspection-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 64px;
  padding-block: 72px;
}
.inspection-text { display: flex; flex-direction: column; gap: 18px; }
.inspection-title { font-size: 40px; line-height: 1.4; }
.inspection-text .btn { align-self: flex-start; margin-top: 8px; }
.inspection-photo {
  width: 100%;
  max-height: 560px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 28px;
}

/* 案例分享（有案例才出現）：標題和「看更多案例」同一列 */
.section-head-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }

/* LINE 區塊：深橘色橫幅，文字＋ QR 卡片＋比讚的匠丸 */
.line-band { margin-top: 96px; overflow: hidden; background: var(--accent); color: #FFFFFF; }
.line-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr);
  align-items: center;
  gap: 40px;
  padding-top: 56px;
}
.line-text { display: flex; flex-direction: column; gap: 14px; padding-bottom: 56px; }
.line-title { font-size: 40px; line-height: 1.35; }
.line-lead { font-size: 18px; line-height: 1.8; }
.line-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.line-actions .btn { min-height: 52px; padding: 0 24px; border-radius: 14px; font-size: 15px; }
.line-actions .btn-white { color: var(--ink); }
.line-actions .line-add { display: none; }
.line-add svg { color: var(--line-green); }
.line-qr-card {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 56px;
  padding: 18px 22px 18px 18px;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
}
.line-qr { width: 124px; height: 124px; }
.line-qr-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.line-qr-kicker { font-size: 13px; color: var(--tag-text); }
.line-qr-text strong { font-size: 24px; }
.line-qr-note { font-size: 13px; color: var(--muted); }
.line-mascot { justify-self: center; align-self: end; width: auto; height: 300px; }

@media (max-width: 1239px) {
  .trust-list { grid-template-columns: repeat(3, auto); gap: 20px 32px; }
}

@media (max-width: 999px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 48px 64px; }
  .hero-title { font-size: 52px; }
  .hero-media { max-width: 720px; }

  /* 狀況卡改成左圖右文，一張一列 */
  .situation-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .situation-card { flex-direction: row; }
  .situation-media { position: relative; flex: 0 0 36%; }
  .situation-photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

  .inspection-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 64px; }
  .inspection-photo { max-height: none; aspect-ratio: 16 / 10; object-position: 50% 20%; }

  /* 平板、手機本身就能開 LINE：QR 卡片換成「加入 LINE 好友」按鈕 */
  .line-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .line-qr-card { display: none; }
  .line-actions .line-add { display: inline-flex; }
  .line-mascot { height: 260px; }
}

@media (max-width: 768px) {
  .hero { gap: 28px; padding-block: 20px 40px; }
  .hero-text { gap: 16px; }
  /* 第二行「先免費到店看一次。」9 個字：窄手機（360 以下）也不會被擠成三行 */
  .hero-title { font-size: clamp(28px, calc((100vw - 40px) / 9.4), 36px); line-height: 1.32; letter-spacing: 0.5px; }
  .hero-lead { font-size: 15px; line-height: 1.8; }
  .hero-actions { gap: 10px; margin-top: 4px; }
  .hero-actions .btn { flex: 1 1 auto; padding: 0 14px; }
  .hero-actions .btn-primary { flex-grow: 1.4; }
  .hero-line { font-size: 15px; }
  .hero-media { padding: 0 0 26px 14px; }
  .hero-photo { border-radius: 20px; box-shadow: 0 14px 36px rgba(30, 37, 71, 0.14); }
  .hero-mascot { left: -8px; bottom: -6px; width: 118px; }
  .float-card { gap: 10px; padding: 10px 14px; border-radius: 14px; }
  .hero-badge { right: -6px; bottom: 34px; }
  .float-icon { width: 36px; height: 36px; }
  .float-text strong { font-size: 15px; }
  .float-text span { font-size: 12px; }

  .trust-list { grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 14px; padding: 24px 0; }
  .trust-icon { width: 44px; height: 44px; }
  .trust-text strong { font-size: 15px; }

  .situation-grid { gap: 14px; }
  .situation-card { --card-r: 18px; flex-direction: column; }
  .situation-media { position: static; flex: none; }
  .situation-photo { position: static; height: auto; aspect-ratio: 2 / 1; }
  .situation-photo-drain { object-position: 50% 38%; }
  .situation-body { gap: 6px; padding: 18px 18px 20px; }
  .situation-title { gap: 10px; font-size: 17px; }
  .situation-desc { font-size: 14px; line-height: 1.7; }
  .situation-link { padding-top: 4px; font-size: 14px; }

  .places-title { margin-bottom: 16px; }
  .pest-row { gap: 8px; }
  .pest-row-title { flex-basis: 100%; margin-bottom: 4px; font-size: 20px; font-weight: 900; }

  .inspection { margin-top: 40px; }
  .inspection-inner { gap: 28px; padding-block: 40px; }
  .inspection-text { gap: 14px; }
  .inspection-title { font-size: 24px; }
  .inspection-text .btn { align-self: stretch; }
  .inspection-photo { aspect-ratio: 4 / 3; border-radius: 20px; object-position: 50% 15%; }

  /* LINE：照手機設計稿，匠丸在右下角，文字和按鈕留出它的位置 */
  .line-band { margin-top: 40px; }
  .line-inner { position: relative; display: block; min-height: 230px; padding-block: 32px; }
  .line-text { position: relative; z-index: 1; gap: 10px; padding-bottom: 0; }
  .line-title { max-width: 230px; font-size: 24px; line-height: 1.4; }
  .line-lead { max-width: 220px; font-size: 15px; line-height: 1.7; }
  .line-actions { flex-direction: column; align-items: stretch; max-width: 220px; gap: 10px; }
  .line-actions .btn { min-height: 50px; padding: 0 16px; }
  .line-mascot { position: absolute; right: -6px; bottom: 0; width: min(138px, 34vw); height: auto; }
}