/* ============================================================================
 * 全站元件樣式（T092）：Header / Footer / 漢堡抽屜。
 * 消費 design-tokens.css 的 var()，RWD 一律靠 CSS media query 驅動（非裝置判斷）。
 * 視覺對照 T091 截圖第一版，ui-ux 之後以 CDP 真渲染微調。
 * ==========================================================================*/

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; line-height: 1.8; }

a { color: inherit; }

/* 螢幕閱讀器專用（漢堡按鈕文字） */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Header ---------------- */
/* 設計權威 dc.html：sticky 頂欄、半透明奶油底 + backdrop blur + 底線；內容置中於 content-max-width。
   前版為 max-width 置中的 flex 列（底色不滿版、不 sticky）；T097 對齊設計改為滿版 sticky 條 + inner 置中。*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(250, 246, 237, 0.94);   /* 設計實測 */
  backdrop-filter: blur(8px);                     /* 設計實測 */
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);   /* 設計實測 #EDE3D2 */
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 14px 24px;               /* 設計實測 */
}

.site-header__brand {
  display: flex;
  align-items: center;              /* 設計：logo 與文字置中對齊（前版 baseline） */
  gap: 10px;                        /* 設計實測 */
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}

/* 設計實測：圓形 logo 42×42 */
.site-header__logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex: none;
}

.site-header__brand-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;                         /* 設計實測 */
  min-width: 0;
}

.site-header__brand-text {
  font-size: 17px;                  /* 設計實測 */
  font-weight: 900;
  color: var(--color-ink);
  letter-spacing: 0.01em;           /* 設計實測（品牌名為唯一例外，微字距） */
  white-space: nowrap;
  line-height: 1.2;
}

.site-header__subtitle {
  font-size: 10px;                  /* 設計實測 */
  letter-spacing: 0.34em;           /* 設計實測 */
  color: var(--color-ink-muted);
  line-height: 1.2;
}

/* 設計權威：logo 獨自靠左，nav + CTA 一組靠右（前版 space-between 誤把 nav 擠置中，T098 漏抓、業主親驗補抓）。 */
.site-header__nav--desktop { margin-left: auto; }

.site-header__nav--desktop ul {
  display: flex;
  align-items: center;
  gap: 22px;                        /* 設計實測（前版 24px） */
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav--desktop a {
  text-decoration: none;
  font-size: 14px;                  /* 設計實測 */
  color: var(--color-ink-handwritten);   /* 設計實測 inactive #5a473c */
  padding-bottom: 3px;              /* 設計實測 */
  border-bottom: 2px solid transparent;  /* inactive 透明；active 珊瑚（下方） */
}

.site-header__nav--desktop a:hover { color: var(--color-cta-coral); }

/* 設計權威：目前頁面 active 項目 = 深咖字 + 2px 珊瑚底線（④「底線不夠清楚」加粗到 2px + 珊瑚色） */
.site-header__nav--desktop a.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-cta-coral);
}
.site-header__nav--mobile a.is-active { color: var(--color-cta-coral); }

.site-header__cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background-color: var(--color-cta-coral);
  color: #FFFFFF;                    /* 設計 CDP 實測：珊瑚鈕白字（G2 T099，前為深咖 #3B2D25） */
  font-size: 0.875rem;               /* 14px（設計實測） */
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  cursor: pointer;
}

.site-header__hamburger:focus-visible {
  outline: 2px solid var(--color-cta-coral);
  outline-offset: 2px;
}

.site-header__hamburger-bar {
  display: block;
  width: 24px; height: 2px;
  margin: 0 auto;
  background-color: var(--color-ink);
  border-radius: 2px;
}

/* 手機抽屜：桌機隱藏，展開時（無 hidden 屬性）為直向清單 */
.site-header__nav--mobile { display: none; }

.site-header__nav--mobile:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-cream);
}

.site-header__nav--mobile ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header__nav--mobile a {
  text-decoration: none;
  font-weight: 700;
  color: var(--color-ink);
}

.site-header__cta--mobile { align-self: flex-start; }

/* ---------------- RWD：≤900px 收成漢堡＋抽屜 ---------------- */
@media (max-width: 900px) {
  .site-header__nav--desktop { display: none; }
  .site-header__inner > .site-header__cta { display: none; }
  .site-header__hamburger { display: inline-flex; }
}

/* ---------------- 內容 stub 頁 ---------------- */
.stub-page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

.stub-page .heading {
  font-size: var(--font-size-section);
  margin: 0 0 var(--space-md);
}

.stub-page .body-text {
  font-size: var(--font-size-body);
  color: var(--color-ink-secondary);
  margin: 0;
}

/* ---------------- Footer ---------------- */
.site-footer {
  background-color: var(--color-ink);
  color: var(--color-bg-cream);
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
}

.site-footer > * {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* 頂列：桌機三欄（品牌｜館別｜館別）同列；窄螢幕自動堆疊 */
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.site-footer__brand {
  flex: 1 1 260px;
  min-width: 260px;
}

.site-footer__brand-name {
  font-size: var(--font-size-card-title);
  margin: 0 0 var(--space-xs);
}

.site-footer__slogan {
  font-family: var(--font-handwritten);
  font-size: 1.75rem;
  margin: 0 0 var(--space-xs);
  color: var(--color-accent-yellow);
}

.site-footer__tagline {
  margin: 0 0 var(--space-xl);
  font-size: 0.875rem;      /* G6 T099：設計 14px（前為 16px） */
  color: #CBBFB5;           /* G6 T099：設計實測 #CBBFB5（前為 --color-border 略淺） */
}

.site-footer__branches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
}

.site-footer__branch { min-width: 200px; }

.site-footer__branch-name {
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}

.site-footer__branch-address,
.site-footer__branch-hours {
  margin: 0 0 var(--space-xs);
  color: var(--color-border);
  font-size: var(--font-size-body);
}

/* 底列：導覽（左）與版權（右）分置一列，中間分隔線；窄螢幕堆疊 */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(250, 246, 237, 0.18);
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav a {
  text-decoration: none;
  color: var(--color-bg-cream);
}

.site-footer__nav a:hover { color: var(--color-accent-yellow); }

.site-footer__copyright {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-eyebrow);
}

/* ============================================================================
 * 6 個內容列表頁（T093）：hero / 麵包屑 / 篩選 pill / 卡片 grid / 空狀態。
 * 只新增規則、消費既有 design-tokens.css；不改 T092 既有 header/footer/抽屜規則。
 * 視覺對照 T091 §二截圖第一版，ui-ux 之後以 CDP 真渲染微調。
 * ==========================================================================*/

.list-page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}

/* ---------------- 麵包屑 ---------------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-eyebrow);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-md);
}

.breadcrumbs a { color: var(--color-ink-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-cta-coral); }
.breadcrumbs__sep { color: var(--color-ink-muted); }

/* ---------------- 頁面 hero（T096 CDP 對齊：全寬 themed tint band、無圓角） ----------------
 * 設計實測：列表頁 hero 是滿版色帶（width=viewport、border-radius 0、padding 52/28/44），
 * 各頁依主題著色（course 珊瑚 / branch 湖水 / coach 薰紫 / event 黃 / testimonial 綠 / article 焦糖）。
 * 內容以 padding-inline max() 置中對齊 content-max-width（與 header/footer/首頁色帶一致）。*/
.page-hero {
  position: relative;                /* G4 T099：容納裝飾有機圓 */
  overflow: hidden;                  /* 設計實測：hero overflow:hidden，圓溢出處被色帶裁切 */
  border-radius: 0;
  padding-block: 52px 44px;
  padding-inline: max(var(--space-lg), calc((100% - var(--content-max-width)) / 2));
  margin: 0;
  background-color: var(--color-card-beige-tint); /* 預設；由 page-hero--{theme} 覆蓋 */
}

/* G4：hero 內文疊在裝飾圓之上 */
.page-hero > * { position: relative; z-index: 1; }

/* G4 T099：列表頁 hero 右上角裝飾有機圓（設計 CDP 逐頁實測 size/pos/色/border-radius）。
 * 各頁主題以 .page-hero--{theme}::before 覆蓋（色帶右上被 overflow:hidden 裁成半圓觀感）。*/
.page-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* 各列表頁主題底色（CDP 實測 hero band computed background-color） */
.page-hero--coral  { background-color: var(--color-card-coral-tint); }
.page-hero--aqua   { background-color: var(--color-card-aqua-tint); }
.page-hero--lilac  { background-color: var(--color-card-lilac-tint); }
.page-hero--yellow { background-color: var(--color-band-events); }
.page-hero--sage   { background-color: var(--color-card-sage-tint); }
.page-hero--beige  { background-color: var(--color-card-beige-tint); }

