@charset "UTF-8";
/* =========================================================
   天元中醫診所｜全站共用樣式
   ---------------------------------------------------------
   1. 色彩與字級變數（改配色、字級請從這裡改）
   2. 基礎設定
   3. 版面工具（container、section、標題）
   4. 頁首與導覽列
   5. 按鈕
   6. 佔位圖
   7. 首頁各區塊
   8. 內頁共用元件（卡片、提醒框、步驟、表格）
   9. 頁尾、懸浮按鈕、回到頂端
   10. 響應式斷點（640px / 1024px）
   ========================================================= */

/* ---------- 1. 色彩與字級變數 ---------- */
:root {
  /* 色彩：白・綠・粉，取自診所文宣與短影音
     ※ 文宣原色 #81A867（鼠尾草綠）、#E8789E（粉）對比不足以當文字，
       只用於裝飾；文字用的綠、粉已加深至 WCAG AA 對比 4.5:1 以上 */
  --c-bg: #FFFCFA;          /* 暖白：頁面背景 */
  --c-surface: #FFFFFF;     /* 卡片底色 */
  --c-surface-2: #F8F2E7;   /* 淡米黃：區塊交錯底色 */
  --c-primary: #515F46;     /* 橄欖綠：主色、按鈕、標題（文宣 A 底條色） */
  --c-primary-strong: #434F3A;
  --c-on-primary: #FFFFFF;  /* 主色上的文字 */
  --c-accent: #B8456F;      /* 玫瑰粉：小標、標籤（文字用） */
  --c-pink: #E8789E;        /* 文宣粉：裝飾線、圖示（非文字） */
  --c-sage: #81A867;        /* 文宣鼠尾草綠：裝飾（非文字） */
  --c-sage-soft: #EEF4E9;   /* 淡綠：圖示底 */
  --c-green-text: #577643;  /* 草綠：小標文字（鼠尾草綠加深，白底 5.04／米黃底 4.62） */
  --c-text: #2B2B2B;        /* 深墨灰：內文 */
  --c-muted: #6B6264;       /* 灰：次要文字 */
  --c-line: #E9E1D3;        /* 淡米灰：分隔線 */
  --c-heading: #515F46;     /* 標題文字 */
  --c-deep: #515F46;        /* 深色區塊（頁尾、主視覺卡片） */
  --c-on-deep: #FFFFFF;
  --c-on-deep-muted: #E4E8DE;
  --c-on-deep-accent: #F9D3DF; /* 深綠底上的淡粉字 */
  --c-tbd-bg: rgba(184, 69, 111, .1);
  --c-ph: #F1ECEC;          /* 佔位圖底色 */
  --c-ph-line: #E6DADC;
  --c-today: #EEF4E9;       /* 門診表「今天」底色（淡綠） */
  --c-focus: #B8456F;
  --c-backdrop: rgba(30, 38, 28, .6);

  /* 字型（含 fallback） */
  --font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;
  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;

  /* 字級：內文至少 18px */
  --fs-base: 1.125rem;      /* 18px 內文 */
  --fs-sm: 1rem;            /* 16px 日期、標籤等輔助資訊 */
  --fs-lg: 1.25rem;         /* 20px 導言 */
  --fs-h3: 1.375rem;        /* 22px */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --lh: 1.8;

  /* 尺寸 */
  --container: 1140px;
  --gutter: 16px;
  --radius: 14px;
  --radius-sm: 8px;
  --header-h: 68px;
  --shadow: 0 1px 2px rgba(43, 43, 43, .04), 0 10px 28px rgba(81, 95, 70, .08);
}

/* 依客戶要求固定白底，不隨系統深色模式切換 */
:root { color-scheme: light; }

/* ---------- 2. 基礎設定 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 0px);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--c-heading);
  line-height: 1.4;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: .02em;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--c-primary); text-underline-offset: .2em; }
a:hover { color: var(--c-accent); }

/* 鍵盤操作的焦點框 */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  background: var(--c-primary);
  color: var(--c-on-primary);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--c-on-primary); }

