/* ============================================================
   楓妍間 FENG YAN JIAN — 共用樣式
   色彩、字體與間距皆依《暖色調動態露營車租借網站開發文件》v0.1
   ============================================================ */

:root {
  /* 色彩 */
  --paper: #F6F0E6;      /* 奶油紙色：主背景 */
  --card: #FFFDF8;       /* 米杏白：卡片底色 */
  --clay: #C9794D;       /* 陶土橘：主要 CTA */
  --clay-deep: #B0673E;
  --caramel: #8A553D;    /* 焦糖棕：標題與深色區塊 */
  --cocoa: #2E2824;      /* 可可黑：內文 */
  --sage: #8C9A7B;       /* 鼠尾草綠：自然標籤 */
  --mist: #D9D2C7;       /* 霧灰：邊框、分隔線 */
  --cocoa-60: rgba(46, 40, 36, 0.62);
  --cocoa-40: rgba(46, 40, 36, 0.4);

  /* 字體 */
  --font-display: "Noto Serif TC", "Songti TC", "PingFang TC", "Microsoft JhengHei", serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

  /* 形狀與陰影 */
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --shadow-soft: 0 22px 48px -30px rgba(46, 40, 36, 0.55);
  --shadow-card: 0 14px 30px -22px rgba(46, 40, 36, 0.5);

  /* 版面 */
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 9vw, 160px);
  --header-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--cocoa);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--caramel);
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 0.6em;
  letter-spacing: 0.02em;
}
p { margin: 0 0 1.2em; }
ul { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--card);
  color: var(--caramel);
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

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

/* ---------- 版面容器 ---------- */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 760px); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--paper { background: var(--paper); }
.section--card { background: var(--card); }
.section--sage { background: rgba(140, 154, 123, 0.14); }

/* ---------- 文字元件 ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 14px;
  font-weight: 600;
}
.h-display {
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.28;
  margin-bottom: 0.5em;
}
.h-section {
  font-size: clamp(26px, 3.4vw, 42px);
  margin-bottom: 0.6em;
}
.lede {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--cocoa-60);
  max-width: 58ch;
}
.muted { color: var(--cocoa-60); }
.rule {
  border: 0;
  border-top: 1px solid var(--mist);
  margin: clamp(40px, 6vw, 72px) 0;
}

/* 待確認標記：品牌方尚未提供正式資料的欄位 */
.pending {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--caramel);
  background: rgba(201, 121, 77, 0.12);
  border: 1px dashed rgba(201, 121, 77, 0.55);
  border-radius: 999px;
  padding: 2px 12px;
  line-height: 1.7;
  vertical-align: middle;
}

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.btn .arrow { transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary { background: var(--clay); color: #FFF9F2; }
.btn--primary:hover { background: var(--clay-deep); }
.btn--ghost {
  background: transparent;
  color: var(--caramel);
  border-color: var(--caramel);
}
.btn--ghost:hover { background: rgba(138, 85, 61, 0.09); }
.btn--light {
  background: rgba(255, 253, 248, 0.92);
  color: var(--caramel);
}
.btn--light:hover { background: #fff; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--clay);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(201, 121, 77, 0.4);
  padding-bottom: 2px;
}
.text-link:hover { border-bottom-color: var(--clay); }
.text-link .arrow { transition: transform 0.25s ease; }
.text-link:hover .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(46, 40, 36, 0.34), rgba(46, 40, 36, 0));
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.site-header.is-scrolled {
  background: rgba(246, 240, 230, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--mist);
}
.site-header.is-scrolled::after { opacity: 0; }
/* 非首頁沒有滿版 Hero，直接使用實色底 */
.site-header.is-solid {
  background: rgba(246, 240, 230, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--mist);
}
.site-header.is-solid::after { opacity: 0; }

.header-inner {
  width: min(100% - var(--gutter) * 2, 1360px);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  transition: min-height 0.3s ease;
}
.site-header.is-scrolled .header-inner { min-height: 62px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #FFF9F2;
  margin-right: auto;
}
.brand__mark {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: var(--card);
}
.brand__name {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.site-header.is-scrolled .brand,
.site-header.is-solid .brand { color: var(--caramel); }
.site-header.is-scrolled .brand__mark,
.site-header.is-solid .brand__mark { border-color: var(--mist); }

.nav__list { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nav__link {
  color: #FFF9F2;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.06em;
  padding: 8px 2px;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-header.is-scrolled .nav__link,
.site-header.is-solid .nav__link { color: var(--cocoa); }
.nav__link[aria-current="page"] { font-weight: 600; }

.header-cta { flex-shrink: 0; }

/* ---------- 語言切換 ---------- */
.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 13.5px;
  letter-spacing: 0.06em;
}
.lang__btn {
  background: none;
  border: 0;
  padding: 4px 2px;
  font: inherit;
  color: var(--cocoa-40);
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}
.lang__btn:hover { color: var(--clay-deep); }
.lang__btn.is-on { color: var(--caramel); font-weight: 500; }
.lang__sep { color: var(--mist); }

/* 手機把語言鈕收進抽屜旁邊，才不會跟漢堡鈕擠在一起 */
@media (max-width: 900px) {
  .lang { margin-left: auto; }
}

/* 只在英文模式出現的區塊（例如租賃契約的英文聲明）。
   預設藏起來，中文讀者不會看到多餘的英文。 */
.en-only { display: none; }
html.is-en .en-only { display: block; }

/* 日曆選好日期後的確認句。空字串時不佔位置，才不會留一條空白。 */
.vcal__filled:empty { display: none; }
.vcal__filled {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-sm, 10px);
  background: rgba(201, 121, 77, 0.10);
  color: var(--caramel);
  font-size: 15px;
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 16px;
  color: #FFF9F2;
  cursor: pointer;
}
.site-header.is-scrolled .nav-toggle,
.site-header.is-solid .nav-toggle { color: var(--caramel); }

/* 抽屜選單 */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr min(88%, 380px);
}
.drawer[hidden] { display: none; }
.drawer__scrim { background: rgba(46, 40, 36, 0.42); border: 0; cursor: pointer; }
.drawer__panel {
  background: var(--card);
  padding: 24px var(--gutter) 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.drawer__close {
  background: transparent;
  border: 1px solid var(--mist);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
}
.drawer__link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--mist);
  text-decoration: none;
  font-size: 18px;
  font-family: var(--font-display);
  color: var(--caramel);
}
.drawer__link[aria-current="page"] { color: var(--clay); }
.drawer .btn { margin-top: 22px; justify-content: center; }