/* G4 T099：各主題裝飾圓（設計 CDP 逐頁實測 — 右上角有機圓，被 overflow:hidden 裁切） */
.page-hero--coral::before  { width: 230px; height: 200px; top: -60px; right: -40px;
  background: #F7E7D9; border-radius: 60% 40% 55% 45% / 50% 62% 38% 50%; }
.page-hero--aqua::before   { width: 210px; height: 190px; top: -50px; right: -30px;
  background: #CBE9EF; border-radius: 56% 44% 50% 50% / 52% 48% 52% 48%; }
.page-hero--lilac::before  { width: 200px; height: 180px; top: -46px; right: -24px;
  background: #E2D8F0; border-radius: 52% 48% 58% 42% / 46% 54% 46% 54%; }
.page-hero--yellow::before { width: 190px; height: 170px; top: -44px; right: -20px;
  background: #F4D66D; opacity: 0.7; border-radius: 58% 42% 46% 54% / 50%; }
.page-hero--sage::before   { width: 200px; height: 180px; top: -48px; right: -26px;
  background: #A8CEB3; opacity: 0.6; border-radius: 54% 46% 52% 48% / 48% 52% 48% 52%; }
.page-hero--beige::before  { width: 200px; height: 180px; top: -46px; right: -24px;
  background: #F0D6BD; border-radius: 50% 50% 56% 44% / 52% 46% 54% 48%; }

/* G4：課程頁（coral）額外左下小圓（設計實測；其餘頁無此第二圓） */
.page-hero--coral::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 90px; height: 80px; left: -20px; bottom: -24px;
  background: #F4D66D; opacity: 0.6;
  border-radius: 58% 42% 47% 53% / 46% 56% 44% 54%;
}

/* hero 內 eyebrow 12px / 700 / themed 色（CDP 實測） */
.page-hero .eyebrow { font-size: 0.75rem; font-weight: 700; margin: 0; line-height: normal; } /* G5 T099：設計 lh normal（前為 21.6px） */
.page-hero--coral  .eyebrow { color: var(--color-eyebrow-coral); }
.page-hero--aqua   .eyebrow { color: var(--color-eyebrow-aqua); }
.page-hero--lilac  .eyebrow { color: var(--color-eyebrow-lilac); }
.page-hero--yellow .eyebrow { color: var(--color-eyebrow-yellow); }
.page-hero--sage   .eyebrow { color: var(--color-eyebrow-sage); }
.page-hero--beige  .eyebrow { color: var(--color-eyebrow-beige); }

/* hero 內麵包屑：置於色帶頂、與色帶同底（保留既有 SEO/導覽，測試依賴其存在） */
.page-hero .breadcrumbs { margin-bottom: var(--space-md); }

/* T096 CDP 設計實測：列表頁 hero 標題 42px / 900 / 行高 1.2（前版 68px 偏大） */
.page-hero__title {
  font-size: 2.625rem;
  line-height: 1.2;
  margin: var(--space-md) 0 var(--space-md);
}

/* T096 CDP 設計實測：hero 說明 16px / 行高 1.9 */
.page-hero__intro {
  max-width: 46ch;
  color: var(--color-ink-secondary);
  font-size: 1rem;
  line-height: 1.9;
  margin: 0;
  text-wrap: pretty;
}

/* ---------------- 篩選列 / pill ---------------- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* T096 CDP 設計實測：篩選標籤 13px / 400（前版 700 偏粗） */
.filter-group__label {
  font-size: var(--font-size-eyebrow);
  font-weight: 400;
  color: var(--color-ink-muted);
  margin-right: var(--space-xs);
}

/* T096 CDP 設計實測：pill 13px / 400、padding 8px 15px、border 1px #EDE3D2 */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: #fff;
  color: var(--color-ink-secondary);
  font-size: 0.8125rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.pill:hover { border-color: var(--color-cta-coral); color: var(--color-cta-coral); }

/* 選中：深咖底 + 奶油字（設計實測 text #FAF6ED cream） */
.pill--active {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg-cream);
}

.pill--active:hover { color: var(--color-bg-cream); }

/* ---------------- 活動狀態 tab ---------------- */
/* T101 BATCH C：去容器化——設計為兩顆裸 pill、無外層淺底 bar（前版 tablist 是整條圓角分段控制列）。 */
.tablist {
  display: inline-flex;
  gap: var(--space-sm);
}

/* 設計 CDP 實測：未選 pill = 白底 + 1px #EDE3D2 邊 + #5A473C 字、pill 圓角、pad 10px 20px、14px/700。 */
.tab {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background-color: #fff;
  color: var(--color-ink-handwritten);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

/* 設計 CDP 實測：選中 pill = 深咖底 #3B2D25 + 奶油字 #FAF6ED、無陰影（前版白底 + 投影分段控制樣式）。 */
.tab--active {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-bg-cream);
  box-shadow: none;
}

/* ---------------- 卡片 grid ---------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* T096 CDP 設計實測：卡片無邊框、圓角 24px、輕柔陰影 0 6px 20px rgba(59,45,37,.07) */
.content-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 20px rgba(59, 45, 37, 0.07);
  transition: transform .15s ease, box-shadow .15s ease;
}

a.content-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(59, 45, 37, 0.12); }

/* T096 CDP 設計實測：封面比例約 290×208 ≈ 7/5（前版 16/10 偏扁） */
.content-card__cover {
  aspect-ratio: 7 / 5;
  background-color: var(--color-card-aqua-tint);
  overflow: hidden;
}

.content-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.content-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

.content-card__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background-color: var(--color-card-coral-tint);
  color: var(--color-ink);
  font-size: var(--font-size-eyebrow);
  font-weight: 700;
}

.chip--soft { background-color: var(--color-border-soft); color: var(--color-ink-secondary); }
.chip--live { background-color: var(--color-card-sage-tint); color: var(--color-ink); }
.chip--muted { background-color: var(--color-border); color: var(--color-ink-muted); }
/* T100 R3 CDP 設計實測：課程詳情「每堂80分鐘」chip 鵝黃填色 #FFC94D / 深咖字（前版中性灰 soft）。 */
.chip--yellow { background-color: #FFC94D; color: var(--color-ink); }

/* T101 BATCH C：文章列表卡分類 chip 設計 CDP 實測＝底色跟隨該卡自身輪播 tint（非固定玫紅
   #FDEDEC）、字 #5A473C、11px、pad 4px 10px。底色由模板 {% tint %} class 提供（見
   .tint-*，源序在 .chip 之後故覆蓋基底玫紅）；此處僅對齊字色/字級/內距。詳情頁 chip 為
   玫紅＝基底 .chip（收尾清理：article_detail 前誤用 chip--soft 中性灰、與設計玫紅不符，已改回純 .chip；
   T098 誤記「命中」、T101 CDP 抓出、本輪收尾修正）。 */
.content-card--article .chip {
  color: var(--color-ink-handwritten);
  font-size: 0.6875rem;
  padding: 4px 10px;
}

/* T096 CDP 設計實測：卡標 21px / 900（Noto Sans TC 黑體）、行高 1.35 */
.content-card__title { font-size: 1.3125rem; font-weight: 900; margin: 0; line-height: 1.35; }

/* T096 CDP 設計實測：卡片 summary 14px / 行高 1.8（前版 17px 偏大） */
.content-card__summary {
  margin: 0;
  color: var(--color-ink-secondary);
  font-size: 0.875rem;
  line-height: 1.8;
  text-wrap: pretty;
}
/* 文章列表摘要（業主回饋 2026-10-27 項目6）：保留後台輸入的斷行（linebreaksbr 產生 <br>），
   最多 3 行後省略；取代前版 truncatechars:50 硬截（斷行常在截斷前被切掉）。僅文章卡、不波及課程/活動。 */
.content-card--article .content-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-card__meta { margin: 0; color: var(--color-ink-secondary); font-size: var(--font-size-body); }
.content-card__meta--muted { color: var(--color-ink-muted); }
/* 教練列表簡介（業主回饋 2026-10-27 項目5）：保留後台斷行（linebreaksbr 產生 <br>），最多 3 行後省略；
   取代前版 truncatechars:50 硬截。專屬 class、不波及職稱列或其他 .content-card__meta。 */
.content-card__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.content-card__date { color: var(--color-ink-muted); font-size: var(--font-size-eyebrow); }
.content-card__link { color: var(--color-cta-coral); font-weight: 700; margin-top: var(--space-xs); }

/* T101 BATCH C：教練列表卡有機橢圓頭像，靠左滿版（設計 CDP 實測：181×170、
   border-radius 54% 46% 48% 52% / 50% 54% 46% 50%、左緣與內文齊平內縮 24px；前版 140px 圓形置中）。 */
.coach-card__avatar {
  aspect-ratio: 1 / 1;
  border-radius: 54% 46% 48% 52% / 50% 54% 46% 50%;
  width: auto;
  margin: var(--space-lg) var(--space-lg) 0;
  overflow: hidden;
  background-color: var(--color-card-lilac-tint);
}

.coach-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* T201：教練頭像焦點裁切改為業主拍板「只作用首頁教練團隊」。首頁 _home_coaches.html
   直接內聯 style="object-position: {{ coach.avatar_focal }}"（"x% y%" 由後端算，center=50% 50%＝現況），
   不再需要全站共用的 .focal--* class 組（T199 版已隨此移除）；其餘三處頭像回到瀏覽器預設置中。 */
/* T101 BATCH C：教練卡文字靠左（設計實測 text-align:start、頭像/名/職稱/專長皆齊左；前版置中）。 */
.content-card--coach { text-align: left; }

/* 學員成果卡（T102 BATCH D1 CDP 設計實測重構——業主拍板取代 T096 純白引言卡）：
   頂部學員照 tint 色塊/圖（293×174≈5/3）+ 引言 + 課程 chip；無暱稱、無標題（留白）。
   底色由 {% tint %} 輪播 class 提供（缺圖佔位、有圖時 img 覆蓋）；不再固定鵝黃。 */
.testimonial-card__photo {
  /* 直式 4:5（業主回饋 2026-10-27）：與首頁、內頁相簿一致、手機直照完整不裁頭腳。前版 5/3 橫式。 */
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.testimonial-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 設計實測：引言 15px / 400 / 行高 1.9（28.5px）/ #3B2D25（--color-ink，前版 17px / #6B5A4D） */
.testimonial-card__quote {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.9375rem;
  line-height: 1.9;
  text-wrap: pretty;
}
/* 設計實測：課程 chip 固定米/桃底 #F7E7D9 + #5A473C 字、11px / 700、pad 4px 10px
   （前版基底玫紅 #FDEDEC / 12px；此處對齊設計，非跟隨卡片輪播 tint）。 */
.content-card--testimonial .chip {
  background-color: var(--color-card-beige-tint);
  color: var(--color-ink-handwritten);
  font-size: 0.6875rem;
  padding: 4px 10px;
}

/* ---------------- 活動列（左圖右文） ---------------- */
.event-list { display: flex; flex-direction: column; gap: var(--space-lg); }

.event-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
}

.event-row:hover { box-shadow: var(--shadow-card-strong); }

.event-row__cover { background-color: var(--color-card-aqua-tint); min-height: 160px; }
.event-row__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.event-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
}

/* T101 BATCH C：日期灰弱化——設計 CDP 實測 #9C8B7C / 400 / 13px（前版 #9C8B7C 但 700 / 16px 偏粗大）。 */
.event-row__datetime { margin: 0; color: var(--color-ink-muted); font-weight: 400; font-size: 0.8125rem; }

/* ---------------- 空狀態 ---------------- */
.empty-state {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--color-ink-muted);
  font-size: var(--font-size-body);
  background-color: var(--color-card-beige-tint);
  border-radius: var(--radius-card);
}

/* ---------------- 卡片封面色卡系統（T096 混合制：業主拍板） ----------------
 * 混合規則：有上傳圖 → img（object-fit:cover）鋪滿蓋住色塊，顯示真實照片；
 *           無圖 → 該色塊呈現「純色實色 tint」（六色循環），非假佔位紋理。
 * T096 決策：業主任務明列「純色塊 tint／整張實色 tint」＝移除前版 T093 的斜線
 * placeholder 紋理（斜線是 dc-prototype 的『待填圖』佔位訊號、非生產樣式），
 * 改用乾淨實色（符合 §13 不上假佔位、更專業）。tint 色值仍取自設計六色 token。*/
