:root {
  --bg: #f6f1e7;
  --card: #fffdf8;
  /* 卡片用微透明底，讓背後的金箔隱約透出來；彈窗與下拉選單仍用不透明的 --card */
  --card-veil: rgba(255, 253, 248, .84);
  --ink: #2b2118;
  --muted: #786a5a;   /* 對頁底需達 4.5:1，原本的 #7d6f5f 只有 4.33 */
  --line: #e2d6c2;
  --gold: #a8791f;
  --gold-soft: #f3e6c9;
  --red: #8f2f22;
  --err: #b3261e;
  --ok: #2e7d54;
  --radius: 14px;

  /* 標題用襯線體，帶出宮廟文書的莊重感；內文維持黑體以利閱讀 */
  --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;
  --gold-deep: #8a5f14;
  --red-deep: #6f1f14;
  /* 兩段式陰影：近距離的實邊 + 遠距離的柔影，比單層陰影有厚度 */
  --shadow-sm: 0 1px 2px rgba(70, 48, 24, .06), 0 3px 10px rgba(70, 48, 24, .045);
  --shadow-md: 0 2px 6px rgba(70, 48, 24, .08), 0 12px 30px rgba(70, 48, 24, .08);
  --shadow-lg: 0 6px 16px rgba(70, 48, 24, .12), 0 24px 56px rgba(70, 48, 24, .14);

  /* 以下為深色模式需要翻轉的項目。原本散落在各處硬編碼，
     收攏成變數後才能只改 :root 就整站換色。 */
  --surface: #fff;            /* 輸入框、選項、清單等可互動的面 */
  --surface-sunk: #efe7d8;    /* 凹陷面：分頁底、進度條軌道 */
  --surface-tint: #f7f3ea;    /* 淡色區塊：註記、彈窗標題列 */
  --line-soft: #f1eadd;       /* 比 --line 更淡的分隔線 */
  --on-gold-soft: #6b4d13;    /* 疊在 --gold-soft 上的文字 */
  --gold-soft-2: #fbf4e4;     /* 與 --gold-soft 組漸層的第二色 */
  --err-bg: #fdecea;
  --err-line: #f2c4bf;
  --disabled: #b9a894;
  --bg-veil: rgba(246, 241, 231, .93);   /* 進度條的毛玻璃底 */
  --backdrop: rgba(40, 28, 16, .55);     /* 彈窗遮罩 */
  --dot: rgba(168, 121, 31, .06);        /* 底色點陣 */
  --page-glow: rgba(200, 149, 47, .13);  /* 頁面頂部光暈 */
  --hero-scrim-1: rgba(48, 13, 6, .58);  /* 橫幅照片上的遮罩 */
  --hero-scrim-2: rgba(48, 13, 6, .72);
}

* { box-sizing: border-box; }

/* 瀏覽器內建的 [hidden] { display: none } 屬於 UA 樣式表，會被本檔案任何
   設了 display 的規則蓋掉（作者樣式表優先），導致 .row/.convert/.picked
   這類元素加了 hidden 屬性也不會消失。用 !important 統一壓住。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--ink);
  /* 極淡的金色點陣，讓大片米色底不會過於平板；密度夠細，遠看只是質感 */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0),
    radial-gradient(130% 55% at 50% 0%, var(--page-glow), transparent 72%);
  background-size: 22px 22px, 100% 820px;
  background-repeat: repeat, no-repeat;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
    "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* --- 頁首 --- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #5e1710 0%, #94301e 48%, #b8631f 100%);
  color: #fdf6e6;
  padding: 46px 26px 44px;
  text-align: center;
  border-bottom: 3px solid var(--gold);
}
/* 有設定 HERO_IMAGE 時才加背景圖。三層由上而下：
   1) 深色遮罩——確保金色標題在任何照片上都讀得清楚
   2) 圖片本身，cover 裁切、置中，所以重點務必放中央
   3) 原本的紅金漸層——圖片載入失敗或有透明區時的底色
   祥雲紋與織紋（.hero::before）仍疊在這三層之上。 */