.icon {
  width: 1.2em; height: 1.2em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 待填欄位：明顯標示，方便診所日後替換 */
.tbd {
  background: var(--c-tbd-bg);
  color: var(--c-accent);
  padding: 0 .3em;
  border-radius: 4px;
  font-weight: 500;
}

/* 捲動浮現動畫（main.js setupReveal 會自動加上 .reveal；沒有 JS 時內容照常顯示） */
.reveal { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal-up    { transform: translateY(32px); }
.reveal-left  { transform: translateY(32px); }  /* 手機上下排列，左右的也改成由下往上 */
.reveal-right { transform: translateY(32px); }
.reveal.is-visible { opacity: 1; transform: none; } /* 結束用 none，避免圖片文字模糊 */
@media (min-width: 1024px) {
  .reveal-left  { transform: translateX(-48px); }
  .reveal-right { transform: translateX(48px); }
  .reveal.is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 3. 版面工具 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow { max-width: 820px; }

.section { padding: 64px 0; }
.section-alt { background: var(--c-surface-2); }

.section-head { margin-bottom: 32px; }
.section-head h2 { margin-bottom: .3em; }
.section-head p { color: var(--c-muted); margin: 0; }
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
}

/* 小標（中英小字） */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-green-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .12em;
  margin: 0 0 8px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--c-sage);
}

.lead { font-size: var(--fs-lg); color: var(--c-muted); }

/* 帶箭頭的文字連結 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
  color: var(--c-primary);
}
.link-arrow .icon { transition: transform .2s; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* 菱形分隔線 */
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-pink);
  margin: 0 0 24px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}
.divider span {
  width: 8px; height: 8px;
  background: currentColor;
  transform: rotate(45deg);
}

/* ---------- 4. 頁首與導覽列 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  /* 預設不顯示底線，往下捲動後才出現（見 main.js setupHeaderScroll）
     ※ 底線用 box-shadow 畫，不用 border，避免多出 1px 高度在首頁頂端露出白線 */
  transition: box-shadow .25s;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--c-line), 0 4px 16px rgba(81, 95, 70, .06);
}

/* 首頁（body.has-hero）：頁首在頂端時透明、疊在主視覺上；捲動後恢復白底 */
.has-hero .site-header { transition: background-color .3s, box-shadow .25s; }
/* 選單展開時（.is-menu-open）也恢復白底，跟下拉選單連成一塊 */
.has-hero .site-header:not(.is-scrolled):not(.is-menu-open) { background: transparent; }
.has-hero .site-header:not(.is-scrolled):not(.is-menu-open) .brand,
.has-hero .site-header:not(.is-scrolled):not(.is-menu-open) .brand-name,
.has-hero .site-header:not(.is-scrolled):not(.is-menu-open) .nav-toggle {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.has-hero .site-header:not(.is-scrolled):not(.is-menu-open) .nav-toggle .icon {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4));
}
.has-hero .site-header:not(.is-scrolled):not(.is-menu-open) .nav-toggle:hover { background: rgba(255, 255, 255, .15); }
/* 主視覺往上延伸到頁首底下 */
.has-hero .hero { margin-top: calc(var(--header-h) * -1); }
.has-hero .hero-media { height: calc(300px + var(--header-h)); }
/* 只在頁首那一條加淡淡漸層，讓白字看得清楚（不是整張遮罩） */
.has-hero .hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--header-h) + 60px);
  background: linear-gradient(to bottom, rgba(24, 30, 20, .5), rgba(24, 30, 20, 0));
  z-index: 1;
  pointer-events: none;
}
.has-hero .hero-inner { z-index: 2; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: var(--c-heading);
  margin-right: auto;
}
.brand-mark { width: 36px; height: 36px; color: var(--c-heading); }
.brand-name {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .12em;
}

/* 手機版：漢堡選單 */
/* 漢堡選單：無底色、無外框，只留線條圖示 */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px; /* 圖示與右側邊界對齊 */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-heading);
  cursor: pointer;
  transition: color .3s, background-color .2s;
}
.nav-toggle:hover { background: rgba(81, 95, 70, .08); }
.nav-toggle .icon { width: 28px; height: 28px; stroke-width: 1.8; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* 注意：padding 放在內層 .nav-panel-inner，外層只控制 max-height，才能完全收合
   外層也不能有 border，否則收合時仍會露出 1px 的白線 */
.nav-panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--c-bg);
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, box-shadow .3s;
}
.nav-panel.is-open {
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  box-shadow: 0 1px 0 var(--c-line), var(--shadow);
}
.nav-panel-inner { padding: 8px var(--gutter) 20px; }

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 4px;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-base);
}
.nav-list a[aria-current] {
  color: var(--c-primary);
  font-weight: 700;
}