/* ---------- 首頁 Hero 旋轉木馬 ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--cocoa);
}
.hero__viewport { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }
.hero__viewport.is-dragging { cursor: grabbing; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* 照片停留 2 秒，淡出太久會讓畫面幾乎一直在交疊 */
  transition: opacity 350ms ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.06);
  /* 放大過程要在停留時間內走完，否則只看得到開頭一小段 */
  transition: transform 2.5s linear;
}
.hero__slide.is-active img { transform: scale(1); }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(30, 24, 20, 0.78) 0%, rgba(30, 24, 20, 0.28) 42%, rgba(30, 24, 20, 0.12) 70%),
    linear-gradient(to right, rgba(30, 24, 20, 0.5), rgba(30, 24, 20, 0) 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  padding-block: clamp(96px, 12vh, 140px) clamp(28px, 5vh, 56px);
  color: #FFF7EC;
}
.hero__eyebrow { color: rgba(255, 247, 236, 0.78); }
.hero__title {
  font-family: var(--font-display);
  color: #FFF7EC;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.32;
  max-width: 16ch;
  margin: 0 0 18px;
  text-shadow: 0 2px 26px rgba(20, 14, 10, 0.35);
}
.hero__sub {
  color: rgba(255, 247, 236, 0.86);
  max-width: 42ch;
  margin-bottom: 26px;
}
.hero__caption {
  margin: 26px 0 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(255, 247, 236, 0.78);
  border-left: 2px solid var(--clay);
  padding-left: 12px;
  min-height: 1.6em;
}
.hero__controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.hero__btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 247, 236, 0.5);
  background: rgba(30, 24, 20, 0.28);
  color: #FFF7EC;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.25s ease;
}
.hero__btn:hover { background: rgba(30, 24, 20, 0.55); }
.hero__dots { display: flex; gap: 10px; margin-inline: 6px; }
.hero__dot {
  width: 30px; height: 20px;
  padding: 8px 0 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.hero__dot span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 247, 236, 0.42);
  transition: background-color 0.25s ease;
}
.hero__dot[aria-current="true"] span { background: var(--clay); }
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 34px;
  z-index: 3;
  color: rgba(255, 247, 236, 0.8);
  font-size: 13px;
  letter-spacing: 0.24em;
  writing-mode: vertical-rl;
  text-decoration: none;
}

/* ---------- 分頁頁首 ---------- */
.page-head {
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px));
  padding-bottom: clamp(36px, 5vw, 64px);
}
.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--cocoa-60);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.breadcrumb a { text-decoration: none; border-bottom: 1px solid var(--mist); }
.breadcrumb a:hover { border-bottom-color: var(--caramel); }

/* ---------------------------------------------------------------
   內頁主視覺

   原本是滿版寬橫幅 + object-fit: cover。問題是照片是 3:2，
   橫幅在寬螢幕上會變成 3:1，等於一半的照片被裁掉；
   story.php 用直式照片時更慘，只看得到 22%。

   改成左文字右圖：照片放進 3:2 的容器，比例跟原圖一致，
   幾乎不裁切。手機上改為上下堆疊，照片一樣完整。
   --------------------------------------------------------------- */
.page-hero {
  background: var(--paper);
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  padding-block: clamp(96px, 12vh, 140px) clamp(36px, 5vw, 64px);
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}
@media (min-width: 900px) {
  .page-hero { grid-template-columns: 1fr 1.12fr; }
}

/* 深色漸層是給滿版底圖用的，分欄版型不需要 */
.page-hero::before { content: none; }

.page-hero picture {
  display: block;
  order: 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.page-hero img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;      /* 與照片原始比例相同，幾乎不裁 */
  object-fit: cover;
  object-position: center;
}

.page-hero__inner {
  position: static;
  order: 1;
  z-index: auto;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--cocoa);
}
.page-hero__inner h1 {
  color: var(--caramel);
  margin-bottom: 14px;
  font-size: clamp(30px, 4vw, 50px);
  text-shadow: none;
  text-wrap: balance;
}
.page-hero__inner .breadcrumb { color: var(--cocoa-60); }
.page-hero__inner .breadcrumb a { border-bottom-color: rgba(46, 40, 36, 0.28); }
.page-hero__inner p { color: var(--cocoa-60); max-width: 42ch; margin: 0; }

/* ---------- 通用格線 ---------- */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right .split__media { order: 2; }
}
.split__media img { border-radius: var(--r-lg); box-shadow: var(--shadow-soft); }

.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
@media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-card);
}
.card h3 { font-size: 21px; margin-bottom: 0.5em; }
.card p:last-child { margin-bottom: 0; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.tag {
  display: inline-block;
  border: 1px solid var(--sage);
  color: var(--caramel);
  background: rgba(140, 154, 123, 0.12);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 14px;
}

/* 圖片卡片 hover */
.photo-card {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--mist);
  text-decoration: none;
  color: inherit;
}
.photo-card__img { overflow: hidden; aspect-ratio: 4 / 3; }
.photo-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.photo-card:hover .photo-card__img img { transform: scale(1.03); }
.photo-card__body { padding: 20px 22px 24px; }
.photo-card__body h3 { font-size: 19px; margin-bottom: 6px; }
.photo-card__body p { font-size: 15px; color: var(--cocoa-60); margin: 0; }