.hero.has-image {
  min-height: var(--hero-min-height, clamp(210px, 26vw, 320px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image:
    linear-gradient(var(--hero-scrim-1), var(--hero-scrim-2)),
    var(--hero-image),
    linear-gradient(160deg, #5e1710 0%, #94301e 48%, #b8631f 100%);
  background-size: auto, cover, auto;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
/* 疊兩層純 CSS 的裝飾：45 度細斜紋（織品感）＋ 頂部暖光暈 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 只留頂部的暖色光暈。原本還疊了祥雲紋與 45 度織紋，改用實拍照片後
     任何紋樣都會與照片細節互相干擾，兩層皆已移除。 */
  background-image:
    radial-gradient(125% 85% at 50% -10%, rgba(255, 224, 168, .3), transparent 62%);
  pointer-events: none;
}

/* 印信式外框：細金線＋四角加粗的角紋 */
.hero-frame {
  position: absolute;
  inset: 13px 14px 22px;
  border: 1px solid rgba(255, 224, 168, .34);
  border-radius: 3px;
  pointer-events: none;
}
.hero-frame .c {
  position: absolute;
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 226, 172, .8);
}
.hero-frame .tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-frame .tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hero-frame .bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hero-frame .br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* 底部回紋（雷紋）飾帶 */
.hero-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 15h16M2 15V2h11v10H6V6h4' fill='none' stroke='%23f0d18f' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center bottom / 16px 16px;
  opacity: .6;
  pointer-events: none;
}
/* 底部再壓一條細金線，與 border 形成雙線收邊 */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 226, 170, .45);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero-sub {
  margin: 0 0 10px;
  letter-spacing: .42em;
  font-size: 13px;
  color: rgba(255, 226, 172, .95);
  text-indent: .42em;
}
/* 副標兩側的小括線 */
.hero-sub::before, .hero-sub::after {
  content: "—";
  margin: 0 10px;
  opacity: .55;
  letter-spacing: 0;
}
.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: .1em;
  /* 不支援 background-clip:text 時就用這個純色，避免文字變透明看不見 */
  color: #ffe8bd;
  text-shadow: 0 2px 3px rgba(50, 12, 6, .45);
}
/* 以漸層裁切文字做出金箔質感；transparent 文字無法用 text-shadow，改用 drop-shadow */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero-title {
    background: linear-gradient(180deg, #fff6e2 0%, #ffe3a6 38%, #e0aa53 58%, #fff2d2 100%);
    background-size: 100% 220%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 3px rgba(50, 12, 6, .45));
    animation: sheen 6s ease-in-out infinite;
  }
}
@keyframes sheen {
  0%, 100% { background-position: 0 0; }
  50%      { background-position: 0 100%; }
}
/* 標題下的金色裝飾線：兩側漸層細線夾一個菱形 */
.hero-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.hero-rule span {
  height: 1px;
  width: min(72px, 18vw);
}
.hero-rule span:first-child {
  background: linear-gradient(to right, transparent, rgba(255, 224, 168, .75));
}
.hero-rule span:last-child {
  background: linear-gradient(to left, transparent, rgba(255, 224, 168, .75));
}
.hero-rule i {
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 226, 172, .95);
  text-shadow: 0 0 8px rgba(255, 200, 110, .8);
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 56px;
}