.header-actions { display: none; }

/* ---------- 5. 按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-sm { min-height: 44px; padding: 0 20px; font-size: var(--fs-sm); }

.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-strong); color: var(--c-on-primary); }

.btn-outline { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn-outline:hover { background: var(--c-primary); color: var(--c-on-primary); }

/* 深色底上的按鈕 */
.btn-light { background: var(--c-on-deep); color: #515F46; }
.btn-light:hover { background: #fff; color: #434F3A; }
.btn-ghost-light { border-color: rgba(255, 255, 255, .7); color: var(--c-on-deep); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); color: var(--c-on-deep); }

/* ---------- 6. 佔位圖 ---------- */
/* 換成真實照片時：把整個 .ph 換成 <img src="..." alt="..."> 即可 */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  aspect-ratio: 4 / 3;
  padding: 16px;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, var(--c-ph-line) 14px 15px),
    var(--c-ph);
  color: var(--c-muted);
  text-align: center;
}
.ph strong { color: var(--c-text); font-weight: 500; }
.ph small { font-size: var(--fs-sm); }

.media { border-radius: var(--radius); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 7. 首頁各區塊 ---------- */
/* 7-1 主視覺：左右兩張圖依序淡入，深綠文字卡在最後浮現
   手機：兩張圖並排在上方，文字卡在下方（不壓圖）
   桌機：兩張圖滿版各佔一半，文字卡置中疊在交界處 */
.hero { position: relative; overflow: hidden; }
.hero-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 300px;
}
.hero-pane {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: auto;
  opacity: 0;
  animation: heroPaneIn 1s ease forwards;
}
.hero-pane-left { animation-delay: .1s; --from: -24px; }
.hero-pane-right { animation-delay: .7s; --from: 24px; }
.hero-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 裁切焦點：左圖主體（拿針的手）偏左、右圖主體（秤藥）偏右 */
.hero-pane-left img { object-position: 32% 50%; }
.hero-pane-right img { object-position: 76% 50%; }
.hero-inner { position: relative; margin-top: -20px; padding-bottom: 24px; }
.hero-card {
  opacity: 0;
  animation: heroCardIn .8s ease 1.4s forwards;
}
@keyframes heroPaneIn {
  from { opacity: 0; transform: translateX(var(--from)) scale(1.04); }
  to { opacity: 1; transform: none; }
}
@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
/* 系統設定「減少動態效果」時直接顯示 */
@media (prefers-reduced-motion: reduce) {
  .hero-pane, .hero-card { opacity: 1; animation: none; }
}
.hero-card {
  max-width: 540px;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--c-deep);
  color: var(--c-on-deep);
  box-shadow: 0 18px 40px rgba(30, 38, 28, .22);
}
.hero-card .eyebrow { color: #EADFC8; } /* 米黃：深綠卡片上對比 5.17 */
.hero-card .eyebrow::before { background: #EADFC8; }
.hero-card h1 {
  color: var(--c-on-deep);
  font-size: var(--fs-h1);
  letter-spacing: .14em;
  margin-bottom: .2em;
}
.hero-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--c-on-deep-muted);
  margin-bottom: 24px;
}
.hero-actions { display: flex; gap: 12px; }
.hero-actions .btn { flex: 1; padding: 0 12px; }

/* 7-1b 短影音（YouTube Shorts，直式 9:16） */
.video-split { display: grid; gap: 32px; align-items: center; }
.video-frame {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 40px rgba(81, 95, 70, .18);
}
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-copy h2 { font-size: var(--fs-h2); }
.worry-list { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 10px; }
.worry-list li {
  position: relative;
  padding: 10px 16px 10px 48px;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
/* 粉色 × 標記（取代原文案的 ❌ 表情符號） */
.worry-list li::before,
.worry-list li::after {
  content: "";
  position: absolute;
  left: 22px; top: 50%;
  width: 12px; height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
}
.worry-list li::before { transform: translate(-50%, -50%) rotate(45deg); }
.worry-list li::after { transform: translate(-50%, -50%) rotate(-45deg); }
.video-tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-accent);
}