/* ---------- 情境卡（首頁 H-04 / 車內生活） ---------- */
.scenes { display: grid; gap: clamp(24px, 3vw, 48px); }
@media (min-width: 960px) { .scenes { grid-template-columns: 1.15fr 0.85fr; align-items: center; } }
.scenes__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.scene-list { display: grid; gap: 14px; }
.scene {
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  display: grid;
  gap: 4px;
}
.scene:hover { border-color: var(--clay); transform: translateY(-2px); }
.scene__no {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--sage);
}
.scene__title { font-family: var(--font-display); font-size: 20px; color: var(--caramel); }
.scene__text { font-size: 15px; color: var(--cocoa-60); }

/* ---------- 流程步驟 ---------- */
.steps { counter-reset: step; display: grid; gap: 14px; }
.step {
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}
.step > summary {
  cursor: pointer;
  list-style: none;
  padding: 22px clamp(20px, 3vw, 30px);
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--caramel);
}
.step > summary::-webkit-details-marker { display: none; }
.step > summary::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--clay);
  flex-shrink: 0;
}
.step > summary::after {
  content: "＋";
  margin-left: auto;
  color: var(--cocoa-40);
  font-size: 18px;
}
.step[open] > summary::after { content: "－"; }
.step__body {
  padding: 0 clamp(20px, 3vw, 30px) 26px clamp(52px, 6vw, 70px);
  color: var(--cocoa-60);
  font-size: 16px;
}
.step__body p:last-child { margin-bottom: 0; }

/* ---------- 方案卡 ---------- */
.plan {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  padding: 30px;
  display: grid;
  gap: 8px;
  align-content: start;
}
.plan--focus { border-color: var(--clay); box-shadow: var(--shadow-card); }
.plan__name { font-family: var(--font-display); font-size: 21px; color: var(--caramel); }
.plan__price {
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--cocoa);
  letter-spacing: 0.02em;
}
.plan__unit { font-size: 14px; color: var(--cocoa-60); }
.plan__note { font-size: 14px; color: var(--cocoa-60); margin: 6px 0 0; }

/* 原價：劃掉放在現價上面。用 <s> 語意標籤，讀螢幕軟體才知道這是舊價格 */
.plan__was {
  font-size: 15px;
  color: var(--cocoa-40);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* 折扣標籤，只有真的有折扣的方案才放 */
.plan__save {
  justify-self: start;
  font-size: 13px;
  padding: 2px 11px;
  border-radius: 999px;
  background: rgba(201, 121, 77, 0.12);
  color: var(--clay-deep);
}

.facts { border-top: 1px solid var(--mist); }
.facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--mist);
}
.facts dt { font-weight: 600; min-width: 8em; margin: 0; color: var(--caramel); }
.facts dd { margin: 0; color: var(--cocoa-60); }

/* ---------- 相簿 ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.filter {
  border: 1px solid var(--mist);
  background: var(--card);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.filter[aria-pressed="true"] { background: var(--caramel); border-color: var(--caramel); color: #FFF7EC; }

.gallery { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.gallery__item { margin: 0; transition: opacity 0.35s ease; }
.gallery__item[hidden] { display: none; }
.gallery__item--wide { grid-column: span 2; }
.gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  cursor: zoom-in;
}
.gallery__btn img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery__item--tall .gallery__btn img { aspect-ratio: 3 / 4; }
.gallery__btn:hover img { transform: scale(1.03); }
.gallery__item figcaption { font-size: 14px; color: var(--cocoa-60); padding: 10px 4px 0; }

/* ---------- 燈箱 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(30, 24, 20, 0.88);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox[hidden] { display: none; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; }
.lightbox__stage img {
  max-width: 100%;
  max-height: 72vh;
  border-radius: var(--r-md);
  object-fit: contain;
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 18px;
  color: #FFF7EC;
}
.lightbox__caption { font-size: 15px; text-align: center; max-width: 46ch; }
.lightbox__btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 247, 236, 0.5);
  background: transparent;
  color: #FFF7EC;
  cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 247, 236, 0.15); }
.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
}

/* ---------- FAQ ---------- */
.faq-search {
  display: grid;
  gap: 8px;
  margin-bottom: 26px;
  max-width: 520px;
}
.faq-list { display: grid; gap: 12px; }
.faq {
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--card);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.faq[hidden] { display: none; }
.faq > summary {
  cursor: pointer;
  list-style: none;
  padding: 18px clamp(18px, 3vw, 26px);
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--caramel);
  display: flex;
  gap: 14px;
  align-items: center;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "＋"; margin-left: auto; color: var(--cocoa-40); }
.faq[open] > summary::after { content: "－"; }
.faq__body { padding: 0 clamp(18px, 3vw, 26px) 22px; color: var(--cocoa-60); }
.faq__body p:last-child { margin-bottom: 0; }
.faq-empty {
  border: 1px dashed var(--mist);
  border-radius: var(--r-md);
  padding: 26px;
  text-align: center;
  color: var(--cocoa-60);
}
.faq-empty[hidden] { display: none; }

