/* ============================================================
   FGXpress｜客人端：店家頁 + 步驟手風琴預約卡
   風格：單色金屬質感、大留白、細灰線、深色 CTA（對齊 FanGeX logo）。
   互動：漸進式步驟；當前步驟展開、選好折疊打勾；預約卡固定高、內部捲動。
   ============================================================ */

/* ---------- 固定頂欄（雙狀態）：初始=FGXpress 品牌列；捲動後=店家識別+章節導覽 ---------- */
.topbar { position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line); }
.topbar-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-4); }
.tb-state { display: flex; align-items: center; gap: var(--s-3); height: 56px; }
.tb-shop-state { display: none; }                 /* 預設隱藏，捲動後才出現 */
.topbar.scrolled .tb-brand-state { display: none; }
.topbar.scrolled .tb-shop-state { display: flex; }
.topbar .brand-wordmark { font-size: 24px; letter-spacing: -.01em; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-4);
  overflow-x: auto; }
.tb-right::-webkit-scrollbar { height: 0; }
.tb-right a { font-size: var(--f-sm); font-weight: 600; color: var(--c-ink-2); white-space: nowrap; }
.tb-right a:hover { color: var(--c-ink); }
.tb-sep { color: var(--c-line); }
.tb-nav a { padding: var(--s-2) 0; border-bottom: 2px solid transparent; }
.tb-nav a:hover { color: var(--c-ink); border-bottom-color: var(--c-line); }        /* hover：淺灰底線 */
.tb-nav a.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }  /* 捲到該區：藍色底線 */
.tb-logo { width: 30px; height: 30px; flex: none; border-radius: var(--r-pill);
  background: var(--c-metal); display: grid; place-items: center; color: #fff;
  font-size: 12px; font-weight: 800; border: 1.5px solid #fff; }
.tb-name { font-weight: 800; font-size: var(--f-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 章節錨點捲動：平滑 + 避開固定頂欄高度 */
html { scroll-behavior: smooth; }
#shop-head, [id^="sec-"] { scroll-margin-top: 64px; }

/* ---------- 店家頁 ---------- */
.shop { padding-bottom: 120px; }

/* 店名標頭（照片之上）：左 logo + 名稱 + 類別・區域・交通 */
.shop-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) 0 var(--s-4); }
.head-logo { width: 56px; height: 56px; flex: none; border-radius: var(--r-pill); background: var(--c-metal);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--f-md);
  border: 2px solid #fff; box-shadow: var(--sh-1); }
.head-txt { min-width: 0; }
.transit { color: var(--c-ink-2); }

/* 作品拼貼：手機單圖、桌機 1大+1中+2小 馬賽克 */
.gallery { position: relative; width: 100%; max-width: var(--content-max); margin: 0 auto;
  background: var(--c-line-2); overflow: hidden; }
.gallery-collage { display: grid; gap: 4px; grid-template-columns: 1fr; aspect-ratio: 4 / 3; }
.gallery-collage img { width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--c-line-2); cursor: pointer; }
.gallery-collage .gc-2, .gallery-collage .gc-3, .gallery-collage .gc-4 { display: none; }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px); color: var(--c-ink);
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(16,18,22,.14); transition: background .15s ease; }
.gallery-arrow:hover { background: rgba(255,255,255,.85); }
.gallery-arrow.prev { left: 12px; }
.gallery-arrow.next { right: 12px; }
.gallery-count { position: absolute; right: 12px; bottom: 12px;
  background: rgba(16,18,22,.42); backdrop-filter: blur(6px); color: #fff;
  font-size: var(--f-sm); font-weight: 700; padding: 5px var(--s-3); border-radius: var(--r-pill); }