/* --- 卡片 --- */
.card {
  position: relative;
  background: var(--card-veil);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
/* 卡片頂緣的金色細線，只在中段顯色，避免整條太搶眼 */
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: 18px; right: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, rgba(168, 121, 31, .55), transparent);
}
/* 疏文式內框：細金線＋四角加粗角紋，用背景漸層畫出八段短線 */
.card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(168, 121, 31, .18);
  border-radius: 9px;
  pointer-events: none;
  background-image:
    linear-gradient(#c8952f 0 0), linear-gradient(#c8952f 0 0),
    linear-gradient(#c8952f 0 0), linear-gradient(#c8952f 0 0),
    linear-gradient(#c8952f 0 0), linear-gradient(#c8952f 0 0),
    linear-gradient(#c8952f 0 0), linear-gradient(#c8952f 0 0);
  background-repeat: no-repeat;
  background-size: 11px 1.5px, 1.5px 11px, 11px 1.5px, 1.5px 11px,
                   11px 1.5px, 1.5px 11px, 11px 1.5px, 1.5px 11px;
  background-position:
    6px 0, 0 6px, calc(100% - 6px) 0, 100% 6px,
    6px 100%, 0 calc(100% - 6px), calc(100% - 6px) 100%, 100% calc(100% - 6px);
  opacity: .5;
}
.card-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  padding-bottom: 13px;
  border-bottom: 0;
  position: relative;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
}
/* 步驟徽章：金色漸層＋外圈淡光暈，比純色圓點有份量 */
/* 標題下的金線，取代原本的虛線 */
.card-title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, rgba(168, 121, 31, .55), rgba(168, 121, 31, .12) 60%, transparent);
}
/* 步驟徽章做成金質獎章：球面漸層＋雙層外環 */
.step {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #f5dda4, #c8952f 46%, #8a5f14 100%);
  color: #fffaf0;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  flex: none;
  text-shadow: 0 1px 1px rgba(70, 40, 0, .45);
  box-shadow:
    0 0 0 2px rgba(255, 253, 248, .9),
    0 0 0 3.5px rgba(168, 121, 31, .4),
    0 2px 6px rgba(70, 48, 24, .28);
}

/* --- 欄位 --- */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
}
label b { color: var(--red); font-weight: 700; }

/* 勾選框與圓鈕必須排除在外：appearance:none 會連原生的打勾圖案一起拿掉，
   方框會永遠是空的，accent-color 也失效。其餘的 width/padding/border
   對它們同樣不適用。 */
input:not([type="checkbox"]):not([type="radio"]), select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 16px; /* iOS 不自動放大 */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  appearance: none;
  box-shadow: inset 0 1px 2px rgba(70, 48, 24, .05);
  transition: border-color .18s, box-shadow .18s;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%237d6f5f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft), inset 0 1px 2px rgba(70, 48, 24, .04);
}
input.bad, select.bad { border-color: var(--err); }

.hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.note {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--gold-soft);
  border-radius: 9px;
  color: var(--on-gold-soft);
}
.err {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--err);
  min-height: 0;
}
.err:empty { display: none; }
.form-err {
  padding: 12px 14px;
  background: var(--err-bg);
  border: 1px solid var(--err-line);
  border-radius: 10px;
  margin-bottom: 14px;
}

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#birth-lunar .row { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 420px) {
  .row { grid-template-columns: 1fr; }
  #birth-lunar .row { grid-template-columns: 1fr 1fr; }
  #birth-lunar .row .field:first-child { grid-column: 1 / -1; }
}

/* --- 參加項目大卡 --- */
.picks { display: grid; gap: 10px; }
.pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  overflow: hidden;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
/* 選中時左側浮出一條金色標記條 */
.pick::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #c8952f, var(--gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.pick:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.pick.on {
  border-color: var(--gold);
  background: linear-gradient(105deg, var(--gold-soft), var(--gold-soft-2));
  box-shadow: var(--shadow-sm);
}
.pick.on::before { transform: scaleX(1); }
.pick:active { transform: scale(.995); }
.pick-dot {
  width: 19px; height: 19px;
  border: 2px solid var(--line);
  border-radius: 50%;
  flex: none;
  display: grid; place-items: center;
}
.pick.on .pick-dot { border-color: var(--gold); }
.pick.on .pick-dot::after {
  content: ""; width: 9px; height: 9px;
  border-radius: 50%; background: var(--gold);
}
.pick-label { font-weight: 600; font-size: 15.5px; }
.pick-desc { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* --- 分段按鈕 --- */
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.seg {
  flex: 1 1 auto;
  min-width: 84px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.seg:hover { border-color: var(--gold); }
.seg.on {
  border-color: var(--gold);
  background: linear-gradient(160deg, var(--gold-soft), var(--gold-soft-2));
  font-weight: 600;
  color: var(--on-gold-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 3px rgba(70, 48, 24, .08);
}
.seg:active { transform: scale(.98); }

/* --- 分頁 --- */
.tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--surface-sunk);
  border-radius: 11px;
  margin-bottom: 16px;
}
.tab {
  flex: 1;
  padding: 9px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}
.tab.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.07); }