/* ---------- 表單 ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field > label { font-size: 15px; font-weight: 600; color: var(--caramel); }
.field .hint { font-size: 13px; color: var(--cocoa-60); }
.field input,
.field textarea,
.field select,
.faq-search input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--mist);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--cocoa);
  font: inherit;
  font-size: 16px;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus { border-color: var(--clay); }
.field .error {
  font-size: 14px;
  color: #A33F2B;
  min-height: 0;
}
.field .error:empty { display: none; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #A33F2B; background: rgba(163, 63, 43, 0.05); }
.field--inline { display: flex; align-items: flex-start; gap: 12px; }
.field--inline input { width: 22px; height: 22px; min-height: 0; margin-top: 4px; }
.field--inline label { font-weight: 400; color: var(--cocoa); }
@media (min-width: 700px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } }

.form__note { font-size: 14px; color: var(--cocoa-60); margin: 0; }
.form-status {
  border-radius: var(--r-md);
  padding: 22px 24px;
  border: 1px solid var(--sage);
  background: rgba(140, 154, 123, 0.14);
}
.form-status[hidden] { display: none; }
.form-status h3 { margin-bottom: 8px; font-size: 20px; }

.contact-panel {
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 34px);
  align-content: start;
  display: grid;
  gap: 18px;
}
.contact-panel dl { display: grid; gap: 14px; margin: 0; }
.contact-panel dt { font-size: 13px; letter-spacing: 0.14em; color: var(--sage); }
.contact-panel dd { margin: 4px 0 0; }

/* ---------- Footer ---------- */
.footer-cta {
  background: var(--caramel);
  color: #FFF3E6;
  text-align: center;
  padding-block: clamp(56px, 8vw, 110px);
}
.footer-cta h2 { color: #FFF3E6; font-size: clamp(26px, 3.4vw, 40px); }
.footer-cta p { color: rgba(255, 243, 230, 0.82); max-width: 46ch; margin-inline: auto; }
.footer-cta .btn-row { justify-content: center; margin-top: 26px; }

.site-footer {
  background: #241F1B;
  color: rgba(255, 243, 230, 0.76);
  padding-block: clamp(40px, 5vw, 68px);
  font-size: 15px;
}
.site-footer a { color: rgba(255, 243, 230, 0.9); text-decoration: none; border-bottom: 1px solid rgba(255, 243, 230, 0.28); }
.site-footer a:hover { border-bottom-color: rgba(255, 243, 230, 0.9); }
.footer-grid { display: grid; gap: 30px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h3 {
  color: #FFF3E6;
  font-size: 14px;
  letter-spacing: 0.2em;
  font-family: var(--font-body);
  margin-bottom: 14px;
}
.site-footer li { padding: 5px 0; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 46px; height: 46px; border-radius: 50%; }
.footer-brand span { font-family: var(--font-display); font-size: 20px; color: #FFF3E6; letter-spacing: 0.14em; }
.footer-legal {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 243, 230, 0.16);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* ---------- 手機固定 CTA ---------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(246, 240, 230, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--mist);
  display: none;
}
.mobile-cta .btn { width: 100%; justify-content: center; min-height: 52px; }
@media (max-width: 767px) {
  .mobile-cta { display: block; }
  body.has-mobile-cta { padding-bottom: 78px; }
}

/* ---------- 滾動進場 ---------- */
.js .reveal {
  opacity: 0;
  /* 同時往上移一點、稍微縮小，出現時才有「跳出來」的感覺，
     只做淡入會顯得平板 */
  transform: translateY(28px) scale(0.97);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  /* 位移用有一點回彈的曲線（結尾略微過衝），淡入則維持線性收尾，
     兩者分開設定，畫面才不會糊成一團 */
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.16, 1.02, 0.3, 1.12);
}

/* 同一區塊裡的子元素依序出現，比整塊一起跳出來自然 */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.16, 1.02, 0.3, 1.12);
}
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }

/* 從側邊滑入，用在左右分欄的版面 */
.js .reveal--left  { transform: translateX(-32px); }
.js .reveal--right { transform: translateX(32px); }
/* 水平位移只在桌面版使用，避免手機出現水平捲動 */
@media (min-width: 900px) {
  .js .reveal--left { transform: translateX(-24px); }
  .js .reveal--right { transform: translateX(24px); }
}

/* ---------- 響應式 ---------- */
@media (max-width: 1023px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.75; }
  .hero { min-height: 92svh; }
  .hero__slide img { object-position: center 50%; }
  .hero__scroll { display: none; }
  .gallery__item--wide { grid-column: span 2; }
}

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal,
  .js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .hero__slide img { transform: none; }
}

/* ---------------------------------------------------------------
   表單送出錯誤
   --------------------------------------------------------------- */
.form-send-error[hidden] { display: none; }
.form-send-error {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(163, 63, 43, 0.45);
  background: rgba(163, 63, 43, 0.07);
  color: #A33F2B;
  font-size: 15px;
  line-height: 1.75;
}
.form-send-error:focus-visible { outline: 2px solid #A33F2B; outline-offset: 3px; }

/* ---------------------------------------------------------------
   提示框
   --------------------------------------------------------------- */
.notice {
  border-radius: var(--r-md);
  border: 1px solid var(--mist);
  background: var(--card);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}
.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice__title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--caramel);
  margin: 0 0 6px;
}
.notice--sage { border-color: var(--sage); background: rgba(140, 154, 123, 0.12); }

/* ---------------------------------------------------------------
   契約條文頁
   --------------------------------------------------------------- */
.legal-layout { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .legal-layout { grid-template-columns: 260px minmax(0, 1fr); } }