.tint-coral  { background-color: var(--color-card-coral-tint); }
.tint-aqua   { background-color: var(--color-card-aqua-tint); }
.tint-sage   { background-color: var(--color-card-sage-tint); }
.tint-lilac  { background-color: var(--color-card-lilac-tint); }
.tint-yellow { background-color: var(--color-card-yellow-tint); }
.tint-beige  { background-color: var(--color-card-beige-tint); }

/* 課程卡底部（開課館別 + 珊瑚圓箭頭），對齊設計卡片右下角箭頭鈕 */
.content-card--course .content-card__body { flex: 1; }
.content-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-xs);
}
/* T096 CDP 設計實測：右下珊瑚圓箭頭 30×30、字 14px */
.content-card__arrow {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-cta-coral);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1;
}
a.content-card--course:hover .content-card__arrow { filter: brightness(0.95); }

/* ================================================================
 * T094 詳情頁（course/branch/coach/event/article）——只新增規則
 * ================================================================ */

/* ---------------- 詳情頁容器 ---------------- */
.detail-page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}
/* 文章詳情用較窄的閱讀寬度（對齊 T091 設計：文章為置中窄欄，提升長文可讀性）。 */
.detail-page--article { max-width: 760px; }

/* ---------------- 按鈕 ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
/* 設計權威 CDP 實測：珊瑚鈕文字為深咖 ink（非白字），全站一致（預約體驗課/立即預約/報名等） */
.btn--coral { background-color: var(--color-cta-coral); color: var(--color-ink); }
.btn--coral:hover { filter: brightness(0.95); }
.btn--outline {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn--outline:hover { border-color: var(--color-cta-coral); color: var(--color-cta-coral); }
.btn--outline-invert {
  background-color: #fff;
  color: var(--color-ink);
  border-color: var(--color-border-soft);
}
.btn--outline-invert:hover { filter: brightness(0.97); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ---------------- 區塊小標（T096 CDP 設計實測：詳情頁區塊標 24px / 900） ---------------- */
.section-title {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 var(--space-md);
}

/* ---------------- 詳情 hero ---------------- */
.detail-hero {
  margin-bottom: var(--space-xl);
}
/* T096 CDP 設計實測：詳情頁 hero 大標 42px / 900 / 行高 1.2（文章詳情 36px） */
.detail-hero h1 {
  font-size: 2.625rem;
  line-height: 1.2;
  margin: var(--space-sm) 0 var(--space-md);
}
.detail-page--article .detail-hero h1 { font-size: 2.25rem; }
.detail-hero--course {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.detail-hero__media img,
.detail-hero__avatar img,
.detail-hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* T100 R5 CDP 設計實測：課程 hero 右側課堂照為有機橢圓 blob（前版 radius-card 圓角方形、aspect 4/3）。
   缺 cover_media 時以珊瑚 tint 柔和色塊優雅佔位（§6.7 G8：不塞假圖）。 */
.detail-hero__media {
  border-radius: 58% 42% 52% 48% / 48% 55% 45% 52%;
  overflow: hidden;
  aspect-ratio: 597 / 320;
  background-color: var(--color-card-coral-tint);
}
.detail-hero__banner {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  margin-bottom: var(--space-md);
}
/* T100 R8 CDP 設計實測：活動 hero 頂部主圖 banner＝radius 28 / 寬幅（1224×336）/ 缺圖鵝黃 tint 佔位。
   僅 .detail-hero--event 作用域，避免波及 branch / article 的 .detail-hero__banner。 */
.detail-hero--event .detail-hero__banner {
  border-radius: 28px;
  aspect-ratio: 1224 / 336;
  background-color: var(--color-card-yellow-tint);
}
/* T103 branch 詳情頂部場館 banner（CDP 設計實測：radius 28 / 寬幅 1224×336 / 缺圖湖水 tint 佔位）。
   同 event banner family，僅 .detail-hero--branch 作用域，避免波及 course/article 的 __banner。 */
.detail-hero--branch .detail-hero__banner {
  border-radius: 28px;
  aspect-ratio: 1224 / 336;
  background-color: var(--color-card-aqua-tint);
  margin-bottom: var(--space-lg);
}
/* T103 資訊 / 地圖 雙欄（CDP 設計實測：等寬 1fr 1fr、gap 30px、地圖填滿右欄與左欄等高）。 */
.branch-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
}
.branch-info-col { display: flex; flex-direction: column; }
.branch-info-col > h1:first-child { margin-top: 0; }
/* 右欄地圖填滿欄高；min-height 保底（設計實測地圖塊 283px），避免手機堆疊時 iframe 高度塌陷為 0 */
.branch-map-col .map-embed {
  height: 100%;
  min-height: 283px;
  margin: 0;
}
.branch-map-col .map-embed iframe { height: 100%; }
/* 缺 map_url 時湖畔綠 tint 佔位（CDP 設計實測 radius 22），維持雙欄不塌（§6.7 G8：不塞假圖） */
.map-embed--placeholder {
  height: 100%;
  min-height: 283px;
  border-radius: 22px;
  background-color: var(--color-card-sage-tint);
}
.detail-hero--coach { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-xl); align-items: start; }
/* 方案 B（2026-10-27 業主拍板）：教練相簿疊在頭像正下方、同一左欄（280px）；照片縮小 2 張並排。
   grid 覆寫 base .photo-gallery 的 auto-fill(160px)——窄欄只擠得下 1 張，故強制 2 欄。
   選擇器用 .detail-hero--coach .photo-gallery--coach（0,2,0）以勝過 base 與行動版 .photo-gallery（0,1,0）。 */
.detail-hero__media-col { display: flex; flex-direction: column; gap: var(--space-md); }
.detail-hero--coach .coach-gallery { margin: 0; }
.detail-hero--coach .photo-gallery--coach { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; }
/* T100 R9 CDP 設計實測：教練 hero 形象照為有機橢圓 blob（前版 radius-card 圓角方形）。 */
.detail-hero__avatar {
  border-radius: 56% 44% 50% 50% / 48% 56% 44% 52%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-card-coral-tint);
}
/* T100 職稱 eyebrow（名上方）：後端補 role 後自動點亮（設計「體能主教練」13px/字距 2.6/muted）。 */
.detail-hero__eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: 13px;
  letter-spacing: 2.6px;
  font-weight: 700;
  color: var(--color-ink-muted);
}

/* ---------------- 館別資訊列表 ---------------- */
.info-list { margin: var(--space-md) 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.info-item { margin: 0; color: var(--color-ink-secondary); }
.info-item__label {
  display: inline-block;
  min-width: 5em;
  font-weight: 700;
  color: var(--color-ink-muted);
  margin-right: var(--space-sm);
}

.social-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 700;
}
.social-btn:hover { border-color: var(--color-cta-coral); color: var(--color-cta-coral); }

/* ---------------- 地圖 / 影片 嵌入 ---------------- */
.map-embed, .video-embed {
  margin: var(--space-lg) 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.map-embed iframe { width: 100%; height: 360px; border: 0; display: block; }
/* 影片形狀跟著類型走（主線3，2026-10-27）：容器定比例、iframe 填滿。
   landscape＝16:9（YouTube/FB 影片，預設）；reel＝9:16 直式置中限寬；post＝IG/FB 貼文卡（偏高、置中限寬）。 */
.video-embed { aspect-ratio: 16 / 9; }
.video-embed--reel { aspect-ratio: 9 / 16; max-width: 380px; margin-inline: auto; }
.video-embed--post { aspect-ratio: 3 / 4; max-width: 480px; margin-inline: auto; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------- 場館照片相簿 ----------------
   T103 CDP 設計實測：桌機一列 6 張縮圖（等寬）、小 gap（≈12px）、方形偏 4/3、圓角約 16px。
   用 auto-fill minmax 以近似設計 6-across 並容忍照片張數變動（1 張不孤、7+ 自然換行）。 */
.branch-gallery { margin: var(--space-xl) 0; }
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: var(--space-md) 0 0;
}
.photo-gallery__item { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; }
.photo-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- 資訊卡格網 ---------------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}
/* T100 R1 CDP 設計實測：白底 #FFFFFF / radius 18px / pad 20px 22px / box-shadow none
   （前版桃底 beige-tint #F7E7D9、radius 22px、pad 16px）。course + event 詳情共用。 */
.info-card {
  background-color: #FFFFFF;
  border-radius: 18px;
  padding: 20px 22px;
}
.info-card__label { margin: 0 0 var(--space-xs); font-size: 0.75rem; color: var(--color-ink-muted); font-weight: 400; }
.info-card__value { margin: 0; color: var(--color-ink); }

/* ---------------- 內文（重用 content-html-render） ---------------- */
.course-content, .article-content { margin: var(--space-lg) 0; }

/* T100 R2：課程內容各區塊標題前的彩色小圓點（設計：珊瑚/湖水/草綠/薰紫循環）。
   內容為 sanitize 後 content_html，區塊標題固定為 <h2>，用 :nth-of-type 循環配色
   （不受區塊間 <p> 干擾）。僅 .course-content（article 不套）。 */
.course-content h2 {
  display: flex;
  align-items: center;
  gap: 12px;
}
.course-content h2::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-card-coral);   /* 1、5… 珊瑚 */
}
.course-content h2:nth-of-type(4n + 2)::before { background-color: var(--color-card-aqua); }
.course-content h2:nth-of-type(4n + 3)::before { background-color: var(--color-card-sage); }
.course-content h2:nth-of-type(4n)::before { background-color: var(--color-card-lilac); }

/* ---------------- FAQ 手風琴 ---------------- */
.faq-accordion { margin: var(--space-xl) 0; }
.faq-item {
  border-bottom: 1px solid var(--color-border-soft);
  padding: var(--space-md) 0;
}
.faq-item summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "＋"; float: right; color: var(--color-ink-muted); }
.faq-item[open] summary::after { content: "－"; }
.faq-item p { margin: var(--space-sm) 0 0; color: var(--color-ink-secondary); }

/* ---------------- 兩欄卡（教練經歷/證照） ---------------- */
.two-col-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}
/* T100 R11 CDP 設計實測：教練經歷/證照卡＝白底 / radius 22 / pad 26 / 無框 / 無陰影 / 條列無項目符
   （前版奶油底 + 1px 框 + 「•」項目符）。 */
.info-card-block {
  background-color: #FFFFFF;
  border: none;
  border-radius: 22px;
  padding: 26px;
}
.info-card-block ul { margin: 0; padding-left: 0; list-style: none; color: var(--color-ink-secondary); }
.info-card-block li { margin-bottom: var(--space-sm); }