/* 7-1c 文宣輪播 + 點擊放大 */
.icon-flip { transform: scaleX(-1); }
.flyer-block { margin-top: 56px; }
/* 一次顯示一張；直式 A4 海報限制寬度，避免桌機上過大 */
.flyer-carousel { max-width: 440px; margin: 0 auto; }
.flyer-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  margin: 0;
  padding: 4px 4px 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.flyer-track::-webkit-scrollbar { display: none; }
.flyer-track > li { scroll-snap-align: start; }
.flyer-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: 0 12px 28px rgba(81, 95, 70, .14);
  cursor: zoom-in;
}
.flyer-item img { width: 100%; height: auto; transition: transform .4s ease; }
.flyer-item:hover img { transform: scale(1.03); }
.flyer-zoom {
  position: absolute;
  right: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.flyer-zoom .icon { width: 22px; height: 22px; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.carousel-count {
  margin: 0;
  min-width: 4em;
  text-align: center;
  font-family: var(--font-serif);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.carousel-count b { font-size: 1.5rem; color: var(--c-green-text); }
.carousel-controls[hidden] { display: none; }
.carousel-arrow:disabled { opacity: .35; cursor: default; background: var(--c-surface); color: var(--c-primary); }

/* 放大檢視（lightbox） */
body.has-lightbox { overflow: hidden; }
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox::backdrop { background: rgba(20, 24, 18, .88); }
.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 64px 16px;
}
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.lightbox-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--c-primary);
  cursor: pointer;
}
.lightbox-btn[hidden] { display: none; }
.lightbox-btn .icon { width: 24px; height: 24px; }
.lightbox-btn:hover { background: #fff; }
.lightbox-close { top: 12px; right: 12px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-count {
  position: absolute;
  left: 50%; bottom: 16px;
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-size: var(--fs-sm);
  letter-spacing: .1em;
}

/* 7-2 今日門診 */
.today-grid { max-width: 880px; }

.today-card {
  display: grid;
  gap: 24px;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow);
}
/* 右側電話預約 CTA（手機在下方） */
.today-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 20px;
  border-radius: var(--radius);
  background: var(--c-surface-2);
  text-align: center;
}
.today-cta-label { margin: 0; color: var(--c-green-text); font-size: var(--fs-sm); letter-spacing: .12em; }
.today-cta-phone {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--c-heading);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.today-cta-phone:hover { color: var(--c-accent); }
.today-cta .btn { width: 100%; max-width: 280px; margin-top: 10px; }
.today-date {
  font-size: var(--fs-h3);
  margin-bottom: 12px;
}
.today-sessions { list-style: none; padding: 0; margin: 0 0 12px; }
.today-sessions li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-line);
}
.today-sessions .slot { color: var(--c-muted); min-width: 4.5em; }
.today-sessions .time { font-size: 1.375rem; font-weight: 500; color: var(--c-heading); font-variant-numeric: tabular-nums; }
.today-sessions .note { width: 100%; color: var(--c-accent); font-size: var(--fs-sm); }
.today-closed {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--c-accent);
  margin: 4px 0 8px;
}
.today-next { color: var(--c-muted); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 14px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  margin-bottom: 8px;
}
.status-pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill.is-open { color: var(--c-primary); }


/* 7-3 圖文並排 */
.about-photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 36px rgba(81, 95, 70, .14); }
.about-photo img { width: 100%; height: auto; }
.split { display: grid; gap: 28px; align-items: center; }

/* 7-4 地圖與聯絡 */
.map-wrap { display: grid; gap: 24px; }
.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-ph);
}
/* 地圖高度需約 400px 以上，左上角才會顯示商家資訊卡 */
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }

.info-list { list-style: none; margin: 0 0 20px; padding: 0; }
.info-list li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
}
.info-list .icon { margin-top: .35em; color: var(--c-accent); }
.info-list .label { display: block; color: var(--c-muted); font-size: var(--fs-sm); }
/* 地址、電話連結：不加底線，滑過變色 */
.info-list a { font-weight: 500; text-decoration: none; }
.info-list a:hover { color: var(--c-accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 8. 各區塊共用元件 ---------- */
/* 區塊內的小標題 */
.sub-title {
  font-size: var(--fs-h3);
  margin: 56px 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--c-sage);
  line-height: 1.3;
}
.section-head + .sub-title { margin-top: 0; }

/* 草本線條點綴（極淡） */
.has-sprig { position: relative; overflow: hidden; }
.has-sprig > .container { position: relative; }
.sprig {
  position: absolute;
  right: -40px; top: 24px;
  width: 220px; height: 220px;
  color: var(--c-sage);
  opacity: .22;
  pointer-events: none;
}
.sprig-left { right: auto; left: -50px; top: auto; bottom: 0; transform: scaleX(-1); }

/* 中藥材線條插圖（images/deco-*.png）：用 mask 套網站的鼠尾草綠
   手機／平板：縮小放在區塊角落（區塊上下內距的空白處），部分超出畫面邊緣
   寬螢幕（1280px 以上）：放大放在內容左右兩側的空白 */
.has-deco { position: relative; overflow: hidden; }
.has-deco > .container { position: relative; z-index: 1; }
.deco {
  position: absolute;
  z-index: 0;
  background-color: var(--c-sage);
  -webkit-mask: var(--deco) center / contain no-repeat;
  mask: var(--deco) center / contain no-repeat;
  pointer-events: none;
}
.deco-goji    { --deco: url("../images/deco-goji.png");    aspect-ratio: 400 / 419; opacity: .3; }
.deco-ginkgo  { --deco: url("../images/deco-ginkgo.png");  aspect-ratio: 400 / 423; opacity: .5; }
.deco-ginseng { --deco: url("../images/deco-ginseng.png"); aspect-ratio: 400 / 353; opacity: .35; }
.deco-dates   { --deco: url("../images/deco-dates.png");   aspect-ratio: 400 / 258; opacity: .3; }

/* 手機：角落小插圖 */
.section-today .deco-ginkgo { width: 110px; left: -28px; top: 4px; transform: rotate(-18deg); }
.section-today .deco-goji   { width: 96px; right: -20px; bottom: 6px; transform: rotate(12deg); }
#services .deco-ginseng     { width: 140px; right: -34px; top: 18px; transform: rotate(-8deg); }
#weight .deco-dates         { width: 120px; right: -26px; top: 8px; transform: rotate(-12deg); }

/* 平板：角落插圖放大一點 */
@media (min-width: 640px) {
  .section-today .deco-ginkgo { width: 150px; left: -20px; top: 0; }
  .section-today .deco-goji   { width: 130px; right: -10px; bottom: 0; }
  #services .deco-ginseng     { width: 190px; right: -20px; top: 24px; }
  #weight .deco-dates         { width: 160px; right: -10px; top: 12px; }
}

/* 寬螢幕：放在內容兩側的空白 */
@media (min-width: 1280px) {
  .section-today .deco-ginkgo { width: 240px; left: 4%; top: 50%; transform: translateY(-50%) rotate(-12deg); }
  .section-today .deco-goji   { width: 200px; right: 5%; top: 50%; bottom: auto; transform: translateY(-50%) rotate(8deg); }
  #services .deco-ginseng     { width: 260px; right: 4%; top: 40px; transform: rotate(-6deg); }
  #weight .deco-dates         { width: 240px; left: 6%; right: auto; top: auto; bottom: 80px; transform: rotate(-10deg); }
}

.card {
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.card h3 { font-size: var(--fs-h3); }
.card-grid { display: grid; gap: 20px; }

/* 理念引言 */
.quote {
  position: relative;
  margin: 0;
  padding: 28px 24px 28px 28px;
  border-left: 3px solid var(--c-pink);
  background: var(--c-surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 2;
}
.quote p:last-child { margin: 0; }
.quote-sm { font-size: 1.125rem; padding: 18px 20px; }
.split .quote { margin-top: 24px; }

/* 提醒框（醫療聲明、待確認說明） */
.note {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-sage);
  color: var(--c-text);
}
.note p:last-child { margin: 0; }
.note-sm { font-size: var(--fs-sm); padding: 10px 14px; margin-top: 16px; }

/* 看診方式 */
.feature-list { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.feature-list li {
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}
.feature-list h4 { font-size: 1.25rem; margin-bottom: .3em; }
.feature-list p { margin: 0; color: var(--c-muted); }

/* 診療項目：門診項目卡片（只放名稱） */
.service-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-primary);
}
.service-num {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-sage);
}
.service-card h3 { font-size: 1.5rem; margin: 0; }