.legal-toc { position: sticky; top: calc(var(--header-h) + 20px); font-size: 15px; }
.legal-toc h2 { font-family: var(--font-display); font-size: 17px; color: var(--caramel); margin: 0 0 10px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.legal-toc li { margin: 0; }
.legal-toc a {
  display: block;
  padding: 5px 10px;
  border-left: 2px solid var(--mist);
  color: var(--cocoa-60);
  text-decoration: none;
  line-height: 1.6;
}
.legal-toc a:hover { color: var(--clay); border-left-color: var(--clay); background: rgba(201, 121, 77, 0.06); }
@media (max-width: 959px) { .legal-toc { position: static; max-height: none; } }

.legal__art { scroll-margin-top: calc(var(--header-h) + 24px); padding: 22px 0; border-top: 1px solid var(--mist); }
.legal__art:first-of-type { border-top: 0; padding-top: 0; }
.legal__art h3 { font-family: var(--font-display); font-size: 20px; color: var(--caramel); margin: 0 0 10px; }
.legal__art :is(p, li) { line-height: 1.95; }
.legal__art ol, .legal__art ul { padding-left: 1.35em; margin: 8px 0; }
.legal__art li { margin-bottom: 6px; }
.legal__art .anchor {
  font-size: 13px; margin-left: 8px; color: var(--cocoa-40);
  text-decoration: none; opacity: 0; transition: opacity 0.15s;
}
.legal__art h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

.legal-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: 14px; color: var(--cocoa-60);
  padding: 14px 0; border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist);
  margin-bottom: 26px;
}
.blank { color: var(--cocoa-40); letter-spacing: 0.12em; }

/* ---------------------------------------------------------------
   表格
   --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
.data-table caption { text-align: left; font-size: 14px; color: var(--cocoa-60); padding-bottom: 8px; }
.data-table th, .data-table td { padding: 11px 14px; border-bottom: 1px solid var(--mist); text-align: left; }
.data-table thead th { font-size: 13px; letter-spacing: 0.06em; color: var(--caramel); background: rgba(201, 121, 77, 0.07); }
.data-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.data-table tbody.addon-group > tr:first-child > th {
  background: rgba(140, 154, 123, 0.18);
  color: var(--caramel);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------
   加購裝備勾選（預約表單內）
   --------------------------------------------------------------- */
.addons { border: 1px solid var(--mist); border-radius: var(--r-sm); background: var(--card); }
.addons__summary {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  align-items: baseline; justify-content: space-between;
  padding: 13px 16px; cursor: pointer; list-style: none;
  font-weight: 500;
}
.addons__summary::-webkit-details-marker { display: none; }
.addons__summary::after {
  content: '＋'; order: 3; color: var(--clay); font-size: 18px; line-height: 1;
}
.addons[open] .addons__summary::after { content: '－'; }
.addons__summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.addons__opt { color: var(--cocoa-40); font-weight: 400; font-size: 14px; }
.addons__tally {
  font-size: 13.5px; color: var(--cocoa-60);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.addons__tally.is-on { color: var(--clay-deep); font-weight: 500; }
.addons__body { padding: 0 16px 16px; border-top: 1px solid var(--mist); }
.addons__group {
  font-size: 12px; letter-spacing: 0.08em; color: var(--caramel);
  margin: 18px 0 6px; font-weight: 700;
}
.addons__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.addon {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 8px;
}
.addon.is-on { background: rgba(140, 154, 123, 0.13); }
.addon__check { width: 18px; height: 18px; accent-color: var(--sage); cursor: pointer; }
.addon__label { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.addon__name { font-size: 15px; }
.addon__note { font-size: 12.5px; color: var(--cocoa-40); }
.addon__qty select { font-size: 13px; padding: 3px 6px; border: 1px solid var(--mist); border-radius: 6px; background: var(--paper); }
.addon__qty select:disabled { opacity: 0.4; }
.addon__price { font-size: 14px; color: var(--cocoa-60); font-variant-numeric: tabular-nums; white-space: nowrap; }
.addons__foot {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--mist);
  font-size: 15px;
}
.addons__foot strong { color: var(--clay-deep); font-variant-numeric: tabular-nums; }
.addons__footnote { font-size: 12.5px; color: var(--cocoa-40); margin-left: auto; }
@media (max-width: 520px) {
  .addon { grid-template-columns: auto 1fr auto; row-gap: 2px; }
  .addon__qty { grid-column: 3; }
  .addon__price { grid-column: 2 / -1; font-size: 13px; }
}

/* ---------------------------------------------------------------
   可租日曆
   --------------------------------------------------------------- */
.cal-embed {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--mist);
  background: var(--card);
}
.cal-embed iframe { display: block; width: 100%; height: min(72vh, 620px); border: 0; }
.cal-placeholder {
  display: grid; place-items: center; text-align: center;
  min-height: 300px; padding: 40px 24px; gap: 10px;
  background: repeating-linear-gradient(45deg, rgba(217, 210, 199, 0.22) 0 12px, transparent 12px 24px);
}
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--cocoa-60); margin-top: 14px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }

/* ---------------------------------------------------------------
   顧客端可租日曆
   --------------------------------------------------------------- */
.vcal { border-radius: var(--r-md); border: 1px solid var(--mist); background: var(--card); padding: clamp(16px, 3vw, 26px); }
.vcal.is-loading { opacity: .55; }

.vcal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.vcal__title { font-family: var(--font-display); font-size: clamp(19px, 2.6vw, 23px); color: var(--caramel); margin: 0; }
.vcal__nav { display: flex; gap: 8px; }
.vcal__btn {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--mist); background: transparent; color: var(--cocoa);
}
.vcal__btn:hover:not(:disabled) { border-color: var(--clay); color: var(--clay-deep); }
.vcal__btn:disabled { opacity: .38; cursor: default; }

.vcal__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.vcal__table th {
  font-size: 13px; font-weight: 500; color: var(--cocoa-60);
  padding: 0 0 8px; text-align: center;
}
.vcal__table th abbr { text-decoration: none; }

.vcal__d, .vcal__out {
  height: clamp(40px, 8vw, 58px);
  border: 1px solid var(--mist);
  text-align: center; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.vcal__out { border-color: rgba(217, 210, 199, .45); background: rgba(46, 40, 36, .02); }
.vcal__n { font-size: 15px; }

.vcal__d--free { background: var(--card); }
.vcal__d--booked { background: rgba(201, 121, 77, .30); border-color: var(--clay); color: var(--caramel); font-weight: 500; }
.vcal__d--held { background: rgba(201, 121, 77, .12); }
.vcal__d--past { background: rgba(46, 40, 36, .045); color: var(--cocoa-40); }
.vcal__today .vcal__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cocoa); color: var(--paper);
}