/* ---------------- 相關內容格網 ---------------- */
.related-course-grid, .related-coach-grid { margin: var(--space-xl) 0; }
/* T100 R4 CDP 設計實測：帶課教練小卡＝白底 radius 20 / pad 18 的橫式卡（前版無框、置中、頭像上名下）。
   卡寬約 232px → grid 用 minmax(220px) 讓每列排 2–3 張。 */
.card-grid--mini { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.coach-mini-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: #FFFFFF;
  border-radius: 20px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  text-align: left;
}
.coach-mini-card__avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0;
}
.coach-mini-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach-mini-card__text { min-width: 0; }
.coach-mini-card__name { margin: 0; font-weight: 700; }
/* 職稱列（設計「體能主教練」小字）：後端補 role 欄位後自動點亮 */
.coach-mini-card__role { margin: 2px 0 0; font-size: 13px; color: var(--color-ink-muted); }

/* ---------------- CTA banner ---------------- */
.cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-card);
  margin: var(--space-xl) 0 0;
}
.cta-banner p { margin: 0; font-size: var(--font-size-card-title); font-weight: 700; }
/* T100 R7 CDP 設計實測：活動詳情 CTA banner＝珊瑚實色底 #FF7F7F / 白字 / radius 26 / pad 32 + 白鈕
   （前版淺粉 coral-tint + 珊瑚鈕）。僅 event 使用 --coral；article 用 --pink、course 用 --lilac 不受影響。 */
.cta-banner--coral { background-color: var(--color-cta-coral); border-radius: 26px; padding: 32px; }
.cta-banner--coral p { color: #FFFFFF; }
.cta-banner--lilac { background-color: var(--color-card-lilac-tint); }
.cta-banner--pink { background-color: var(--color-card-coral-tint); }

/* ---------------- RWD：手機單欄 ---------------- */
@media (max-width: 640px) {
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 1fr; }
  /* hero band 保持全寬；只縮 padding-block 與標題字級（勿用 padding shorthand 破壞置中） */
  .page-hero { padding-block: var(--space-xl) var(--space-lg); }
  .page-hero__title { font-size: var(--font-size-section); }
  .detail-hero h1 { font-size: var(--font-size-section); }
  .detail-page--article .detail-hero h1 { font-size: 1.75rem; }
  .detail-hero--course, .detail-hero--coach { grid-template-columns: 1fr; }
  /* T103 branch 資訊/地圖雙欄手機自然堆疊為單欄 */
  .branch-layout { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
  .cta-banner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
 * 品牌首頁（T095 高保真對齊）：全寬交替色帶 + Hero + 區塊標題 + 特色 grid + CTA band。
 * 逐項對齊設計權威檔 design_delivery/霏翔官網.dc.html 的 CDP 實測 computed 值。
 * 設計採「全寬滿版色帶」（各區塊各自一個底色帶、上下 56px），內容再以 padding-inline
 * 置中於 --content-max-width（與 header/footer 對齊）。
 * ==========================================================================*/

/* 首頁改為全寬（各色帶滿版），不再是置中窄容器 */
.home-page { max-width: none; margin: 0; padding: 0; }

/* 色帶內容置中：窄邊距 max(24px, (100%-1160)/2)，寬螢幕置中對齊 header/footer */
.home-section,
.hero {
  padding-block: 56px;
  padding-inline: max(var(--space-lg), calc((100% - var(--content-max-width)) / 2));
  margin: 0;
}

/* 各區塊全寬色帶（對齊設計實測 computed background-color） */
.hero                        { background-color: var(--color-bg-cream); padding-block: 40px 48px; }
.home-section--about         { background-color: var(--color-bg-cream); }
.home-section--courses       { background-color: var(--color-band-course); }
.home-section--features      { background-color: var(--color-bg-cream); }
.home-section--coaches       { background-color: var(--color-card-lilac-tint); }
.home-section--branches      { background-color: var(--color-bg-cream); }
.home-section--events        { background-color: var(--color-band-events); }
.home-section--testimonials  { background-color: var(--color-card-sage-tint); }
.home-section--articles      { background-color: var(--color-bg-cream); }
.home-section--closing       { background-color: var(--color-card-beige-tint); }

/* ---------------- Hero（設計實測：左文右視覺兩欄 grid + 有機裝飾色塊）----------------
 * 設計 dc.html 首段：position:relative overflow:hidden，內含 2 顆背景有機色塊（絕對定位、
 * 純裝飾 aria-hidden，比照 T097 ::before 斜線疊加的裝飾用絕對定位慣例）；內容為 grid 兩欄。*/
.hero {
  position: relative;
  overflow: hidden;
}
/* 背景裝飾有機色塊（設計實測：blob1 260×230 #FDEDEC 左上；blob2 170×150 #F0EBF7 左下） */
.hero__blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.hero__blob--1 {
  width: 260px; height: 230px;
  background-color: var(--color-card-coral-tint);   /* #FDEDEC */
  border-radius: 60% 40% 55% 45% / 50% 62% 38% 50%;
  top: -70px; left: -80px;
}
.hero__blob--2 {
  width: 170px; height: 150px;
  background-color: var(--color-card-lilac-tint);   /* #F0EBF7 */
  border-radius: 52% 48% 58% 42% / 46% 54% 46% 54%;
  bottom: 40px; left: -60px;
}
/* 內容兩欄（設計實測：auto-fit minmax(280,1fr) gap36 align center） */
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  align-items: center;
}
.hero__info {
  display: flex;
  flex-direction: column;
  gap: 26px;                    /* 設計實測 */
}
.hero__headline {
  font-size: 4.5rem;            /* 72px（設計實測） */
  line-height: 1.14;            /* 82.08px / 72px */
  letter-spacing: 0.06em;       /* 4.32px / 72px（設計對大標亦加字距） */
  margin: 0;
}
/* 設計實測：Hero 副標為手寫體（Caveat 拉丁 → Iansui 中文）26px / 行高1.5 / #5A473C */
.hero__subtitle {
  font-family: var(--font-handwritten);
  font-size: 26px;             /* 設計實測 */
  line-height: 1.5;            /* 設計實測 */
  color: var(--color-ink-handwritten);   /* #5A473C */
  margin: 0;
}
/* Hero CTA 列（設計實測：gap12、無上外距，尺寸 15px/padding 15×28） */
.hero__cta { gap: 12px; margin-top: 0; }
.hero .btn { padding: 15px 28px; font-size: 15px; }
/* Hero 次要 CTA「▶觀看課程影片」設計：白底 + 深咖框 1.5px（非全站淺框） */
.hero .btn--outline {
  background-color: #fff;
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}
.hero .btn--outline:hover { filter: brightness(0.97); border-color: var(--color-ink); color: var(--color-ink); }

/* 能力 icon 列（設計實測：flex gap14 wrap、每項 62px 圓 + 內描邊形 + 12px/700 標籤）。
   icon 為缺圖示素材的占位（沿用設計抽象描邊形），底色循環六色卡淺底。 */
.ability-list {
  list-style: none;
  margin: 0;
  padding: 6px 0 0;            /* 設計實測 padding-top:6px */
  display: flex;
  flex-wrap: wrap;
  gap: 14px;                    /* 設計實測 */
}
.ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;                     /* 設計實測 */
  width: 76px;                  /* 設計實測 */
}
.ability__icon {
  width: 62px; height: 62px;    /* 設計實測 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ability:nth-child(1) .ability__icon { background-color: var(--color-card-coral-tint); }
.ability:nth-child(2) .ability__icon { background-color: var(--color-card-yellow-tint); }
.ability:nth-child(3) .ability__icon { background-color: var(--color-card-lilac-tint); }
.ability:nth-child(4) .ability__icon { background-color: var(--color-card-aqua-tint); }
.ability:nth-child(5) .ability__icon { background-color: var(--color-card-sage-tint); }
.ability__shape {
  width: 22px; height: 22px;
  border: 2.5px solid var(--color-ink);   /* 設計實測 2.5px 描邊 */
  border-radius: 50%;
}
.ability:nth-child(2) .ability__shape { border-radius: 6px; }
.ability:nth-child(3) .ability__shape { width: 18px; height: 24px; border-radius: 999px; }
.ability:nth-child(4) .ability__shape { border-radius: 10px; width: 24px; height: 20px; }
.ability:nth-child(5) .ability__shape { border-radius: 3px; width: 18px; height: 18px; }
.ability__label {
  font-size: 12px;              /* 設計實測 */
  font-weight: 700;
  color: var(--color-ink-handwritten);   /* #5A473C */
  white-space: nowrap;
}

/* Hero 右視覺（占位：柔和有機色塊留白，不塞假圖）＋ Play/Move/Grow 手寫 accent。 */
.hero__visual {
  position: relative;
  min-height: 360px;            /* 設計實測 */
  display: flex;
  align-items: center;
}
.hero__visual-blob {
  position: absolute;
  width: 170px; height: 150px;
  background-color: var(--color-card-coral-tint);   /* #FDEDEC */
  border-radius: 56% 44% 50% 50% / 52% 48% 52% 48%;
  bottom: -20px; right: 0;
  z-index: 0;
}
.hero__visual-shape {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 360px;                /* 設計實測 */
  border-radius: 46% 54% 40% 60% / 44% 38% 62% 56%;   /* 設計實測有機圓角 */
  background-color: var(--color-card-aqua-tint);       /* #E6F4F7 */
  overflow: hidden;
}
/* 有上傳圖 → <img object-fit:cover> 鋪滿有機圓角框並被 overflow:hidden 裁切，
 * 長圖/寬圖皆等比填滿、不變形、不露底色（比照 about-grid__media img 慣例）。 */
.hero__visual-shape img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 主視覺占位上的 135° 白斜線紋理（設計占位處理；僅在「無上傳圖」的裝飾留白態顯示，
 * 有真圖時隱藏斜線，避免紋理疊在照片上影響觀看）。 */
.hero__visual-shape:not(:has(img))::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.36) 0,
    rgba(255, 255, 255, 0.36) 12px,
    rgba(255, 255, 255, 0) 12px,
    rgba(255, 255, 255, 0) 24px
  );
}
.hero__visual-accent {
  position: absolute;
  z-index: 2;
  right: -6px; top: 16px;       /* 設計實測 */
  margin: 0;
  font-family: var(--font-handwritten);
  /* T197：品牌標語（PLAY｜玩出探索…）比原 Play/Move/Grow 每行長很多 →
     由 30px 收到 22px，讓其回到「右上角小手寫 accent」的設計氣質、不喧賓奪主蓋掉 Hero 主視覺；
     CDP 實測 22px 三行仍清楚可讀、不溢出視窗、不破版。 */
  font-size: 22px;             /* T197：原 30px（設計實測），為容納較長品牌標語收窄 */
  line-height: 1.3;
  color: var(--color-ink);      /* #3B2D25 */
  text-align: center;
}