/* 店家識別（標頭與名片共用樣式） */
.shop-name { font-size: var(--f-xl); font-weight: 800; margin: 0 0 var(--s-2); letter-spacing: .01em; }
.shop-meta { color: var(--c-ink-soft); font-size: var(--f-sm); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.dot-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.shop-about { color: var(--c-ink-2); font-size: var(--f-sm); margin: 0; }

/* 名片（右側 sticky）：不放 logo/店名（已在固定頂欄）；地址 + 電話(直接顯示) + 社群 outline icon + 立即預約 */
.shop-card { margin-top: var(--s-5); padding: var(--s-5); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); background: var(--c-surface); }
.card-row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--f-sm); color: var(--c-ink-2); }
.card-addr { align-items: flex-start; margin-bottom: var(--s-3); }
.card-addr .oi { margin-top: 1px; }
.card-phone { font-weight: 700; color: var(--c-ink); margin-bottom: var(--s-4); }
.oi { width: 18px; height: 18px; flex: none; }        /* outline icon */
.card-social { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); }
.ic-btn { width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center;
  border: 1px solid var(--c-line); color: var(--c-ink-2); transition: all .12s ease; }
.ic-btn:hover { border-color: var(--c-ink); color: var(--c-ink); }
.ic-btn .oi { width: 20px; height: 20px; }
.card-book { display: none; }              /* 手機用底部固定 CTA；桌機才顯示卡片內按鈕 */
/* 名片「最近可約」：綠點狀態燈 + 最快可預約時段（點擊開表單） */
.card-soon { display: none; align-items: center; gap: var(--s-2); width: 100%; text-align: left;
  margin-bottom: var(--s-3); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface-2);
  font-size: var(--f-sm); color: var(--c-ink-2); transition: background .12s ease; }
.card-soon:hover { background: var(--c-primary-050); }
.card-soon[hidden] { display: none; }
/* 名片「最近可約」只在桌機顯示（手機改由底部 CTA 那行呈現，不重複） */
@media (min-width: 768px) { .card-soon { display: flex; } }
.soon-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c-success);
  box-shadow: 0 0 0 3px rgba(47,143,107,.16); }
.soon-time { margin-left: auto; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* 右欄內容：第一段（關於）不要頂線 */
.shop-main .shop-sec.first { border-top: 0; padding-top: var(--s-5); }

/* 頁尾品牌（低調收在最下方，不搶商家版面） */
.site-foot { text-align: center; color: var(--c-ink-soft); font-size: var(--f-xs);
  padding: var(--s-6) var(--s-4) calc(var(--s-6) + 60px); }
.site-foot .brand-wordmark { font-size: var(--f-sm); }
.site-foot .foot-logo { display: inline-block; height: 24px; width: auto; vertical-align: middle;
  margin: 0 5px 0 3px; position: relative; top: -1px; }   /* 蓋掉 base 的 img{display:block}，否則會獨占一行 */
.site-foot .foot-brand { font-weight: 700; color: var(--c-ink-2); letter-spacing: .04em; }

/* 桌機（≥768px）：加寬版心 + 四張馬賽克 + 內容左／名片右 sticky */
@media (min-width: 768px) {
  :root { --content-max: 1040px; }
  .gallery { border-radius: var(--r-lg); }
  .gallery-collage { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
    aspect-ratio: auto; height: 420px; }
  .gallery-collage .gc-1 { grid-column: 1; grid-row: 1 / span 2; }
  .gallery-collage .gc-2 { grid-column: 2; grid-row: 1 / span 2; display: block; }
  .gallery-collage .gc-3 { grid-column: 3; grid-row: 1; display: block; }
  .gallery-collage .gc-4 { grid-column: 3; grid-row: 2; display: block; }

  /* 兩欄：內容左（捲動）＋名片右 sticky */
  .shop-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-6);
    align-items: start; margin-top: var(--s-5); }
  .shop-card { position: sticky; top: 72px; margin-top: 0; }
  .shop-main { min-width: 0; }
  .card-book { display: flex; }
  .cta-bar { display: none; }
  .site-foot { padding-bottom: var(--s-6); }

  /* 服務總覽：桌機改「文字左、照片右」＋顯示左右箭頭 */
  .ov-item { display: flex; gap: var(--s-4); align-items: flex-start; }
  .ov-text { flex: 1; }
  .ov-photos-wrap { flex: none; width: 208px; margin-top: 0; }   /* =3×64+2×8，剛好 3 張不被切 */
}