.vcal__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--cocoa-60); margin-top: 16px; }
.vcal__legend span { display: inline-flex; align-items: center; gap: 8px; }
.vcal__legend i { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--mist); display: inline-block; }

/* ---------------------------------------------------------------
   首頁輪播的影片投影片
   影片是 720×1280 直式，hero 是滿版橫向，比例差很多：
   手機（直式視窗）用 cover 剛好填滿；桌機若也用 cover，
   1920×900 的螢幕只會看到影片中間約 26% 的高度。
   因此寬螢幕改用 contain，兩側露出 hero 既有的深色底，
   看起來像刻意的黑邊而不是被裁壞。
   --------------------------------------------------------------- */
.hero__slide--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--cocoa);
}

@media (min-aspect-ratio: 1/1) {
  .hero__slide--video video { object-fit: contain; }
}

/* 照片有緩慢放大的效果，影片不套用——再放大只會裁掉更多內容 */
.hero__slide--video video { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide--video video { transform: none; }
}

/* ---------------------------------------------------------------
   日曆上直接選日期預約
   --------------------------------------------------------------- */
.vcal__pick {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; padding: 0;
}
.vcal__pick:hover { background: rgba(140, 154, 123, 0.22); }
.vcal__pick:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }

.vcal__d.is-sel { background: var(--sage); color: #FFF8F0; }
.vcal__d.is-sel .vcal__pick:hover { background: rgba(255, 248, 240, 0.15); }
.vcal__d.is-sel-start, .vcal__d.is-sel-end { background: #6F7F5F; color: #FFF8F0; font-weight: 500; }

.vcal__book {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--mist);
}
.vcal__sum {
  font-size: 17px;
  margin: 0 0 16px;
  color: var(--caramel);
  font-family: var(--font-display);
}
.vcal__sum strong { font-family: var(--font-body); font-weight: 600; }
.vcal__hint { font-size: 14px; color: var(--cocoa-60); font-family: var(--font-body); }
.vcal__form .field { margin-bottom: 14px; }
.vcal__form textarea { min-height: 62px; }

/* ---------------------------------------------------------------
   Instagram 連結（藍底字）
   --------------------------------------------------------------- */
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  border-radius: 999px;
  background: #1D4ED8;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.7;
  transition: background 0.15s;
}
.ig-link:hover, .ig-link:focus-visible { background: #1E40AF; color: #FFFFFF; }
.ig-link:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }
.ig-link svg { width: 16px; height: 16px; flex: none; fill: currentColor; }

/* ---------------------------------------------------------------
   LINE 官方帳號連結
   --------------------------------------------------------------- */