/* --- 換算結果 --- */
.convert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--gold-soft);
  border-radius: 10px;
}
.convert-label { font-size: 12.5px; color: var(--on-gold-soft); flex: none; }
.convert-value { font-size: 16px; color: var(--red); letter-spacing: .02em; }
.convert.bad { background: var(--err-bg); }
.convert.bad .convert-value { color: var(--err); }

/* --- 門市搜尋 --- */
.search { position: relative; }
.results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0; right: 0;
  max-height: 258px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(70, 48, 24, .13);
}
.result {
  display: block;
  width: 100%;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.result:last-child { border-bottom: 0; }
.result:hover, .result:focus { background: var(--gold-soft); }
.result strong { font-size: 15px; }
.result span { display: block; font-size: 12.5px; color: var(--muted); }
.result em { font-style: normal; color: var(--gold); }
.result-empty { padding: 13px; font-size: 14px; color: var(--muted); text-align: center; }

/* 門市選單：縣市 → 鄉鎮 → 門市清單 */
.sub-field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
#store-picker .tabs { margin-bottom: 12px; }
.store-list {
  margin-top: 12px;
  max-height: 292px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.store-list-head {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 9px 13px;
  background: var(--gold-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--on-gold-soft);
}

.picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--gold-soft);
  border-radius: 10px;
}
.picked strong { display: block; font-size: 15px; }
.picked span { font-size: 12.5px; color: var(--muted); }

.link {
  border: 0;
  background: none;
  padding: 4px 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
  flex: none;
}

/* --- 送出 --- */
.submit {
  position: relative;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(160deg, #a33824, var(--red-deep));
  color: #fff;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid rgba(240, 209, 143, .5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 172, .22),
    0 2px 6px rgba(111, 31, 20, .3),
    0 10px 24px rgba(111, 31, 20, .22);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
/* 每隔幾秒掃過一道流光，讓主要行動按鈕不會沉在版面裡 */
.submit::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, .34), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: sweep 4.5s ease-in-out infinite;
}
@keyframes sweep {
  0%, 62% { left: -60%; }
  100%    { left: 130%; }
}
.submit:disabled::after { display: none; }
/* 上緣的高光，讓按鈕看起來有弧面而不是一塊色 */
.submit::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, .16), transparent);
  pointer-events: none;
}
.submit:hover { filter: brightness(1.07); box-shadow: 0 3px 8px rgba(111, 31, 20, .32), 0 12px 26px rgba(111, 31, 20, .22); }
.submit:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(111, 31, 20, .3); }
.submit:disabled {
  background: var(--disabled);
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
}
.submit.ghost {
  background: none;
  border: 1.5px solid var(--gold);
  color: var(--gold-deep);
  box-shadow: none;
}
.submit.ghost::before, .submit.ghost::after { display: none; }
.submit.ghost:hover { background: var(--gold-soft); filter: none; box-shadow: var(--shadow-sm); }

.foot { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* --- 同意條款 --- */
.consent { padding: 16px 18px; }
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* 負邊距讓整塊的可點範圍延伸到卡片邊緣，手機上比較好按 */
  margin: -6px -6px 0;
  padding: 6px;
  border-radius: 9px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.65;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(168, 121, 31, .12);
}
.check:active { background: var(--gold-soft); }
.check input {
  /* 手機上 24px 才夠好按 */
  width: 24px;
  height: 24px;
  margin: 0;
  flex: none;
  /* 明確保留原生外觀，勾選圖案才畫得出來 */
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--red);
  cursor: pointer;
}
.check b { font-weight: 600; color: var(--on-gold-soft); }