.shop-sec { padding: var(--s-5) 0; border-top: 1px solid #D3D6DC; }   /* 分隔線加深較好察覺 */
.sec-title { font-size: var(--f-lg); font-weight: 800; margin: 0 0 var(--s-4); letter-spacing: .02em; }  /* 標題加大以資區別 */

/* 區塊標頭（標題 + 看全部） */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.sec-head .sec-title { margin: 0; }
.sec-more { font-size: var(--f-sm); color: var(--c-ink-2); font-weight: 600; }
.sec-more:hover { color: var(--c-ink); }

/* 置頂公告 */
.pinned { margin-top: var(--s-4); padding: var(--s-4);
  border-radius: var(--r-lg); border: 1px solid #D2D7E0;
  background: #E6E9F0; } 
.pinned .p-title { display: block; font-size: var(--f-lg); font-weight: 800; letter-spacing: .02em;
  color: var(--c-ink); margin-bottom: var(--s-1); }
.pinned .p-body { display: block; color: var(--c-ink-2); font-size: var(--f-sm); }

/* 分類 tab（店家頁總覽與預約卡共用樣式） */
.svc-tabs { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); margin-bottom: var(--s-3); }
.svc-tabs::-webkit-scrollbar { height: 0; }

/* 時間/價格 icon 列（總覽用） */
.i-meta { display: flex; gap: var(--s-4); margin-top: var(--s-2); }
.i-meta .im { display: inline-flex; align-items: center; gap: 2px; font-size: var(--f-sm); font-weight: 600; color: var(--c-ink-2); }
.mi.material-symbols-outlined { font-size: 20px; line-height: 1; }   /* Google 圖示字型，清晰可縮放 */
.im-price .mi { color: var(--c-ink); }

/* 價格強調 */
.i-meta .im-price { color: var(--c-ink); font-weight: 800; }

/* 店家頁「總覽」：分隔線清單。手機＝照片在文字下方；桌機＝照片在右側 */
.svc-overview { display: flex; flex-direction: column; }
.ov-item { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line-2); }
.ov-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ov-text { min-width: 0; }
.ov-name { font-weight: 700; font-size: var(--f-md); display: flex; align-items: center; gap: var(--s-2);
  padding-left: 10px; border-left: 2px solid var(--c-ink); }
.ov-desc { font-size: var(--f-xs); color: var(--c-ink-soft); margin-top: 4px; line-height: 1.55; }
.ov-opts { font-size: var(--f-xs); color: var(--c-ink-2); margin-top: var(--s-2); }
/* 照片橫列（手機：文字下方、整排可滑） */
.ov-photos-wrap { position: relative; margin-top: var(--s-3); }
.ov-photos { display: flex; gap: var(--s-2); overflow-x: auto; scroll-behavior: smooth; }
.ov-photos::-webkit-scrollbar { height: 0; }
.ov-photos img { width: 64px; height: 64px; flex: none; border-radius: var(--r-sm); object-fit: cover;
  background: var(--c-line-2); cursor: pointer; }
/* 左右箭頭（桌機才顯示；手機用手指滑） */
.ov-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px; border-radius: var(--r-pill); background: rgba(16,18,22,.6);
  backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(16,18,22,.35); color: #fff;
  font-size: 18px; line-height: 1; place-items: center; }
.ov-nav:hover { background: rgba(16,18,22,.8); }
.ov-nav.prev { left: 3px; }
.ov-nav.next { right: 3px; }
/* 桌機才顯示箭頭：必須寫在上面 display:none 之後，避免被蓋掉 */
@media (min-width: 768px) { .ov-nav { display: grid; } }

/* 預約卡「選擇」：逐層下鑽列 */
.pick-list { display: flex; flex-direction: column; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.pick-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--c-line-2); background: var(--c-surface); transition: background .12s; }
.pick-list .pick-row:first-child { border-top: 0; }
.pick-row:hover { background: var(--c-surface-2); }
.pick-row[aria-pressed="true"] { background: var(--c-primary-050); }
.pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-name { font-weight: 700; font-size: var(--f-sm); display: flex; align-items: center; gap: var(--s-2); }
.pick-sub { font-size: var(--f-xs); color: var(--c-ink-soft); }
.pick-ind { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink-soft); font-size: var(--f-md); font-weight: 700; }
.pick-row[aria-pressed="true"] .pick-ind { color: var(--c-primary); }
.pick-ind.chev { font-size: var(--f-lg); }
.pick-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--c-primary); color: #fff; font-size: 11px; display: inline-grid; place-items: center; }
.pick-back { font-size: var(--f-sm); font-weight: 700; color: var(--c-ink-2); padding: 2px 0 var(--s-3); }
.pick-back:hover { color: var(--c-ink); }
.pick-head { margin-bottom: var(--s-3); }
.pick-htitle { font-weight: 800; font-size: var(--f-md); }
.pick-hdesc { display: block; font-size: var(--f-xs); color: var(--c-ink-soft); margin-top: 3px; }