/* ---------------- 區塊標題（設計實測：eyebrow 12px themed / 標題 36px / 更多＝白藥丸鈕） ---------------- */
.section-header { margin-bottom: var(--space-lg); }
.section-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;         /* 設計：標題與更多鈕底對齊 */
  justify-content: space-between;
  gap: var(--space-lg);          /* 設計實測 20px */
}
.section-header__title {
  font-size: 2.25rem;            /* 36px（設計實測、YuPearl 900） */
  line-height: 1.2;
  margin: var(--space-md) 0 0;   /* eyebrow→title 16px（設計實測） */
}
.section-header .eyebrow { margin: 0; }
.section-header__intro {
  max-width: 52ch;
  color: var(--color-ink-secondary);
  margin: var(--space-sm) 0 0;
  text-wrap: pretty;
}
/* 「更多」連結：設計為白底藥丸鈕（非珊瑚文字連結） */
.section-header__link {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background-color: #fff;
  color: var(--color-ink);
  font-size: 0.875rem;          /* 14px（設計實測） */
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--color-border-soft);
}
.section-header__link:hover { filter: brightness(0.97); color: var(--color-ink); }

/* 「更多」鈕邊框（設計實測逐段不同）：熱門課程 / 最新文章＝白底 + 深咖框 1.5px；
   教練 / 活動 / 學員成果＝白底無框。 */
.home-section--courses .section-header__link,
.home-section--articles .section-header__link {
  border: 1.5px solid var(--color-ink);
}
.home-section--coaches .section-header__link,
.home-section--events .section-header__link,
.home-section--testimonials .section-header__link {
  border: 0;
}

/* eyebrow 主題色（設計實測：about/course 珊瑚、coach 薰紫） */
.home-section--about .eyebrow,
.home-section--courses .eyebrow { color: var(--color-eyebrow-coral); }
.home-section--coaches .eyebrow { color: var(--color-eyebrow-lilac); }

/* ---------------- 品牌理念 ABOUT（設計實測：三欄 grid = 情境照占位 | 文字 | 手寫 accent）---- */
.home-section--about { position: relative; overflow: hidden; }
/* 背景裝飾有機色塊（設計實測：280×240 #E9F5EC 右上） */
.home-section--about__blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 280px; height: 240px;
  background-color: var(--color-card-sage-tint);   /* #E9F5EC */
  border-radius: 58% 42% 46% 54% / 50% 54% 46% 50%;
  top: 20px; right: -90px;
}
.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;                     /* 設計實測 */
  align-items: center;
}
/* 理念情境照（混合制、比照 hero__visual-shape）：
 *  有上傳圖 → <img object-fit:cover> 鋪滿並被有機圓角裁切（overflow:hidden）；
 *  無圖 → 呈現柔和有機色塊留白、不塞假圖。 */
.about-grid__media {
  height: 300px;                 /* 設計實測 */
  border-radius: 52% 48% 42% 58% / 48% 44% 56% 52%;   /* 設計實測有機圓角 */
  background-color: var(--color-card-lilac-tint);      /* #F0EBF7 */
  overflow: hidden;
}
.about-grid__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-grid__body {
  display: flex;
  flex-direction: column;
  gap: 16px;                     /* 設計實測 */
}
.about-grid__body .section-header { margin-bottom: 0; }
/* 手寫 accent 欄（設計實測：Caveat/Iansui 26px 行高1.6 #3B2D25 + 72×2px 底線） */
.about-grid__accent {
  display: flex;
  flex-direction: column;
  gap: 10px;                     /* 設計實測 */
  align-items: flex-start;
}
.about-grid__accent-text {
  margin: 0;
  font-family: var(--font-handwritten);
  font-size: 26px;               /* 設計實測 */
  line-height: 1.6;              /* 設計實測 */
  color: var(--color-ink);       /* #3B2D25 */
}
.about-grid__accent-line {
  width: 72px; height: 2px;      /* 設計實測 */
  background-color: var(--color-ink);
}

/* 品牌理念長文（設計實測：16px / 行高 2.05 / #6B5A4D） */
.home-section--about__body {
  color: var(--color-ink-secondary);
  margin: 0;
  line-height: 2.05;
  text-wrap: pretty;
}
/* about 段「認識我們」鈕（設計實測：白底 + 深咖框 1.5px + 15px + padding 14×26） */
.home-section--about .btn--outline-invert {
  align-self: flex-start;
  border: 1.5px solid var(--color-ink);
  font-size: 15px;
  padding: 14px 26px;
}

/* ---------------- 教學特色 grid（設計實測：白卡 radius24 pad26 無框無影、標題 19px/900） ---------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.feature-card {
  background-color: #fff;
  border: 0;
  border-radius: 24px;
  padding: 26px;
  box-shadow: none;
}
.feature-card__title {
  font-size: 1.1875rem;         /* 19px（設計實測） */
  font-weight: 900;
  margin: 0 0 var(--space-sm);
}
.feature-card__desc {
  color: var(--color-ink-secondary);
  margin: 0;
  line-height: 1.8;
}

/* ============================================================================
 * T097 首頁專屬卡片（≠ 列表頁卡片）——逐屬性 1:1 復刻設計權威 dc.html 首頁段。
 * 六段各有樣式：課程＝淺色卡底+角落白圓塊；教練＝白卡+有機頭像；館別＝白卡頂圖+左右列；
 * 活動＝白卡頂圖+垂直文；成果＝純引言白卡+小圓塊作者列；文章＝白卡頂圖+meta。
 * 混合制：有 cover→真照片鋪滿、無圖→tint 底 + 135° 白斜線占位（.home-card__stripes）。
 * grid 值（gap / minmax）逐段取自設計實測；共用色票/字體走 var()。
 * ==========================================================================*/
.home-cards { display: grid; gap: 18px; }
.home-cards--courses      { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.home-cards--coaches      { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.home-cards--branches     { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.home-cards--events       { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* auto-fill（非 auto-fit）：封面改直式 4:5 後，少數卡片不被拉成全寬巨圖、維持固定卡寬、右側留白
   （業主回饋 2026-10-27 項目9）。排滿時與 auto-fit 相同。 */
.home-cards--testimonials { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.home-cards--articles     { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* 無圖占位：135° 白斜線疊在 tint 底上（設計實測 rgba(255,255,255,.34) 0→12 / 透明 12→24） */
.home-card__stripes {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.34) 0,
    rgba(255, 255, 255, 0.34) 12px,
    rgba(255, 255, 255, 0) 12px,
    rgba(255, 255, 255, 0) 24px
  );
}

/* 共用卡片 hover（設計為靜態原型無 hover；此為互動回饋增強，不改 resting 版面） */
a.home-course-card:hover,
a.home-coach-card:hover,
a.home-branch-card:hover,
a.home-event-card:hover,
a.home-article-card:hover,
a.home-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(59, 45, 37, 0.12);
}
a.home-course-card, a.home-coach-card, a.home-branch-card,
a.home-event-card, a.home-article-card, a.home-testimonial-card { transition: transform .15s ease, box-shadow .15s ease; }

/* ---- 課程（設計實測：整卡 tint 底 radius26 pad26 min-h210；右下 130 白圓塊裝飾） ---- */
.home-course-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 210px;
  padding: 26px;
  border-radius: 26px;
  text-decoration: none;
  color: inherit;
}
.home-course-card__title {
  position: relative; z-index: 1;
  font-size: 24px; font-weight: 900; line-height: 1.4;
  color: var(--color-ink); margin: 0;
}
.home-course-card__summary {
  position: relative; z-index: 1;
  font-size: 14px; line-height: 1.85; max-width: 60%;
  color: var(--color-ink-handwritten); margin: 0; text-wrap: pretty;
}
.home-course-card__arrow {
  position: relative; z-index: 1;
  margin-top: auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-cta-coral); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.home-course-card__blob {
  position: absolute; right: -10px; bottom: -10px; z-index: 0;
  width: 130px; height: 130px;
  border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
.home-course-card__blob img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 教練（設計實測：白卡 radius22 pad20 gap12；頂部有機圓角頭像 140px） ---- */
.home-coach-card {
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border-radius: 22px; padding: 20px;
  text-decoration: none; color: inherit;
}
.home-coach-card__avatar {
  position: relative; overflow: hidden;
  width: 140px; height: 140px;
  border-radius: 50%;
  align-self: center;
}
.home-coach-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-coach-card__name { font-size: 18px; font-weight: 900; color: var(--color-ink); margin: 0; }
.home-coach-card__role {
  font-size: 12px; color: var(--color-ink-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- 館別（設計實測：白卡 radius24；頂圖 170px；body 左右列 pad 22/24 gap14；珊瑚圓箭頭 34） ---- */
.home-branch-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 24px; overflow: hidden;
  text-decoration: none; color: inherit;
}
.home-branch-card__cover { position: relative; height: 170px; overflow: hidden; }
.home-branch-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-branch-card__body {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 22px 24px;
}
.home-branch-card__lines { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-branch-card__name { font-size: 21px; font-weight: 900; color: var(--color-ink); margin: 0; }
.home-branch-card__address { font-size: 14px; color: var(--color-ink-secondary); margin: 0; }
.home-branch-card__arrow {
  flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-cta-coral); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* ---- 活動（設計實測：白卡 radius24；頂圖 150px；body 垂直 pad 20/22/24 gap8） ---- */
.home-event-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 24px; overflow: hidden;
  text-decoration: none; color: inherit;
}
.home-event-card__cover { position: relative; height: 150px; overflow: hidden; }
.home-event-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-event-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.home-event-card__date { font-size: 12px; color: var(--color-ink-muted); margin: 0; }
.home-event-card__title { font-size: 20px; font-weight: 900; color: var(--color-ink); margin: 0; }
.home-event-card__summary {
  font-size: 14px; line-height: 1.8; color: var(--color-ink-secondary); margin: 0; text-wrap: pretty;
}

/* ---- 學員成果（T257：業主回饋 R8 改為比照「活動」卡——白卡 radius24 頂圖 150px + 垂直 body；
       取代 T097 純引言白卡；無照片沿用活動卡 tint+斜線占位。
   T260（R8 續）：body 順序與視覺比照活動卡＝標題 title（.home-event-card__title 20px/900）在上、
   內文 content（.home-event-card__summary 14px/lh1.8）在下，與「最新活動」區塊調性一致） ---- */
.home-testimonial-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 24px; overflow: hidden;
  text-decoration: none; color: inherit;
}
/* 封面改直式 4:5（業主回饋 2026-10-27 項目9）：手機直照完整呈現、不裁頭腳；僅首頁卡片。 */
.home-testimonial-card__cover { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.home-testimonial-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-testimonial-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.home-testimonial-card__title { font-size: 20px; font-weight: 900; color: var(--color-ink); margin: 0; }
.home-testimonial-card__quote {
  font-size: 14px; line-height: 1.8; color: var(--color-ink-secondary); margin: 0; text-wrap: pretty;
}

/* ---- 文章（設計實測：白卡 radius22；頂圖 140px；body pad 18/20/22 gap8） ---- */
.home-article-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 22px; overflow: hidden;
  text-decoration: none; color: inherit;
}
.home-article-card__cover { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.home-article-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-article-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.home-article-card__meta { font-size: 12px; color: var(--color-ink-muted); margin: 0; }
.home-article-card__title {
  font-size: 18px; font-weight: 900; line-height: 1.5; color: var(--color-ink); margin: 0;
}

/* ---------------- 結尾 CTA band（T097 逐屬性 1:1 對齊設計權威 dc.html）----------------
 * 設計 band：整條底 #F7E7D9（由 .home-section--closing 的 --color-card-beige-tint 提供）
 *   ＋ 一層 135deg 白色斜線疊加（::before、設計裝飾，還原被誤刪的元素）。
 * 內容＝左文 + 右白卡的兩欄 flex（gap 28、wrap、space-between、align center、width 100%）。
 * 🔴 不重用共用 .cta-banner（那是 detail 頁單行 CTA、值不同）；本段以獨立語意 class 實作，
 *    作為「乾淨語意 code 逐屬性復刻」的全站範本。段專屬幾何值直接寫在 class（比照本檔
 *    .feature-card 24px/26px 既有慣例並標「設計實測」），共用色票/字體/圓角走 var()。 */
.home-section--closing {
  position: relative;
  overflow: hidden;               /* 斜線疊加超出 band 的部分裁掉 */
  /* 設計 band：min-height 300px + 內容垂直置中（設計實測 display:flex/align-items:center）。
     用 column + justify-center，讓單一子元素 .closing-cta 維持全寬並在 300px 內垂直置中。 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;              /* 設計實測 */
}
/* 斜線疊加：設計 repeating-linear-gradient(135deg, 白.3 0→14px, 透明 14px→28px) */
.home-section--closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0,
    rgba(255, 255, 255, 0.3) 14px,
    rgba(255, 255, 255, 0) 14px,
    rgba(255, 255, 255, 0) 28px
  );
  pointer-events: none;
}
/* 內容置於疊加之上 */
.closing-cta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;                       /* 設計實測 */
  width: 100%;
}
.closing-cta__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;                       /* 設計實測 */
}
.closing-cta__title {
  font-family: var(--font-display);/* YuPearl → Noto Sans TC → …（同設計 'YuPearl','Noto Sans TC',sans-serif） */
  font-size: 38px;                 /* 設計實測 */
  font-weight: 900;
  line-height: 1.3;                /* 設計實測 */
  color: var(--color-ink);         /* #3B2D25 */
  margin: 0;
}
.closing-cta__slogan {
  font-family: var(--font-handwritten);   /* Caveat（拉丁）→ Iansui（中文）→ cursive */
  font-size: 24px;                 /* 設計實測 */
  color: var(--color-ink-handwritten);    /* #5A473C */
  margin: 0;
}
.closing-cta__card {
  background-color: #fff;
  border-radius: 28px;             /* 設計實測（≠ --radius-card 22px，故段專屬） */
  padding: 30px 34px;              /* 設計實測 */
  display: flex;
  flex-direction: column;
  gap: 14px;                       /* 設計實測 */
}
.closing-cta__card-text {
  font-size: 17px;                 /* 設計實測 */
  line-height: 1.8;                /* 設計實測 */
  color: var(--color-ink);         /* #3B2D25 */
  margin: 0;
}
/* 按鈕沿用共用 .btn.btn--coral（珊瑚底 #FF7F7F / 深咖字 #3B2D25 / 藥丸 999px / 700），
   僅覆寫設計實測的段專屬尺寸；箭頭「　→」為模板內文字（全形空格 + →，與 about 段慣例一致）。*/