.check-text {
  margin: 0;
  cursor: pointer;
}
/* 句子中的條款連結：加底線與色彩讓它明顯可點，但不撐開行高 */
.check-text .doc-link {
  font-weight: 600;
  text-underline-offset: 3px;
  padding: 0 1px;
}
.doc-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
}
.doc-link:hover { color: var(--red); }

/* --- 頁尾 --- */
.site-foot {
  position: relative;
  margin-top: 34px;
  padding-top: 26px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
/* 頁尾起始處的裝飾分隔：漸層細線中央綴一個菱形 */
.site-foot::before {
  content: "❖";
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 12px;
  background: var(--bg);
  font-size: 10px;
  color: var(--gold);
}
.site-foot::after {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
/* 聯絡卡片本身已有邊框，不再另加分隔線 */
.site-foot .foot-links { margin-top: 18px; }
/* 聯絡卡片 */
.contact-card { text-align: center; padding: 24px 18px 20px; }
.contact-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .06em;
}
/* 標題兩側的細金線 */
.contact-title::before,
.contact-title::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin: 0 12px;
  vertical-align: middle;
  background: var(--gold);
  opacity: .55;
}
.contact-sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); }

.contact-actions { display: grid; gap: 10px; }
@media (min-width: 480px) {
  .contact-actions { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.contact-btn:hover { border-color: var(--gold); background: var(--gold-soft); }
.contact-btn small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  word-break: break-all;
}
/* LINE 是主要聯絡管道（繳費、確認、寄送通知都靠它），給它品牌色 */
.contact-btn.line {
  border-color: #06c755;
  background: #06c755;
  color: #fff;
}
.contact-btn.line:hover { border-color: #05a948; background: #05a948; }
.contact-btn.line small { color: rgba(255, 255, 255, .85); }

.contact-meta { margin: 16px 0 0; }
.contact-meta:empty { display: none; }
.contact-meta div {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}
.contact-meta dt { color: var(--muted); flex: none; }
.contact-meta dd { margin: 0; color: var(--ink); }

.foot-links { margin: 0 0 8px; }
.foot-links .sep { margin: 0 8px; opacity: .5; }
.foot-copy { margin: 0; font-size: 12px; opacity: .8; }

/* --- 彈窗 --- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
}
.modal-box {
  position: relative;
  margin: auto;
  width: min(640px, calc(100% - 24px));
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(40, 28, 16, .3);
  overflow: hidden;
}
.modal-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(160deg, var(--card), var(--surface-tint));
  border-bottom: 1px solid var(--line);
  flex: none;
}
/* 標題列底部的金線，與卡片頂緣呼應 */
.modal-head::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px; bottom: -1px;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(168, 121, 31, .5), transparent);
}
.modal-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .04em;
}
.modal-x {
  border: 0;
  background: none;
  padding: 0 4px;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.modal-x:hover { color: var(--ink); }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 14px 18px; border-top: 1px solid var(--line); flex: none; }

/* 條款內文排版 */
.doc { font-size: 14px; line-height: 1.75; }
.doc h3 {
  margin: 24px 0 9px;
  font-family: var(--serif);
  font-size: 15.5px;
  letter-spacing: .03em;
  color: var(--red);
}
.doc h3:first-child { margin-top: 0; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 12px; padding-left: 20px; }
.doc li { margin-bottom: 5px; }
.doc-lead {
  padding: 12px 14px;
  background: var(--gold-soft);
  border-radius: 9px;
  color: var(--on-gold-soft);
}
.doc-note {
  padding: 10px 12px;
  background: var(--surface-tint);
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--muted);
}