/* 地圖卡 */
.map-card { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; }
.map-embed { aspect-ratio: 16 / 9; background: var(--c-line-2); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-addr { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); font-size: var(--f-sm); }
.map-addr .map-link { color: var(--c-ink); font-weight: 700; white-space: nowrap; }

/* 燈箱（看全部照片） */
/* 燈箱：單張大圖置中 + 左右換張 */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(16,18,22,.94);
  display: grid; place-items: center; padding: var(--s-6); }
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: min(92vw, 900px); max-height: 82vh; border-radius: var(--r-md);
  object-fit: contain; background: #222; transform-origin: center center;
  transition: transform .18s ease; will-change: transform; touch-action: none;
  user-select: none; -webkit-user-drag: none; -webkit-user-select: none; }
.lightbox-img.zoomed { cursor: grab; transition: none; }        /* 放大後可拖曳平移 */
.lightbox-img.zoomed:active { cursor: grabbing; }
.lightbox-close { position: fixed; top: 12px; right: 16px; width: 40px; height: 40px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.14); color: #fff; font-size: 18px;
  display: grid; place-items: center; z-index: 91; }
.lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 46px; height: 46px;
  border-radius: var(--r-pill); background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center; z-index: 91; }
.lightbox-nav:hover { background: rgba(255,255,255,.28); }
.lightbox-nav.prev { left: 16px; }
.lightbox-nav.next { right: 16px; }
/* 底部工具列：縮小鏡 ｜ 計數 ｜ 放大鏡 */
.lightbox-tools { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 91;
  display: flex; align-items: center; gap: var(--s-3);
  background: rgba(255,255,255,.12); backdrop-filter: blur(6px);
  border-radius: var(--r-pill); padding: 5px var(--s-3); }
.lb-tool { width: 34px; height: 34px; border-radius: var(--r-pill); color: #fff;
  display: grid; place-items: center; transition: background .12s ease; }
.lb-tool:hover { background: rgba(255,255,255,.22); }
.lb-tool:disabled { opacity: .35; cursor: not-allowed; }
.lb-tool .material-symbols-outlined { font-size: 22px; }
.lightbox-count { color: rgba(255,255,255,.9); font-size: var(--f-sm);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }

.notice-list { margin: 0; padding-left: 1.1em; color: var(--c-ink-2); font-size: var(--f-sm); }
.notice-list li { margin-bottom: var(--s-2); }

/* 營業時間：緊湊，日子欄固定寬 + 時間緊接 */
.hours-list { display: inline-grid; gap: var(--s-2); }
.hours-row { display: grid; grid-template-columns: 88px auto; gap: var(--s-4); font-size: var(--f-sm); }
.hours-row .h-day { color: var(--c-ink-2); }
.hours-row .h-time { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.hours-row.closed .h-time { color: var(--c-ink-soft); }
.hours-row.today { font-weight: 700; }
.hours-row.today .h-day::after { content: "・今天"; color: var(--c-success); font-weight: 700; }

/* 圖片區：固定尺寸縮圖、單排橫向捲動（超出才出箭頭，比照作品照片） */
.doc-strip-wrap { position: relative; }
.doc-grid { display: flex; gap: var(--s-3); overflow-x: auto; scroll-behavior: smooth; padding-bottom: var(--s-1); }
.doc-grid::-webkit-scrollbar { height: 0; }
.doc-grid img { width: 160px; height: 160px; flex: none; border-radius: var(--r-md);
  border: 1px solid var(--c-line); background: var(--c-line-2); object-fit: cover;
  cursor: pointer; display: block; }
/* 左右箭頭：桌機、且內容真的超出時才顯示（.scrollable 由 JS 量測後掛上） */
.doc-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: var(--r-pill); background: rgba(16,18,22,.6);
  backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(16,18,22,.35); color: #fff;
  font-size: 20px; line-height: 1; place-items: center; }