.closing-cta__btn {
  align-self: flex-start;
  padding: 14px 28px;              /* 設計實測（≠ 全站 .btn 12px/26px） */
  font-size: 15px;                 /* 設計實測 */
}

@media (max-width: 640px) {
  .hero__headline { font-size: 2.75rem; }
  .feature-grid { grid-template-columns: 1fr; }
  /* CTA band 手機：左文與白卡各自佔滿一行（flex-wrap 換行後撐滿寬度），卡片不溢出 */
  .closing-cta__intro,
  .closing-cta__card { flex: 1 1 100%; }
}

/* ============================================================
   聯絡頁 / 諮詢表單 / 隱私權政策頁（Phase 3a — T107 品牌對齊輪）
   消費既有 design tokens；與全站前台元件（page-hero / info-item /
   .btn--coral / card 系統）同一套視覺語言。
   ============================================================ */

/* 站台 flash 訊息（前台 base.html messages 迴圈） */
.site-messages {
  list-style: none;
  max-width: var(--content-max-width);
  margin: var(--space-md) auto 0;
  padding: 0 var(--space-lg);
}
.site-messages li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-card-sage-tint);
  color: var(--color-ink);
  border: 1px solid var(--color-card-sage);
  border-radius: var(--radius-small);
  padding: var(--space-md) var(--space-md);
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  line-height: 1.7;
}
.site-messages li.error {
  background: var(--color-card-coral-tint);
  border-color: var(--color-card-coral);
}

.contact-page,
.privacy-page {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}

/* 桌機：左資訊欄 + 右表單欄（設計慣例：聯絡資訊與表單並排）；手機自然堆疊 */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.contact-section__eyebrow { margin: 0 0 var(--space-xs); }
.contact-branches__title,
.contact-form-section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--font-size-section);
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
  line-height: 1.3;
}
.contact-form-section__intro {
  color: var(--color-ink-secondary);
  line-height: 1.8;
  margin: 0 0 var(--space-lg);
}

.contact-branches__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.contact-branch-card {
  background: var(--color-card-aqua-tint);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.contact-branch-card__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--font-size-card-title);
  margin: 0 0 var(--space-sm);
  color: var(--color-ink);
}
.contact-branch-card__info { margin-bottom: var(--space-sm); }
/* 沿用全站 .info-item / .info-item__label（branch 詳情同款）；此處補標籤最小寬對齊 */
.contact-branch-card .info-item {
  display: flex;
  gap: var(--space-sm);
  line-height: 1.7;
  margin: 0 0 var(--space-xs);
}
.contact-branch-card .info-item__label {
  flex: 0 0 auto;
  min-width: 4em;
  color: var(--color-ink-muted);
}
.contact-branch-card .info-item__val { flex: 1 1 auto; }
.contact-branch-card__link {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--color-eyebrow-aqua);
  font-weight: 700;
  text-decoration: none;
}
.contact-branch-card__link:hover { filter: brightness(0.92); }

/* 諮詢表單 */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
/* 短欄位桌機兩欄（姓名/電話/Email/館別），手機單欄 */
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.contact-form__field { display: flex; flex-direction: column; min-width: 0; }  /* 🍎 min-width:0 讓格子能縮、內含 input 不撐破 grid 軌道（Safari 溢出防護） */
.contact-form__label {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}
.contact-form__req { color: var(--color-cta-coral); margin-left: 2px; }
.contact-form__input {
  width: 100%;               /* 🍎 無此 → input 照原生寬度撐出格子、Safari 橫向溢出「跑掉」（box-sizing 已 border-box） */
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: 11px var(--space-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form__input::placeholder { color: var(--color-ink-muted); }
.contact-form__input:hover { border-color: var(--color-ink-muted); }
.contact-form__input:focus,
.contact-form__input:focus-visible {
  outline: none;
  border-color: var(--color-cta-coral);
  box-shadow: 0 0 0 3px rgba(255, 127, 127, 0.22);
}
.contact-form__input--error {
  border-color: var(--color-cta-coral);
  background: var(--color-card-coral-tint);
}
.contact-form__textarea { resize: vertical; min-height: 9em; line-height: 1.7; }
.contact-form__field--consent { flex-direction: column; }
.contact-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-ink-secondary);
  cursor: pointer;
}
.contact-form__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-cta-coral);
}
.contact-form__privacy-link { color: var(--color-cta-coral); text-decoration: underline; }
.contact-form__error {
  color: #C0524E;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: var(--space-xs) 0 0;
}
.contact-form__error--banner {
  color: #C0524E;
  background: var(--color-card-coral-tint);
  padding: var(--space-md);
  border: 1px solid var(--color-card-coral);
  border-radius: var(--radius-small);
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-body);
}
.contact-form__submit { align-self: flex-start; margin-top: var(--space-xs); }