/* 常見調理項目：標籤（手機兩欄撐滿寬度） */
.care-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.care-tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--c-sage-soft);
  color: var(--c-primary);
  font-weight: 500;
  text-align: center;
}

/* 初診流程步驟 */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  counter-reset: step;
}
.steps li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 24px;
  counter-increment: step;
}
/* 步驟之間的連接線 */
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px; top: 52px; bottom: 0;
  width: 2px;
  background: var(--c-line);
}
.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
}
.steps h4 { font-size: 1.25rem; margin: 10px 0 4px; }
.steps p { margin: 0; color: var(--c-muted); }

/* 勾選清單 */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding: 12px 0 12px 36px;
  border-bottom: 1px solid var(--c-line);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 1.05em;
  width: 16px; height: 9px;
  border-left: 2.5px solid var(--c-sage);
  border-bottom: 2.5px solid var(--c-sage);
  transform: rotate(-45deg);
}

/* 表格（門診時間） */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--c-line); }
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
}
.table caption { text-align: left; padding: 0 0 12px; color: var(--c-muted); caption-side: top; }
.table th, .table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: middle;
}
.table thead th {
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-weight: 500;
  white-space: nowrap;
}
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }

/* 門診時間表 */
/* 固定欄寬：星期欄較窄，早／午／晚三欄等寬，時間才會對準欄位 */
.hours-table { table-layout: fixed; }
.hours-table thead th:first-child { width: 22%; }
.hours-table th, .hours-table td { text-align: center; padding: 12px 6px; }
.hours-table tbody th { font-weight: 500; white-space: nowrap; }
.hours-table .slot-time { display: block; font-size: var(--fs-sm); color: inherit; opacity: .85; font-weight: 400; }
.hours-table .t { display: inline-block; font-variant-numeric: tabular-nums; }
.hours-table .is-closed { color: var(--c-muted); }
.hours-table .cell-note { display: block; color: var(--c-accent); font-size: var(--fs-sm); line-height: 1.5; }
/* 今天：淡綠底＋左側綠線＋綠底白字「今天」標籤 */
.hours-table tr.is-today th, .hours-table tr.is-today td { background: var(--c-today); }
.hours-table tr.is-today th { box-shadow: inset 4px 0 0 var(--c-primary); }
.hours-table .today-badge {
  display: block;
  width: fit-content;
  margin: 4px auto 0;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.6;
}

/* 表格下方附註 */
.table-note { margin: 12px 0 0; color: var(--c-muted); font-size: var(--fs-sm); }

.map-wrap { margin-top: 48px; }

/* 地址連結：點擊開啟 Google 地圖導航（不加底線，滑過變色） */
.addr-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
}
.addr-link:hover { color: var(--c-accent); }

/* 案例回饋分享（獨立頁 reviews.html）：左圖右文，評論一次一則 */

.reviews-split { display: grid; background: var(--c-surface-2); }
.reviews-photo { position: relative; height: 240px; overflow: hidden; }
.reviews-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.reviews-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px var(--gutter) 56px;
}
.reviews-body h1 { font-size: var(--fs-h2); margin-bottom: 28px; }

/* 疊卡：目前這則在前，下一則在後面露出一角 */
.review-stack {
  position: relative;
  height: 400px;
  margin-right: 14px;   /* 預留後方卡片露出的空間 */
}
.review-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: var(--radius);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: 0 16px 32px rgba(81, 95, 70, .1);
  opacity: 0;
  visibility: hidden;
  transform: translate(28px, 28px);
  transition: transform .4s ease, opacity .4s ease, visibility .4s;
}
/* 右上角引號裝飾 */
.review-card::before {
  content: "“";
  position: absolute;
  top: 4px; right: 22px;
  font-family: var(--font-serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--c-sage);
  opacity: .45;
  pointer-events: none;
}
.review-card.is-active { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.review-card.is-next { opacity: 1; visibility: visible; transform: translate(14px, 14px); z-index: 1; }
.review-card.is-next > *, .review-card.is-next::before { opacity: 0; }

.review-who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 14px;
  padding-right: 48px;
}
.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--c-sage-soft);
  color: var(--c-primary);
  font-weight: 700;
}
.review-name { font-weight: 700; color: var(--c-heading); }
.review-source { font-size: var(--fs-sm); color: var(--c-muted); }