.doc-nav:hover { background: rgba(16,18,22,.8); }
.doc-nav.prev { left: -6px; }
.doc-nav.next { right: -6px; }
@media (min-width: 768px) { .doc-strip-wrap.scrollable .doc-nav { display: grid; } }
/* 手機：底部細捲動進度條（只在可滑時顯示；桌機改用箭頭） */
.doc-scrollbar { display: none; width: 64px; height: 3px; margin: var(--s-3) auto 0;
  border-radius: var(--r-pill); background: var(--c-line-2); position: relative; overflow: hidden; }
.doc-strip-wrap.scrollable .doc-scrollbar { display: block; }
.doc-scrollbar-thumb { position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  border-radius: var(--r-pill); background: var(--c-ink-soft); }
@media (min-width: 768px) { .doc-strip-wrap.scrollable .doc-scrollbar { display: none; } }

/* ---------- 固定底部 CTA ---------- */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line);
  padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
/* 底部 CTA 上方「最近可約」一行（手機常駐可見；點擊開表單） */
.cta-soon { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-bottom: var(--s-2); padding: 0 2px; font-size: var(--f-xs); color: var(--c-ink-2); }
.cta-soon[hidden] { display: none; }
.cta-soon .soon-time { margin-left: 2px; font-weight: 800; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* ---------- 預約卡（bottom sheet） ---------- */
.sheet-mask { position: fixed; inset: 0; z-index: 60; background: rgba(16,18,22,.62);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
.sheet-mask.show { opacity: 1; }
.sheet[hidden], .sheet-mask[hidden] { display: none; }

/* 手機：預約表單滿版全螢幕（無圓角、貼齊四邊） */
.sheet {
  position: fixed; z-index: 70; left: 0; top: 0;
  width: 100%; height: 100vh; height: 100dvh;
  transform: translateY(100%);
  background: var(--c-surface); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.sheet.show { transform: translateY(0); }
/* 桌機：改回置中 bottom-sheet 卡片（固定高、內部捲動、頂端圓角） */
@media (min-width: 768px) {
  .sheet { left: 50%; top: auto; bottom: 0; max-width: 460px;
    height: var(--sheet-h); border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translate(-50%, 100%); }
  .sheet.show { transform: translate(-50%, 0); }
}

/* 卡頭：標題 + 進度（固定不捲） */
.sheet-head { flex: none; padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: 1px solid var(--c-line); }
.sheet-titlebar { display: flex; align-items: center; justify-content: space-between; }
.sheet-title { font-weight: 800; font-size: var(--f-md); }
.sheet-close { width: 32px; height: 32px; border-radius: var(--r-pill); color: var(--c-ink-soft);
  font-size: 16px; display: grid; place-items: center; }
.sheet-close:hover { background: var(--c-primary-050); color: var(--c-ink); }

/* 進度指示 */
.stepper { display: flex; align-items: center; margin-top: var(--s-4); }
.stepper .st { display: flex; align-items: center; gap: var(--s-2); }
.stepper .st-dot { width: 24px; height: 24px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: var(--f-xs); font-weight: 800;
  background: var(--c-surface); border: 1.5px solid var(--c-line); color: var(--c-ink-soft);
  transition: all .18s ease; }
.stepper .st-label { font-size: var(--f-xs); color: var(--c-ink-soft); font-weight: 600; }
.stepper .st-line { flex: 1; height: 1.5px; background: var(--c-line); margin: 0 var(--s-2); }
.stepper .st.done .st-dot { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.stepper .st.done .st-label { color: var(--c-ink-2); }
.stepper .st.done + .st-line { background: var(--c-primary); }
.stepper .st.current .st-dot { border-color: var(--c-primary); color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-primary-ring); }
.stepper .st.current .st-label { color: var(--c-ink); }

/* 卡身：唯一捲動區 */
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--s-3) var(--s-5) var(--s-5); }

/* 手風琴步驟 */
.step-panel { border: 1px solid var(--c-line); border-radius: var(--r-md);
  margin-top: var(--s-3); overflow: hidden; background: var(--c-surface); }
.step-panel[data-state="current"] { border-color: var(--c-ink); box-shadow: var(--sh-1); }
.step-panel[data-state="todo"] { opacity: .6; }
.step-head { display: flex; align-items: flex-start; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-4); text-align: left; background: var(--c-surface-2); }
.step-panel[data-state="current"] .step-head { background: var(--c-surface); }
.step-label, .step-idx, .step-caret { margin-top: 1px; }
.step-idx { width: 24px; height: 24px; flex: none; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: var(--f-xs); font-weight: 800;
  background: var(--c-surface); border: 1.5px solid var(--c-line); color: var(--c-ink-soft); }