/* honeypot：離屏隱藏，人眼與螢幕閱讀器皆不干擾真人，簡易機器人仍會填 */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 隱私權政策頁 */
.privacy-article { max-width: 760px; }
/* 生效版本標記（版本號｜生效日）：小字、次要色，置於長文之上 */
.privacy-page__meta {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-soft);
}
/* 無生效版本：優雅退回的「整備中」提示卡（非空白畫面） */
.privacy-page__empty {
  background: var(--color-card-yellow-tint);
  border: 1px solid var(--color-accent-yellow-deep);
  border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.8;
  color: var(--color-ink);
  margin: 0;
}
/* 本頁目錄（privacy_toc.js 依 h2 自動生成，>=3 個標題才出現；無 JS 時不影響閱讀） */
.privacy-toc {
  margin: 0 0 var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-card-beige-tint);
  border-radius: var(--radius-card);
}
.privacy-toc__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
}
.privacy-toc__list { list-style: none; margin: 0; padding: 0; }
.privacy-toc__item { margin: 0; line-height: 1.9; }
.privacy-toc__link {
  color: var(--color-ink-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.privacy-toc__link:hover {
  color: var(--color-cta-coral);
  border-bottom-color: currentColor;
}

/* ============================================================
   .rich-content：後台版本化富文本（Quill 輸出）的前台長文排版。
   /privacy 頁 + 聯絡頁隱私彈窗共用同一份（單一真相源）。
   涵蓋法務長文：h2/h3 階層、段落、清單、引言、連結、水平線，
   加 Quill class attributor（對齊/字級/顏色，比對 editor 的 TOKENS）。
   CJK 排版：行高 1.8、Latin-first 字體堆疊（zh-tw-ui-typography）。
   ============================================================ */
.rich-content {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.85;
  color: var(--color-ink-secondary);
}
.rich-content > :first-child { margin-top: 0; }
.rich-content > :last-child { margin-bottom: 0; }
.rich-content h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--font-size-card-title);
  color: var(--color-ink);
  line-height: 1.4;
  margin: var(--space-2xl) 0 var(--space-md);
  scroll-margin-top: var(--space-2xl);   /* TOC 錨點捲動不被固定 header 遮住 */
}
.rich-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-ink);
  line-height: 1.5;
  margin: var(--space-xl) 0 var(--space-sm);
  scroll-margin-top: var(--space-2xl);
}
.rich-content p { margin: 0 0 var(--space-md); }
.rich-content ul,
.rich-content ol { margin: 0 0 var(--space-md); padding-left: 1.6em; }
.rich-content li { margin-bottom: var(--space-xs); }
.rich-content li > ul,
.rich-content li > ol { margin: var(--space-xs) 0 0; }
.rich-content a {
  color: var(--color-cta-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rich-content a:hover { filter: brightness(0.92); }
.rich-content strong { font-weight: 700; color: var(--color-ink); }
.rich-content blockquote {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-left: 3px solid var(--color-accent-yellow-deep);
  background: var(--color-card-beige-tint);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  color: var(--color-ink);
}
.rich-content blockquote p:last-child { margin-bottom: 0; }
.rich-content hr {
  border: 0;
  border-top: 1px solid var(--color-border-soft);
  margin: var(--space-xl) 0;
}
/* Quill class attributor：對齊 */
.rich-content .ql-align-center { text-align: center; }
.rich-content .ql-align-right { text-align: right; }
.rich-content .ql-align-justify { text-align: justify; }
/* Quill class attributor：字級（比對 editor SIZE_TOKENS small/large/huge） */
.rich-content .ql-size-small { font-size: 0.85em; }
.rich-content .ql-size-large { font-size: 1.35em; }
.rich-content .ql-size-huge { font-size: 1.75em; }
/* Quill class attributor：顏色（比對 editor COLOR_TOKENS） */
.rich-content .ql-color-red { color: #C0392B; }
.rich-content .ql-color-orange { color: #C07A24; }
.rich-content .ql-color-green { color: #2E7D52; }
.rich-content .ql-color-blue { color: #2A6FB0; }
.rich-content .ql-color-navy { color: #24406B; }
.rich-content .ql-color-gray { color: var(--color-ink-muted); }

/* 聯絡頁隱私彈窗內的 rich-content：略縮字級/間距（在小視窗內閱讀） */
.modal-privacy__meta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-md);
}
.modal-privacy__content { font-size: 1rem; }
.modal-privacy__content h2 { margin-top: var(--space-lg); }
.modal-privacy__notice {
  font-family: var(--font-body);
  line-height: 1.8;
  color: var(--color-ink-secondary);
  margin: 0;
}

/* ---- 聯絡頁 / 隱私頁 RWD ---- */
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
}
@media (max-width: 640px) {
  .contact-page,
  .privacy-page { padding: var(--space-xl) var(--space-md); }
  .contact-form__grid { grid-template-columns: 1fr; }
  .privacy-toc { padding: var(--space-md) var(--space-lg); }
  .rich-content h2 { margin-top: var(--space-xl); }
}

/* ============================================================
   對話視窗 Modal（T108：隱私權政策彈窗 + 送出成功彈窗）
   消費既有 design tokens；焦點/ESC/遮罩互動由 contact.js 驅動。
   ============================================================ */
body.modal-open { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.modal[hidden] { display: none; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.55);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 2 * var(--space-lg));
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-strong);
  overflow: hidden;
}
.modal__dialog--narrow { max-width: 440px; }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--font-size-card-title);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.4;
}
.modal__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-ink-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.modal__close:hover { background: var(--color-border); color: var(--color-ink); }
.modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 127, 127, 0.35);
}

.modal__body {
  padding: var(--space-lg) var(--space-xl);
  overflow-y: auto;
  color: var(--color-ink-secondary);
}
.modal__body--center { text-align: center; padding-top: var(--space-xl); }

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.modal__footer--center { justify-content: center; border-top: none; }
.modal__link {
  margin-right: auto;
  color: var(--color-ink-secondary);
  font-family: var(--font-body);
  text-decoration: none;
}
.modal__link:hover { color: var(--color-cta-coral); text-decoration: underline; }

.modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-card-sage-tint);
  color: #4E8B63;
  font-size: 1.75rem;
  line-height: 1;
}
.modal__message {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.8;
  color: var(--color-ink-secondary);
  margin: var(--space-sm) 0 0;
}

/* 隱私彈窗內文（承 privacy 頁樣式語言，縮排配合 modal 尺度） */
.modal-privacy__notice {
  background: var(--color-card-yellow-tint);
  border: 1px solid var(--color-accent-yellow-deep);
  border-radius: var(--radius-small);
  padding: var(--space-md);
  font-family: var(--font-body);
  line-height: 1.7;
  color: var(--color-ink);
  margin: 0 0 var(--space-lg);
}
.modal-privacy-section { margin-bottom: var(--space-lg); }
.modal-privacy-section:last-child { margin-bottom: 0; }
.modal-privacy-section__heading {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--font-size-body);
  color: var(--color-ink);
  margin: 0 0 var(--space-xs);
  line-height: 1.5;
}
.modal-privacy-section__body {
  font-family: var(--font-body);
  line-height: 1.9;
  color: var(--color-ink-secondary);
  margin: 0;
}

@media (max-width: 640px) {
  .modal { padding: var(--space-md); align-items: flex-end; }
  .modal__dialog {
    max-height: calc(100vh - 2 * var(--space-md));
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
  }
  .modal__header,
  .modal__body,
  .modal__footer { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .modal__footer { flex-wrap: wrap; }
  .modal__footer--center { flex-direction: column-reverse; }
  .modal__footer--center .btn { width: 100%; }
}

/* ============================================================================
   T114 學員成果詳情頁（前台）
   新 scope、T091 設計盤點無此頁設計稿 → 非 §6.7 高保真復刻，改比照既有 5 個前台詳情頁
   （course/coach/event/branch/article_detail）已定視覺語彙：暖奶油底 + 六色卡 tint +
   珊瑚 CTA + YuPearl 大標 + 既有 .detail-hero/.chip/.photo-gallery/.video-embed/.info-grid。
   testimonial 主題色＝草綠（design-tokens --color-eyebrow-sage / --color-card-sage）。
   🔒 sdd §9：本區塊全部為「只新增」規則，未修改/刪除任何既有規則；只消費既有 token，
   不自創新色/新字級（引言字級沿用既有 --font-size-card-title token）。
   ============================================================================ */

/* 引言為本頁情感主體（家長訪客的閱讀重心）：放大 pull-quote + 草綠左飾條（testimonial 主題色），
   與其餘詳情頁乾淨堆疊 hero 一致、不加背景色塊。max-width 限制引言行長（CJK 大字長文可讀性，
   zh-tw-typography）；H1／chip／下方 gallery 維持 .detail-page 全寬對齊，不 narrow 整個 hero
   以免與全寬 gallery 錯位。 */
.testimonial-detail__quote {
  max-width: 40em;
  margin: var(--space-md) 0 var(--space-lg);
  padding-left: var(--space-lg);
  border-left: 4px solid var(--color-card-sage);
  font-size: var(--font-size-card-title);
  line-height: 1.8;
  color: var(--color-ink-secondary);
}

/* 相簿為獨立區塊時（testimonial 詳情非包在 .branch-gallery 內）補下方留白，與影片/資訊區維持
   視覺節奏（既有 .photo-gallery 僅有 margin-top，此處只在 testimonial 作用域補下方間距）。 */
.detail-page--testimonial .photo-gallery { margin-bottom: var(--space-lg); }
/* 學員成果內頁相簿改直式 4:5（業主回饋 2026-10-27）：覆寫共用 .photo-gallery__item 的 4/3；
   僅 .detail-page--testimonial 作用域，不波及教練/館別相簿。 */
.detail-page--testimonial .photo-gallery__item { aspect-ratio: 4 / 5; }

/* ============================================================
   社群按鈕 + 總部聯絡資訊（T116；頁尾 + 聯絡頁共用）
   只新增規則、不改既有。消費既有 design tokens；圖示為內聯 SVG（單色 currentColor）。
   ============================================================ */

/* ── 社群按鈕列（共用） ─────────────────────────────── */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.social-links__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.social-links__btn:hover { transform: translateY(-2px); }
.social-links__btn:focus-visible {
  outline: 2px solid var(--color-cta-coral);
  outline-offset: 2px;
}
.social-links__icon { width: 22px; height: 22px; display: block; }

/* 頁尾（深色 ink 底）：半透明圓底 + 奶油圖示，hover 轉珊瑚 */
.social-links--footer .social-links__btn {
  background-color: rgba(250, 246, 237, 0.12);
  color: var(--color-bg-cream);
}
.social-links--footer .social-links__btn:hover {
  background-color: var(--color-cta-coral);
  color: #fff;
}

/* 聯絡頁（淺色奶油底）：珊瑚淺底 + 深墨圖示，hover 轉珊瑚實心 */
.social-links--contact {
  margin-top: var(--space-md);
}
.social-links--contact .social-links__btn {
  background-color: var(--color-card-coral-tint);
  color: var(--color-ink);
}
.social-links--contact .social-links__btn:hover {
  background-color: var(--color-cta-coral);
  color: #fff;
}

/* ── 總部聯絡資訊（共用） ───────────────────────────── */
.hq-contact { display: flex; flex-direction: column; gap: var(--space-xs); }
.hq-contact__item {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  line-height: 1.7;
}
.hq-contact__label { flex: 0 0 auto; min-width: 4.5em; }
.hq-contact__val { flex: 1 1 auto; word-break: break-word; }
.hq-contact__link { text-decoration: none; }

/* 頁尾變體：作為 top 列的獨立欄，色調對齊既有 __branch 文字 */
.hq-contact--footer {
  flex: 1 1 220px;
  min-width: 200px;
  font-size: var(--font-size-body);
}
.hq-contact--footer .hq-contact__label { color: var(--color-ink-muted); }
.hq-contact--footer .hq-contact__val { color: var(--color-border); }
.hq-contact--footer .hq-contact__link { color: var(--color-bg-cream); }
.hq-contact--footer .hq-contact__link:hover { color: var(--color-accent-yellow); }

/* ── 聯絡頁「總部聯絡」區塊（與各館別區並存，位於左資訊欄上方） ── */
.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  min-width: 0;
}
.contact-hq {
  background: var(--color-card-coral-tint);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.contact-hq__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--font-size-section);
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
  line-height: 1.3;
}
.contact-hq .hq-contact__item { line-height: 1.7; margin: 0 0 var(--space-xs); }
.contact-hq .hq-contact__label { color: var(--color-ink-muted); }
.contact-hq .hq-contact__val { color: var(--color-ink-secondary); }
.contact-hq .hq-contact__link { color: var(--color-eyebrow-coral); font-weight: 700; }
.contact-hq .hq-contact__link:hover { filter: brightness(0.92); }