.line-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  border-radius: 999px;
  background: #06C755;          /* LINE 品牌綠 */
  color: #FFFFFF;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.7;
  transition: background 0.15s;
}
.line-link:hover, .line-link:focus-visible { background: #05A948; color: #FFFFFF; }
.line-link:focus-visible { outline: 2px solid #7BE0A6; outline-offset: 2px; }
.line-link svg { width: 17px; height: 17px; flex: none; fill: currentColor; }


/* ---------------------------------------------------------------
   列印樣式
   契約頁最需要——客人與律師會把它印出來，
   印出來就該是一份乾淨的合約，不要夾帶導覽列與按鈕。
   --------------------------------------------------------------- */
@media print {
  .site-header, .drawer, .mobile-cta, .footer-cta, .fab-dial, .amb-btn,
  .skip-link, .breadcrumb, .btn-row, .vcal, .cal-embed,
  .hero__controls, .hero__dots, .hero__scroll { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.6; }
  .section { padding-block: 0 !important; }
  .wrap, .wrap--narrow { width: 100% !important; max-width: none !important; }

  /* 條文目錄在紙上沒有用，改成單欄 */
  .legal-toc { display: none !important; }
  .legal-layout { display: block !important; }

  /* 每條條文不要被切到跨頁 */
  .legal__art { break-inside: avoid; page-break-inside: avoid; border-top: 1px solid #999; }
  .legal__art h3 { break-after: avoid; page-break-after: avoid; color: #000; }
  .data-table { break-inside: avoid; page-break-inside: avoid; }
  .data-table th, .data-table td { border-color: #999 !important; }
  .data-table thead th { background: #eee !important; color: #000 !important; }

  h1, h2, h3 { color: #000 !important; }
  .anchor { display: none !important; }
  .blank { color: #000; }
  .pending { border-color: #666 !important; color: #000 !important; background: none !important; }
  .notice { border: 1px solid #999 !important; background: none !important; }

  /* 印出來看不到連結目的地，補在後面 */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  main a[href^="#"]::after { content: ""; }

  /* 頁尾保留最基本的識別資訊 */
  .site-footer { border-top: 1px solid #999; padding-top: 8pt; font-size: 9pt; }
  .site-footer .footer-grid > div:first-child p { display: none; }

  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------
   頁面轉場（View Transitions API）
   支援的瀏覽器會在換頁時淡入淡出，不支援的完全忽略、畫面照舊。
   --------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 320ms cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Header 與右下按鈕在換頁時不要跟著淡出，那樣會閃 */
.site-header { view-transition-name: site-header; }
.fab-dial    { view-transition-name: fab-dial; }
.amb-btn     { view-transition-name: amb-btn; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------------
   磁性按鈕：只用在主要 CTA，滑鼠靠近時輕微吸附
   位移量由 JS 寫進 --mx / --my
   --------------------------------------------------------------- */
.btn--magnetic {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              background-color 0.25s ease;
}
.btn--magnetic.is-pulling { transition: transform 90ms linear; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .btn--magnetic { transform: none !important; }
}

/* ---------------------------------------------------------------
   微互動
   --------------------------------------------------------------- */

/* 日曆：按下去有實體的手感 */
.vcal__pick { transition: background-color 140ms ease, transform 120ms ease; }
.vcal__pick:active { transform: scale(0.86); }
.vcal__d.is-sel-start .vcal__n,
.vcal__d.is-sel-end .vcal__n { animation: mi-pop 320ms cubic-bezier(0.16, 1.02, 0.3, 1.15); }
@keyframes mi-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* 選好整段區間時，摘要輕輕彈一下告訴你「好了」 */
.vcal__sum.is-ready { animation: mi-nudge 420ms cubic-bezier(0.16, 1.02, 0.3, 1.12); }
@keyframes mi-nudge {
  0%   { transform: translateY(6px); opacity: .4; }
  100% { transform: none; opacity: 1; }
}

/* 送出成功：打勾線條現場畫出來 */
.mi-check { width: 46px; height: 46px; display: block; margin: 0 auto 10px; }
.mi-check circle, .mi-check path {
  fill: none; stroke: var(--sage); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.mi-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: mi-draw 620ms ease forwards; }
.mi-check path   { stroke-dasharray: 36;  stroke-dashoffset: 36;  animation: mi-draw 320ms ease 480ms forwards; }
@keyframes mi-draw { to { stroke-dashoffset: 0; } }

/* FAQ 展開時內容滑入，不要硬跳出來 */
.faq[open] .faq__body { animation: mi-slide 300ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes mi-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* 相簿篩選：留下的照片重新排好時淡回來 */
.gallery__item { transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.gallery__item.is-filtering { opacity: 0; transform: scale(0.94); }

/* 按鈕按下的實體回饋 */
.btn:active:not([disabled]) { transform: scale(0.97); }
.filter:active { transform: scale(0.94); }

@media (prefers-reduced-motion: reduce) {
  .vcal__pick, .vcal__d.is-sel-start .vcal__n, .vcal__d.is-sel-end .vcal__n,
  .vcal__sum.is-ready, .faq[open] .faq__body, .gallery__item,
  .btn:active, .filter:active { animation: none !important; transition: none !important; transform: none !important; }
  .mi-check circle, .mi-check path { animation: none; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------
   LINE 官方帳號卡片
   讓客人在點下去之前就看得到要加的是誰。

   斷點用 container query 而不是 @media：這張卡可能被放在窄側欄，
   看視窗寬度會誤判成「很寬」，結果在 450px 的欄位裡硬排三欄而擠爆。
   --------------------------------------------------------------- */
.line-card {
  container-type: inline-size;
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--mist);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.line-card__in {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar body"
    "btn    btn"
    "hint   hint";
  gap: 4px 16px;
  align-items: center;
}
@container (min-width: 430px) {
  .line-card__in {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "avatar body btn"
      "hint   hint hint";
    gap: 10px 18px;
  }
  .line-card__btn { margin-top: 0; }
}

.line-card__avatar {
  grid-area: avatar;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 1px solid var(--mist);
  object-fit: cover;
}
.line-card__body { grid-area: body; min-width: 0; }
.line-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--caramel);
  margin: 0;
  line-height: 1.45;
  text-wrap: balance;
}
.line-card__id {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 13.5px;
  color: var(--cocoa-60);
  margin: 2px 0 0;
}
.line-card__note {
  font-size: 14px;
  color: var(--cocoa-60);
  margin: 6px 0 0;
  line-height: 1.65;
}

.line-card__btn {
  grid-area: btn;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 22px;
  border-radius: 999px;
  background: #06C755;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s;
}
.line-card__btn:hover, .line-card__btn:focus-visible { background: #05A948; color: #FFFFFF; }
.line-card__btn:active { transform: scale(0.97); }
.line-card__btn:focus-visible { outline: 2px solid #7BE0A6; outline-offset: 3px; }
.line-card__btn svg { width: 20px; height: 20px; fill: currentColor; }

.line-card__hint {
  grid-area: hint;
  font-size: 13px;
  color: var(--cocoa-40);
  margin: 12px 0 0;
  line-height: 1.6;
}

/* 聯絡頁已經有完整的 LINE 卡片，右下角就不用再放一顆重複的 */
/* 聯絡頁已經有完整的 LINE 卡片，右下角的展開鈕就不用再出現 */
body.page-contact .fab-dial { display: none; }

@media (prefers-reduced-motion: reduce) {
  .line-card__btn { transition: none; }
  .line-card__btn:active { transform: none; }
}
}

/* ---------------------------------------------------------------
   品牌故事段落
   原本六段各佔一個滿版區塊，759 字攤成六頁太空；
   收成一個區塊內的連續敘事，密度才合理
   --------------------------------------------------------------- */
.story-beats {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
}
@media (min-width: 860px) {
  .story-beats { grid-template-columns: repeat(2, 1fr); }
}
.story-beat {
  padding-left: 18px;
  border-left: 2px solid var(--mist);
}
.story-beat .eyebrow { margin-bottom: 6px; }
.story-beat h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 23px);
  color: var(--caramel);
  margin: 0 0 10px;
  line-height: 1.45;
  text-wrap: balance;
}
.story-beat p {
  font-size: 16px;
  color: var(--cocoa-60);
  line-height: 1.9;
  margin: 0 0 0.9em;
}
.story-beat p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   契約條文搜尋
   6,000 多字只靠目錄不夠，要能直接找關鍵字
   --------------------------------------------------------------- */
.legal-search { margin: 0 0 26px; }
.legal-search label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--caramel);
  margin-bottom: 6px;
}
.legal-search input {
  width: 100%;
  max-width: 460px;
  padding: 11px 16px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--mist);
  border-radius: 999px;
  background: var(--card);
  color: inherit;
}
.legal-search input:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.legal-search__count {
  font-size: 14px;
  color: var(--cocoa-60);
  margin: 8px 0 0;
  min-height: 1.5em;
}
.legal__art[hidden] { display: none; }
.legal-toc li[hidden] { display: none; }
mark.legal-hit {
  background: rgba(201, 121, 77, 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ---------------------------------------------------------------
   品牌名的日文副標
   視覺上要低一階：小一點、細一點、淡一點，
   讓「楓妍間」仍然是主角，日文只是輔助讀音。
   --------------------------------------------------------------- */
.brand__jp {
  font-family: var(--font-body), "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 0.6em;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.7;
  white-space: nowrap;
}
/* 窄螢幕的頁首要塞下 logo、選單鈕與預約按鈕，日文先收起來 */
@media (max-width: 720px) {
  .site-header .brand__jp { display: none; }
}

/* ---------------------------------------------------------------
   窄螢幕的輪播控制列

   問題：圓點數量會隨投影片增加（目前 8 張），
   控制列總寬超過容器後，被 .hero 的 overflow:hidden 切掉，
   右邊的「下一張」與「播放」就消失了。

   解法不是把尺寸寫死（之後再加投影片又會壞），
   而是讓圓點區塊可以被壓縮：按鈕永遠優先保留。
   --------------------------------------------------------------- */
.hero__controls { flex-wrap: nowrap; }
.hero__btn { flex: none; }          /* 三顆按鈕不准被壓扁 */
.hero__dots {
  flex: 1 1 auto;
  min-width: 0;                     /* 沒有這行 flex 子元素不會真的縮小 */
  overflow: hidden;
}

@media (max-width: 720px) {
  /* 控制列右側留出浮動按鈕的空間，兩者才不會疊在一起 */
  .hero__controls { gap: 8px; padding-right: 62px; }
  .hero__btn { width: 40px; height: 40px; }
  .hero__dots { gap: 5px; margin-inline: 2px; }
  .hero__dot { width: 16px; }
}

/* ---------------------------------------------------------------
   右下角的聯絡展開鈕（speed dial）

   原本三顆按鈕並排在右下，但它們的重要性根本不同：
   LINE 是轉換動作、IG 是瀏覽、音樂只是網站小功能。
   並列會互相稀釋，而且三顆疊起來會蓋住輪播的控制列。

   改成：聯絡動作收在一顆裡點開，音樂移到左下。
   --------------------------------------------------------------- */
.fab-dial {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
body.has-mobile-cta .fab-dial { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

.fab-dial__trigger {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  background: var(--clay);
  color: #FFF8F0;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px -10px rgba(46, 40, 36, 0.55);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.fab-dial__trigger:hover { background: var(--clay-deep); }
.fab-dial__trigger:focus-visible { outline: 3px solid var(--caramel); outline-offset: 3px; }
.fab-dial__plus {
  width: 24px; height: 24px;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* 展開時 + 轉成 ×，狀態一眼看得出來 */
.fab-dial.is-open .fab-dial__plus { transform: rotate(45deg); }
.fab-dial.is-open .fab-dial__trigger { background: var(--caramel); }

.fab-dial__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.fab-dial__panel[hidden] { display: none; }

.fab-dial__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cocoa);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  animation: fab-in 0.26s cubic-bezier(0.16, 1.02, 0.3, 1.12) forwards;
}
/* 由下往上依序出現，比一起跳出來自然 */
.fab-dial__item:nth-last-child(1) { animation-delay: 0ms; }
.fab-dial__item:nth-last-child(2) { animation-delay: 55ms; }
@keyframes fab-in { to { opacity: 1; transform: none; } }

.fab-dial__text {
  background: var(--card);
  color: var(--cocoa);
  font-size: 14.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--mist);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.fab-dial__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  box-shadow: 0 10px 22px -12px rgba(46, 40, 36, 0.6);
}
.fab-dial__icon svg { width: 22px; height: 22px; fill: currentColor; }
.fab-dial__item--line .fab-dial__icon { background: #06C755; }
.fab-dial__item--ig   .fab-dial__icon { background: #1D4ED8; }
.fab-dial__item:hover .fab-dial__text { border-color: var(--clay); color: var(--clay-deep); }
.fab-dial__item:focus-visible .fab-dial__text { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ---------------------------------------------------------------
   左下角的音樂開關
   它是網站小功能，不該跟聯絡動作搶同一塊區域
   --------------------------------------------------------------- */
.amb-btn {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--mist);
  background: rgba(255, 253, 248, 0.94);
  color: var(--caramel);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(6px);
}
body.has-mobile-cta .amb-btn { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
.amb-btn:hover { border-color: var(--clay); color: var(--clay-deep); }
.amb-btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.amb-btn[hidden] { display: none; }

.amb-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.amb-eq i { width: 3px; height: 5px; border-radius: 1px; background: currentColor; display: block; }
.amb-btn.is-playing .amb-eq i { animation: amb-bounce 900ms ease-in-out infinite; }
.amb-btn.is-playing .amb-eq i:nth-child(2) { animation-delay: 150ms; }
.amb-btn.is-playing .amb-eq i:nth-child(3) { animation-delay: 300ms; }
@keyframes amb-bounce { 0%, 100% { height: 5px; } 50% { height: 14px; } }

/* 窄螢幕：音樂收成純圖示圓形，把空間讓給內容 */
@media (max-width: 720px) {
  .amb-btn { left: 12px; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; }
  .amb-btn__label {
    position: absolute !important;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .amb-eq { height: 16px; }
  .fab-dial { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .fab-dial__plus, .fab-dial__trigger { transition: none; }
  .fab-dial__item { animation: none; opacity: 1; transform: none; }
  .amb-btn.is-playing .amb-eq i { animation: none; height: 10px; }
}