.step-panel[data-state="done"] .step-idx { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.step-panel[data-state="current"] .step-idx { border-color: var(--c-ink); color: var(--c-ink); }
.step-label { font-weight: 700; font-size: var(--f-sm); flex: none; }
.step-summary { flex: 1; text-align: right; color: var(--c-ink-soft); font-size: var(--f-xs);
  line-height: 1.5; }   /* 允許換行條列已選項目 */
.step-caret { flex: none; color: var(--c-ink-soft); transition: transform .18s ease; font-size: 12px; }
.step-panel[data-state="current"] .step-caret { transform: rotate(180deg); }
.step-body { padding: var(--s-4); border-top: 1px solid var(--c-line); }

/* ---- picker：月曆 ---- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.cal-title { font-weight: 800; font-size: var(--f-md); }
.cal-nav { width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--c-line);
  color: var(--c-ink); font-size: 16px; line-height: 1; display: grid; place-items: center; }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dows { margin-bottom: 4px; }
.cal-dow { text-align: center; font-size: var(--f-xs); color: var(--c-ink-soft); padding: 4px 0; }
.cal-cell { aspect-ratio: 1; border-radius: var(--r-sm); border: 1px solid transparent;
  display: grid; place-items: center; font-size: var(--f-sm); font-weight: 600; color: var(--c-ink);
  background: var(--c-surface-2); transition: all .12s ease; }
.cal-cell:hover:not(:disabled):not(.blank) { border-color: var(--c-ink-soft); }
.cal-cell.blank { background: none; }
.cal-cell.off { color: var(--c-ink-soft); opacity: .4; background: none; cursor: not-allowed; }
.cal-cell.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---- picker：時段格 ---- */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--s-2); }
.slot { position: relative; padding: var(--s-3) 0; border-radius: var(--r-md);
  border: 1px solid var(--c-line); background: var(--c-surface); font-weight: 700; font-size: var(--f-sm);
  font-variant-numeric: tabular-nums; transition: all .12s ease; }