/* --- 完成 --- */
.done { text-align: center; padding: 38px 20px 30px; }
/* 外圈金環＋內圈實心，取印信落款的意象 */
.done-mark {
  position: relative;
  width: 62px; height: 62px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 31px;
  box-shadow: 0 4px 14px rgba(46, 125, 84, .3);
}
.done-mark::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(168, 121, 31, .55);
  border-radius: 50%;
}
/* 再加一圈虛線外環，像印信的雙重邊 */
.done-mark::before {
  content: "";
  position: absolute;
  inset: -17px;
  border: 1px dashed rgba(168, 121, 31, .35);
  border-radius: 50%;
}
.done h2 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .06em;
}
.done-sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.done-list {
  margin: 0 0 24px;
  text-align: left;
  border-top: 1px solid var(--line);
}
.done-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.done-list dt { color: var(--muted); flex: none; }
.done-list dd { margin: 0; text-align: right; font-weight: 600; }

/* --- 深色模式 --- */
/* 兩段式：跟隨系統偏好，但使用者若手動選過就以 data-theme 為準。
   :root:not([data-theme="light"]) 讓「系統深色 + 使用者選淺色」時不會被蓋回去。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  /* 深色不用純黑，改用帶暖度的深褐，與金色、廟宇氛圍才調和 */
  --bg: #16110d;
  --card: #221a14;
  --card-veil: rgba(34, 26, 20, .86);
  --surface: #2a201a;
  --surface-sunk: #1b1410;
  --surface-tint: #271e17;
  --line: #3d3128;
  --line-soft: #2f261e;
  --ink: #f0e6d6;
  --muted: #a89880;

  /* 金色在深底上要提亮才有足夠對比；--gold-soft 由淺金翻成深琥珀 */
  --gold: #d7a844;
  --gold-deep: #b8892a;
  --gold-soft: #3a2c17;
  --gold-soft-2: #46351c;
  --on-gold-soft: #f0d18f;

  --red: #c25340;
  --red-deep: #8f2f22;
  --err: #ff9b90;
  --err-bg: #3a1d18;
  --err-line: #5c2b23;
  --ok: #5cc48d;
  --disabled: #453b32;

  --bg-veil: rgba(22, 17, 13, .93);
  --backdrop: rgba(0, 0, 0, .68);
  --dot: rgba(215, 168, 68, .07);
  --page-glow: rgba(200, 149, 47, .1);
  /* 深色模式下橫幅遮罩再壓深一點，與整體亮度一致 */
  --hero-scrim-1: rgba(30, 8, 4, .66);
  --hero-scrim-2: rgba(30, 8, 4, .8);

  /* 深色底上淡色陰影看不見，改用黑色並加深 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .28);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .34);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, .48), 0 24px 56px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  /* 深色不用純黑，改用帶暖度的深褐，與金色、廟宇氛圍才調和 */
  --bg: #16110d;
  --card: #221a14;
  --card-veil: rgba(34, 26, 20, .86);
  --surface: #2a201a;
  --surface-sunk: #1b1410;
  --surface-tint: #271e17;
  --line: #3d3128;
  --line-soft: #2f261e;
  --ink: #f0e6d6;
  --muted: #a89880;

  /* 金色在深底上要提亮才有足夠對比；--gold-soft 由淺金翻成深琥珀 */
  --gold: #d7a844;
  --gold-deep: #b8892a;
  --gold-soft: #3a2c17;
  --gold-soft-2: #46351c;
  --on-gold-soft: #f0d18f;

  --red: #c25340;
  --red-deep: #8f2f22;
  --err: #ff9b90;
  --err-bg: #3a1d18;
  --err-line: #5c2b23;
  --ok: #5cc48d;
  --disabled: #453b32;

  --bg-veil: rgba(22, 17, 13, .93);
  --backdrop: rgba(0, 0, 0, .68);
  --dot: rgba(215, 168, 68, .07);
  --page-glow: rgba(200, 149, 47, .1);
  /* 深色模式下橫幅遮罩再壓深一點，與整體亮度一致 */
  --hero-scrim-1: rgba(30, 8, 4, .66);
  --hero-scrim-2: rgba(30, 8, 4, .8);

  /* 深色底上淡色陰影看不見，改用黑色並加深 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .28);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .34);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, .48), 0 24px 56px rgba(0, 0, 0, .45);
}

/* 橫幅右上角的兩顆切換鈕（語言、深淺色） */
.hero-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
/* 切換鈕：毛玻璃避免壓過照片 */
.theme-toggle {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 226, 172, .45);
  border-radius: 50%;
  background: rgba(30, 10, 5, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 232, 189, .95);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.theme-toggle:hover {
  background: rgba(30, 10, 5, .55);
  border-color: rgba(255, 226, 172, .8);
}
.theme-toggle:active { transform: scale(.92); }