/* 評論內文：長文在卡片內捲動 */
.review-text {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding-right: 10px;
  overflow-y: auto;
  white-space: pre-line;
  overscroll-behavior: contain;
}
.review-text::-webkit-scrollbar { width: 6px; }
.review-text::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 99px; }

/* 左右箭頭 + 頁數 */
.review-controls { display: flex; align-items: center; gap: 16px; margin-top: 36px; }
.review-arrow,
.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--c-primary);
  background: var(--c-surface);
  color: var(--c-primary);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.review-arrow:hover,
.carousel-arrow:hover { background: var(--c-primary); color: var(--c-on-primary); }
.review-arrow .icon,
.carousel-arrow .icon { width: 22px; height: 22px; }
.review-count {
  margin: 0;
  min-width: 4em;
  text-align: center;
  font-family: var(--font-serif);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.review-count b { font-size: 1.5rem; color: var(--c-green-text); }

.review-more-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 16px;
  font-weight: 500;
  color: var(--c-green-text);
  text-decoration: none;
}
.review-more-link:hover { color: var(--c-primary); }

/* ---------- 9. 頁尾、手機底部按鈕、回到頂端 ---------- */
.site-footer {
  background: var(--c-deep);
  color: var(--c-on-deep-muted);
  padding: 56px 0 0;
  font-size: var(--fs-base);
}
.site-footer a { color: var(--c-on-deep); }
.site-footer a:hover { color: var(--c-on-deep-accent); }
/* 手機、平板（單欄）：頁尾內容置中；桌機三欄時改回靠左 */
.footer-grid { display: grid; gap: 36px; padding-bottom: 40px; text-align: center; }
.footer-intro { text-align: left; } /* 簡介在手機上靠左 */
/* 頁尾 Logo：與頁首 Logo 相同，點擊回到首頁頂端 */
.footer-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 12px; color: var(--c-on-deep); text-decoration: none; }
.footer-brand .brand-mark { color: var(--c-on-deep); }
.footer-brand .brand-name { color: inherit; transition: color .2s; }
.site-footer .footer-brand:hover { color: var(--c-on-deep-accent); }
.footer-title {
  font-size: 1.125rem;
  color: var(--c-on-deep);
  letter-spacing: .14em;
  margin-bottom: 14px;
}
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 8px; }
.footer-list a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }
.footer-dl { margin: 0; }
.footer-dl div { margin-bottom: 10px; }
.footer-dl dt { font-size: var(--fs-sm); color: var(--c-on-deep-muted); opacity: .85; }
.footer-dl dd { margin: 0; color: var(--c-on-deep); }
/* 頁尾地址（Google 導航）與電話：不加底線，滑過變色 */
.footer-link { text-decoration: none; }
.footer-link:hover { text-decoration: none; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 8px 24px;
  padding-top: 20px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--fs-sm);
}
.footer-bottom p { margin: 0; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* 懸浮電話按鈕：捲動後才浮現（堆疊順序：電話在下、回到頂端在上） */
.float-phone {
  position: fixed;
  right: var(--gutter);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border: 2px solid #fff; /* 白色外框：捲到深綠頁尾時才看得出按鈕輪廓 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s, background-color .2s;
}
.float-phone:hover { background: var(--c-primary-strong); color: var(--c-on-primary); }
.float-phone.is-visible { opacity: 1; visibility: visible; transform: none; }
.float-phone .icon { width: 24px; height: 24px; }

/* 回到頂端：捲動後才浮現 */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(16px + 56px + 12px + env(safe-area-inset-bottom));
  margin-right: 4px; /* 與下方 56px 電話按鈕置中對齊 */
  z-index: 80;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top .icon { width: 22px; height: 22px; }

/* ---------- 10. 響應式斷點 ---------- */
/* 平板 640px 以上 */
@media (min-width: 640px) {
  :root { --gutter: 24px; }
  .section { padding: 80px 0; }

  .hero-media { height: 420px; }
  .has-hero .hero-media { height: calc(420px + var(--header-h)); }
  .hero-card { padding: 36px 36px; }
  .hero-actions .btn { flex: none; padding: 0 30px; }


  .card-grid { grid-template-columns: repeat(2, 1fr); }


  .hours-table th, .hours-table td { padding: 14px 12px; }
  .sprig { width: 300px; height: 300px; }

  .service-list { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .today-card { grid-template-columns: 1fr 260px; gap: 32px; padding: 32px; align-items: stretch; }
  .service-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; }
  .care-tags { grid-template-columns: repeat(3, 1fr); }
  .reviews-photo { height: 340px; }
  .reviews-body { padding: 56px 40px 64px; }
  .review-stack { height: 380px; }
  .review-card { padding: 32px 32px 28px; }
}

/* 桌機 1024px 以上 */
@media (min-width: 1024px) {
  :root { --header-h: 80px; }

  .float-phone { bottom: 24px; right: 24px; }
  .to-top { bottom: calc(24px + 56px + 12px); right: 24px; }

  /* 導覽列改為橫向 */
  .nav-toggle { display: none; }
  .nav-panel {
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
  }
  .nav-panel-inner { padding: 0; }
  .nav-list { display: flex; gap: 2px; }
  .nav-list a {
    min-height: 44px;
    padding: 0 10px;
    border-bottom: 0;
    font-size: 1.0625rem;
    position: relative;
  }
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: 4px;
    height: 2px;
    background: var(--c-sage);   /* 白底頁首：鼠尾草綠底線 */
    transform: scaleX(0);
    transition: transform .2s;
  }
  .nav-list a:hover { color: var(--c-primary); }
  /* 首頁頂端透明頁首（疊在照片上）：底線改米黃，文字維持白色 */
  .has-hero .site-header:not(.is-scrolled):not(.is-menu-open) .nav-list a::after { background: #EADFC8; }
  .has-hero .site-header:not(.is-scrolled):not(.is-menu-open) .nav-list a:hover { color: #fff; }
  .nav-list a:hover::after, .nav-list a[aria-current]::after { transform: scaleX(1); }

  .header-actions { display: flex; align-items: center; gap: 12px; }

  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(560px, 82vh, 760px);
  }
  .hero-media { position: absolute; inset: 0; height: auto; }
  .has-hero .hero-media { height: auto; }
  .has-hero .hero { min-height: calc(clamp(560px, 82vh, 760px) + var(--header-h)); padding-top: var(--header-h); }
  /* 透明頁首時：選單文字改白色 */
  .has-hero .site-header:not(.is-scrolled):not(.is-menu-open) .nav-list a {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
  }
  .hero-inner { display: flex; justify-content: center; margin-top: 0; padding-bottom: 0; }
  .hero-card { text-align: center; }
  .hero-card .eyebrow { justify-content: center; }
  .hero-actions { justify-content: center; }


  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .split-reverse > :first-child { order: 2; }
  .split-top { align-items: start; }
  .video-split { grid-template-columns: 360px 1fr; gap: 64px; }
  .care-tags { grid-template-columns: repeat(6, 1fr); }
  .lightbox-stage { padding: 56px 96px; }
  .lightbox-prev { left: 24px; }
  .lightbox-next { right: 24px; }
  .video-frame { max-width: none; margin: 0; }

  .reviews-split { grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-h)); }
  .reviews-photo { height: auto; }
  .reviews-body { padding: 72px max(24px, calc((100vw - var(--container)) / 2 + 24px)) 72px 64px; }
  .review-stack { max-width: 580px; height: 400px; }
  .sprig { width: 380px; height: 380px; right: -20px; }
  .sprig-left { left: -40px; right: auto; }

  .feature-list { grid-template-columns: repeat(3, 1fr); }

  .map-wrap { grid-template-columns: 3fr 2fr; gap: 40px; align-items: start; }
  .map-frame iframe { height: 460px; }


  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; gap: 48px; text-align: left; }

  /* 步驟改橫向 */
  .steps-row { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; } /* 步驟數自動平均分配 */
  .steps-row li { grid-template-columns: 1fr; align-content: start; text-align: center; justify-items: center; padding-bottom: 0; }
  .steps-row li:not(:last-child)::after { left: calc(50% + 34px); right: calc(-50% + 18px); top: 25px; bottom: auto; width: auto; height: 2px; }
  .steps-row h3 { margin-top: 4px; }
}

/* 寬螢幕：header 顯示完整電話號碼 */
@media (min-width: 1200px) {
  .nav-list a { padding: 0 12px; }
}