.slot:hover:not(:disabled) { border-color: var(--c-ink-soft); }
.slot[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.slot:disabled { opacity: .3; text-decoration: line-through; cursor: not-allowed; }
.slot .badge { position: absolute; top: -8px; right: -4px; }
.slot-empty { color: var(--c-ink-soft); font-size: var(--f-sm); padding: var(--s-4) 0; text-align: center; }
.slot-retry { margin-left: var(--s-2); padding: 2px 12px; border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: none; color: inherit; font: inherit; cursor: pointer; }
.slot-retry:hover { border-color: var(--c-primary); color: var(--c-primary); }
.picker-hint { color: var(--c-ink-soft); font-size: var(--f-xs); margin: 0 0 var(--s-3); }

/* 卡尾：摘要 + 主行動（固定不捲） */
.sheet-foot { flex: none; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line); background: var(--c-surface); }
.foot-sum { flex: 1; min-width: 0; }
.foot-l1 { font-size: var(--f-xs); color: var(--c-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-l2 { font-weight: 800; font-size: var(--f-lg); }
.sheet-foot .btn-primary { flex: none; min-width: 116px; }

/* ===== 啟動畫面：資料從 API 載入期間蓋住整頁，失敗時顯示原因 ===== */
.boot { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: var(--c-bg); }
.boot-spin { width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--c-line); border-top-color: var(--c-primary);
  animation: boot-turn .8s linear infinite; }
@keyframes boot-turn { to { transform: rotate(360deg); } }
.boot.is-error .boot-spin { display: none; }
.boot-box { max-width: 300px; padding: 0 24px; text-align: center; }
.boot-title { font-weight: 800; font-size: var(--f-lg); margin-bottom: 6px; }
.boot-detail { color: var(--c-ink-soft); font-size: var(--f-sm); line-height: 1.6; }
.boot-retry { margin-top: 16px; padding: 8px 20px; border: 1px solid var(--c-line);
  border-radius: var(--r-pill); background: var(--c-surface); cursor: pointer;
  font-weight: 700; font-size: var(--f-sm); }
.boot-retry:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ===== 聯絡人頁（confirm.html） ===== */
.cf { max-width: 560px; padding-top: var(--s-5); padding-bottom: var(--s-7); }   /* 桌機也維持單欄表單寬 */
.cf-topbar .topbar-inner { max-width: 560px; }
.cf-back { font-size: var(--f-sm); font-weight: 700; color: var(--c-ink-2); white-space: nowrap; }
.cf-back:hover { color: var(--c-ink); }
.cf-shop { margin-left: auto; font-size: var(--f-sm); color: var(--c-ink-2); }
.cf-title { font-size: var(--f-xl); font-weight: 800; margin: 0 0 var(--s-4); }
.cf-h2 { font-size: var(--f-md); font-weight: 800; margin: 0 0 var(--s-3); }
.cf-sum, .cf-form, .cf-contact { margin-bottom: var(--s-4); }

/* 預約內容 */
.cf-when { font-weight: 800; font-size: var(--f-lg); font-variant-numeric: tabular-nums; margin-bottom: var(--s-3); }
.cf-items { list-style: none; margin: 0; padding: 0; }
.cf-item { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--c-line-2); }
.cf-item-time { flex: none; width: 44px; font-weight: 700; font-size: var(--f-sm); font-variant-numeric: tabular-nums; }
.cf-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cf-item-name { font-weight: 700; font-size: var(--f-sm); }
.cf-item-sub { font-size: var(--f-xs); color: var(--c-ink-soft); }
.cf-item-price { flex: none; font-weight: 700; font-size: var(--f-sm); }
.cf-total { display: flex; justify-content: space-between; padding-top: var(--s-3); border-top: 1px solid var(--c-line);
  font-weight: 800; font-size: var(--f-md); }

/* 表單 */
.cf-field { display: block; margin-bottom: var(--s-4); }
.cf-label { display: block; font-size: var(--f-sm); font-weight: 700; margin-bottom: var(--s-1); }
.cf-label em { font-style: normal; color: var(--c-danger); }
.cf-input { width: 100%; padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface); font: inherit; font-size: 16px; color: var(--c-ink); }  /* 16px 避免 iOS 聚焦時自動放大 */
.cf-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-ring); }
.cf-note { resize: vertical; min-height: 72px; }
.cf-check { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--f-sm); color: var(--c-ink-2);
  margin-bottom: var(--s-4); cursor: pointer; }
.cf-check input { margin-top: 4px; accent-color: var(--c-primary); }
.cf-notice { padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.cf-notice .notice-list { margin-bottom: var(--s-4); }
.cf-err { display: block; min-height: 0; font-size: var(--f-xs); color: var(--c-danger); margin-top: var(--s-1); }
.cf-err:empty { display: none; }
.cf-err-form { margin: 0 0 var(--s-3); font-size: var(--f-sm); }

/* 預約成功 */
.cf-done-head { text-align: center; padding: var(--s-5) 0 var(--s-4); }
.cf-done-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-pill);
  background: var(--c-success); color: #fff; font-size: 28px; font-weight: 800; margin-bottom: var(--s-3); }
.cf-done-head .cf-title { margin-bottom: var(--s-1); }
.cf-done-sub { margin: 0; color: var(--c-ink-soft); font-size: var(--f-sm); }
.cf-contact-txt { margin: 0 0 var(--s-3); font-size: var(--f-sm); color: var(--c-ink-2); }
.cf-contact-btns { display: flex; gap: var(--s-2); }
.cf-contact-btns .btn { flex: 1; }