/* --- 載入失敗提示 --- */
/* 只有 JS 出錯時才會被插入。表單一片空白最傷——使用者不知道該等還是該走。 */
.fatal {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--err-line);
  border-radius: var(--radius);
  background: var(--err-bg);
  color: var(--ink);
  font-size: 14px;
}
.fatal strong { color: var(--err); font-size: 15px; }
.fatal code {
  font-size: 11.5px;
  color: var(--muted);
  word-break: break-all;
}

/* --- 填寫進度 --- */
/* 捲動時固定在頂端。z-index 介於金箔(0) 與彈窗(100) 之間，
   且高於門市下拉(20)，避免下拉清單蓋住進度條。 */
.progress {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 9px 16px 10px;
  background: var(--bg-veil);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(70, 48, 24, .06);
}
.progress-track {
  height: 7px;
  border-radius: 99px;
  background: var(--surface-sunk);
  box-shadow: inset 0 1px 2px rgba(70, 48, 24, .16);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #c8952f, #e9c87e 45%, #f7e3b0 60%, #c8952f);
  background-size: 220% 100%;
  box-shadow: 0 0 8px rgba(200, 149, 47, .45);
  transition: width .45s cubic-bezier(.22, .8, .3, 1);
  animation: flow 3s linear infinite;
}
/* 金色流動，讓進度條本身也有金箔的質感 */
@keyframes flow {
  from { background-position: 0 0; }
  to   { background-position: 220% 0; }
}
.progress-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.progress-pct {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--gold-deep);
  flex: none;
  font-variant-numeric: tabular-nums;
}
.progress-note {
  border: 0;
  padding: 2px 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(125, 111, 95, .4);
}
.progress-note:disabled {
  cursor: default;
  text-decoration: none;
  color: var(--ok);
  font-weight: 600;
}
/* 填完時整條轉為綠色，與完成頁的印信呼應 */
.progress.done .progress-fill {
  background: linear-gradient(90deg, #2e7d54, #4aa876 50%, #2e7d54);
  box-shadow: 0 0 8px rgba(46, 125, 84, .4);
  animation: none;
}
.progress.done .progress-pct { color: var(--ok); }

/* --- 背景金箔 --- */
/* 金箔置於所有內容之下（z-index 0），絕不會蓋到文字或輸入框。
   為了讓它不被完全遮住，卡片改用 --card-veil 微透明底，金箔會隱約透出；
   卡片之間的間隙則看得最清楚。pointer-events: none 確保不擋任何操作。 */
#foil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* 內容一律浮在金箔之上 */
.hero { z-index: 1; }
.wrap { position: relative; z-index: 1; }

/* --- 動態效果 --- */
/* 卡片依序淡入上浮，讓長表單載入時有節奏感而非一次全部跳出 */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.card { animation: rise .5s cubic-bezier(.22, .8, .3, 1) both; }
.card:nth-of-type(2) { animation-delay: .05s; }
.card:nth-of-type(3) { animation-delay: .10s; }
.card:nth-of-type(4) { animation-delay: .15s; }
.card:nth-of-type(5) { animation-delay: .20s; }
.card:nth-of-type(6) { animation-delay: .25s; }
.card:nth-of-type(n + 7) { animation-delay: .30s; }

.hero-inner { animation: rise .55s cubic-bezier(.22, .8, .3, 1) both; }

/* 使用者若在系統設定關閉動態效果，一律不播放 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}