/* ============================================================================
   T136 線上報名頁（前台公開頁）
   沿用聯絡頁品牌語彙（page-hero + contact-form__* + modal 系統）：暖奶油底 +
   珊瑚 CTA + YuPearl 大標。本區塊全部為「只新增」規則，未修改/刪除任何既有規則；
   只消費既有 design token。表單欄位樣式直接複用 .contact-form__*（零重複）。
   ============================================================================ */
.register-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg);
}
/* 項目8（2026-10-27）：報名表頂部橫幅圖片。寬版圓角、與 register-card 同寬置中、下方留間距。 */
.register-banner {
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* 4B #3：橫幅以 object-fit:cover 裁切成寬版比例，後台拖曳設定的 object-position 才會在前台生效 */
.register-banner img { width: 100%; aspect-ratio: 16 / 5; height: auto; object-fit: cover; object-position: 50% 50%; display: block; }
@media (max-width: 640px) { .register-banner img { aspect-ratio: 3 / 2; } }
/* 報名頁連回關聯課程/活動的 CTA（頁首第一塊）：register-page 已有上內距 → 取消 cta-banner 預設上margin，補下方與橫幅的間距。
   高度縮約 1/3（業主回饋）：只縮本條上下 padding，不動共用 .cta-banner--coral（避免波及活動/課程/文章頁 banner）。 */
.register-related-cta { margin-top: 0; margin-bottom: var(--space-lg); padding-top: 12px; padding-bottom: 12px; }
/* 活動詳情頁頂部報名 CTA（麵包屑後、hero 前）：cta-banner 只有上 margin → 補下方與 hero 的間距。
   高度縮約 1/3（業主回饋，只縮此頂部條、不動頁尾那條與共用 .cta-banner--coral）：上下 padding 32→12px。 */
.detail-top-cta { margin-bottom: var(--space-xl); padding-top: 12px; padding-bottom: 12px; }
/* A 方案：報名未開放提示（暫停/未開始/已截止）。資訊性（非錯誤紅色）、醒目。 */
.register-closed-notice { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius-card); background: var(--color-card-yellow-tint); border: 1px solid rgba(0,0,0,.07); }
.register-closed-notice__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.register-closed-notice__text { margin: 0; font-weight: 700; }
/* solo：一般訪客未開放時整張表單收起、只留此塊（提示 + 前往活動介紹）→ 置中直排、留白大一點 */
.register-closed-notice--solo { flex-direction: column; text-align: center; gap: 16px; padding: 44px 24px; }
.register-closed-notice__cta { margin-top: 4px; }
/* 管理者預覽提示（資訊藍，與未開放黃色區隔）：登入管理者點 admin 連結過去時看得到完整表單 */
.register-preview-banner { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-lg); padding: 12px 16px; border-radius: var(--radius-card); background: #E0F2FE; border: 1px solid rgba(0,0,0,.07); font-weight: 600; font-size: 14px; }
/* 如何得知（複選）排版（業主回饋 2026-10-27）：兩欄方框、選中變色；取代擠成一排的 flex（6 選項塞不下）。 */
.register-source-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.register-source-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  /* 白底 + 與輸入欄同色框：讓複選方框從米色頁面背景浮出、與其他欄位一致（業主回饋 2026-10-27） */
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-ink-secondary);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.register-source-option input { accent-color: var(--color-cta-coral); width: 18px; height: 18px; flex-shrink: 0; }
.register-source-option:hover { border-color: var(--color-cta-coral); }
.register-source-option:has(input:checked) { border-color: var(--color-cta-coral); background: var(--color-card-coral-tint); }
@media (max-width: 560px) { .register-source-options { grid-template-columns: 1fr; } }
/* 生日三下拉（業主選乙案 2026-10-27）：年/月/日並排、整列寬（grid 2 欄半格放不下）。 */
.contact-form__field--span2 { grid-column: 1 / -1; }
.birthday-selects { display: flex; gap: 10px; align-items: flex-end; }
.birthday-selects__col { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.birthday-selects__col--year { flex: 1.5; }
.birthday-selects__col > span { font-size: 12px; color: var(--color-ink-muted); }
.birthday-selects input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-ink);
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  padding: 11px 12px;
}
.birthday-selects input:focus { outline: none; border-color: var(--color-cta-coral); }
.register-card {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-card);
}

/* 信任訊息：草綠 tint（sage=安心），置於表單上方 */
.register-trust {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  background: var(--color-card-sage-tint);
  border: 1px solid var(--color-card-sage);
  border-radius: var(--radius-small);
  padding: var(--space-md);
  margin-bottom: var(--space-xl);
}
.register-trust__icon { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.8; }
.register-trust__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-ink-secondary);
}

/* 分組 fieldset：重置原生外框、以 legend 當段標題（YuPearl display）。
   🍎 Safari 不支援 <fieldset> 當 flex/grid 容器（WebKit 長年 bug）→ 不可用 display:flex+gap
   （Safari 會忽略、間距塌掉、欄位擠成一團「破版」）。改用普通 block + 子元素 margin 排間距，
   跨瀏覽器一致（Chrome 外觀不變）。 */
.register-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;              /* fieldset 內 grid 於窄螢幕不撐破容器 */
}
.register-fieldset > * + * { margin-top: var(--space-lg); }
.register-fieldset__legend {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--font-size-card-title);
  color: var(--color-ink);
  padding: 0;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

/* 同意區：頂部細線分隔，個資同意（必填）+ 影像同意（選填 radio） */
/* 🍎 同 register-fieldset：<fieldset> 在 Safari 不能當 flex 容器 → 用 block + 子元素 margin。 */
.register-consent {
  border: none;
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0 0;
  margin: 0;
  min-width: 0;
}
.register-consent > * + * { margin-top: var(--space-md); }
.register-consent__image-label {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 2px;
}
.register-consent__hint {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-xs);
}
.register-consent__terms-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}
.register-consent__radios { display: flex; gap: var(--space-xl); }
.register-consent__radio {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  color: var(--color-ink-secondary);
  cursor: pointer;
}
.register-consent__radio input {
  accent-color: var(--color-cta-coral);
  width: 18px;
  height: 18px;
}
/* boxed 變體（性別專用）：白底 + 同輸入欄邊框、inline 小框，從米色頁背景浮出、與複選方框一致。
   不影響「影像使用同意」與報名表自訂 radio/multi（未加此修飾 class）。業主回饋 2026-10-27。 */
.register-consent__radios--boxed { gap: 12px; flex-wrap: wrap; }
.register-consent__radios--boxed .register-consent__radio {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 16px;
  transition: border-color 0.15s ease;
}
.register-consent__radios--boxed .register-consent__radio:hover { border-color: var(--color-cta-coral); }

@media (max-width: 640px) {
  .register-page { padding: var(--space-xl) var(--space-md); }
  .register-card { padding: var(--space-lg); }
}

/* ============================================================================
   T202 館別詳情頁前台體驗層：Hero 大圖輪播 + 相簿燈箱
   🔒 只新增規則、只消費既有 token；行為層疊加，單張/無圖情況版面不變（防破圖）。
   ============================================================================ */

/* ── Hero 輪播：沿用 .detail-hero__banner（radius 28 / aspect 1224:336 / aqua tint）作為外框，
      slide 絕對定位疊放、淡入切換（尊重 reduced-motion）。 ── */
.hero-carousel { position: relative; }
.hero-carousel__track { position: absolute; inset: 0; }
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hero-carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-ink);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background-color 0.15s ease;
}
.hero-carousel__arrow:hover { background: #fff; }
.hero-carousel__arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 127, 127, 0.55);
}
.hero-carousel__arrow--prev { left: 14px; }
.hero-carousel__arrow--next { right: 14px; }

.hero-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.hero-carousel__dot:hover { background: rgba(255, 255, 255, 0.9); }
.hero-carousel__dot.is-active { background: #fff; transform: scale(1.15); }
.hero-carousel__dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 127, 127, 0.55);
}

/* ── 相簿縮圖：加上可點提示（不改版面尺寸，僅游標 + 聚焦環 + 輕微 hover） ── */
.photo-gallery__item[role="button"] { cursor: pointer; }
.photo-gallery__item[role="button"] img { transition: transform 0.25s ease; }
.photo-gallery__item[role="button"]:hover img { transform: scale(1.05); }
.photo-gallery__item[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 127, 127, 0.55);
}

/* ── 燈箱：沿用 .modal（fixed / flex 置中 / hidden→display:none / body.modal-open），
      dialog 為透明大圖容器、左右導覽鈕、關閉鈕、張數指示。 ── */
.lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(1100px, 92vw);
  max-height: 88vh;
}
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-strong);
  background: #fff;
}
.lightbox__close {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink);
}
.lightbox__close:hover { background: #fff; }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background-color 0.15s ease;
}
.lightbox__nav:hover { background: #fff; }
.lightbox__nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 127, 127, 0.65);
}
/* 單張相簿：JS 設 hidden 隱藏左右鈕；需覆蓋上方 display:inline-flex（作者樣式蓋過 UA [hidden]）。 */
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: -24px; }
.lightbox__nav--next { right: -24px; }
.lightbox__counter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  z-index: 3;
  margin: 0;
  text-align: center;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
}

@media (max-width: 640px) {
  .hero-carousel__arrow { width: 38px; height: 38px; font-size: 1.4rem; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox__nav--prev { left: 4px; }
  .lightbox__nav--next { right: 4px; }
  .lightbox__close { top: 4px; right: 4px; }
  .lightbox__img { max-height: 74vh; }
  .lightbox__counter { bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide,
  .hero-carousel__dot,
  .photo-gallery__item[role="button"] img { transition: none; }
  .photo-gallery__item[role="button"]:hover img { transform: none; }
}