/* ============================================================
   藝品廣告 ARTCRAFT — 全站共用樣式
   單一設計系統：所有頁面共用此檔。配色以 :root 變數管理。
   文青風（literary / editorial）— 溫潤、留白、手感、明體標題。
   暖米紙底 × 陶土橘 × 橄欖綠，柔和陰影、細線分隔。
   ============================================================ */

:root {
  /* 設計師統一色票（單一權威色票，全站共用）— 設計師 2026/06 收斂值 */
  --brown:       #35120B;
  --brown-2:     #6B2E1E;
  --cream:       #F7EFE3;
  --sand:        #EFE1CE;
  --beige:       #F7EFE3;
  --orange:      #F4512C;
  --orange-hover:#D94122;
  --card:        #FFFDF8;   /* 統一卡片背景 */
  --hero-grad:   linear-gradient(120deg,#35120B 0%,#6B2E1E 100%); /* 全站深色 hero 統一漸層 */

  /* 品牌色 — 在地好康生活圈：暖米底 × 磚橘（設計師統一色票） */
  --ink:        #35120B;   /* 主深色：深咖（標題 / 深底）— 設計師統一 */
  --ink-soft:   #6F5A4F;
  --accent:     #F4512C;   /* 主強調色 / 主 CTA — 設計師統一 */
  --accent-dark:#D94122;   /* hover */
  --accent-nav: #F4512C;   /* active nav 專用（與主色一致） */
  --accent-soft:#FFE1D7;   /* 橘色淺底（icon 圓底 / 標籤） */
  --trust:      #7c8769;   /* 輔助色：橄欖綠 */
  --trust-dark: #5d6750;
  --trust-soft: #e7eade;

  /* 中性 — 暖米色（降低灰暗感） */
  --bg:         #F7EFE3;   /* 米紙底（body） */
  --bg-soft:    #EFE1CE;   /* 分段淺米色區塊 */
  --bg-dark:    #35120B;   /* 深色區塊 */
  --text:       #2B1712;   /* 文字主色 */
  --muted:      #6F5A4F;
  --line:       #e4dccc;
  --line-dark:  #4f483f;

  /* 形狀 / 陰影 — 統一卡片陰影 */
  --radius:     8px;
  --radius-sm:  6px;
  --radius-lg:  10px;
  --shadow:     0 14px 36px rgba(43,20,14,.10);  /* 設計師統一卡片陰影 */
  --shadow-lg:  0 18px 44px rgba(43,20,14,.14);
  --card-border: 1px solid rgba(43,20,14,.06);

  /* 版面 — 多留白 */
  --container:  1120px;
  --gap:        clamp(1.4rem, 3vw, 2.6rem);
  --section-y:  clamp(2rem, 4.5vw, 3.75rem);

  --ff:      "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  --ff-serif:"Noto Serif TC", "Songti TC", "PMingLiU", Georgia, "Times New Roman", serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff);
  color: var(--text);
  background: var(--bg);
  line-height: 1.8;
  font-size: clamp(16px, 0.6vw + 1rem, 19px);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  line-height: 1.32; color: var(--ink); margin: 0 0 .55em;
  font-weight: 700; letter-spacing: .01em;
}
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.2rem); }
.section { padding: var(--section-y) 0; }
.section--tight { padding: clamp(1.1rem, 2.5vw, 1.7rem) 0; }
/* 收緊相鄰區塊上緣留白，避免兩個同 padding 區段堆疊造成版面斷層 */
.section--tight-top { padding-top: clamp(1.2rem, 2.5vw, 1.9rem); }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--bg-dark); color: #ece4d6; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fbf6ee; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

.section__head { max-width: 720px; margin: 0 auto clamp(2.4rem,5vw,3.4rem); text-align: center; }
.section__head--left { margin-left: 0; text-align: left; }
.eyebrow {
  display: inline-block; font-family: var(--ff); font-size: clamp(.9rem, .35vw + .82rem, 1rem); font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: 1.05rem;
}
.eyebrow::before { content: "— "; opacity: .6; }
.section--dark .eyebrow { color: #e2b6a0; }
.section__title { font-size: clamp(1.8rem, 3.6vw, 2.75rem); font-weight: 700; }
.section__lead { color: var(--text); font-size: clamp(1.12rem, .42vw + 1.04rem, 1.24rem); margin-top: 1rem; line-height: 2.1; }
.section--dark .section__lead { color: #f3ebe1; }

/* 數字編號 eyebrow（服務頁 01–06）：移除破折號，放大為清楚的 overline 編號 */
.eyebrow--number { font-size: clamp(1.28rem, .8vw + 1.05rem, 1.45rem); font-weight: 700; letter-spacing: .14em; margin-bottom: 1.1rem; }
.eyebrow--number::before { content: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .8em 1.75em; border-radius: var(--radius-sm); font-family: var(--ff); font-weight: 600; font-size: clamp(1.06rem, .5vw + .94rem, 1.16rem);
  border: 1px solid transparent; cursor: pointer; letter-spacing: .04em;
  transition: transform .18s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
  text-align: center; line-height: 1.5; min-height: 44px;
}
.btn:hover { transform: translateY(-2px); }
/* 鍵盤可及性：統一 focus-visible 輪廓（不影響滑鼠操作） */
.btn:focus-visible, .pill:focus-visible, .nav__links a:focus-visible,
.footer__social a:focus-visible, .work:focus-visible, .map-card__info .btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.section--dark .footer__social a:focus-visible, .footer__social a:focus-visible { outline-color: #e7b79f; }
.btn--primary { background: var(--accent); color: #fdf8f1; box-shadow: 0 10px 26px rgba(143,80,56,.26); padding: .8em 1.85em; font-size: clamp(1.08rem, 0.5vw + 0.96rem, 1.18rem); }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.section--dark .btn--ghost { color: #fbf6ee; border-color: rgba(251,246,238,.5); }
.btn--ghost:hover { background: var(--accent); color: #fdf8f1; border-color: var(--accent); }
.section--dark .btn--ghost:hover { background: #fbf6ee; color: var(--ink); }
.btn--light { background: #fbf6ee; color: var(--ink); }
.btn--light:hover { background: var(--accent); color: #fdf8f1; }
.btn--line { background: #06c755; color: #fff; box-shadow: 0 8px 20px rgba(6,199,85,.22); }
.btn--line:hover { background: #05b14c; }
.btn--lg { padding: 1em 2.4em; font-size: clamp(1.14rem, 1.2vw + 0.88rem, 1.32rem); }
.btn--block { display: flex; width: 100%; }

.btn-note { display: block; font-size: clamp(.85rem, .3vw + .8rem, .94rem); color: var(--ink-soft); margin-top: .55rem; }
.section--dark .btn-note { color: #cabfac; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(250,246,238,.9);
  backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: clamp(1rem, 1.6vw, 1.5rem); min-height: 64px; }
.nav__logo { display: flex; align-items: center; gap: .6rem; font-family: var(--ff-serif); font-weight: 700; font-size: 1.4rem; color: var(--ink); letter-spacing: .03em; white-space: nowrap; flex: 0 0 auto; }
.nav__logo .mark {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--accent-soft); font-family: var(--ff-serif); font-weight: 700; font-size: 1.14rem; flex: none;
}
/* YUBI 品牌：左側 LOGO 圖標 + 文字字標（全站共用） */
.nav__logo-img { height: 2rem; width: auto; display: block; flex: none; }
.nav__logo-text { font-family: var(--ff-serif); font-weight: 700; letter-spacing: .16em; }
.nav__links { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(.5rem, 1vw, 1.2rem); flex: 0 1 auto; min-width: 0; }
.nav__links li { flex: 0 0 auto; }
.nav__links a { display: inline-block; font-weight: 600; font-size: 14px; color: var(--ink); padding: .6rem .5rem; position: relative; letter-spacing: .02em; white-space: nowrap; }
.nav__links a.is-active { padding-bottom: .6rem; }
.nav__links a:hover { color: var(--accent-dark); }
/* 文字色僅給「一般 nav 連結」的 active 狀態（淺色 header 上的橘字+底線）。
   CTA 膠囊按鈕 (.btn) 排除在外：它是橘底，若套上橘字會變「橘底橘字」整顆看不見文字，
   故用 :not(.btn) 從根本避免，CTA 的字色一律由 .btn--primary 的淺色決定。 */
.nav__links a.is-active:not(.btn) { color: var(--accent-nav); }
.nav__links a.is-active:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent-nav); border-radius: 2px;
}
.nav__cta { margin-left: clamp(.6rem, 1.5vw, 1.4rem); }
.nav__cta .btn { padding: .7em 1.5em; }
.nav__toggle { display: none; }
.nav__burger { display: none; }

/* 行動版選單（純 CSS checkbox hack） */
@media (max-width: 1024px) {
  .nav__burger {
    display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer;
    align-items: center;
  }
  .nav__burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
  .nav__links {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: .4rem 0;
    box-shadow: var(--shadow); max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .nav__links a { padding: .85rem clamp(1.1rem,4vw,2rem); border-top: 1px solid var(--line); }
  .nav__links a.is-active::after { display: none; }
  .nav__links .nav__cta { margin: .6rem clamp(1.1rem,4vw,2rem); }
  .nav__cta .btn { padding: .8em 1.6em; }
  .nav__toggle:checked ~ .nav__links { max-height: 560px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; color: #fbf6ee; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(125% 120% at 80% 16%, rgba(28,21,15,.45) 0%, rgba(28,21,15,.1) 42%, transparent 60%),
    linear-gradient(90deg, #2B241E 0%, rgba(43,36,30,.78) 55%, rgba(80,48,35,.55) 100%);
}
.hero__inner { padding: clamp(3rem, 7vw, 5.6rem) 0; max-width: 760px; }
.hero__title { color: #fdfaf4; font-size: clamp(1.75rem, 3.6vw, 2.6rem); margin-bottom: .4em; line-height: 1.22; font-weight: 700; letter-spacing: .02em; text-shadow: 0 4px 24px rgba(0,0,0,.62); }
.hero__title .hl { color: #e7b79f; font-style: normal; }
.hero__sub { font-family: var(--ff); font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: #fcf8f1; margin-bottom: 1.6rem; max-width: 600px; line-height: 1.75; text-shadow: 0 4px 20px rgba(0,0,0,.78); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.hero__proof { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 3vw, 2.2rem); margin-top: 2.6rem; }
.hero__proof .item { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: #fbf6ee; font-size: clamp(1.14rem, 1.9vw, 1.3rem); text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.hero__proof .item .ico { display: inline-flex; align-items: center; justify-content: center; width: 2.4em; height: 2.4em; flex: 0 0 auto; color: #e7b79f; background: rgba(231,183,159,.14); border: 1px solid rgba(231,183,159,.4); border-radius: 50%; backdrop-filter: blur(2px); }
.hero__proof .item .ico svg { width: 1.3em; height: 1.3em; display: block; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)); }

/* 左文右圖 Hero（首頁）：深咖漸層底 + 右側圓角主圖 */
.hero--split { color: #fbf6ee; }
.hero--split::after {
  background:
    radial-gradient(120% 120% at 92% 12%, rgba(201,107,69,.30) 0%, transparent 52%),
    linear-gradient(110deg, #2A211C 0%, #34271F 46%, #4a3325 100%);
}
.hero--split .hero__grid {
  display: grid; grid-template-columns: minmax(0, 48%) 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.hero--split .hero__inner { padding: 0; max-width: none; }
.hero--split .hero__art img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center;
  border-radius: var(--radius-lg); box-shadow: 0 24px 50px rgba(0,0,0,.42);
}
@media (max-width: 860px) {
  .hero--split .hero__grid { grid-template-columns: 1fr; }
  .hero--split .hero__art { order: -1; }
}

/* 首頁 Hero 下方小信任列（淺底，深色可讀文字） */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.4rem, 4vw, 3rem);
  border: 1px solid var(--line); background: #fffdf8; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 3vw, 2rem); }
.trust-strip .s { text-align: center; }
.trust-strip .s b { display: block; font-family: var(--ff-serif); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--accent-dark); line-height: 1.15; }
.trust-strip .s span { display: block; margin-top: .2rem; font-size: clamp(.96rem, .4vw + .9rem, 1.06rem); color: var(--muted); }

/* 子頁小 Hero（無大圖） */
.page-hero { background: var(--ink); color: #fbf6ee; padding: clamp(2.4rem,5vw,3.8rem) 0; position: relative; isolation: isolate; overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; right: -8%; top: -40%; width: 56%; height: 180%; z-index: -1;
  background: radial-gradient(circle at center, rgba(181,106,79,.4), transparent 64%);
}
.page-hero h1 { color: #fdfaf4; font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: .45em; text-shadow: 0 3px 18px rgba(0,0,0,.45); }
.page-hero p { font-family: var(--ff); color: #fdfaf3; font-size: clamp(1.18rem, 2.2vw, 1.4rem); max-width: 680px; margin: 0; line-height: 2.1; text-shadow: 0 3px 14px rgba(0,0,0,.5); }
.page-hero .eyebrow { color: #f1e3d8; }

/* ---------- Grids / Cards ---------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.card {
  background: #fffdf8; border: var(--card-border); border-radius: var(--radius);
  padding: clamp(2rem, 3.4vw, 2.7rem); box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex; flex-direction: column; height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-soft); }
/* 方案卡：CTA 一律對齊卡片底部，讓同排卡片按鈕齊平（用 flex，不寫死高度） */
.card > .mt-3 { margin-top: auto; }
.card__ico {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: #e6d2bf; color: var(--accent-dark); font-size: 1.6rem; margin-bottom: 1.35rem;
}
.card h3 { font-size: clamp(1.34rem, 1.5vw + 1.04rem, 1.52rem); line-height: 1.4; margin-bottom: .7em; }
.card p { color: var(--text); font-size: clamp(1.16rem, .5vw + 1.06rem, 1.28rem); line-height: 1.95; margin-bottom: 0; }
.card__ico svg { width: 28px; height: 28px; }

/* 服務卡：左上角編號徽章 */
.svc-card { position: relative; overflow: hidden; padding: clamp(2rem, 3.4vw, 2.7rem); }
.svc-card h3 { font-size: clamp(1.46rem, 1.7vw + 1.1rem, 1.66rem); }
.svc-card .num {
  font-family: var(--ff-serif); font-size: clamp(1.14rem, 1vw + .95rem, 1.28rem); font-weight: 700; letter-spacing: .12em; color: var(--accent);
  display: inline-block; margin-bottom: .85rem;
}
.svc-card .tags { display: flex; flex-wrap: wrap; gap: clamp(.65rem, 1vw, .85rem); margin-top: clamp(1.4rem, 2vw, 1.8rem); }
.svc-card .tags span { font-size: clamp(1.12rem, .5vw + 1.04rem, 1.24rem); font-weight: 700; line-height: 1.7; color: #2d3429; background: var(--trust-soft); padding: .78em 1.55em; border-radius: var(--radius-sm); }

/* 客群分流卡 */
.path-card { display: flex; flex-direction: column; }
.path-card .tag { align-self: flex-start; background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; font-size: .9rem; padding: .46em 1.05em; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.path-card .btn { margin-top: auto; }

/* ---------- Split (圖文) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 5.5vw, 4.8rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.split--top { align-items: start; }
/* 聯絡頁左右欄非對稱比例 */
.split--contact { grid-template-columns: minmax(0,.85fr) minmax(0,1.35fr); }
/* 服務頁圖文段落：拉高內文字級與行高（共用，僅 .split 內直接段落） */
.split > div { max-width: 620px; }
.split > div > h3 { font-size: clamp(1.56rem, 1.4vw + 1.15rem, 1.85rem); margin-bottom: .6em; }
.split > div > p { font-size: clamp(1.16rem, .6vw + 1.08rem, 1.32rem); line-height: 2.1; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } .split--contact { grid-template-columns: 1fr; } }

/* ---------- Logo strip（合作品牌） ---------- */
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.2rem,4vw,2.8rem); }
.logos .logo {
  font-family: var(--ff-serif); font-weight: 600; font-size: clamp(1.05rem,2.4vw,1.38rem); color: var(--ink); opacity: .4;
  letter-spacing: .04em; transition: opacity .2s ease; padding: .3em 0;
}
.logos .logo:hover { opacity: .8; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: var(--gap); counter-reset: step; }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } .steps--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 561px) and (max-width: 1079px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: clamp(2.2rem, 3.4vw, 2.8rem); background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius); }
.section--dark .step { background: rgba(255,253,248,.08); border-color: var(--line-dark); }
.step::before {
  counter-increment: step; content: counter(step,decimal-leading-zero);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark); font-family: var(--ff-serif); font-weight: 700; margin-bottom: 1rem; font-size: 1rem;
}
.section--dark .step::before { background: rgba(231,183,159,.16); color: #e7b79f; }
.step h3 { font-size: clamp(1.42rem, 1.4vw + 1.14rem, 1.66rem); margin-bottom: .7em; }
.step p { color: var(--text); font-size: clamp(1.14rem, .5vw + 1.05rem, 1.26rem); line-height: 2.15; margin: 0; }
.section--dark .step h3 { color: #fdfaf4; }
.section--dark .step p { color: #faf6ee; }

/* ---------- Work / Case cards ---------- */
.work { position: relative; display: flex; flex-direction: column; background: #fffdf8; border: var(--card-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .22s ease; }
.work:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.work img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.work__body { padding: clamp(1.9rem, 3.4vw, 2.4rem) clamp(1.7rem,3.4vw,2.1rem); display: flex; flex-direction: column; flex: 1; }
/* 同排卡片下方 pill 標籤對齊底部，視覺節奏一致（用 flex，不寫死高度） */
.work__body .pill-row { margin-top: auto; margin-bottom: 0; }
.work__cat { font-family: var(--ff); font-size: clamp(1.1rem, .5vw + 1.02rem, 1.18rem); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #2d3429; }
.work__body h3 { font-size: clamp(1.34rem, 1.4vw + 1.02rem, 1.52rem); line-height: 1.4; margin: 0.6rem 0 0.8rem; }
.work__body p { color: var(--text); margin: 0 0 1rem; font-size: clamp(1.14rem, .4vw + 1.05rem, 1.22rem); line-height: 2.05; }
.work__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-top: auto; padding-top: 1.7rem; border-top: 1px solid var(--line); }
.work__metrics b { display: block; font-family: var(--ff-serif); color: var(--accent-dark); font-size: clamp(1.36rem, 2vw, 1.58rem); font-weight: 700; line-height: 1.2; }
.work__metrics span { display: block; margin-top: 0.25rem; font-size: clamp(1.12rem, 0.4vw + 1.04rem, 1.2rem); color: #5a5249; }

/* ---------- Team ---------- */
.member { text-align: center; }
.member img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 1rem; }
.member h3 { font-size: 1.15rem; margin-bottom: .1rem; }
.member .role { color: var(--accent-dark); font-weight: 600; font-size: 1rem; }
.member p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.85; margin-top: .5rem; }
/* 通用職稱樣式（團隊卡用 .card 時亦適用） */
.role { color: var(--accent-dark); font-weight: 600; font-size: clamp(1.08rem, .5vw + .98rem, 1.18rem); letter-spacing: .01em; }
.card.text-center .quote__who { justify-content: center; margin-bottom: .35rem; }
.card.text-center .role { margin-bottom: clamp(.55rem, 1.2vw, .8rem); line-height: 1.6; }
/* 團隊卡姓名縮寫：深底淺字、加大，提高對比（不影響評價區 .av） */
.av--team {
  width: 64px; height: 64px; background: var(--trust); color: #faf6ee;
  font-size: clamp(1.6rem, 2vw, 1.8rem); box-shadow: 0 6px 16px rgba(93,103,80,.28);
}

/* ---------- Testimonials ---------- */
.quote { background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(2rem, 3.2vw, 2.6rem); box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; height: 100%; }
/* 評價署名對齊卡片底部，讓同排卡片署名齊平 */
.quote .quote__who { margin-top: auto; }
.quote__stars { color: var(--accent); letter-spacing: .24em; margin-bottom: .8rem; font-size: 1.05rem; }
.quote p { font-family: var(--ff-serif); font-size: clamp(1.22rem, .48vw + 1.1rem, 1.32rem); color: var(--ink); line-height: 2.15; }
.quote__who { display: flex; align-items: center; gap: .85rem; margin-top: 1.4rem; }
.quote__who .av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--trust-soft); color: var(--trust-dark); font-family: var(--ff-serif); font-weight: 700; flex: none; }
.quote__who-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.quote__who b { display: block; color: var(--ink); font-family: var(--ff-serif); font-weight: 700; font-size: clamp(1.24rem, .5vw + 1.1rem, 1.34rem); }
.quote__who span { color: #5a5249; font-size: clamp(1.1rem, .4vw + 1.02rem, 1.18rem); }

/* ---------- Forms ---------- */
.form { background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.8rem); box-shadow: var(--shadow); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.3rem); }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: clamp(1.02rem, 1vw + .88rem, 1.12rem); line-height: 1.4; color: var(--ink); letter-spacing: .03em; }
.field label .req { color: var(--accent-dark); }
.field input, .field select, .field textarea {
  font: inherit; min-height: 44px; padding: 0 14px; border: 1px solid #D8C1AF; border-radius: 2px;
  background: #FFFDF8; color: var(--text); transition: border-color .15s, background .15s, box-shadow .15s;
}
.field textarea { padding: 12px 14px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; box-shadow: 0 0 0 3px rgba(217,106,61,.16); border-color: var(--accent); background: #fffdf8;
}
.field textarea { resize: vertical; min-height: 160px; }
.field textarea::placeholder, .field input::placeholder { color: #9A8B7D; }
.form-note { font-size: clamp(.95rem, .25vw + .9rem, 1.02rem); line-height: 1.75; color: var(--muted); margin-top: .3rem; }
@media (max-width: 560px) { .form__grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg,#2A1B15 0%,#7A3B2A 100%); color: #f1ebe0; border-radius: var(--radius); padding: clamp(2.6rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3rem); text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 80% 18%, rgba(181,106,79,.34), transparent 56%), radial-gradient(circle at 12% 92%, rgba(124,135,105,.26), transparent 56%); }
.cta-band h2 { color: #fdfaf4; font-size: clamp(1.85rem, 3.8vw, 2.65rem); max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-band p { font-family: var(--ff); color: #f5eee2; font-size: clamp(1.14rem, .45vw + 1.05rem, 1.26rem); max-width: 600px; margin: 0 auto 1.9rem; line-height: 2.05; }
.cta-band .hero__cta, .cta-band .btn-row { justify-content: center; display: flex; flex-wrap: wrap; gap: .9rem; }
.cta-band .btn--primary { padding: 1.08em 2.5em; font-size: clamp(1.16rem, .65vw + 1.04rem, 1.32rem); }
.cta-band .btn--lg { padding: 1em 2.4em; }
.cta-band .btn--ghost { color: #fbf6ee; border-color: rgba(251,246,238,.6); }
.cta-band .btn--ghost:hover { background: #fbf6ee; color: var(--ink); border-color: #fbf6ee; }

/* ---------- Pills / list ---------- */
.checklist li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: clamp(1.1rem, 1.4vw, 1.5rem); color: var(--text); font-size: clamp(1.14rem, .5vw + 1.08rem, 1.26rem); line-height: 2.05; }
.checklist li strong { color: var(--ink); }
.checklist li::before { content: "✦"; color: var(--accent); font-weight: 700; flex: none; }
.section--dark .checklist li { color: #ddd5c5; }
.section--dark .checklist li::before { color: #e7b79f; }

.pill-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; align-items: center; }
.pill { display: inline-flex; align-items: center; background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; font-size: clamp(1.12rem, .4vw + 1.04rem, 1.22rem); line-height: 1.6; padding: .78em 1.6em; border-radius: var(--radius-sm); min-height: 44px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.pill:hover { background: var(--accent); color: #fdf8f1; box-shadow: 0 4px 12px rgba(181,106,79,.24); }

/* 提示框 */
.notice {
  background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: var(--radius-sm);
  padding: .9rem 1.1rem; color: var(--accent-dark); font-size: clamp(.92rem, .3vw + .86rem, 1rem); font-weight: 500;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-dark); color: #faf6ee; padding: clamp(3.6rem,6vw,5.2rem) 0 clamp(2.6rem, 5vw, 3.6rem); line-height: 2; font-size: clamp(1.16rem, .5vw + 1.06rem, 1.26rem); font-weight: 500; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: clamp(2.4rem, 5vw, 4.5rem); margin-bottom: 2.6rem; }
.footer__brand .nav__logo { color: #fdfaf4; margin-bottom: .9rem; }
.footer__brand .nav__logo .mark { background: var(--accent); color: #fdf8f1; }
.footer__brand p { color: #faf6ee; max-width: 340px; line-height: 2; font-size: clamp(1.14rem, .4vw + 1.05rem, 1.22rem); }
.site-footer h4 { color: #fdfaf4; font-size: clamp(1.44rem, .8vw + 1.26rem, 1.58rem); margin-bottom: clamp(1.35rem, 2vw, 1.6rem); }
.site-footer li { margin-bottom: clamp(1.4rem, 2.2vw, 1.7rem); line-height: 2.1; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: #e7b79f; }
.footer__map { position: relative; width: 100%; max-width: var(--container); margin: 0 auto 1rem; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.footer__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Map card (聯絡頁地圖：品牌化地圖插圖 + 疊加資訊卡) ---------- */
.map-card {
  position: relative; width: 100%; max-width: var(--container); margin: 0 auto;
  min-height: clamp(420px, 46vw, 480px); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: var(--bg-soft);
  display: flex; align-items: flex-end;
}
.map-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.map-card__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, rgba(250,246,238,.92) 0%, rgba(250,246,238,.55) 38%, rgba(250,246,238,.08) 64%, rgba(54,49,42,.06) 100%); }
.map-card__info {
  position: relative; z-index: 2; margin: clamp(1.2rem, 3vw, 2rem);
  max-width: min(360px, 82%); padding: clamp(1.3rem, 2.4vw, 1.8rem);
  background: rgba(253,250,244,.9); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.map-card__info h3 { margin: .35rem 0 .6rem; color: var(--ink); }
.map-card__info p { font-family: var(--ff); margin: 0 0 .45rem; color: var(--ink-soft); font-size: clamp(1.1rem, .4vw + 1.02rem, 1.22rem); line-height: 1.95; }
.map-card__addr { font-weight: 600; color: var(--ink); font-size: clamp(1.14rem, .4vw + 1.04rem, 1.26rem); }
.map-card__info .btn { margin-top: .9rem; padding: .7em 1.3em; }
@media (max-width: 560px) {
  .map-card { min-height: 0; }
  .map-card__info { max-width: 100%; margin: clamp(.9rem, 4vw, 1.2rem); }
}

.footer__bottom { border-top: 1px solid var(--line-dark); padding-top: 1.8rem; padding-bottom: clamp(.6rem, 3vw, 1.6rem); display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; color: #faf6ee; font-weight: 500; font-size: clamp(1.1rem, .4vw + 1.04rem, 1.18rem); }
.footer__social { display: flex; gap: clamp(.8rem, 2vw, 1.2rem); }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.10); color: #FFF8EE; font-weight: 600; font-size: 1rem; transition: .2s; }
.footer__social a:hover { background: var(--accent); color: #fdf8f1; transform: translateY(-2px); }
/* 社群 icon：SVG 相對父圓尺寸縮放（圓徑 clamp 48–56px），保留內距、繼承顏色 */
.footer__social a svg { width: 16px; height: 16px; display: block; }

@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer__map { aspect-ratio: 4 / 3; } }

/* ---------- Utility spacing ---------- */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}.mb-4{margin-bottom:2.4rem}
.narrow{max-width:640px;margin-left:auto;margin-right:auto}
.nowrap{white-space:nowrap}
.lead { font-size: clamp(1.12rem, .4vw + 1.04rem, 1.18rem); color: var(--text); line-height: 1.95; }
.section--dark .lead { color: #ede5d5; }
.card--narrow{max-width:340px;margin-left:auto;margin-right:auto;text-align:center}
.card > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);margin:-.3rem 0 1.1rem;}

/* ---------- Nav 相容：ul/li 結構 ---------- */
.nav__links li { display: flex; align-items: center; flex: 0 0 auto; }
@media (max-width: 1024px) {
  .nav__links li { width: 100%; }
  .nav__links li a { display: block; width: 100%; }
  .nav__links li.nav__cta { margin: .6rem clamp(1.1rem,4vw,2rem); }
  .nav__links li.nav__cta a { border-top: 0; padding: .85em 1.6em; text-align: center; }
}

/* ============================================================
   稽核收口：跨頁一致性微調（沿用變數與相對單位）
   ============================================================ */

/* 團隊卡頭像（about）：.av--team 改為獨立於 .quote__who 後仍需自帶圓形/置中/外距。
   原 .av 基礎樣式僅作用於 .quote__who .av，故在此補齊。 */
.av--team {
  border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ff-serif); font-weight: 700;
  margin: 0 auto clamp(.85rem, 1.4vw, 1.2rem);
}

/* 服務卡（index 首頁 01–06）：強化卡內字距與標籤呼吸感（標籤對底已由 .card > .mt-3 處理）。 */
.svc-card h3 { margin-bottom: .8em; }
.svc-card p { line-height: 2.05; margin-bottom: 1rem; }
.svc-card .tags { gap: clamp(.8rem, 1.2vw, 1rem); }
.svc-card .tags span { line-height: 1.6; }

/* 深底流程卡（services 深色區）：提高卡片與編號徽章對比，灰白文字更清楚可辨。 */
.section--dark .step { background: rgba(255,253,248,.15); }
.section--dark .step::before { background: rgba(231,183,159,.35); }

/* 聯絡頁服務標籤群組：confirm 現有一致性，gap 與 min-height/padding 已達標。 */
/* .pill-row { flex-wrap: wrap; gap: .8rem; } — no change needed */
/* .pill { min-height: 44px; padding: .78em 1.6em; } — no change needed */

/* ============================================================
   在地好康生活圈：搜尋列 / 分類 icon / 優惠角標 / 手機固定 CTA
   ============================================================ */

/* ---------- 搜尋列 ---------- */
.search {
  background: #fffdf8; border: var(--card-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: clamp(1.2rem, 2.6vw, 1.8rem);
  max-width: var(--container); margin: 0 auto;
}
.search__form { display: grid; gap: clamp(.7rem, 1.4vw, 1rem); grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
.search .field { margin-bottom: 0; }
.search--float { margin-top: clamp(-3.4rem, -4vw, -2.4rem); position: relative; z-index: 2; }
.search__btn { white-space: nowrap; }
.search__btn .btn { width: 100%; height: 100%; min-height: 48px; }
@media (max-width: 760px) { .search__form { grid-template-columns: 1fr 1fr; } .search__btn { grid-column: 1 / -1; } }
@media (max-width: 480px) { .search__form { grid-template-columns: 1fr; } }

/* 篩選列（works 列表頁，較精簡）— 桌機黏頂方便長列表篩選 */
.filterbar { display: grid; gap: clamp(.7rem,1.4vw,1rem); grid-template-columns: 1fr 1fr 1fr 1.4fr; align-items: end;
  background: #fffdf8; border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.1rem,2.4vw,1.6rem); }
.filterbar .field { margin-bottom: 0; }
@media (min-width: 761px) { .filterbar { position: sticky; top: 72px; z-index: 10; } }

/* 靜態標籤（contact 活動類型，不可點擊：移除 hover 互動感） */
.pill--static { cursor: default; }
.pill--static:hover { background: var(--accent-soft); color: var(--accent-dark); box-shadow: none; transform: none; }

/* 列表頁「載入更多」與空狀態 */
.load-more { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }
.empty-state { text-align: center; max-width: 520px; margin: clamp(2rem,4vw,3rem) auto 0; padding: clamp(2rem,4vw,3rem); background: #fffdf8; border: 1px dashed var(--line); border-radius: var(--radius); }
.empty-state h3 { margin-bottom: .5em; }
.empty-state p { color: var(--muted); }
@media (max-width: 760px) { .filterbar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .filterbar { grid-template-columns: 1fr; } }

/* ---------- 分類 icon 網格（含文字標籤） ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 1.6rem); }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center;
  background: #fffdf8; border: var(--card-border); border-radius: var(--radius);
  padding: clamp(.85rem, 1.6vw, 1.15rem) 1rem; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease; color: var(--ink);
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-soft); }
.cat-tile .cat-ico {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark);
}
.cat-tile .cat-ico svg { width: 26px; height: 26px; }
.cat-tile .cat-name { display: flex; flex-direction: column; gap: .35rem; font-family: var(--ff); font-weight: 700; font-size: clamp(1.04rem, .5vw + .98rem, 1.16rem); color: var(--ink); }
.cat-tile .cat-name .role { font-weight: 600; font-size: clamp(.92rem, .3vw + .86rem, 1rem); }

/* ---------- 優惠角標 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3em;
  background: var(--accent); color: #fdf8f1; font-weight: 700;
  font-size: clamp(.86rem, .3vw + .8rem, .96rem); line-height: 1.3;
  padding: .34em .8em; border-radius: 999px; letter-spacing: .02em;
}
.badge--soft { background: var(--accent-soft); color: var(--accent-dark); }
.badge--trust { background: var(--trust); color: #fff; }
/* 圖片右上角截止／狀態徽章 */
.work .badge--corner { position: absolute; top: .9rem; right: .9rem; z-index: 2; box-shadow: 0 4px 12px rgba(47,42,36,.22); }

/* 優惠卡 meta（地區／截止日等） */
.deal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin: .2rem 0 1rem; color: var(--muted);
  font-size: clamp(1.02rem, .4vw + .96rem, 1.12rem); }
.deal-meta span { display: inline-flex; align-items: center; gap: .35em; }

/* 優惠卡標題限制 2 行，讓同排卡片高度一致 */
.work__body h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 方案卡：中間推薦樣式 */
.card.is-featured { border: 2px solid var(--accent); transform: translateY(-8px); position: relative; }
.card.is-featured:hover { transform: translateY(-12px); }
.plan-badge { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff;
  font-size: clamp(.86rem, .3vw + .8rem, .96rem); font-weight: 700; padding: .35em 1em; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px rgba(196,107,74,.3); }

/* 深色區塊文字細緻化（非純白） */
.section--dark { color: #FFF8EE; }
.section--dark .section__lead, .section--dark .step p { color: rgba(255,248,238,.78); }

/* about 圖說 caption */
.img-caption { font-size: 14px; line-height: 1.6; color: #A96347; font-weight: 600; text-align: center; margin-top: 14px; }

/* contact 聯絡資訊 icon 欄位 */
.info-row { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1rem; }
.info-row svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: .45rem; }
.info-row h3 { margin: 0 0 .35rem; font-size: clamp(1.1rem, .5vw + 1rem, 1.2rem); }
.info-row p { margin: 0; }

/* ---------- 排版收口：留白與對齊微調 ---------- */
/* 服務頁圖文段落末端的標籤群，與下一段之間補一點底部留白，避免貼齊容器邊緣 */
.split > div > .pill-row { margin-bottom: clamp(.4rem, 1vw, .9rem); }
/* 優惠卡 CTA（.mt-2 內 pill）推到卡片底部，讓同排卡片 CTA 齊平 */
.work__body .mt-2:last-child { margin-top: auto; padding-top: .4rem; }

/* ---------- 手機固定底部 CTA ---------- */
.mobile-cta { display: none; }
@media (max-width: 1024px) {
  .mobile-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(248,243,234,.96); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line); padding: .6rem clamp(.9rem, 4vw, 1.4rem);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  }
  .mobile-cta .btn { width: 100%; }
  body { padding-bottom: 76px; }
}

/* ============================================================
   視覺美化收口：細節質感提升（全站共用，沿用既有變數）
   重點：標題裝飾線、卡片頂飾與更柔順的互動、區塊節奏、
   分類 icon 與徽章質感、表單與搜尋列聚焦感、深色區光暈。
   ============================================================ */

/* 置中標題加入短裝飾線，提升編輯感層級 */
.section__head { position: relative; }
.section__head .eyebrow + .section__title::after,
.section__head > .section__title:first-child::after {
  content: ""; display: block; width: 52px; height: 3px; margin: 1rem auto 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  border-radius: 999px;
}
.section__head--left .section__title::after { margin-left: 0; }

/* 卡片：頂端細微強調條（hover 時顯色），讓卡片更有設計感 */
.card, .work, .cat-tile, .step { position: relative; }
.card::before, .work::before, .cat-tile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--trust));
  opacity: 0; transform: scaleX(.4); transform-origin: left;
  transition: opacity .25s ease, transform .25s ease; border-radius: var(--radius) var(--radius) 0 0;
}
.card:hover::before, .work:hover::before, .cat-tile:hover::before { opacity: .9; transform: scaleX(1); }
.work { overflow: hidden; }

/* 卡片內圖片：hover 時輕微放大，增加生動感 */
.work img, .card > img { transition: transform .4s ease; }
.work:hover img { transform: scale(1.04); }

/* 分類 icon：徽章加柔光環，hover 時主色加深 + 微縮放 */
.cat-tile .cat-ico {
  box-shadow: 0 6px 16px rgba(196,107,74,.18), inset 0 0 0 1px rgba(196,107,74,.12);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cat-tile:hover .cat-ico { background: var(--accent); color: #fdf8f1; transform: scale(1.06); box-shadow: 0 10px 22px rgba(196,107,74,.32); }

/* 卡片 icon 圓徽：一致的柔光與互動 */
.card__ico { box-shadow: inset 0 0 0 1px rgba(169,85,56,.14); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover .card__ico { transform: translateY(-2px); }

/* 搜尋列 / 篩選列：聚焦時整張卡片浮起，強化主要互動 */
.search, .filterbar { transition: box-shadow .25s ease, transform .25s ease; }
.search:focus-within, .filterbar:focus-within { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* 表單欄位：hover 邊框預示可輸入 */
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent); }

/* Pill / 標籤：更滑順的互動微浮 */
.pill { transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.pill:hover { transform: translateY(-1px); }
.svc-card .tags span { transition: background .2s ease, color .2s ease, transform .2s ease; }
.svc-card .tags span:hover { background: var(--accent-soft); color: var(--accent-dark); transform: translateY(-1px); }

/* 徽章：細微立體感 */
.badge { box-shadow: 0 2px 8px rgba(196,107,74,.22); }
.badge--soft { box-shadow: 0 2px 8px rgba(196,107,74,.12); }

/* 深色區塊：加一層柔和暖光暈，避免大面積死黑 */
.section--dark { position: relative; isolation: isolate; }
.section--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 120% at 88% 0%, rgba(196,107,74,.16), transparent 58%),
              radial-gradient(70% 120% at 6% 100%, rgba(124,135,105,.12), transparent 60%);
}

/* CTA band：主按鈕加一點光感呼吸 */
.cta-band .btn--primary { box-shadow: 0 12px 30px rgba(196,107,74,.36); }
.cta-band .btn--primary:hover { box-shadow: 0 16px 38px rgba(196,107,74,.46); }

/* 頁尾社群 icon：hover 微放大 + 主色光暈 */
.footer__social a:hover { box-shadow: 0 8px 18px rgba(196,107,74,.34); }

/* 步驟卡：編號徽章 hover 時主色填滿，引導閱讀 */
.step::before { transition: background .25s ease, color .25s ease; }
.step:hover::before { background: var(--accent); color: #fdf8f1; }

/* 圖文 split 圖片：細緻外框與懸停 */
.split__media img { transition: box-shadow .3s ease, transform .3s ease; }
.split__media img:hover { box-shadow: 0 22px 44px rgba(43,36,30,.2); }

/* 連結式 CTA（卡片內「查看…」）：底線滑入動效，若使用 .link-arrow */
.link-arrow { color: var(--accent-dark); font-weight: 700; display: inline-flex; align-items: center; gap: .35em; transition: gap .2s ease; }
.link-arrow:hover { gap: .6em; }

/* 設計師統一字級階層（heroes 以專屬 class 覆寫，不受影響） */
h1 { font-size: clamp(32px, 5vw, 44px); line-height: 1.3; }
h2 { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.35; }
h3 { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; }
.section__title { font-size: clamp(26px, 3.6vw, 32px); }

/* 尊重使用者減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   多頁 RWD / 排版收口（orchestrator 合併 5 個並行 agent 的 CSS 規格）
   單一共用樣式：全部沿用 :root 變數與相對單位，不寫死固定像素寬度。
   置於檔尾,依來源順序覆寫前面同特定性規則。
   ============================================================ */

/* ---- about：「平台目標」標題＋清單包進同一置中容器 ---- */
.goal-block { max-width: clamp(34rem, 80vw, 40rem); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 1.6rem); }
.goal-block .section__head { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
/* 清單項目維持左對齊,但整塊在版面置中(避免偏左漂移) */
.goal-block .checklist { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }

/* ---- 全站 CTA 標題：斷行平均、避免單字孤行（如「活動」孤行）---- */
.cta-band h2 { text-wrap: balance; }

/* ---- 導覽列：字級改相對單位,提高可讀性(只調字級,保留桌機/手機既有 padding 不破壞選單) ---- */
.nav__links a { font-size: clamp(.98rem, .3vw + .9rem, 1.06rem); }
.nav__cta .btn { font-size: clamp(1.02rem, .35vw + .95rem, 1.1rem); }
@media (min-width: 1025px) { .nav__cta .btn { padding: .6em 1.2em; } }

/* ---- 首頁搜尋列：5 欄一致排列(欄位＋按鈕同列,不掉行)、欄位字級/高度統一 ---- */
.search__form { grid-template-columns: 1.6fr 1fr 1fr 1fr auto; }
.search .field input, .search .field select { min-height: 48px; padding: .55em .9em; font-size: clamp(1rem, .4vw + .94rem, 1.1rem); }
@media (max-width: 760px) { .search__form { grid-template-columns: 1fr 1fr; } .search__btn { grid-column: 1 / -1; } }
@media (max-width: 480px) { .search__form { grid-template-columns: 1fr; } }

/* ---- 首頁分類卡：3+3 平衡置中,避免末列靠左留空 ---- */
.cat-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-tile .cat-name { gap: .35rem; font-size: clamp(1.12rem, .6vw + 1rem, 1.24rem); }
.cat-tile .cat-name .role { font-size: clamp(1rem, .4vw + .94rem, 1.08rem); }

/* ---- 優惠卡(index + works 一致):內文/meta 字級與行距、CTA 膠囊統一為主橘按鈕 ---- */
.work__cat { color: var(--accent-dark); font-size: clamp(1.06rem, .4vw + .98rem, 1.18rem); }
.work__body h3 { line-height: 1.45; }
.work__body p { font-size: clamp(1.16rem, .45vw + 1.07rem, 1.28rem); line-height: 1.85; margin: 0 0 1.1rem; }
.deal-meta { font-size: clamp(1.05rem, .4vw + .98rem, 1.16rem); line-height: 1.7; margin: .35rem 0 1rem; }
.work__body .pill { background: var(--accent); color: #fdf8f1; font-weight: 700; font-size: clamp(1.08rem, .4vw + 1.02rem, 1.2rem); padding: .62em 1.35em; min-height: 46px; box-shadow: 0 4px 12px rgba(217,106,61,.22); }
.work__body .pill:hover { background: var(--accent-dark); color: #fdf8f1; }

/* ---- 標籤/膠囊統一尺寸與字級(服務卡 tags、靜態 pill) ---- */
.pill { font-size: clamp(1.1rem, .45vw + 1.02rem, 1.24rem); line-height: 1.7; padding: .65em 1.45em; }
.svc-card .tags span { font-size: clamp(1.12rem, .45vw + 1.04rem, 1.24rem); line-height: 1.7; padding: .7em 1.5em; display: inline-flex; align-items: center; min-height: 42px; }

/* ---- 服務頁定價卡:推薦徽章與卡片內容留足距離,避免擠壓 ---- */
.card.is-featured { padding-top: clamp(3.1rem, 4vw, 3.8rem); }
.plan-badge { top: -1.15rem; padding: .42em 1.2em; font-size: clamp(.9rem, .4vw + .82rem, 1rem); }

/* ---- 深色區塊:提高文字對比(原 .78 透明度偏淡) ---- */
.section--dark .section__lead, .section--dark .step p { color: rgba(255,248,238,.92); }
.section--dark .eyebrow { color: #f0d5c3; }

/* ---- works 篩選列:5 欄排列(按鈕不掉行)、欄位/按鈕高度與字級統一 ---- */
.filterbar { grid-template-columns: 1fr 1.1fr 1fr 1.8fr .95fr; }
.filterbar .field { min-width: 0; }
.filterbar input, .filterbar select { min-height: 48px; padding: .55em .85em; font-size: clamp(1.02rem, .35vw + .95rem, 1.12rem); }
.filterbar .btn--primary { width: 100%; white-space: nowrap; padding: .7em 1.2em; font-size: clamp(1.04rem, .35vw + .96rem, 1.12rem); }
@media (max-width: 760px) { .filterbar { grid-template-columns: 1fr 1fr; } .filterbar .field:last-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .filterbar { grid-template-columns: 1fr; } }

/* ---- works「載入更多」:做成明確按鈕,加大內距與點擊高度,與主 CTA 一致 ---- */
.load-more .btn--ghost { padding: .85em 2.2em; font-size: clamp(1.12rem, .5vw + 1.04rem, 1.22rem); border-width: 2px; min-height: 50px; font-weight: 700; }
.load-more .btn--ghost:hover { background: var(--accent); color: #fdf8f1; border-color: var(--accent); }

/* ---- Footer:字級/行距提升、社群 icon 加大,深底可讀性更佳 ---- */
.site-footer { font-size: clamp(1.16rem, .45vw + 1.07rem, 1.28rem); line-height: 2.05; }
.site-footer li { font-size: clamp(1.16rem, .45vw + 1.07rem, 1.26rem); line-height: 2.1; }
.site-footer h4 { font-size: clamp(1.48rem, .8vw + 1.3rem, 1.62rem); }
.footer__brand p { font-size: clamp(1.16rem, .45vw + 1.07rem, 1.26rem); line-height: 2.1; }
.footer__social a { width: 46px; height: 46px; }
.footer__social a svg { width: 18px; height: 18px; }

/* ---- contact:服務範圍地圖區(取代錯置的 .map-card,改乾淨響應式二欄) ---- */
.map-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.map-section__info { display: flex; flex-direction: column; gap: 1rem; }
.map-section__info h2 { margin-bottom: .4em; }
.map-section__info > p { margin-bottom: .2rem; color: var(--ink-soft); font-size: clamp(1.12rem, .4vw + 1.04rem, 1.24rem); }
.map-section__cta { display: inline-flex; align-self: flex-start; white-space: nowrap; padding: .6em 1.2em; }
.map-section__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.map-section__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 800px) { .map-section { grid-template-columns: 1fr; } .map-section__frame { aspect-ratio: 16 / 10; } }
@media (max-width: 480px) { .map-section__cta { width: 100%; justify-content: center; } }

/* ============================================================
   Hero / 標題區「呼吸感」收口（req-285：這邊調整看起來舒服一點）
   針對首頁 hero--split、子頁 page-hero、結尾 CTA band：
   加大上下留白與元素間距、放鬆 CJK 標題行高，桌機到手機都更從容、
   且不撞視窗邊（橫向仍由 .container 置中 + 內距控制）。
   全部沿用 :root 變數與相對單位，維持 RWD。
   ============================================================ */

/* 首頁左文右圖 Hero：依 dealer 需求(req-407)整體上下高度縮約一半，
   收緊上下留白、行高與元素間距，並把圖片裁切比例壓扁，使版面更精簡。 */
.hero--split .hero__grid { padding: clamp(.6rem, 1.1vw, .9rem) 0; gap: clamp(2.2rem, 5vw, 4.25rem); }
/* 標題行高收緊、與副標間距縮小 */
.hero__title { line-height: 1.16; margin-bottom: .3em; }
.hero__sub { margin-bottom: clamp(.85rem, 1.6vw, 1.15rem); line-height: 1.5; }
.hero--split .hero__cta { gap: clamp(.9rem, 2vw, 1.25rem); }

/* 手機：圖文堆疊時上下間距同步收緊，仍保留少量呼吸感不擠邊 */
@media (max-width: 860px) {
  .hero--split .hero__grid { padding: clamp(.5rem, 2vw, .8rem) 0; gap: clamp(1.3rem, 4vw, 1.8rem); }
  .hero--split .hero__inner { padding-top: .2rem; }
}

/* 子頁小 Hero：上下留白與標題間距加大，與首頁一致的從容感 */
.page-hero { padding: clamp(2.8rem, 5.5vw, 4.4rem) 0; }
.page-hero h1 { margin-bottom: .55em; line-height: 1.3; }
.page-hero p { line-height: 2.05; }

/* 結尾 CTA band：標題與內文之間留白加大，按鈕不緊貼文字 */
.cta-band p { margin-bottom: clamp(1.7rem, 3vw, 2.2rem); }

/* 優惠卡 / 首頁 Hero 圖：統一 16:10 比例（對應 img width/height，避免 CLS 版面跳動） */
.work img { aspect-ratio: 16 / 10; object-fit: cover; }
.hero--split .hero__art img { aspect-ratio: 16 / 7; }

/* ============================================================
   登記審核機制收口（CTA 改「免費登記審核」相關 UI）
   nav 目前項目精簡，子頁以 CTA 作為當前頁 active 指示。
   ============================================================ */

/* 導覽 CTA 的 active 狀態（contact / services）：主色按鈕加柔光外環，標示當前所在頁 */
/* 文字色需明確覆寫：.nav__links a.is-active 會把字色設成 --accent-nav（與按鈕底色 --accent 同色），
   導致橘底橘字看不見；此處用淺色維持可讀性 */
.nav__cta .btn.is-active {
  color: #fdf8f1 !important;   /* 強制覆寫 .nav__links a.is-active 的橘字，避免橘底橘字看不見 */
  box-shadow: 0 0 0 3px var(--accent-soft), 0 10px 26px rgba(143,80,56,.26);
}
/* 當前頁 CTA 按鈕不額外畫 active 底線（::after 與膠囊按鈕造型衝突） */
.nav__cta .btn.is-active::after { display: none; }

/* contact 表單：勾選同意欄（橫向排列，點擊範圍足夠） */
.field--check { flex-direction: row; align-items: flex-start; gap: .7rem; margin-bottom: 1.1rem; }
.field--check input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; margin-top: .35rem; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; padding: 0; }
.field--check label { font-weight: 500; line-height: 1.7; cursor: pointer; }

/* contact 送出後審核狀態卡（merchant-form.js 顯示） */
.review-status {
  background: #fffdf8; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3vw, 2.1rem); margin-top: 1.4rem;
}
.review-status h3 { margin: 0 0 .9rem; color: var(--ink); display: flex; align-items: center; gap: .55rem; }
.review-status h3 .dot { width: .7em; height: .7em; border-radius: 50%; background: var(--accent); flex: 0 0 auto; box-shadow: 0 0 0 4px var(--accent-soft); }
.review-status dl { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.1rem; margin: 0; }
.review-status dt { color: var(--muted); font-weight: 600; }
.review-status dd { margin: 0; color: var(--ink); font-weight: 600; }
.review-status .badge { margin-left: .2rem; }

/* contact 服務範圍：無嵌入地圖時的純資訊＋外開地圖按鈕區塊（避免空白互動 iframe） */
.map-cta-block {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: clamp(1.6rem, 4vw, 2.6rem);
  max-width: var(--container); margin-inline: auto;
}
.map-cta-block h2 { margin-bottom: .3em; }
.map-cta-block p { margin: 0; color: var(--ink-soft); font-size: clamp(1.12rem, .4vw + 1.04rem, 1.24rem); }
.map-cta-block .btn { align-self: flex-start; }
@media (max-width: 480px) { .map-cta-block .btn { width: 100%; justify-content: center; } }

/* ============================================================
   req-412：首頁 hero--split 色塊「上下高度」再縮約一半（僅 index.html 使用此 class）。
   觀察：色塊上下的深色留白，主要來自右側主圖比左側文字欄高、align center 後
   在文字上下各留一段死白。三管齊下把色塊壓低：
     ① 格線上下留白(padding)減半；
     ② 主圖改「跟隨文字欄高度填滿」(align stretch + height:100% + cover)，
        消除圖比文高造成的上下死白，不再撐高色塊；
     ③ 標題/副標/CTA 垂直節奏收緊、字級等比略降，整體壓縮但維持階層與可讀性。
   橫向仍由 .container 置中＋內距控制，RWD 不變。
   ============================================================ */
.hero--split .hero__grid {
  padding: clamp(.3rem, .55vw, .45rem) 0;   /* 上下留白減半（原 .6–.9rem） */
  align-items: stretch;                      /* 讓主圖與文字欄等高，去除上下死白 */
}
.hero--split .hero__inner { display: flex; flex-direction: column; justify-content: center; }
.hero--split .hero__art { display: flex; min-height: 0; }
.hero--split .hero__art img {
  height: 100%; aspect-ratio: auto; min-height: 0;   /* 跟隨文字欄高度，cover 維持主體 */
}
/* 文字垂直節奏收緊、字級等比略降，使色塊整體再降低 */
.hero--split .hero__title { font-size: clamp(1.5rem, 2.9vw, 2.1rem); line-height: 1.12; margin-bottom: .18em; }
.hero--split .hero__sub   { font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.45; margin-bottom: clamp(.55rem, 1.1vw, .85rem); }
.hero--split .hero__cta   { gap: clamp(.7rem, 1.6vw, 1rem); }
.hero--split .hero__cta .btn--lg { padding: .6em 1.3em; font-size: 1rem; }

@media (max-width: 860px) {
  /* 手機：圖文堆疊，主圖回到固定扁比例（避免 stretch 後高度失控），留白同步收緊 */
  .hero--split .hero__grid { padding: clamp(.25rem, .9vw, .4rem) 0; }
  .hero--split .hero__art { display: block; }
  .hero--split .hero__art img { height: auto; aspect-ratio: 16 / 8; }
}

/* ============================================================
   req-414：首頁 hero--split 上下高度再「縮約一半」（僅 index.html 使用此 class）。
   病灶：req-412 把主圖改成 height:100% + aspect-ratio:auto 並 align-items:stretch，
   主圖會依其原生比例(≈16:10)撐開，反而比左側文字欄高，色塊被主圖整個拉高。
   解法（三管齊下，仍橫向置中＋RWD 不變）：
     ① 格線改回 align-items:center，取消 stretch，主圖不再強制等高；
     ② 主圖改扁平 16:7 比例並加 max-height 上限，桌機高度直接砍半、不再撐高色塊；
     ③ 文字字級與垂直節奏再收一階，使整體色塊高度約為原來一半。
   只作用於 index 專屬的 .hero--split，不動子頁 page-hero。
   ============================================================ */
.hero--split .hero__grid {
  align-items: center;                       /* 取消 stretch：主圖不再被拉高、文字也不再留死白 */
  padding: clamp(.2rem, .4vw, .35rem) 0;     /* 上下留白再收一階 */
}
.hero--split .hero__art { display: block; }
.hero--split .hero__art img {
  height: auto; min-height: 0;
  aspect-ratio: 16 / 7;                       /* 扁平比例，直接壓低主圖高度 */
  max-height: clamp(150px, 22vw, 200px);      /* 高度上限：桌機色塊高度約砍半 */
  object-fit: cover;
}
.hero--split .hero__title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; margin-bottom: .14em; }
.hero--split .hero__sub   { font-size: clamp(.96rem, 1.3vw, 1.05rem); line-height: 1.4; margin-bottom: clamp(.45rem, .9vw, .7rem); }
.hero--split .hero__cta   { gap: clamp(.6rem, 1.4vw, .9rem); }
.hero--split .hero__cta .btn--lg { padding: .55em 1.2em; font-size: .98rem; }

@media (max-width: 860px) {
  /* 手機：圖文堆疊，主圖全寬，給扁平比例＋高度上限，避免堆疊後又變高 */
  .hero--split .hero__grid { padding: clamp(.2rem, .8vw, .35rem) 0; }
  .hero--split .hero__art img { aspect-ratio: 16 / 9; max-height: clamp(150px, 40vw, 220px); }
}

/* ============================================================
   req-415：全站 Hero「高度再縮小 1/2」並維持全站一致。
   範圍：① index 的 .hero--split 在 req-414 基礎上再砍半；
        ② 先前各輪只縮過首頁，子頁 .page-hero（about/services/
           works/contact）仍是原始高度 → 這輪一併砍半，讓全站
           Hero 高度節奏一致。
   作法仍沿用 :root 變數＋相對單位＋clamp()，橫向由 .container
   置中＋內距控制，RWD 不變；字級維持階層（標題仍最大）只等比再收一階。
   ============================================================ */

/* ① 首頁 hero--split：主圖高度上限與上下留白再砍半，文字節奏再收一階 */
.hero--split .hero__grid { padding: clamp(.1rem, .25vw, .2rem) 0; }
.hero--split .hero__art img {
  aspect-ratio: 16 / 6;                         /* 更扁，進一步壓低主圖 */
  max-height: clamp(104px, 15vw, 150px);        /* 上限約為 req-414 的一半 */
}
.hero--split .hero__title { font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.08; margin-bottom: .1em; }
.hero--split .hero__sub   { font-size: clamp(.9rem, 1.1vw, .98rem); line-height: 1.32; margin-bottom: clamp(.35rem, .7vw, .55rem); }
.hero--split .hero__cta   { gap: clamp(.5rem, 1.1vw, .75rem); }
.hero--split .hero__cta .btn--lg { padding: .5em 1.1em; font-size: .94rem; }

@media (max-width: 860px) {
  .hero--split .hero__grid { padding: clamp(.15rem, .6vw, .3rem) 0; }
  .hero--split .hero__art img { aspect-ratio: 16 / 8; max-height: clamp(110px, 32vw, 170px); }
}

/* ② 子頁 page-hero：上下 padding 與標題間距砍半、內文行高收緊，使高度約減半 */
.page-hero { padding: clamp(1.4rem, 2.75vw, 2.2rem) 0; }
.page-hero h1 { margin-bottom: .35em; line-height: 1.22; }
.page-hero p { line-height: 1.78; }

/* ============================================================
   req-416：首頁深咖啡色塊（hero--split）高度再「縮小 1/2」。
   範圍僅 index.html（.hero--split 全站僅首頁使用，子頁 page-hero 不動）。
   色塊高度＝max(左文字欄, 右主圖)，故兩邊一起砍半：
     ① 格線上下留白(padding)再減半；
     ② 右側主圖 max-height 上限砍半，直接壓低主圖高度；
     ③ 標題/副標/CTA 垂直節奏再收一階、字級等比略降（標題仍最大、維持階層與可讀性）。
   橫向仍由 .container 置中＋內距控制，RWD 不變。
   ============================================================ */
.hero--split .hero__grid { padding: clamp(.05rem, .12vw, .1rem) 0; }
.hero--split .hero__art img {
  aspect-ratio: 16 / 5;                          /* 更扁，再壓低主圖 */
  max-height: clamp(56px, 8vw, 78px);            /* 上限約為 req-415 的一半 */
}
.hero--split .hero__title { font-size: clamp(1.08rem, 1.85vw, 1.4rem); line-height: 1.06; margin-bottom: .08em; }
.hero--split .hero__sub   { font-size: clamp(.86rem, 1vw, .94rem); line-height: 1.28; margin-bottom: clamp(.28rem, .55vw, .42rem); }
.hero--split .hero__cta   { gap: clamp(.45rem, .9vw, .65rem); }
.hero--split .hero__cta .btn--lg { padding: .46em 1.05em; font-size: .92rem; }

@media (max-width: 860px) {
  .hero--split .hero__grid { padding: clamp(.1rem, .5vw, .2rem) 0; }
  .hero--split .hero__art img { aspect-ratio: 16 / 7; max-height: clamp(82px, 24vw, 120px); }
}

/* ============================================================
   req-418：首頁深咖啡色塊（hero--split）高度在 req-416 基礎上再「縮小 1/2」。
   範圍僅 index.html（.hero--split 全站僅首頁使用，子頁 page-hero 不動）。
   色塊高度＝max(左文字欄, 右主圖)，兩邊一起再砍半：
     ① 格線上下留白(padding)歸零（已近 0）；
     ② 右側主圖更扁（16/4）、max-height 上限再砍半，直接壓低主圖；
     ③ 標題/副標/CTA 垂直節奏再收一階、字級等比略降（標題仍最大、維持階層與可讀性）。
   橫向仍由 .container 置中＋內距控制，RWD 不變。
   ============================================================ */
.hero--split .hero__grid { padding: 0; gap: clamp(1.6rem, 3.5vw, 3rem); }
.hero--split .hero__art img {
  aspect-ratio: 16 / 4;                          /* 更扁，再壓低主圖 */
  max-height: clamp(30px, 4.5vw, 42px);          /* 上限約為 req-416 的一半 */
}
.hero--split .hero__title { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.04; margin-bottom: .06em; }
.hero--split .hero__sub   { font-size: clamp(.82rem, .9vw, .9rem); line-height: 1.22; margin-bottom: clamp(.2rem, .4vw, .32rem); }
.hero--split .hero__cta   { gap: clamp(.4rem, .8vw, .55rem); }
.hero--split .hero__cta .btn--lg { padding: .4em .95em; font-size: .9rem; }

@media (max-width: 860px) {
  .hero--split .hero__grid { padding: clamp(.05rem, .3vw, .1rem) 0; }
  .hero--split .hero__art img { aspect-ratio: 16 / 6; max-height: clamp(56px, 16vw, 84px); }
}

/* ============================================================
   設計師全站一致性收口（FINAL — 權威覆寫層）
   依設計師建議統一：色票、Header、容器、字級階層、區塊留白、
   卡片 / 按鈕 / icon / footer / 表單 / 麵包屑 / 裝飾線 / 圖片比例。
   置於檔尾，最後生效；沿用 :root 變數＋相對單位＋clamp()，RWD 不變。
   ============================================================ */

/* ---- 全站容器：max-width 1120 + 置中 + 左右內距（不撞牆） ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); }

/* ---- 全站底色 ---- */
body { background: var(--cream); color: var(--text); line-height: 1.9; }

/* ---- 字級階層（clamp 保留 RWD，上限對齊設計師值）---- */
h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.35; font-weight: 700; }
h2 { font-size: clamp(26px, 3.4vw, 32px); line-height: 1.4; }
h3 { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; }
.section__title { font-size: clamp(26px, 3.6vw, 32px); line-height: 1.4; }
.card h3, .work__body h3, .svc-card h3, .step h3 { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; }
p, .card p, .work__body p, .step p, .checklist li { font-size: clamp(15px, .5vw + .9rem, 16px); line-height: 1.9; }

/* ---- Header：高度 64、Logo 固定左側 flex ---- */
.nav { min-height: 64px; }
.nav__logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* ---- 區塊上下留白：一般 80、深色 88、footer 72/32 ---- */
.section { padding: clamp(48px, 8vw, 80px) 0; }
.section--tight { padding: clamp(20px, 4vw, 36px) 0; }
.section--dark { padding: clamp(52px, 8.5vw, 88px) 0; }
.site-footer { padding: clamp(48px, 8vw, 72px) 0 32px; }

/* ---- 卡片統一樣式（設計師：卡片底 #FFFDF8、陰影 0 14px 36px、border .06）---- */
.card, .work, .cat-tile, .quote, .step, .form {
  background: var(--card); border-radius: 8px; border: 1px solid rgba(43,20,14,.06);
  box-shadow: 0 14px 36px rgba(43,20,14,.10);
}
.section--dark .step { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.08); }

/* ---- 按鈕統一：小 40 / 主 48、radius 6、橘色 hover ---- */
.btn { border-radius: 6px; min-height: 40px; padding: .6em 1.4em; }
.btn--primary { min-height: 48px; background: var(--accent); }
.btn--primary:hover { background: var(--orange-hover); transform: translateY(-1px); }
.btn--lg { min-height: 48px; }
.btn--ghost:hover { background: var(--accent); border-color: var(--accent); }

/* ---- Icon 圓底統一 48 × #FFE0D2 / #E85D32（設計師統一）---- */
.card__ico { width: 48px; height: 48px; background: var(--accent-soft); color: var(--accent); margin-bottom: 1.2rem; }
.card__ico svg { width: 24px; height: 24px; }

/* ---- 卡片內容直排、CTA 置底（同排齊平）---- */
.card, .work, .work__body { display: flex; flex-direction: column; }
.card > .mt-3, .work__body .mt-2:last-child, .card .btn--block { margin-top: auto; }

/* ---- 表單欄位統一 ---- */
.field input, .field select, .field textarea {
  min-height: 44px; border: 1px solid #D9C7B8; border-radius: 2px; padding: 0 14px;
  background: #FFFDF9; font-size: 15px; color: var(--text);
}
.field textarea { padding: 12px 14px; min-height: 140px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid rgba(229,103,58,.22); border-color: var(--accent); box-shadow: none;
}
.field input::placeholder, .field textarea::placeholder { color: #B7A69B; }
.field label .req, .req { color: var(--accent); }

/* ---- 麵包屑 ---- */
.breadcrumb { font-size: 13px; color: #CDB8A9; letter-spacing: .04em; margin-bottom: 16px; }
.breadcrumb a { color: #CDB8A9; }
.breadcrumb a:hover { color: #fdf8f1; }

/* ---- 橘色裝飾短線統一 40×2 ---- */
.section__head .eyebrow + .section__title::after,
.section__head > .section__title:first-child::after,
.section__head > h2:first-child::after {
  width: 40px; height: 2px; background: var(--accent); margin: 16px auto 0; border-radius: 0;
}
.section__head--left .section__title::after { margin-left: 0; }

/* ---- Footer bottom：兩端對齊、社群置中；手機直排置中 ---- */
.footer__bottom { display: flex; justify-content: space-between; align-items: center; }
.footer__social { align-items: center; }
@media (max-width: 560px) {
  .footer__bottom { flex-direction: column; text-align: center; gap: 1rem; }
  .footer__social { justify-content: center; }
}

/* ---- 圖片卡比例：優惠卡 4/3 ---- */
.work img { aspect-ratio: 4 / 3; object-fit: cover; max-height: none; }

/* ============================================================
   首頁（index）— 還原 Hero，修搜尋框與分類 / 優惠卡
   覆寫 req-407…418 的 hero--split 縮小層。
   ============================================================ */
.hero--split .hero__grid {
  padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 112px);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero--split .hero__inner { display: block; }
.hero--split .hero__art { display: block; }
.hero--split .hero__art img {
  aspect-ratio: 4 / 3; height: auto; max-height: none; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: 0 24px 50px rgba(0,0,0,.42);
}
.hero--split .hero__title { font-size: clamp(28px, 4vw, 40px); line-height: 1.3; margin-bottom: .35em; }
.hero--split .hero__sub { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; margin-bottom: 1.4rem; }
.hero--split .hero__cta { gap: clamp(.9rem, 2vw, 1.2rem); }
.hero--split .hero__cta .btn--lg { padding: .85em 2em; font-size: clamp(16px, .5vw + .9rem, 18px); min-height: 48px; }
@media (max-width: 860px) {
  .hero--split .hero__grid { padding: clamp(40px, 9vw, 64px) 0 clamp(44px, 10vw, 72px); gap: clamp(1.6rem, 5vw, 2.2rem); }
  .hero--split .hero__art img { aspect-ratio: 16 / 9; max-height: none; }
}

/* ============================================================
   req-430：首頁深咖啡色塊（hero--split）整體高度「放大一倍」。
   重點：此前已有「還原 Hero」層（上方 padding 56–96px / 主圖 4:3）把
   req-407…418 的縮小層覆寫掉，那才是目前實際生效的 Hero 基準；故本層
   置於還原層「之後」，以還原層數值為基準把色塊整體高度放大約一倍。
   色塊高度＝上下 padding ＋ max(左文字欄, 右主圖)，三者一起放大：
     ① 上下 padding 約加倍；
     ② 右側主圖由 4:3 改方形(1:1)再加高度下限，主圖更高（cover 不變形）；
     ③ 標題/副標/CTA 字級與垂直節奏同步放大（標題仍最大、維持階層與可讀性）。
   僅作用於 index 專屬 .hero--split，子頁 page-hero 不動；
   橫向仍由 .container 置中＋內距控制，全部用 clamp() 維持 RWD。
   ============================================================ */
.hero--split .hero__grid {
  padding: clamp(210px, 26vw, 360px) 0 clamp(230px, 28vw, 390px);   /* 上下留白再加高，色塊整體更挺 */
  gap: clamp(2.6rem, 6vw, 5rem);
}
.hero--split .hero__art img {
  aspect-ratio: 1 / 1;                         /* 由 4:3 改方形，主圖更高 */
  height: auto; max-height: none; object-fit: cover;
  min-height: clamp(480px, 52vw, 760px);       /* 高度下限再上拉，主圖隨色塊一起放大 */
}
.hero--split .hero__title { font-size: clamp(38px, 5.8vw, 62px); line-height: 1.22; margin-bottom: .42em; }
.hero--split .hero__sub   { font-size: clamp(19px, 2vw, 26px); line-height: 1.75; margin-bottom: 2rem; }
.hero--split .hero__cta   { gap: clamp(1rem, 2.2vw, 1.4rem); }
.hero--split .hero__cta .btn--lg { padding: 1em 2.4em; font-size: clamp(17px, .5vw + 1rem, 19px); min-height: 56px; }
@media (max-width: 860px) {
  /* 手機：圖文堆疊，主圖回到全寬橫幅比例並加高度下限，留白同步放大 */
  .hero--split .hero__grid { padding: clamp(96px, 19vw, 152px) 0 clamp(104px, 20vw, 168px); gap: clamp(2rem, 6vw, 2.8rem); }
  .hero--split .hero__art img { aspect-ratio: 16 / 10; min-height: clamp(280px, 64vw, 440px); max-height: none; }
  /* 手機標題降階，避免放大後長標題頂到左右邊 */
  .hero--split .hero__title { font-size: clamp(28px, 7vw, 38px); }
  .hero--split .hero__sub   { font-size: clamp(16px, 4.2vw, 19px); }
}

/* 子頁 Hero（about/services/works/contact）：還原合理高度，全站一致
   覆寫 req-415 把 page-hero 壓到 ~22px 的縮小層 */
.page-hero { padding: clamp(44px, 7vw, 72px) 0 clamp(40px, 6vw, 64px); }
.page-hero h1 { margin-bottom: .4em; line-height: 1.35; }
.page-hero p { line-height: 2; }

/* 搜尋框：不用負 margin，正常浮在 hero 下方 */
.search--float { margin-top: 32px; position: relative; z-index: 2; }
.search { max-width: 1040px; padding: 24px 28px; border-radius: 10px; box-shadow: 0 16px 36px rgba(42,23,17,.14); }
.search__form { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 16px; }
.search__btn .btn { width: 144px; min-height: 48px; }
@media (max-width: 760px) {
  .search__form { grid-template-columns: 1fr 1fr; }
  .search__btn { grid-column: 1 / -1; }
  .search__btn .btn { width: 100%; }
}
@media (max-width: 480px) { .search__form { grid-template-columns: 1fr; } }

/* 分類卡：3 欄、固定高 160、置中、數字橘色加粗 */
.cat-grid { grid-template-columns: repeat(3, 1fr); }
.cat-tile { min-height: 118px; justify-content: center; }
.cat-tile .cat-name .role { color: var(--accent); font-weight: 700; }
@media (max-width: 720px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cat-grid { grid-template-columns: 1fr; } }

/* 優惠卡：分類小標、標題、meta 顏色 */
.work__cat { font-size: 14px; color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: none; margin-bottom: 8px; }
.work__body h3 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.deal-meta { color: #7A665C; }
.load-more { margin-top: 48px; }

/* ============================================================
   about — 故事圖文、caption、核心價值、平台目標
   ============================================================ */
.split--top { gap: clamp(2.4rem, 6vw, 72px); align-items: center; }
.split--top .split__media img { aspect-ratio: 4 / 3; }
.img-caption { font-size: 18px; font-weight: 700; color: var(--accent); margin-top: 20px; text-align: center; }
/* 核心價值三卡等高、icon→標題間距、行高一致 */
.section--soft .grid--3 .card { min-height: 320px; }
.section--soft .grid--3 .card .card__ico { margin-bottom: 24px; }
.goal-block { max-width: 520px; margin-inline: auto; }
.goal-block .checklist { margin: 32px auto 0; }
.goal-block .checklist li { margin-bottom: 22px; }
.goal-block .checklist li::before { color: #F2B79B; }

/* ============================================================
   contact — 表單卡、表單格線、chips、聯絡資訊、服務範圍
   ============================================================ */
/* 錨點不被 sticky header 遮住（id 留在 form，JS 依賴） */
#merchant-application { scroll-margin-top: 88px; }
/* 左右欄：320 / 1fr，gap 56，上對齊（縮窄左欄、讓右側表單欄位更寬） */
.split--contact { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; }
/* 表單卡：填滿右欄，欄位加寬（上限隨右欄／container 收斂，不寫死像素） */
.form-card .form, .form.form-card, #merchant-application {
  width: 100%; max-width: 100%; padding: 40px; border-radius: 8px;
}
.form__head h2 { margin-bottom: .3em; }
.form__head p { color: var(--ink-soft); font-size: 15px; line-height: 1.8; margin-bottom: 1.4rem; }
/* 表單 2 欄格線 */
.form__grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form__grid .field { margin-bottom: 0; }
.field label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.field label .opt { color: #9A887E; font-weight: 400; }
/* 活動分類預設值灰字（未選時整個 select 顯示灰字提示） */
.field select:has(option[value=""]:checked) { color: #9A887E; }
/* 「商家可以刊登什麼」三卡：壓低高度、收緊行距，提升可讀性（僅 contact 此區，.list-what 全站唯一） */
.list-what { align-items: start; }
.list-what .svc-card { padding: 26px 26px; }
.list-what .svc-card .card__ico { width: 46px; height: 46px; margin-bottom: 14px; }
.list-what .svc-card .card__ico svg { width: 22px; height: 22px; }
.list-what .svc-card h3 { font-size: clamp(1.2rem, 1vw + 1rem, 1.34rem); margin-bottom: .4em; }
.list-what .svc-card p { font-size: clamp(1rem, .35vw + .94rem, 1.08rem); line-height: 1.65; margin-bottom: 0; }
/* 標籤緊接內文，不靠 margin-top:auto 撐到卡底，避免卡片被拉高出現大片空白 */
.list-what .svc-card > .tags.mt-3 { margin-top: 16px; }
.list-what .svc-card .tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.list-what .svc-card .tags span { justify-content: center; min-width: 0; padding: .5em 1em; font-size: clamp(.96rem, .3vw + .9rem, 1.04rem); min-height: 36px; }
/* 多選 chips（曝光區域 / 活動類型）*/
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid #D9C7B8; background: #FFFDF9; border-radius: 999px;
  padding: 8px 14px; font-size: 14px; color: var(--text); line-height: 1.3;
  transition: border-color .15s, background .15s, color .15s;
}
.chip input { width: 16px; height: 16px; min-height: 0; accent-color: var(--accent); margin: 0; padding: 0; border: 0; background: none; }
.chip:hover { border-color: var(--accent); }
.chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
/* textarea 字數提示 */
.textarea-wrap { position: relative; }
.textarea-wrap .count-hint { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: #9A887E; pointer-events: none; }
/* 欄位下方小提示（如活動日期 30 天限制）*/
.field > .count-hint { font-size: 12px; color: #9A887E; margin-top: 6px; line-height: 1.5; }
/* 同意提醒框 */
.consent-box { background: #FAF2EA; padding: 14px 16px; border-radius: 6px; display: flex; gap: 10px; align-items: flex-start; }
.consent-box input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--accent); border: 0; background: none; }
.consent-box label { font-weight: 500; line-height: 1.7; margin-bottom: 0; }
/* 送出按鈕全寬 */
.form .btn--block { min-height: 48px; font-size: 16px; font-weight: 700; }
.form-note { font-size: 13px; line-height: 1.8; color: #7A665C; margin-top: 16px; }
/* 左欄活動類型 chips：2 欄固定 120 */
.type-chips { display: grid; grid-template-columns: repeat(2, 120px); gap: 10px; }
.type-chips .pill { justify-content: center; padding: .5em .8em; min-height: 40px; font-size: 14px; }
/* 聯絡資訊 icon 對齊 */
.contact-info .info-row { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; margin-bottom: 18px; align-items: start; }
.contact-info .info-row svg { width: 20px; height: 20px; margin-top: .25rem; }
/* 服務範圍：全寬區塊、按鈕在文字下方 */
.map-cta-block { max-width: var(--container); padding: 36px; margin-top: 72px; }
.map-cta-block .btn { margin-top: 20px; }
/* 手機：表單在聯絡資訊之前 */
@media (max-width: 768px) {
  .split--contact { display: flex; flex-direction: column; }
  .split--contact .form-card { order: 1; }
  .split--contact .contact-info { order: 2; }
  .form-card .form { padding: clamp(20px, 6vw, 32px); }
}
@media (max-width: 560px) {
  .form__grid { grid-template-columns: 1fr; }
  .type-chips { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   services — 服務卡、案例卡、深色區、方案卡
   ============================================================ */
.services-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.services-grid .svc-card { min-height: 360px; }
.svc-card .num { position: absolute; top: 20px; left: clamp(2rem, 3.4vw, 2.7rem); font-size: 13px; color: var(--accent); margin: 0; }
.svc-card .tags span { min-width: 96px; min-height: 34px; justify-content: center; }
/* 案例卡圖片比例 4/5、卡片寬 280 置中 */
.case-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); justify-content: center; }
.case-grid .card > img { aspect-ratio: 4 / 5; object-fit: cover; }
/* 深色「刊登後會出現在哪裡」小卡 */
.section--dark .step { color: var(--cream); }
.section--dark .step h3, .section--dark .step p { color: var(--cream); }
/* 方案卡：推薦上移 + badge */
.card.is-featured { transform: translateY(-12px); }
@media (max-width: 920px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .card.is-featured { transform: none; }
}
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

/* ============================================================
   works — nav active、篩選列、列表卡、推薦區
   ============================================================ */
.nav__links a.is-active:not(.btn)::after { bottom: -6px; }
.filterbar { margin-top: 24px; padding: 22px 24px; border-radius: 8px; grid-template-columns: 150px 150px 150px 1fr auto; gap: 14px; }
.filterbar .btn--primary { width: 120px; }
.page-works .work { min-height: 520px; }
.page-works .work__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.work .badge--corner { top: 12px; right: 12px; padding: 5px 10px; border-radius: 999px; font-size: 12px; }
.load-more { margin: 48px auto 0; }
.load-more .btn--ghost { border-color: var(--accent); color: var(--accent); }
@media (max-width: 860px) {
  .filterbar { grid-template-columns: 1fr 1fr; }
  .filterbar .field:nth-last-child(2) { grid-column: 1 / -1; }
  .filterbar .btn--primary { width: 100%; }
}
@media (max-width: 480px) { .filterbar { grid-template-columns: 1fr; } }

/* ============================================================
   req-441：首頁 Hero 右側改為「5 條活動跑馬燈」取代原插圖。
   範圍僅 index.html（.hero--split 全站僅首頁使用，子頁 page-hero 不動）。
   - 移除原右側大圖後，req-430 為配合大方圖撐高的超大 padding 已失去意義，
     在此把 hero 高度收回合理值（與「還原 Hero」相近），避免大片深色空白。
   - 5 條跑馬燈奇數列往左、偶數列往右、各列速度略不同；hover 暫停可點。
   - 軌道內容「重複兩份」配合 translateX(-50%) 達成無縫循環。
   - 邊緣用 mask 漸隱，避免 chip 撞到色塊左右邊；尊重 reduce-motion。
   橫向仍由 .container 置中＋內距控制，全部用 clamp() 維持 RWD。
   ============================================================ */
.hero--split .hero__grid {
  padding: clamp(48px, 7vw, 88px) 0;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero--split .hero__title { font-size: clamp(28px, 4vw, 40px); line-height: 1.3; margin-bottom: .35em; }
.hero--split .hero__sub   { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7; margin-bottom: 1.4rem; }
.hero--split .hero__cta   { gap: clamp(.9rem, 2vw, 1.2rem); }
.hero--split .hero__cta .btn--lg { padding: .85em 2em; font-size: clamp(16px, .5vw + .9rem, 18px); min-height: 48px; }

/* 跑馬燈容器：5 列直向堆疊，填滿右欄寬度 */
.hero__marquees {
  display: flex; flex-direction: column;
  gap: clamp(.55rem, 1.1vw, .85rem);
  width: 100%; min-width: 0;
}
.marquee {
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee__track {
  display: flex; flex-wrap: nowrap; width: max-content;
  gap: clamp(.5rem, 1vw, .8rem);
  will-change: transform;
  animation: marquee-left 34s linear infinite;
}
.marquee--reverse .marquee__track { animation-name: marquee-right; }
/* 各列速度略不同，避免整齊劃一、更自然 */
.marquee:nth-child(1) .marquee__track { animation-duration: 36s; }
.marquee:nth-child(2) .marquee__track { animation-duration: 42s; }
.marquee:nth-child(3) .marquee__track { animation-duration: 32s; }
.marquee:nth-child(4) .marquee__track { animation-duration: 46s; }
.marquee:nth-child(5) .marquee__track { animation-duration: 38s; }
/* hover/聚焦任一列即暫停該列，方便點擊 chip */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@keyframes marquee-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

/* 活動 chip：暖白膠囊 + 主色分類標，深色 hero 上對比清楚 */
.m-chip {
  display: inline-flex; align-items: center; gap: .55em; flex: 0 0 auto;
  white-space: nowrap; padding: .58em 1.05em;
  background: rgba(253,250,244,.96);
  border: 1px solid rgba(231,183,159,.55);
  border-radius: 999px; color: var(--ink);
  font-family: var(--ff); font-weight: 600;
  font-size: clamp(.9rem, .35vw + .84rem, 1.02rem); line-height: 1.4;
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.m-chip:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 24px rgba(0,0,0,.28); }
.m-chip__tag {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  background: var(--accent); color: #fdf8f1;
  font-size: .8em; font-weight: 700; letter-spacing: .02em;
  padding: .22em .72em; border-radius: 999px;
}

@media (max-width: 860px) {
  /* 手機：圖文堆疊，跑馬燈在文字下方，列數與高度自然收斂 */
  .hero--split .hero__grid { padding: clamp(40px, 9vw, 64px) 0; gap: clamp(1.6rem, 5vw, 2.2rem); }
  .hero__marquees { gap: clamp(.5rem, 2vw, .7rem); }
}

/* 尊重減少動態偏好：停止捲動，跑馬燈退化為靜態活動清單 */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none !important; transform: none !important; }
}

/* ---------- 本週熱門優惠：圖文輪播 ---------- */
.promo { position: relative; margin-top: clamp(.6rem, 2vw, 1.2rem); }
.promo__viewport { overflow: hidden; border-radius: var(--radius-lg); }
.promo__track {
  display: flex;
  transition: transform .55s cubic-bezier(.4, .0, .2, 1);
  will-change: transform;
}
.promo__slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  background: #fffdf8;
  border: var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.promo__media { position: relative; }
.promo__media img {
  width: 100%; height: 100%; min-height: 220px;
  object-fit: cover; display: block;
}
.promo__media .badge--corner {
  position: absolute; top: 1rem; left: 1rem;
  box-shadow: 0 4px 12px rgba(47,42,36,.22);
}
.promo__body {
  display: flex; flex-direction: column;
  padding: clamp(1.8rem, 3.6vw, 2.8rem) clamp(1.6rem, 3.4vw, 2.6rem);
}
.promo__body .work__cat { color: var(--accent-dark); }
.promo__body h3 {
  font-size: clamp(1.45rem, 1.6vw + 1.05rem, 1.9rem);
  line-height: 1.4; margin: .55rem 0 .7rem;
}
.promo__body p {
  color: var(--text); margin: 0 0 1.2rem;
  font-size: clamp(1.1rem, .45vw + 1.02rem, 1.22rem); line-height: 1.95;
}
.promo__body .mt-2 { margin-top: auto; }
.promo__body .pill {
  background: var(--accent); color: #fdf8f1; font-weight: 700;
  padding: .7em 1.6em; box-shadow: 0 4px 12px rgba(217,106,61,.22);
}
.promo__body .pill:hover { background: var(--accent-dark); color: #fdf8f1; }

/* 箭頭 */
.promo__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  width: clamp(40px, 4vw, 48px); height: clamp(40px, 4vw, 48px);
  border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255,253,248,.94); color: var(--ink);
  box-shadow: 0 6px 18px rgba(42,23,17,.22);
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.promo__arrow svg { width: 55%; height: 55%; }
.promo__arrow:hover { background: var(--accent); color: #fdf8f1; }
.promo__arrow--prev { left: clamp(.4rem, 1.4vw, 1rem); }
.promo__arrow--next { right: clamp(.4rem, 1.4vw, 1rem); }

/* 圓點 */
.promo__dots {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .55rem; margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
}
.promo__dot {
  width: 11px; height: 11px; padding: 0; border: none; cursor: pointer;
  border-radius: 999px; background: rgba(42,23,17,.22);
  transition: background .2s ease, transform .2s ease;
}
.promo__dot:hover { background: rgba(42,23,17,.4); }
.promo__dot.is-active { background: var(--accent); transform: scale(1.25); }

@media (max-width: 760px) {
  .promo__slide { grid-template-columns: 1fr; }
  .promo__media img { min-height: clamp(170px, 42vw, 240px); }
  .promo__arrow { width: 38px; height: 38px; }
}

/* 尊重減少動態偏好：取消滑動轉場 */
@media (prefers-reduced-motion: reduce) {
  .promo__track { transition: none; }
}

/* ============================================================
   req-442：全站 Hero 高度「縮 1/2」。
   範圍（全站）：① 首頁 .hero--split（深咖色塊）；② 子頁 .page-hero
   （about / services / works / contact）。
   作法：以目前生效層（req-441 首頁層、子頁還原層 line 1165）為基準，
   把 Hero 垂直留白（上下 padding）約砍半，並同步收緊 Hero 內容的
   垂直節奏（標題/副標下緣間距、首頁跑馬燈列距與 chip 上下內距），
   讓「整體色塊高度」約縮一半，同時維持字級階層與可讀性。
   橫向仍由 .container 置中＋clamp() 內距控制，RWD 行為不變。
   置於檔尾，覆寫前面所有 Hero 高度層。
   ============================================================ */

/* ① 首頁 hero--split：上下 padding 砍半（桌機 88→44 上限） */
.hero--split .hero__grid { padding: clamp(24px, 3.5vw, 44px) 0; }
/* 文字欄垂直節奏收緊（字級／階層不變，只收下緣間距） */
.hero--split .hero__title { margin-bottom: .25em; }
.hero--split .hero__sub   { margin-bottom: .9rem; }
/* 右側跑馬燈：列距與 chip 上下內距收緊，5 列整體高度同步收約一半 */
.hero__marquees { gap: clamp(.3rem, .6vw, .48rem); }
.m-chip { padding-top: .34em; padding-bottom: .34em; }

/* ② 子頁 page-hero：上下 padding 砍半（72→36 / 64→32 上限） */
.page-hero { padding: clamp(22px, 3.5vw, 36px) 0 clamp(20px, 3vw, 32px); }
.page-hero h1 { margin-bottom: .3em; }

/* 手機：首頁 Hero padding 同步砍半（64→32 上限） */
@media (max-width: 860px) {
  .hero--split .hero__grid { padding: clamp(20px, 4.5vw, 32px) 0; }
}

/* ============================================================
   req-444：首頁深咖啡色塊（hero--split）整體高度收至約 150px。
   原渲染高度約 1675px → 目標 ≈ 150px（僅 index.html 使用此 class，
   其餘 4 頁不含 .hero--split / .hero__marquees / .m-chip，全不受影響）。
   作法：① 上下 padding 收到極小；② 左欄收緊垂直節奏、副標收掉以壓低
   色塊高度；③ 右側 5 列跑馬燈壓成薄帶（固定高度 + overflow:hidden，
   仍可水平捲動）。橫向仍由 .container 置中 + clamp() 內距，RWD 不變。
   置於檔尾，覆寫前面所有 hero--split 高度層。
   ============================================================ */
.hero--split .hero__grid {
  padding: clamp(8px, 1.4vw, 14px) 0;
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: center;
}
.hero--split .hero__inner { gap: clamp(.45rem, 1vw, .7rem); }
.hero--split .hero__title {
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.18;
  margin-bottom: .2em;
}
/* 收掉副標以把色塊壓到 ~150px（內容仍由標題＋CTA 表達） */
.hero--split .hero__sub { display: none; }
.hero--split .hero__cta { gap: clamp(.5rem, 1.4vw, .8rem); margin: 0; }
.hero--split .hero__cta .btn--lg {
  padding: .5em 1.2em;
  font-size: clamp(13px, .9vw, 15px);
  min-height: 0;
}
/* 右側跑馬燈：壓成薄帶，固定高度 + 隱藏溢出，列距/chip 內距收緊 */
.hero--split .hero__marquees {
  gap: clamp(4px, .6vw, 7px);
  max-height: 126px;
  overflow: hidden;
}
.hero--split .m-chip {
  padding-top: .2em;
  padding-bottom: .2em;
  font-size: clamp(.74rem, .85vw, .84rem);
}

@media (max-width: 860px) {
  .hero--split .hero__grid { padding: clamp(8px, 2vw, 12px) 0; }
  .hero--split .hero__marquees { max-height: 96px; }
}

/* ============================================================
   設計師改版（2026/06）：首頁全寬活動輪播 Hero（home-promo-carousel）
   取代原 .hero--split marquee hero。位置：header 下方、全寬。
   左 HTML 文案＋CTA、右活動圖片，深咖→透明漸層融合，右下數字分頁 1–5、
   白色半透明圓箭頭（hover 橘），autoplay 5s、hover 暫停、鍵盤、aria-live。
   全部 HTML 疊圖、文字不燒進圖；橫向由內層 .container 置中＋內距控制 RWD。
   置於檔尾，為最終權威層。
   ============================================================ */
.home-promo-carousel { position: relative; width: 100%; background: var(--ink); overflow: hidden; isolation: isolate; }
.hpc__viewport { position: relative; overflow: hidden; }
.hpc__track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); will-change: transform; }
.hpc__slide { position: relative; flex: 0 0 100%; min-width: 100%; height: clamp(320px, 34vw, 400px); }
.hpc__media { position: absolute; inset: 0; z-index: 0; }
.hpc__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
.hpc__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #2B140E 0%, rgba(43,20,14,.88) 42%, rgba(43,20,14,.15) 100%); }
.hpc__content { position: relative; z-index: 2; height: 100%; width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  display: flex; flex-direction: column; justify-content: center; }
.hpc__inner { max-width: 46%; }
.hpc__tag { display: inline-flex; align-items: center; background: var(--accent); color: #fff; font-weight: 700;
  font-size: 13px; letter-spacing: .04em; padding: .36em .95em; border-radius: 999px; margin-bottom: 1rem; }
.hpc__title { color: #fff; font-family: var(--ff-serif); font-weight: 700;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.3; margin: 0 0 .55rem; text-shadow: 0 3px 18px rgba(0,0,0,.45); }
.hpc__sub { color: #FFF3E8; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; margin: 0 0 1.5rem;
  max-width: 34ch; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hpc__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hpc__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hpc__cta .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* 白色半透明圓箭頭（hover 橘）；手機隱藏，只留數字分頁 */
.hpc__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(4px);
  transition: background .2s ease, color .2s ease; }
.hpc__arrow:hover { background: var(--accent); color: #fff; }
.hpc__arrow svg { width: 22px; height: 22px; }
.hpc__arrow--prev { left: clamp(10px, 2vw, 24px); }
.hpc__arrow--next { right: clamp(10px, 2vw, 24px); }

/* 右下數字分頁 1–5 */
.hpc__pagination { position: absolute; right: clamp(16px, 4vw, 40px); bottom: clamp(16px, 3vw, 28px); z-index: 4;
  display: flex; gap: 8px; }
.hpc__pagination button { width: 34px; height: 34px; border: none; cursor: pointer; border-radius: 8px;
  font: inherit; font-weight: 700; font-size: 14px; color: #fff; background: rgba(255,255,255,.35);
  transition: background .2s ease, color .2s ease; }
.hpc__pagination button:hover { background: rgba(255,255,255,.55); }
.hpc__pagination button.is-active { background: var(--accent); color: #fff; }

@media (max-width: 860px) { .hpc__inner { max-width: 72%; } }
@media (max-width: 768px) {
  .hpc__slide { height: 400px; }
  .hpc__arrow { display: none; }
  .hpc__veil { background: linear-gradient(90deg, #2B140E 0%, rgba(43,20,14,.86) 56%, rgba(43,20,14,.3) 100%); }
}
@media (max-width: 560px) { .hpc__inner { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hpc__track { transition: none; } }

/* 搜尋框上移與輪播下緣重疊，形成層次卡片 */
.search--float { margin-top: -44px; position: relative; z-index: 5; }
@media (max-width: 480px) { .search--float { margin-top: -24px; } }

/* 中文字體不阻塞首屏（Google Fonts 連結已含 display=swap；保險用 font-display） */
@font-face { font-family: "Noto Sans TC"; font-display: swap; src: local("Noto Sans TC"); }

/* 即時熱門關鍵字小列（取代原 hero 標籤雲，移到輪播下方） */
.hot-keywords { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.hot-keywords .hk-label { font-weight: 700; color: var(--muted); font-size: 14px; }
.hot-keywords a { display: inline-flex; align-items: center; background: var(--card); border: 1px solid rgba(43,20,14,.08);
  color: var(--ink); font-size: 14px; padding: .4em 1em; border-radius: 999px; transition: background .2s, color .2s, border-color .2s; }
.hot-keywords a:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }

/* ---- 首頁分類卡：高度收短（設計師指定，視覺上下更緊湊）、hover 上浮＋淺橘描邊 ---- */
.cat-tile { min-height: 118px; }
.cat-tile:hover { transform: translateY(-4px); border-color: #F3B29A; }
/* ---- 編輯精選「查看更多優惠」與輪播距離收短 ---- */
.section--soft .load-more { margin-top: 40px; }

/* ============================================================
   contact.html — 商家會員申請與優惠刊登（單頁範圍，全部 contact 專屬）
   流程條、Tab 切換、優惠刊登登入卡、照片上傳、欄位錯誤訊息。
   皆沿用 :root 變數與相對單位；以 .contact-page / 專屬 class 收斂，不影響他頁。
   ============================================================ */

/* 流程條：1 會員申請 → 2 審核通過 → 3 登入刊登 */
.flow-steps {
  list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.6vw, 1.1rem); align-items: stretch;
}
.flow-step {
  flex: 1 1 180px; display: flex; align-items: center; gap: .7rem;
  padding: .8em 1.1em; border-radius: var(--radius-lg);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82); font-weight: 600; font-size: clamp(.95rem, .4vw + .88rem, 1.06rem);
}
.flow-step__num {
  flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: rgba(255,255,255,.16); color: #fff;
}
.flow-step.is-current { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(232,93,50,.3); }
.flow-step.is-current .flow-step__num { background: #fff; color: var(--accent); }
.flow-step.is-done { color: #fff; border-color: rgba(255,255,255,.28); }
.flow-step.is-done .flow-step__num { background: var(--accent-soft); color: var(--accent-dark); }

/* Tab 列 */
.tabs { display: flex; gap: .5rem; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem); }
.tab {
  appearance: none; cursor: pointer; background: none; border: 0;
  font: inherit; font-weight: 700; font-size: clamp(1.02rem, .5vw + .94rem, 1.16rem);
  color: var(--muted); padding: .85em 1.2em; position: relative; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color .18s ease, background .18s ease;
}
.tab:hover { color: var(--accent-dark); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--accent); border-radius: 3px 3px 0 0;
}
.tab-panel { animation: tabFade .25s ease; }
.tab-panel[hidden] { display: none; }
@keyframes tabFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 左側聯絡資訊：桌機 sticky，持續可見 */
@media (min-width: 801px) {
  .contact-info__sticky { position: sticky; top: 96px; }
}

/* 「商家可以刊登什麼」三卡標籤：改淡橘 pill（覆寫共用 svc-card 的橄欖綠），僅 contact .list-what */
.list-what .tags span { background: var(--accent-soft); color: var(--accent-dark); }
.list-what .tags span:hover { background: var(--accent); color: #fdf8f1; }

/* 提示框 — 資訊型（會員申請：登入連結說明） */
.notice--info { font-weight: 500; line-height: 1.7; }

/* 欄位錯誤訊息：欄位下方、13px、磚紅 */
.field-error { font-size: 13px; line-height: 1.5; color: #C7361D; margin-top: 2px; }
.field input.is-invalid, .field select.is-invalid, .field textarea.is-invalid { border-color: #C7361D; }
.consent-box + .field-error { margin-top: 6px; }

/* === 優惠刊登：未登入登入卡 === */
.offer-gate {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 2.8rem); text-align: center;
  max-width: 560px; margin: 0 auto clamp(1.6rem, 3vw, 2.4rem);
}
.offer-gate__lock {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark);
}
.offer-gate__lock svg { width: 26px; height: 26px; }
.offer-gate h2 { margin: 0 0 .4em; }
.offer-gate > p { color: var(--muted); margin: 0 0 1.4rem; line-height: 1.9; }
.offer-gate__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.offer-gate__pending {
  margin: 1.4rem auto 0; max-width: 420px; font-size: 14px; line-height: 1.7;
  color: var(--accent-dark); background: var(--accent-soft); border-radius: var(--radius-sm); padding: .7em 1em;
}

/* 優惠刊登表單外框：示意（登入並通過審核後啟用） */
.offer-form-wrap { max-width: 820px; margin: 0 auto; }

/* === 照片上傳 === */
.btn--sm { padding: .45em 1.1em; font-size: clamp(.92rem, .3vw + .86rem, 1rem); }
.photo-upload { display: flex; flex-direction: column; gap: .6rem; }
.photo-upload__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 132px; padding: 1.2rem; cursor: pointer; text-align: center;
  border: 2px dashed #D8C7B6; border-radius: var(--radius-lg); background: #FFFDF8;
  color: var(--muted); font-weight: 600; transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.photo-upload__drop:hover { border-color: var(--accent); color: var(--accent-dark); background: #fff9f3; }
.photo-upload__drop svg { width: 28px; height: 28px; color: var(--accent); }
.photo-upload__preview { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.photo-upload__preview img {
  width: 160px; height: 120px; object-fit: cover; border-radius: var(--radius); background: var(--sand);
  border: 1px solid var(--line);
}

/* 欄位框線統一（設計師指定淺米框 + 橘 focus），僅 contact 範圍 */
.contact-page .field input,
.contact-page .field select,
.contact-page .field textarea { border-color: #D8C7B6; }
.contact-page .field input:focus,
.contact-page .field select:focus,
.contact-page .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,93,50,.12); }

@media (max-width: 560px) {
  .flow-step { flex: 1 1 100%; }
  .offer-gate__actions .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   req-450：多頁 RWD / 視覺一致性收口（orchestrator 彙整 6 個並行 Haiku
   agent 的 scoped CSS 規格，default model 收口去衝突後 append）。
   單一共用樣式：全部沿用 :root 變數與相對單位（clamp/rem/%/fr/minmax），
   不寫死固定像素寬度；置於檔尾為最終權威層，依 foundation→各頁順序覆寫。
   涵蓋：footer 欄寬/按鈕/表單對比(foundation)、about 核心價值卡、
   contact 表單 textarea/服務範圍/標籤、index 輪播對比/搜尋列、
   services 案例圖/字級/推薦徽章、works hero 副標/篩選列/卡片字級。
   ============================================================ */
/* ============================================================
   Foundation Agent — 全站共用元件一致性收口
   處理：Footer、按鈕、表單、麵包屑、容器 — 相對單位 + :root 變數
   ============================================================ */

/* ---- Footer 欄寬：從固定 1.4fr 1fr 1.4fr 改為響應式 auto-fit ---- */
.footer__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(2.6rem, 5.5vw, 4.8rem);
}

/* ---- Footer 品牌欄：文字寬度控制避免不自然換行，line-height 提升可讀性 ---- */
.footer__brand p {
  max-width: 38ch;
  line-height: 2;
}

/* ---- Footer 聯絡欄位：列表項目 max-width + line-height，避免詞語被拆行 ---- */
.site-footer li {
  max-width: 40ch;
  line-height: 2.05;
}

/* ---- Footer 社群 icon：確保最小點擊面積 44px ---- */
.footer__social a {
  width: clamp(40px, 6.5vw, 48px);
  height: clamp(40px, 6.5vw, 48px);
  min-width: 44px;
  min-height: 44px;
}

/* ---- 全站按鈕一致：相對內距 + min-height + hover 狀態 ---- */
.btn {
  padding: 0.6em 1.4em;
  border-radius: 6px;
  font-size: clamp(15px, 0.5vw + 0.9rem, 16px);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn--primary {
  min-height: 48px;
  background: var(--accent);
  color: #fdf8f1;
  border: none;
}
.btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}
.btn--ghost {
  min-height: 40px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}
.btn--ghost:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fdf8f1;
}
.btn--lg {
  min-height: 48px;
  padding: 0.85em 2em;
}

/* ---- 表單 placeholder 對比：從 #B7A69B 深化至 #8A786B（淺底可讀） ---- */
.field input::placeholder,
.field textarea::placeholder {
  color: #8A786B;
}

/* ---- 麵包屑 對比：從 #CDB8A9 調亮至 #E7D3C4（深色 hero 上提升可讀） ---- */
.breadcrumb {
  color: #E7D3C4;
  font-size: clamp(13px, 0.4vw + 0.8rem, 14px);
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.breadcrumb a {
  color: #E7D3C4;
  transition: color 0.2s ease;
}
.breadcrumb a:hover {
  color: #fdf8f1;
}

/* ---- Container 確認：max-width + margin-inline + padding-inline（RWD） ---- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.4rem);
}

/* ---- 表單欄位統一（contact 與全站一致） ---- */
.field input,
.field select,
.field textarea {
  min-height: 44px;
  border: 1px solid #D9C7B8;
  border-radius: 2px;
  padding: 0 14px;
  background: #FFFDF9;
  font-size: clamp(15px, 0.5vw + 0.9rem, 16px);
  color: var(--text);
  font-family: var(--ff);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea {
  padding: 12px 14px;
  min-height: 140px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 93, 50, 0.12);
}

/* ---- 表單輔助文字 ---- */
.field label .req,
.req {
  color: var(--accent);
}
.form-note,
.count-hint {
  color: var(--muted);
  font-size: clamp(13px, 0.4vw + 0.8rem, 14px);
  margin-top: 0.4rem;
}

/* ---- Header nav button：header 右上 CTA 維持協調的文字與內距比例 ---- */
.nav__cta .btn {
  padding: 0.65em 1.6em;
  min-height: 44px;
}

/* ============================================================ */

/* ============================================================
   about.html — 核心價值卡片：高度自適應、icon尺寸相對、內距合理
   ============================================================ */
.section--soft .grid--3 .card {
  min-height: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  gap: clamp(1.2rem, 2vw, 1.6rem);
}

.section--soft .grid--3 .card .card__ico {
  width: clamp(48px, 4vw, 60px);
  height: clamp(48px, 4vw, 60px);
  margin-bottom: clamp(1rem, 1.5vw, 1.4rem);
}

.section--soft .grid--3 .card .card__ico svg {
  width: clamp(20px, 2vw, 28px);
  height: clamp(20px, 2vw, 28px);
}

.section--soft .grid--3 .card h3 {
  font-size: clamp(1.2rem, 1.4vw + 1rem, 1.4rem);
  line-height: 1.5;
  margin-bottom: clamp(0.7rem, 1.2vw, 1rem);
}

.section--soft .grid--3 .card p {
  font-size: clamp(1.05rem, 0.5vw + 1rem, 1.18rem);
  line-height: 1.9;
  margin-bottom: 0;
}

/* ============================================================
   contact.html — 商家申請表單、服務範圍、標籤統一響應式排版
   修復 textarea、表單間距、服務卡、chips 尺寸統一
   ============================================================ */

/* 1. textarea 排版修正：確保寬度 100% 跨滿整列、.count-hint 定位在右下 */
.contact-page .field.full {
  grid-column: 1 / -1;
}
.contact-page .textarea-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.contact-page .field textarea {
  width: 100%;
  display: block;
  padding: 12px 14px;
  min-height: 140px;
}
.contact-page .textarea-wrap .count-hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 12px;
  color: #9A887E;
  pointer-events: none;
  z-index: 1;
}

/* 2. 表單與「服務範圍」間距改為響應式（從固定 72px → clamp） */
.contact-page .section.section--tight {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

/* 3. 服務範圍卡片內容優化：置中、限制寬度、CTA 與文字視覺一致 */
.contact-page .map-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 2.8rem);
}
.contact-page .map-cta-block h2 {
  margin-bottom: 0.5em;
  font-size: clamp(22px, 3vw, 28px);
}
.contact-page .map-cta-block p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(14px, 0.5vw + 1rem, 16px);
  max-width: 100%;
  line-height: 1.7;
}
.contact-page .map-cta-block .btn {
  align-self: center;
  padding: 0.7em 1.8em;
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
  min-height: 44px;
}

/* 4. 全站 CTA / 小標籤尺寸統一：相對內距 + 響應式字級 */
/* 流程步驟編號圓圈 + 標籤一致化 */
.contact-page .flow-step {
  padding: 0.75em 1.2em;
  font-size: clamp(14px, 0.5vw + 0.88rem, 16px);
}
.contact-page .flow-step__num {
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* 5. 左側活動類型 chips：改為響應式相對寬度（移除固定 120px） */
.contact-page .type-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.contact-page .type-chips .pill {
  padding: 0.65em 0.9em;
  font-size: clamp(13px, 0.4vw + 0.85rem, 14px);
  min-height: 40px;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.3;
}
.contact-page .pill--static {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid var(--accent-soft);
  cursor: default;
}

/* 6. 服務卡標籤統一：相對內距、一致字級 */
.contact-page .list-what .svc-card .tags span {
  padding: 0.65em 1em;
  font-size: clamp(13px, 0.4vw + 0.9rem, 14px);
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1.3;
}

/* 7. Google 地圖按鈕與其他 CTA 統一視覺 */
.contact-page .btn--ghost {
  padding: 0.7em 1.6em;
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
  min-height: 44px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.contact-page .btn--ghost:hover {
  transform: translateY(-2px);
}

/* 8. 送出按鈕：統一尺寸 */
.contact-page .btn--block {
  padding: 0.75em 2em;
  font-size: clamp(15px, 0.5vw + 1rem, 16px);
  min-height: 48px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 9. 響應式調整：手機時 textarea 文字提示改位置 */
@media (max-width: 560px) {
  .contact-page .type-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-page .map-cta-block .btn {
    width: 100%;
  }
}

/* ============================================================
   index.html — 首頁輪播、搜尋、分類卡、精選卡 UI 對比度 & 可用性改善
   ============================================================ */

/* 1) Hero 輪播箭頭：提高背景不透明度與對比度
   原 rgba(255,255,255,.28) 太淡，改為深咖半透明 + 邊框，確保暗圖上也清楚 */
.hpc__arrow {
  background: rgba(43, 20, 14, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.hpc__arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* 2) 數字分頁按鈕：提高對比度、放大可點擊區
   背景從 rgba(255,255,255,.35) 改為深咖半透明 + 邊框
   min-width/min-height 用 em 放大，padding 一致化 */
.hpc__pagination button {
  background: rgba(43, 20, 14, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.3);
  min-width: 2.4em;
  min-height: 2.4em;
  padding: 0.35em 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.hpc__pagination button:hover {
  background: rgba(43, 20, 14, 0.65);
  border-color: rgba(255, 255, 255, 0.5);
}

.hpc__pagination button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 3) 精選輪播箭頭：改進定位與側距
   從靠近邊緣 .4rem 改為更寬鬆的定位，避免遮擋內容 */
.promo__arrow--prev {
  left: clamp(1rem, 3vw, 2rem);
}

.promo__arrow--next {
  right: clamp(1rem, 3vw, 2rem);
}

/* 4) 搜尋表單欄位統一高度與按鈕相對寬度
   所有欄位（input/select/date）與搜尋按鈕用同一 min-height
   搜尋按鈕改為相對寬度（min-width + flex），手機自然換行 */
.search .field {
  display: flex;
  flex-direction: column;
}

.search .field label {
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.search .field input,
.search .field select,
.search .field input[type="date"] {
  min-height: 3rem;
  padding: 0.75em 1em;
  font-family: var(--ff);
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search .field input:focus,
.search .field select:focus,
.search .field input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 93, 50, 0.1);
}

.search__btn {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.search__btn .btn {
  min-width: 10em;
  min-height: 3rem;
  width: 100%;
  padding: 0.8em 1.75em;
}

/* 5) 按鈕階層統一：相對單位 padding/radius/font-size */
.hpc__cta .btn--lg {
  padding: 0.95em 2.2em;
  font-size: clamp(1.08rem, 0.6vw + 1rem, 1.22rem);
  min-height: 3rem;
  border-radius: var(--radius-sm);
}

/* (全站 .btn--primary / .btn--ghost 一致性交由 foundation 層；此處僅保留首頁專屬 .hpc__cta / .search__btn 按鈕) */

/* 6) 搜尋列與分類卡容器對齐確保包裹在 .container 內
   並統一頂部留白距離 */
.section--tight {
  padding-top: clamp(1.1rem, 2.5vw, 1.7rem);
  padding-bottom: clamp(1.1rem, 2.5vw, 1.7rem);
}

/* RWD：平板與手機搜尋表單響應式調整 */
@media (max-width: 768px) {
  .search .field input,
  .search .field select,
  .search .field input[type="date"] {
    min-height: 2.75rem;
    padding: 0.65em 0.9em;
    font-size: 1rem;
  }

  .search__btn .btn {
    min-height: 2.75rem;
    padding: 0.8em 1.5em;
  }
}

@media (max-width: 480px) {
  .search .field input,
  .search .field select,
  .search .field input[type="date"] {
    min-height: 2.5rem;
    padding: 0.6em 0.8em;
    font-size: 0.95rem;
  }

  .search__btn .btn {
    min-height: 2.5rem;
    padding: 0.7em 1.3em;
    font-size: 1rem;
  }
}

/* ============================================================
   services.html 優化：字級統一、圖片裁切、CTA 按鈕、Badge 定位
   ============================================================ */

/* 1. 案例卡片圖片比例調整：4/5 → 4/3（menu-visual.png 640×480 4:3），避免淺色空白 */
.case-grid .card > img { 
  aspect-ratio: 4 / 3; 
  object-fit: cover; 
  object-position: center;
  width: 100%;
  height: auto;
  display: block;
}

/* 2. 案例卡片內文字級與行高提升（內容區塊） */
.case-grid .card h3 {
  font-size: clamp(1.26rem, 1.8vw + 1rem, 1.48rem);
  margin-top: clamp(1.2rem, 2vw, 1.6rem);
  margin-bottom: 0.6em;
  line-height: 1.4;
}

.case-grid .card p {
  font-size: clamp(1.08rem, 0.5vw + 1.02rem, 1.2rem);
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1.2em;
}

/* 3. 統一小按鈕樣式：.btn-sm（.pill class 下的按鈕） */
.btn-sm {
  display: inline-block;
  padding: 0.6em 1.4em;
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.16rem);
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-align: center;
  line-height: 1.5;
}

.btn-sm:hover {
  background: rgba(232, 93, 50, 0.15);
  transform: translateY(-2px);
}

/* 4. 服務卡片（.svc-card）內文字級與 tags 按鈕統一 */
.svc-card .card__ico {
  width: clamp(48px, 6vw, 56px);
  height: clamp(48px, 6vw, 56px);
  margin-bottom: 1.2rem;
}

.svc-card h3 {
  font-size: clamp(1.32rem, 1.5vw + 1.08rem, 1.52rem);
  margin-bottom: 0.8em;
  line-height: 1.35;
}

.svc-card > p {
  font-size: clamp(1.08rem, 0.5vw + 1.02rem, 1.2rem);
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1rem;
}

.svc-card .tags span {
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.16rem);
  padding: 0.6em 1.4em;
  font-weight: 600;
  background: var(--trust-soft);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  display: inline-block;
  line-height: 1.5;
  white-space: nowrap;
}

/* 5. 價格方案卡片：推薦卡片預留 badge 空間，優化定位 */
.card.is-featured {
  padding-top: clamp(3.2rem, 5vw, 4rem);
  position: relative;
}

.plan-badge {
  position: absolute;
  top: clamp(-0.6rem, -1vw, -0.85rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: clamp(0.88rem, 0.35vw + 0.82rem, 1rem);
  font-weight: 700;
  padding: 0.4em 1.2em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(196, 107, 74, 0.3);
  z-index: 10;
}

/* 6. 價格方案卡片清單與內文字級統一 */
.pricing-grid .card h3 {
  font-size: clamp(1.3rem, 1.6vw + 1.06rem, 1.5rem);
  margin-bottom: 0.8em;
  line-height: 1.35;
}

.pricing-grid .card p {
  font-size: clamp(1.08rem, 0.5vw + 1.02rem, 1.2rem);
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1.4em;
}

.pricing-grid .checklist li {
  font-size: clamp(1.06rem, 0.4vw + 1.01rem, 1.18rem);
  line-height: 1.8;
  padding: 0.5em 0;
  color: var(--text);
}

.pricing-grid .btn--primary {
  font-size: clamp(1.06rem, 0.4vw + 1.01rem, 1.18rem);
  padding: 0.8em 1.8em;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* 7. 深色區塊文字細化 */
.section--dark .step h3 {
  font-size: clamp(1.38rem, 1.4vw + 1.12rem, 1.64rem);
  margin-bottom: 0.7em;
  color: #fbf6ee;
  line-height: 1.35;
}

.section--dark .step p {
  font-size: clamp(1.06rem, 0.5vw + 1.02rem, 1.18rem);
  line-height: 1.9;
  color: rgba(255, 248, 238, 0.82);
  margin: 0;
}

.section--dark .step::before {
  width: clamp(42px, 5vw, 48px);
  height: clamp(42px, 5vw, 48px);
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.05rem);
}

/* 8. 分頁卡片統一內文字級 */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
  margin-top: clamp(1rem, 2vw, 1.4rem);
}

/* 9. 行動裝置 RWD 調整 */
@media (max-width: 920px) {
  .plan-badge {
    top: clamp(-0.5rem, -1vw, -0.75rem);
  }
  
  .card.is-featured {
    padding-top: clamp(2.8rem, 4vw, 3.6rem);
  }
}

@media (max-width: 600px) {
  .case-grid .card h3,
  .pricing-grid .card h3,
  .svc-card h3 {
    font-size: 1.2rem;
  }
  
  .plan-badge {
    font-size: 0.85rem;
    padding: 0.35em 1rem;
  }
}

/* ============================================================
   works.html — Hero、篩選列、優惠卡、推薦區響應式修正
   改進重點：
   1) Hero 副標孤行：用 max-width + text-wrap:balance 避免孤行
   2) 篩選列固定 px → 相對單位：grid-template-columns 改 minmax/fr
   3) 優惠卡文字：統一內文字級、行高、padding
   4) 所有值用 clamp() / rem / % 相對單位，無固定 px
   ============================================================ */

/* ---- Hero 副標：容器限寬 + 防孤行 ---- */
.page-works .page-hero__subtitle-wrap {
  max-width: clamp(35ch, 90%, 65ch);
}
.page-works .page-hero__subtitle-wrap p {
  text-wrap: balance;
}

/* ---- 篩選列：改為相對單位、響應式欄位比例 ---- */
.page-works .filterbar {
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
  padding: clamp(1.4rem, 2.2vw, 1.6rem);
  gap: clamp(0.7rem, 1.4vw, 1rem);
  grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(130px, 1.6fr) minmax(80px, auto);
}

.page-works .filterbar .field {
  min-width: 0;
}

.page-works .filterbar label {
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.14rem);
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink);
}

.page-works .filterbar select,
.page-works .filterbar input {
  min-height: clamp(44px, 5vw, 48px);
  padding: clamp(0.5em, 0.8vw, 0.65em) clamp(0.7em, 1vw, 0.85em);
  font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.12rem);
  line-height: 1.6;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fffdf8;
  color: var(--text);
  font-family: var(--ff);
}

.page-works .filterbar input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.page-works .filterbar .btn--primary {
  min-height: clamp(44px, 5vw, 48px);
  padding: clamp(0.65em, 0.8vw, 0.75em) clamp(1em, 1.5vw, 1.25em);
  font-size: clamp(1.02rem, 0.35vw + 0.96rem, 1.12rem);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  width: 100%;
}

/* ---- 優惠卡：文字層級與間距統一 ---- */
.page-works .work {
  display: flex;
  flex-direction: column;
  min-height: auto;
}

.page-works .work__cat {
  display: inline-block;
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.16rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: clamp(0.4rem, 0.8vw, 0.6rem);
}

.page-works .work__body h3 {
  font-size: clamp(1.28rem, 1.2vw + 1.08rem, 1.48rem);
  line-height: 1.45;
  margin: 0.4rem 0 0.7rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-works .deal-meta {
  font-size: clamp(1.02rem, 0.4vw + 0.96rem, 1.12rem);
  line-height: 1.7;
  color: var(--muted);
  margin: clamp(0.3rem, 0.6vw, 0.5rem) 0 clamp(0.8rem, 1.2vw, 1rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.8rem, 1.4vw, 1.1rem);
}

.page-works .work__body p {
  font-size: clamp(1.12rem, 0.4vw + 1.04rem, 1.24rem);
  line-height: 1.85;
  color: var(--text);
  margin: 0 0 clamp(0.8rem, 1.2vw, 1.1rem);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-works .work__body .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fdf8f1;
  font-weight: 700;
  font-size: clamp(1.06rem, 0.4vw + 1rem, 1.18rem);
  line-height: 1.5;
  padding: clamp(0.55em, 0.8vw, 0.65em) clamp(1.2em, 1.6vw, 1.45em);
  min-height: clamp(42px, 5vw, 48px);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(232, 93, 50, 0.22);
  transition: background 0.2s ease, transform 0.2s ease;
}

.page-works .work__body .pill:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}

.page-works .work .badge--corner {
  top: clamp(0.6rem, 1.2vw, 1rem);
  right: clamp(0.6rem, 1.2vw, 1rem);
  padding: clamp(0.3em, 0.5vw, 0.4em) clamp(0.6em, 0.9vw, 0.75em);
  font-size: clamp(0.9rem, 0.35vw + 0.84rem, 1rem);
  border-radius: 999px;
}

/* ---- 卡片內容區間距優化 ---- */
.page-works .work__body {
  padding: clamp(1.6rem, 2.8vw, 2.2rem) clamp(1.4rem, 2.6vw, 1.9rem);
  gap: clamp(0.3rem, 0.6vw, 0.5rem);
}

.page-works .work__body .mt-2 {
  margin-top: auto;
  padding-top: clamp(0.3rem, 0.6vw, 0.5rem);
}

/* ---- 載入更多按鈕 ---- */
.page-works .load-more {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
}

.page-works .load-more .btn--ghost {
  padding: clamp(0.7em, 1vw, 0.85em) clamp(1.8em, 2.5vw, 2.2em);
  font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.2rem);
  min-height: clamp(46px, 5vw, 50px);
  font-weight: 700;
  border-width: 2px;
  border-color: var(--accent);
  color: var(--accent);
}

.page-works .load-more .btn--ghost:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
}

/* ---- 推薦區卡片同步優化 ---- */
.page-works .section--soft .work__cat {
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.16rem);
}

.page-works .section--soft .work__body h3 {
  font-size: clamp(1.28rem, 1.2vw + 1.08rem, 1.48rem);
  line-height: 1.45;
}

.page-works .section--soft .deal-meta {
  font-size: clamp(1.02rem, 0.4vw + 0.96rem, 1.12rem);
  line-height: 1.7;
}

.page-works .section--soft .work__body p {
  font-size: clamp(1.12rem, 0.4vw + 1.04rem, 1.24rem);
  line-height: 1.85;
}

.page-works .section--soft .work__body .pill {
  font-size: clamp(1.06rem, 0.4vw + 1rem, 1.18rem);
  padding: clamp(0.55em, 0.8vw, 0.65em) clamp(1.2em, 1.6vw, 1.45em);
  min-height: clamp(42px, 5vw, 48px);
}

/* ---- 響應式調整：平板/手機 ---- */
@media (max-width: 860px) {
  .page-works .filterbar {
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);
  }
  .page-works .filterbar .field:nth-last-child(2) {
    grid-column: 1 / -1;
  }
  .page-works .filterbar .btn--primary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .page-works .filterbar {
    grid-template-columns: 1fr;
  }
  .page-works .filterbar .field {
    grid-column: auto;
  }
}


/* ============================================================
   2026/06 多頁 UI 修復收口（orchestrator 彙整 — append-override）
   contact / 首頁(page-home) / services / works 四頁問題集中修正。
   全部 scope 在各頁 body class 之下，沿用 :root 變數與相對單位（clamp/rem/%/vw），
   不寫死固定像素寬，RWD 不變。置於檔尾、最後生效。
   ============================================================ */

/* === contact 頁修正（append-override）=== */

/* Hero 步驟列：非啟用步驟對比提升 */
.contact-page .flow-step {
  padding: 0.75em 1.2em;
  font-size: clamp(14px, 0.5vw + 0.88rem, 16px);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.9);
}

.contact-page .flow-step__num {
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.95);
}

.contact-page .flow-step.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px rgba(232, 93, 50, 0.3);
}

.contact-page .flow-step.is-current .flow-step__num {
  background: #fff;
  color: var(--accent);
}

/* 左側「歡迎刊登的活動類型」標籤：改為響應式相對寬度與對比度提升 */
.contact-page .type-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
}

.contact-page .type-chips .pill {
  padding: 0.65em 1.1em;
  font-size: clamp(13px, 0.4vw + 0.85rem, 14px);
  min-height: 44px;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.4;
  display: flex;
  align-items: center;
}

.contact-page .pill--static {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  cursor: default;
}

.contact-page .pill--static:hover {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
  transform: none;
}

/* 表單欄位：提升 placeholder 與提示文字的對比度與字級 */
.contact-page .field input::placeholder,
.contact-page .field textarea::placeholder {
  color: #9B8B7E;
  font-size: clamp(13px, 0.4vw + 0.85rem, 14px);
}

.contact-page .field input,
.contact-page .field select,
.contact-page .field textarea {
  border-color: #D8C1AF;
  background: #FFFDF8;
  font-size: clamp(14px, 0.5vw + 0.88rem, 15px);
}

/* Textarea 旁字數提示：提升對比度與字級 */
.contact-page .count-hint {
  font-size: clamp(13px, 0.4vw + 0.85rem, 14px);
  color: var(--muted);
  margin-top: 0.4rem;
  display: block;
}

/* 橘色提示框（notice--info）文字對比度提升 */
.contact-page .notice--info {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
  color: var(--accent);
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
  font-weight: 500;
  line-height: 1.7;
  padding: 0.95em 1.2em;
}

/* 底部說明文字：提升字級與對比度 */
.contact-page .form-note {
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
  line-height: 1.8;
  color: var(--muted);
  margin-top: 0.8rem;
}

/* 表單與下方「服務範圍」卡片間距：收斂成響應式間距 */
.contact-page .section--tight {
  padding-top: clamp(1.4rem, 2.8vw, 2.2rem);
  padding-bottom: clamp(1.4rem, 2.8vw, 2.2rem);
}

/* 統一 CTA、表單送出鈕、Google 地圖按鈕樣式 */
.contact-page .btn--primary {
  padding: 0.8em 1.8em;
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
  min-height: 48px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
}

.contact-page .btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}

.contact-page .btn--ghost {
  padding: 0.7em 1.6em;
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
  min-height: 44px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  background: transparent;
  transition: all 0.2s ease;
}

.contact-page .btn--ghost:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* 服務卡標籤（list-what）統一樣式 */
.contact-page .list-what .svc-card .tags span {
  padding: 0.65em 1em;
  font-size: clamp(13px, 0.4vw + 0.9rem, 14px);
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1.4;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
}

/* 表單標籤樣式統一 */
.contact-page .field label {
  font-weight: 600;
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.contact-page .field label .req {
  color: var(--accent);
  font-weight: 700;
}

.contact-page .field label .opt {
  color: var(--muted);
  font-weight: 500;
}

/* 確認同意欄位：水平排列 */
.contact-page .consent-box {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

.contact-page .consent-box input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 0.35rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.contact-page .consent-box label {
  margin: 0;
  font-weight: 500;
  line-height: 1.7;
  cursor: pointer;
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
}

/* 地圖區塊／服務範圍：響應式容器與按鈕 */
.contact-page .map-cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 1.8vw, 1.4rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  max-width: var(--container);
  margin-inline: auto;
}

.contact-page .map-cta-block h2 {
  margin-bottom: 0.25em;
  font-size: clamp(22px, 2.8vw, 26px);
  line-height: 1.3;
}

.contact-page .map-cta-block p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(14px, 0.5vw + 0.9rem, 15px);
  line-height: 1.8;
}

.contact-page .map-cta-block .btn {
  align-self: flex-start;
  margin-top: 0.4rem;
}

@media (max-width: 560px) {
  .contact-page .map-cta-block .btn {
    width: 100%;
    justify-content: center;
  }
}


.contact-page .form {
  margin-inline: auto;
}

/* === index.html 頁修正（append-override / orchestrator 收口版）=== */

/* hero 內文限制在置中容器寬度 */
.page-home .hpc__content { margin-inline: auto; max-width: var(--container); padding-inline: clamp(1.2rem, 4vw, 2.2rem); position: relative; }

/* 箭頭錨定在置中容器內側：寬螢幕貼齊 container 邊，窄螢幕用安全邊距 */
.page-home .hpc__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: clamp(40px, 4vw, 48px); height: clamp(40px, 4vw, 48px); border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.45); background: rgba(43,20,14,.5); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .22s ease, border-color .22s ease, transform .18s ease;
}
.page-home .hpc__arrow:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.05); }
.page-home .hpc__arrow svg { width: 22px; height: 22px; display: block; }
.page-home .hpc__arrow--prev { left: max(clamp(1rem, 3vw, 2rem), calc(50% - var(--container) / 2 + 1rem)); }
.page-home .hpc__arrow--next { right: max(clamp(1rem, 3vw, 2rem), calc(50% - var(--container) / 2 + 1rem)); }

/* 數字分頁：留在 hero 右下、錨定容器內側、提高非當前頁對比、與搜尋卡保留距離 */
.page-home .hpc__pagination {
  position: absolute; top: auto;
  bottom: clamp(1.6rem, 4.5vw, 3rem);
  right: max(clamp(1rem, 3vw, 2rem), calc(50% - var(--container) / 2 + 1rem));
  z-index: 4; display: flex; gap: 8px;
}
.page-home .hpc__pagination button {
  width: 36px; height: 36px; min-width: 2.4em; min-height: 2.4em;
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-sm);
  background: rgba(43,20,14,.55); color: rgba(255,255,255,.92);
  font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .2s ease;
}
.page-home .hpc__pagination button:hover { background: rgba(43,20,14,.8); border-color: #fff; color: #fff; }
.page-home .hpc__pagination button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); }

/* 浮動搜尋卡與 hero 保留穩定距離 */
.page-home .search--float { margin-top: clamp(-2.6rem, -3vw, -1.6rem); position: relative; z-index: 5; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }

/* 搜尋日期欄位：中文介面字級一致（中文提示由 HTML placeholder/title 處理） */
.page-home .search .field input[type="date"] { font-size: 1rem; line-height: 1.5; color: var(--text); }

/* 精選輪播箭頭：把卡片內縮，箭頭放到外側 gutter，避免覆蓋標題/描述/CTA */
.page-home .promo { padding-inline: clamp(2.4rem, 5vw, 3.4rem); }
.page-home .promo__arrow { z-index: 5; }
.page-home .promo__arrow--prev { left: clamp(.1rem, 1vw, .6rem); }
.page-home .promo__arrow--next { right: clamp(.1rem, 1vw, .6rem); }

/* CTA 按鈕系統一致性（相對單位內距、字級階層、行高） */
.page-home .btn { padding: .65em 1.45em; font-size: clamp(.95rem, .4vw + .88rem, 1.08rem); line-height: 1.5; min-height: 44px; border-radius: var(--radius-sm); }
.page-home .btn--primary { padding: .68em 1.6em; min-height: 48px; }
.page-home .btn--lg { padding: .78em 1.9em; font-size: clamp(1.04rem, .5vw + .96rem, 1.18rem); min-height: 48px; }
.page-home .search__btn .btn { width: 100%; min-height: 48px; }
.page-home .promo__body .pill { font-size: clamp(1.04rem, .4vw + .98rem, 1.16rem); padding: .62em 1.4em; min-height: 46px; border-radius: var(--radius-sm); }

@media (max-width: 760px) {
  .page-home .hpc__arrow { display: none; }
  .page-home .hpc__pagination { bottom: clamp(1.2rem, 4vw, 1.8rem); right: clamp(1.2rem, 4vw, 1.8rem); }
}
@media (max-width: 560px) {
  .page-home .promo { padding-inline: clamp(1.1rem, 5vw, 2rem); }
  .page-home .hpc__pagination button { width: 30px; height: 30px; font-size: .8rem; }
}

/* === services 頁修正（append-override）=== */

.page-services .svc-card .tags span {
  /* 統一膠囊標籤：提高對比度、字級與內距 */
  background: var(--trust-soft);
  color: var(--trust-dark);
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.16rem);
  font-weight: 700;
  padding: 0.65em 1.4em;
  line-height: 1.65;
  min-height: 42px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.page-services .svc-card .tags span:hover {
  background: var(--trust);
  color: #fbf6ee;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 135, 105, 0.24);
}

.page-services .svc-card .tags {
  gap: clamp(0.75rem, 1.2vw, 1rem);
  margin-top: clamp(1.4rem, 2vw, 1.8rem);
}

/* 「適合刊登的內容範例」區塊 - 膠囊按鈕統一 */
.page-services .case-grid .pill {
  background: var(--accent);
  color: #fdf8f1;
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.16rem);
  font-weight: 700;
  padding: 0.65em 1.4em;
  line-height: 1.65;
  min-height: 42px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(196, 107, 74, 0.22);
  transition: all 0.2s ease;
}

.page-services .case-grid .pill:hover {
  background: var(--accent-dark);
  color: #fdf8f1;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(196, 107, 74, 0.32);
}

.page-services .case-grid .pill-row {
  gap: clamp(0.75rem, 1.2vw, 1rem);
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

/* 「刊登後會出現在哪裡？」深色區塊 - 提高卡片與文字對比 */
.page-services .section--dark .step {
  background: rgba(255, 253, 248, 0.12);
  border: 1px solid rgba(231, 183, 159, 0.3);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.page-services .section--dark .step h3 {
  color: #fbf6ee;
  font-size: clamp(1.38rem, 1.4vw + 1.12rem, 1.62rem);
  margin-bottom: 0.75em;
  font-weight: 700;
}

.page-services .section--dark .step p {
  color: rgba(255, 248, 238, 0.95);
  font-size: clamp(1.12rem, 0.45vw + 1.04rem, 1.24rem);
  line-height: 2.05;
  margin: 0;
}

.page-services .section--dark .step::before {
  background: rgba(231, 183, 159, 0.4);
  color: #f0d5c3;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.page-services .section--dark .step:hover::before {
  background: rgba(231, 183, 159, 0.6);
  transform: scale(1.08);
}

/* 全站字級階層改善 - services 頁面 */
.page-services h1 {
  font-size: clamp(28px, 4.4vw, 38px);
  line-height: 1.3;
}

.page-services h2 {
  font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.4;
}

.page-services h3 {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
}

.page-services p,
.page-services .card p,
.page-services .work__body p,
.page-services .step p {
  font-size: clamp(15px, 0.45vw + 0.9rem, 17px);
  line-height: 1.9;
}

.page-services .section__head {
  max-width: 720px;
  margin: 0 auto clamp(2.2rem, 4.5vw, 3.2rem);
}

.page-services .eyebrow {
  font-size: clamp(0.88rem, 0.3vw + 0.82rem, 0.98rem);
  letter-spacing: 0.26em;
  margin-bottom: 1rem;
}

/* 響應式容器確認 */
.page-services .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.2rem);
}

.page-services .hero,
.page-services .page-hero {
  position: relative;
  overflow: hidden;
}

.page-services .grid {
  display: grid;
  gap: var(--gap);
  width: 100%;
}

.page-services .grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

/* 確保卡片內容完整與呼吸感 */
.page-services .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fffdf8;
  border: 1px solid rgba(43, 20, 14, 0.06);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
  box-shadow: 0 14px 36px rgba(43, 20, 14, 0.1);
  transition: transform 0.2s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.page-services .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(43, 20, 14, 0.14);
  border-color: var(--accent-soft);
}

.page-services .card > .mt-3 {
  margin-top: auto;
}

/* 頁尾社群icon對齊與可讀 */
.page-services .footer__social a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff8ee;
  transition: all 0.2s ease;
}

.page-services .footer__social a svg {
  width: 18px;
  height: 18px;
  display: block;
}

.page-services .footer__social a:hover {
  background: var(--accent);
  color: #fdf8f1;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(196, 107, 74, 0.34);
}

/* === works 頁修正（append-override）=== */

/* ---- 篩選列標籤與表單對比度與字級調整 ---- */
.page-works .filterbar .field label {
  font-size: clamp(1.04rem, 0.5vw + 0.94rem, 1.16rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 0.55rem;
}

.page-works .filterbar select,
.page-works .filterbar input {
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.18rem);
  line-height: 1.6;
  color: var(--text);
  padding: clamp(0.65em, 0.8vw, 0.8em) clamp(0.8em, 1vw, 0.95em);
  min-height: 44px;
}

.page-works .filterbar select::placeholder,
.page-works .filterbar input::placeholder {
  color: var(--muted);
  opacity: 0.75;
  font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.14rem);
}

/* ---- 優惠卡片：分類標籤對比與字級 ---- */
.page-works .work__cat {
  display: inline-block;
  font-size: clamp(1.06rem, 0.4vw + 0.98rem, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: clamp(0.5rem, 0.8vw, 0.75rem);
  line-height: 1.4;
}

/* ---- 優惠卡片：標題層級 ---- */
.page-works .work__body h3 {
  font-size: clamp(1.32rem, 1.2vw + 1.1rem, 1.54rem);
  line-height: 1.45;
  margin: 0.4rem 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---- 優惠卡片：地區與截止日期（meta） ---- */
.page-works .deal-meta {
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.16rem);
  line-height: 1.75;
  color: var(--muted);
  margin: clamp(0.4rem, 0.6vw, 0.6rem) 0 clamp(0.9rem, 1.2vw, 1.1rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.9rem, 1.4vw, 1.2rem);
}

.page-works .deal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 500;
}

/* ---- 優惠卡片：內文段落對比度與字級 ---- */
.page-works .work__body p {
  font-size: clamp(1.14rem, 0.4vw + 1.06rem, 1.28rem);
  line-height: 1.9;
  color: var(--text);
  margin: 0 0 clamp(1rem, 1.2vw, 1.2rem);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.01em;
}

/* ---- 優惠卡片：CTA 按鈕統一樣式 ---- */
.page-works .work__body .pill,
.page-works .work__body .pill.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  background: var(--accent);
  color: #fdf8f1;
  font-weight: 700;
  font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.22rem);
  line-height: 1.5;
  padding: clamp(0.65em, 0.8vw, 0.75em) clamp(1.35em, 1.8vw, 1.65em);
  min-height: clamp(44px, 5vw, 50px);
  border-radius: 999px;
  border: none;
  box-shadow: 0 6px 16px rgba(232, 93, 50, 0.28);
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  white-space: nowrap;
  font-family: var(--ff);
  letter-spacing: 0.03em;
}

.page-works .work__body .pill:hover,
.page-works .work__body .pill.link-arrow:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 93, 50, 0.36);
}

.page-works .work__body .pill:active,
.page-works .work__body .pill.link-arrow:active {
  transform: translateY(0);
}

.page-works .work__body .pill:focus-visible,
.page-works .work__body .pill.link-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- 優惠卡片容器與留白 ---- */
.page-works .work__body {
  padding: clamp(1.7rem, 2.8vw, 2.3rem) clamp(1.5rem, 2.6vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

.page-works .work__body .mt-2 {
  margin-top: auto;
  padding-top: clamp(0.6rem, 0.8vw, 0.8rem);
}

/* ---- 載入更多按鈕：加強視覺層級 ---- */
.page-works .load-more {
  text-align: center;
  margin: clamp(2.4rem, 4.5vw, 3.6rem) auto 0;
}

.page-works .load-more .btn--ghost {
  padding: clamp(0.8em, 1.2vw, 0.95em) clamp(2em, 2.8vw, 2.6em);
  font-size: clamp(1.12rem, 0.4vw + 1.06rem, 1.28rem);
  min-height: clamp(48px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-width: 2px;
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 4px 12px rgba(232, 93, 50, 0.16);
}

.page-works .load-more .btn--ghost:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 93, 50, 0.28);
}

.page-works .load-more .btn--ghost:active {
  transform: translateY(0);
}

/* ---- 推薦區卡片同步優化（保持一致） ---- */
.page-works .section--soft .work__cat {
  font-size: clamp(1.06rem, 0.4vw + 0.98rem, 1.2rem);
}

.page-works .section--soft .work__body h3 {
  font-size: clamp(1.32rem, 1.2vw + 1.1rem, 1.54rem);
  line-height: 1.45;
}

.page-works .section--soft .deal-meta {
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.16rem);
  line-height: 1.75;
}

.page-works .section--soft .work__body p {
  font-size: clamp(1.14rem, 0.4vw + 1.06rem, 1.28rem);
  line-height: 1.9;
}

.page-works .section--soft .work__body .pill {
  font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.22rem);
  padding: clamp(0.65em, 0.8vw, 0.75em) clamp(1.35em, 1.8vw, 1.65em);
  min-height: clamp(44px, 5vw, 50px);
}

/* ---- 卡片網格容器：響應式與置中 ---- */
.page-works .grid {
  display: grid;
  gap: clamp(1.8rem, 3.2vw, 2.8rem);
}

.page-works .grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---- Hero 與搜尋列容器置中 ---- */
.page-works .page-hero {
  width: 100%;
}

.page-works .page-hero .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.2rem);
}

.page-works .section .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.2rem);
}

/* ---- 篩選列容器與粘性定位 ---- */
.page-works .filterbar {
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  align-items: end;
  background: #fffdf8;
  border: 1px solid rgba(43, 20, 14, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 36px rgba(43, 20, 14, 0.1);
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  width: 100%;
}

@media (min-width: 761px) {
  .page-works .filterbar {
    position: sticky;
    top: 72px;
    z-index: 10;
  }
}

/* ---- 表單欄位間距 ---- */
.page-works .filterbar .field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0;
}

/* ---- 推薦區（軟背景）背景與邊界 ---- */
.page-works .section--soft {
  background: var(--bg-soft);
  padding: clamp(2.2rem, 4.5vw, 3.8rem) 0;
}

.page-works .section--soft .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.2rem);
}

/* ---- 空狀態訊息 ---- */
.page-works .empty-state {
  text-align: center;
  max-width: 560px;
  margin: clamp(2.2rem, 4vw, 3.2rem) auto 0;
  padding: clamp(2.2rem, 4vw, 3.2rem);
  background: #fffdf8;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.page-works .empty-state h3 {
  font-size: clamp(1.3rem, 1.4vw + 1.12rem, 1.56rem);
  margin-bottom: 0.6em;
  color: var(--ink);
}

.page-works .empty-state p {
  color: var(--muted);
  font-size: clamp(1.12rem, 0.4vw + 1.04rem, 1.24rem);
  line-height: 1.8;
}

/* ---- Footer 置中容器 ---- */
.page-works .site-footer .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.2rem);
}

/* ---- 手機固定 CTA ---- */
.page-works .mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(0.8rem, 2vw, 1.2rem);
  background: rgba(246, 239, 228, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  z-index: 40;
  display: none;
}

@media (max-width: 560px) {
  .page-works .mobile-cta {
    display: block;
  }
  
  .page-works .mobile-cta .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ---- 響應式調整：平板 ---- */
@media (max-width: 860px) {
  .page-works .filterbar {
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  }
  
  .page-works .filterbar .field:nth-last-child(2) {
    grid-column: 1 / -1;
  }
  
  .page-works .filterbar .btn--primary {
    grid-column: 1 / -1;
  }
}

/* ---- 響應式調整：手機 ---- */
@media (max-width: 480px) {
  .page-works .filterbar {
    grid-template-columns: 1fr;
  }
  
  .page-works .filterbar .field {
    grid-column: auto;
  }
  
  .page-works .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* === 全站頁尾社群 icon：放大提升辨識度（含改版後乾淨 LINE 字標），跨頁一致 === */
.footer__social a { width: clamp(42px, 4vw, 46px); height: clamp(42px, 4vw, 46px); }
.footer__social a svg { width: 20px; height: 20px; }

/* ============================================================
   2026-06 收口層：contact / 首頁 / services RWD 與可讀性修正
   （orchestrator 彙整並行子代理產出；append-override，沿用變數與相對單位）
   ============================================================ */

/* ---------- contact.html：表單區到「服務範圍」之間空白收斂 ---------- */
.contact-page .section--tight-top { padding-bottom: clamp(1.2rem, 2.6vw, 2rem); }
.contact-page .section.section--tight {
  padding-top: clamp(1.2rem, 2.6vw, 1.9rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
.contact-page .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
}
.contact-page .map-cta-block { margin-inline: auto; max-width: var(--container); }

/* ---------- contact.html：表單字級階層與對比 ---------- */
.contact-page .field label {
  font-size: clamp(15px, 0.5vw + 0.96rem, 16.5px);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 600;
}
.contact-page .field label .req { color: var(--accent-dark); }
.contact-page .field label .opt { color: var(--muted); }
.contact-page .count-hint,
.contact-page .form-note {
  font-size: clamp(14px, 0.4vw + 0.92rem, 15.5px);
  line-height: 1.8;
  color: var(--ink-soft);
}
.contact-page .notice--info {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  font-size: clamp(14.5px, 0.5vw + 0.94rem, 16px);
  font-weight: 600;
  line-height: 1.75;
  padding: 0.95em 1.2em;
}
.contact-page .field input::placeholder,
.contact-page .field textarea::placeholder {
  color: #877157;
  font-size: clamp(14px, 0.4vw + 0.9rem, 15px);
  opacity: 1;
}
.contact-page .field :disabled { color: var(--muted); opacity: 0.7; }

/* ---------- contact.html：雙欄 grid 與控制元件相對內距 ---------- */
.contact-page .form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}
.contact-page .field input,
.contact-page .field select {
  padding: .6em .85em;
  min-height: 48px;
  line-height: 1.5;
  color: var(--text);
}
.contact-page .field textarea { padding: .7em .85em; line-height: 1.65; color: var(--text); }
.contact-page .btn--primary.btn--block { padding: .8em 1.4em; min-height: 50px; }
@media (max-width: 640px) {
  .contact-page .form__grid { grid-template-columns: 1fr; }
}

/* ---------- index.html：hero 輪播箭頭移到視窗 gutter，避開文案 ---------- */
.page-home .hpc__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: clamp(40px, 4vw, 48px); height: clamp(40px, 4vw, 48px);
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.45);
  background: rgba(43,20,14,.5); color: #fff; padding: .6em;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .22s ease, border-color .22s ease, transform .18s ease;
}
.page-home .hpc__arrow:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.05); }
.page-home .hpc__arrow svg { width: 22px; height: 22px; display: block; }
.page-home .hpc__arrow--prev { left: clamp(.5rem, 1.6vw, 1.1rem); }
.page-home .hpc__arrow--next { right: clamp(.5rem, 1.6vw, 1.1rem); }
@media (max-width: 760px) { .page-home .hpc__arrow { display: none; } }

/* ---------- services.html：卡片內文放大與標題階層 ---------- */
.page-services .card p,
.page-services .svc-card p {
  font-size: clamp(16px, 0.5vw + 0.96rem, 18.5px);
  line-height: 1.9;
}
.page-services .case-grid .card p { font-size: clamp(16px, 0.5vw + 0.95rem, 18px); line-height: 1.9; }
.page-services .card h3,
.page-services .svc-card h3 { font-size: clamp(1.32rem, 1.3vw + 1.06rem, 1.56rem); line-height: 1.4; }
.page-services .case-grid .card h3 { font-size: clamp(1.3rem, 1.2vw + 1.04rem, 1.5rem); line-height: 1.45; }
.page-services .svc-card .num { font-size: clamp(1.14rem, 0.8vw + 0.98rem, 1.3rem); }

/* ---------- services.html：chip/按鈕一致性 + 推薦方案徽章定位 ---------- */
.page-services .svc-card .tags span,
.page-services .case-grid .pill {
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.12rem);
  padding: 0.58em 1.3em;
  min-height: 44px;
  border-radius: var(--radius-sm);
  line-height: 1.5;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.page-services .pricing-grid .btn--block {
  padding: 0.8em 1.4em;
  min-height: 48px;
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.12rem);
}
.page-services .pricing-grid { align-items: start; }
.page-services .pricing-grid .card.is-featured {
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  padding-top: clamp(2.4rem, 3.6vw, 3rem);
  overflow: visible;
}
.page-services .pricing-grid .plan-badge {
  top: -0.95rem;
  padding: 0.42em 1.15em;
  font-size: clamp(0.9rem, 0.3vw + 0.84rem, 1rem);
  box-shadow: 0 6px 16px rgba(196, 107, 74, 0.3);
  white-space: nowrap;
}

/* ---------- services.html：深色區塊對比再提升 ---------- */
.page-services .section--dark .step { background: rgba(255,253,248,.14); border-color: rgba(231,183,159,.34); }
.page-services .section--dark .step p {
  color: rgba(255,248,238,.96);
  font-size: clamp(15.5px, .45vw + .96rem, 17.5px);
  line-height: 2;
}
.page-services .section--dark .step h3 { color: #fdfaf4; }

/* ---------- 全站頁尾：加寬聯絡欄、改善行高（字級維持，跨頁一致） ---------- */
.footer__grid { grid-template-columns: 1.25fr .9fr 1.55fr; gap: clamp(2.2rem, 4.5vw, 4rem); }
.site-footer li { line-height: 2.05; margin-bottom: clamp(1.2rem, 2vw, 1.6rem); }
.footer__brand p { line-height: 2; }
@media (max-width: 720px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   req-451：contact / services / works 三頁對比・尺寸・間距・RWD 收口
   orchestrator(預設模型)彙整 3 個並行 Haiku agent 的 scoped CSS,
   驗證 selector 後統一 append。全部以各頁 body class scope,
   引用 :root 變數,相對單位(rem/em/clamp/fr/minmax),無固定 px 撐版面。
   ============================================================ */

/* ====================== contact.html (.contact-page) ====================== */

/* 1. Hero 流程條：非 current/done 狀態按鈕對比度改善 */
.contact-page .flow-step {
  padding: 0.7em 1.2em;
  min-height: 2.8em;
  font-size: clamp(0.875rem, 0.35vw + 0.82rem, 1rem);
  font-weight: 600;
  line-height: 1.4;
  background: rgba(43, 20, 14, 0.12);
  border: 1.5px solid rgba(43, 20, 14, 0.24);
  color: var(--ink-soft);
}
.contact-page .flow-step:hover {
  background: rgba(43, 20, 14, 0.18);
  border-color: rgba(43, 20, 14, 0.32);
}
.contact-page .flow-step.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px rgba(232, 93, 50, 0.3);
}
.contact-page .flow-step.is-current .flow-step__num {
  background: #fff;
  color: var(--accent);
  width: 1.9em;
  height: 1.9em;
}
.contact-page .flow-step.is-done {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.contact-page .flow-step.is-done .flow-step__num {
  background: var(--accent-dark);
  color: #fff;
  width: 1.9em;
  height: 1.9em;
}
.contact-page .flow-step__num {
  flex: 0 0 auto;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95em;
}

/* 2. 商家可刊登什麼卡片標籤：加深背景與文字對比、統一尺寸 */
.contact-page .list-what .tags span {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 0.65em 1.1em;
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.04rem);
  font-weight: 600;
  line-height: 1.4;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(232, 93, 50, 0.25);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-page .list-what .tags span:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
}

/* 3. 優惠活動類型 chips（左側聯絡資訊下方）：加強對比度與尺寸 */
.contact-page .type-chips .pill {
  padding: 0.65em 1.1em;
  font-size: clamp(0.92rem, 0.3vw + 0.85rem, 1rem);
  font-weight: 600;
  line-height: 1.4;
  min-height: 2.5em;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-page .type-chips .pill:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
}

/* 4. 中段表單區版面：聯絡資訊與表單卡片比例、置中 + responsive grid */
.contact-page .split--contact {
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 4vw, 3.2rem);
  align-items: start;
}

/* 5. 表單標籤與輔助文字層級改善 */
.contact-page .field label {
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.04rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.55em;
  display: block;
}
.contact-page .field .opt {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.95em;
}
.contact-page .field input::placeholder,
.contact-page .field textarea::placeholder {
  color: #8A786B;
  font-size: 0.95em;
}
.contact-page .form-note {
  font-size: clamp(0.9rem, 0.3vw + 0.85rem, 0.98rem);
  color: var(--muted);
  line-height: 1.7;
  margin-top: 1.2rem;
}

/* 6. Textarea 計數提示：可見度與定位，避免貼邊/重疊 */
.contact-page .textarea-wrap .count-hint {
  font-size: clamp(0.85rem, 0.3vw + 0.8rem, 0.92rem);
  color: var(--muted);
  position: absolute;
  right: 12px;
  bottom: 10px;
  background: rgba(246, 239, 228, 0.85);
  padding: 0.2em 0.45em;
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

/* 7. 區塊垂直間距一致性（clamp/rem-based） */
.contact-page .section.section--tight-top {
  padding-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.contact-page .section.section--tight {
  padding: clamp(2.2rem, 5vw, 3.6rem) 0;
}
.contact-page .section:nth-of-type(2) {
  padding-bottom: clamp(1.8rem, 4vw, 2.8rem);
}

/* 8. 容器左右留白（RWD） */
.contact-page .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.4rem);
}

@media (max-width: 900px) {
  .contact-page .split--contact { grid-template-columns: 1fr; }
  .contact-page .type-chips { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 640px) {
  .contact-page .flow-step { padding: 0.65em 1em; font-size: 0.875rem; min-height: 2.6em; }
  .contact-page .flow-step__num { width: 1.8em; height: 1.8em; font-size: 0.9em; }
  .contact-page .list-what .tags span { padding: 0.6em 0.95em; font-size: 0.92rem; min-height: 2.3em; }
  .contact-page .type-chips { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .contact-page .type-chips .pill { padding: 0.6em 0.95em; font-size: 0.9rem; min-height: 2.3em; }
}

/* ====================== services.html (.page-services) ====================== */

/* 1. 深色區塊「刊登後會出現在哪裡？」— 加大卡片與外層明暗差 */
.page-services .section--dark { background: #20100A; }  /* 外層加深(取代會反而變亮的半透明漸層) */
.page-services .section--dark .step {
  background: rgba(255, 253, 248, 0.18);
  border: 1px solid rgba(231, 183, 159, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  padding: clamp(2.2rem, 3.4vw, 2.8rem);
}
.page-services .section--dark .step h3 {
  color: #ffffff;
  font-size: clamp(1.42rem, 1.5vw + 1.14rem, 1.7rem);
  margin-bottom: 0.8em;
  font-weight: 700;
  line-height: 1.5;
}
.page-services .section--dark .step p {
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(1.16rem, 0.5vw + 1.08rem, 1.28rem);
  line-height: 2.1;
  margin: 0;
}
.page-services .section--dark .step::before {
  background: rgba(231, 183, 159, 0.55);
  color: #fff9f3;
  width: 3.1em;
  height: 3.1em;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.page-services .section--dark .step:hover::before {
  background: rgba(231, 183, 159, 0.75);
}

/* 2. 定價區「推薦方案」徽章：改入內容流、置中，不再浮在頂緣遮標題 */
.page-services .pricing-grid .plan-badge {
  position: relative;
  top: 0;
  left: auto;
  transform: none;
  display: inline-block;
  margin-bottom: 1rem;
  font-size: clamp(0.92rem, 0.4vw + 0.86rem, 1.02rem);
  padding: 0.48em 1.3em;
  letter-spacing: 0.08em;
}
.page-services .pricing-grid .card.is-featured {
  border: 2px solid var(--accent);
  transform: none;
  padding-top: clamp(2rem, 3.2vw, 2.6rem);
  position: relative;
}
.page-services .pricing-grid .card.is-featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(43, 20, 14, 0.16);
}

/* 3. 卡片內文與清單字級一致性 */
.page-services .card h3 {
  font-size: clamp(1.24rem, 1.2vw + 1.02rem, 1.48rem);
  line-height: 1.5;
  margin-bottom: 0.6em;
  font-weight: 700;
}
.page-services .card p,
.page-services .card li {
  font-size: clamp(1.06rem, 0.4vw + 1rem, 1.2rem);
  line-height: 1.85;
  color: var(--text);
}
.page-services .checklist li {
  font-size: clamp(1.06rem, 0.4vw + 1rem, 1.2rem);
  line-height: 1.9;
  margin-bottom: 0.8em;
}

/* 4. CTA 按鈕統一內距/尺寸 */
.page-services .btn {
  font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.22rem);
  padding: 0.72em 1.5em;
  min-height: 48px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}
.page-services .btn--primary { background: var(--accent); color: #ffffff; padding: 0.72em 1.6em; }
.page-services .btn--block { width: 100%; display: block; }

/* 5. 服務卡片膠囊標籤 */
.page-services .svc-card .tags span {
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.12rem);
  padding: 0.6em 1.25em;
  min-height: 2.6em;
  line-height: 1.6;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* 6. 內容範例卡片膠囊按鈕 */
.page-services .case-grid .pill {
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.12rem);
  padding: 0.6em 1.25em;
  min-height: 2.6em;
  line-height: 1.6;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* 7. Hero 說明文字 */
.page-services .page-hero p {
  font-size: clamp(1.1rem, 0.5vw + 1.04rem, 1.26rem);
  line-height: 2;
  color: var(--text);
}

/* 8. Footer 聯絡資訊文字 */
.page-services .footer__brand p {
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.18rem);
  line-height: 1.85;
}
.page-services .site-footer ul li {
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.18rem);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .page-services .pricing-grid .plan-badge { margin-bottom: 1.2rem; }
  .page-services .btn { min-height: 46px; }
}

/* ====================== works.html (.page-works) ====================== */

.page-works { --work-card-min: clamp(16rem, 45vw, 20rem); }

/* 1. 主優惠卡片網格：響應式 auto-fit minmax */
.page-works__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--work-card-min), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  width: 100%;
}
/* 2. 推薦卡片網格：相同響應式設計 */
.page-works__recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--work-card-min), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  width: 100%;
}

/* 3. 篩選表單：flex-wrap 自動換行 */
.page-works .filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 1.8vw, 1.2rem);
  align-items: flex-end;
}
.page-works .filterbar .field {
  flex: 1 1 auto;
  min-width: clamp(12rem, 22vw, 16rem);
  margin-bottom: 0;
}
.page-works .filterbar__search-field { flex: 1 1 100%; min-width: auto; }
.page-works .filterbar__btn-field { flex: 0 1 auto; min-width: auto; }
.page-works .filterbar__btn-field .btn--primary {
  white-space: nowrap;
  padding: 0.65em 1.4em;
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.1rem);
  min-height: 48px;
}
@media (max-width: 768px) {
  .page-works .filterbar { flex-direction: column; gap: clamp(0.9rem, 2vw, 1.2rem); }
  .page-works .filterbar .field { flex: 1 1 100%; min-width: 100%; }
  .page-works .filterbar__search-field { flex: 1 1 100%; }
  .page-works .filterbar__btn-field { flex: 1 1 100%; }
  .page-works .filterbar__btn-field .btn--primary { width: 100%; }
}
@media (max-width: 480px) {
  .page-works .filterbar { gap: clamp(0.7rem, 1.5vw, 0.9rem); }
  .page-works__grid,
  .page-works__recommend-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
  }
}

/* 4. 卡片內容文字階層 */
.page-works .work__cat {
  display: block;
  font-family: var(--ff);
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.6rem;
  line-height: 1.35;
}
.page-works .work__body h3 {
  font-size: clamp(1.24rem, 1.2vw + 1.08rem, 1.48rem);
  line-height: 1.45;
  margin: 0.5rem 0 0.75rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.page-works .deal-meta {
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.05rem);
  color: var(--muted);
  margin-bottom: 0.8rem;
  line-height: 1.5;
}
.page-works .work__body p {
  font-size: clamp(1.02rem, 0.35vw + 0.96rem, 1.15rem);
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 5. CTA 按鈕（查看優惠）尺寸與間距 */
.page-works .work__body .pill {
  background: var(--accent);
  color: #fdf8f1;
  font-weight: 700;
  font-size: clamp(1.02rem, 0.4vw + 0.96rem, 1.14rem);
  padding: 0.65em 1.4em;
  min-height: 2.9em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  box-shadow: 0 4px 12px rgba(217, 106, 61, 0.22);
  border-radius: 6px;
  transition: background 0.2s ease, box-shadow 0.22s ease;
  line-height: 1.3;
}
.page-works .work__body .pill:hover {
  background: var(--accent-dark);
  box-shadow: 0 6px 16px rgba(201, 71, 34, 0.28);
}

/* 6. 卡片結構與日期 badge */
.page-works .work {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.22s ease;
}
.page-works .work:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.page-works .work img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.page-works .work__body {
  padding: clamp(1.6rem, 2.8vw, 2.2rem) clamp(1.4rem, 2.8vw, 1.9rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.page-works .work__body .mt-2 { margin-top: auto; padding-top: 0.6rem; }
.page-works .badge--corner {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.2rem);
  right: clamp(0.8rem, 2vw, 1.2rem);
  z-index: 2;
  background: rgba(43, 20, 14, 0.85);
  color: #fdf8f1;
  font-size: clamp(0.85rem, 0.3vw + 0.8rem, 0.95rem);
  padding: 0.5em 0.9em;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(47, 42, 36, 0.22);
}

/* 7. Footer 響應式 */
.page-works .site-footer li {
  line-height: 2;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.05rem);
}
.page-works .site-footer h4 {
  font-size: clamp(1.08rem, 0.4vw + 1rem, 1.2rem);
  margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
  line-height: 1.4;
}
.page-works .site-footer p { line-height: 2; font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.05rem); }
@media (max-width: 768px) {
  .page-works .site-footer .footer__grid { grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3vw, 2.5rem); }
  .page-works .site-footer .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .page-works .site-footer .footer__grid { grid-template-columns: 1fr; gap: clamp(1.4rem, 2.5vw, 2rem); }
}

/* 8. 容器左右內距，避免貼齊視窗邊緣 */
.page-works .section .container { padding: 0 clamp(1rem, 3.5vw, 2rem); }

/* 9. load-more / empty-state 字級與間距 */
.page-works .load-more { margin: clamp(2.4rem, 4vw, 3.5rem) auto 0; text-align: center; }
.page-works .empty-state { text-align: center; padding: clamp(2rem, 3vw, 3rem) clamp(1rem, 2vw, 1.5rem); }
.page-works .empty-state h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); margin-bottom: 0.8rem; }
.page-works .empty-state p { font-size: clamp(1rem, 0.4vw + 0.94rem, 1.1rem); color: var(--muted); margin-bottom: 1.8rem; }

/* ============================================================
   req-hero-align：首頁 Hero 與「在地好康嚴選」輪播容器對齊
   目標：① Hero 箭頭/分頁不貼浮窗邊界，而是對齐內容容器
        ② 「在地好康嚴選」輪播箭頭放入置中容器，避免寬度變化時脫離視窗
        ③ 整體響應式定位，RWD 無固定像素寬度
   置於檔尾，覆寫前面所有 Hero 和 Promo 控制定位層。
   ============================================================ */

/* ① Hero 控制容器：箭頭和分頁點放入置中容器 */
.page-home .hpc__controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 10;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hero 箭頭：相對容器定位，不再貼邊界 */
.page-home .hpc__arrow {
  position: relative;
  top: auto;
  transform: none;
  left: auto;
  right: auto;
  z-index: 4;
  pointer-events: auto;
  flex-shrink: 0;
  margin: 0;
}

.page-home .hpc__arrow--prev { }
.page-home .hpc__arrow--next { }

/* Hero 分頁點：放在右下角，絕對定位於 hpc__controls 容器 */
.page-home .hpc__pagination {
  position: absolute;
  bottom: clamp(1.2rem, 3vw, 1.8rem);
  right: clamp(1.2rem, 3vw, 2.2rem);
  z-index: 4;
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1vw, 0.8rem);
  justify-content: center;
}

/* ② 「在地好康嚴選」輪播：用包裝容器置中 */
.page-home .promo__wrapper {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
  position: relative;
}

.page-home .promo {
  position: relative;
  padding-inline: clamp(1.2rem, 3.5vw, 1.8rem);
  margin: 0 auto;
}

/* 在地好康輪播箭頭：內側定位，距卡片邊緣固定距離 */
.page-home .promo__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: auto;
}

.page-home .promo__arrow--prev {
  left: clamp(1rem, 2.5vw, 1.6rem);
}

.page-home .promo__arrow--next {
  right: clamp(1rem, 2.5vw, 1.6rem);
}

/* 在地好康分頁點：居中下方，在安全區域內 */
.page-home .promo__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1vw, 0.6rem);
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding: 0 clamp(1rem, 2vw, 1.5rem);
}

/* ③ RWD：手機版隱藏 Hero 箭頭，調整分頁點大小 */
@media (max-width: 860px) {
  .page-home .hpc__controls {
    padding-inline: clamp(0.8rem, 3vw, 1.6rem);
  }

  .page-home .hpc__arrow {
    display: none;
  }

  .page-home .hpc__pagination {
    bottom: clamp(1rem, 3vw, 1.6rem);
    right: clamp(1rem, 3vw, 2rem);
  }
}

@media (max-width: 560px) {
  .page-home .promo__wrapper {
    padding-inline: clamp(0.8rem, 3vw, 1.2rem);
  }

  .page-home .promo {
    padding-inline: clamp(0.8rem, 2.5vw, 1rem);
  }

  .page-home .promo__arrow {
    width: clamp(36px, 8vw, 44px);
    height: clamp(36px, 8vw, 44px);
  }

  .page-home .promo__arrow--prev {
    left: clamp(0.6rem, 1.5vw, 1rem);
  }

  .page-home .promo__arrow--next {
    right: clamp(0.6rem, 1.5vw, 1rem);
  }

  .page-home .promo__dots {
    gap: clamp(0.35rem, 0.8vw, 0.5rem);
    margin-top: clamp(1rem, 2vw, 1.4rem);
    padding: 0 clamp(0.8rem, 1.5vw, 1.2rem);
  }
}

/* ============================================================
   2026/06 多頁可讀性／間距／按鈕／RWD 收口層（orchestrator 統一彙整）
   並行 sub-agent 產出，於此一次性附加為檔尾權威 override：
   共用元件 + .page-about / .contact-page / .page-services / .page-works。
   （.page-home 控制對齊已於上方 req-hero-align 層處理。）
   全部沿用 :root 變數與相對單位（clamp/rem/em/%/vw/minmax），無固定像素撐版。
   ============================================================ */

/* ---------- [共用元件] Header CTA / Footer / 字級階層 ---------- */
.nav__cta .btn {
  padding: .6em 1.4em;
  box-shadow: 0 4px 12px rgba(143,80,56,.14);
  font-size: clamp(1.02rem, 0.4vw + 0.94rem, 1.1rem);
}
@media (max-width: 1024px) {
  .nav__cta .btn {
    padding: .6em 1.4em;
    font-size: clamp(1rem, 0.3vw + 0.92rem, 1.08rem);
  }
}
.site-footer { color: #fbf6ee; }
.site-footer a { color: #fbf6ee; }
.footer__brand p { color: #fbf6ee; }
.site-footer li { color: #fbf6ee; }
.site-footer h4 { color: #fdfaf4; }
.footer__social a {
  width: clamp(44px, 5vw, 50px);
  height: clamp(44px, 5vw, 50px);
  background: rgba(255,255,255,.14);
  color: #fbf6ee;
}
.footer__social a svg {
  width: clamp(18px, 1.8vw, 22px);
  height: clamp(18px, 1.8vw, 22px);
}
.footer__bottom { color: #fbf6ee; }
.footer__social a:hover {
  background: var(--accent);
  color: #fdf8f1;
  box-shadow: 0 6px 16px rgba(232,93,50,.28);
}
h1, h2, h3, h4 { line-height: 1.4; }
p { line-height: 1.85; }
li { line-height: 1.9; }

/* ---------- [about] 麵包屑 + 平台目標深色區塊 ---------- */
.page-about .page-hero .breadcrumb {
  font-size: clamp(0.95rem, 0.8vw + 0.85rem, 1.05rem);
  color: #f3ebe1;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
}
.page-about .page-hero .breadcrumb a { color: #f3ebe1; }
.page-about .page-hero .breadcrumb a:hover { color: #fbf6ee; }
.page-about .section--dark .goal-block {
  max-width: 580px;
  margin-inline: auto;
  padding-inline: clamp(1.4rem, 3.5vw, 2rem);
  padding-block: clamp(1.8rem, 3.2vw, 2.6rem);
}
.page-about .section--dark .goal-block .section__head {
  max-width: 100%;
  margin-bottom: clamp(1.6rem, 2.8vw, 2.2rem);
}
.page-about .section--dark .goal-block .checklist { margin-inline: auto; }
.page-about .section--dark .goal-block .checklist li {
  font-size: clamp(1.08rem, 0.6vw + 1.02rem, 1.22rem);
  line-height: 1.95;
  color: #f3ebe1;
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}
.page-about .section--dark .goal-block .checklist li::before { color: #e2b6a0; }

/* ---------- [contact] hero / 流程步驟 / 標籤 / 表單 / 間距 ---------- */
.contact-page .page-hero { padding: clamp(2rem, 4vw, 3.2rem) 0; }
.contact-page .page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 0.5em; line-height: 1.28; }
.contact-page .page-hero p { font-size: clamp(1.1rem, 2vw, 1.3rem); color: #fbf6ee; line-height: 2; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.contact-page .contact-hero__breadcrumb { color: #f0e1d4; font-size: clamp(13px, 0.4vw + 0.8rem, 14px); letter-spacing: 0.04em; margin-bottom: 1.2rem; font-weight: 500; }
.contact-page .contact-hero__breadcrumb a { color: #f0e1d4; transition: color 0.2s ease; }
.contact-page .contact-hero__breadcrumb a:hover { color: #fdf8f1; }
.contact-page .flow-steps { list-style: none; margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.8vw, 1.2rem); align-items: stretch; }
.contact-page .flow-step {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75em 1.2em;
  min-height: 2.8em;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: clamp(0.88rem, 0.35vw + 0.82rem, 1rem);
  line-height: 1.4;
  background: rgba(43, 20, 14, 0.15);
  border: 1.5px solid rgba(43, 20, 14, 0.26);
  color: var(--ink-soft);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.contact-page .flow-step:hover {
  background: rgba(43, 20, 14, 0.22);
  border-color: rgba(43, 20, 14, 0.35);
  color: var(--ink);
}
.contact-page .flow-step__num {
  flex: 0 0 auto;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95em;
  background: rgba(43, 20, 14, 0.2);
  color: var(--ink-soft);
  border: 1px solid rgba(43, 20, 14, 0.28);
}
.contact-page .flow-step.is-current { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(232, 93, 50, 0.3); }
.contact-page .flow-step.is-current .flow-step__num { background: #fff; color: var(--accent); border: none; }
.contact-page .flow-step.is-done { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.contact-page .flow-step.is-done .flow-step__num { background: var(--accent-dark); color: #fff; border: none; }
.contact-page .list-what .tags span {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 0.65em 1.1em;
  font-size: clamp(0.93rem, 0.3vw + 0.87rem, 1.02rem);
  font-weight: 600;
  line-height: 1.4;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1.2px solid rgba(232, 93, 50, 0.35);
  transition: all 0.2s ease;
  cursor: default;
}
.contact-page .list-what .tags span:hover { background: var(--accent); color: #fdf8f1; border-color: var(--accent); }
.contact-page .type-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.contact-page .type-chips .pill {
  padding: 0.65em 1.1em;
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1rem);
  font-weight: 600;
  line-height: 1.4;
  min-height: 2.5em;
  border: 1.5px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.2s ease;
  cursor: default;
}
.contact-page .type-chips .pill:hover { background: var(--accent); color: #fdf8f1; border-color: var(--accent); }
.contact-page .field input::placeholder,
.contact-page .field textarea::placeholder { color: #8A786B; font-weight: 400; opacity: 1; }
.contact-page .field input:focus,
.contact-page .field select:focus,
.contact-page .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 93, 50, 0.12); outline: none; }
.contact-page .section.section--tight-top { padding-top: clamp(1.6rem, 3.5vw, 2.4rem); }
.contact-page .section.section--tight { padding: clamp(2rem, 4.5vw, 3.4rem) 0; }
.contact-page .section:nth-of-type(3) { padding-top: clamp(1.8rem, 3.8vw, 2.8rem); padding-bottom: clamp(1.8rem, 3.8vw, 2.8rem); }
.contact-page .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.4rem); }
.contact-page .map-cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
  max-width: var(--container);
  margin: 0 auto;
}
.contact-page .map-cta-block h2 { margin: 0 0 0.3em; font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.3; }
.contact-page .map-cta-block p { margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem); line-height: 1.7; }
.contact-page .map-cta-block .btn { align-self: flex-start; margin-top: 0.6rem; }
.contact-page .split--contact { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4.5vw, 3.4rem); align-items: start; }
.contact-page .contact-info__sticky { position: sticky; top: 100px; }
.contact-page .field label { font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.03rem); font-weight: 600; color: var(--ink); margin-bottom: 0.6em; display: block; }
.contact-page .field label .req { color: var(--accent-dark); font-weight: 700; }
.contact-page .field label .opt { color: var(--muted); font-weight: 400; }
.contact-page .textarea-wrap .count-hint { font-size: clamp(0.85rem, 0.3vw + 0.8rem, 0.92rem); color: var(--muted); background: rgba(246, 239, 228, 0.9); padding: 0.25em 0.5em; border-radius: 3px; }
.contact-page .form .btn--block { min-height: 50px; font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.03rem); font-weight: 700; padding: 0.8em 1.4em; }
@media (max-width: 900px) {
  .contact-page .split--contact { grid-template-columns: 1fr; }
  .contact-page .type-chips { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
@media (max-width: 640px) {
  .contact-page .flow-step { padding: 0.65em 0.95em; font-size: 0.85rem; min-height: 2.5em; }
  .contact-page .flow-step__num { width: 1.75em; height: 1.75em; font-size: 0.88em; }
  .contact-page .type-chips { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .contact-page .type-chips .pill { padding: 0.6em 0.85em; font-size: 0.88rem; min-height: 2.3em; }
  .contact-page .list-what .tags span { padding: 0.55em 0.9em; font-size: 0.9rem; min-height: 2.2em; }
  .contact-page .map-cta-block .btn { width: 100%; justify-content: center; }
}

/* ---------- [services] hero 對比 / 標籤 / CTA / 深色區塊 ---------- */
.page-services .page-hero__breadcrumb {
  font-size: clamp(0.85rem, 0.3vw + 0.8rem, 0.95rem);
  color: #f3ebe1;
  letter-spacing: 0.04em;
  margin-bottom: clamp(1rem, 1.5vw, 1.2rem);
}
.page-services .page-hero__breadcrumb a { color: #f3ebe1; }
.page-services .page-hero__breadcrumb a:hover { color: #fdfaf4; }
.page-services .page-hero h1 { color: #fefbf7; font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 0.5em; line-height: 1.35; text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.page-services .page-hero p { color: #faf6f0; font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 2.15; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); }
.page-services .svc-card .tags { gap: clamp(0.8rem, 1.3vw, 1.1rem); margin-top: clamp(1.6rem, 2.5vw, 2rem); }
.page-services .svc-card .tags span {
  font-size: clamp(1.05rem, 0.45vw + 0.98rem, 1.18rem);
  font-weight: 700;
  padding: 0.7em 1.4em;
  line-height: 1.7;
  min-height: 44px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  background: var(--trust-soft);
  color: var(--trust-dark);
  transition: all 0.2s ease;
}
.page-services .svc-card .tags span:hover { background: var(--trust); color: #fbf6ee; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(124, 135, 105, 0.26); }
.page-services .case-grid .pill-row { gap: clamp(0.8rem, 1.3vw, 1.1rem); margin-top: clamp(1.4rem, 2vw, 1.8rem); flex-wrap: wrap; }
.page-services .case-grid .pill {
  font-size: clamp(1.05rem, 0.45vw + 0.98rem, 1.18rem);
  font-weight: 700;
  padding: 0.7em 1.4em;
  line-height: 1.7;
  min-height: 44px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fdf8f1;
  box-shadow: 0 4px 12px rgba(196, 107, 74, 0.24);
  transition: all 0.2s ease;
}
.page-services .case-grid .pill:hover { background: var(--accent-dark); color: #fdf8f1; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(196, 107, 74, 0.32); }
.page-services .pricing-grid .btn--block {
  padding: 0.75em 1.6em;
  font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.2rem);
  min-height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1.5;
  border-radius: var(--radius-sm);
}
.page-services .pricing-grid .card .btn--block { margin-top: auto; }
.page-services .section--dark .step {
  background: rgba(255, 253, 248, 0.2);
  border: 1px solid rgba(231, 183, 159, 0.48);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: clamp(2.4rem, 3.6vw, 3rem);
}
.page-services .section--dark .step h3 { color: #ffffff; font-size: clamp(1.48rem, 1.6vw + 1.2rem, 1.78rem); margin-bottom: 0.85em; font-weight: 700; line-height: 1.5; }
.page-services .section--dark .step p { color: rgba(255, 255, 255, 1); font-size: clamp(1.2rem, 0.55vw + 1.1rem, 1.3rem); line-height: 2.15; margin: 0; letter-spacing: 0.01em; }
.page-services .section--dark .step::before {
  background: rgba(231, 183, 159, 0.6);
  color: #fffbf6;
  border-radius: 50%;
  width: 3.2em;
  height: 3.2em;
  display: grid;
  place-items: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 1.3rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.page-services .section--dark .step:hover::before { background: rgba(231, 183, 159, 0.8); transform: scale(1.1); }
.page-services .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.2rem); }
.page-services .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.page-services .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.8rem, 3vw, 2.4rem); align-items: stretch; }
.page-services .card { display: flex; flex-direction: column; }
.page-services .card > .mt-3 { margin-top: auto; }

/* ---------- [works] 篩選列 / 卡片字級 / CTA / 載入更多（檔尾權威層） ---------- */
.page-works { --work-card-min: clamp(16rem, 45vw, 20rem); }
.page-works .filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 1.8vw, 1.2rem);
  align-items: flex-end;
  background: #fffdf8;
  border: 1px solid rgba(43, 20, 14, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
}
.page-works .filterbar .field { flex: 1 1 auto; min-width: clamp(12rem, 22vw, 16rem); margin-bottom: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.page-works .filterbar label { font-size: clamp(1.04rem, 0.5vw + 0.94rem, 1.16rem); font-weight: 700; color: var(--ink); letter-spacing: 0.02em; margin-bottom: 0; }
.page-works .filterbar select,
.page-works .filterbar input {
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.18rem);
  line-height: 1.6;
  color: var(--text);
  padding: clamp(0.65em, 0.8vw, 0.8em) clamp(0.8em, 1vw, 0.95em);
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf8;
}
.page-works .filterbar input::placeholder { color: var(--muted); opacity: 0.75; font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.14rem); }
.page-works .filterbar__search-field { flex: 1 1 100%; min-width: auto; }
.page-works .filterbar__btn-field { flex: 0 1 auto; min-width: auto; }
.page-works .filterbar__btn-field .btn--primary { white-space: nowrap; padding: 0.65em 1.4em; font-size: clamp(1rem, 0.4vw + 0.94rem, 1.1rem); min-height: 48px; font-weight: 700; border-radius: var(--radius-sm); }
.page-works .work__cat { display: block; font-family: var(--ff); font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.08rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.6rem; line-height: 1.35; }
.page-works .work__body h3 {
  font-size: clamp(1.24rem, 1.2vw + 1.08rem, 1.48rem);
  line-height: 1.45;
  margin: 0.5rem 0 0.75rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
  font-weight: 700;
}
.page-works .deal-meta {
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.16rem);
  line-height: 1.75;
  color: var(--muted);
  margin: clamp(0.4rem, 0.6vw, 0.6rem) 0 clamp(0.9rem, 1.2vw, 1.1rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.9rem, 1.4vw, 1.2rem);
}
.page-works .deal-meta span { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 500; }
.page-works .work__body p {
  font-size: clamp(1.12rem, 0.4vw + 1.04rem, 1.26rem);
  line-height: 1.9;
  color: var(--text);
  margin: 0 0 clamp(1rem, 1.2vw, 1.2rem);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.01em;
}
.page-works .work__body .pill,
.page-works .work__body .pill.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  background: var(--accent);
  color: #fdf8f1;
  font-weight: 700;
  font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.22rem);
  line-height: 1.5;
  padding: clamp(0.6em, 0.8vw, 0.75em) clamp(1.2em, 1.8vw, 1.65em);
  min-height: clamp(44px, 5vw, 50px);
  border-radius: 999px;
  border: none;
  box-shadow: 0 6px 16px rgba(232, 93, 50, 0.28);
  cursor: pointer;
  transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  white-space: nowrap;
  font-family: var(--ff);
  letter-spacing: 0.03em;
}
.page-works .work__body .pill:hover,
.page-works .work__body .pill.link-arrow:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(232, 93, 50, 0.36); }
.page-works .work__body .pill:active,
.page-works .work__body .pill.link-arrow:active { transform: translateY(0); }
.page-works .work__body .pill:focus-visible,
.page-works .work__body .pill.link-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.page-works .work__body { padding: clamp(1.7rem, 2.8vw, 2.3rem) clamp(1.5rem, 2.6vw, 2rem); display: flex; flex-direction: column; flex: 1; gap: 0; }
.page-works .work__body .mt-2 { margin-top: auto; padding-top: clamp(0.6rem, 0.8vw, 0.8rem); }
.page-works .work .badge--corner { top: clamp(0.6rem, 1.2vw, 1rem); right: clamp(0.6rem, 1.2vw, 1rem); padding: clamp(0.3em, 0.5vw, 0.4em) clamp(0.6em, 0.9vw, 0.75em); font-size: clamp(0.9rem, 0.35vw + 0.84rem, 1rem); border-radius: 999px; }
.page-works .load-more { text-align: center; margin: clamp(2.4rem, 4.5vw, 3.6rem) auto 0; }
.page-works .load-more .btn--ghost {
  padding: clamp(0.8em, 1.2vw, 0.95em) clamp(2em, 2.8vw, 2.6em);
  font-size: clamp(1.12rem, 0.4vw + 1.06rem, 1.28rem);
  min-height: clamp(48px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-width: 2px;
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 4px 12px rgba(232, 93, 50, 0.16);
}
.page-works .load-more .btn--ghost:hover { background: var(--accent); color: #fdf8f1; border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(232, 93, 50, 0.28); }
.page-works .load-more .btn--ghost:active { transform: translateY(0); }
.page-works .section--soft .work__cat { font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.08rem); }
.page-works .section--soft .work__body h3 { font-size: clamp(1.24rem, 1.2vw + 1.08rem, 1.48rem); line-height: 1.45; }
.page-works .section--soft .deal-meta { font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.16rem); line-height: 1.75; }
.page-works .section--soft .work__body p { font-size: clamp(1.12rem, 0.4vw + 1.04rem, 1.26rem); line-height: 1.9; }
.page-works .section--soft .work__body .pill { font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.22rem); padding: clamp(0.6em, 0.8vw, 0.75em) clamp(1.2em, 1.8vw, 1.65em); min-height: clamp(44px, 5vw, 50px); }
@media (max-width: 768px) {
  .page-works .filterbar { flex-direction: column; gap: clamp(0.9rem, 2vw, 1.2rem); }
  .page-works .filterbar .field { flex: 1 1 100%; min-width: 100%; }
  .page-works .filterbar__search-field { flex: 1 1 100%; }
  .page-works .filterbar__btn-field { flex: 1 1 100%; }
  .page-works .filterbar__btn-field .btn--primary { width: 100%; }
}


/* ============================================================
   多頁 UI / RWD 修復收口（orchestrator 合併 4 個並行 agent 的 CSS 規格）
   單一共用樣式：全部沿用 :root 變數與相對單位，不寫死固定像素寬度。
   置於檔尾，依 body 類別前綴限定各頁，後者覆寫前面同特定性規則。
   來源：contact.html / index.html / services.html / works.html 各一支 Haiku agent。
   ============================================================ */

/* ---------------- contact.html（.contact-page） ---------------- */

/* 1. 流程步驟 — 提高未啟用步驟在深色 hero 上的對比 */
.contact-page .flow-step:not(.is-current):not(.is-done) {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: rgba(255, 248, 238, 0.9);
}
.contact-page .flow-step:not(.is-current):not(.is-done) .flow-step__num {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(43, 20, 14, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.contact-page .flow-step:not(.is-current):not(.is-done):hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
  color: #fdfaf4;
}

/* 2. 表單欄位響應式：避免 placeholder 被截斷 */
.contact-page .form__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.contact-page .field.full {
  grid-column: 1 / -1;
}

/* 3. 提高小文字對比度與字級 */
.contact-page .field label .opt {
  color: var(--muted);
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1rem);
  font-weight: 400;
}
.contact-page .textarea-wrap .count-hint {
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1rem);
  color: var(--muted);
}
.contact-page .field > .count-hint {
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1rem);
  color: var(--muted);
}
.contact-page .notice--info {
  font-size: clamp(0.95rem, 0.3vw + 0.88rem, 1.03rem);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.7;
}
.contact-page .consent-box {
  background: rgba(255, 248, 238, 0.6);
  border: 1px solid rgba(232, 93, 50, 0.18);
}
.contact-page .consent-box label {
  font-size: clamp(0.93rem, 0.3vw + 0.87rem, 1.01rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.7;
}

/* 4. 按鈕與標籤統一樣式、相對單位（type-chips 改響應式，去掉固定 120px） */
.contact-page .type-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.contact-page .type-chips .pill {
  padding: 0.65em 1.1em;
  font-size: clamp(0.92rem, 0.3vw + 0.86rem, 1rem);
  font-weight: 600;
  line-height: 1.4;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1.5px solid var(--accent);
  cursor: default;
  transition: all 0.2s ease;
}
.contact-page .type-chips .pill:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
}
.contact-page .form-note {
  font-size: clamp(0.93rem, 0.3vw + 0.87rem, 1.01rem);
  color: var(--muted);
  line-height: 1.8;
}

@media (max-width: 640px) {
  .contact-page .form__grid { grid-template-columns: 1fr; }
  .contact-page .type-chips { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .contact-page .type-chips .pill { padding: 0.6em 0.85em; font-size: 0.88rem; min-height: 2.3em; }
}
@media (max-width: 480px) {
  .contact-page .form__grid { grid-template-columns: 1fr; gap: clamp(0.8rem, 1.5vw, 1rem); }
  .contact-page .flow-step { flex: 1 1 120px; padding: 0.6em 0.8em; font-size: 0.8rem; gap: 0.6rem; }
  .contact-page .flow-step__num { width: 1.7em; height: 1.7em; font-size: 0.85em; }
}

/* ---------------- index.html（.page-home） ---------------- */

/* 1) 精選輪播 .promo 左右箭頭對稱定位（置於卡片邊緣外、相同規則） */
.page-home .promo__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 5vw, 52px);
  height: clamp(44px, 5vw, 52px);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 253, 248, 0.96);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(42, 23, 17, 0.24);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.page-home .promo__arrow svg { width: 55%; height: 55%; }
.page-home .promo__arrow:hover {
  background: var(--accent);
  color: #fdf8f1;
  transform: translateY(-50%) scale(1.08);
}
.page-home .promo__arrow--prev { inset-inline-start: clamp(-3rem, -8vw, -1rem); }
.page-home .promo__arrow--next { inset-inline-end: clamp(-3rem, -8vw, -1rem); }

/* 2) Hero 全寬輪播控制：對比、邊框、尺寸一致 */
.page-home .hpc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: clamp(44px, 5vw, 52px);
  height: clamp(44px, 5vw, 52px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-home .hpc__arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-home .hpc__arrow svg { width: clamp(20px, 3vw, 24px); height: clamp(20px, 3vw, 24px); }
.page-home .hpc__arrow--prev { left: clamp(12px, 2.5vw, 32px); }
.page-home .hpc__arrow--next { right: clamp(12px, 2.5vw, 32px); }
.page-home .hpc__pagination {
  position: absolute;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 4;
  display: flex;
  gap: clamp(6px, 1vw, 10px);
}
.page-home .hpc__pagination button {
  width: clamp(36px, 5vw, 44px);
  height: clamp(36px, 5vw, 44px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  font-size: clamp(12px, 1.2vw, 14px);
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-home .hpc__pagination button:hover { background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.8); }
.page-home .hpc__pagination button.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 3) 搜尋區日期欄位（type=text 切換）視覺一致 */
.page-home .search .field input[type="text"] {
  min-height: 3rem;
  padding: 0.75em 1em;
  font-family: var(--ff);
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-home .search .field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 93, 50, 0.1);
}

/* 4) CTA 與輪播按鈕尺寸統一（相對單位） */
.page-home .btn--lg {
  padding: clamp(0.7em, 1vw, 1.1em) clamp(1.8em, 3vw, 2.5em);
  font-size: clamp(1.08rem, 0.6vw + 1rem, 1.24rem);
  min-height: 3rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.page-home .btn--lg:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(232, 93, 50, 0.28); }
.page-home .promo__body .pill {
  padding: clamp(0.65em, 1vw, 0.9em) clamp(1.4em, 2vw, 1.8em);
  font-size: clamp(1.08rem, 0.5vw + 1.02rem, 1.2rem);
  font-weight: 700;
  min-height: 44px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
}
.page-home .load-more .btn--ghost {
  padding: clamp(0.8em, 1vw, 1.05em) clamp(2em, 3vw, 2.4em);
  font-size: clamp(1.1rem, 0.5vw + 1.02rem, 1.22rem);
  font-weight: 700;
  min-height: 3rem;
  border-width: 2px;
}
.page-home .search__btn .btn {
  padding: clamp(0.75em, 1vw, 1em) clamp(1.75em, 2.5vw, 2.2em);
  font-size: clamp(1.08rem, 0.5vw + 1rem, 1.2rem);
  font-weight: 600;
  min-height: 3rem;
}

@media (max-width: 768px) {
  .page-home .promo__arrow--prev { inset-inline-start: clamp(-2.5rem, -6vw, -0.8rem); }
  .page-home .promo__arrow--next { inset-inline-end: clamp(-2.5rem, -6vw, -0.8rem); }
  .page-home .hpc__pagination { gap: clamp(4px, 0.8vw, 8px); }
}
@media (max-width: 480px) {
  .page-home .btn--lg { padding: 0.7em 1.6em; font-size: 1rem; min-height: 2.75rem; }
  .page-home .promo__arrow--prev { inset-inline-start: clamp(-2rem, -5vw, -0.6rem); }
  .page-home .promo__arrow--next { inset-inline-end: clamp(-2rem, -5vw, -0.6rem); }
}

/* ---------------- services.html（.page-services） ---------------- */

/* 1) 導覽列：padding-block + 垂直置中 + CTA 相對內距 */
.page-services .nav {
  padding-block: clamp(0.8rem, 1.2vw, 1rem);
  align-items: center;
  gap: clamp(1.2rem, 2vw, 1.8rem);
}
/* req-495：移除 services 專屬 header 覆寫，改為完全沿用全站統一 header，
   讓找優惠/登入/刊登優惠 與其他四頁的字級、膠囊高度、圓角完全一致。 */

/* 2) 服務卡字級統一與 tags 標籤 */
.page-services .svc-card { padding: clamp(1.8rem, 3vw, 2.4rem); }
.page-services .svc-card h3 { font-size: clamp(1.28rem, 1.3vw + 1.08rem, 1.52rem); line-height: 1.4; margin-bottom: 0.8em; }
.page-services .svc-card p { font-size: clamp(1.06rem, 0.4vw + 0.98rem, 1.18rem); line-height: 1.9; color: var(--text); margin-bottom: 1rem; }
.page-services .svc-card .tags { display: flex; flex-wrap: wrap; gap: clamp(0.7rem, 1vw, 0.95rem); margin-top: clamp(1.3rem, 2vw, 1.7rem); }
.page-services .svc-card .tags span {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.98rem, 0.3vw + 0.92rem, 1.12rem);
  font-weight: 600;
  line-height: 1.6;
  color: #2d3429;
  background: var(--trust-soft);
  padding: 0.65em 1.3em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  min-height: 40px;
}

/* 3) 內容範例卡（case-grid）內容區與標籤列貼底齊平 */
.page-services .case-grid .card { display: flex; flex-direction: column; height: 100%; }
.page-services .case-grid .card h3 { font-size: clamp(1.22rem, 1.2vw + 1.04rem, 1.46rem); line-height: 1.4; margin-top: clamp(1.1rem, 1.8vw, 1.5rem); margin-bottom: 0.6em; }
.page-services .case-grid .card p { font-size: clamp(1.04rem, 0.4vw + 0.97rem, 1.14rem); line-height: 1.85; color: var(--text); margin-bottom: 1rem; flex: 1; }
.page-services .case-grid .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 1vw, 0.95rem);
  align-items: center;
  margin-top: auto;
  padding-top: clamp(0.8rem, 1.2vw, 1rem);
  border-top: 1px solid var(--line);
}
.page-services .case-grid .pill {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.98rem, 0.3vw + 0.92rem, 1.12rem);
  font-weight: 600;
  line-height: 1.6;
  padding: 0.6em 1.2em;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  min-height: 40px;
  white-space: nowrap;
}
.page-services .case-grid .pill:hover { background: var(--accent); color: #fdf8f1; transform: translateY(-2px); }

/* 4) 方案卡 CTA 一致性 */
.page-services .pricing-grid .card { display: flex; flex-direction: column; }
.page-services .pricing-grid .card h3 { font-size: clamp(1.26rem, 1.4vw + 1.06rem, 1.5rem); line-height: 1.35; margin-bottom: 0.8em; }
.page-services .pricing-grid .card p { font-size: clamp(1.04rem, 0.4vw + 0.97rem, 1.14rem); line-height: 1.8; color: var(--text); margin-bottom: 1.2em; }
.page-services .pricing-grid .checklist li { font-size: clamp(1.02rem, 0.4vw + 0.96rem, 1.14rem); line-height: 1.75; color: var(--text); padding: 0.5em 0; }
.page-services .pricing-grid .btn--block {
  margin-top: auto;
  padding: 0.7em 1.6em;
  font-size: clamp(1.02rem, 0.4vw + 0.96rem, 1.14rem);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-weight: 600;
}

/* 5) Featured 卡 plan-badge：縮為內容自適應標籤、層級低於 CTA */
.page-services .pricing-grid .card.is-featured { border: 2px solid var(--accent); transform: translateY(-6px); padding-top: clamp(2.4rem, 3.5vw, 3.2rem); }
.page-services .pricing-grid .card.is-featured:hover { transform: translateY(-8px); }
.page-services .pricing-grid .plan-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: clamp(0.85rem, 0.3vw + 0.8rem, 0.95rem);
  font-weight: 700;
  padding: 0.4em 1.1em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(196, 107, 74, 0.22);
  display: inline-block;
  width: auto;
  text-align: center;
  z-index: 10;
}

/* 6) 深色區 step 卡字級與間距 */
.page-services .section--dark .step { padding: clamp(1.8rem, 3vw, 2.4rem); background: rgba(255, 253, 248, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius); }
.page-services .section--dark .step h3 { font-size: clamp(1.32rem, 1.5vw + 1.08rem, 1.6rem); line-height: 1.4; margin-bottom: 0.8em; color: #fdfaf4; }
.page-services .section--dark .step p { font-size: clamp(1.04rem, 0.4vw + 0.97rem, 1.14rem); line-height: 1.9; color: rgba(255, 255, 255, 0.85); margin: 0; }

/* 7) 頁尾密度與行高 */
.page-services .site-footer { line-height: 2.1; padding: clamp(3.2rem, 5vw, 4.8rem) 0 clamp(2.4rem, 4vw, 3.2rem); }
.page-services .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: clamp(2.8rem, 5.5vw, 4.8rem); margin-bottom: clamp(2.4rem, 3vw, 3rem); }
.page-services .footer__brand p { font-size: clamp(1.04rem, 0.4vw + 0.97rem, 1.14rem); line-height: 2.1; color: #faf6ee; }
.page-services .site-footer h4 { font-size: clamp(1.32rem, 1.2vw + 1.1rem, 1.52rem); line-height: 1.4; margin-bottom: clamp(1.2rem, 2vw, 1.6rem); color: #fdfaf4; }
.page-services .site-footer li { font-size: clamp(1.04rem, 0.4vw + 0.97rem, 1.14rem); line-height: 2; margin-bottom: clamp(1.2rem, 1.8vw, 1.6rem); color: #faf6ee; }
.page-services .footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #FFF8EE; transition: all 0.25s ease; }
.page-services .footer__social a:hover { background: var(--accent); color: #fdf8f1; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(196, 107, 74, 0.28); }

@media (max-width: 720px) {
  .page-services .footer__grid { grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 4vw, 3.2rem); }
  .page-services .footer__brand { grid-column: 1 / -1; margin-bottom: 0.5rem; }
}
@media (max-width: 560px) {
  .page-services .footer__grid { grid-template-columns: 1fr; gap: clamp(1.8rem, 3vw, 2.4rem); }
}

/* ---------------- works.html（.page-works） ---------------- */

/* 圖片裁切取中央有意義內容，避免空白感；角標疊在實際圖/ fallback 上 */
.page-works .work img { object-position: center; }
.page-works .work .badge--corner { z-index: 2; }

/* ============================================================
   可讀性 / 對比 / 按鈕系統收口（orchestrator 合併 4 個並行 agent）
   單一共用樣式：全部沿用 :root 變數與相對單位(rem/clamp/em/%/vw)，
   不寫死固定像素寬度；頁面專屬規則一律以 body class 前綴 scope，
   全站共用元件(footer/nav)以未前綴規則統一。置於檔尾覆寫前面同特定性規則。
   注意：font-size 一律「不低於」既有基準，避免縮小既有已放大的字級。
   ============================================================ */

/* ---------------- contact.html（.contact-page） ---------------- */
/* 1) 首屏流程膠囊：未啟用步驟在深色 hero 上加強背景/邊框/文字對比 */
.contact-page .flow-step {
  padding: .6em 1.2em; font-size: clamp(.96rem, .4vw + .9rem, 1.06rem);
  background: rgba(255,253,248,.16); border: 1.5px solid rgba(255,253,248,.34);
  color: #faf6ee; line-height: 1.5; min-height: 46px;
  display: flex; align-items: center; gap: .6rem; border-radius: var(--radius-lg);
}
.contact-page .flow-step__num {
  flex: 0 0 auto; width: 1.9em; height: 1.9em; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1em;
  background: rgba(255,253,248,.24); color: #fff;
}
.contact-page .flow-step.is-current { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(232,93,50,.3); }
.contact-page .flow-step.is-current .flow-step__num { background: #fff; color: var(--accent); }
.contact-page .flow-step.is-done { background: rgba(255,253,248,.16); border-color: rgba(255,253,248,.34); color: #faf6ee; }
.contact-page .flow-step.is-done .flow-step__num { background: var(--accent-soft); color: var(--accent-dark); }

/* 2) 「商家可以刊登什麼」卡片：清楚字級階層 + 標籤同高對齊（不縮小內文） */
.contact-page .list-what .card { display: flex; flex-direction: column; height: 100%; }
.contact-page .list-what .svc-card h3 { font-size: clamp(1.34rem, 1.3vw + 1.02rem, 1.54rem); line-height: 1.35; margin-bottom: .55em; }
.contact-page .list-what .svc-card p { font-size: clamp(1.12rem, .5vw + 1.04rem, 1.24rem); line-height: 1.95; color: var(--ink-soft); }
.contact-page .list-what .svc-card .tags { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; padding-top: 1.2rem; align-items: stretch; }
.contact-page .list-what .svc-card .tags span {
  padding: .6em 1.1em; font-size: clamp(.94rem, .35vw + .88rem, 1.04rem); font-weight: 600;
  line-height: 1.5; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-dark); border-radius: var(--radius-sm);
}

/* 3) 會員申請表單：提高基準字級/行高，placeholder 加深對比，欄位相對 padding */
.contact-page .field label { font-weight: 600; font-size: clamp(1.02rem, .5vw + .94rem, 1.14rem); line-height: 1.5; color: var(--ink); letter-spacing: .02em; }
.contact-page .field label .req { color: var(--accent-dark); font-weight: 700; }
.contact-page .field label .opt { color: var(--muted); font-weight: 500; }
.contact-page .field input, .contact-page .field select, .contact-page .field textarea {
  font-size: clamp(1rem, .45vw + .94rem, 1.12rem); padding: .7em 1em; min-height: 48px; line-height: 1.5;
}
.contact-page .field textarea { min-height: 150px; line-height: 1.7; padding: .7em 1em; }
.contact-page .field input::placeholder, .contact-page .field textarea::placeholder { color: #7a665c; }
.contact-page .count-hint { font-size: clamp(.9rem, .3vw + .85rem, 1rem); color: var(--muted); margin-top: .45rem; display: block; line-height: 1.5; }
.contact-page .form-note { font-size: clamp(1rem, .4vw + .92rem, 1.1rem); line-height: 1.8; color: var(--muted); }
.contact-page .notice--info { font-size: clamp(1rem, .4vw + .92rem, 1.1rem); line-height: 1.7; }

/* 4) 左側聯絡資訊與活動類型膠囊：放大次要字、按鈕響應式一致高度 */
.contact-page .contact-info h3 { font-size: clamp(1.12rem, .5vw + 1rem, 1.22rem); font-weight: 600; }
.contact-page .contact-info p { font-size: clamp(1.06rem, .4vw + .98rem, 1.18rem); line-height: 1.85; color: var(--ink-soft); }
.contact-page .type-chips { display: flex; flex-wrap: wrap; gap: clamp(.55rem, 1.2vw, .8rem); margin-top: 1rem; }
.contact-page .type-chips .pill, .contact-page .pill--static {
  padding: .55em 1.1em; font-size: clamp(.96rem, .35vw + .9rem, 1.06rem);
  min-height: 44px; line-height: 1.4; justify-content: center;
}

/* 5) 服務範圍 Google 地圖按鈕：與其他次要 CTA 一致權重 */
.contact-page .map-cta-block .btn { padding: .7em 1.5em; font-size: clamp(1.02rem, .45vw + .96rem, 1.16rem); min-height: 48px; font-weight: 600; border-radius: var(--radius-sm); }

/* ---------------- index.html（.page-home） ---------------- */
/* 1) Hero 文案容器加左右安全內距，確保文字永不被左右輪播箭頭壓到 */
.page-home .hpc__content { padding-inline: clamp(2.5rem, 7vw, 4rem); }
/* 2) 左右圓形箭頭：定位在 hero 兩側安全區（相對單位），手機隱藏改用分頁/滑動 */
.page-home .hpc__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: clamp(40px, 5vw, 48px); height: clamp(40px, 5vw, 48px);
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.5);
  background: rgba(43,20,14,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .22s ease, border-color .22s ease, transform .18s ease;
}
.page-home .hpc__arrow:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.05); }
.page-home .hpc__arrow svg { width: 22px; height: 22px; display: block; }
.page-home .hpc__arrow--prev { left: clamp(.8rem, 2vw, 1.6rem); }
.page-home .hpc__arrow--next { right: clamp(.8rem, 2vw, 1.6rem); }
/* 3) 右下數字分頁：與圖片內容、下方搜尋卡保持一致間距 */
.page-home .hpc__pagination { position: absolute; bottom: clamp(1.6rem, 4vw, 2.8rem); right: clamp(1.2rem, 3vw, 2rem); z-index: 4; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.page-home .hpc__pagination button { width: 36px; height: 36px; min-width: 2.4em; min-height: 2.4em; border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-sm); background: rgba(43,20,14,.55); color: rgba(255,255,255,.92); font-weight: 700; font-size: .9rem; cursor: pointer; transition: background .22s ease, color .22s ease, border-color .22s ease, transform .2s ease; }
.page-home .hpc__pagination button:hover { background: rgba(43,20,14,.82); border-color: #fff; color: #fff; }
.page-home .hpc__pagination button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); }
/* 4) 浮起搜尋卡與 hero 間距 */
.page-home .search--float { margin-top: clamp(-2.6rem, -3.5vw, -1.6rem); margin-bottom: clamp(2rem, 3.5vw, 3rem); position: relative; z-index: 5; }
/* 5) 搜尋表單字級階層提升 */
.page-home .search .field label { font-size: clamp(.98rem, .4vw + .9rem, 1.1rem); font-weight: 600; line-height: 1.5; color: var(--text); }
.page-home .search .field input, .page-home .search .field select { font-size: clamp(1rem, .4vw + .92rem, 1.12rem); line-height: 1.6; padding: .6em .9em; min-height: 48px; }
.page-home .search .field input::placeholder { color: var(--muted); }
.page-home .search__btn .btn { width: 100%; min-height: 48px; padding: .75em 1.6em; font-size: clamp(1.06rem, .5vw + .98rem, 1.18rem); font-weight: 600; }
/* 6) 熱門搜尋 chip 一致字級 */
.page-home .hot-keywords { display: flex; flex-wrap: wrap; gap: clamp(.7rem, 1.5vw, 1.1rem); align-items: center; }
.page-home .hot-keywords .hk-label { font-weight: 700; color: var(--muted); font-size: clamp(1rem, .4vw + .92rem, 1.12rem); white-space: nowrap; }
.page-home .hot-keywords a { display: inline-flex; align-items: center; background: var(--card); border: 1px solid rgba(43,20,14,.1); color: var(--text); padding: .55em 1.15em; border-radius: var(--radius-sm); font-size: clamp(.98rem, .4vw + .9rem, 1.08rem); font-weight: 500; line-height: 1.5; min-height: 42px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.page-home .hot-keywords a:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
/* 7) Hero CTA 一致尺寸與間距 */
.page-home .hpc__cta { display: flex; flex-wrap: wrap; gap: clamp(.8rem, 1.5vw, 1.2rem); margin-top: clamp(1.4rem, 2vw, 2rem); }
.page-home .hpc__cta .btn { padding: .75em 1.6em; font-size: clamp(1.06rem, .5vw + .98rem, 1.18rem); min-height: 48px; }
@media (max-width: 860px) {
  .page-home .hpc__arrow { display: none; }
  .page-home .hpc__content { padding-inline: clamp(1.2rem, 5vw, 2rem); }
  .page-home .hpc__pagination { bottom: clamp(1.2rem, 3.5vw, 2rem); right: clamp(1rem, 2.5vw, 1.6rem); }
}
@media (max-width: 600px) {
  .page-home .hpc__cta { flex-direction: column; }
  .page-home .hpc__cta .btn { width: 100%; }
  .page-home .hpc__pagination button { width: 32px; height: 32px; font-size: .85rem; }
}

/* ---------------- services.html（.page-services） ---------------- */
/* 1) 功能標籤 / 內容範例橘標籤：一致響應式 chip（不低於既有字級）+ 同高對齊 */
.page-services .svc-card .tags span, .page-services .pill.btn-sm {
  font-size: clamp(1.06rem, .42vw + .98rem, 1.18rem); padding: .6em 1.2em; line-height: 1.6;
  min-height: 44px; display: inline-flex; align-items: center; gap: .4em;
}
.page-services .pill-row { gap: .9rem; margin-top: 1.6rem; }
/* 2) 卡片標題/內文字級階層 + 行距 */
.page-services .services-grid .card h3, .page-services .case-grid .card h3, .page-services .pricing-grid .card h3 { font-size: clamp(1.42rem, 1.5vw + 1.08rem, 1.62rem); line-height: 1.42; margin-bottom: .7em; }
.page-services .services-grid .card p, .page-services .case-grid .card p, .page-services .pricing-grid .card p { font-size: clamp(1.14rem, .5vw + 1.04rem, 1.26rem); line-height: 2; margin-bottom: 1.3rem; }
/* 3) 深色「刊登後會出現在哪裡」：提高文字亮度/字級/行距，加強對比 */
.page-services .section--dark .step h3 { font-size: clamp(1.34rem, 1.2vw + 1.08rem, 1.54rem); line-height: 1.42; color: #fdfaf4; }
.page-services .section--dark .step p { font-size: clamp(1.12rem, .5vw + 1.04rem, 1.24rem); line-height: 2.1; color: #faf6ee; }
.page-services .section--dark .checklist li { color: #f3ebe1; }
/* 4) 方案卡 CTA：共用尺寸 + flex 對齊卡片底部，同排齊平 */
.page-services .pricing-grid .card > .mt-3 { margin-top: auto; }
.page-services .pricing-grid .card .btn--primary.btn--block { padding: .7em 1.4em; min-height: 48px; font-size: clamp(1.06rem, .45vw + .98rem, 1.18rem); width: 100%; }

/* ---------------- works.html（.page-works） ---------------- */
/* 1) 篩選表單：提高字級/對比，placeholder 次要但清楚 */
.page-works .filterbar .field input, .page-works .filterbar .field select { font-size: clamp(1.04rem, .5vw + .96rem, 1.16rem); color: var(--text); line-height: 1.5; padding: .55em .9em; min-height: 48px; }
.page-works .filterbar .field label { font-size: clamp(1.08rem, .5vw + 1rem, 1.2rem); font-weight: 700; color: var(--ink); margin-bottom: .5rem; }
.page-works .filterbar .field input::placeholder { color: #8a7b6d; }
.page-works .filterbar .field select option { color: var(--text); background: #fffdf8; }
/* 2) 優惠卡 / 推薦卡：字級階層更清楚、行距加大 */
.page-works .work__cat { font-size: clamp(1.16rem, .5vw + 1.06rem, 1.3rem); font-weight: 700; letter-spacing: .12em; color: #2d3429; margin-bottom: .6rem; }
.page-works .work__body h3 { font-size: clamp(1.46rem, 1.5vw + 1.1rem, 1.72rem); line-height: 1.36; margin: .4rem 0 .9rem; }
.page-works .work__body p { font-size: clamp(1.18rem, .4vw + 1.08rem, 1.3rem); line-height: 1.85; color: var(--text); margin: 0 0 1.1rem; }
.page-works .deal-meta { font-size: clamp(1.06rem, .4vw + 1rem, 1.18rem); color: #7a6f65; line-height: 1.6; }
/* 3) 卡片 CTA 與「載入更多」：統一相對尺寸、隨字級縮放 */
.page-works .pill { padding: .7em 1.5em; font-size: clamp(1.12rem, .4vw + 1.04rem, 1.24rem); font-weight: 600; min-height: 48px; line-height: 1.5; }
.page-works .load-more .btn--ghost { padding: .75em 2em; font-size: clamp(1.14rem, .5vw + 1.04rem, 1.28rem); font-weight: 600; min-height: 50px; line-height: 1.5; border-width: 2px; }

/* ---------------- 全站共用元件（沿用變數，跨頁一致） ---------------- */
/* Footer：提高深底文字對比與字級，社群 icon 放大可點擊範圍 */
.site-footer { color: #f5ede3; font-size: clamp(1.18rem, .5vw + 1.08rem, 1.3rem); }
.site-footer h4 { color: #fdfaf4; font-size: clamp(1.5rem, .8vw + 1.32rem, 1.66rem); }
.site-footer li { color: #f5ede3; font-size: clamp(1.14rem, .4vw + 1.05rem, 1.24rem); }
.site-footer a { color: #f5ede3; }
.site-footer a:hover { color: #ffc99f; }
.footer__brand p { color: #f5ede3; font-size: clamp(1.16rem, .4vw + 1.06rem, 1.28rem); }
.footer__social a { width: clamp(46px, 4.5vw, 54px); height: clamp(46px, 4.5vw, 54px); }
.footer__social a svg { width: 19px; height: 19px; }
.footer__bottom { color: #f5ede3; font-size: clamp(1.12rem, .4vw + 1.04rem, 1.22rem); }
/* 導覽文字：溫和放大（保守值，避免桌機 nav 換行/溢出） */
.nav__links a { font-size: clamp(14px, .25vw + 13px, 15.5px); }


/* ====================================================================
   2026/06/15 多代理修復收口（orchestrator append）：
   contact/index/services/works 四頁 + 全站 chrome 一致性
   ==================================================================== */

/* ============================================================
   全站導覽 + 頁尾 + 按鈕一致性微調（orchestrator 最終收口）
   統一 nav 字級、.nav__cta .btn 桌機 padding、footer 社群 icon 對比驗證
   ============================================================ */

/* 1) 導覽連結字級統一：從 14-15.5px 升至可讀的 .95-1.06rem（約 15-17px）
   與標題層級協調、保持 font-weight:600 與 nowrap、桌機不換行 */
.nav__links a {
  font-size: clamp(.95rem, .3vw + .88rem, 1.06rem);
  padding: .6rem .5rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 2) 導覽 CTA 按鈕：桌機 padding 改為 .6em 1.4em（字級用 clamp 與導覽協調）
   確保外框與文字比例平衡、min-height>=44px、手機沿用原較大值 */
@media (min-width: 1025px) {
  .nav__cta .btn {
    padding: .6em 1.4em;
    font-size: clamp(.95rem, .3vw + .88rem, 1.06rem);
  }
}
@media (max-width: 1024px) {
  .nav__cta .btn {
    padding: .7em 1.5em;
    font-size: clamp(.95rem, .3vw + .88rem, 1.06rem);
  }
}

/* 3) 頁尾驗收：文字/社群 icon 在深底對比足夠、icon 大小一致 >=44px 可點擊
   現有已達標 (46-54px clamp)，沿用既有值或略增確認，勿縮小 */
.site-footer {
  color: #f5ede3;
  font-size: clamp(1.18rem, .5vw + 1.08rem, 1.3rem);
}
.site-footer a {
  color: #f5ede3;
  transition: color .2s ease;
}
.site-footer a:hover {
  color: #ffc99f;
}
.footer__social a {
  width: clamp(46px, 4.5vw, 54px);
  height: clamp(46px, 4.5vw, 54px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.10);
  color: #FFF8EE;
  font-weight: 600;
  transition: .2s;
  min-height: 46px;
}
.footer__social a:hover {
  background: var(--accent);
  color: #fdf8f1;
  transform: translateY(-2px);
}
.footer__social a svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* 4) .btn 基底全站字級確認：min-height>=44px、相對 padding 一致 */
.btn {
  min-height: 44px;
  font-size: clamp(1.08rem, .5vw + .96rem, 1.18rem);
}
.btn--primary {
  padding: .8em 1.85em;
  min-height: 44px;
}

/* ============================================================
   contact.html 修正集（2026/06 Contact Page CSS Refinement）
   issue 1. hero 流程步驟對比、2. 表單字級/行高/對比、
   3. textarea 字數提示位置、4. vertical rhythm 間距、5. 容器寬度。
   ============================================================ */

/* ---- 1. Hero 步驟列 — 非啟用步驟提高對比（深底 var(--ink) 上讀性提升） ---- */
.contact-page .flow-step {
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 0.75em 1.2em;
  min-height: 2.8em;
  flex: 1 1 160px;
}

.contact-page .flow-step__num {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.95);
  flex: 0 0 auto;
}

.contact-page .flow-step.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px rgba(232, 93, 50, 0.3);
  text-shadow: none;
}

.contact-page .flow-step.is-current .flow-step__num {
  background: #fff;
  color: var(--accent);
}

.contact-page .flow-step.is-done {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.35);
}

.contact-page .flow-step.is-done .flow-step__num {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* ---- 2. 表單字級與行高統一 ---- */

/* 標籤：clamp(1rem..1.1rem) × line-height 1.5 */
.contact-page .field label {
  font-weight: 600;
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.1rem);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
  display: block;
}

.contact-page .field label .req {
  color: var(--accent);
  font-weight: 700;
}

.contact-page .field label .opt {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.92em;
}

/* 輸入框/select/textarea：clamp(1rem..1.12rem) × 1.5 */
.contact-page .field input,
.contact-page .field select,
.contact-page .field textarea {
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.12rem);
  line-height: 1.5;
  min-height: 44px;
  border: 1px solid #D8C7B6;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  background: #FFFDF8;
  color: var(--text);
  font-family: var(--ff);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.contact-page .field textarea {
  padding: 12px 14px;
  min-height: 140px;
  resize: vertical;
}

/* Placeholder 對比度提升（深暖灰，可讀） */
.contact-page .field input::placeholder,
.contact-page .field textarea::placeholder {
  color: #7A665C;
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.12rem);
}

/* Focus 狀態 */
.contact-page .field input:focus,
.contact-page .field select:focus,
.contact-page .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 93, 50, 0.12);
  background: #fffdf8;
}

/* Helper 文字與 count-hint：提高對比（用 var(--muted) 或深暖灰） */
.contact-page .count-hint {
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.06rem);
  color: #7A665C;
  display: block;
  text-align: right;
  margin-top: 0.4rem;
  pointer-events: auto;
}

.contact-page .form-note {
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.06rem);
  line-height: 1.75;
  color: #7A665C;
  margin-top: 0.5rem;
}

/* 送出按鈕：min-height >= 48px，字級與高度成比例 */
.contact-page .form .btn--block {
  font-size: clamp(1.06rem, 0.5vw + 0.96rem, 1.18rem);
  min-height: 48px;
  padding: 0.75em 1.6em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- 3. Textarea 字數提示定位：改為下方靜態、不浮疊 ---- */

.contact-page .textarea-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.contact-page .textarea-wrap .count-hint {
  position: static;
  display: block;
  text-align: right;
  margin-top: 0.4rem;
  pointer-events: auto;
  z-index: auto;
}

/* ---- 4. Vertical Rhythm：表單與區塊間距統一 ---- */

/* 表單欄位間距 */
.contact-page .field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: clamp(1.1rem, 1.5vw, 1.4rem);
}

.contact-page .field.full {
  grid-column: 1 / -1;
}

/* 表單 grid 間距：行更寬 */
.contact-page .form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.1rem, 1.4vw, 1.5rem) clamp(1.3rem, 1.6vw, 1.6rem);
  row-gap: clamp(1.2rem, 1.8vw, 1.6rem);
}

@media (max-width: 560px) {
  .contact-page .form__grid {
    grid-template-columns: 1fr;
  }
}

/* 提示框與相鄰欄位分隔 */
.contact-page .notice {
  margin: clamp(0.5rem, 1.5vw, 0.8rem) 0;
  padding: 0.95em 1.2em;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  color: var(--accent-dark);
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.06rem);
  border-radius: var(--radius-sm);
  font-weight: 500;
  line-height: 1.7;
}

.contact-page .notice--info {
  background: var(--accent-soft);
  border: 1px solid rgba(232, 93, 50, 0.3);
}

/* 同意欄位區塊 */
.contact-page .consent-box {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: clamp(1rem, 1.5vw, 1.2rem);
  background: rgba(232, 93, 50, 0.05);
  border: 1px solid rgba(232, 93, 50, 0.2);
  border-radius: var(--radius-sm);
  margin: clamp(0.6rem, 1.5vw, 0.8rem) 0;
}

.contact-page .consent-box input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: 0.35rem;
  flex: 0 0 auto;
  accent-color: var(--accent);
  cursor: pointer;
}

.contact-page .consent-box label {
  margin: 0;
  font-weight: 500;
  line-height: 1.7;
  cursor: pointer;
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.06rem);
  color: var(--text);
}

/* ---- 5. 容器與寬度：確保相對單位、無固定 px ---- */

/* 表單容器 */
.contact-page .form {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: var(--shadow);
}

.contact-page .form__head {
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

.contact-page .form__head h2 {
  font-size: clamp(1.56rem, 2.2vw, 1.85rem);
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.contact-page .form__head p {
  color: var(--muted);
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.12rem);
  line-height: 1.7;
  margin: 0;
}

/* 服務卡標籤間距 */
.contact-page .list-what .svc-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.65rem, 1vw, 0.9rem);
  margin-top: clamp(1.4rem, 2vw, 1.8rem);
}

.contact-page .list-what .svc-card .tags span {
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.12rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 0.75em 1.45em;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

/* 活動類型 chips */
.contact-page .type-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
}

.contact-page .type-chips .pill {
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.06rem);
  padding: 0.65em 1.1em;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  line-height: 1.4;
}

.contact-page .pill--static {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1.5px solid var(--accent);
  cursor: default;
}

.contact-page .pill--static:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: none;
  transform: none;
}

/* 服務範圍區塊 */
.contact-page .map-cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 2.8rem);
}

.contact-page .map-cta-block h2 {
  font-size: clamp(1.56rem, 3vw, 1.85rem);
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.contact-page .map-cta-block p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.5vw + 0.88rem, 1.12rem);
  max-width: 100%;
  line-height: 1.7;
}

.contact-page .map-cta-block .btn {
  align-self: center;
  padding: 0.7em 1.8em;
  font-size: clamp(1.06rem, 0.5vw + 0.96rem, 1.18rem);
  min-height: 48px;
}

/* 區塊間距 */
.contact-page .section.section--tight {
  padding-top: clamp(1.4rem, 2.8vw, 2.2rem);
  padding-bottom: clamp(1.4rem, 2.8vw, 2.2rem);
}

/* 修正第 1 輪：Hero 輪播箭頭位置調整 & 熱門搜尋左對齐 */

/* 1) Hero 控制容器：擴展到視窗寬度，讓箭頭落在 46% 內容容器外側 */
.page-home .hpc__controls {
  max-width: 100vw;
  width: 100%;
  padding-inline: clamp(0.6rem, 2vw, 1.4rem);
}

/* 2) Hero 箭頭：改用絕對定位於視窗左右邊，不與內容重疊 */
.page-home .hpc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: auto;
  flex-shrink: 0;
}

.page-home .hpc__arrow--prev {
  left: clamp(0.6rem, 1.5vw, 1.2rem);
}

.page-home .hpc__arrow--next {
  right: clamp(0.6rem, 1.5vw, 1.2rem);
}

/* 3) 熱門搜尋標籤列：左對齐，自然換行 */
.page-home .hot-keywords {
  justify-content: flex-start;
}

/* 4) CTA 按鈕一致性微調：統一相對 padding & min-height */
.page-home .hpc__cta .btn {
  padding: 0.7em 1.5em;
  min-height: 48px;
}

/* 5) 搜尋按鈕對齐：同層級按鈕高度/字級一致 */
.page-home .search__btn .btn {
  padding: 0.7em 1.5em;
  min-height: 48px;
}

/* RWD 調整：手機版保持隱藏箭頭 */
@media (max-width: 860px) {
  .page-home .hpc__controls {
    padding-inline: clamp(0.8rem, 3vw, 1.6rem);
  }
  
  .page-home .hpc__arrow {
    display: none;
  }
}

/* ============================================================
   services.html（.page-services）補強：標籤一致性、對比、字級層級
   ============================================================ */

/* 1) 內容範例卡片標籤一致性：確保 pill-row 內所有 .pill.btn-sm 的字級、padding、高度完全一致且對齊 */
.page-services .case-grid .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.5vw, 0.9rem);
  margin-top: 1.6rem;
  align-items: center;
}

.page-services .case-grid .pill,
.page-services .case-grid .pill.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.06rem, 0.42vw + 0.98rem, 1.18rem);
  font-weight: 600;
  line-height: 1.6;
  padding: 0.6em 1.2em;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  min-height: 44px;
  white-space: nowrap;
  cursor: default;
  border: none;
  transition: none;
}

.page-services .case-grid .pill:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  transform: none;
  box-shadow: none;
}

/* 2) 深色區塊卡片對比強化：加亮背景、增強邊框、確保文字高對比 */
.page-services .section--dark .step {
  background: rgba(255, 253, 248, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.4rem);
}

.page-services .section--dark .step::before {
  background: rgba(231, 183, 159, 0.28);
  color: #f5d9c8;
  margin-bottom: 1rem;
}

.page-services .section--dark .step h3 {
  font-size: clamp(1.34rem, 1.2vw + 1.08rem, 1.54rem);
  line-height: 1.42;
  color: #fdfaf4;
  margin-bottom: 0.8em;
}

.page-services .section--dark .step p {
  font-size: clamp(1.12rem, 0.5vw + 1.04rem, 1.24rem);
  line-height: 2.1;
  color: #faf6ee;
  margin: 0;
}

/* === works 頁補強（focus-visible 與按鈕比例優化）=== */

/* 篩選表單：確保 select/input 邊框對比度充分 */
.page-works .filterbar select,
.page-works .filterbar input {
  border-color: #D8C1AF;
  background-color: #FFFDF8;
}

/* 篩選表單「套用篩選」按鈕：桌機版不應滿寬，僅 auto 寬度 */
@media (min-width: 861px) {
  .page-works .filterbar .btn--primary {
    width: auto;
    justify-self: start;
  }
}

/* 篩選表單「套用篩選」按鈕：focus-visible 狀態提升可見度 */
.page-works .filterbar .btn--primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 93, 50, 0.15);
}

/* 篩選表單「套用篩選」按鈕：hover 與 active 狀態完整 */
.page-works .filterbar .btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 93, 50, 0.24);
}

.page-works .filterbar .btn--primary:active {
  transform: translateY(0);
}

/* 載入更多按鈕：focus-visible 狀態 */
.page-works .load-more .btn--ghost:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 93, 50, 0.15);
}

/* 卡片 CTA 按鈕額外 focus-visible 強化（應用到所有 pill 類） */
.page-works .work__body .pill:focus-visible {
  outline: 2px solid #fdf8f1;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--accent);
}

/* select option 文字顏色確保可讀 */
.page-works .filterbar select option {
  color: var(--text);
  background-color: #FFFDF8;
}

/* input placeholder 與 select 同級字級與透明度 */
.page-works .filterbar input::placeholder {
  color: #9B8B7E;
  opacity: 1;
}

/* 篩選表單欄位間距微調（確保標籤與輸入框對齐且間距充分） */
.page-works .filterbar .field {
  gap: 0.5rem;
}

/* 平板版：按鈕寬度改為 100% 以符合堆疊佈局 */
@media (max-width: 860px) {
  .page-works .filterbar .btn--primary {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   req-multifix（2026-06-15）：index / contact / services 三頁響應式收口
   權威覆寫層，附加於檔尾。全部使用 rem/em/%/clamp/grid-minmax，無固定頁寬。
   順序：全站共用 → 首頁 → contact → services。
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 全站共用元件 ───────────────────────── */

/* 按鈕：以 em 內距驅動高度，建立一致尺寸階層 */
.btn { padding: .7em 1.5em; font-size: clamp(1.06rem, .5vw + .94rem, 1.16rem); line-height: 1.5; min-height: 44px; }
.btn--primary { padding: .7em 1.85em; font-size: clamp(1.08rem, .5vw + .96rem, 1.18rem); }
.btn--lg { padding: .95em 2.4em; font-size: clamp(1.14rem, 1.2vw + .88rem, 1.32rem); min-height: 48px; }
.btn--sm { padding: .45em 1.1em; font-size: clamp(.92rem, .3vw + .86rem, 1rem); min-height: 40px; }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* Footer：提升深底文字可讀性與區塊間距 */
.site-footer { font-size: clamp(1.12rem, .6vw + 1.02rem, 1.28rem); line-height: 2.1; }
.footer__grid { gap: clamp(2.8rem, 6vw, 5.2rem); margin-bottom: clamp(2.8rem, 4vw, 3.6rem); }
.footer__brand p { font-size: clamp(1.12rem, .5vw + 1.04rem, 1.24rem); line-height: 2.05; }
.site-footer h4 { font-size: clamp(1.44rem, .8vw + 1.26rem, 1.58rem); margin-bottom: clamp(1.5rem, 2.2vw, 1.8rem); }
.site-footer li { margin-bottom: clamp(1rem, 2vw, 1.4rem); line-height: 2; }
.footer__bottom { font-size: clamp(1.08rem, .5vw + 1.02rem, 1.2rem); line-height: 1.8; padding-top: clamp(2rem, 3vw, 2.4rem); }

/* 容器一致性保險 */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.2rem); }

/* ───────────────────────── 首頁 page-home ───────────────────────── */

/* 1) 熱門搜尋標籤列：自然響應式排列，避免單顆孤立換行 */
.page-home .hot-keywords { justify-content: flex-start; gap: clamp(.7rem, 1.4vw, 1rem); flex-wrap: wrap; max-width: var(--container); margin-left: auto; margin-right: auto; padding: 0 clamp(1.2rem, 4vw, 2.2rem); }
.page-home .hot-keywords a { padding: .42em 1.05em; font-size: clamp(1rem, .4vw + .93rem, 1.08rem); white-space: nowrap; flex-shrink: 0; }

/* 2) 搜尋列：input/select/button 高度與字級一致 */
.page-home .search__form { gap: clamp(.75rem, 1.5vw, 1.1rem); }
.page-home .search__form .field { margin-bottom: 0; }
.page-home .search__form .field input,
.page-home .search__form .field select { min-height: 48px; padding: .6em .9em; font-size: clamp(1.04rem, .4vw + .96rem, 1.14rem); line-height: 1.5; }
.page-home .search__form .field label { font-size: clamp(1rem, .3vw + .94rem, 1.08rem); }
.page-home .search__btn .btn { min-height: 48px; padding: .65em 1.5em; font-size: clamp(1.06rem, .5vw + .96rem, 1.16rem); font-weight: 600; line-height: 1.5; white-space: nowrap; }

/* 3) Hero 輪播箭頭：圓鈕、相對尺寸；水平位置鎖在置中容器邊緣而非視窗邊緣 */
.page-home .hpc__controls { position: relative; width: 100%; max-width: 100%; }
.page-home .hpc__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; pointer-events: auto; width: clamp(44px, 6vw, 56px); height: clamp(44px, 6vw, 56px); display: flex; align-items: center; justify-content: center; background: rgba(255,253,248,.95); color: var(--accent); border: 1px solid rgba(232,93,50,.2); border-radius: 50%; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.page-home .hpc__arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-50%) scale(1.08); }
.page-home .hpc__arrow svg { width: clamp(20px, 2.5vw, 24px); height: clamp(20px, 2.5vw, 24px); display: block; }
.page-home .hpc__arrow--prev { left: max(clamp(.8rem, 2vw, 1.6rem), calc(50% - var(--container) / 2 + 1rem)); right: auto; }
.page-home .hpc__arrow--next { right: max(clamp(.8rem, 2vw, 1.6rem), calc(50% - var(--container) / 2 + 1rem)); left: auto; }

/* 4) 編輯精選箭頭：相對定位於置中 wrapper 內，不外飄 */
.page-home .promo__wrapper { position: relative; max-width: var(--container); margin-left: auto; margin-right: auto; }
.page-home .promo__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: clamp(42px, 5.5vw, 52px); height: clamp(42px, 5.5vw, 52px); display: flex; align-items: center; justify-content: center; background: rgba(255,253,248,.92); color: var(--accent); border: 1px solid rgba(232,93,50,.15); border-radius: 50%; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; pointer-events: auto; }
.page-home .promo__arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-50%) scale(1.08); }
.page-home .promo__arrow svg { width: clamp(18px, 2.2vw, 22px); height: clamp(18px, 2.2vw, 22px); display: block; }
.page-home .promo__arrow--prev { left: clamp(.5rem, 1.2vw, 1rem); right: auto; }
.page-home .promo__arrow--next { right: clamp(.5rem, 1.2vw, 1rem); left: auto; }

/* 5) 搜尋浮卡置中容器 */
.page-home .search { max-width: var(--container); margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .page-home .hpc__arrow, .page-home .promo__arrow { display: none; }
  .page-home .search__form { grid-template-columns: 1fr 1fr; }
  .page-home .search__btn { grid-column: 1 / -1; }
  .page-home .search__btn .btn { width: 100%; }
}
@media (max-width: 480px) {
  .page-home .search__form { grid-template-columns: 1fr; }
  .page-home .hot-keywords { justify-content: center; }
}

/* ───────────────────────── contact 頁 contact-page ───────────────────────── */

/* 1) 表單兩欄欄寬：minmax 防擠壓，長欄位 placeholder 不再截斷 */
.contact-page .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 1.8vw, 1.8rem); }
.contact-page .field.full { grid-column: 1 / -1; }

/* 2) placeholder 與 helper 文字對比加深，維持次要層級 */
.contact-page .field input::placeholder,
.contact-page .field textarea::placeholder { color: #6B5B50; opacity: 1; }
.contact-page .count-hint { color: #6B5B50; font-weight: 500; }
.contact-page .field .opt { color: #7A665C; font-weight: 500; }

/* 3) 聯絡資訊 vs 表單卡比例更協調，窄螢幕堆疊 */
.contact-page .split--contact { grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr); gap: clamp(1.8rem, 4.5vw, 3.2rem); align-items: start; }
@media (max-width: 800px) {
  .contact-page .split--contact { grid-template-columns: 1fr; }
}

/* 4) 確認勾選區：頂端對齊（容多行）、行距與字級更舒適 */
.contact-page .consent-box { align-items: flex-start; gap: clamp(.7rem, 1.2vw, 1rem); padding: clamp(1rem, 1.8vw, 1.3rem); }
.contact-page .consent-box input[type="checkbox"] { margin-top: .15em; flex-shrink: 0; }
.contact-page .consent-box label { line-height: 1.75; font-size: clamp(1rem, .5vw + .88rem, 1.08rem); margin-bottom: 0; }

/* ───────────────────────── services 頁 page-services ───────────────────────── */

/* 1) 字級階層 */
.page-services h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1.35; }
.page-services h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.38; }
.page-services h3 { font-size: clamp(1.28rem, 1.4vw + 1.08rem, 1.56rem); line-height: 1.42; margin-bottom: .7em; }
.page-services p, .page-services .lead { font-size: clamp(1.1rem, .5vw + 1.02rem, 1.24rem); line-height: 2; }
.page-services .section__head { max-width: 720px; margin: 0 auto clamp(2.2rem, 4.5vw, 3.2rem); }
.page-services .eyebrow { font-size: clamp(.88rem, .32vw + .82rem, .98rem); letter-spacing: .26em; margin-bottom: 1rem; }

/* 2) 服務卡與標籤 */
.page-services .svc-card { padding: clamp(1.8rem, 3vw, 2.4rem); }
.page-services .svc-card h3 { font-size: clamp(1.28rem, 1.3vw + 1.08rem, 1.52rem); line-height: 1.4; margin-bottom: .8em; }
.page-services .svc-card p { font-size: clamp(1.06rem, .4vw + .98rem, 1.18rem); line-height: 1.9; margin-bottom: 1rem; }
.page-services .svc-card .tags { display: flex; flex-wrap: wrap; gap: clamp(.7rem, 1vw, .95rem); margin-top: clamp(1.3rem, 2vw, 1.7rem); }
.page-services .svc-card .tags span { display: inline-flex; align-items: center; justify-content: center; font-size: clamp(1.04rem, .4vw + .96rem, 1.16rem); font-weight: 600; line-height: 1.6; padding: .55em 1em; color: #2d3429; background: var(--trust-soft); border-radius: var(--radius-sm); min-height: 44px; white-space: nowrap; transition: background .2s ease, color .2s ease, transform .2s ease; }
.page-services .svc-card .tags span:hover { background: var(--trust); color: #fdfaf4; transform: translateY(-1px); }

/* 3) 內容範例卡與橘色 pill 標籤 */
.page-services .case-grid .card { display: flex; flex-direction: column; height: 100%; }
.page-services .case-grid .card h3 { font-size: clamp(1.22rem, 1.2vw + 1.04rem, 1.46rem); line-height: 1.4; margin-top: clamp(1.1rem, 1.8vw, 1.5rem); margin-bottom: .6em; }
.page-services .case-grid .card p { font-size: clamp(1.04rem, .4vw + .97rem, 1.14rem); line-height: 1.85; margin-bottom: 1rem; flex: 1; }
.page-services .case-grid .pill-row { display: flex; flex-wrap: wrap; gap: clamp(.7rem, 1vw, .95rem); align-items: center; margin-top: auto; padding-top: clamp(.8rem, 1.2vw, 1rem); border-top: 1px solid var(--line); }
.page-services .case-grid .pill { display: inline-flex; align-items: center; font-size: clamp(.98rem, .3vw + .92rem, 1.12rem); font-weight: 600; line-height: 1.6; padding: .55em 1.1em; background: var(--accent-soft); color: var(--accent-dark); border-radius: var(--radius-sm); min-height: 40px; white-space: nowrap; transition: background .2s ease, color .2s ease, transform .2s ease; }
.page-services .case-grid .pill:hover { background: var(--accent); color: #fdf8f1; transform: translateY(-2px); }

/* 4) 深色曝光區步驟卡 */
.page-services .section--dark .step h3 { font-size: clamp(1.34rem, 1.2vw + 1.08rem, 1.54rem); line-height: 1.42; color: #fdfaf4; margin-bottom: .8em; }
.page-services .section--dark .step p { font-size: clamp(1.12rem, .5vw + 1.04rem, 1.24rem); line-height: 2.1; color: #faf6ee; margin: 0; }

/* 5) 方案卡與 CTA */
.page-services .pricing-grid .card { display: flex; flex-direction: column; height: 100%; }
.page-services .pricing-grid .card h3 { font-size: clamp(1.26rem, 1.4vw + 1.06rem, 1.5rem); line-height: 1.35; margin-bottom: .8em; }
.page-services .pricing-grid .card p { font-size: clamp(1.04rem, .4vw + .97rem, 1.14rem); line-height: 1.8; margin-bottom: 1.2em; }
.page-services .pricing-grid .checklist li { font-size: clamp(1.02rem, .4vw + .96rem, 1.14rem); line-height: 1.75; padding: .5em 0; }
.page-services .pricing-grid .card > .mt-3 { margin-top: auto; }
.page-services .pricing-grid .btn--block { padding: .7em 1.4em; min-height: 48px; font-size: clamp(1.06rem, .45vw + .98rem, 1.18rem); font-weight: 600; width: 100%; display: flex; align-items: center; justify-content: center; }

/* 6) 推薦方案膠囊標籤：頂部留安全距離、水平置中、不壓內容 */
.page-services .pricing-grid .card.is-featured { position: relative; padding-top: clamp(2.4rem, 3.5vw, 3.2rem); }
.page-services .pricing-grid .plan-badge { position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: clamp(.85rem, .3vw + .8rem, .95rem); font-weight: 700; padding: .4em 1.1em; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(196,107,74,.22); display: inline-block; width: auto; text-align: center; z-index: 10; }

@media (max-width: 768px) {
  .page-services h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
  .page-services h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
  .page-services .svc-card .tags span, .page-services .case-grid .pill { min-height: 40px; }
}
/* ═══════════════════════ req-multifix 結束 ═══════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  req-multifix-2（2026-06-15）：contact / index / services / works      ║
   ║  四頁並行修復收口層 — RWD、對比、控制可用性、表單欄位、卡片圖片佔位      ║
   ║  本層附加於檔尾，覆寫所有先前同選擇器規則。配色一律 var()，版面用相對單位 ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────────────────
   [全域共用] Header / Nav / Footer（全站一致，不 scope 在單頁）
   ───────────────────────────────────────────────────────────────────────── */
.nav__links a {
  font-size: clamp(.98rem, .35vw + .88rem, 1.06rem);
  padding: .65rem .6rem;
}
.nav__cta .btn {
  padding: .6em 1.2em;
  font-size: clamp(1.02rem, .35vw + .95rem, 1.12rem);
  min-height: 46px;
}

.site-footer {
  font-size: clamp(1.12rem, .5vw + 1.04rem, 1.26rem);
  line-height: 2.05;
}
.site-footer h4 {
  font-size: clamp(1.44rem, .8vw + 1.28rem, 1.62rem);
  margin-bottom: clamp(1.4rem, 2vw, 1.8rem);
}
.site-footer li {
  font-size: clamp(1.12rem, .5vw + 1.04rem, 1.24rem);
  line-height: 2.1;
  margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
  color: #f5ede3;
}
.footer__social a {
  width: clamp(44px, 1.2vw + 40px, 50px);
  height: clamp(44px, 1.2vw + 40px, 50px);
  font-size: clamp(1.1rem, .3vw + 1rem, 1.25rem);
}
.footer__social a svg {
  width: clamp(20px, .8vw + 18px, 24px);
  height: clamp(20px, .8vw + 18px, 24px);
}
.footer__social a:hover {
  background: var(--accent);
  color: #fdf8f1;
  box-shadow: 0 8px 20px rgba(232, 93, 50, .35);
}

/* ─────────────────────────────────────────────────────────────────────────
   [contact.html] 表單欄位提示、流程條、CTA、標籤一致性
   ───────────────────────────────────────────────────────────────────────── */
.contact-page .field-hint {
  display: block;
  font-size: clamp(0.8rem, 0.3vw + 0.76rem, 0.9rem);
  color: var(--ink-soft);
  margin-top: 0.35rem;
  line-height: 1.5;
}
.contact-page .form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
}
.contact-page .flow-step {
  padding: 0.75em 1.2em;
  font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.08rem);
  height: auto;
  min-height: 3rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.contact-page .flow-step.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(232, 93, 50, 0.28);
}
.contact-page .flow-step.is-current .flow-step__num {
  background: #fff;
  color: var(--accent);
}
.contact-page .flow-step:not(.is-current):not(.is-done) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
}
.contact-page .flow-step.is-done {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
}
.contact-page .flow-step.is-done .flow-step__num {
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.contact-page .flow-step__num {
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1em;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.contact-page .form .btn--block {
  padding: 0.6em 1.4em;
  font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.1rem);
  min-height: 46px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  max-width: 100%;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-page .list-what .svc-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.contact-page .list-what .svc-card .tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45em 0.9em;
  font-size: clamp(0.84rem, 0.3vw + 0.8rem, 0.95rem);
  line-height: 1.4;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: var(--radius-sm);
  min-height: 36px;
  border: 1px solid var(--accent-soft);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.contact-page .list-what .svc-card .tags span:hover {
  background: var(--accent);
  color: #fdf8f1;
  transform: translateY(-1px);
}
.contact-page .type-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.contact-page .type-chips .pill {
  padding: 0.45em 0.9em;
  font-size: clamp(0.84rem, 0.3vw + 0.8rem, 0.95rem);
  line-height: 1.4;
  min-height: 36px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.contact-page .pill--static {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid var(--accent-soft);
  cursor: default;
}
.contact-page .pill--static:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  transform: none;
  box-shadow: none;
}
.contact-page .info-row button,
.contact-page .contact-info button {
  padding: 0.45em 0.9em;
  font-size: clamp(0.84rem, 0.3vw + 0.8rem, 0.95rem);
  min-height: 36px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .contact-page .form__grid {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.2rem);
  }
  .contact-page .flow-step {
    flex: 1 1 100%;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   [index.html] hero 輪播箭頭/分頁、精選 promo 輪播箭頭預留 gutter、搜尋卡
   ───────────────────────────────────────────────────────────────────────── */
.page-home .hpc__controls {
  position: relative;
  width: 100%;
  max-width: 100%;
  z-index: 3;
}
.page-home .hpc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: auto;
  width: clamp(46px, 5.5vw, 54px);
  height: clamp(46px, 5.5vw, 54px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 248, 0.93);
  color: var(--accent);
  border: 1.5px solid rgba(232, 93, 50, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(43, 20, 14, 0.12);
}
.page-home .hpc__arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(232, 93, 50, 0.24);
}
.page-home .hpc__arrow svg {
  width: clamp(22px, 2.2vw, 26px);
  height: clamp(22px, 2.2vw, 26px);
  display: block;
  stroke-width: 2;
}
.page-home .hpc__arrow--prev {
  left: max(clamp(0.8rem, 2vw, 1.6rem), calc(50% - var(--container) / 2 + 1rem));
  right: auto;
}
.page-home .hpc__arrow--next {
  right: max(clamp(0.8rem, 2vw, 1.6rem), calc(50% - var(--container) / 2 + 1rem));
  left: auto;
}
.page-home .hpc__pagination {
  position: absolute;
  bottom: clamp(1.6rem, 4vw, 2.8rem);
  right: max(clamp(1rem, 3vw, 2rem), calc(50% - var(--container) / 2 + 1rem));
  z-index: 4;
  display: flex;
  gap: clamp(6px, 1vw, 12px);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.page-home .hpc__pagination button {
  width: clamp(36px, 3vw, 42px);
  height: clamp(36px, 3vw, 42px);
  min-width: 2.6em;
  min-height: 2.6em;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm);
  background: rgba(43, 20, 14, 0.62);
  color: rgba(255, 255, 255, 0.95);
  font-weight: 700;
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
  box-shadow: 0 1px 4px rgba(43, 20, 14, 0.18);
}
.page-home .hpc__pagination button:hover {
  background: rgba(43, 20, 14, 0.85);
  border-color: rgba(255, 255, 255, 0.8);
  color: #fff;
  box-shadow: 0 2px 6px rgba(43, 20, 14, 0.24);
}
.page-home .hpc__pagination button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 4px 12px rgba(232, 93, 50, 0.3);
}
.page-home .promo__wrapper {
  position: relative;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
}
.page-home .promo {
  position: relative;
  padding-inline: clamp(2.8rem, 6vw, 4rem);
}
.page-home .promo__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: auto;
  width: clamp(44px, 5.2vw, 52px);
  height: clamp(44px, 5.2vw, 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 248, 0.92);
  color: var(--accent);
  border: 1.5px solid rgba(232, 93, 50, 0.18);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(43, 20, 14, 0.1);
}
.page-home .promo__arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(232, 93, 50, 0.22);
}
.page-home .promo__arrow svg {
  width: clamp(20px, 2vw, 24px);
  height: clamp(20px, 2vw, 24px);
  display: block;
}
.page-home .promo__arrow--prev {
  left: clamp(0.3rem, 0.8vw, 0.8rem);
  right: auto;
}
.page-home .promo__arrow--next {
  right: clamp(0.3rem, 0.8vw, 0.8rem);
  left: auto;
}
.page-home .search--float {
  margin-top: clamp(-2.6rem, -3.2vw, -1.6rem);
  margin-bottom: clamp(1.8rem, 3.2vw, 2.8rem);
  position: relative;
  z-index: 5;
}
.page-home .search {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 860px) {
  .page-home .hpc__arrow { display: none; }
  .page-home .promo__arrow { display: none; }
  .page-home .promo { padding-inline: clamp(1.2rem, 4vw, 2.2rem); }
  .page-home .hpc__pagination {
    bottom: clamp(1.2rem, 3vw, 2rem);
    right: clamp(1rem, 2.5vw, 1.6rem);
  }
}
@media (max-width: 600px) {
  .page-home .hpc__pagination button {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   [services.html] chip 標籤、深色區塊對比、pricing CTA
   ───────────────────────────────────────────────────────────────────────── */
.page-services .svc-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.6rem, 1.2vw, .9rem);
  margin-top: clamp(1.4rem, 2vw, 1.8rem);
}
.page-services .svc-card .tags span {
  font-size: clamp(.98rem, .35vw + .88rem, 1.08rem);
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  background: var(--accent-soft);
  padding: .5em .95em;
  border-radius: var(--radius-sm);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.page-services .section--dark .eyebrow {
  color: #f0dcc8;
  font-size: clamp(1.02rem, .4vw + .96rem, 1.14rem);
  font-weight: 600;
}
.page-services .section--dark .eyebrow::before {
  opacity: .7;
  margin-right: .4em;
}
.page-services .section--dark .section__head h2 {
  color: #fffaf5;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
}
.page-services .section--dark .step {
  background: rgba(255, 253, 248, .12);
  border-color: rgba(255, 253, 248, .15);
}
.page-services .section--dark .step::before {
  background: rgba(232, 93, 50, .25);
  color: #ffc99f;
  font-size: clamp(1.4rem, .8vw + 1.1rem, 1.55rem);
  min-width: 3em;
  text-align: center;
}
.page-services .section--dark .step h3 {
  color: #fffaf5;
  font-size: clamp(1.38rem, 1.4vw + 1.1rem, 1.6rem);
  margin-bottom: .7em;
}
.page-services .section--dark .step p {
  color: #f3ebe1;
  font-size: clamp(1.1rem, .5vw + 1.02rem, 1.24rem);
  line-height: 2.05;
}
.page-services .pricing-grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.page-services .pricing-grid .card h3 {
  font-size: clamp(1.3rem, 1.5vw + 1.08rem, 1.58rem);
  line-height: 1.4;
  margin-bottom: .75em;
}
.page-services .pricing-grid .card p {
  font-size: clamp(1.08rem, .45vw + .98rem, 1.2rem);
  line-height: 1.85;
  margin-bottom: 1.3em;
}
.page-services .pricing-grid .checklist li {
  font-size: clamp(1.04rem, .4vw + .97rem, 1.16rem);
  line-height: 1.8;
  margin-bottom: clamp(1.1rem, 1.5vw, 1.4rem);
}
.page-services .pricing-grid .card > .mt-3 {
  margin-top: auto;
}
.page-services .pricing-grid .btn--block {
  padding: .65em 1.3em;
  min-height: 48px;
  font-size: clamp(1.06rem, .45vw + .98rem, 1.18rem);
  font-weight: 600;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  letter-spacing: .02em;
}
.page-services .pricing-grid .card.is-featured {
  border: 2px solid var(--accent);
  position: relative;
  padding-top: clamp(2.6rem, 3.5vw, 3.4rem);
  transform: translateY(-6px);
}
.page-services .pricing-grid .card.is-featured:hover {
  transform: translateY(-8px);
}
.page-services .pricing-grid .plan-badge {
  position: absolute;
  top: -.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: clamp(.88rem, .35vw + .82rem, .98rem);
  font-weight: 700;
  padding: .45em 1.15em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(232, 93, 50, .3);
  display: inline-block;
  width: auto;
  text-align: center;
  z-index: 10;
  letter-spacing: .03em;
}

/* ─────────────────────────────────────────────────────────────────────────
   [works.html] 優惠卡片圖片統一比例 + 中性佔位底（杜絕白色破圖）
   ───────────────────────────────────────────────────────────────────────── */
.page-works .work img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background-color: var(--cream);
  background-image: linear-gradient(135deg, var(--cream) 0%, rgba(246, 239, 228, 0.85) 100%);
  display: block;
}

/* ═══════════════════════ req-multifix-2 結束 ═══════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   [req-469] works.html 優惠卡片系列美化：整體收斂、更精緻不臃腫
   只作用於 .page-works，不影響其他頁面（.work 僅此頁使用）。
   重點：① 卡片更小更密（降低 min-width，桌機可多排）
        ② 收緊內距與字級階層 ③ CTA / 日期 badge 更輕巧
        ④ 圖片改 16:10，降低卡片高度感
   ═══════════════════════════════════════════════════════════════════════ */

/* ① 網格：卡片更小、排數更多、間距更精緻 */
.page-works { --work-card-min: clamp(13rem, 24vw, 15.5rem); }
.page-works__grid,
.page-works__recommend-grid {
  gap: clamp(1rem, 1.8vw, 1.5rem);
}

/* ② 卡片外觀：略收圓角與陰影，hover 位移收斂，視覺更輕 */
.page-works .work {
  border-radius: clamp(12px, 1.4vw, 16px);
  box-shadow: 0 6px 18px rgba(47, 42, 36, 0.08);
}
.page-works .work:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(47, 42, 36, 0.14);
}

/* ③ 圖片改 16:10，卡片不再過高 */
.page-works .work img { aspect-ratio: 16 / 10; }

/* ④ 內距收緊 */
.page-works .work__body {
  padding: clamp(1.1rem, 1.8vw, 1.45rem) clamp(1.05rem, 1.8vw, 1.35rem);
}

/* ⑤ 文字階層整體縮小、收緊行高與間距 */
.page-works .work__cat {
  font-size: clamp(0.78rem, 0.2vw + 0.74rem, 0.86rem);
  letter-spacing: 0.09em;
  margin-bottom: 0.45rem;
}
.page-works .work__body h3 {
  font-size: clamp(1.04rem, 0.6vw + 0.94rem, 1.2rem);
  line-height: 1.4;
  margin: 0.3rem 0 0.5rem;
}
.page-works .deal-meta {
  font-size: clamp(0.82rem, 0.2vw + 0.78rem, 0.9rem);
  margin-bottom: 0.6rem;
  line-height: 1.45;
}
.page-works .work__body p {
  font-size: clamp(0.9rem, 0.25vw + 0.85rem, 0.98rem);
  line-height: 1.65;
  margin: 0 0 0.85rem;
}

/* ⑥ CTA「查看優惠」更輕巧（內距相對、與字成比例） */
.page-works .work__body .pill {
  font-size: clamp(0.86rem, 0.25vw + 0.82rem, 0.96rem);
  padding: 0.52em 1.15em;
  min-height: 2.5em;
  border-radius: 6px;
}

/* ⑦ 日期 badge 更小更貼角，不搶視覺 */
.page-works .badge--corner {
  top: clamp(0.65rem, 1.4vw, 0.9rem);
  right: clamp(0.65rem, 1.4vw, 0.9rem);
  font-size: clamp(0.72rem, 0.2vw + 0.68rem, 0.82rem);
  padding: 0.38em 0.78em;
}

/* ⑧ 手機維持每排 1–2 張、不過寬 */
@media (max-width: 480px) {
  .page-works__grid,
  .page-works__recommend-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: clamp(0.9rem, 2vw, 1.2rem);
  }
}
/* ═══════════════════════ req-469 結束 ═══════════════════════ */

/* ═══════════════════════ req: 全站登入功能 ═══════════════════════
   header「登入」連結 + 登入彈窗（auth.js 注入）。單一共用樣式，沿用
   :root 變數與相對單位(em/clamp)，置於檔尾為最終權威層。
   涵蓋：nav 登入/登出膠囊、登入問候、彈窗 backdrop/dialog/RWD、
   登入後 contact 優惠刊登頁自動解鎖（隱藏登入卡、顯示表單）。 */

/* —— header 登入 / 登出 / 問候 —— */
.nav__auth { display: inline-flex; align-items: center; gap: clamp(.5rem, 1vw, .9rem); }
.nav__login {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: .5em 1.15em; white-space: nowrap; min-height: 38px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s ease;
}
.nav__login:hover { background: var(--accent); color: #fdf8f1; border-color: var(--accent); transform: translateY(-2px); }
.nav__login:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav__logout { color: var(--ink-soft); border-color: var(--line); }
.nav__logout:hover { background: var(--ink-soft); color: #fdf8f1; border-color: var(--ink-soft); }
.nav__greet {
  font-weight: 600; font-size: 14px; color: var(--ink); max-width: 12ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* —— 登入彈窗 —— */
body.auth-modal-open { overflow: hidden; }
.auth-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem); }
.auth-modal[hidden] { display: none; }
.auth-modal__backdrop { position: absolute; inset: 0; background: rgba(43,20,14,.55); backdrop-filter: blur(4px); }
.auth-modal__dialog {
  position: relative; z-index: 1; width: 100%; max-width: 26rem;
  background: var(--card); border: var(--card-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(1.6rem, 4vw, 2.4rem);
  max-height: calc(100dvh - 2rem); overflow-y: auto;
  animation: authPop .22s ease;
}
@keyframes authPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.auth-modal__close {
  position: absolute; top: .6rem; right: .8rem; width: 40px; height: 40px;
  display: grid; place-items: center; font-size: 1.7rem; line-height: 1;
  background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: 50%;
  transition: background .18s ease, color .18s ease;
}
.auth-modal__close:hover { background: var(--accent-soft); color: var(--accent-dark); }
.auth-modal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-modal__head { text-align: center; margin-bottom: clamp(1.2rem, 3vw, 1.6rem); }
.auth-modal__lock {
  width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark);
}
.auth-modal__lock svg { width: 24px; height: 24px; }
.auth-modal__head h2 { margin: 0 0 .35em; font-size: clamp(1.3rem, 1.4vw + 1rem, 1.55rem); }
.auth-modal__head p { margin: 0; color: var(--muted); line-height: 1.7; font-size: clamp(.95rem, .3vw + .9rem, 1.02rem); }
.auth-form .field:last-of-type { margin-bottom: 1.3rem; }
.auth-form .field input.is-invalid { border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(232,93,50,.14); }
.auth-form .field-error { color: var(--accent-dark); font-size: 14px; line-height: 1.5; }
.auth-form__alt { margin: 1.1rem 0 0; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.7; }
.auth-form__alt a { color: var(--accent); font-weight: 600; }
.auth-form__alt a:hover { color: var(--accent-dark); text-decoration: underline; }

/* —— 登入後：contact 優惠刊登頁自動解鎖 —— */
.contact-page #offer-posting .offer-form-wrap { display: none; }
.contact-page.is-authed #offer-posting .offer-gate { display: none; }
.contact-page.is-authed #offer-posting .offer-form-wrap { display: block; }

/* —— 行動版：登入膠囊與漢堡選單內排版一致 —— */
@media (max-width: 1024px) {
  .nav__auth { margin: .6rem clamp(1.1rem, 4vw, 2rem); justify-content: flex-start; }
  .nav__login { padding: .65em 1.3em; min-height: 44px; }
}
/* ═══════════════════════ 登入功能 結束 ═══════════════════════ */

/* ═══════════════════════ req-495：header 操作列視覺統一 ═══════════════════════
   問題：找優惠(文字) / 登入(外框膠囊) / 刊登優惠(實心膠囊) 三者並排時，
   兩顆膠囊字級與高度不一致（CTA 1.08rem/44px、登入 14px/38px），看起來不統一。
   作法：把兩顆膠囊收斂成同一組「對稱膠囊」— 相同字級、內距、高度、圓角、字距；
   實心 CTA 陰影收斂、外框登入鈕沿用主色描邊，形成 outline + filled 的成對節奏。
   單一共用 header → 全站(index/about/services/works/contact)同步生效。
   置於檔尾為最終權威層；沿用 :root 變數與相對單位，RWD 不變。 */
.nav__cta .btn,
.nav__login {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  padding: .55em 1.3em;
  min-height: 40px;
  border-radius: var(--radius-sm);
}
/* 實心 CTA：陰影收斂，量體與外框登入鈕對稱、不過分搶眼 */
.nav__cta .btn--primary { box-shadow: 0 6px 16px rgba(232,93,50,.22); }
/* 找優惠 文字連結：與兩顆膠囊同字級、垂直置中對齊（沿用既有 14px） */
.nav__links > li > a:not(.btn):not(.nav__login) { display: inline-flex; align-items: center; }

@media (max-width: 1024px) {
  /* 行動選單內：兩顆膠囊同寬、同內距、同高，堆疊時整齊成組 */
  .nav__cta .btn,
  .nav__login {
    width: 100%; padding: .72em 1.3em; min-height: 46px;
  }
}
/* ═══════════════════════ req-495 結束 ═══════════════════════ */

/* ═══════════════════════ works 優惠卡：圖文高度收斂（更易閱讀） ═══════════════════════ */
/* 僅限 works.html（body.page-works）。把圖片與文字區的整體高度收一點，
   讓一排卡片更緊湊、不過長，同時保留舒適行高與留白。 */

/* 圖片高度收斂：4/3 → 16/10（同寬下高度約少 1/6） */
.page-works .page-works__grid .work img,
.page-works .page-works__recommend-grid .work img {
  aspect-ratio: 16 / 10;
}

/* 內容區上下留白收斂 */
.page-works .work__body {
  padding: clamp(1.3rem, 2.2vw, 1.8rem) clamp(1.5rem, 2.6vw, 2rem);
}

/* 分類標籤與標題間距收斂 */
.page-works .work__cat {
  margin-bottom: clamp(0.35rem, 0.6vw, 0.5rem);
}

.page-works .work__body h3 {
  margin: 0.25rem 0 0.5rem;
  line-height: 1.4;
}

/* meta 行高與下邊距收斂 */
.page-works .deal-meta {
  line-height: 1.6;
  margin: clamp(0.3rem, 0.5vw, 0.45rem) 0 clamp(0.6rem, 1vw, 0.8rem);
}

/* 內文行高收斂：1.9 → 1.7（仍利於閱讀），下邊距略縮 */
.page-works .work__body p {
  line-height: 1.7;
  margin: 0 0 clamp(0.7rem, 1vw, 0.9rem);
}

/* CTA 與內文之間的留白略縮 */
.page-works .work__body .mt-2 {
  padding-top: clamp(0.4rem, 0.6vw, 0.55rem);
}
/* ═══════════════════════ works 優惠卡 高度收斂 結束 ═══════════════════════ */

/* ═══════════════════════ Footer 尺寸收斂（全站共用，2026-06-16）═══════════════════════
   設計師回饋「太大了」：footer 字級 / 行高 / 留白整體偏大。
   此區塊置於檔尾覆蓋前面所有 footer 規則，全站一致縮小約 18–22%。 */

/* 整體上下留白收斂 */
.site-footer { padding: clamp(40px, 6vw, 60px) 0 28px; line-height: 1.85; font-size: clamp(0.9rem, .25vw + .84rem, .98rem); font-weight: 500; }

/* 三欄間距與下邊距收斂 */
.footer__grid { gap: clamp(1.8rem, 4vw, 3.2rem); margin-bottom: 2rem; }

/* 品牌簡介文字 */
.footer__brand p { font-size: clamp(0.9rem, .25vw + .84rem, .98rem); line-height: 1.8; max-width: 320px; margin-top: .6rem; }
.footer__brand .nav__logo { margin-bottom: .7rem; }

/* 欄位標題 */
.site-footer h4 { font-size: clamp(1.04rem, .35vw + .96rem, 1.16rem); margin-bottom: clamp(1rem, 1.6vw, 1.25rem); }

/* 清單項目：字級與項目間距收斂 */
.site-footer li { font-size: clamp(0.9rem, .25vw + .84rem, .98rem); line-height: 1.8; margin-bottom: clamp(.65rem, 1.1vw, .9rem); }

/* 底部版權列 + 社群 icon */
.footer__bottom { padding-top: 1.4rem; padding-bottom: clamp(.4rem, 2vw, 1rem); font-size: clamp(.82rem, .2vw + .78rem, .9rem); gap: .7rem 1rem; }
.footer__social { gap: clamp(.6rem, 1.5vw, .9rem); }
.footer__social a, .page-services .footer__social a { width: 38px; height: 38px; }
.footer__social a svg, .page-services .footer__social a svg { width: 16px; height: 16px; }

/* 頁面層級覆蓋：services / works 有較高權重的舊 footer 規則，逐條對齊縮小後尺寸，確保全站一致 */
.page-services .site-footer,
.page-works .site-footer { line-height: 1.85; padding: clamp(40px, 6vw, 60px) 0 28px; }
.page-services .footer__grid,
.page-works .footer__grid { gap: clamp(1.8rem, 4vw, 3.2rem); margin-bottom: 2rem; }
.page-services .footer__brand p,
.page-works .footer__brand p { font-size: clamp(0.9rem, .25vw + .84rem, .98rem); line-height: 1.8; }
.page-services .site-footer h4,
.page-works .site-footer h4 { font-size: clamp(1.04rem, .35vw + .96rem, 1.16rem); line-height: 1.4; margin-bottom: clamp(1rem, 1.6vw, 1.25rem); }
.page-services .site-footer li,
.page-services .site-footer ul li,
.page-works .site-footer li,
.page-works .site-footer p { font-size: clamp(0.9rem, .25vw + .84rem, .98rem); line-height: 1.8; margin-bottom: clamp(.65rem, 1.1vw, .9rem); }
.page-services .footer__social a,
.page-works .footer__social a { width: 38px; height: 38px; }
/* ═══════════════════════ Footer 尺寸收斂 結束 ═══════════════════════ */

/* ═══════════════════════ 熱門搜尋標籤列：對齊 + 膠囊美化 ═══════════════════════ */
/* 標籤獨立成 .hk-tags 群組，與 label 並排；多排換行時各排一律對齊群組左緣，
   不再出現孤立標籤貼齊 label 造成的錯位。膠囊改圓角 pill + 微浮起。 */
/* ═══════════════════════ works.html 篩選列與卡片網格精細控制（2026-06-16）═══════════════════════ */

/* 篩選列：桌機 grid-template-columns: repeat(6,1fr)，gap:20px
   第1-2列：分類/地區/排序 各佔1欄，搜尋 input 跨2欄，套用篩選按鈕 1欄（共6欄框架）
   手機：單欄。平板：2欄。input/select/.btn--primary 統一 48px 高度。 */
.page-works .filterbar {
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
}

.page-works .filterbar .field {
  grid-column: span 1;
  min-width: 0;
}

.page-works .filterbar .field:nth-child(4) { /* 搜尋 input 跨 2 欄 */
  grid-column: span 2;
}

.page-works .filterbar .field:nth-child(5) { /* 套用篩選按鈕區 */
  grid-column: span 1;
}

.page-works .filterbar select,
.page-works .filterbar input {
  height: 48px;
  padding: 0.55em 0.85em;
  font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.12rem);
  line-height: 1.6;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fffdf8;
  color: var(--text);
  font-family: var(--ff);
}

.page-works .filterbar .btn--primary {
  height: 48px;
  padding: 0.65em 1.2em;
  font-size: clamp(1.02rem, 0.35vw + 0.96rem, 1.12rem);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  width: 100%;
}

/* 手機版：單欄 */
@media (max-width: 768px) {
  .page-works .filterbar {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-works .filterbar .field {
    grid-column: span 1;
  }
  .page-works .filterbar .field:nth-child(4) {
    grid-column: span 1;
  }
  .page-works .filterbar .field:nth-child(5) {
    grid-column: span 1;
  }
}

/* ═══════════════════════ works 優惠卡網格與尺寸 ═══════════════════════ */

/* 主卡片網格：桌機 4 欄、間距 gap:32px(橫) 28px(縱) */
.page-works .page-works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
}

/* 卡片整體：flex column 佈局，min-height 520px */
.page-works .work {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

/* 卡片圖片：height 240px、object-fit:cover */
.page-works .page-works__grid .work img {
  height: 240px;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* 卡片右上角徽章：固定 top:12px right:12px、border-radius:999px、padding:6px 10px */
.page-works .work .badge--corner {
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: clamp(0.9rem, 0.35vw + 0.84rem, 1rem);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  z-index: 10;
}

/* 卡片內容區：padding 22px 22px 24px、flex column flex:1 */
.page-works .work__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
}

/* 分類標籤：font-size 13px */
.page-works .work__cat {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
}

/* 標題：font-size 20px、line-height 1.45、最多 2 行 */
.page-works .work__body h3 {
  font-size: 20px;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 描述文本：最多 3 行 */
.page-works .work__body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* 查看優惠：margin-top:auto、align-self:flex-start */
.page-works .work__body .mt-2 {
  margin-top: auto;
  align-self: flex-start;
}

/* 載入更多按鈕：margin-top 72px */
.page-works .load-more {
  margin-top: 72px;
  text-align: center;
}

/* ═══════════════════════ works 推薦區（section--soft）═══════════════════════ */

/* 推薦區背景：#EFE1CE、padding 88px 0 */
.page-works .section--soft {
  background: #EFE1CE;
  padding: 88px 0;
}

/* 推薦區卡片網格：預設 3 欄或自適應 */
.page-works .page-works__recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}

/* 推薦區卡片圖片：height 260px */
.page-works .page-works__recommend-grid .work img {
  height: 260px;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* 推薦區卡片整體結構與主區相同 */
.page-works .page-works__recommend-grid .work {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

/* ═══════════════════════ works 響應式調整（平板/手機）═══════════════════════ */

/* 平板版（max-width: 1024px）：卡片網格改為 2 欄或自適應 */
@media (max-width: 1024px) {
  .page-works .page-works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
  .page-works .page-works__recommend-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
}

/* 手機版（max-width: 640px）：單欄 */
@media (max-width: 640px) {
  .page-works .page-works__grid {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }
  .page-works .page-works__recommend-grid {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }
  .page-works .work {
    min-height: auto;
  }
  .page-works .page-works__grid .work img,
  .page-works .page-works__recommend-grid .work img {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .page-works .load-more {
    margin-top: 48px;
  }
}

/* ═══════════════════════ works 篩選列 section 與卡片網格調整 結束 ═══════════════════════ */

.page-home .hot-keywords {
  display: flex;
  flex-wrap: wrap;                /* 螢幕不夠寬時標籤群組可換到 label 下一行 */
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(.55rem, 1.4vw, .9rem);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
}
.page-home .hot-keywords .hk-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;               /* 與第一排膠囊同高 → label 與首排垂直對齊 */
  font-weight: 700;
  color: var(--muted);
  font-size: clamp(1rem, .4vw + .92rem, 1.12rem);
  white-space: nowrap;
}
.page-home .hot-keywords .hk-tags {
  flex: 1 1 auto;
  min-width: 0;                   /* 允許群組在窄螢幕收縮，避免撐破容器 */
  display: flex;
  flex-wrap: wrap;                /* 標籤自然換行，最後一顆不再被裁切 */
  align-items: center;
  gap: clamp(.5rem, 1vw, .75rem);
}
.page-home .hot-keywords a {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid rgba(43,20,14,.1);
  color: var(--text);
  padding: .5em 1.2em;
  border-radius: 999px;           /* 圓角膠囊 */
  font-size: clamp(.98rem, .4vw + .9rem, 1.06rem);
  font-weight: 500;
  line-height: 1.5;
  min-height: 40px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(43,20,14,.05);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease, box-shadow .2s ease;
}
.page-home .hot-keywords a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(232,93,50,.18);
}
@media (max-width: 480px) {
  .page-home .hot-keywords { justify-content: flex-start; gap: .6rem; }
  .page-home .hot-keywords .hk-tags { flex: 1 1 auto; justify-content: flex-start; }
}
/* ═══════════════════════ 熱門搜尋標籤列 結束 ═══════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   全站視覺美化層（v-beautify｜2026-06）— 置於檔尾為最終權威層
   原則：純為「精緻化」的細節增強，沿用既有設計系統與 :root 變數，
   只做 hover 微互動、層次陰影、文字易讀性等加分，不改版面 / 不改配色 /
   不寫死像素撐版。所有效果以相對單位 + 既有色票(accent/ink/trust)呈現，
   全站共用元件一致套用，維持文青暖色編輯風的一致調性。
   ════════════════════════════════════════════════════════════════════ */

/* —— 1. 輪播控制鈕：統一 hover 浮起 + 暖色陰影微互動 —— */
.hpc__arrow, .promo__arrow {
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              transform .2s ease, box-shadow .22s ease;
}
.hpc__arrow:hover, .promo__arrow:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(232,93,50,.28);
}
/* 分頁圓點 hover 輕微放大，回饋更明確 */
.hpc__pagination button, .promo__dots button { transition: transform .18s ease, opacity .18s ease, background .2s ease; }
.hpc__pagination button:hover, .promo__dots button:hover { transform: scale(1.2); }

/* —— 2. 熱門關鍵字膠囊：與全站互動一致的微浮起 —— */
.hot-keywords a { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s ease, box-shadow .18s ease; }
.hot-keywords a:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,93,50,.16); }

/* —— 3. 靜態膠囊 / 標籤：加一層柔和陰影，從「平貼標籤」變「嵌入式元件」 —— */
.pill--static { box-shadow: 0 2px 8px rgba(43,20,14,.07); transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
/* 聯絡頁側欄分類膠囊：補上可讀性 hover 回饋（維持資訊性語氣） */
.type-chips .pill--static:hover { background: var(--accent-soft); color: var(--accent-dark); box-shadow: 0 4px 12px rgba(232,93,50,.14); }
/* 商家刊登內容標籤：與 .pill 一致的浮起感 */
.list-what .tags span { transition: background .2s ease, color .2s ease, transform .14s ease, box-shadow .16s ease; }
.list-what .tags span:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(232,93,50,.18); }

/* —— 4. Hero 文字易讀性：雙層柔和文字陰影，提升於圖面上的層次與對比 —— */
.hpc__title, .hpc__sub,
.page-hero h1, .page-hero p {
  text-shadow: 0 2px 8px rgba(0,0,0,.34), 0 4px 18px rgba(0,0,0,.22);
}

/* —— 5. 首頁搜尋浮卡：focus-within 時頂端顯出主色細條（用 inset 陰影，零位移） —— */
.search--float { transition: box-shadow .28s ease; }
.search--float:focus-within { box-shadow: var(--shadow-lg), inset 0 3px 0 0 var(--accent); }

/* —— 6. 卡片 icon 圓底：hover 時溫潤放大 + 暖色光暈（about/services 共用 card__ico） —— */
.card__ico { transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.card:hover .card__ico, .svc-card:hover .card__ico {
  transform: translateY(-2px) scale(1.05); color: var(--accent-dark);
  box-shadow: 0 8px 20px rgba(232,93,50,.2);
}

/* —— 7. 分類磚 icon：加內緣亮邊提升立體手感（不改版面） —— */
.cat-tile .cat-ico {
  box-shadow: 0 6px 16px rgba(232,93,50,.16),
              inset 0 0 0 1px rgba(232,93,50,.10),
              inset 0 2px 4px rgba(255,255,255,.35);
}

/* —— 8. 編輯精選輪播大卡：補上與卡片一致的頂端強調條（hover 顯色） —— */
.promo__slide { position: relative; }
.promo__slide::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--accent), var(--trust));
  opacity: 0; transform: scaleX(.4); transform-origin: left;
  transition: opacity .25s ease, transform .25s ease;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.promo__slide:hover::before { opacity: .9; transform: scaleX(1); }

/* —— 9. 優惠卡角標：毛玻璃化，於各種圖面上維持清晰與柔和（works/promo 共用） —— */
.work .badge--corner, .promo__media .badge--corner {
  background: rgba(232,93,50,.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* —— 10. 篩選列下拉：hover 預示主色邊框，互動更直覺 —— */
.filterbar .field select, .filterbar .field input { transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.filterbar .field select:hover, .filterbar .field input:hover { border-color: var(--accent); }

/* —— 11. 深色區塊步驟編號：加暖色陰影提升於深底上的立體與辨識度 —— */
.section--dark .step::before { box-shadow: 0 4px 12px rgba(231,183,159,.22); }

/* —— 12. 方案卡徽章（精選方案）：內緣高光 + 細邊，呈現精緻浮起質感 —— */
.plan-badge { border: 1px solid rgba(255,255,255,.3); box-shadow: 0 6px 16px rgba(232,93,50,.28), inset 0 1px 2px rgba(255,255,255,.4); }

/* —— 13. 聯絡頁流程步驟：卡片浮起 + 編號圓圈微放大 —— */
.flow-step { transition: transform .18s ease, box-shadow .2s ease; }
.flow-step:hover { box-shadow: 0 12px 32px rgba(43,20,14,.13); }
.flow-step__num { transition: transform .18s ease, box-shadow .18s ease; }
.flow-step:hover .flow-step__num { transform: scale(1.06); }

/* —— 14. 聯絡頁服務範圍 CTA 鈕：補上與主 CTA 一致的浮起深度 —— */
.map-cta-block .btn { transition: transform .18s ease, box-shadow .2s ease, background .22s ease; }
.map-cta-block .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(232,93,50,.26); }

/* —— 無障礙：尊重使用者「減少動態」偏好，關閉本層位移類動效 —— */
@media (prefers-reduced-motion: reduce) {
  .hpc__arrow:hover, .promo__arrow:hover,
  .hot-keywords a:hover, .list-what .tags span:hover,
  .hpc__pagination button:hover, .promo__dots button:hover,
  .card:hover .card__ico, .svc-card:hover .card__ico,
  .flow-step:hover .flow-step__num, .map-cta-block .btn:hover { transform: none; }
}
/* ═══════════════════════ 全站視覺美化層 結束 ═══════════════════════ */

/* ============================================================
   req-478：index.html（body.page-home）「一系列高度都縮小」。
   設計師回饋：首頁各區塊太高、閱讀時要捲很久不好讀。
   作法：以目前各層生效值為基準，把首頁的「垂直高度與留白」整體收緊
   —— Hero 輪播高度、區塊上下 padding、標題與內容間距、分類卡高度、
   編輯精選輪播圖高與卡片內距 —— 讓整頁更緊湊、好讀。
   全部以 .page-home 收斂（其餘 4 頁 about/services/works/contact 不受影響），
   橫向仍由 .container/clamp() 置中＋內距控制，RWD 行為不變、字級階層保留。
   置於檔尾，為最終權威層。
   ============================================================ */

/* ① Hero 全寬輪播：高度收約 1/6（400→330 上限），手機由 clamp 收到 240 起 */
.page-home .hpc__slide { height: clamp(240px, 28vw, 330px); }
.page-home .hpc__title { font-size: clamp(26px, 3.5vw, 40px); margin-bottom: .45rem; }
.page-home .hpc__sub { margin-bottom: clamp(.9rem, 1.2vw, 1.3rem); }
.page-home .hpc__cta { margin-top: clamp(1rem, 1.5vw, 1.6rem); }

/* ② 區塊垂直節奏：一般區塊上下 padding 80→56、tight 區塊 36→24、標題下緣 3.4→2.4rem */
.page-home .section { padding: clamp(32px, 5.5vw, 56px) 0; }
.page-home .section--tight { padding: clamp(14px, 2.6vw, 24px) 0; }
.page-home .section__head { margin-bottom: clamp(1.6rem, 3.2vw, 2.3rem); }
.page-home .search--float { margin-bottom: clamp(1.2rem, 2vw, 1.8rem); }
.page-home .section--soft .load-more { margin-top: clamp(1.8rem, 3.2vw, 2.6rem); }

/* ③ 分類卡：固定 118px → 收到 92–104px（仍保留 50px icon、字級階層、tap 區） */
.page-home .cat-tile { min-height: clamp(92px, 11vw, 104px); padding-block: clamp(.65rem, 1.2vw, .95rem); }
.page-home .cat-name { gap: .25rem; }

/* ④ 編輯精選輪播：圖高 240→200、卡片內距與標題/段落間距收緊，整卡更矮好讀 */
.page-home .promo__media img { min-height: clamp(150px, 30vw, 200px); }
.page-home .promo__body { padding: clamp(1.4rem, 2.8vw, 2.1rem) clamp(1.4rem, 3vw, 2.2rem); }
.page-home .promo__body h3 { margin: .4rem 0 .5rem; }
.page-home .promo__body p { margin: 0 0 .9rem; }

/* 手機：Hero 不再吃 768px 媒體層的固定 400px（上方 .page-home 規則特異度已勝出，
   此處僅再保險把手機 Hero 收得更扁，並讓單欄輪播圖高同步收短） */
@media (max-width: 768px) {
  .page-home .hpc__slide { height: clamp(220px, 52vw, 300px); }
  .page-home .promo__media img { min-height: clamp(150px, 40vw, 210px); }
}

/* ════════════════════════════════════════════════════════════════════
   req-480：index.html（body.page-home）「美化一下」— 首頁專屬精緻化層
   置於檔尾為最終權威層。原則：純加分（入場動畫、hover/focus 微互動、
   層次陰影、文字易讀性），不改版面結構、不改主配色、不寫死像素撐版。
   全部 .page-home scope（about/services/works/contact 不受影響），
   沿用 :root 色票與相對單位，所有位移/動畫於 reduced-motion 關閉。
   與既有 v-beautify 層互補，不重複既有效果。
   ════════════════════════════════════════════════════════════════════ */

/* —— A. Hero 輪播：作用中投影片 Ken Burns 緩慢推近（非作用中還原） —— */
.page-home .hpc__media img { transition: transform 8s ease-out; will-change: transform; }
.page-home .hpc__slide[aria-hidden="false"] .hpc__media img { transform: scale(1.06); }
.page-home .hpc__slide[aria-hidden="true"]  .hpc__media img { transform: scale(1); }

/* Hero 內容入場：標籤 → 標題 → 副標 依序淡入上移（stagger） */
@keyframes hpc-enter-tag   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hpc-enter-title { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hpc-enter-sub   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.page-home .hpc__slide[aria-hidden="false"] .hpc__tag   { animation: hpc-enter-tag   .52s ease-out .15s backwards; }
.page-home .hpc__slide[aria-hidden="false"] .hpc__title { animation: hpc-enter-title .58s ease-out .35s backwards; }
.page-home .hpc__slide[aria-hidden="false"] .hpc__sub   { animation: hpc-enter-sub   .54s ease-out .52s backwards; }

/* Hero 標籤立體感 + 作用中分頁柔光圈 */
.page-home .hpc__tag {
  transition: box-shadow .24s ease, transform .18s ease;
  box-shadow: 0 4px 12px rgba(232,93,50,.18), inset 0 1px 2px rgba(255,255,255,.35);
}
.page-home .hpc__slide[aria-hidden="false"] .hpc__tag {
  box-shadow: 0 6px 16px rgba(232,93,50,.24), inset 0 1px 3px rgba(255,255,255,.45);
}
.page-home .hpc__pagination button.is-active {
  transition: background .28s ease, box-shadow .3s ease;
  box-shadow: 0 0 0 4px rgba(232,93,50,.16);
}

/* —— B. 搜尋浮卡：欄位 focus 柔和聚焦光暈 + hover 主色邊框；搜尋鈕浮起 —— */
.page-home .search__form .field input,
.page-home .search__form .field select {
  transition: border-color .18s ease, box-shadow .2s ease, background .16s ease;
}
.page-home .search__form .field input:hover,
.page-home .search__form .field select:hover { border-color: var(--accent); }
.page-home .search__form .field input:focus,
.page-home .search__form .field select:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px rgba(232,93,50,.12);
}
.page-home .search__btn .btn { transition: transform .18s ease, box-shadow .2s ease, background .2s ease; }
.page-home .search__btn .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(232,93,50,.26); }

/* —— C. 分類磚：hover 背景微暖 + 雙層陰影；icon 陰影加厚；筆數 hover 深化 —— */
.page-home .cat-tile {
  transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.page-home .cat-tile:hover {
  background-color: rgba(255,224,210,.22);
  box-shadow: 0 16px 40px rgba(43,20,14,.12), inset 0 1px 0 rgba(232,93,50,.08);
}
.page-home .cat-tile .cat-ico { transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; }
.page-home .cat-tile:hover .cat-ico {
  box-shadow: 0 12px 28px rgba(196,107,74,.24), inset 0 0 0 1.5px rgba(196,107,74,.16);
}
.page-home .cat-name .role { letter-spacing: .02em; transition: color .2s ease; }
.page-home .cat-tile:hover .cat-name .role { color: var(--accent-dark); }

/* —— D. 編輯精選輪播 & 收尾：圖片 hover 放大、pill 漸層底線、eyebrow 字距、查看更多浮起 —— */
.page-home .promo__media { overflow: hidden; }
.page-home .promo__media img { transition: transform .32s cubic-bezier(.4,0,.2,1); }
.page-home .promo__slide:hover .promo__media img { transform: scale(1.04); }

.page-home .promo__body .pill {
  position: relative; border-radius: var(--radius-sm);
  transition: background .24s ease, box-shadow .24s ease, color .24s ease, transform .18s ease;
}
.page-home .promo__body .pill::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-dark), transparent);
  opacity: 0; transform: scaleX(0); transform-origin: left;
  transition: opacity .24s ease, transform .24s ease;
}
.page-home .promo__body .pill:hover::after { opacity: 1; transform: scaleX(1); }
.page-home .promo__body .pill:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,93,50,.28); }

.page-home .section__head .eyebrow { letter-spacing: .22em; color: var(--accent-dark); font-weight: 700; }

.page-home .load-more .btn--ghost {
  transition: transform .18s ease, box-shadow .2s ease, background .22s ease, border-color .22s ease, color .22s ease;
}
.page-home .load-more .btn--ghost:hover {
  background: var(--accent); color: #fdf8f1; border-color: var(--accent);
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,93,50,.24);
}

.page-home .deal-meta span:first-child { color: var(--accent-dark); font-weight: 600; }

/* —— 無障礙：尊重「減少動態」偏好，關閉本層所有位移 / 縮放 / 動畫 —— */
@media (prefers-reduced-motion: reduce) {
  .page-home .hpc__media img { transition: none; will-change: auto; }
  .page-home .hpc__slide[aria-hidden="false"] .hpc__media img { transform: scale(1); }
  .page-home .hpc__slide[aria-hidden="false"] .hpc__tag,
  .page-home .hpc__slide[aria-hidden="false"] .hpc__title,
  .page-home .hpc__slide[aria-hidden="false"] .hpc__sub { animation: none; }
  .page-home .hpc__pagination button.is-active { box-shadow: none; }
  .page-home .search__btn .btn:hover { transform: none; }
  .page-home .cat-tile { transition: none; }
  .page-home .promo__media img,
  .page-home .promo__slide:hover .promo__media img { transition: none; transform: none; }
  .page-home .promo__body .pill:hover { transform: none; }
  .page-home .load-more .btn--ghost:hover { transform: none; box-shadow: none; }
}
/* ═══════════════════════ req-480 首頁美化層 結束 ═══════════════════════ */

/* ============================================================
   editorial-promo-and-global：編輯精選輪播 & 頁腳精緻化
   .promo 卡片圖像 hover 放大、優惠標籤精緻互動、
   .eyebrow 小標字距精緻化、.load-more 鈕連動浮起、
   .deal-meta 位置/日期色彩階層提升。
   ============================================================ */

/* —— 1. 編輯精選輪播圖像：hover 時緩慢放大（overflow 容器不溢出） —— */
.page-home .promo__media { overflow: hidden; }
.page-home .promo__media img {
  transition: transform .32s cubic-bezier(.4, .0, .2, 1);
}
.page-home .promo__slide:hover .promo__media img {
  transform: scale(1.04);
}

/* —— 2. 優惠標籤（「查看優惠 →」）：hover 時箭頭微右移 + 底線浮起精緻化 —— */
.page-home .promo__body .pill {
  position: relative; transition: background .24s ease, box-shadow .24s ease, color .24s ease;
  border-radius: var(--radius-sm);
}
.page-home .promo__body .pill::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-dark), transparent);
  opacity: 0; transform: scaleX(0); transform-origin: left;
  transition: opacity .24s ease, transform .24s ease;
}
.page-home .promo__body .pill:hover::after {
  opacity: 1; transform: scaleX(1);
}
.page-home .promo__body .pill:hover {
  box-shadow: 0 6px 18px rgba(232,93,50,.28), inset 0 -1px 3px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* —— 3. eyebrow 小標（編輯精選）：字距優化 + 深咖色調提升視覺層次 —— */
.page-home .section__head .eyebrow {
  letter-spacing: .22em;
  color: var(--accent-dark);
  font-weight: 700;
  text-transform: uppercase;
}

/* —— 4. 頁面收尾「載入更多」鈕：hover 浮起 + 色系一致化 —— */
.page-home .load-more .btn--ghost {
  transition: transform .18s ease, box-shadow .2s ease, background .22s ease, border-color .22s ease, color .22s ease;
  border-color: var(--accent);
  color: var(--accent);
}
.page-home .load-more .btn--ghost:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,93,50,.24);
}

/* —— 5. 優惠卡 meta（地點/截止日期）：色彩階層細緻化，位置強調 —— */
.page-home .deal-meta {
  color: var(--ink-soft);
  font-size: clamp(1.02rem, .4vw + .96rem, 1.12rem);
}
.page-home .deal-meta span {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: var(--muted);
  transition: color .16s ease;
}
.page-home .deal-meta span:first-child {
  color: var(--accent-dark);
  font-weight: 600;
}
.page-home .deal-meta span svg,
.page-home .deal-meta span::before {
  color: var(--accent);
  opacity: .8;
}

/* —— 無障礙：尊重「減少動態」偏好，關閉 hover 位移與漸層動效 —— */
@media (prefers-reduced-motion: reduce) {
  .page-home .promo__media img { transition: none; }
  .page-home .promo__slide:hover .promo__media img { transform: none; }
  .page-home .promo__body .pill { transition: none; }
  .page-home .promo__body .pill::after { transition: none; }
  .page-home .promo__body .pill:hover { transform: none; }
  .page-home .load-more .btn--ghost { transition: none; }
  .page-home .load-more .btn--ghost:hover { transform: none; box-shadow: none; }
}

/* ============================================================
   首頁 Hero 輪播進階美化層（hero-carousel enhancement）
   精緻化方向：作用中投影片 Ken Burns 推近 / 內容淡入上移入場 / 細緻陰影與柔光
   全部 .page-home scope、相對單位、沿用設計系統、呼應 v-beautify 層級
   ============================================================ */

/* Ken Burns 效果：作用中投影片慢速推近，非作用中還原 */
.page-home .hpc__media img {
  transition: transform 8s ease-out;
  will-change: transform;
}
.page-home .hpc__slide[aria-hidden="false"] .hpc__media img {
  transform: scale(1.06);
}
.page-home .hpc__slide[aria-hidden="true"] .hpc__media img {
  transform: scale(1);
}

/* 入場動畫：標籤 → 標題 → 副標 依序淡入上移（stagger delay） */
@keyframes hpc-tag-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hpc-title-enter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hpc-sub-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-home .hpc__slide[aria-hidden="false"] .hpc__tag {
  animation: hpc-tag-enter .52s ease-out .15s backwards;
}
.page-home .hpc__slide[aria-hidden="false"] .hpc__title {
  animation: hpc-title-enter .58s ease-out .35s backwards;
}
.page-home .hpc__slide[aria-hidden="false"] .hpc__sub {
  animation: hpc-sub-enter .54s ease-out .52s backwards;
}

/* 標籤立體感：細緻柔和陰影 + 微光高光 */
.page-home .hpc__tag {
  transition: box-shadow .24s ease, transform .18s ease;
  box-shadow: 0 4px 12px rgba(232, 93, 50, .18),
              inset 0 1px 2px rgba(255, 255, 255, .35);
}
.page-home .hpc__slide[aria-hidden="false"] .hpc__tag {
  box-shadow: 0 6px 16px rgba(232, 93, 50, .24),
              inset 0 1px 3px rgba(255, 255, 255, .45);
}

/* 分頁按鈕作用中柔光效果 */
.page-home .hpc__pagination button.is-active {
  transition: background .28s ease, box-shadow .3s ease;
  box-shadow: 0 0 0 4px rgba(232, 93, 50, .16);
}

/* 降低動態敏感度：關閉 Ken Burns、入場、柔光 */
@media (prefers-reduced-motion: reduce) {
  .page-home .hpc__media img { transition: none; will-change: auto; }
  .page-home .hpc__slide[aria-hidden="false"] .hpc__media img { transform: scale(1); }
  .page-home .hpc__slide[aria-hidden="false"] .hpc__tag,
  .page-home .hpc__slide[aria-hidden="false"] .hpc__title,
  .page-home .hpc__slide[aria-hidden="false"] .hpc__sub {
    animation: none;
  }
  .page-home .hpc__pagination button.is-active { box-shadow: none; }
}

/* ============================================================
   Footer 高度收斂（req-487）：縮小頁尾上下留白 / 區塊間距，
   套用全站（含 page-works / page-services 之專屬覆寫）。
   ============================================================ */
.site-footer,
.page-works .site-footer,
.page-services .site-footer {
  padding: clamp(26px, 4vw, 40px) 0 clamp(14px, 2vw, 18px);
}
.footer__grid,
.page-works .footer__grid,
.page-services .footer__grid {
  margin-bottom: clamp(1.1rem, 2.4vw, 1.5rem);
}
.footer__bottom,
.page-works .footer__bottom {
  padding-top: clamp(.9rem, 2vw, 1.1rem);
  padding-bottom: clamp(.3rem, 1.5vw, .8rem);
}

/* ═══════════════════════ 熱門搜尋：置中放置 + 質感美化（req-496｜2026-06）═══════════════════════
   套用範圍：僅首頁 index.html（.page-home）搜尋區下方「熱門搜尋」列。
   需求：居中放置 + 美化。整列改為垂直置中堆疊 —— label 置中於上、
   膠囊群置中換行對齊；維持既有暖色設計系統、:root 變數與 RWD（相對單位 + clamp）。
   置於檔尾為最終權威層，覆蓋前述 flex-start 左對齊規則，不影響其他頁。 */
.page-home .hot-keywords {
  flex-direction: column;            /* label 一行、膠囊群一行，整體置中堆疊 */
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(.75rem, 1.8vw, 1.1rem);
  margin-top: clamp(1.5rem, 2.8vw, 2.2rem);
}
.page-home .hot-keywords .hk-label {
  position: relative;
  min-height: 0;                     /* 解除前版與膠囊同高的對齊約束 */
  display: inline-flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, .8rem);
  letter-spacing: .05em;
  color: var(--accent-dark);         /* 由灰階 muted 改用暖色強調，點出標題感 */
}
/* label 左右各一條漸層細線，形成置中的小標題裝飾 */
.page-home .hot-keywords .hk-label::before,
.page-home .hot-keywords .hk-label::after {
  content: "";
  width: clamp(1.4rem, 4.5vw, 2.8rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.page-home .hot-keywords .hk-tags {
  flex: 0 1 auto;                    /* 不再撐滿整列，讓膠囊群依內容寬度置中 */
  justify-content: center;
  gap: clamp(.5rem, 1.1vw, .8rem);
}
@media (max-width: 480px) {
  .page-home .hot-keywords { gap: .8rem; margin-top: 1.3rem; }
  .page-home .hot-keywords .hk-tags { justify-content: center; }
}
/* ═══════════════════════ 熱門搜尋 置中＋美化 結束 ═══════════════════════ */

/* ═══════════════════════ 按鈕樣式仿製（依設計師附件）═══════════════════════
   附件三顆按鈕：主 CTA 為實心磚橘填滿、白字；次要按鈕為白底 / 磚橘外框 / 深字。
   全站共用，套用到所有頁面，沿用既有 .btn / .btn--primary / .btn--ghost class。
   ─ 圓角加大為較圓潤的方框（~10px）
   ─ .btn--ghost（次要 / 外框鈕）文字由橘改為深色、外框加粗，更貼近附件 */
.btn {
  border-radius: 10px;                 /* 較圓潤的圓角，貼近附件樣式 */
}
.btn--primary {
  background: var(--accent);           /* 實心磚橘填滿 */
  color: #fff;
}
.btn--primary:hover {
  background: var(--accent-dark);
}
/* 次要按鈕：白底（透明，於淺頁等同白）＋磚橘外框 1.6px ＋深色字 */
.btn--ghost {
  background: transparent;
  color: var(--ink);                   /* 由橘字改深色字，貼近附件 */
  border: 1.6px solid var(--accent);
}
.btn--ghost:hover {
  background: var(--accent);           /* hover 填滿磚橘、轉白字 */
  color: #fff;
  border-color: var(--accent);
}
/* 深色區塊維持淺色外框 / 淺字（避免深底上深字看不見）*/
.section--dark .btn--ghost {
  color: #fbf6ee;
  border-color: rgba(251,246,238,.55);
}
.section--dark .btn--ghost:hover {
  background: #fbf6ee;
  color: var(--ink);
  border-color: #fbf6ee;
}
/* 導覽列「登入」外框鈕 — 與附件次要鈕一致：深字、磚橘外框、較圓潤圓角 */
.nav__login {
  color: var(--ink);
  border: 1.6px solid var(--accent);
  border-radius: 10px;
}
.nav__login:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* 已登入狀態的登出鈕維持中性外框（避免與主 CTA 搶色）*/
.nav__logout { color: var(--ink-soft); border-color: var(--line); }
.nav__logout:hover { background: var(--ink-soft); color: #fff; border-color: var(--ink-soft); }
/* ═══════════════════════ 按鈕樣式仿製 結束 ═══════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   YUBI 全站一致性收斂（2026/06 設計師建議）— 最終覆寫層（last-wins）
   範圍：全站。Token 收斂、Header/Nav 按鈕、Footer、Hero、卡片、Chip、CTA、字體。
   原則：沿用既有 class 與 :root 變數；尺寸用 control-height 固定 + clamp() 維持 RWD。
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. 主色收斂為 4 個權威 token（覆寫既有變數值，全站自動套用）── */
:root {
  --bg:          #F7EFE3;   /* 主要頁底（設計師收斂值） */
  --cream:       #F7EFE3;
  --beige:       #F7EFE3;
  --bg-soft:     #EFE1CE;   /* 交錯區塊 */
  --sand:        #EFE1CE;
  --ink:         #35120B;   /* 深咖：標題 / 深底（設計師收斂值） */
  --brown:       #35120B;
  --bg-dark:     #35120B;   /* 深色區塊 */
  --accent:      #F4512C;   /* 主橘：CTA / active（設計師收斂值） */
  --orange:      #F4512C;
  --accent-nav:  #F4512C;
  --accent-dark: #D94122;   /* 主橘 hover（設計師收斂值） */
  --accent-soft: #FFE1D7;   /* 橘色淺底（chip / icon 圓底） */
  --text:        #2B1712;   /* 內文主色（設計師收斂值） */
  --muted:       #7B6257;   /* 次要文字 */
  --container:   1120px;    /* 全站容器寬（設計師收斂值） */
}
body { line-height: 1.9; color: var(--text); }

/* ── 2. 字體階層統一（桌機錨點為設計師值，clamp 維持手機 RWD）── */
.page-hero h1,
.section__title,
h1 { font-size: clamp(2rem, 4.4vw, 48px); line-height: 1.25; letter-spacing: -.02em; }
h2, .section__head h2 { font-size: clamp(1.6rem, 3.2vw, 36px); line-height: 1.3; }
h3 { font-size: clamp(1.2rem, 2vw, 24px); line-height: 1.4; }

/* ── 3. Header / Nav 統一（高度 72px、乾淨底色、按鈕化導覽）── */
.site-header {
  background: #FFF8EF;
  border-bottom: 1px solid rgba(60,24,16,.08);
  box-shadow: 0 2px 10px rgba(60,24,16,.04);
}
.site-header .container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 24px); }
.site-header .nav { min-height: 72px; gap: clamp(1rem, 2vw, 1.5rem); }
.nav__logo-img { height: 32px; width: auto; display: block; }
.nav__logo-text { font-size: clamp(1.2rem, 2vw, 1.4rem); }

/* nav 按鈕群 */
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-actions li { display: flex; align-items: center; }
.header-btn {
  height: 44px; padding: 0 24px; border-radius: 10px; font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px); display: inline-flex; align-items: center;
  justify-content: center; white-space: nowrap; line-height: 1; letter-spacing: .01em;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}
.header-btn:hover { transform: translateY(-1px); }
.header-btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); box-shadow: 0 8px 18px rgba(241,90,53,.18); }
.header-btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.header-btn-outline { background: #FFFDF9; color: #2F1710; border: 1.5px solid var(--accent); }
.header-btn-outline:hover { background: #FFF0E9; color: #2F1710; }

/* 登入 / 登出 連結（auth.js 動態注入於 #navAuth 內，改用 CSS 設為外框按鈕，避免 class 被覆寫）*/
.nav-actions #navAuth { gap: 12px; }
.nav-actions #navAuth .nav__login,
.nav-actions #navAuth .nav__logout {
  height: 44px; padding: 0 24px; border-radius: 10px; font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px); display: inline-flex; align-items: center; justify-content: center;
  background: #FFFDF9; color: #2F1710; border: 1.5px solid var(--accent); white-space: nowrap; line-height: 1;
}
.nav-actions #navAuth .nav__login:hover,
.nav-actions #navAuth .nav__logout:hover { background: #FFF0E9; color: #2F1710; }
.nav-actions #navAuth .nav__greet { font-weight: 600; font-size: 14px; color: var(--ink); }

/* active 狀態：只變色，移除貼底長橘線 */
.nav-actions .header-btn.is-active { color: inherit; }
.nav-actions .header-btn-outline.is-active { background: #FFF0E9; color: var(--accent); }
.nav__links a.is-active::after,
.nav-actions .header-btn::after { display: none !important; content: none !important; }

/* 手機：漢堡選單內按鈕改為整列 */
@media (max-width: 1024px) {
  .nav-actions { gap: 8px; }
  .nav__links.nav-actions li { width: 100%; }
  .nav__links.nav-actions .header-btn,
  .nav-actions #navAuth .nav__login,
  .nav-actions #navAuth .nav__logout {
    width: 100%; margin: .35rem clamp(1.1rem,4vw,2rem); height: 46px;
  }
}

/* ── 4. 容器統一 ── */
.container { max-width: var(--container); }

/* ── 5. 內頁 Hero：統一深色漸層 + breadcrumb ── */
.page-hero { background: linear-gradient(110deg, #32150E 0%, #3F1B12 55%, #5A2818 100%); }
.breadcrumb { font-size: 14px; color: rgba(255,255,255,.72); letter-spacing: .03em; margin-bottom: 16px; }
.breadcrumb a { color: rgba(255,255,255,.72); }
.breadcrumb a:hover { color: #fff; }

/* ── 6. 標題底線裝飾統一 ── */
.section__head > h2::after,
.section__head > .section__title::after {
  content: ""; display: block; width: 40px; height: 2px; background: var(--accent); margin: 18px auto 0;
}
.section__head--left > h2::after,
.section__head:not(.text-center) > h2::after { margin-left: 0; margin-right: auto; }
.section--dark .section__head > h2::after { background: var(--accent); }

/* ── 7. 卡片樣式統一 ── */
.card, .work, .svc-card, .cat-tile {
  background: #FFFDF8;
  border: 1px solid rgba(60,24,16,.08);
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(60,24,16,.08);
}
.card > img, .work img, .split__media img, .promo__media img { border-radius: 12px; object-fit: cover; }
.work img { border-radius: 0; }            /* 卡片內滿版圖維持上緣切齊 */

/* ── 8. CTA 按鈕統一 ── */
.btn--primary { min-height: 48px; border-radius: 8px; padding: 0 28px; font-weight: 700; background: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { min-height: 48px; border-radius: 8px; padding: 0 28px; font-weight: 700; background: #FFFDF9; color: var(--ink); border: 1.5px solid var(--accent); }
.btn--ghost:hover { background: var(--accent); color: #fff; }
.section--dark .btn--ghost { color: #fbf6ee; border-color: rgba(251,246,238,.55); }  /* 深底維持淺字 */

/* ── 9. 小標籤 chip 統一（僅靜態標籤，不影響可點的「查看優惠」pill）── */
.pill--static, .pill.btn-sm,
.svc-card .tags span, .card .tags span {
  background: #FFE0D4; color: #E94F2C; border-radius: 6px;
  padding: 6px 10px; font-size: 13px; font-weight: 700; line-height: 1.5; min-height: 0;
}
.pill--static:hover, .pill.btn-sm:hover { background: #FFE0D4; color: #E94F2C; }

/* ── 10. Footer 統一（三欄 35/25/40、深底、social 靠右、與深色 section 分隔）── */
.site-footer { background: #2B100A; }
.section--dark + .site-footer { border-top: 1px solid rgba(255,255,255,.08); }
.footer__grid { grid-template-columns: 35fr 25fr 40fr; }
.footer__bottom .footer__social { margin-left: auto; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* ── 11. Section 垂直留白統一（桌機 96px、hero 72px）── */
/* 排除 tight 修飾子，避免覆寫既有「緊湊區塊」(首頁搜尋浮層 / works 篩選 / contact 地圖) */
.section:not(.section--tight):not(.section--tight-top) { padding: clamp(56px, 8vw, 96px) 0; }
.page-hero { padding: clamp(44px, 7vw, 72px) 0; }
/* YUBI 一致性收斂 結束 */

/* ════════════════════════════════════════════════════════════════════
   YUBI 各頁版面精修（2026/06 設計師建議）— 頁面 scope 覆寫，平行產生後彙整
   ════════════════════════════════════════════════════════════════════ */


/* ───────── home (.page-home) ───────── */
/* ============================================================
   home/index.html — 首頁設計覆寫 CSS
   前綴：.page-home（每條規則都在此 scope 下）
   ============================================================ */

/* 1) Hero 輪播 — 右下分頁按鈕尺寸與布局調整 */
.page-home .hpc__pagination {
  bottom: 48px;
  right: clamp(20px, 5vw, 48px);
}

.page-home .hpc__pagination button {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  gap: 10px;
}

.page-home .hpc__pagination {
  gap: 10px;
}

/* 2) Hero 文字內容 — max-width 與 tag 樣式調整 */
.page-home .hpc__inner {
  max-width: 520px;
}

.page-home .hpc__tag {
  background: #FFE0D4;
  color: #E94F2C;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

/* 3) 搜尋框 — 浮動卡片樣式調整 */
.page-home .search--float {
  padding: 28px 32px;
  border-radius: 18px;
}

.page-home .hot-keywords {
  margin-top: clamp(2.5rem, 6vw, 72px);
}

/* 搜尋欄位標籤與輸入框調整 */
.page-home .search .field label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-home .search .field input,
.page-home .search .field select {
  height: 52px;
}

/* 搜尋按鈕 */
.page-home .search__btn .btn {
  height: 52px;
  width: 180px;
}

@media (max-width: 480px) {
  .page-home .search__btn .btn {
    width: 100%;
  }
}

/* 4) 熱門搜尋 keywords — chip 樣式與間距 */
.page-home .hot-keywords .hk-tags a {
  gap: 14px 16px;
  transition: transform 0.2s ease;
}

.page-home .hot-keywords .hk-tags a:hover {
  transform: translateY(-2px);
}

/* 5) 分類卡片 — 尺寸與 hover 效果 */
.page-home .cat-tile {
  min-height: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-home .cat-tile .cat-ico {
  margin-bottom: 20px;
}

.page-home .cat-tile .cat-name {
  gap: 12px;
}

.page-home .cat-tile:hover {
  border-color: rgba(241, 90, 53, 0.28);
  box-shadow: 0 18px 40px rgba(241, 90, 53, 0.12);
}

/* 6) 精選輪播 — 圖文比例與尺寸 */
.page-home .promo__slide {
  grid-template-columns: 52% 48%;
}

.page-home .promo__media img {
  height: clamp(280px, 40vw, 420px);
}

.page-home .promo__body {
  padding: clamp(32px, 6vw, 56px);
}

/* 精選輪播箭頭 — 半透明白底、橘色 icon */
.page-home .promo__arrow {
  background: rgba(255, 255, 255, 0.85);
  color: var(--accent);
  left: -28px;
}

.page-home .promo__arrow--next {
  right: -28px;
  left: auto;
}

.page-home .promo__arrow:hover {
  background: var(--accent);
  color: #fff;
}

@media (max-width: 760px) {
  .page-home .promo__slide {
    grid-template-columns: 1fr;
  }

  .page-home .promo__body {
    padding: clamp(24px, 5vw, 40px);
  }

  .page-home .promo__arrow {
    left: -16px;
  }

  .page-home .promo__arrow--next {
    right: -16px;
  }
}

/* 7) 查看更多優惠 — margin-top 調整 */
.page-home .load-more {
  margin-top: 64px;
}

/* ───────── about (.page-about) ───────── */
.page-about .split {
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 5vw, 4.5rem);
  align-items: center;
}

.page-about .img-caption {
  font-size: 18px;
  margin-top: 20px;
  text-align: center;
  color: var(--accent);
}

.page-about .split--top .checklist {
  margin-top: 28px;
}

.page-about .split--top .checklist li {
  gap: 16px;
  margin-bottom: 16px;
}

.page-about .grid--3 .card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.page-about .card__ico {
  background: #FFE0D4;
  color: var(--accent);
  margin-bottom: 32px;
}

.page-about .section--dark .goal-block {
  max-width: 640px;
}

.page-about .section--dark .goal-block .checklist li {
  padding: 10px 0;
}

@media (max-width: 800px) {
  .page-about .split {
    grid-template-columns: 1fr;
  }
}

/* ───────── services (.page-services) ───────── */
/* ========== Services Grid ========== */
.page-services .services-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.page-services .svc-card {
  padding: 36px;
  display: flex;
  flex-direction: column;
}

.page-services .svc-card .num {
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
}

.page-services .svc-card .card__ico {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.page-services .svc-card .tags {
  margin-top: auto;
}

/* ========== Case Grid ========== */
.page-services .case-grid .card {
  display: flex;
  flex-direction: column;
}

.page-services .case-grid .card > img {
  height: 180px;
  object-fit: cover;
}

.page-services .case-grid .card h3 {
  min-height: 64px;                 /* 固定標題區高度，維持卡片對齊 */
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* 最多 2 行，避免長標題硬截斷溢出 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-services .case-grid .card .pill-row {
  border-top: 1px solid rgba(60, 24, 16, 0.12);
  margin-top: auto;                 /* 分隔線+標籤列推向卡片底部，使同排卡片底緣對齊 */
  padding-top: 20px;
}

/* ========== Dark Section Steps ========== */
.page-services .section--dark .step {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.page-services .section--dark .step::before {
  width: 64px;
  height: 64px;
  background: rgba(241, 90, 53, 0.18);
  color: #FFD7C8;
}

/* ========== Pricing Grid ========== */
.page-services .pricing-grid .card {
  display: flex;
  flex-direction: column;
}

.page-services .pricing-grid .card.is-featured {
  transform: translateY(-12px);
  border: 2px solid var(--accent);
}

.page-services .pricing-grid .plan-badge {
  top: -18px;
}

.page-services .pricing-grid .card .btn--block {
  margin-top: auto;
}

.page-services .pricing-grid .checklist li {
  gap: 18px;
}

/* ========== RWD Responsive ========== */
@media (max-width: 1079px) {
  .page-services .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 560px) {
  .page-services .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ───────── works (.page-works) ───────── */
/* ═══════════════════════ works.html 篩選列與卡片網格精細控制（2026-06-16）═══════════════════════ */

/* 篩選列：桌機 grid-template-columns: repeat(3,1fr)，gap:20px（兩列：第一列三個下拉，第二列搜尋跨2欄+按鈕1欄）
   第1-2列：分類/地區/排序 各佔1欄，搜尋 input 跨2欄，套用篩選按鈕 1欄（共6欄框架）
   手機：單欄。平板：2欄。input/select/.btn--primary 統一 48px 高度。 */
.page-works .filterbar {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
}

.page-works .filterbar .field {
  grid-column: span 1;
  min-width: 0;
}

.page-works .filterbar .field:nth-child(4) { /* 搜尋 input 跨 2 欄 */
  grid-column: span 2;
}

.page-works .filterbar .field:nth-child(5) { /* 套用篩選按鈕區 */
  grid-column: span 1;
}

.page-works .filterbar select,
.page-works .filterbar input {
  height: 48px;
  padding: 0.55em 0.85em;
  font-size: clamp(1.02rem, 0.35vw + 0.95rem, 1.12rem);
  line-height: 1.6;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fffdf8;
  color: var(--text);
  font-family: var(--ff);
}

.page-works .filterbar .btn--primary {
  height: 48px;
  padding: 0.65em 1.2em;
  font-size: clamp(1.02rem, 0.35vw + 0.96rem, 1.12rem);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  width: 100%;
}

/* 手機版：單欄 */
@media (max-width: 768px) {
  .page-works .filterbar {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-works .filterbar .field {
    grid-column: span 1;
  }
  .page-works .filterbar .field:nth-child(4) {
    grid-column: span 1;
  }
  .page-works .filterbar .field:nth-child(5) {
    grid-column: span 1;
  }
}

/* ═══════════════════════ works 優惠卡網格與尺寸 ═══════════════════════ */

/* 主卡片網格：桌機 4 欄、間距 gap:32px(橫) 28px(縱) */
.page-works .page-works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
}

/* 卡片整體：flex column 佈局，min-height 520px */
.page-works .work {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

/* 卡片圖片：height 240px、object-fit:cover */
.page-works .page-works__grid .work img {
  height: 240px;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* 卡片右上角徽章：固定 top:12px right:12px、border-radius:999px、padding:6px 10px */
.page-works .work .badge--corner {
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: clamp(0.9rem, 0.35vw + 0.84rem, 1rem);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  z-index: 10;
}

/* 卡片內容區：padding 22px 22px 24px、flex column flex:1 */
.page-works .work__body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
}

/* 分類標籤：font-size 13px */
.page-works .work__cat {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
}

/* 標題：font-size 20px、line-height 1.45、最多 2 行 */
.page-works .work__body h3 {
  font-size: 20px;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 描述文本：最多 3 行 */
.page-works .work__body p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* 查看優惠：margin-top:auto、align-self:flex-start */
.page-works .work__body .mt-2 {
  margin-top: auto;
  align-self: flex-start;
}

/* 載入更多按鈕：margin-top 72px */
.page-works .load-more {
  margin-top: 72px;
  text-align: center;
}

/* ═══════════════════════ works 推薦區（section--soft）═══════════════════════ */

/* 推薦區背景：#EFE1CE、padding 88px 0 */
.page-works .section--soft {
  background: #EFE1CE;
  padding: 88px 0;
}

/* 推薦區卡片網格：預設 3 欄或自適應 */
.page-works .page-works__recommend-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}

/* 推薦區卡片圖片：height 260px */
.page-works .page-works__recommend-grid .work img {
  height: 260px;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* 推薦區卡片整體結構與主區相同 */
.page-works .page-works__recommend-grid .work {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

/* ═══════════════════════ works 響應式調整（平板/手機）═══════════════════════ */

/* 平板版（max-width: 1024px）：卡片網格改為 2 欄或自適應 */
@media (max-width: 1024px) {
  .page-works .page-works__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
  .page-works .page-works__recommend-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
  }
}

/* 手機版（max-width: 640px）：單欄 */
@media (max-width: 640px) {
  .page-works .page-works__grid {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }
  .page-works .page-works__recommend-grid {
    grid-template-columns: 1fr;
    gap: 20px 0;
  }
  .page-works .work {
    min-height: auto;
  }
  .page-works .page-works__grid .work img,
  .page-works .page-works__recommend-grid .work img {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .page-works .load-more {
    margin-top: 48px;
  }
}
/* ═══════════════════════ works 篩選列 section 與卡片網格調整 結束 ═══════════════════════ */

/* ───────── contact (.contact-page) ───────── */
/* contact.html — .contact-page 覆寫 CSS */

/* Hero section — flow-steps */
.contact-page .flow-steps { list-style: none; margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.8vw, 1.2rem); align-items: stretch; }
.contact-page .flow-step { height: 52px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0 clamp(1rem, 2vw, 1.4rem); border-radius: 6px; font-size: clamp(0.9rem, 0.5vw + 0.82rem, 1rem); font-weight: 500; color: #fbf6ee; transition: all 0.2s ease; }
.contact-page .flow-step:hover { background: rgba(255, 255, 255, 0.12); }
.contact-page .flow-step__num { width: 28px; height: 28px; min-width: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fbf6ee; font-weight: 700; font-size: 0.9em; }
.contact-page .flow-step.is-current { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(232, 93, 50, 0.3); }
.contact-page .flow-step.is-current .flow-step__num { background: #fff; color: var(--accent); }
.contact-page .flow-step.is-done { background: rgba(255, 253, 248, 0.16); border-color: rgba(255, 253, 248, 0.34); color: #faf6ee; }
.contact-page .flow-step.is-done .flow-step__num { background: var(--accent-soft); color: var(--accent-dark); }

/* 商家可以刊登什麼 — .list-what .svc-card */
.contact-page .list-what .card { display: flex; flex-direction: column; height: 100%; }
.contact-page .list-what .svc-card { min-height: 280px; display: flex; flex-direction: column; }
.contact-page .list-what .svc-card .tags { margin-top: auto; }

/* Tab 切換 */
.contact-page .tabs .tab { position: relative; padding-bottom: 14px; color: var(--ink); font-weight: 600; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.contact-page .tabs .tab:hover { color: var(--accent); }
.contact-page .tabs .tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* 聯絡資訊 — .contact-info .info-row */
.contact-page .contact-info .info-row { display: flex; flex-direction: column; margin-bottom: 22px; }
.contact-page .contact-info .info-row svg { width: 24px; height: 24px; color: var(--accent); margin-bottom: 8px; flex: 0 0 auto; }
.contact-page .contact-info .info-row h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.contact-page .contact-info .info-row p { margin: 0; }

/* 歡迎刊登的活動類型 — .type-chips */
.contact-page .type-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 1.2rem; }
.contact-page .type-chips .pill--static { height: 36px; display: flex; align-items: center; justify-content: center; }

/* 表單卡片 */
.contact-page .form-card { max-width: 620px; padding: clamp(2.4rem, 5vw, 40px); margin-inline: auto; border-radius: 10px; background: #faf6f0; }

/* 表單欄位 */
.contact-page .form__grid { gap: clamp(1.2rem, 2vw, 24px); }
.contact-page .form .field label { margin-bottom: 8px; }
.contact-page .form .field input, .contact-page .form .field select { height: 46px; border-color: #D9C7B8; }
.contact-page .form .field textarea { height: 160px; border-color: #D9C7B8; }
.contact-page .form .field input:focus, .contact-page .form .field select:focus, .contact-page .form .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 93, 50, 0.12); }
.contact-page .form .field .req { color: var(--accent); }

/* 注意框 */
.contact-page .notice--info { background: #FFE6DC; color: #C74324; border: 1px solid #FFC4B2; padding: 14px 16px; border-radius: 6px; }

/* 同意框 */
.contact-page .consent-box { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: #FAF2EA; border-radius: 6px; }

/* 送出按鈕 */
.contact-page .form .btn--block { width: 160px; min-height: 48px; margin-inline: auto; }

/* 地圖 CTA 區塊 */
.contact-page .map-cta-block { max-width: 620px; margin-inline: auto; margin-top: 72px; padding: clamp(2rem, 4vw, 2.8rem); background: #faf6f0; border-radius: 10px; }

@media (max-width: 640px) {
  .contact-page .form-card { padding: clamp(1.6rem, 4vw, 2.4rem); }
  .contact-page .form .btn--block { width: 100%; }
  .contact-page .map-cta-block { margin-top: clamp(2rem, 4vw, 3rem); }
}

/* req-506：精選輪播整體縮小，視覺更舒服 — 只影響首頁 .page-home .promo，不動其他頁 */
.page-home .promo__wrapper { max-width: 980px; }
.page-home .promo__media img { height: clamp(210px, 28vw, 320px); }
.page-home .promo__body { padding: clamp(20px, 4vw, 40px); }
.page-home .promo__body h3 { font-size: clamp(1.25rem, 1.1vw + 1rem, 1.6rem); line-height: 1.35; }
.page-home .promo__body p { font-size: clamp(1rem, .3vw + .96rem, 1.1rem); line-height: 1.75; margin-bottom: 1rem; }
@media (max-width: 760px) {
  .page-home .promo__media img { height: clamp(170px, 36vw, 230px); }
  .page-home .promo__body { padding: clamp(18px, 4vw, 30px); }
}

/* ===== 登入 / 申請會員 — 合併彈窗分頁（auth modal tabs） ===== */
.auth-modal__dialog--tabbed { max-width: 30rem; transition: max-width .28s ease; }
.auth-modal__dialog--tabbed.is-apply { max-width: 42rem; }

.auth-tabs {
  display: flex; gap: .35rem; background: var(--bg-soft);
  padding: .35rem; border-radius: var(--radius);
  margin-bottom: clamp(1.2rem, 3vw, 1.6rem);
}
.auth-tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font-family: var(--ff); font-weight: 700; line-height: 1.4;
  font-size: clamp(.98rem, .3vw + .92rem, 1.06rem);
  color: var(--muted); padding: .6em 1em; min-height: 44px;
  border-radius: var(--radius-sm);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.auth-tab:hover { color: var(--accent-dark); }
.auth-tab.is-active { background: var(--card); color: var(--accent-dark); box-shadow: var(--shadow); }
.auth-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.auth-tab-panel { animation: tabFade .25s ease; }
.auth-tab-panel[hidden] { display: none; }

/* 申請會員表單：桌機兩欄、手機單欄，full 跨欄 */
.auth-apply__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem; margin-bottom: 1.3rem;
}
.auth-apply__grid .field { margin-bottom: 0; }
.auth-apply__grid .field.full { grid-column: 1 / -1; }
@media (max-width: 560px) { .auth-apply__grid { grid-template-columns: 1fr; } }

.auth-form__note { margin: 1rem 0 0; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; }
.auth-apply-form .auth-form__alt { margin-top: .7rem; }

/* 送出後的成功狀態卡 */
.auth-apply-status { text-align: center; padding: 1.4rem .6rem .6rem; }
.auth-apply-status__check {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--trust-soft); color: var(--trust-dark);
}
.auth-apply-status__check svg { width: 28px; height: 28px; }
.auth-apply-status h3 { margin: 0 0 .5rem; color: var(--trust-dark); font-size: clamp(1.15rem, 1vw + .95rem, 1.35rem); }
.auth-apply-status p { margin: 0; color: var(--muted); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════════
   req-designer-consistency（2026-06-17）：設計師全站收斂層（權威，置檔尾最後生效）
   色票已於 :root 收斂（米白#F7EFE3 / 淺米#EFE1CE / 主橘#F4512C / 深咖#35120B
   / 文字#2B1712 / icon底#FFE1D7 / hover#D94122 / container 1120px）。
   以下統一：container 內距、hero 漸層、卡片、icon 圓底、小標籤、footer、
   表單欄位、按鈕 hover、header active 文字、字級階層、768px 單欄。
   全部沿用相對單位 + :root 變數，維持 RWD。
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Container 統一：max-width 1120（token）+ 左右 24px 內距，全站對齊 */
.container { padding-inline: clamp(1.25rem, 4vw, 1.5rem); }

/* 2) 全站子頁 hero 深色區塊統一漸層（120deg 深咖→棕） */
.page-hero { background: var(--hero-grad); }

/* 3) 首頁 Hero 輪播 overlay：改為設計師指定漸層，讓右側餐點可見 */
.hpc__veil {
  background: linear-gradient(90deg, rgba(53,18,11,.82) 0%, rgba(53,18,11,.42) 48%, rgba(53,18,11,.18) 100%);
}

/* 4) 卡片統一：白底 #FFFDF8、圓角 12px、陰影、細邊 */
.card {
  background: #FFFDF8; border: 1px solid rgba(53,18,11,.06); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(53,18,11,.08);
}

/* 5) icon 圓底統一 40px、底 #FFE1D7、icon #F4512C（含各頁 scope 覆寫） */
.card__ico,
.page-about .card__ico,
.page-services .svc-card .card__ico,
.list-what .svc-card .card__ico {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); box-shadow: none;
}
.card__ico svg,
.page-services .svc-card .card__ico svg,
.list-what .svc-card .card__ico svg { width: 20px; height: 20px; }

/* 6) 小標籤 pill 統一：高 28px、padding 0 12px、底 #FFE5DC、字 #F4512C、圓角 6px */
.pill--static, .pill.btn-sm,
.svc-card .tags span, .card .tags span, .list-what .tags span,
.contact-page .type-chips .pill--static {
  min-height: 28px; height: 28px; padding: 0 12px; background: #FFE5DC; color: var(--accent);
  border-radius: 6px; font-size: 13px; font-weight: 700; line-height: 28px;
  display: inline-flex; align-items: center; box-shadow: none;
}
.pill--static:hover, .pill.btn-sm:hover,
.svc-card .tags span:hover, .list-what .tags span:hover {
  background: #FFD9CB; color: var(--accent); transform: none; box-shadow: none;
}

/* 7) Footer 統一：三欄 1.4fr 1fr 1fr、上 64 下 28、social 40px gap 12px */
.footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
.site-footer { padding-block: clamp(40px, 6vw, 64px) 28px; }
.footer__social { gap: 12px; }
.footer__social a { width: 40px; height: 40px; }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* 8) 表單欄位統一：高 48px、border #D8C5B6、focus 橘框 + 柔光 */
.field input, .field select, .field textarea {
  min-height: 48px; border: 1px solid #D8C5B6;
}
.field textarea { min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,81,44,.14); outline: none;
}

/* 9) 按鈕 hover 統一：實心橘 → #D94122（token）、外框/ghost → 底 #FFF0EA */
.btn { transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--ghost:hover, .btn--outline:hover { background: #FFF0EA; }

/* 10) Header active：實心橘按鈕保持白字（修正 works.html 首鈕「看起來沒字」） */
.nav-actions .header-btn-primary.is-active {
  color: #fff; background: var(--accent); border-color: var(--accent);
}

/* 11) 字級階層統一：H1 ~40/1.35、H2 ~32/1.4（首頁行銷 .hpc__title 不受影響） */
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 40px); line-height: 1.35; }
.section__title, .section__head h2 { font-size: clamp(1.7rem, 3.4vw, 32px); line-height: 1.4; }

/* 12) 手機 768px 以下：卡片 grid 單欄（補強各頁共用 grid） */
@media (max-width: 768px) {
  .grid--3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════ req-designer-consistency 結束 ═══════════════════════ */

/* ═══════════ req-designer-pagescoped（2026-06-17）：各頁專屬版面（agent 產出，orchestrator 統一附加）═══════════ */

/* —— index / .page-home —— */
.page-home .cat-tile { min-height: 132px; }
.page-home .cat-ico { margin-bottom: 20px; }
.page-home .hot-keywords .hk-label::before { width: 40px; }
.page-home .search__form { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 1rem; align-items: end; }
@media (max-width: 768px) { .page-home .search__form { display: flex; flex-direction: column; } }
.page-home .load-more { margin-top: 64px; }
.page-home .home-promo-carousel .hpc__controls { position: absolute; top: 0; bottom: 0; height: 100%; }
.page-home .home-promo-carousel .hpc__pagination { position: absolute; top: auto; bottom: 32px; left: auto; right: clamp(1.5rem, 4vw, 64px); }

/* —— about / .page-about —— */
.page-about .split--top { grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) { .page-about .split--top { grid-template-columns: 1fr; } }
.page-about .img-caption { font-size: 14px; color: var(--accent); margin-top: 16px; text-align: center; }
.page-about .goal-block .checklist { max-width: 560px; margin-inline: auto; text-align: left; }
.page-about .section--dark { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

/* —— services / .page-services —— */
.page-services .services-grid .svc-card { min-height: 260px; }
.page-services .svc-card { position: relative; }
.page-services .svc-card .num { position: absolute; top: clamp(1rem, 2vw, 1.4rem); right: clamp(1rem, 2vw, 1.4rem); left: auto; font-size: 12px; color: var(--accent); opacity: 0.7; font-weight: 700; }
.page-services .case-grid img { aspect-ratio: 16/9; object-fit: cover; width: 100%; height: auto; }
.page-services .steps .step { background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); padding: 32px; }
.page-services .steps .step h3 { font-size: 20px; }
.page-services .steps .step p { font-size: 15px; line-height: 1.8; }
.page-services .pricing-grid .card { display: flex; flex-direction: column; min-height: 520px; position: relative; }
.page-services .pricing-grid .card .mt-3 { margin-top: auto; }
.page-services .pricing-grid .card .plan-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); }
.page-services .section--soft:last-of-type { padding-bottom: 104px; }

/* —— works / .page-works —— */
/* 9 張卡片：採設計師 fallback 的 3 欄（3×3 填滿，避免 4 欄時最後一張落單留大空白）*/
.page-works .page-works__grid { grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
@media (max-width: 900px) { .page-works .page-works__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .page-works .page-works__grid { grid-template-columns: 1fr; } }
.page-works .work img { height: 220px; object-fit: cover; object-position: center; aspect-ratio: auto; }
.page-works .work__cat { color: var(--accent); font-weight: 700; }
.page-works .work__body { display: flex; flex-direction: column; }
.page-works .work__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.page-works .work__body .mt-2 { margin-top: auto; }
.page-works .badge--corner { top: 12px; right: 12px; }
.page-works .load-more { margin-top: 72px; }
.page-works .section--soft { padding-top: 96px; }
.page-works .section__head { margin-bottom: 48px; }
.page-works__recommend-grid .work img { height: 220px; object-fit: cover; object-position: center; }

/* —— contact / .contact-page —— */
.contact-page .split--contact { grid-template-columns: 360px 1fr; gap: clamp(2rem, 5vw, 72px); }
.contact-page .form-card { max-width: 560px; }
.contact-page .consent-box { min-height: 52px; }
.contact-page .consent-box input[type="checkbox"] { width: 18px; height: 18px; }
.contact-page .consent-box label { margin-left: 12px; }
.contact-page .line-guide { display: flex; gap: 16px; align-items: center; background: var(--accent-soft); border-radius: 12px; padding: 16px 20px; }
.contact-page .line-guide img { width: 128px; height: 128px; border-radius: 8px; background: #fff; padding: 6px; }
.contact-page .line-guide__title { font-weight: 700; margin: 0 0 4px; }
.contact-page .line-guide__sub { margin: 0; color: var(--ink-soft); font-size: 14px; }
@media (max-width: 768px) {
  .contact-page .split--contact { grid-template-columns: 1fr; gap: 2rem; }
  .contact-page .form-card { max-width: 100%; }
  .contact-page .line-guide { flex-direction: column; align-items: center; text-align: center; }
}

/* 首頁精選輪播箭頭：移入 container 內（不再離卡片過遠），手機隱藏改 swipe */
.page-home .promo__arrow { left: clamp(.3rem, .8vw, .8rem); right: auto; }
.page-home .promo__arrow--next { right: clamp(.3rem, .8vw, .8rem); left: auto; }
@media (max-width: 760px) {
  .page-home .promo__arrow { display: none; }
}

/* ═══════════════════════ req-designer-pagescoped 結束 ═══════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   req-529（2026-06-17）：登入 / 註冊彈窗 — 對照設計師附件樣式美化
   只作用於 .auth-modal 內（JS 注入、全站共用一份），不影響任何頁面版面；
   沿用 :root 變數＋相對單位＋clamp()，維持 RWD（置檔尾最後生效）。
   ═══════════════════════════════════════════════════════════════════════ */

/* 對話框：柔和圓角、稍寬留白 */
.auth-modal__dialog--tabbed { max-width: 31rem; border-radius: 16px; }
.auth-modal__dialog--tabbed.is-apply { max-width: 44rem; }

/* 標題區：鎖頭圓底（外加淡橘光暈）＋ 襯線寬字距標題，貼近附件 */
.auth-modal__lock {
  width: 58px; height: 58px; margin-bottom: 1rem;
  background: var(--accent-soft); color: var(--accent);
  box-shadow: 0 0 0 6px rgba(255, 225, 215, .45);
}
.auth-modal__head h2 {
  font-family: var(--ff-serif); font-weight: 700;
  letter-spacing: .2em; padding-left: .2em; /* 補回字距造成的視覺左偏 */
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 1.85rem); color: var(--ink);
}
.auth-modal__head p { font-size: clamp(.92rem, .3vw + .86rem, 1rem); }

/* 分頁切換：大顆膠囊式分段控制（米底軌道，作用頁白底橘字＋陰影） */
.auth-tabs {
  background: var(--sand); gap: .3rem; padding: .4rem;
  border-radius: 12px; margin-bottom: clamp(1.4rem, 3.5vw, 1.9rem);
}
.auth-tab {
  min-height: 50px; border-radius: 10px; color: var(--brown-2);
  letter-spacing: .04em; font-size: clamp(1rem, .35vw + .95rem, 1.12rem);
}
.auth-tab.is-active {
  background: #fff; color: var(--accent);
  box-shadow: 0 4px 12px rgba(43, 20, 14, .12);
}

/* 「申請資料不會公開」中分隔線 */
.auth-divider {
  display: flex; align-items: center; gap: .9rem; margin: .2rem 0;
  color: var(--muted); font-size: clamp(.86rem, .3vw + .8rem, .95rem);
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* 同意條款區：淡橘底（貼近附件） */
.auth-apply-form .consent-box {
  background: var(--accent-soft); border-radius: 10px; padding: .9rem 1.1rem;
}

/* 送出按鈕：加大內距、字距 */
.auth-apply-form .btn--block {
  margin-top: .4rem; padding: .9em 1.4em; letter-spacing: .06em;
}

/* 註冊後的官方 LINE 加入引導（附件下半部紅字 + QR） */
.auth-line-guide {
  margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px dashed var(--line);
  text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: .5rem;
}
.auth-line-guide__lead {
  margin: 0; color: var(--accent); font-weight: 700; line-height: 1.6;
  font-size: clamp(.95rem, .4vw + .88rem, 1.08rem);
}
.auth-line-guide img {
  width: clamp(108px, 30vw, 132px); height: auto; border-radius: 10px;
  padding: 8px; background: #fff; border: 1px solid var(--line);
}
.auth-line-guide__note {
  margin: 0; color: var(--accent-dark); font-weight: 600;
  font-size: clamp(.88rem, .35vw + .82rem, 1rem);
}

/* ============================================================
   req-530 — 商家會員申請表單改版（contact.html / merchantForm）
   商店名稱置頂全寬、地址縣市→鄉鎮市區連動下拉、視覺美化
   僅作用於 .contact-page，不影響其他頁面
   ============================================================ */
/* 地址三欄：縣市 / 鄉鎮市區 / 詳細地址 */
.contact-page .addr-group {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, .82fr) minmax(0, 1.55fr);
  gap: clamp(10px, 1.4vw, 14px);
}
.contact-page .addr-group select,
.contact-page .addr-group input { width: 100%; min-width: 0; }
.contact-page .addr-group select:disabled {
  background: #F4ECE2; color: #B7A69B; cursor: not-allowed; opacity: 1;
}
/* 未選的縣市 / 鄉鎮市區顯示灰字提示 */
.contact-page #city:has(option[value=""]:checked),
.contact-page #district:has(option[value=""]:checked) { color: #9A887E; }
/* 地址列三個錯誤訊息排成一行、不重疊 */
.contact-page .addr-errors { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.contact-page .addr-errors .field-error[hidden] { display: none; }
/* 商店名稱置頂：稍微強調為主要欄位 */
.contact-page #store {
  font-size: clamp(15px, .4vw + 14px, 17px);
  font-weight: 600;
}
@media (max-width: 560px) {
  .contact-page .addr-group { grid-template-columns: 1fr 1fr; }
  .contact-page .addr-group input { grid-column: 1 / -1; }
}

/* ============================================================
   req-534 — 送出會員申請後，彈出「加入官方 LINE」提醒視窗
   全站共用：auth.js 注入 #lineReminderModal（class .auth-modal），
   沿用既有彈窗的置中／背景／動畫，僅補內容樣式；
   contact 申請表單與全站登入彈窗的會員申請，送出後皆開啟此視窗。
   沿用 :root 變數＋相對單位＋clamp()，置於檔尾最後生效，RWD 不變。
   ============================================================ */
.line-reminder { max-width: 24rem; text-align: center; }
.line-reminder__check {
  width: 52px; height: 52px; margin: .2rem auto .9rem; border-radius: 50%;
  display: grid; place-items: center; background: #E3F6E8; color: #06A04A;
}
.line-reminder__check svg { width: 28px; height: 28px; }
.line-reminder h2 {
  margin: 0 0 .5rem; color: var(--ink);
  font-size: clamp(1.25rem, 1.4vw + 1rem, 1.5rem);
}
.line-reminder__lead {
  margin: 0 0 1rem; color: var(--accent); font-weight: 700; line-height: 1.7;
  font-size: clamp(.98rem, .4vw + .9rem, 1.1rem);
}
.line-reminder__qr {
  width: clamp(150px, 44vw, 180px); height: auto; margin: 0 auto;
  border-radius: 12px; padding: 10px; background: #fff; border: 1px solid var(--line);
}
.line-reminder__note {
  margin: 1rem 0 1.2rem; color: var(--accent-dark); font-weight: 600; line-height: 1.7;
  font-size: clamp(.9rem, .35vw + .84rem, 1.02rem);
}
.line-reminder .btn--line.btn--block { justify-content: center; }
.line-reminder__fine {
  margin: 1rem 0 0; color: var(--muted); line-height: 1.7;
  font-size: clamp(.82rem, .3vw + .78rem, .92rem);
}
.line-reminder .auth-form__alt { margin-top: .85rem; }


/* ████████████████████████████████████████████████████████████████████████
   req-multifix-3 (2026-06-17) — contact / index / services / works 四頁
   並行修復收口層：版面比例、表單欄寬、流程步驟對比、服務範圍卡片、
   hero 箭頭定位、卡片字級階層、深色區可讀性、方案 CTA、footer、
   全站按鈕/膠囊元件統一。
   置於檔尾為最終權威層；全部沿用 :root 變數＋相對單位（clamp/rem/em/%/vw/minmax），
   無固定 px 撐版面，RWD 維持。
   ████████████████████████████████████████████████████████████████████████ */

/* ===== 1) 全站共用元件統一（按鈕 / 膠囊 / 標籤）===== */

/* ════════════════════════════════════════════════════════════════════
   全站共用元件尺寸統一 — 2026/06 設計系統核心 (append-override)
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. HEADER CTA 按鈕統一 (.header-btn 群 + #navAuth 登入/登出)
   
   設計原則：
   - 同列高度一致 (min-height: 44px)
   - 字級階層一致 (相對單位)
   - 相對內距 (padding: 相對 em)
   - 文字垂直置中、圓角一致
   ────────────────────────────────────────────────────────────────── */

.header-btn {
  min-height: 44px;
  padding: 0 clamp(18px, 1.6vw, 26px);
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 17px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: .01em;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}

.header-btn:hover {
  transform: translateY(-1px);
}

.header-btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  box-shadow: 0 8px 18px rgba(244, 81, 44, .18);
}

.header-btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.header-btn-outline {
  background: #FFFDF9;
  color: #2F1710;
  border: 1.5px solid var(--accent);
}

.header-btn-outline:hover {
  background: #FFF0E9;
  color: #2F1710;
}

/* 登入 / 登出 連結（#navAuth 動態注入，與 header-btn 同步設定） */
.nav-actions #navAuth .nav__login,
.nav-actions #navAuth .nav__logout {
  min-height: 44px;
  padding: 0 clamp(18px, 1.6vw, 26px);
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: clamp(15px, 1.1vw, 17px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: .01em;
  background: #FFFDF9;
  color: #2F1710;
  border: 1.5px solid var(--accent);
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}

.nav-actions #navAuth .nav__login:hover,
.nav-actions #navAuth .nav__logout:hover {
  background: #FFF0E9;
  color: #2F1710;
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────
   2. 內容 CTA 按鈕統一 (.btn 系列)
   
   設計原則：
   - 統一相對 padding (em 單位)
   - 字級用 rem/clamp (絕不固定 px)
   - 同排 CTA 高度一致、文字置中
   - .btn--block width: 100%
   ────────────────────────────────────────────────────────────────── */

.btn {
  border-radius: 8px;
  min-height: 44px;
  padding: .6em clamp(1.2em, 1.6vw, 1.6em);
  font-size: clamp(1.06rem, .5vw + .94rem, 1.16rem);
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .18s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

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

.btn--primary {
  min-height: 48px;
  background: var(--accent);
  color: #fff;
  padding: .65em clamp(1.6em, 1.8vw, 2em);
  font-size: clamp(1.08rem, .5vw + .96rem, 1.18rem);
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(244, 81, 44, .22);
}

.btn--primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 12px 32px rgba(217, 65, 34, .28);
}

.btn--ghost {
  min-height: 48px;
  background: #FFFDF9;
  color: var(--ink);
  border: 1.5px solid var(--accent);
  padding: .65em clamp(1.6em, 1.8vw, 2em);
  font-weight: 700;
}

.btn--ghost:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn--lg {
  min-height: 48px;
  padding: .8em clamp(1.8em, 2vw, 2.4em);
  font-size: clamp(1.14rem, 1.2vw + .88rem, 1.32rem);
  font-weight: 700;
}

.btn--sm {
  min-height: 40px;
  padding: .45em 1.1em;
  font-size: clamp(.92rem, .3vw + .86rem, 1rem);
  font-weight: 600;
}

.btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* 深色背景下幽靈按鈕維持淺字 */
.section--dark .btn--ghost {
  color: #fbf6ee;
  border-color: rgba(251, 246, 238, .55);
}

.section--dark .btn--ghost:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ──────────────────────────────────────────────────────────────────
   3. 膠囊與標籤統一 (.pill / .pill--static / .tags > span)
   
   設計原則：
   - 相對內距 (padding: .4em 1em 級)
   - 字級相對 (rem/em/clamp, 絕不固定 px)
   - 一致 line-height 與圓角
   - flex-wrap + 一致 gap
   - 同排高度一致、文字不擁擠
   ────────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
  font-size: clamp(1.08rem, .4vw + 1.02rem, 1.24rem);
  line-height: 1.6;
  padding: .5em clamp(1.1em, 1.6vw, 1.6em);
  border-radius: var(--radius-lg);
  min-height: 44px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pill:hover {
  background: var(--accent);
  color: #fdf8f1;
  box-shadow: 0 4px 12px rgba(244, 81, 44, .24);
  transform: translateY(-1px);
}

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

.pill--static {
  cursor: default;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.pill--static:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  box-shadow: none;
  transform: none;
}

/* 卡片內標籤與靜態膠囊統一 */
.card .tags span,
.svc-card .tags span {
  display: inline-flex;
  align-items: center;
  padding: .45em 1em;
  font-size: clamp(1rem, .3vw + .94rem, 1.1rem);
  line-height: 1.5;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
  min-height: 38px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.card .tags span:hover,
.svc-card .tags span:hover {
  background: rgba(244, 81, 44, .12);
}

/* 膠囊列容器統一間距 */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.6rem, 1vw, 1rem);
  align-items: center;
  margin-top: 1.5rem;
}

/* ──────────────────────────────────────────────────────────────────
   4. 固定 px 轉換相對單位（防止 RWD 失衡）
   
   原則：所有尺寸 > 1vw 時改用相對單位，確保手機/平板/桌機均衡
   ────────────────────────────────────────────────────────────────── */

/* 移除舊的固定 px 定義（被上方相對單位覆寫） */
/* .header-btn 的固定 height:44px 已由 min-height:44px 替代 */
/* .btn 的固定 padding 已由相對單位替代 */
/* .pill 的固定 padding 已由相對單位替代 */


/* ===== 2) 全站 header active 實心橘按鈕白字對比 ===== */

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* 全站 header active 實心按鈕白字對比修正（.page-works 確認） */
/* 橘底實心按鈕 (.header-btn-primary.is-active) 必須維持白字，不受 .is-active 的 color:inherit 影響 */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.header-btn-primary.is-active,
.nav-actions .header-btn-primary.is-active {
  color: #fff !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ===== 3) contact.html（.contact-page）版面與表單 ===== */

/* ============================================================
   contact.html — 版面與間距優化 (append-override-at-end)
   ============================================================ */

/* 1. 雙欄版面自適應：調整欄寬比例、窄寬切單欄、左內容頂對齐 */
.contact-page .split--contact {
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.contact-page .contact-info {
  align-self: start;
}

.contact-page .contact-info__sticky {
  position: sticky;
  top: 100px;
}

@media (max-width: 900px) {
  .contact-page .split--contact {
    grid-template-columns: 1fr;
  }
}

/* 2. 表單同列兩欄完整寬度、一致 padding、min-height；窄寬單欄 */
.contact-page .form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2vw, 1.6rem);
}

.contact-page .form .field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.contact-page .form .field input,
.contact-page .form .field select,
.contact-page .form .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
}

.contact-page .form .field.full {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .contact-page .form__grid {
    grid-template-columns: 1fr;
  }
}

/* 3. Hero 流程步驟可讀性：改善文字對比、調背景透明度、等寬間距 */
.contact-page .flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 1.3rem);
  list-style: none;
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  padding: 0;
  align-items: stretch;
}

.contact-page .flow-step {
  flex: 1 1 140px;
  height: auto;
  min-height: 54px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.8em clamp(1rem, 2vw, 1.3em);
  border-radius: 6px;
  font-size: clamp(0.9rem, 0.5vw + 0.82rem, 1rem);
  font-weight: 600;
  color: #fafaf8;
  transition: all 0.2s ease;
}

.contact-page .flow-step:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}

.contact-page .flow-step__label {
  display: inline;
}

.contact-page .flow-step__num {
  width: 30px;
  height: 30px;
  min-width: 30px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fafaf8;
  font-weight: 700;
  font-size: 0.95em;
}

.contact-page .flow-step.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 26px rgba(232, 93, 50, 0.35);
}

.contact-page .flow-step.is-current .flow-step__num {
  background: #fff;
  color: var(--accent);
}

.contact-page .flow-step.is-done {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  color: #f5f1ec;
}

.contact-page .flow-step.is-done .flow-step__num {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

@media (max-width: 720px) {
  .contact-page .flow-step {
    flex: 1 1 100px;
    min-height: 48px;
    padding: 0.7em clamp(0.8rem, 1.5vw, 1rem);
    font-size: 0.875rem;
  }

  .contact-page .flow-step__num {
    width: 28px;
    height: 28px;
    font-size: 0.9em;
  }
}

/* 4. 服務範圍卡片：置中容器、合理上下間距、相對寬度 */
.contact-page .section--tight {
  padding: clamp(2rem, 4vw, 3.2rem) 0;
}

.contact-page .map-cta-block {
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.2rem);
  background: #faf6f0;
  border-radius: 10px;
  border: 1px solid #ede5d8;
}

.contact-page .map-cta-block h2 {
  margin-bottom: 0.6em;
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
}

.contact-page .map-cta-block p {
  margin: 0 0 1.5em 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.2rem);
}

.contact-page .map-cta-block .btn {
  margin-top: 1.2rem;
}

@media (max-width: 640px) {
  .contact-page .map-cta-block {
    padding: clamp(1.6rem, 4vw, 2.4rem);
  }

  .contact-page .map-cta-block .btn {
    width: 100%;
  }
}

/* 5. 全頁主要區塊於 .container 內、消除表單後過大空白 */
.contact-page .form-card {
  max-width: 100%;
  padding: clamp(2.4rem, 5vw, 3.2rem);
  margin-inline: 0;
  background: #faf6f0;
  border-radius: 10px;
}

.contact-page .form-card .form {
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: var(--shadow);
}

.contact-page .section--tight-top {
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
}

/* 調整 split 內 form-card 與 contact-info 相對寬度 */
@media (min-width: 901px) {
  .contact-page .split--contact {
    grid-template-columns: minmax(0, 360px) 1fr;
  }

  .contact-page .contact-info {
    max-width: 360px;
  }
}


/* ===== 4) services.html（.page-services）字級 / 深色區 / 方案 / footer ===== */

/* ====================== services.html (.page-services) — Typography & Component Polish ====================== */

/* 1. 服務卡片 (svc-card) 文字階層統一 */
.page-services .svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-services .svc-card .card__ico {
  width: clamp(48px, 6vw, 56px);
  height: clamp(48px, 6vw, 56px);
  margin-bottom: clamp(1rem, 2.2vw, 1.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-services .svc-card .card__ico svg {
  width: 100%;
  height: 100%;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.page-services .svc-card h3 {
  font-size: clamp(1.24rem, 1.3vw + 1.04rem, 1.46rem);
  line-height: 1.4;
  margin-bottom: 0.7em;
  font-weight: 700;
  color: var(--ink);
}

.page-services .svc-card p {
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.16rem);
  line-height: 1.75;
  color: var(--text);
  margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
  flex-grow: 1;
}

/* 2. 服務卡內膠囊標籤 (tags) 統一樣式 */
.page-services .svc-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1vw, 0.85rem);
  margin-top: auto;
  padding-top: clamp(0.8rem, 1.4vw, 1rem);
}

.page-services .svc-card .tags span {
  background: linear-gradient(135deg, #FFE1D7 0%, #FFEBD9 100%);
  color: var(--accent-dark);
  font-size: clamp(0.98rem, 0.35vw + 0.94rem, 1.08rem);
  font-weight: 600;
  line-height: 1.5;
  padding: 0.45em 0.85em;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  white-space: nowrap;
  transition: all 0.2s ease;
  border: 1px solid rgba(244, 81, 44, 0.15);
}

.page-services .svc-card .tags span:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 81, 44, 0.18);
  border-color: rgba(244, 81, 44, 0.25);
}

/* 3. 適合刊登的內容範例 (case-grid) — 膠囊標籤統一 */
.page-services .case-grid .card {
  display: flex;
  flex-direction: column;
}

.page-services .case-grid .card > img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
  margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
  border-radius: var(--radius);
}

.page-services .case-grid .card h3 {
  font-size: clamp(1.2rem, 1.2vw + 1.02rem, 1.4rem);
  line-height: 1.4;
  margin-bottom: 0.6em;
  font-weight: 700;
  color: var(--ink);
}

.page-services .case-grid .card p {
  font-size: clamp(1.02rem, 0.35vw + 0.96rem, 1.12rem);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: clamp(1rem, 1.6vw, 1.3rem);
  flex-grow: 1;
}

.page-services .case-grid .pill {
  background: var(--accent);
  color: #fdf8f1;
  font-size: clamp(0.98rem, 0.35vw + 0.94rem, 1.08rem);
  font-weight: 600;
  line-height: 1.5;
  padding: 0.5em 0.9em;
  min-height: 38px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.page-services .case-grid .pill:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(217, 65, 34, 0.25);
}

.page-services .case-grid .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1vw, 0.8rem);
  margin-top: auto;
}

/* 4. 深色區「刊登後會出現在哪裡？」(steps) 可讀性提升 */
.page-services .section--dark .step {
  background: rgba(255, 253, 248, 0.09);
  border: 1px solid rgba(231, 183, 159, 0.25);
  padding: clamp(2rem, 3.2vw, 2.6rem);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.page-services .section--dark .step::before {
  content: counter(step);
  counter-increment: step;
  display: grid;
  place-items: center;
  width: clamp(48px, 6.5vw, 56px);
  height: clamp(48px, 6.5vw, 56px);
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  background: rgba(231, 183, 159, 0.35);
  color: #f4d5c5;
  border-radius: 50%;
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.28rem);
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.page-services .section--dark .step:hover::before {
  background: rgba(231, 183, 159, 0.5);
  transform: scale(1.1);
}

.page-services .section--dark .step h3 {
  font-size: clamp(1.32rem, 1.3vw + 1.1rem, 1.52rem);
  line-height: 1.42;
  font-weight: 700;
  color: #fbf6ee;
  margin-bottom: 0.65em;
  margin-top: 0;
}

.page-services .section--dark .step p {
  font-size: clamp(1.1rem, 0.45vw + 1.02rem, 1.24rem);
  line-height: 1.8;
  color: rgba(255, 248, 238, 0.94);
  margin: 0;
  flex-grow: 1;
}

/* 5. 方案卡片 (pricing-grid) CTA 按鈕統一 */
.page-services .pricing-grid .card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.page-services .pricing-grid .card h3 {
  font-size: clamp(1.28rem, 1.3vw + 1.08rem, 1.5rem);
  line-height: 1.4;
  margin-bottom: 0.7em;
  font-weight: 700;
  color: var(--ink);
}

.page-services .pricing-grid .card p {
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.16rem);
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.2em;
}

.page-services .pricing-grid .checklist {
  flex-grow: 1;
  margin-bottom: clamp(1.4rem, 2vw, 1.8rem);
}

.page-services .pricing-grid .checklist li {
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.16rem);
  line-height: 1.8;
  color: var(--text);
  margin-bottom: clamp(0.9rem, 1.2vw, 1.2rem);
}

.page-services .pricing-grid .btn--primary {
  width: 100%;
  font-size: clamp(1.06rem, 0.4vw + 1.01rem, 1.18rem);
  font-weight: 700;
  padding: clamp(0.8em, 1.2vw, 1em) clamp(1.6em, 2.4vw, 2em);
  min-height: clamp(48px, 6vw, 52px);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background: var(--accent);
  color: #fdf8f1;
  border: 1px solid transparent;
}

.page-services .pricing-grid .btn--primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(217, 65, 34, 0.28);
}

/* 推薦方案特殊樣式 */
.page-services .pricing-grid .card.is-featured {
  border-color: var(--accent-soft);
  box-shadow: 0 16px 40px rgba(244, 81, 44, 0.12);
}

.page-services .pricing-grid .plan-badge {
  position: absolute;
  top: clamp(-0.75rem, -2vw, -0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fdf8f1;
  font-size: clamp(0.88rem, 0.3vw + 0.82rem, 0.98rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.5em 1.2em;
  border-radius: var(--radius);
  z-index: 2;
}

/* 6. 全站 Footer 通用改善 (非 scoped .page-services) */
.site-footer {
  background: var(--bg-dark);
  color: #faf6ee;
  padding: clamp(3.2rem, 7vw, 5.6rem) 0 clamp(2.4rem, 5vw, 3.8rem);
  font-size: clamp(1.1rem, 0.45vw + 1.02rem, 1.24rem);
  line-height: 2.1;
}

.site-footer h4 {
  font-size: clamp(1.4rem, 0.8vw + 1.22rem, 1.6rem);
  line-height: 1.4;
  color: #fdfaf4;
  margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 700;
}

.site-footer li {
  font-size: clamp(1.1rem, 0.45vw + 1.02rem, 1.24rem);
  line-height: 2.05;
  color: #faf6ee;
  margin-bottom: clamp(1.2rem, 1.8vw, 1.6rem);
}

.site-footer p {
  font-size: clamp(1.1rem, 0.45vw + 1.02rem, 1.24rem);
  line-height: 2.05;
  color: #faf6ee;
}

.site-footer a {
  color: #faf6ee;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--accent-soft);
}

/* Footer 社群 icon 按鈕：足夠點擊面積 */
.footer__social {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  align-items: center;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: clamp(44px, 5vw, 50px);
  height: clamp(44px, 5vw, 50px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff8ee;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.footer__social a svg {
  width: clamp(18px, 2.2vw, 22px);
  height: clamp(18px, 2.2vw, 22px);
  display: block;
}

.footer__social a:hover {
  background: var(--accent);
  color: #fdf8f1;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(196, 107, 74, 0.34);
}

.footer__social a:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

.site-footer .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.2rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.5fr;
  gap: clamp(2rem, 4.5vw, 4.2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.footer__brand p {
  font-size: clamp(1.08rem, 0.45vw + 1rem, 1.22rem);
  line-height: 2;
  color: #faf6ee;
  max-width: 340px;
}

.footer__bottom {
  border-top: 1px solid rgba(231, 183, 159, 0.2);
  padding-top: clamp(1.4rem, 2.5vw, 1.8rem);
  padding-bottom: clamp(0.6rem, 3vw, 1.6rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(1.06rem, 0.4vw + 1rem, 1.2rem);
}

@media (max-width: 720px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.8rem, 3.5vw, 2.8rem);
  }
  
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 3vw, 2.4rem);
  }
  
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .footer__social {
    justify-content: center;
  }
}


/* ===== 5) index.html（.page-home）hero 輪播箭頭與分頁（orchestrator 修正版）===== */

/* ============================================================
   req (2026-06-17) 首頁 Hero — 輪播箭頭錨定 banner 外緣、不侵入置中標題
   置於檔尾最後生效；沿用 :root 變數＋相對單位，RWD 不變。
   ============================================================ */
.page-home .home-promo-carousel { position: relative; }
.page-home .hpc__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: clamp(40px, 4vw, 48px); height: clamp(40px, 4vw, 48px);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.45);
  background: rgba(43,20,14,.5); color: #fff; cursor: pointer;
  transition: background .22s ease, border-color .22s ease, transform .18s ease;
}
.page-home .hpc__arrow:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.05); }
.page-home .hpc__arrow svg { width: 22px; height: 22px; display: block; }
/* 箭頭貼整幅 banner 左右外緣，遠離置中文字容器，不再壓到主標 */
.page-home .hpc__arrow--prev { left: clamp(8px, 1.6vw, 22px); right: auto; }
.page-home .hpc__arrow--next { right: clamp(8px, 1.6vw, 22px); left: auto; }
/* 文字內容置中容器，左右保留足夠內距，標題與箭頭之間留安全間距 */
.page-home .hpc__content { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.4rem, 7vw, 5.5rem); position: relative; }
.page-home .hpc__inner { max-width: min(48%, 560px); }
/* 分頁數字錨定容器右下，與下方搜尋卡保持距離 */
.page-home .hpc__pagination {
  position: absolute; left: auto;
  right: max(clamp(1rem, 3vw, 1.6rem), calc(50% - var(--container) / 2 + 1rem));
  bottom: clamp(1.8rem, 4.5vw, 3.2rem); z-index: 4; display: flex; gap: 8px;
}
.page-home .hpc__pagination button {
  width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-sm); background: rgba(43,20,14,.55);
  color: rgba(255,255,255,.92); font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .2s ease;
}
.page-home .hpc__pagination button:hover { background: rgba(43,20,14,.8); border-color: #fff; color: #fff; }
.page-home .hpc__pagination button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); }
/* 搜尋卡與 hero 間距，避免與分頁數字重疊 */
.page-home .search--float { margin-top: clamp(-2.4rem, -3vw, -1.4rem); position: relative; z-index: 5; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
@media (max-width: 760px) {
  .page-home .hpc__arrow { display: none; }
  .page-home .hpc__content { padding-inline: clamp(1.2rem, 5vw, 2rem); }
  .page-home .hpc__inner { max-width: 100%; }
  .page-home .hpc__pagination { right: clamp(1rem, 3vw, 1.4rem); bottom: clamp(1rem, 3.5vw, 1.6rem); }
}
@media (max-width: 560px) {
  .page-home .hpc__pagination button { width: 32px; height: 32px; font-size: .8rem; }
}


/* ============================================================
   req-multifix-3 修正補丁 (2026-06-17) — contact 表單欄位 width:100%
   不可套用到 checkbox/radio（會撐滿並擠壓 label 成直書）；
   restore consent-box / line-guide 水平排列。置檔尾最後生效。
   ============================================================ */
.contact-page .form .field input[type="checkbox"],
.contact-page .form .field input[type="radio"] {
  width: auto; min-height: 0; padding: 0; flex: 0 0 auto;
}
.contact-page .consent-box {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: clamp(.7rem, 1.2vw, 1rem);
}
.contact-page .consent-box input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 20px; margin-top: .15em; flex: 0 0 auto;
}
.contact-page .consent-box label { flex: 1 1 auto; min-width: 0; line-height: 1.75; margin-bottom: 0; }
.contact-page .line-guide { display: flex; flex-direction: row; gap: 16px; align-items: center; }
.contact-page .line-guide img { flex: 0 0 auto; }
.contact-page .line-guide > div { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
  .contact-page .line-guide { flex-direction: column; text-align: center; }
}

/* 修正補丁②：consent-box / line-guide 在窄寬(手機)會 shrink-wrap 成 1 字寬，
   強制填滿所屬 .field.full，確保 label 與說明文字水平排列。 */
.contact-page .field.full > .consent-box,
.contact-page .field.full > .line-guide { width: 100%; align-self: stretch; }
.contact-page .consent-box label { flex: 1 1 auto; min-width: 0; }

/* 修正補丁③：form-card 外層與內層 .form 雙重 padding 在手機把內容壓到 ~140px。
   外層 form-card 改為透明無內距容器，只保留內層 .form 作為卡片（底色/邊框/陰影/內距）。 */
.contact-page .form-card { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.contact-page .form-card .form { padding: clamp(1.4rem, 4vw, 2.6rem); }

/* ════════════════════════════════════════════════════════════════════════════
   req-multifix-4 (2026-06-17) — contact / index / services / works 四頁
   可讀性 / 對比 / 字級階層 / 按鈕一致性 / 輪播控制 RWD 收斂
   產出：4 個並行 Haiku sub-agent（各頁 sole writer，回傳 scoped CSS），orchestrator 統一附加。
   置於檔尾 = 最終權威層。全部沿用 :root 變數與相對單位（clamp/rem/em/%/vw/minmax），無固定 px 撐版。
   註：footer 可讀性已於 req-multifix-3 完成（字級 clamp(1.1–1.24rem)、行高 2.05、#faf6ee 高對比），本層不重複。
   ════════════════════════════════════════════════════════════════════════════ */

/* ───────── 全站共用：header CTA 一致化（解決 services/works 兩 agent 對 .header-btn 的衝突）─────────
   統一所有頁 header 按鈕：相對內距 + clamp 字級 + 最小可點觸區（min-height），不寫死像素尺寸。
   沿用既有 .header-btn-primary/-outline 配色與 :root 變數。 */
.site-header .nav { min-height: 68px; }
.nav__logo-img { height: clamp(1.9rem, 2.2vw, 2.3rem); width: auto; }
.nav__logo-text { font-size: clamp(1.2rem, 1.8vw, 1.42rem); }

.header-btn,
.nav-actions #navAuth .nav__login,
.nav-actions #navAuth .nav__logout {
  height: auto;
  min-height: 46px;
  padding: .6em 1.4em;
  font-size: clamp(.9rem, .85rem + .25vw, 1rem);
  border-radius: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.header-btn:hover { transform: translateY(-1px); }


/* ════════ contact.html（.contact-page）════════ */
/* ═══════════════════════════════════════════════════════════════════════
   contact.html 修復（site-29，2026-06-17）
   A. 首屏流程步驟按鈕對比度提高（未啟用狀態）
   B. 表單欄位說明文字字級與對比度提升
   C. 送出按鈕與 LINE 卡片字級提高
   D. 頁尾字級與行距微調
   全部 scope 在 .contact-page 之下，附加於檔尾最後生效
   ═══════════════════════════════════════════════════════════════════════ */

/* A. 流程步驟：未啟用狀態對比度提高 */
.contact-page .flow-step:not(.is-current):not(.is-done) {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.92);
}

.contact-page .flow-step:not(.is-current):not(.is-done) .flow-step__num {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  color: rgba(255, 255, 255, 0.95);
}

/* B. 表單欄位說明文字：字級與行高提升、對比度提高 */
.contact-page .field-hint {
  font-size: clamp(0.9rem, 0.4vw + 0.84rem, 1rem);
  color: var(--text);
  line-height: 1.75;
}

.contact-page .field input::placeholder,
.contact-page .field textarea::placeholder {
  color: #7A6857;
  font-weight: 400;
  opacity: 1;
}

/* C. 送出按鈕：字級與內距提高 */
.contact-page .form .btn--block {
  min-height: 54px;
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.08rem);
  font-weight: 700;
  padding: 1em 1.6em;
}

/* D. LINE 指南卡片：字級與行距提升 */
.contact-page .line-guide__title {
  font-weight: 700;
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.08rem);
  margin: 0 0 0.5em;
  line-height: 1.6;
}

.contact-page .line-guide__sub {
  margin: 0;
  color: var(--text);
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.03rem);
  line-height: 1.75;
  font-weight: 500;
}

/* E. 同意條款核取方塊說明：字級和行高微調 */
.contact-page .consent-box label {
  line-height: 1.75;
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.08rem);
  font-weight: 500;
}

/* F. 表單底部補充說明：字級與行高提升 */
.contact-page .form-note {
  font-size: clamp(0.95rem, 0.3vw + 0.9rem, 1.03rem);
  line-height: 1.8;
  color: var(--text);
}

/* ════════ index.html（.page-home）════════ */
/* ============================================================
   SITE-29 首頁修復：Hero 輪播、Promo 輪播、CTA 按鈕一致性
   ============================================================ */

/* ────────────────────────────────────────────────────────── 
   A. Hero 分頁點（.hpc__pagination）：高對比、更大、清晰狀態
   ─────────────────────────────────────────────────────────── */

.page-home .hpc__pagination button {
  width: clamp(36px, 4vw, 42px);
  height: clamp(36px, 4vw, 42px);
  min-width: clamp(36px, 4vw, 42px);
  min-height: clamp(36px, 4vw, 42px);
  border: 1.5px solid rgba(255,255,255,.72);
  background: rgba(43,20,14,.72);
  color: rgba(255,255,255,.95);
  font-weight: 700;
  font-size: clamp(.85rem, 1vw, 1rem);
  border-radius: var(--radius-sm);
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .2s ease;
  cursor: pointer;
}

.page-home .hpc__pagination button:hover {
  background: rgba(43,20,14,.92);
  border-color: #fff;
  color: #fff;
  transform: scale(1.12);
}

.page-home .hpc__pagination button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-home .hpc__pagination button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.16);
  box-shadow: 0 6px 16px rgba(244,81,44,.32);
}

/* ────────────────────────────────────────────────────────── 
   B. Hero 箭頭（.hpc__arrow）：置中容器內定位，防止邊界貼邊
   ─────────────────────────────────────────────────────────── */

.page-home .hpc__controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 10;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-home .hpc__arrow {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  z-index: 4;
  pointer-events: auto;
  flex-shrink: 0;
  margin: 0;
  width: clamp(44px, 5vw, 52px);
  height: clamp(44px, 5vw, 52px);
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: var(--radius-sm);
  background: rgba(43,20,14,.68);
  color: rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .18s ease;
}

.page-home .hpc__arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: scale(1.08);
}

.page-home .hpc__arrow:focus-visible {
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 2px;
}

.page-home .hpc__arrow svg {
  width: 24px;
  height: 24px;
  display: block;
}

.page-home .hpc__arrow--prev { }
.page-home .hpc__arrow--next { }

/* 分頁點：絕對定位於 controls 容器右下 */
.page-home .hpc__pagination {
  position: absolute;
  bottom: clamp(1.2rem, 3.5vw, 1.8rem);
  right: clamp(1.2rem, 3.5vw, 2rem);
  z-index: 4;
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.5rem, 1.2vw, .8rem);
  justify-content: flex-end;
  align-items: center;
}

/* 手機版：隱藏箭頭，分頁點居中下方 */
@media (max-width: 860px) {
  .page-home .hpc__controls {
    padding-inline: clamp(.8rem, 3vw, 1.6rem);
  }

  .page-home .hpc__arrow {
    display: none;
  }

  .page-home .hpc__pagination {
    justify-content: center;
    bottom: clamp(1rem, 2.5vw, 1.4rem);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ────────────────────────────────────────────────────────── 
   C. 精選輪播（.promo__wrapper / .promo）：容器置中 + 箭頭內側定位
   ─────────────────────────────────────────────────────────── */

.page-home .promo__wrapper {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
  position: relative;
}

.page-home .promo {
  position: relative;
  padding-inline: clamp(2.8rem, 6vw, 4rem);
  margin: 0 auto;
}

.page-home .promo__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: auto;
  width: clamp(42px, 5vw, 50px);
  height: clamp(42px, 5vw, 50px);
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255,253,248,.96);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(42,23,17,.24);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.page-home .promo__arrow:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.page-home .promo__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-home .promo__arrow svg {
  width: 50%;
  height: 50%;
  display: block;
}

.page-home .promo__arrow--prev {
  left: clamp(.3rem, 1.2vw, .8rem);
}

.page-home .promo__arrow--next {
  right: clamp(.3rem, 1.2vw, .8rem);
}

/* 分頁點：居中下方 */
.page-home .promo__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(.4rem, 1.2vw, .7rem);
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding: 0 clamp(1rem, 2vw, 1.5rem);
}

.page-home .promo__dot {
  width: clamp(10px, 1.8vw, 13px);
  height: clamp(10px, 1.8vw, 13px);
  border: none;
  border-radius: 50%;
  background: rgba(42,23,17,.24);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.page-home .promo__dot:hover {
  background: rgba(42,23,17,.5);
  transform: scale(1.15);
}

.page-home .promo__dot.is-active {
  background: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 3px 10px rgba(244,81,44,.32);
}

/* 手機版調整 */
@media (max-width: 560px) {
  .page-home .promo__wrapper {
    padding-inline: clamp(.8rem, 3vw, 1.2rem);
  }

  .page-home .promo {
    padding-inline: clamp(2rem, 5vw, 2.8rem);
  }
}

/* ────────────────────────────────────────────────────────── 
   D. CTA 按鈕一致性：統一相對單位、字級、內距、高度
   ─────────────────────────────────────────────────────────── */

/* 通用按鈕基礎 */
.page-home .btn {
  padding: .65em 1.45em;
  font-size: clamp(.95rem, .4vw + .88rem, 1.08rem);
  line-height: 1.5;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
}

.page-home .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-home .btn--primary {
  background: var(--accent);
  color: #fdf8f1;
  border: none;
  box-shadow: 0 8px 18px rgba(244,81,44,.2);
  padding: .68em 1.6em;
  min-height: 48px;
}

.page-home .btn--primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 10px 24px rgba(217,65,34,.28);
  transform: translateY(-2px);
}

.page-home .btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: .62em 1.4em;
  min-height: 44px;
}

.page-home .btn--ghost:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
}

.page-home .btn--lg {
  padding: .78em 1.9em;
  font-size: clamp(1.04rem, .5vw + .96rem, 1.18rem);
  min-height: 48px;
}

/* 搜尋按鈕 */
.page-home .search__btn .btn {
  width: 100%;
  min-height: 48px;
  padding: .75em 1.6em;
  font-size: clamp(1.06rem, .5vw + .98rem, 1.18rem);
  font-weight: 600;
}

/* 膠囊按鈕（查看優惠） */
.page-home .pill {
  display: inline-flex;
  align-items: center;
  padding: .65em 1.45em;
  font-size: clamp(1.04rem, .4vw + .98rem, 1.16rem);
  font-weight: 700;
  line-height: 1.5;
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .18s ease;
  white-space: nowrap;
}

.page-home .pill:hover {
  background: var(--accent);
  color: #fdf8f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244,81,44,.24);
}

.page-home .pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 精選卡的膠囊（橘底） */
.page-home .promo__body .pill {
  background: var(--accent);
  color: #fdf8f1;
  font-weight: 700;
  padding: .62em 1.4em;
  min-height: 46px;
  box-shadow: 0 4px 12px rgba(244,81,44,.22);
}

.page-home .promo__body .pill:hover {
  background: var(--accent-dark);
  color: #fdf8f1;
  box-shadow: 0 6px 16px rgba(217,65,34,.28);
}

/* 查看更多按鈕 */
.page-home .load-more .btn--ghost {
  padding: .85em 2.2em;
  font-size: clamp(1.12rem, .5vw + 1.04rem, 1.22rem);
  border-width: 2px;
  min-height: 50px;
  font-weight: 700;
}

.page-home .load-more .btn--ghost:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
}

/* ────────────────────────────────────────────────────────── 
   E. 響應式容器：所有主要區塊置中 + 相對內距
   ─────────────────────────────────────────────────────────── */

.page-home .hero-section {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
}

.page-home .section {
  padding-inline: 0;
}

.page-home .section .container {
  max-width: var(--container);
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
  margin-inline: auto;
}

/* 浮動搜尋卡位置穩定性 */
.page-home .search--float {
  margin-top: clamp(-2.6rem, -3vw, -1.6rem);
  position: relative;
  z-index: 5;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}

/* ────────────────────────────────────────────────────────── 
   F. 其他調整：高度、對比、過渡
   ─────────────────────────────────────────────────────────── */

/* 確保所有互動元素有最小點擊區域（44x44px） */
.page-home button,
.page-home a.btn,
.page-home a.pill {
  min-height: 44px;
  min-width: 44px;
}

/* 深色背景區文字對比 */
.page-home .hpc__content {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
  position: relative;
}

/* 手機版整體調整 */
@media (max-width: 860px) {
  .page-home .promo {
    padding-inline: clamp(2rem, 5vw, 2.8rem);
  }

  .page-home .btn {
    font-size: clamp(.92rem, 1.2vw + .85rem, 1.04rem);
  }

  .page-home .pill {
    font-size: clamp(1rem, 1.5vw + .92rem, 1.12rem);
  }
}

@media (max-width: 560px) {
  .page-home .btn {
    padding: .6em 1.2em;
    font-size: clamp(.88rem, 2vw + .82rem, 1rem);
    min-height: 42px;
  }

  .page-home .btn--primary {
    padding: .62em 1.4em;
    min-height: 44px;
  }

  .page-home .pill {
    padding: .6em 1.2em;
    font-size: clamp(.96rem, 2vw + .88rem, 1.08rem);
    min-height: 42px;
  }

  .page-home .load-more .btn--ghost {
    padding: .75em 1.8em;
    font-size: clamp(1rem, 1.5vw + .92rem, 1.12rem);
    min-height: 44px;
  }
}

/* ════════ services.html（.page-services）════════ */
.page-services .header-btn {
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);
  padding: 0.55em 1.1em;
  min-height: 44px;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-services .header-btn-primary,
.page-services .header-btn-outline {
  min-height: 44px;
  height: auto;
}

.page-services .svc-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  margin-top: clamp(1.4rem, 2vw, 1.8rem);
}

.page-services .svc-card .tags span {
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.16rem);
  padding: 0.45em 0.75em;
  font-weight: 700;
  background: var(--trust-soft);
  color: var(--trust-dark);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  white-space: nowrap;
  min-height: 40px;
  transition: all 0.2s ease;
}

.page-services .svc-card .tags span:hover {
  background: var(--trust);
  color: #fbf6ee;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 135, 105, 0.24);
}

.page-services .case-grid .pill {
  font-size: clamp(1.04rem, 0.4vw + 0.98rem, 1.16rem);
  padding: 0.45em 0.75em;
  font-weight: 700;
  background: var(--accent);
  color: #fdf8f1;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  min-height: 40px;
  box-shadow: 0 4px 12px rgba(196, 107, 74, 0.22);
  transition: all 0.2s ease;
}

.page-services .case-grid .pill:hover {
  background: var(--accent-dark);
  color: #fdf8f1;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(196, 107, 74, 0.32);
}

.page-services .case-grid .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 1.2vw, 1rem);
  margin-top: 1.4rem;
  align-items: center;
}

.page-services .card h3 {
  font-size: clamp(1.28rem, 1.4vw + 1.08rem, 1.52rem);
  line-height: 1.4;
  margin-bottom: 0.8em;
  color: var(--ink);
}

.page-services .card p {
  font-size: clamp(1.1rem, 0.5vw + 1.02rem, 1.24rem);
  line-height: 2.0;
  color: var(--text);
  margin-bottom: 1rem;
}

.page-services .svc-card > p {
  font-size: clamp(1.1rem, 0.5vw + 1.02rem, 1.24rem);
  line-height: 2.0;
  color: var(--text);
  margin-bottom: 1rem;
}

.page-services .section--dark .step {
  background: rgba(255, 253, 248, 0.15);
  border: 1px solid rgba(231, 183, 159, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  padding: clamp(2.2rem, 3.4vw, 2.8rem);
}

.page-services .section--dark .step h3 {
  color: #fdfaf4;
  font-size: clamp(1.34rem, 1.4vw + 1.12rem, 1.58rem);
  margin-bottom: 0.75em;
  font-weight: 700;
  line-height: 1.4;
}

.page-services .section--dark .step p {
  color: rgba(255, 248, 238, 0.95);
  font-size: clamp(1.12rem, 0.5vw + 1.04rem, 1.26rem);
  line-height: 2.1;
  margin: 0;
}

.page-services .section--dark .step::before {
  background: rgba(231, 183, 159, 0.45);
  color: #fae8dc;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  margin-bottom: 1.1rem;
  font-size: 1.15rem;
  flex: 0 0 auto;
}

.page-services .section--dark .step:hover::before {
  background: rgba(231, 183, 159, 0.6);
  color: #fbf6ee;
  transform: scale(1.1);
}

.page-services .pricing-grid .card {
  position: relative;
  padding: clamp(2.2rem, 3.4vw, 2.8rem);
}

.page-services .pricing-grid .card.is-featured {
  padding-top: clamp(3.4rem, 4.5vw, 4.2rem);
  border: 2px solid var(--accent);
  transform: translateY(-8px);
}

.page-services .pricing-grid .card.is-featured:hover {
  transform: translateY(-12px);
}

.page-services .pricing-grid .plan-badge {
  position: absolute;
  top: -1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: clamp(0.88rem, 0.35vw + 0.8rem, 0.98rem);
  font-weight: 700;
  padding: 0.42em 1.2em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(196, 107, 74, 0.22);
  z-index: 10;
  display: inline-block;
  width: auto;
  text-align: center;
}

.page-services .container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.2rem);
}

.page-services .section {
  padding: var(--section-y) 0;
}

.page-services .section--soft {
  background: var(--bg-soft);
}

.page-services .section--dark {
  background: var(--bg-dark);
  color: #ece4d6;
}

.page-services .section--dark h1,
.page-services .section--dark h2,
.page-services .section--dark h3 {
  color: #fbf6ee;
}

.page-services .grid {
  display: grid;
  gap: var(--gap);
  width: 100%;
}

.page-services .grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.page-services .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fffdf8;
  border: 1px solid rgba(43, 20, 14, 0.06);
  border-radius: var(--radius);
  padding: clamp(2rem, 3.4vw, 2.7rem);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.page-services .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-soft);
}

.page-services .card > .mt-3 {
  margin-top: auto;
}

.page-services .checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.page-services .checklist li {
  font-size: clamp(1.08rem, 0.5vw + 1.02rem, 1.2rem);
  line-height: 1.9;
  color: var(--text);
  padding: 0.6em 0;
  position: relative;
  padding-left: 1.8em;
}

.page-services .checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* ════════ works.html（.page-works）════════ */
.page-works .filterbar .field label {
  font-weight: 700;
  font-size: clamp(1.08rem, 0.35vw + 1.02rem, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: .02em;
  margin-bottom: 0.5rem;
}

.page-works .filterbar input,
.page-works .filterbar select {
  min-height: 50px;
  padding: 0.65em 0.95em;
  font-size: clamp(1.04rem, 0.35vw + 0.96rem, 1.16rem);
  border: 1.5px solid #D8C1AF;
  border-radius: 4px;
  background: #FFFDF8;
  color: var(--text);
  font-weight: 500;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.page-works .filterbar input::placeholder {
  color: #8B7A6E;
  font-weight: 500;
}

.page-works .filterbar input:hover,
.page-works .filterbar select:hover {
  border-color: var(--accent);
  background: #fffdf8;
}

.page-works .filterbar input:focus,
.page-works .filterbar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217,106,61,.16);
  background: #fffdf8;
}

.page-works .filterbar__btn-field .btn--primary {
  padding: 0.7em 1.6em;
  font-size: clamp(1.06rem, 0.35vw + 1rem, 1.18rem);
  min-height: 50px;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(241,90,53,.18);
  transition: background .2s ease, box-shadow .2s ease, transform .18s ease;
}

.page-works .filterbar__btn-field .btn--primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 8px 20px rgba(217,106,61,.24);
  transform: translateY(-2px);
}

.page-works .work__cat {
  font-size: clamp(1rem, 0.3vw + 0.94rem, 1.12rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-dark);
  margin-bottom: 0.7rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.page-works .work__body h3 {
  font-size: clamp(1.28rem, 1.2vw + 1.12rem, 1.54rem);
  line-height: 1.5;
  margin: 0.4rem 0 0.85rem;
  font-weight: 700;
  color: var(--ink);
}

.page-works .deal-meta {
  font-size: clamp(1.02rem, 0.35vw + 0.96rem, 1.12rem);
  color: #6B5E52;
  margin-bottom: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
}

.page-works .deal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.page-works .work__body p {
  font-size: clamp(1.06rem, 0.35vw + 1rem, 1.18rem);
  line-height: 1.8;
  color: #3D2817;
  margin: 0 0 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}

.page-works .work__body .pill {
  background: var(--accent);
  color: #fdf8f1;
  font-weight: 800;
  font-size: clamp(1.06rem, 0.4vw + 1rem, 1.2rem);
  padding: 0.7em 1.5em;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-shadow: 0 6px 16px rgba(217, 106, 61, 0.26);
  border-radius: 8px;
  transition: background .2s ease, box-shadow .22s ease, transform .18s ease;
  line-height: 1.35;
}

.page-works .work__body .pill:hover {
  background: var(--accent-dark);
  box-shadow: 0 8px 22px rgba(201, 71, 34, 0.32);
  transform: translateY(-2px);
}

.page-works .work__body .pill:active {
  transform: translateY(0);
}

.page-works .work__body .pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.page-works .site-footer h4 {
  font-size: clamp(1.24rem, 0.5vw + 1.14rem, 1.4rem);
  margin-bottom: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.5;
  font-weight: 700;
  color: #fdfaf4;
  letter-spacing: .02em;
}

.page-works .site-footer li {
  line-height: 2.1;
  margin-bottom: clamp(1.2rem, 2vw, 1.7rem);
  font-size: clamp(1.08rem, 0.35vw + 1.02rem, 1.2rem);
  font-weight: 500;
  color: #f5ede3;
}

.page-works .site-footer a {
  color: #f5ede3;
  font-weight: 500;
}

.page-works .site-footer a:hover {
  color: #ffd7b8;
}

.page-works .site-footer p {
  line-height: 2.1;
  font-size: clamp(1.06rem, 0.35vw + 1rem, 1.18rem);
  font-weight: 500;
  color: #f5ede3;
}


/* ════════════════════════════════════════════════════════════════════════════
   req-multifix-5 (2026-06-17 / Run 6) — about / contact / index / services / works 五頁
   可讀性 / 字級階層 / 對比 / 卡片留白 / 輪播控制 RWD / 表單欄位 / 按鈕一致性
   產出：5 個並行 Haiku sub-agent（各頁 sole writer，回傳 scoped CSS）；style.css md5
   於本次 run 前後一致確認 5 agent 皆 read-only。orchestrator 統一附加本層於檔尾＝最終權威。
   各 agent globalCss 一律 DROP（.header-btn 已於 req-multifix-4 統一，避免衝突）。
   全部沿用 :root 變數與相對單位（clamp/rem/em/%/vw/minmax），無固定 px 撐版。
   ════════════════════════════════════════════════════════════════════════════ */

/* ───────────── about.html (.page-about) ───────────── */
/* ════════ about.html (.page-about) 修復層 ════════
   2026-06-17 修復以下內容：
   1. Hero 麵包屑與副標字級提升、對比度加強
   2. 故事區圖片說明文字（img-caption）字級提升、字重加強
   3. 核心價值卡片：icon margin-bottom 調整、內部間距一致化
   4. 平台目標深色區塊：上下留白用 clamp()、列表左右外邊距
   5. 頁尾社群 icon 區：gap 與尺寸統一
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero 區塊：麵包屑與 h1 對比度 ── */
.page-about .page-hero {
  padding: clamp(2.6rem, 5.2vw, 4rem) 0;
}

.page-about .page-hero h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.2rem);
  margin-bottom: 0.5em;
  line-height: 1.3;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.02em;
}

.page-about .page-hero p {
  font-size: clamp(1.2rem, 2.3vw, 1.45rem);
  line-height: 2.05;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.48);
}

.page-about .page-hero .breadcrumb {
  font-size: clamp(1rem, 0.9vw + 0.88rem, 1.1rem);
  color: #fbf6ee;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.04em;
  margin-bottom: clamp(1.4rem, 2.2vw, 1.8rem);
}

.page-about .page-hero .breadcrumb a {
  color: #fbf6ee;
  text-decoration: none;
  transition: color 0.2s ease;
}

.page-about .page-hero .breadcrumb a:hover {
  color: #fff;
}

/* ── 2. 故事區：圖片說明文字提升 ── */
.page-about .img-caption {
  font-size: clamp(1.08rem, 0.7vw + 1rem, 1.24rem);
  font-weight: 600;
  color: var(--accent-dark);
  margin-top: clamp(1.2rem, 2vw, 1.6rem);
  text-align: center;
  line-height: 1.65;
}

/* ── 3. 核心價值卡片：icon margin 與內部間距一致化 ── */
.page-about .grid--3 .card {
  min-height: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  align-content: flex-start;
}

.page-about .card__ico {
  background: var(--accent-soft);
  color: var(--accent);
  width: clamp(56px, 8vw, 72px);
  height: clamp(56px, 8vw, 72px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  flex-shrink: 0;
}

.page-about .card__ico svg {
  width: clamp(24px, 3vw, 32px);
  height: clamp(24px, 3vw, 32px);
}

.page-about .card h3 {
  font-size: clamp(1.22rem, 2vw, 1.5rem);
  line-height: 1.4;
  margin: 0;
}

.page-about .card p {
  font-size: clamp(1.1rem, 0.6vw + 1.02rem, 1.2rem);
  line-height: 1.9;
  color: var(--text);
  margin: 0;
}

/* ── 4. 平台目標深色區塊：上下留白與列表寬度 ── */
.page-about .section--dark {
  padding: clamp(2.2rem, 4.5vw, 3.4rem) 0;
}

.page-about .section--dark .goal-block {
  max-width: 620px;
  margin-inline: auto;
  padding-inline: clamp(1.4rem, 3.5vw, 2.2rem);
  padding-block: 0;
}

.page-about .section--dark .goal-block .section__head {
  max-width: 100%;
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
  text-align: center;
}

.page-about .section--dark .goal-block .section__head h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #fbf6ee;
}

.page-about .section--dark .goal-block .checklist {
  margin-inline: 0;
  text-align: left;
  list-style: none;
  padding: 0;
}

.page-about .section--dark .goal-block .checklist li {
  font-size: clamp(1.1rem, 0.7vw + 1.02rem, 1.24rem);
  line-height: 2;
  color: #f3ebe1;
  margin-bottom: clamp(1rem, 1.8vw, 1.6rem);
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0;
}

.page-about .section--dark .goal-block .checklist li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-right: -0.2rem;
}

/* ── 5. 頁尾社群 icon 排列與尺寸統一 ── */
.page-about .footer__social {
  display: flex;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
  align-items: center;
}

.page-about .footer__social a {
  width: clamp(44px, 5.5vw, 52px);
  height: clamp(44px, 5.5vw, 52px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fbf6ee;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page-about .footer__social a svg {
  width: clamp(18px, 2vw, 24px);
  height: clamp(18px, 2vw, 24px);
}

.page-about .footer__social a:hover {
  background: var(--accent);
  color: #fdf8f1;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(244, 81, 44, 0.28);
}

.page-about .footer__bottom {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 1.6rem);
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── 6. 響應式微調 ── */
@media (max-width: 768px) {
  .page-about .page-hero {
    padding: clamp(2rem, 4vw, 2.8rem) 0;
  }

  .page-about .section--dark .goal-block .checklist {
    padding-inline: 0;
  }

  .page-about .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .page-about .footer__social {
    justify-content: center;
    margin: clamp(0.8rem, 2vw, 1.2rem) 0;
  }
}

/* ── 7. 額外調整：split 區間距 ── */
.page-about .split {
  gap: clamp(2.8rem, 5vw, 4.2rem);
}

.page-about .split--top .checklist {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

.page-about .split--top .checklist li {
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
}

/* ───────────── contact.html (.contact-page) ───────────── */
/* ════════ contact.html（.contact-page）— 修復：按鈕、表單、小標籤 ════════
   1. 送出按鈕：改 inline-flex、white-space、fit-content 防止換行
   2. 表單 grid：改 repeat(2,minmax) + 響應式斷點
   3. 小標籤按鈕：相對單位、高度對齊、flex 排列
*/

/* A. 送出按鈕（.btn--block）：inline-flex + white-space:nowrap 防止換行 */
.contact-page .form .btn--block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0.7em 1.6em;
  min-inline-size: max-content;
  min-height: 46px;
  width: fit-content;
  margin-inline: auto;
}

/* B. 表單 grid：repeat(2,minmax) 於大屏，單欄於小屏 */
.contact-page .form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}

.contact-page .field.full {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .contact-page .form__grid {
    grid-template-columns: 1fr;
  }
}

/* C. 左側「歡迎刊登的活動類型」小標籤：flex + 相對單位 */
.contact-page .type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.2vw, 0.85rem);
  margin-top: 1rem;
}

.contact-page .type-chips .pill--static {
  font-size: 0.85rem;
  padding: 0.35em 0.8em;
  line-height: 1.3;
  min-height: 2.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* D. 小屏斷點：優化 type-chips 間距與大小 */
@media (max-width: 640px) {
  .contact-page .type-chips {
    gap: clamp(0.5rem, 1vw, 0.7rem);
  }
  
  .contact-page .type-chips .pill--static {
    font-size: 0.8rem;
    padding: 0.3em 0.7em;
    min-height: 2em;
  }
}

/* ───────────── index.html (.page-home) ───────────── */
/* ════════════════════════════════════════════════════════════════════
   req-home-final：首頁完整修復層（body.page-home）
   修復項目：
   1. Hero 輪播箭頭置中容器邊緣定位（防止遮住標題）
   2. 搜尋表單關鍵字欄位彈性寬度（防止截斷）
   3. 精選優惠卡片圖片填滿高度（等高 grid）
   4. 精選優惠箭頭相對定位（防止漂浮遮擋）
   5. CTA 按鈕統一內距與高度
   6. 全頁 RWD 容器與置中
   ════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   A. Hero 輪播：箭頭置中容器邊緣定位
   ────────────────────────────────────────────────────────────────── */
.page-home .home-promo-carousel {
  position: relative;
}

.page-home .hpc__controls {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
}

.page-home .hpc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: auto;
  width: clamp(44px, 5vw, 52px);
  height: clamp(44px, 5vw, 52px);
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.92);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(42, 23, 17, 0.24);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.page-home .hpc__arrow:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.page-home .hpc__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-home .hpc__arrow svg {
  width: 50%;
  height: 50%;
  display: block;
}

/* 箭頭置於置中容器邊緣，不從視窗邊緣硬算 */
.page-home .hpc__arrow--prev {
  left: max(clamp(1rem, 2.5vw, 1.8rem), calc(50% - var(--container) / 2 + 1.2rem));
}

.page-home .hpc__arrow--next {
  right: max(clamp(1rem, 2.5vw, 1.8rem), calc(50% - var(--container) / 2 + 1.2rem));
}

/* ──────────────────────────────────────────────────────────────────
   B. 搜尋表單：關鍵字欄位彈性寬度，防止截斷
   ────────────────────────────────────────────────────────────────── */
.page-home .search__form {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, auto);
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  align-items: end;
}

.page-home .search__form .field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-bottom: 0;
}

.page-home .search__form .field:first-child {
  /* 第一個欄位（關鍵字）：允許彈性延伸 */
  flex: 1;
  min-width: 0;
}

.page-home .search__form .field input,
.page-home .search__form .field select {
  width: 100%;
  min-height: 48px;
  padding: 0.6em 0.9em;
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.14rem);
  border: 1px solid #D9C7B8;
  border-radius: 2px;
  background: #FFFDF9;
  color: var(--text);
  line-height: 1.5;
  transition: border-color 0.18s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-home .search__form .field input::placeholder {
  color: #B7A69B;
  white-space: nowrap;
}

.page-home .search__form .field input:hover,
.page-home .search__form .field select:hover {
  border-color: var(--accent);
}

.page-home .search__form .field input:focus,
.page-home .search__form .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(244, 81, 44, 0.12);
}

.page-home .search__form .field label {
  font-size: clamp(1rem, 0.3vw + 0.94rem, 1.08rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--ink);
  white-space: nowrap;
}

.page-home .search__btn {
  display: flex;
  align-items: flex-end;
}

.page-home .search__btn .btn {
  padding: 0.65em 1.4em;
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.1rem);
  font-weight: 700;
  min-height: 48px;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.page-home .search__btn .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(244, 81, 44, 0.26);
}

/* 平板：表單改為兩列或單列 */
@media (max-width: 860px) {
  .page-home .search__form {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .search__form .field:nth-child(4),
  .page-home .search__btn {
    grid-column: 1 / -1;
  }

  .page-home .search__form .field input,
  .page-home .search__form .field select {
    width: 100%;
  }

  .page-home .search__btn .btn {
    width: 100%;
  }
}

/* 手機：完全單列 */
@media (max-width: 560px) {
  .page-home .search__form {
    grid-template-columns: 1fr;
  }

  .page-home .search__form .field,
  .page-home .search__btn {
    grid-column: 1 / -1;
  }

  .page-home .search__btn .btn {
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────
   C. 精選優惠卡片：圖片填滿整個卡片高度
   ────────────────────────────────────────────────────────────────── */
.page-home .promo__slide {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  background: #fffdf8;
  border: 1px solid rgba(43, 20, 14, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 36px rgba(43, 20, 14, 0.1);
  overflow: hidden;
}

.page-home .promo__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: clamp(200px, 30vw, 320px);
}

.page-home .promo__media img {
  width: 100%;
  height: 100%;
  min-height: clamp(200px, 30vw, 320px);
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-home .promo__slide:hover .promo__media img {
  transform: scale(1.04);
}

.page-home .promo__media .badge--corner {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(47, 42, 36, 0.22);
}

.page-home .promo__body {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.8vw, 2.1rem) clamp(1.4rem, 3vw, 2.2rem);
  gap: 0.6rem;
}

.page-home .promo__body .work__cat {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-dark);
  letter-spacing: 0.04em;
  text-transform: none;
  margin-bottom: 0.2rem;
}

.page-home .promo__body h3 {
  font-size: clamp(1.25rem, 1.1vw + 1rem, 1.6rem);
  line-height: 1.35;
  margin: 0.4rem 0 0.5rem;
  color: var(--ink);
  font-weight: 700;
}

.page-home .promo__body p {
  font-size: clamp(1rem, 0.3vw + 0.96rem, 1.1rem);
  line-height: 1.75;
  margin: 0 0 0.9rem;
  color: var(--text);
  flex: 1;
}

.page-home .promo__body .mt-2 {
  margin-top: auto;
  padding-top: 0.5rem;
}

.page-home .promo__body .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.7em 1.6em;
  background: var(--accent);
  color: #fdf8f1;
  font-weight: 700;
  font-size: clamp(1rem, 0.4vw + 0.96rem, 1.12rem);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(244, 81, 44, 0.22);
  transition: background 0.24s ease, box-shadow 0.24s ease, transform 0.18s ease;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.35;
  min-height: 44px;
  border: none;
}

.page-home .promo__body .pill:hover {
  background: var(--accent-dark);
  box-shadow: 0 6px 18px rgba(244, 81, 44, 0.28);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────
   D. 精選優惠輪播：箭頭內側定位，防止遮擋
   ────────────────────────────────────────────────────────────────── */
.page-home .promo__wrapper {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.2rem);
}

.page-home .promo {
  position: relative;
  padding-inline: clamp(2.8rem, 6vw, 4rem);
  margin: 0 auto;
}

.page-home .promo__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  pointer-events: auto;
  width: clamp(42px, 5vw, 50px);
  height: clamp(42px, 5vw, 50px);
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 253, 248, 0.96);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(42, 23, 17, 0.24);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.page-home .promo__arrow:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.page-home .promo__arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page-home .promo__arrow svg {
  width: 50%;
  height: 50%;
  display: block;
}

.page-home .promo__arrow--prev {
  left: clamp(0.6rem, 1.2vw, 1rem);
}

.page-home .promo__arrow--next {
  right: clamp(0.6rem, 1.2vw, 1rem);
}

.page-home .promo__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1.2vw, 0.7rem);
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding: 0 clamp(1rem, 2vw, 1.5rem);
}

.page-home .promo__dot {
  width: clamp(10px, 1.8vw, 13px);
  height: clamp(10px, 1.8vw, 13px);
  border: none;
  border-radius: 50%;
  background: rgba(42, 23, 17, 0.24);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.page-home .promo__dot:hover {
  background: rgba(42, 23, 17, 0.5);
  transform: scale(1.15);
}

.page-home .promo__dot.is-active {
  background: var(--accent);
  transform: scale(1.35);
  box-shadow: 0 3px 10px rgba(244, 81, 44, 0.32);
}

/* ──────────────────────────────────────────────────────────────────
   E. 全頁 CTA 按鈕統一：内距、高度、字級一致
   ────────────────────────────────────────────────────────────────── */
.page-home .btn {
  padding: 0.6em 1.4em;
  font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.08rem);
  font-weight: 700;
  min-height: 48px;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
  cursor: pointer;
}

.page-home .btn--primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}

.page-home .btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
}

.page-home .btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}

.page-home .btn--ghost:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(244, 81, 44, 0.24);
}

/* ──────────────────────────────────────────────────────────────────
   F. 響應式容器調整
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .page-home .promo__slide {
    grid-template-columns: 1fr;
  }

  .page-home .promo__media,
  .page-home .promo__media img {
    min-height: clamp(150px, 36vw, 230px);
  }

  .page-home .promo__arrow {
    width: 38px;
    height: 38px;
  }

  .page-home .search__form {
    grid-template-columns: 1fr 1fr;
  }

  .page-home .search__form .field:nth-child(4),
  .page-home .search__btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .page-home .promo__wrapper {
    padding-inline: clamp(0.8rem, 3vw, 1.2rem);
  }

  .page-home .promo {
    padding-inline: clamp(2rem, 5vw, 2.8rem);
  }

  .page-home .search__form {
    grid-template-columns: 1fr;
  }

  .page-home .search__form .field,
  .page-home .search__btn {
    grid-column: 1 / -1;
  }

  .page-home .search__btn .btn {
    width: 100%;
  }

  .page-home .btn {
    padding: 0.6em 1.2em;
    font-size: clamp(0.88rem, 2vw + 0.82rem, 1rem);
    min-height: 44px;
  }

  .page-home .btn--primary {
    padding: 0.62em 1.4em;
    min-height: 46px;
  }
}

/* ───────────── services.html (.page-services) ───────────── */
/* ════════ services.html（.page-services）補強 req-multifix-4 ════════
   可讀性 / 對比 / 標籤層次 / 深色區塊卡片強化
   ═══════════════════════════════════════════════════════════════════════════ */

/* 強化 .svc-card 編號圓點可見度 — 移除過度透明度 */
.page-services .svc-card .num {
  opacity: 1;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 深色區塊卡片內文與編號對比度強化 */
.page-services .section--dark .step {
  background: rgba(255, 253, 248, 0.12);
  border: 1px solid rgba(231, 183, 159, 0.32);
  color: #f8efe1;
}

.page-services .section--dark .step::before {
  background: rgba(231, 183, 159, 0.5);
  color: #ffffff;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-family: var(--ff-serif);
  font-weight: 700;
  margin-bottom: 1.2rem;
  font-size: clamp(1.1rem, 0.3vw + 1rem, 1.24rem);
  flex: 0 0 auto;
}

.page-services .section--dark .step h3 {
  color: #ffffff;
  font-size: clamp(1.4rem, 1.5vw + 1.15rem, 1.66rem);
  margin-bottom: 0.8em;
  font-weight: 700;
  line-height: 1.35;
}

.page-services .section--dark .step p {
  color: #f3ede1;
  font-size: clamp(1.16rem, 0.5vw + 1.08rem, 1.28rem);
  line-height: 2.05;
  margin: 0;
}

/* 卡片內文字級階層整理 */
.page-services .services-grid .svc-card h3 {
  font-size: clamp(1.4rem, 1.5vw + 1.12rem, 1.62rem);
  line-height: 1.4;
  margin-bottom: 0.8em;
  color: var(--ink);
  font-weight: 700;
}

.page-services .services-grid .svc-card p {
  font-size: clamp(1.12rem, 0.5vw + 1.04rem, 1.28rem);
  line-height: 2.05;
  color: var(--text);
  margin-bottom: 1rem;
}

/* 標籤（tags）字級與間距提高 */
.page-services .svc-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 1.2vw, 1.1rem);
  margin-top: clamp(1.5rem, 2.2vw, 2rem);
}

.page-services .svc-card .tags span {
  font-size: clamp(1.06rem, 0.45vw + 1rem, 1.2rem);
  padding: 0.55em 1.1em;
  font-weight: 700;
  background: var(--trust-soft);
  color: var(--trust-dark);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
  white-space: nowrap;
  min-height: 42px;
  transition: all 0.2s ease;
}

.page-services .svc-card .tags span:hover {
  background: var(--trust);
  color: #fbf6ee;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124, 135, 105, 0.28);
}

/* 案例卡片（case-grid）字級提高 */
.page-services .case-grid .card h3 {
  font-size: clamp(1.28rem, 1.3vw + 1.08rem, 1.52rem);
  line-height: 1.4;
  margin-top: clamp(1.2rem, 1.8vw, 1.6rem);
  margin-bottom: 0.7em;
  color: var(--ink);
}

.page-services .case-grid .card p {
  font-size: clamp(1.08rem, 0.45vw + 1.02rem, 1.22rem);
  line-height: 2;
  color: var(--text);
  margin-bottom: 1rem;
  flex: 1;
}

/* 膠囊標籤（pill）視覺強化 */
.page-services .case-grid .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 1.2vw, 1.1rem);
  margin-top: clamp(1.4rem, 2vw, 1.8rem);
  align-items: center;
}

.page-services .case-grid .pill {
  font-size: clamp(1.06rem, 0.45vw + 1rem, 1.2rem);
  padding: 0.55em 1.1em;
  font-weight: 700;
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.6;
  min-height: 42px;
  box-shadow: 0 4px 12px rgba(196, 107, 74, 0.24);
  transition: all 0.2s ease;
}

.page-services .case-grid .pill:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(196, 107, 74, 0.32);
}

/* 價格方案卡片字級與檢查清單提高 */
.page-services .pricing-grid .card h3 {
  font-size: clamp(1.32rem, 1.4vw + 1.1rem, 1.56rem);
  line-height: 1.4;
  margin-bottom: 0.8em;
  color: var(--ink);
  font-weight: 700;
}

.page-services .pricing-grid .card p {
  font-size: clamp(1.08rem, 0.45vw + 1.02rem, 1.22rem);
  line-height: 1.95;
  color: var(--text);
  margin-bottom: 1.3rem;
}

.page-services .checklist {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.page-services .checklist li {
  font-size: clamp(1.1rem, 0.5vw + 1.04rem, 1.24rem);
  line-height: 2;
  color: var(--text);
  padding: 0.65em 0;
  position: relative;
  padding-left: 2em;
}

.page-services .checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.2em;
}

/* 行動 CTA 按鈕與主按鈕一致性 */
.page-services .mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: clamp(0.8rem, 2vw, 1.2rem);
  box-shadow: 0 -4px 12px rgba(43, 20, 14, 0.08);
  z-index: 100;
}

.page-services .mobile-cta .btn {
  width: 100%;
  min-height: 50px;
  font-size: clamp(1.1rem, 0.5vw + 1.02rem, 1.24rem);
  font-weight: 700;
}

/* 調整 main 底部留白以防遮擋行動 CTA */
.page-services main {
  padding-bottom: clamp(4rem, 12vw, 6rem);
}

/* ───────────── works.html (.page-works) ───────────── */
/* ════════ works.html（.page-works）RWD 修復 2026-06-17 ════════
   A. 篩選卡片（filterbar）：統一 controls 字級/padding/line-height
   B. 優惠卡片（work）：建立一致文字階層 + 改善行距與密度
   C. 卡片 CTA 按鈕：統一尺寸與相對 padding
   D. RWD 應用：所有主要區塊響應式 padding，避免撞邊
   全部 scope 在 .page-works，不衝突 req-multifix-4 .header-btn */

/* ───── A. 篩選卡片（filterbar）─────
   標籤、輸入框、按鈕的字級、padding、line-height 一致化
   ─────────────────────────────────── */
.page-works .section .container {
  padding-left: clamp(1rem, 3.5vw, 2rem);
  padding-right: clamp(1rem, 3.5vw, 2rem);
}

.page-works .filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 2vw, 1.3rem);
  align-items: flex-end;
  background: #fffdf8;
  border: 1px solid rgba(43, 20, 14, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 3vw, 2rem);
  max-width: 100%;
}

.page-works .filterbar .field {
  flex: 1 1 auto;
  min-width: clamp(11rem, 20vw, 15rem);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.page-works .filterbar label {
  font-size: clamp(1.06rem, 0.5vw + 0.98rem, 1.22rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-bottom: 0;
}

.page-works .filterbar select,
.page-works .filterbar input {
  font-size: clamp(1.06rem, 0.5vw + 0.98rem, 1.2rem);
  line-height: 1.6;
  color: var(--text);
  padding: 0.75em 1em;
  min-height: 52px;
  border: 1.5px solid #D8C1AF;
  border-radius: 4px;
  background: #FFFDF8;
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.page-works .filterbar input::placeholder {
  color: #8B7A6E;
  font-weight: 500;
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.18rem);
}

.page-works .filterbar input:hover,
.page-works .filterbar select:hover {
  border-color: var(--accent);
  background: #FFFDF8;
}

.page-works .filterbar input:focus,
.page-works .filterbar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(244, 81, 44, 0.16);
  background: #FFFDF8;
}

.page-works .filterbar__search-field {
  flex: 1 1 100%;
  min-width: auto;
}

.page-works .filterbar__btn-field {
  flex: 0 1 auto;
  min-width: auto;
  display: flex;
  align-items: flex-end;
}

.page-works .filterbar__btn-field .btn--primary,
.page-works .filterbar__btn {
  white-space: nowrap;
  padding: 0.75em 1.6em;
  font-size: clamp(1.06rem, 0.5vw + 0.98rem, 1.2rem);
  min-height: 52px;
  font-weight: 700;
  border-radius: 4px;
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(244, 81, 44, 0.18);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.page-works .filterbar__btn-field .btn--primary:hover,
.page-works .filterbar__btn:hover {
  background: var(--accent-dark);
  box-shadow: 0 8px 20px rgba(217, 106, 61, 0.24);
  transform: translateY(-2px);
}

.page-works .filterbar__btn-field .btn--primary:active,
.page-works .filterbar__btn:active {
  transform: translateY(0);
}

/* 窄螢幕：filterbar 改為列式排列 */
@media (max-width: 760px) {
  .page-works .filterbar {
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.5rem);
  }
  .page-works .filterbar .field {
    flex: 1 1 100%;
    min-width: 100%;
  }
  .page-works .filterbar__search-field {
    flex: 1 1 100%;
  }
  .page-works .filterbar__btn-field {
    flex: 1 1 100%;
    width: 100%;
  }
  .page-works .filterbar__btn-field .btn--primary,
  .page-works .filterbar__btn {
    width: 100%;
  }
}

/* ───── B. 優惠卡片（work）─────
   標題、分類、描述、日期的字級與行距一致化
   ─────────────────────────────────── */
.page-works .work__cat {
  display: block;
  font-family: var(--ff);
  font-size: clamp(1.04rem, 0.5vw + 0.96rem, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.page-works .work__body h3 {
  font-size: clamp(1.32rem, 1.3vw + 1.14rem, 1.58rem);
  line-height: 1.5;
  margin: 0.3rem 0 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.page-works .deal-meta {
  font-size: clamp(1.06rem, 0.5vw + 0.98rem, 1.2rem);
  color: #6B5E52;
  margin-bottom: 1.1rem;
  line-height: 1.7;
  font-weight: 500;
}

.page-works .deal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.page-works .work__body p {
  font-size: clamp(1.08rem, 0.5vw + 1rem, 1.22rem);
  line-height: 1.85;
  color: #3D2817;
  margin: 0 0 1.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 500;
}

/* ───── C. 卡片 CTA 按鈕 ─────
   統一尺寸、padding、字級與相對單位
   ─────────────────────────────────── */
.page-works .work__body .pill,
.page-works .work__body .pill.link-arrow {
  background: var(--accent);
  color: #fdf8f1;
  font-weight: 800;
  font-size: clamp(1.08rem, 0.5vw + 1.02rem, 1.24rem);
  padding: 0.75em 1.6em;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  box-shadow: 0 6px 16px rgba(244, 81, 44, 0.26);
  border-radius: 8px;
  transition: background 0.2s ease, box-shadow 0.22s ease, transform 0.18s ease;
  line-height: 1.4;
}

.page-works .work__body .pill:hover,
.page-works .work__body .pill.link-arrow:hover {
  background: var(--accent-dark);
  box-shadow: 0 8px 22px rgba(217, 106, 61, 0.32);
  transform: translateY(-2px);
}

.page-works .work__body .pill:active,
.page-works .work__body .pill.link-arrow:active {
  transform: translateY(0);
}

.page-works .work__body .pill:focus-visible,
.page-works .work__body .pill.link-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ───── D. Badge 與卡片容器 ───── */
.page-works .work .badge--corner {
  top: clamp(0.7rem, 1.2vw, 1rem);
  right: clamp(0.7rem, 1.2vw, 1rem);
  padding: clamp(0.35em, 0.5vw, 0.4em) clamp(0.65em, 0.9vw, 0.75em);
  font-size: clamp(0.95rem, 0.4vw + 0.88rem, 1.08rem);
  border-radius: 999px;
  z-index: 2;
}

.page-works .work__body {
  padding: clamp(1.7rem, 3vw, 2.3rem) clamp(1.5rem, 2.8vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

.page-works .work__body .mt-2 {
  margin-top: auto;
  padding-top: clamp(0.6rem, 0.8vw, 0.9rem);
}

/* ───── E. 推薦區 (section--soft) ───── */
.page-works .section--soft .work__cat {
  font-size: clamp(1.02rem, 0.4vw + 0.94rem, 1.16rem);
}

.page-works .section--soft .work__body h3 {
  font-size: clamp(1.28rem, 1.2vw + 1.12rem, 1.54rem);
  line-height: 1.48;
}

.page-works .section--soft .deal-meta {
  font-size: clamp(1.04rem, 0.4vw + 0.96rem, 1.18rem);
  line-height: 1.75;
}

.page-works .section--soft .work__body p {
  font-size: clamp(1.12rem, 0.4vw + 1.04rem, 1.26rem);
  line-height: 1.9;
}

.page-works .section--soft .work__body .pill {
  font-size: clamp(1.08rem, 0.4vw + 1.02rem, 1.22rem);
  padding: clamp(0.65em, 0.8vw, 0.8em) clamp(1.2em, 1.8vw, 1.65em);
  min-height: clamp(48px, 5vw, 52px);
}

/* ───── F. 更多優惠按鈕 ───── */
.page-works .load-more {
  text-align: center;
  margin: clamp(2.6rem, 4.5vw, 3.8rem) auto 0;
}

.page-works .load-more .btn--ghost {
  padding: 0.8em 2.1em;
  font-size: clamp(1.12rem, 0.5vw + 1.04rem, 1.28rem);
  font-weight: 700;
  min-height: 52px;
  line-height: 1.5;
  border-width: 2px;
}

.page-works .load-more .btn--ghost:hover {
  background: var(--accent);
  color: #fdf8f1;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(244, 81, 44, 0.28);
}

.page-works .load-more .btn--ghost:active {
  transform: translateY(0);
}

/* ───── G. Empty State ───── */
.page-works .empty-state {
  text-align: center;
  padding: clamp(2rem, 3vw, 3rem) clamp(1rem, 2vw, 1.5rem);
}

.page-works .empty-state h3 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin-bottom: 0.8rem;
}

.page-works .empty-state p {
  font-size: clamp(1rem, 0.4vw + 0.94rem, 1.12rem);
  color: var(--muted);
  margin-bottom: 1.8rem;
}

/* ───────────── orchestrator 收口修正 ───────────── */
/* 首頁搜尋表單實際有 5 個格子（關鍵字 / 分類 / 地區 / 日期 ＋ 搜尋按鈕）；
   agent 只宣告 4 欄會讓按鈕在桌機掉到第二列。改為 5 欄：關鍵字彈性最大 + 3 欄等寬 + 按鈕 auto。 */
.page-home .search__form {
  grid-template-columns: minmax(190px, 1.7fr) repeat(3, minmax(108px, 1fr)) auto;
}
@media (max-width: 1024px) and (min-width: 861px) {
  .page-home .search__form {
    grid-template-columns: minmax(170px, 1.6fr) repeat(2, minmax(100px, 1fr)) auto;
  }
  .page-home .search__form .field:nth-child(4) { grid-column: 1 / -1; }
}

/* ═══════════════════════ req-multifix-5 結束 ═══════════════════════ */

/* ─── req-multifix-5 補丁：平板（≤860）關鍵字欄改整列，避免長 placeholder 截斷 ───
   實測：桌機 1440/1024 placeholder 可完整顯示；僅 2 欄斷點下關鍵字寬度不足。 */
@media (max-width: 860px) {
  .page-home .search__form .field:first-child { grid-column: 1 / -1; }
}
/* ═══════════════════════ req-multifix-5 補丁結束 ═══════════════════════ */


/* ============================================================
   ULTRACODE multipage fix — 2026-06-17
   Append-override block (about / contact / home / services)
   All scoped by page class, RWD units + design variables only.
   ============================================================ */

/* ===== ultracode fix: about.html — 平台目標 section alignment & spacing ===== */
.page-about .section--dark {
  padding-block: clamp(2.2rem, 4.5vw, 3.2rem) clamp(1.8rem, 3.5vw, 2.4rem);
}
.page-about .section--dark .goal-block .checklist {
  width: fit-content;
  margin-inline: auto;
  text-align: left;
}

/* ===== ultracode fix: contact.html ===== */
/* 1. Email and all form field inputs unified: full width, proper box-sizing, consistent height/padding.
   排除 checkbox / radio / file（如同意條款的勾選框、隱藏的照片上傳 input），避免被當成文字框撐成整列。 */
.contact-page .form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.contact-page .form .field select,
.contact-page .form .field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: .65em .9em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font: inherit;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.contact-page .form .field textarea {
  min-height: 140px;
  resize: vertical;
}
.contact-page .form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.contact-page .form .field select:hover,
.contact-page .form .field textarea:hover {
  border-color: var(--accent);
}
.contact-page .form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.contact-page .form .field select:focus,
.contact-page .form .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(244, 81, 44, 0.14);
}
/* 2. Flow steps: improve non-active state contrast and padding with RWD */
.contact-page .flow-step:not(.is-current):not(.is-done) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(251, 246, 238, 0.88);
}
.contact-page .flow-step:not(.is-current):not(.is-done) .flow-step__num {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(251, 246, 238, 0.92);
}
.contact-page .flow-step {
  padding: .6em clamp(.8rem, 2vw, 1.4rem);
  font-weight: 500;
}
.contact-page .flow-step__num {
  font-weight: 700;
  font-size: 0.9em;
}
/* 3. Address group responsive grid layout */
.contact-page .addr-group {
  display: grid;
  gap: clamp(0.8rem, 2vw, 1.2rem);
  grid-template-columns: 1fr 1fr;
}
.contact-page .addr-group select,
.contact-page .addr-group input {
  width: 100%;
  box-sizing: border-box;
}
.contact-page .addr-group input {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .contact-page .addr-group {
    grid-template-columns: 1fr;
  }
}
/* 4. Form grid responsive columns with relative gap */
.contact-page .form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  width: 100%;
}
.contact-page .form .field.full {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .contact-page .form__grid {
    grid-template-columns: 1fr;
  }
}
/* 5. Form card and internal form padding with RWD (no fixed px) */
.contact-page .form-card {
  max-width: 100%;
  padding-inline: clamp(1.2rem, 5vw, 2.4rem);
}
.contact-page .form-card .form {
  padding: clamp(1.8rem, 5vw, 2.8rem);
}
/* 6. Ensure all containers have max-width and horizontal padding */
.contact-page .page-hero .container,
.contact-page .section .container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 5vw, 2.4rem);
}
/* 7. Flow steps parent container alignment */
.contact-page .flow-steps {
  width: 100%;
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 0;
}
/* 8. Hero section with proper spacing */
.contact-page .page-hero {
  padding-top: clamp(2.4rem, 7vw, 4.4rem);
  padding-bottom: clamp(2rem, 5vw, 3.6rem);
}
/* 9. Field hint and error text styling with proper color and size */
.contact-page .field-hint {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  color: var(--muted);
  margin-top: 0.4rem;
  display: block;
}
.contact-page .field-error {
  font-size: clamp(0.8rem, 1vw, 0.9rem);
  color: var(--accent-dark);
  margin-top: 0.4rem;
  display: block;
}
/* 10. Split layout (contact info + form) responsive */
.contact-page .split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.2rem);
}
@media (max-width: 1024px) {
  .contact-page .split {
    grid-template-columns: 1fr;
  }
  .contact-page .contact-info {
    order: 2;
  }
  .contact-page .form-card {
    order: 1;
  }
}
/* 11. Consent box and notice blocks with proper width and padding */
.contact-page .consent-box {
  width: 100%;
  padding: 1rem 1.2rem;
  gap: 1rem;
  border-radius: var(--radius-sm);
}
.contact-page .notice--info {
  width: 100%;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
}
/* 12. Line guide (QR code section) responsive sizing */
.contact-page .line-guide {
  width: 100%;
  display: flex;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  align-items: center;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-radius: var(--radius-sm);
}
.contact-page .line-guide img {
  width: clamp(100px, 20vw, 140px);
  height: auto;
}
@media (max-width: 640px) {
  .contact-page .line-guide {
    flex-direction: column;
    text-align: center;
  }
}
/* 13. Submit button responsive sizing */
.contact-page .form .btn--block {
  min-height: 48px;
  padding: .7em 1.6em;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  width: 100%;
}
/* 14. Tab styling responsive */
.contact-page .tabs {
  gap: clamp(1.2rem, 3vw, 2rem);
  padding-bottom: clamp(1.2rem, 3vw, 1.6rem);
}
.contact-page .tab {
  padding: .7em 1.2em;
  border-bottom-width: 3px;
}
@media (max-width: 640px) {
  .contact-page .tabs {
    gap: 1rem;
  }
  .contact-page .tab {
    padding: .6em 1em;
    font-size: 0.95rem;
  }
}

/* ===== ultracode fix: index.html hero carousel arrow-text overlap ===== */
.page-home .hpc__inner {
  padding-inline-start: clamp(1.2rem, 4.5vw, 3.2rem);
}
.page-home .hpc__arrow--prev {
  left: max(clamp(0.8rem, 1.8vw, 1.6rem), calc(50% - var(--container) / 2 + 0.8rem));
}
.page-home .hpc__arrow--next {
  right: max(clamp(0.8rem, 1.8vw, 1.6rem), calc(50% - var(--container) / 2 + 0.8rem));
}
@media (max-width: 768px) {
  .page-home .hpc__inner {
    padding-inline-start: 0;
  }
}

/* ===== ultracode fix: services.html ===== */
/* ---------- 字級階層統一 + RWD（已攤平，不使用 CSS nesting） ---------- */
.page-services .page-hero h1 {
  font-size: clamp(2rem, 4.8vw, 3.4rem);
  margin-bottom: 0.5em;
}
.page-services .page-hero p {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 2.05;
}
.page-services .section__head .eyebrow {
  font-size: clamp(0.9rem, 0.35vw + 0.85rem, 1rem);
}
.page-services .section__head h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.8rem);
  line-height: 1.35;
}
.page-services .svc-card h3,
.page-services .case-grid .card h3,
.page-services .step h3 {
  font-size: clamp(1.32rem, 1.3vw + 1.06rem, 1.56rem);
  line-height: 1.4;
}
.page-services .svc-card p,
.page-services .case-grid .card p,
.page-services .step p {
  font-size: clamp(1.04rem, 0.5vw + 0.98rem, 1.18rem);
  line-height: 1.85;
}
.page-services .footer__brand p,
.page-services .site-footer h4,
.page-services .site-footer ul li,
.page-services .site-footer a {
  font-size: clamp(1rem, 0.4vw + 0.96rem, 1.12rem);
}
/* ---------- .num 編號視覺提升：明確圓形編號標記，不再像浮動雜訊 ---------- */
.page-services .svc-card .num {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.4rem);
  right: clamp(1rem, 2.5vw, 1.4rem);
  left: auto;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  opacity: 1;
  padding: 0.4em 0.65em;
  border-radius: 50%;
  min-width: 2.2em;
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(244, 81, 44, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-services .svc-card .num:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(244, 81, 44, 0.36);
}
/* ---------- 標籤與膠囊一致性 ---------- */
.page-services .svc-card .tags span,
.page-services .case-grid .pill {
  font-size: clamp(1rem, 0.4vw + 0.96rem, 1.12rem);
  padding: 0.5em 1.2em;
  min-height: 44px;
  border-radius: var(--radius-sm);
  line-height: 1.6;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.page-services .svc-card .tags span {
  background: var(--trust-soft);
  color: #2d3429;
}
.page-services .svc-card .tags span:hover {
  background: var(--trust);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 135, 105, 0.22);
}
.page-services .case-grid .pill {
  background: var(--accent-soft);
  color: var(--accent-dark);
  gap: 0.4em;
}
.page-services .case-grid .pill:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 81, 44, 0.26);
}
/* ---------- 方案卡片對齊與 CTA 一致 ---------- */
.page-services .pricing-grid {
  align-items: stretch;
  gap: clamp(1.8rem, 3.5vw, 2.6rem);
}
.page-services .pricing-grid .card {
  display: flex;
  flex-direction: column;
  min-height: auto;
  overflow: visible;
}
.page-services .pricing-grid .card h3 {
  font-size: clamp(1.36rem, 1.4vw + 1.08rem, 1.6rem);
  line-height: 1.4;
  margin-bottom: 1em;
}
.page-services .pricing-grid .card p {
  font-size: clamp(1.04rem, 0.5vw + 0.98rem, 1.18rem);
  line-height: 1.8;
  margin-bottom: 1.5em;
}
.page-services .pricing-grid .checklist li {
  font-size: clamp(1rem, 0.4vw + 0.96rem, 1.12rem);
  line-height: 1.7;
  padding: 0.6em 0;
}
.page-services .pricing-grid .card .mt-3 {
  margin-top: auto;
  padding-top: clamp(1.6rem, 2.5vw, 2rem);
}
.page-services .pricing-grid .btn--block {
  padding: 0.7em 1.4em;
  min-height: 48px;
  font-size: clamp(1rem, 0.4vw + 0.96rem, 1.12rem);
  font-weight: 700;
  line-height: 1.5;
}
.page-services .pricing-grid .plan-badge {
  position: absolute;
  top: clamp(-1.4rem, -2.5vw, -1rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5em 1.3em;
  font-size: clamp(0.92rem, 0.4vw + 0.86rem, 1.02rem);
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(244, 81, 44, 0.32);
}
.page-services .pricing-grid .card.is-featured {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  position: relative;
}
/* ---------- 曝光步驟區塊 ---------- */
.page-services .steps {
  gap: clamp(1.6rem, 3vw, 2.4rem);
}
.page-services .step {
  padding: clamp(1.8rem, 3.5vw, 2.4rem);
  background: rgba(255, 253, 248, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
}
.page-services .step h3 {
  margin-bottom: 0.8em;
}
.page-services .step p {
  margin-bottom: 0;
}
/* ---------- 導覽按鈕全站一致性強化（共用 .header-btn） ---------- */
.header-btn {
  font-size: clamp(0.95rem, 0.8vw + 0.85rem, 1.08rem);
  padding: 0.6em 1.3em;
  min-height: 46px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  transition: all 0.22s ease;
}
.header-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(244, 81, 44, 0.22);
}
.header-btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 10px 24px rgba(244, 81, 44, 0.32);
}
.header-btn-outline {
  border: 1.5px solid rgba(53, 18, 11, 0.3);
  color: var(--ink);
  background: transparent;
}
.header-btn-outline:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
/* ---------- 容器與邊距 RWD ---------- */
.page-services .container {
  padding: 0 clamp(1.2rem, 4vw, 2.2rem);
}
.page-services .section {
  padding: clamp(2.2rem, 4.5vw, 3.8rem) 0;
}
.page-services .section--soft {
  background: var(--bg-soft);
}
.page-services .section--dark {
  background: var(--bg-dark);
  color: #faf6ee;
}

/* ============================================================
   req-535 — 登入彈窗「註冊會員」表單改版（auth.js / authApplyForm）
   商店名稱全寬置頂、聯絡人+分類並排、市話+行動電話並排、
   地址三件式（縣市/鄉鎮市區/詳細地址）並排，全寬連結欄。
   addr-group 原僅作用於 .contact-page，這裡補上彈窗內的版面。
   ============================================================ */
.auth-apply-form .addr-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem .8rem;
}
.auth-apply-form .addr-group select,
.auth-apply-form .addr-group input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.auth-apply-form .addr-group input {
  grid-column: 1 / -1;
}
.auth-apply-form .addr-group select:disabled {
  background-color: var(--bg-soft);
  color: var(--muted);
  cursor: not-allowed;
}
.auth-apply-form .addr-errors {
  display: flex;
  flex-direction: column;
}
@media (max-width: 560px) {
  .auth-apply-form .addr-group {
    grid-template-columns: 1fr;
  }
}

/* ====== req-546：登入改用行動電話 + 簡訊驗證碼（OTP）— 全站共用登入彈窗 ======
   置於檔尾最後生效；沿用 :root 變數與相對單位（rem/em/clamp），維持 RWD，
   僅作用於登入／會員申請彈窗，不影響其他頁面。 */
.auth-form .field-hint,
.auth-apply-form .field-hint { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 2px; }
.auth-form [data-otp-hint] { color: var(--trust-dark); font-weight: 600; }

.otp-row { display: flex; gap: .6rem; align-items: stretch; }
.otp-row > input { flex: 1 1 auto; min-width: 0; letter-spacing: .18em; }
.otp-send { flex: 0 0 auto; white-space: nowrap; padding: .6em 1.1em; font-size: clamp(.96rem, .3vw + .9rem, 1.04rem); align-self: stretch; min-height: 0; }
.otp-send:disabled { opacity: .55; cursor: not-allowed; }
.otp-send:disabled:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

@media (max-width: 420px) {
  .otp-row { flex-direction: column; }
  .otp-send { width: 100%; }
}

/* ============================================================
   req-582：登入彈窗調整（全站共用 auth 彈窗）
   - 移除簡訊驗證碼後新增「忘記密碼／修改會員資料」入口列
   - 忘記密碼／資料修改檢視隱藏分頁（圖B）
   - 同意條款文字統一字級、單排排版（文字改成一排）
   置於檔尾最後生效。
   ============================================================ */

/* 分頁在「忘記密碼／資料修改」檢視需隱藏（display:flex 會蓋掉 hidden 屬性） */
.auth-tabs[hidden] { display: none !important; }

/* 登入面板入口列：忘記密碼 · 修改會員資料 */
.auth-form__links {
  margin: 1rem 0 0; text-align: center; line-height: 1.7;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem .6rem;
}
.auth-form__links a {
  color: var(--accent); font-weight: 600;
  font-size: clamp(.92rem, .25vw + .86rem, 1rem);
}
.auth-form__links a:hover { color: var(--accent-dark); text-decoration: underline; }
.auth-form__links-sep { color: var(--muted); opacity: .6; }

/* 忘記密碼面板說明文字 */
.auth-form__lead {
  margin: 0 0 1.1rem; color: var(--muted); line-height: 1.7;
  font-size: clamp(.92rem, .25vw + .86rem, 1rem);
}

/* 同意條款：文字統一字級、與底部說明一致，維持「核取方塊＋文字」單排 */
.auth-form .consent-box,
.auth-apply-form .consent-box { display: flex; align-items: flex-start; gap: 10px; }
.auth-form .consent-box label,
.auth-apply-form .consent-box label {
  flex: 1 1 auto; min-width: 0;
  font-size: clamp(.92rem, .25vw + .86rem, 1rem);
  font-weight: 500; line-height: 1.7; margin: 0;
}

/* req-583：登入面板提示（例如「請先登入再修改資料」），使用主色淺底凸顯 */
.auth-form__hint {
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  font-size: clamp(.9rem, .25vw + .84rem, .98rem);
  line-height: 1.6;
}
/* 登入失敗警示：以紅色系凸顯錯誤（與一般橘色提示區隔），登入資料與會員註冊不一致時顯示 */
.auth-form__hint--error {
  background: #FDECEA;
  border-color: #C7361D;
  color: #C7361D;
}

/* ============================================================================
   設計師 2026/06/20 — 全站一致性最終收斂（權威覆寫，置於檔尾，後者勝出）
   範圍：全站。統一 header / footer / hero / section / card / tag / CTA / 字級。
   ============================================================================ */

/* ---- 1. 設計師統一色票（CSS variables，沿用既有變數做別名以免破壞既有規則）---- */
:root{
  --primary:#FF4E2E;
  --primary-hover:#E84224;
  --brown:#3A1009;
  --brown-2:#5A2015;
  --cream:#F7EFE4;
  --sand:#EFE1CC;
  --text:#2B1712;
  /* 既有變數重新對齊到統一色票 */
  --orange:#FF4E2E;
  --orange-hover:#E84224;
  --accent:#FF4E2E;
  --accent-dark:#E84224;
  --accent-nav:#FF4E2E;
  --ink:#3A1009;
  /* 統一形狀 / 陰影 / CTA 陰影 */
  --card-radius:12px;
  --img-radius:12px;
  --u-card-shadow:0 12px 32px rgba(58,16,9,.10);
  --cta-shadow:0 8px 18px rgba(255,78,46,.24);
  --tag-bg:#FFE6DF;
  /* section 節奏：桌機 96px */
  --section-y:96px;
}

/* ---- 2. body 字級統一 16px / 1.8，卡片內文最小 15px ---- */
body{ font-size:16px; line-height:1.8; }
.card p, .svc-card p, .work__body p, .case-grid .card p{ font-size:max(15px, 1em); }

/* ---- 3. Header 全站統一（修正 contact/services 縮小問題）---- */
.site-header .container{ max-width:1120px !important; margin-inline:auto; padding-inline:24px !important; }
.site-header .nav{ min-height:64px !important; height:64px; align-items:center; gap:clamp(.8rem,2vw,1.4rem); }
.site-header .nav__logo-img,
.nav__logo-img{ height:28px !important; width:auto !important; }
.site-header .nav__logo-text{ font-size:1.18rem; }
.site-header .header-btn,
.site-header .nav__login,
.site-header .nav__link{
  min-height:40px; height:40px; display:inline-flex; align-items:center; box-sizing:border-box;
}

/* nav 文字連結（找優惠 / 關於我們） */
.nav__link{
  padding:0 .6em; font-weight:700; color:var(--text);
  font-family:var(--ff); font-size:1rem; line-height:1.4;
  border-radius:8px; transition:color .18s ease, background .18s ease;
}
.nav__link:hover{ color:var(--primary); }
.nav__link.is-active{ color:var(--primary); }

/* ---- 4. CTA 統一視覺權重 ---- */
/* 主商家 CTA：免費刊登活動 = 橘底白字 */
.site-header .header-btn-outline,
.header-btn-primary, .header-btn.header-btn-outline{
  background:var(--primary) !important; color:#fff !important; border:1px solid var(--primary) !important;
  padding:.6em 1.4em; font-weight:700; border-radius:8px;
  box-shadow:var(--cta-shadow); transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.site-header .header-btn-outline:hover,
.header-btn-primary:hover{ background:var(--primary-hover) !important; border-color:var(--primary-hover) !important; transform:translateY(-1px); }
/* 商家登入 = outline 次要 */
.site-header .nav__login{
  background:transparent; color:var(--primary); border:1px solid var(--primary);
  padding:.55em 1.2em; font-weight:700; border-radius:8px;
}
.site-header .nav__login:hover{ background:var(--primary); color:#fff; }

/* 全站主要 CTA（內文按鈕）橘底白字統一 */
.btn--primary, .btn.btn--primary, a.btn--primary{
  background:var(--primary); color:#fff; border-color:var(--primary);
  box-shadow:var(--cta-shadow);
}
.btn--primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }

/* CTA / nav 鍵盤 focus 樣式 */
.header-btn:focus-visible, .nav__login:focus-visible, .nav__link:focus-visible,
.btn:focus-visible, .btn--primary:focus-visible{
  outline:3px solid rgba(255,78,46,.28); outline-offset:3px;
}

/* ---- 5. Hero：內頁統一內距，首頁搜尋框下壓 -48px ---- */
.page-about .page-hero, .page-works .page-hero,
.page-services .page-hero, .contact-page .page-hero{
  padding:72px 0 80px !important;
}
.page-home .home-search, .page-home .search--float{ margin-top:-48px; }

/* ---- 6. section 節奏：桌機 96px / 手機 64px；卡片 grid gap 32px ---- */
main > .section, main > section.section{ padding-block:var(--section-y); }
.cards-grid, .card-grid, .work-grid, .svc-grid, .case-grid, .footer__grid + *{ gap:32px; }
[class*="-grid"]{ gap:32px; }

/* ---- 7. 卡片圓角 / 陰影統一 ---- */
.card, .svc-card, .work, .case-grid .card, .deal-card{
  border-radius:var(--card-radius); box-shadow:var(--u-card-shadow);
}
/* 圖片圓角 + 優惠卡圖片 4:3 cover */
.card img, .work img, .work__media img, .case-grid .card img, .deal-card img{
  border-radius:var(--img-radius);
}
.work__media, .deal-card__media, .card__media{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--img-radius); }
.work__media img, .deal-card__media img, .card__media img{ width:100%; height:100%; object-fit:cover; }

/* 卡片標題最多 2 行、內文最多 3 行，避免高度跳動 */
.card h3, .work__body h3, .svc-card h3, .case-grid .card h3{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card p, .work__body p, .svc-card p, .case-grid .card p{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---- 8. tag 統一：橘紅字、淡橘底、6px 圓角 ---- */
.tag, .tags > *, .hk-tags > *, .hpc__tag, .work__cat-tag, .badge--soft{
  color:var(--primary) !important; background:var(--tag-bg) !important;
  padding:6px 10px; border-radius:6px; font-weight:700; line-height:1.3; display:inline-flex; align-items:center;
}

/* ---- 9. Footer 全站統一（修正 contact/services 偏小）---- */
/* req-677：頁尾高度減半 — 上下留白由 72/40px 壓縮約一半（保留 !important 維持權威來源） */
.site-footer, .page-services .site-footer{ padding:clamp(1.8rem,3.2vw,2.6rem) 0 clamp(1.4rem,2.4vw,1.9rem) !important; }
.site-footer .footer__grid,
.page-services .footer__grid{ grid-template-columns:32% 28% 40% !important; gap:clamp(1.6rem,3vw,2.4rem) !important; }
.footer__social a{ transition:background .18s ease; border-radius:8px; }
.footer__social a:hover{ background:rgba(255,255,255,.16); }

/* ---- 10. Breadcrumb 統一 ---- */
.breadcrumb{ font-size:14px; color:rgba(255,255,255,.78); }
.breadcrumb a{ color:rgba(255,255,255,.92); }
.breadcrumb a:hover{ color:#fff; text-decoration:underline; }

/* ---- 11. about / services 新增區塊樣式 ---- */
.about-merchant-cta .about-cta__inner,
.services-final-cta{ text-align:left; }
.about-merchant-cta .about-cta__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  background:var(--sand); border-radius:14px; padding:clamp(1.6rem,4vw,2.6rem);
}
.about-merchant-cta h2{ margin:0 0 .3em; }
.about-merchant-cta p{ margin:0; color:var(--muted); }
.services-final-cta{ background:var(--brown); color:#fff; text-align:center; }
.services-final-cta h2{ color:#fff; margin-bottom:1.2rem; }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.4rem; align-items:center; }
.anchor-offset{ display:block; position:relative; top:-80px; visibility:hidden; height:0; }

/* ---- 12. 表單欄位高度統一 48px ---- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], select{ min-height:48px; }
.form-error, .field-error, .error-text{ color:#D8331F; display:block; margin-top:6px; }

/* ---- 13. 手機 RWD：section 64px、footer 單欄、首頁搜尋直向 ---- */
@media (max-width:768px){
  :root{ --section-y:64px; }
  .site-footer .footer__grid,
  .page-services .footer__grid{ grid-template-columns:1fr !important; }
  .site-header .nav{ height:auto; min-height:64px !important; }
}

/* ── req: 商店分類「其他」自填欄位 ── */
.field.cat-other-field[hidden] { display: none; }
.field.cat-other-field { animation: catOtherIn .18s ease; }
@keyframes catOtherIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* ── req-654｜contact #apply Hero 美化（僅 .contact-page，置於檔尾為最終權威層）──
   背景改用實拍暖色商圈夜景圖（images2/contact-hero-a.png）＋深色漸層遮罩維持白字可讀；
   breadcrumb 改膠囊、標題加裝飾線，整體更精緻不呆板。沿用 :root 變數與相對單位，RWD 不變。 */
.contact-page .page-hero {
  background:
    linear-gradient(99deg,
      rgba(26,11,6,.94) 0%,
      rgba(35,18,11,.82) 36%,
      rgba(35,18,11,.5) 66%,
      rgba(53,30,18,.32) 100%),
    image-set(url('../images2/contact-hero-a.png') 1x);
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
  padding: clamp(2.6rem, 6vw, 4.6rem) 0;
  min-height: clamp(220px, 30vw, 340px);
  display: flex;
  align-items: center;
  border-bottom: 3px solid var(--accent);
}
.contact-page .page-hero > .container { width: 100%; }
/* 細緻光暈點綴，疊在圖上、文字下 */
.contact-page .page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 88% 30%, rgba(244,81,44,.28), transparent 58%);
  mix-blend-mode: screen;
}
/* breadcrumb 改暖色膠囊 */
.contact-page .contact-hero__breadcrumb {
  display: inline-flex; align-items: center; gap: .15em;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  padding: .42em 1em; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #f6e7da; margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.contact-page .contact-hero__breadcrumb a { color: #f6e7da; }
.contact-page .contact-hero__breadcrumb a:hover { color: #fff; }
/* 標題：保留陰影提升對比，下方加暖橘裝飾線 */
.contact-page .page-hero h1 {
  position: relative;
  max-width: 18em;
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
  padding-bottom: clamp(.5rem, 1.4vw, .8rem);
}
.contact-page .page-hero h1::after {
  content: ""; display: block;
  width: clamp(48px, 8vw, 76px); height: 3px; margin-top: clamp(.7rem, 1.5vw, 1rem);
  background: linear-gradient(90deg, var(--accent), rgba(244,81,44,0));
  border-radius: 3px;
}
@media (max-width: 600px) {
  .contact-page .page-hero { background-position: 78% center; min-height: clamp(200px, 52vw, 260px); }
}

/* ============================================================
   req-677 — Footer 高度減半 + 編排清爽收口（全站一致）
   背景：先前的 footer 垂直節奏散落於多處（padding、line-height 2.1、
   li margin-bottom 1.2~1.7rem…）導致頁尾過高。此區塊置於檔尾，以分組
   選擇器一次覆寫 page-home / contact-page / page-services / page-works，
   將垂直留白統一壓縮約一半，視覺更清爽簡潔，配色/欄位/RWD 不變。
   ============================================================ */
/* 注：頁尾上下 padding 改在上方第 9 區（含 !important 的權威來源）一併壓縮，此處只收斂行高 */
.site-footer,
.page-services .site-footer,
.page-works .site-footer {
  line-height: 1.65;
}
.footer__grid,
.page-services .footer__grid,
.page-works .site-footer .footer__grid {
  margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
}
.site-footer h4,
.page-services .site-footer h4,
.page-works .site-footer h4 {
  margin-bottom: clamp(.55rem, 1.1vw, .8rem);
  line-height: 1.3;
}
.site-footer li,
.page-services .site-footer li,
.page-works .site-footer li {
  margin-bottom: clamp(.32rem, .7vw, .5rem);
  line-height: 1.6;
}
.footer__brand p,
.page-services .footer__brand p,
.page-works .site-footer p {
  line-height: 1.65;
  margin-bottom: 0;
}
.footer__brand .nav__logo { margin-bottom: clamp(.45rem, 1vw, .7rem); }
.footer__bottom {
  padding-top: clamp(1rem, 1.8vw, 1.35rem);
  padding-bottom: clamp(.2rem, 1vw, .6rem);
  margin-top: clamp(.4rem, 1vw, .8rem);
}
/* 手機：堆疊時維持舒適但不鬆散的列距 */
@media (max-width: 720px) {
  .footer__grid,
  .page-services .footer__grid,
  .page-works .site-footer .footer__grid { margin-bottom: clamp(.9rem, 2vw, 1.3rem); }
}

/* ============================================================
   req-678 — 找優惠頁(works) 操作動線優化（UX/UI）
   目的：篩選 / 排序與卡片即時連動、結果筆數可見、載入更多平順分頁、
   卡片進場柔和淡入。沿用既有 .container / token 配色，維持 RWD。
   ============================================================ */
/* 結果筆數列：放在篩選列與卡片之間，讓「篩選 → 結果」的連動看得見 */
.results-bar {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
}
.results-count {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, .35vw + .94rem, 1.12rem);
  font-weight: 500;
  letter-spacing: .01em;
}
.results-count strong {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.12em;
  margin: 0 .12em;
}

/* 卡片柔和進場（顯示時淡入上移）。隱藏沿用 display:none，不留空位 */
.page-works__grid .work.work--anim {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s ease, transform .32s ease;
}
.page-works__grid .work.work--anim.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-works__grid .work.work--anim { opacity: 1; transform: none; transition: none; }
}

/* 載入更多：置中、與卡片留適度間距；hidden 時完全收合 */
.load-more { display: flex; justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.load-more[hidden] { display: none; }
.load-more .btn { min-width: min(280px, 80vw); }

/* === 錨點捲動偏移：預留固定（sticky）導覽列高度，避免標題被遮擋 (req-scrolltop) === */
:root { --header-h: 72px; }
/* :target = 目前網址 #fragment 指向的元素；只在被錨點命中時生效，不影響其他元素 */
:target { scroll-margin-top: calc(var(--header-h) + 12px); }
/* 區塊型錨點目標統一預留 header 高度（含空錨點 .anchor-offset 與既有區塊 id） */
section[id],
[id].section,
.anchor-offset[id],
#apply, #flow, #offer-posting, #merchant-application {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* ============================================================
   req-680：offer-gate 登入卡片「編排對齊」優化（僅 contact.html 使用 .offer-gate，
   不影響其他頁）。痛點：兩顆 CTA 文字長短差很多 + primary 字級/內距較大，並排時
   左右寬度不齊、視覺失衡；pending 提示框寬度又與按鈕列不一致。
   收斂方式：CTA 改為等寬置中縱向排列、字級統一成一對，pending 對齊同一欄寬，
   讓整張卡片由上到下成一條乾淨對齊的中軸（清爽、舒適、簡潔）。
   ============================================================ */
.offer-gate__actions {
  flex-direction: column;
  align-items: stretch;
  max-width: 360px;
  margin-inline: auto;
  gap: .7rem;
}
/* 兩顆按鈕等寬、字級/內距統一成一對（覆寫 primary 較大的字級與內距） */
.offer-gate__actions .btn {
  width: 100%;
  justify-content: center;
  font-size: clamp(1rem, .3vw + .94rem, 1.08rem);
  padding: .7em 1.4em;
}
/* pending 提示框對齊同一欄寬，與按鈕左右邊對齊 */
.offer-gate__pending {
  max-width: 360px;
}