@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Theme semantic colors */
/* Brand Primary：Desktop／Mobile 的 page02 子標／內文活文字最暗 5% 像素採樣，
   四組樣本收斂到同一色值（非取自 page02-title.svg 的漸層 stop）。AI 檔
   （景御_電腦+手機版.ai／景御_一頁式網站.ai）皆未附帶 PDF 相容內容，無法讀取
   向量填色，屬來源能力限制，非略過不做；見 docs/LAYOUT-SPEC.md「Brand Color
   量測」。Hover 為案件裁決的衍生值（primary 混入 12% 黑），非獨立量測，僅供
   互動元件使用，不得套用在純文字上。此為 JingYuDaYuan 案件副本的定案，
   不回寫 `_template_onePage` 的共用預設。 */
/* Text Secondary：page05 表單標籤／個資說明／checkbox／聯絡資訊文字的
   最暗像素採樣，8 組跨區域樣本（6 個欄位標籤＋2 行個資說明）收斂到
   #956132，對白對比 5.21:1（過 AA）。與 --color-brand-primary 明顯不同，
   非同一色系，使用者裁決覆寫此 token 而非另建 page05 專屬色票。 */
/* Border Primary：page05 表單欄位／送出按鈕的邊框最暗 30% 像素採樣
   （7 個框體、約 1184 個樣本），收斂到 #e4d8cc，暖色調，與共用預設的
   冷灰 #dee2e6 不同。⚠ 共用 .form-control/.form-select（_foundation.scss）
   目前是寫死的 #ced4da，不讀這個 token，所以只改這裡不會自動生效；
   #page05 另外要 scoped override .form-control 的 border-color 才會
   真的套用，見 style.scss。 */
/* Libraries fixed colors：不隨 Theme 切換。 */
/* v1 migration aliases：案件檔案完成遷移前保留，不是新的正式命名。 */
/* Viewport breakpoints */
/* Font Family */
/* Section Spacing */
/*
  content-edge：內容版心與瀏覽器邊界的預設距離
  section-py：section 上下留白
  如果不需要上下 padding，可用 .section-py--mobile-0 等類別局部去除。
*/
/* Section Spacing - Mobile */
/* Section Spacing - Desktop */
/* Text Block Padding */
/* Layout Pattern */
/* 舊單值 alias；新 layout 應分別使用 X / Y。 */
/* ========================
  🌐 Root Runtime Tokens
======================== */
:root {
  --design-width: 1920;
  --vw-base: calc(100vw / var(--design-width));
  --color-brand-primary: #693905;
  --color-brand-primary-hover: #5c3204;
  --color-brand-secondary: #bea850;
  --color-brand-secondary-hover: #a68915;
  --color-brand-neutral: #888888;
  --color-brand-neutral-hover: #656565;
  --color-text-primary: #212529;
  --color-text-secondary: #956132;
  --color-text-muted: #6c757d;
  --color-background-primary: #ffffff;
  --color-background-secondary: #f8f9fa;
  --color-background-surface: #ffffff;
  --color-border-primary: #e4d8cc;
  --color-border-secondary: #ced4da;
  --color-fixed-black: #000000;
  --color-fixed-white: #ffffff;
  /* migration aliases */
  --color-primary: var(--color-brand-primary);
  --color-primary-hover: var(--color-brand-primary-hover);
  --color-secondary: var(--color-brand-secondary);
  --color-secondary-hover: var(--color-brand-secondary-hover);
  --color-gray: var(--color-brand-neutral);
  --color-gray-hover: var(--color-brand-neutral-hover);
  /*
    🎯 Focus Ring Token
    案件只要覆寫 --focus-ring-color 就能換成案件主色；
    預設走 --color-brand-primary，任何情況下都不得改成 none。
  */
  --focus-ring-color: var(--color-brand-primary);
  --focus-ring-width: max(2px, calc(3 * var(--vw-base)));
  --focus-ring-offset: max(2px, calc(2 * var(--vw-base)));
  /*
    🔤 字型角色 Token
    預設值直接沿用共用 Sass Token（`_tokens.scss`），不另寫一份 fallback stack。
    案件只要覆寫 --font-zh-sans 等四個角色，Body、Footer 與所有 .page-* / .font-*
    就會一起跟隨——不需要再建立第二套 case-specific 字型變數。
  */
  --font-zh-sans: Noto Sans TC, PingFang TC, Microsoft JhengHei, sans-serif;
  --font-zh-serif: Noto Serif TC, PMingLiU, serif;
  --font-en-sans: Helvetica Neue, Arial, sans-serif;
  --font-en-serif: Playfair Display, Times New Roman, serif;
  /*
    Body 是全站唯一的 typography 基準，宣告點只有 `_typography.scss` 的 `body`。
    ⚠ font-size 必須維持 vw()：整個設計系統以 --vw-base 縮放，寫死 px 會讓
      Nav 與所有未指定字級的節點在其他視窗寬度下失準。
    ⚠ line-height 必須無單位：子節點字級不同，繼承絕對行高會算錯行距。
  */
  --font-body-family: var(--font-zh-sans);
  --font-body-size: calc(16 * var(--vw-base));
  --font-body-size-mobile: calc(14.4 * var(--vw-base));
  --font-body-line-height: 1.66;
  --font-body-letter-spacing: 0.04em;
  --font-body-weight: 400;
  --content-edge: calc(25 * var(--vw-base));
  --container-max-width: 100%;
  --section-py: calc(61 * var(--vw-base));
  --txt-px: calc(33 * var(--vw-base));
  --txt-py: calc(33 * var(--vw-base));
  --layout-gap-x: calc(32 * var(--vw-base));
  --layout-gap-y: calc(32 * var(--vw-base));
  --layout-gap: var(--layout-gap-y);
  --txt-title-gap: calc(20 * var(--vw-base));
  --txt-body-gap: calc(14 * var(--vw-base));
}

@media (max-width: 991.98px) {
  :root {
    --design-width: 610;
  }
}
@media (min-width: 992px) {
  :root {
    --content-edge: calc(160 * var(--vw-base));
    --container-max-width: calc(1600 * var(--vw-base));
    --section-py: calc(96 * var(--vw-base));
    --txt-px: calc(80 * var(--vw-base));
    --txt-py: calc(64 * var(--vw-base));
    --layout-gap-x: calc(120 * var(--vw-base));
    --layout-gap-y: calc(120 * var(--vw-base));
    --layout-gap: var(--layout-gap-y);
    --txt-title-gap: calc(32 * var(--vw-base));
    --txt-body-gap: calc(16 * var(--vw-base));
  }
}
/* 本地 UI 基礎層：只保留模板需要的能力，不依賴 Bootstrap 或 --bs-*。 */
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/*
  body 只負責 reset 與頁面底色／文字色（語意 Token）。
  ⚠ font-family / font-size 已移除：typography 的唯一權威來源是 `_typography.scss` 的 `body`。
    這裡原本的兩行與那裡同值重複，且因 @use 順序永遠被覆蓋，屬於死碼。
*/
body {
  margin: 0;
  color: var(--color-text-primary);
  background: var(--color-background-primary);
}

img, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  margin: 0;
  font: inherit;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.container, .container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--content-edge);
}

.container {
  max-width: var(--container-max-width);
}

.row {
  --grid-gap-x: calc(24 * var(--vw-base));
  --grid-gap-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--grid-gap-x) / -2);
  margin-top: calc(var(--grid-gap-y) * -1);
}
.row > * {
  width: 100%;
  max-width: 100%;
  padding-inline: calc(var(--grid-gap-x) / 2);
  margin-top: var(--grid-gap-y);
}

.col-6 {
  width: 50%;
}

.col-12 {
  width: 100%;
}

.g-0, .gx-0 {
  --grid-gap-x: 0;
}

.g-2 {
  --grid-gap-x: calc(8 * var(--vw-base));
  --grid-gap-y: calc(8 * var(--vw-base));
}

.g-3 {
  --grid-gap-x: calc(16 * var(--vw-base));
  --grid-gap-y: calc(16 * var(--vw-base));
}

.g-4 {
  --grid-gap-x: calc(24 * var(--vw-base));
  --grid-gap-y: calc(24 * var(--vw-base));
}

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-grid {
  display: grid !important;
}

@media (max-width: 991.98px) {
  .d-mobile-none {
    display: none !important;
  }
  .d-mobile-block {
    display: block !important;
  }
  .d-mobile-inline {
    display: inline !important;
  }
  .d-mobile-inline-block {
    display: inline-block !important;
  }
  .d-mobile-flex {
    display: flex !important;
  }
  .d-mobile-grid {
    display: grid !important;
  }
}
@media (min-width: 992px) {
  .d-desktop-none {
    display: none !important;
  }
  .d-desktop-block {
    display: block !important;
  }
  .d-desktop-inline {
    display: inline !important;
  }
  .d-desktop-inline-block {
    display: inline-block !important;
  }
  .d-desktop-flex {
    display: flex !important;
  }
  .d-desktop-grid {
    display: grid !important;
  }
}
.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.position-relative {
  position: relative !important;
}

.sticky-top {
  position: sticky !important;
  top: 0;
  z-index: 20;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.small, small {
  font-size: 0.875em;
}

.h4 {
  font-size: calc(24 * var(--vw-base));
}

.h5 {
  font-size: calc(20 * var(--vw-base));
}

.h6 {
  font-size: calc(16 * var(--vw-base));
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.text-start {
  text-align: start !important;
}

.text-center {
  text-align: center !important;
}

.text-end {
  text-align: end !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.lh-1 {
  line-height: 1 !important;
}

.text-primary {
  color: #693905 !important;
}

.text-secondary {
  color: #bea850 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-dark {
  color: #212529 !important;
}

.text-light {
  color: #f8f9fa !important;
}

.text-white {
  color: #fff !important;
}

.bg-primary {
  background-color: #693905 !important;
}

.bg-secondary {
  background-color: #bea850 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.bg-dark {
  background-color: #212529 !important;
}

.bg-white {
  background-color: #fff !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.ms-0 {
  margin-inline-start: 0 !important;
}

.me-0 {
  margin-inline-end: 0 !important;
}

.mx-0 {
  margin-inline: 0 !important;
}

.my-0 {
  margin-block: 0 !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.ps-0 {
  padding-inline-start: 0 !important;
}

.pe-0 {
  padding-inline-end: 0 !important;
}

.px-0 {
  padding-inline: 0 !important;
}

.py-0 {
  padding-block: 0 !important;
}

.gap-0 {
  gap: 0 !important;
}

.m-1 {
  margin: calc(4 * var(--vw-base)) !important;
}

.mt-1 {
  margin-top: calc(4 * var(--vw-base)) !important;
}

.mb-1 {
  margin-bottom: calc(4 * var(--vw-base)) !important;
}

.ms-1 {
  margin-inline-start: calc(4 * var(--vw-base)) !important;
}

.me-1 {
  margin-inline-end: calc(4 * var(--vw-base)) !important;
}

.mx-1 {
  margin-inline: calc(4 * var(--vw-base)) !important;
}

.my-1 {
  margin-block: calc(4 * var(--vw-base)) !important;
}

.p-1 {
  padding: calc(4 * var(--vw-base)) !important;
}

.pt-1 {
  padding-top: calc(4 * var(--vw-base)) !important;
}

.pb-1 {
  padding-bottom: calc(4 * var(--vw-base)) !important;
}

.ps-1 {
  padding-inline-start: calc(4 * var(--vw-base)) !important;
}

.pe-1 {
  padding-inline-end: calc(4 * var(--vw-base)) !important;
}

.px-1 {
  padding-inline: calc(4 * var(--vw-base)) !important;
}

.py-1 {
  padding-block: calc(4 * var(--vw-base)) !important;
}

.gap-1 {
  gap: calc(4 * var(--vw-base)) !important;
}

.m-2 {
  margin: calc(8 * var(--vw-base)) !important;
}

.mt-2 {
  margin-top: calc(8 * var(--vw-base)) !important;
}

.mb-2 {
  margin-bottom: calc(8 * var(--vw-base)) !important;
}

.ms-2 {
  margin-inline-start: calc(8 * var(--vw-base)) !important;
}

.me-2 {
  margin-inline-end: calc(8 * var(--vw-base)) !important;
}

.mx-2 {
  margin-inline: calc(8 * var(--vw-base)) !important;
}

.my-2 {
  margin-block: calc(8 * var(--vw-base)) !important;
}

.p-2 {
  padding: calc(8 * var(--vw-base)) !important;
}

.pt-2 {
  padding-top: calc(8 * var(--vw-base)) !important;
}

.pb-2 {
  padding-bottom: calc(8 * var(--vw-base)) !important;
}

.ps-2 {
  padding-inline-start: calc(8 * var(--vw-base)) !important;
}

.pe-2 {
  padding-inline-end: calc(8 * var(--vw-base)) !important;
}

.px-2 {
  padding-inline: calc(8 * var(--vw-base)) !important;
}

.py-2 {
  padding-block: calc(8 * var(--vw-base)) !important;
}

.gap-2 {
  gap: calc(8 * var(--vw-base)) !important;
}

.m-3 {
  margin: calc(16 * var(--vw-base)) !important;
}

.mt-3 {
  margin-top: calc(16 * var(--vw-base)) !important;
}

.mb-3 {
  margin-bottom: calc(16 * var(--vw-base)) !important;
}

.ms-3 {
  margin-inline-start: calc(16 * var(--vw-base)) !important;
}

.me-3 {
  margin-inline-end: calc(16 * var(--vw-base)) !important;
}

.mx-3 {
  margin-inline: calc(16 * var(--vw-base)) !important;
}

.my-3 {
  margin-block: calc(16 * var(--vw-base)) !important;
}

.p-3 {
  padding: calc(16 * var(--vw-base)) !important;
}

.pt-3 {
  padding-top: calc(16 * var(--vw-base)) !important;
}

.pb-3 {
  padding-bottom: calc(16 * var(--vw-base)) !important;
}

.ps-3 {
  padding-inline-start: calc(16 * var(--vw-base)) !important;
}

.pe-3 {
  padding-inline-end: calc(16 * var(--vw-base)) !important;
}

.px-3 {
  padding-inline: calc(16 * var(--vw-base)) !important;
}

.py-3 {
  padding-block: calc(16 * var(--vw-base)) !important;
}

.gap-3 {
  gap: calc(16 * var(--vw-base)) !important;
}

.m-4 {
  margin: calc(24 * var(--vw-base)) !important;
}

.mt-4 {
  margin-top: calc(24 * var(--vw-base)) !important;
}

.mb-4 {
  margin-bottom: calc(24 * var(--vw-base)) !important;
}

.ms-4 {
  margin-inline-start: calc(24 * var(--vw-base)) !important;
}

.me-4 {
  margin-inline-end: calc(24 * var(--vw-base)) !important;
}

.mx-4 {
  margin-inline: calc(24 * var(--vw-base)) !important;
}

.my-4 {
  margin-block: calc(24 * var(--vw-base)) !important;
}

.p-4 {
  padding: calc(24 * var(--vw-base)) !important;
}

.pt-4 {
  padding-top: calc(24 * var(--vw-base)) !important;
}

.pb-4 {
  padding-bottom: calc(24 * var(--vw-base)) !important;
}

.ps-4 {
  padding-inline-start: calc(24 * var(--vw-base)) !important;
}

.pe-4 {
  padding-inline-end: calc(24 * var(--vw-base)) !important;
}

.px-4 {
  padding-inline: calc(24 * var(--vw-base)) !important;
}

.py-4 {
  padding-block: calc(24 * var(--vw-base)) !important;
}

.gap-4 {
  gap: calc(24 * var(--vw-base)) !important;
}

.m-5 {
  margin: calc(48 * var(--vw-base)) !important;
}

.mt-5 {
  margin-top: calc(48 * var(--vw-base)) !important;
}

.mb-5 {
  margin-bottom: calc(48 * var(--vw-base)) !important;
}

.ms-5 {
  margin-inline-start: calc(48 * var(--vw-base)) !important;
}

.me-5 {
  margin-inline-end: calc(48 * var(--vw-base)) !important;
}

.mx-5 {
  margin-inline: calc(48 * var(--vw-base)) !important;
}

.my-5 {
  margin-block: calc(48 * var(--vw-base)) !important;
}

.p-5 {
  padding: calc(48 * var(--vw-base)) !important;
}

.pt-5 {
  padding-top: calc(48 * var(--vw-base)) !important;
}

.pb-5 {
  padding-bottom: calc(48 * var(--vw-base)) !important;
}

.ps-5 {
  padding-inline-start: calc(48 * var(--vw-base)) !important;
}

.pe-5 {
  padding-inline-end: calc(48 * var(--vw-base)) !important;
}

.px-5 {
  padding-inline: calc(48 * var(--vw-base)) !important;
}

.py-5 {
  padding-block: calc(48 * var(--vw-base)) !important;
}

.gap-5 {
  gap: calc(48 * var(--vw-base)) !important;
}

@media (min-width: 992px) {
  .px-desktop-0 {
    padding-inline: 0 !important;
  }
  .pt-desktop-0 {
    padding-top: 0 !important;
  }
  .px-desktop-1 {
    padding-inline: calc(4 * var(--vw-base)) !important;
  }
  .pt-desktop-1 {
    padding-top: calc(4 * var(--vw-base)) !important;
  }
  .px-desktop-2 {
    padding-inline: calc(8 * var(--vw-base)) !important;
  }
  .pt-desktop-2 {
    padding-top: calc(8 * var(--vw-base)) !important;
  }
  .px-desktop-3 {
    padding-inline: calc(16 * var(--vw-base)) !important;
  }
  .pt-desktop-3 {
    padding-top: calc(16 * var(--vw-base)) !important;
  }
  .px-desktop-4 {
    padding-inline: calc(24 * var(--vw-base)) !important;
  }
  .pt-desktop-4 {
    padding-top: calc(24 * var(--vw-base)) !important;
  }
  .px-desktop-5 {
    padding-inline: calc(48 * var(--vw-base)) !important;
  }
  .pt-desktop-5 {
    padding-top: calc(48 * var(--vw-base)) !important;
  }
  .text-desktop-start {
    text-align: start !important;
  }
  .text-desktop-center {
    text-align: center !important;
  }
  .text-desktop-end {
    text-align: end !important;
  }
}
/* 人工／Legacy 元件已有 Desktop 基礎值，只需覆蓋 Mobile 時使用。
   Core Exporter 應優先輸出 Mobile base + 必要的 text-desktop-*。 */
@media (max-width: 991.98px) {
  .text-mobile-start {
    text-align: start !important;
  }
  .text-mobile-center {
    text-align: center !important;
  }
  .text-mobile-end {
    text-align: end !important;
  }
}
.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-start {
  border-inline-start: 1px solid #dee2e6 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-primary {
  border-color: #693905 !important;
}

.border-secondary {
  border-color: #bea850 !important;
}

.border-2 {
  border-width: calc(2 * var(--vw-base)) !important;
}

.border-3 {
  border-width: calc(3 * var(--vw-base)) !important;
}

.border-4 {
  border-width: calc(4 * var(--vw-base)) !important;
}

.rounded {
  border-radius: calc(6 * var(--vw-base)) !important;
}

.rounded-1 {
  border-radius: calc(4 * var(--vw-base)) !important;
}

.rounded-top {
  border-start-start-radius: calc(6 * var(--vw-base)) !important;
  border-start-end-radius: calc(6 * var(--vw-base)) !important;
}

.rounded-bottom {
  border-end-start-radius: calc(6 * var(--vw-base)) !important;
  border-end-end-radius: calc(6 * var(--vw-base)) !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--vw-base));
  padding: calc(12 * var(--vw-base)) calc(32 * var(--vw-base));
  border: 1px solid transparent;
  color: #212529;
  background: transparent;
  font-size: calc(16 * var(--vw-base));
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn-sm {
  padding: calc(6 * var(--vw-base)) calc(16 * var(--vw-base));
  font-size: calc(14 * var(--vw-base));
}

.btn-primary {
  color: #fff;
  background: #693905;
  border-color: #693905;
}

.btn-primary:hover {
  background: #5c3204;
  border-color: #5c3204;
}

.btn-secondary {
  color: #fff;
  background: #bea850;
  border-color: #bea850;
}

.btn-secondary:hover {
  background: #a68915;
  border-color: #a68915;
}

.btn-gray {
  color: #fff;
  background: #888888;
  border-color: #888888;
}

.btn-gray:hover {
  background: #656565;
  border-color: #656565;
}

.btn-outline-primary {
  color: #693905;
  border-color: #693905;
}

.btn-outline-primary:hover {
  color: #fff;
  background: #693905;
}

.btn-outline-secondary {
  color: #bea850;
  border-color: #bea850;
}

.btn-outline-secondary:hover {
  color: #fff;
  background: #bea850;
}

.btn-outline-light {
  color: #fff;
  border-color: #f8f9fa;
}

.btn-outline-light:hover {
  color: #212529;
  background: #f8f9fa;
}

.alert {
  padding: calc(16 * var(--vw-base)) calc(24 * var(--vw-base));
  border: 1px solid transparent;
  border-radius: calc(6 * var(--vw-base));
}

.alert-warning {
  color: #664d03;
  background: #fff3cd;
  border-color: #ffecb5;
}

.alert-info {
  color: #055160;
  background: #cff4fc;
  border-color: #b6effb;
}

.badge {
  display: inline-block;
  padding: calc(4 * var(--vw-base)) calc(8 * var(--vw-base));
  font-size: 0.75em;
  line-height: 1;
}

.card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: calc(8 * var(--vw-base));
}

.card-body {
  padding: calc(24 * var(--vw-base));
}

.form-control, .form-select {
  display: block;
  width: 100%;
  padding: calc(12 * var(--vw-base)) calc(16 * var(--vw-base));
  border: 1px solid #ced4da;
  border-radius: 0;
  color: #212529;
  background: rgba(255, 255, 255, 0.596);
  font-size: calc(16 * var(--vw-base));
}

.form-control:focus, .form-select:focus {
  border-color: #693905;
  box-shadow: 0 0 calc(10 * var(--vw-base)) calc(3 * var(--vw-base)) rgba(105, 57, 5, 0.44);
}

.form-check {
  display: block;
  min-height: calc(24 * var(--vw-base));
  padding-inline-start: calc(24 * var(--vw-base));
}

.form-check-input {
  float: inline-start;
  width: calc(16 * var(--vw-base));
  height: calc(16 * var(--vw-base));
  margin: calc(4 * var(--vw-base)) 0 0 calc(-24 * var(--vw-base));
}

.form-check-input:checked {
  accent-color: #693905;
}

.form-check-inline {
  display: inline-block;
  margin-inline-end: calc(16 * var(--vw-base));
}

.form-floating {
  position: relative;
}

.form-floating > label {
  position: absolute;
  inset: 0;
  padding: calc(12 * var(--vw-base)) calc(16 * var(--vw-base));
  pointer-events: none;
}

.table th, .table td {
  padding: calc(8 * var(--vw-base));
  border-bottom: 1px solid #dee2e6;
  vertical-align: top;
}

.table-sm th, .table-sm td {
  padding: calc(4 * var(--vw-base));
}

.table-bordered th, .table-bordered td {
  border: 1px solid #dee2e6;
}

.table-light th {
  background: #f8f9fa;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.align-middle {
  vertical-align: middle !important;
}

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

@media (max-width: 991.98px) {
  body {
    font-size: calc(14.4 * var(--vw-base));
  }
  .row {
    --grid-gap-x: calc(16 * var(--vw-base));
  }
  .btn {
    padding: calc(10 * var(--vw-base)) calc(24 * var(--vw-base));
    font-size: calc(14 * var(--vw-base));
  }
  .btn-sm {
    padding: calc(6 * var(--vw-base)) calc(14 * var(--vw-base));
    font-size: calc(12 * var(--vw-base));
  }
  .alert {
    padding: calc(12 * var(--vw-base)) calc(16 * var(--vw-base));
  }
  .card-body {
    padding: calc(16 * var(--vw-base));
  }
  .form-control, .form-select {
    padding: calc(10 * var(--vw-base)) calc(14 * var(--vw-base));
    font-size: calc(14 * var(--vw-base));
  }
}
/* =========================================
  📐 Spacing Layout System v2

  規則：
  - .section-py       = section 上下留白，貼在 <section>
  - .section-pt       = section 上方留白，貼在 <section>
  - .section-pb       = section 下方留白，貼在 <section>
  - .container        = 置中內容最大寬度
  - .content-px       = 非 container 內容的左右安全距離
  - .content-ps       = 手機雙側安全距離；桌機左側對齊版心，右側可貼邊
  - .content-pe       = 手機雙側安全距離；桌機右側對齊版心，左側可貼邊
  - .txt-p*           = 文字區塊內距，用於圖文版型的圖文距離
  - *--mobile-0       = 手機歸零，桌機恢復

  手機滿版用法：
  <section class="section-py">
    <img>
    <div class="content-px">文字</div>
  </section>
========================================= */
/* ─── Content Width ──────────────────────────────────────── */
.container {
  width: var(--container-max-width, 100%);
  max-width: none;
  padding-inline: 0;
}

.content-px {
  padding-inline: var(--content-edge);
}

.content-px--mobile-0 {
  padding-inline: 0;
}
@media (min-width: 992px) {
  .content-px--mobile-0 {
    padding-inline: var(--content-edge);
  }
}

.content-ps {
  padding-inline: var(--content-edge);
}
@media (min-width: 992px) {
  .content-ps {
    padding-inline-end: 0;
  }
}

.content-ps--mobile-0 {
  padding-inline-start: 0;
}
@media (min-width: 992px) {
  .content-ps--mobile-0 {
    padding-inline-start: var(--content-edge);
    padding-inline-end: 0;
  }
}

.content-pe {
  padding-inline: var(--content-edge);
}
@media (min-width: 992px) {
  .content-pe {
    padding-inline-start: 0;
  }
}

.content-pe--mobile-0 {
  padding-inline-end: 0;
}
@media (min-width: 992px) {
  .content-pe--mobile-0 {
    padding-inline-start: 0;
    padding-inline-end: var(--content-edge);
  }
}

/* ─── Text Block Padding ─────────────────────────────────── */
.txt-px {
  padding-inline: var(--txt-px);
}

.txt-py {
  padding-block: var(--txt-py);
}

.txt-ps {
  padding-inline-start: var(--txt-px);
}

.txt-pe {
  padding-inline-end: var(--txt-px);
}

.txt-pt {
  padding-block-start: var(--txt-py);
}

.txt-pb {
  padding-block-end: var(--txt-py);
}

@media (min-width: 992px) {
  .txt-lg-ps {
    padding-inline-start: var(--txt-px);
  }
}

@media (min-width: 992px) {
  .txt-lg-px {
    padding-inline: var(--txt-px);
  }
}

@media (min-width: 992px) {
  .txt-lg-py {
    padding-block: var(--txt-py);
  }
}

@media (min-width: 992px) {
  .txt-lg-pe {
    padding-inline-end: var(--txt-px);
  }
}

@media (min-width: 992px) {
  .txt-lg-pt {
    padding-block-start: var(--txt-py);
  }
}

@media (min-width: 992px) {
  .txt-lg-pb {
    padding-block-end: var(--txt-py);
  }
}

/* ─── Section Padding ────────────────────────────────────── */
.section-py {
  padding-block: var(--section-py);
}

.section-pt {
  padding-top: var(--section-py);
}

.section-pb {
  padding-bottom: var(--section-py);
}

.section-py--mobile-0 {
  padding-block: 0;
}
@media (min-width: 992px) {
  .section-py--mobile-0 {
    padding-block: var(--section-py);
  }
}

.section-pt--mobile-0 {
  padding-top: 0;
}
@media (min-width: 992px) {
  .section-pt--mobile-0 {
    padding-top: var(--section-py);
  }
}

.section-pb--mobile-0 {
  padding-bottom: 0;
}
@media (min-width: 992px) {
  .section-pb--mobile-0 {
    padding-bottom: var(--section-py);
  }
}

/* =========================================
  DDWPS Layout Language

  HTML class describes intent:
  - section-* = content meaning
  - layout-*  = layout pattern
  - txt/media = content type
  - *-wrap    = component boundary

  Numeric values stay in CSS variables and can be
  overridden on .pageXX or .section-*.
========================================= */
.layout-split {
  display: grid;
  grid-template-columns: var(--layout-columns, minmax(0, 1fr) minmax(0, 1fr));
  align-items: center;
  -moz-column-gap: var(--layout-gap-x);
       column-gap: var(--layout-gap-x);
  row-gap: var(--layout-gap-y);
}
@media (max-width: 991.98px) {
  .layout-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 992px) {
  .layout-reverse-lg > :first-child {
    order: 2;
  }
  .layout-reverse-lg > :last-child {
    order: 1;
  }
}

.layout-stack {
  display: grid;
  -moz-column-gap: var(--layout-gap-x);
       column-gap: var(--layout-gap-x);
  row-gap: var(--layout-gap-y);
}

.layout-gallery,
.layout-cards {
  display: grid;
  grid-template-columns: repeat(var(--layout-columns, 3), minmax(0, 1fr));
  -moz-column-gap: var(--layout-gap-x);
       column-gap: var(--layout-gap-x);
  row-gap: var(--layout-gap-y);
}
@media (max-width: 991.98px) {
  .layout-gallery,
  .layout-cards {
    grid-template-columns: repeat(var(--layout-columns-m, 1), minmax(0, 1fr));
  }
}

.txt,
.media {
  min-width: 0;
}

.txt-wrap {
  width: 100%;
  max-width: var(--txt-max-width, none);
}

.txt-title {
  margin: 0 0 var(--txt-title-gap);
}
.txt-title:last-child {
  margin-bottom: 0;
}

.txt-body {
  display: grid;
  gap: var(--txt-body-gap);
}
.txt-body p {
  margin: 0;
}

.media-slider,
.media-video,
.media-map {
  width: 100%;
}

/*
  🔠 Body：全站 typography 的**唯一**權威來源。
  值全部讀 --font-body-*（定義於 `_root.scss`），案件只覆寫 Token，
  不得在別處再宣告一次 body 的 font-family / font-size。
*/
body {
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  letter-spacing: var(--font-body-letter-spacing);
}
@media (max-width: 991.98px) {
  body {
    font-size: var(--font-body-size-mobile);
  }
}

/* ========================
  🏷 Page Typography Patterns
  語意標題 class — 全站共用標題組合樣式
  修改此處即可全站同步，不需逐一改 section
  需要差異化時，在 style.scss 內的 pageXX 局部覆蓋
======================== */
/* 英文裝飾大標（LOCATION / CONCEPT 等）
  字體切換：直接加 .font-* class
   modifier: --primary */
.page-en-title {
  font-size: calc(72 * var(--vw-base));
  font-family: var(--font-en-serif);
  font-weight: 300;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
@media (max-width: 991.98px) {
  .page-en-title {
    font-size: calc(45.3 * var(--vw-base));
  }
}
.page-en-title__gradient {
  background: linear-gradient(312deg, #000000 0%, #693905 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 中文主標題
  字體切換：直接加 .font-* class
   modifier: --primary */
.page-zh-title {
  font-size: calc(32 * var(--vw-base));
  font-family: var(--font-zh-serif);
  font-weight: normal;
  line-height: 1.8;
  white-space: nowrap;
  margin-bottom: 0;
}
@media (max-width: 991.98px) {
  .page-zh-title {
    font-size: calc(22.5 * var(--vw-base));
  }
}
.page-zh-title__gradient {
  background: linear-gradient(312deg, #000000 0%, #693905 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 中文次標題（Optional）modifier: --primary */
.page-zh-subtitle {
  font-family: var(--font-zh-serif);
  font-weight: 400;
  font-size: calc(40 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-zh-subtitle {
    font-size: calc(23.8 * var(--vw-base));
  }
}

/* 英文次標題（Optional）modifier: --primary */
.page-en-subtitle {
  font-family: var(--font-en-sans);
  font-weight: 400;
  font-size: calc(24 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-en-subtitle {
    font-size: calc(19.3 * var(--vw-base));
  }
}

/* 中文小標籤（Optional）modifier: --primary */
.page-zh-label {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(12 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-zh-label {
    font-size: calc(10.8 * var(--vw-base));
  }
}

/* 英文小標籤（Optional）modifier: --primary */
.page-en-label {
  font-family: var(--font-en-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: calc(12 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-en-label {
    font-size: calc(10.8 * var(--vw-base));
  }
}

/* 圖說 / 註解（Optional）
  字體切換：直接加 .font-* class
   modifier: --primary */
.page-caption {
  font-family: var(--font-zh-sans);
  font-weight: 400;
  font-size: calc(12 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-caption {
    font-size: calc(10.8 * var(--vw-base));
  }
}

/* ========================
  📢 Slogan（廣告標語系統）
  用於 Banner / Footer 品牌訴求語
  字體切換：直接加 .font-* class
======================== */
/* 廣告標語容器：無預設對齊，搭配 .text-spread 啟用字元均分 */
.slogan-wrap {
  max-width: 100%;
  margin-inline: auto;
}

/* 標語字級一（最大） modifier: --primary */
.page-slogan-heading1 {
  font-family: var(--font-zh-serif);
  font-weight: normal;
  letter-spacing: 0.3rem;
  line-height: 1.8;
  font-size: calc(48 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-slogan-heading1 {
    font-size: calc(30.2 * var(--vw-base));
  }
}

/* 標語字級二（次大） modifier: --primary */
.page-slogan-heading2 {
  font-family: var(--font-zh-serif);
  font-size: calc(38.4 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-slogan-heading2 {
    font-size: calc(23.2 * var(--vw-base));
  }
}

/* 標語字級三（中） modifier: --primary */
.page-slogan-heading3 {
  font-family: var(--font-zh-sans);
  font-size: calc(28.8 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-slogan-heading3 {
    font-size: calc(17.6 * var(--vw-base));
  }
}

/* 標語小標籤（小） modifier: --primary */
.page-slogan-label {
  font-family: var(--font-en-sans);
  text-transform: uppercase;
  color: #693905;
  font-size: calc(12 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .page-slogan-label {
    font-size: calc(10.8 * var(--vw-base));
  }
}

/* ========================
  ✨ Text Decoration Utilities
======================== */
/* 字元均分
  1. 加在 .slogan-wrap 上 → 所有子行統一均分：<div class="slogan-wrap text-spread">
  2. 單一元素獨立使用 → <h2 class="page-slogan-heading1 text-spread">
   兩者都需在 style.scss 設定 width */
.text-spread {
  max-width: 100%;
  margin-inline: auto;
  text-align: justify;
  -moz-text-align-last: justify;
       text-align-last: justify;
  white-space: nowrap;
}

/* 文字左右對齊*/
.text-justify {
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: normal;
  overflow-wrap: break-word;
}

@media (min-width: 992px) {
  .text-lg-justify {
    text-align: justify !important;
    text-justify: inter-ideograph;
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* 最後一行對齊，搭配 .text-justify / .text-lg-justify 使用 */
.text-last-start {
  -moz-text-align-last: start;
       text-align-last: start;
}

.text-last-center {
  -moz-text-align-last: center;
       text-align-last: center;
}

.text-last-end {
  -moz-text-align-last: end;
       text-align-last: end;
}

.text-last-justify {
  -moz-text-align-last: justify;
       text-align-last: justify;
}

@media (min-width: 992px) {
  .text-last-lg-start {
    -moz-text-align-last: start;
         text-align-last: start;
  }
}

@media (min-width: 992px) {
  .text-last-lg-center {
    -moz-text-align-last: center;
         text-align-last: center;
  }
}

@media (min-width: 992px) {
  .text-last-lg-end {
    -moz-text-align-last: end;
         text-align-last: end;
  }
}

@media (min-width: 992px) {
  .text-last-lg-justify {
    -moz-text-align-last: justify;
         text-align-last: justify;
  }
}

/* 線條夾文字
  顏色繼承父層，深色背景自動變白：<p class="title-lined text-white">
   用法：<p class="title-lined page-slogan-heading3"> */
.title-lined {
  display: flex;
  align-items: center;
}
.title-lined::before, .title-lined::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.title-lined::before {
  margin-right: 1.5rem;
}
.title-lined::after {
  margin-left: 1.5rem;
}

/* ========================
  🈶 Typography Feature Utilities（CJK 排版特性）
  只切換 OpenType feature，不含字型、字級、行高或對齊，
  因此不是 Text Style，也不是元件；屬於節點層的排版特性 utility。
  斷點差異一律寫在 class 名稱上：base 為 Mobile，Desktop 用 text-desktop-* 覆寫，
  不得把 media query 藏進沒有斷點名稱的 class。
======================== */
/* CJK 約物緊縮：等同 Illustrator 的「標點擠壓（約物半形）」 */
.text-cjk-compact {
  font-feature-settings: "halt";
}

/* Desktop 還原正常約物寬度 */
@media (min-width: 992px) {
  .text-desktop-cjk-normal {
    font-feature-settings: normal;
  }
}

/* ========================
  🔤 Font System
======================== */
.font-zh-sans {
  font-family: var(--font-zh-sans);
}

.font-zh-serif {
  font-family: var(--font-zh-serif);
}

.font-en-sans {
  font-family: var(--font-en-sans);
}

.font-en-serif {
  font-family: var(--font-en-serif);
}

/*
  .txt-wrap 標準結構：
  .txt-wrap
    ├── .txt-title    → 標題群組（label / title / subtitle）
    ├── .txt-body     → 段落內文（<p> 自動套用對齊規則）
    └── small.page-caption
*/
@media (max-width: 991.98px) {
  .txt-title.text-center .page-en-title,
  .txt-title.text-center .page-zh-title,
  .txt-title.text-center .page-zh-subtitle {
    display: flex;
    justify-content: center;
  }
  .txt-title.text-center .page-en-title span,
  .txt-title.text-center .page-zh-title span,
  .txt-title.text-center .page-zh-subtitle span {
    display: inline-block;
    white-space: nowrap;
  }
}
/* ========================
  🎞 Plugins
======================== */
/* fancybox */
.fancybox-navigation {
  height: 100vh;
}

/* swiper */
.swiper-button-next,
.swiper-button-prev {
  color: #693905;
}

.swiper-pagination-bullet-active {
  background: #693905;
}

.swiper-pagination-bullet {
  background: #fff;
}
.swiper-pagination-bullet-active {
  background: #693905;
}

/* DDWPS media carousel defaults.
   Third-party compatibility belongs in _vendors.scss; component appearance
   belongs here and may be overridden by a scoped #pageXX .media-slider rule. */
.media-slider {
  --swiper-navigation-color: #ffffff;
  --swiper-pagination-color: #808080;
  --swiper-pagination-bullet-inactive-color: #808080;
  --swiper-pagination-bullet-inactive-opacity: 0.45;
}
.media-slider .swiper-button-prev,
.media-slider .swiper-button-next {
  color: var(--swiper-navigation-color);
}
.media-slider .swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color);
  opacity: var(--swiper-pagination-bullet-inactive-opacity);
}
.media-slider .swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color);
  opacity: 1;
}

/* ========================
  📐 Section
======================== */
/* --- 高度 ---
  手機 / 平板直向：min-height: 100svh
  桌機橫向（≥1200px）：aspect-ratio: 16/9
  加 .is-fullscreen 可強制所有裝置皆 100svh
*/
/* Exporter 對所有 Section 輸出的穩定結構 class；
   不以 HTML tag 或 pageXX 流水號代替結構身分。 */
.section {
  width: 100%;
}

@media (min-width: 992px) {
  .section-screen {
    min-height: unset;
    aspect-ratio: 16/9;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.section-screen.is-fullscreen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (orientation: landscape) and (min-width: 992px) {
  .section-screen.is-fullscreen {
    aspect-ratio: unset;
    min-height: 100svh;
  }
}

/* --- 垂直對齊（需搭配高度 class 或自訂高度才有效果） --- */
.section-v-center {
  display: flex;
  align-items: center;
}

.section-v-between {
  display: flex;
  align-items: stretch;
}
.section-v-between > .container,
.section-v-between > .container-fluid {
  flex: 1 1 auto;
}

/* ========================
  🖼 Image
======================== */
/*
  .img-wrap 支援兩種內部結構：

  Background-image 版本（圖片路徑寫在案件 SCSS）：
  <div class="img-wrap">
    <div class="img-ratio">
      <div class="img-bg"></div>
    </div>
    <div class="img-caption">說明</div>
  </div>

  <img> 版本（比例變數寫在案件 SCSS）：
  <div class="img-wrap">
    <img class="img-cover" src="xxx.jpg" alt="..." loading="lazy">
    <div class="img-caption">說明</div>
  </div>
*/
.img-wrap {
  position: relative;
}
.img-wrap a {
  display: block;
}
.img-wrap .img-ratio {
  position: relative;
  width: 100%;
  padding-top: 70%;
  aspect-ratio: var(--ratio);
}
@media (max-width: 991.98px) {
  .img-wrap .img-ratio {
    aspect-ratio: var(--ratio-m, var(--ratio));
  }
}
.img-wrap .img-ratio .img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.img-wrap.img-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 23/5;
  background: linear-gradient(123deg, rgba(0, 0, 0, 0) 32.84%, rgb(0, 0, 0) 100%);
  mask: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask: linear-gradient(to bottom, transparent 0%, black 100%);
  pointer-events: none;
}
.img-wrap.img-gradient .img-caption {
  z-index: 2;
}

.img-cover {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  aspect-ratio: var(--ratio, 3/2);
}
@media (max-width: 991.98px) {
  .img-cover {
    aspect-ratio: var(--ratio-m, var(--ratio, 3/2));
  }
}

.img-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  width: 100%;
  text-align: right;
  padding: calc(3 * var(--vw-base));
  text-shadow: 0 0 calc(10 * var(--vw-base)) rgba(0, 0, 0, 0.678);
  font-size: calc(12 * var(--vw-base));
}
@media (max-width: 991.98px) {
  .img-caption {
    font-size: calc(10.8 * var(--vw-base));
  }
}

/* ========================
  🗺 google Map Embed
======================== */
/*
  高度開成 --map-embed-height，讓使用端可以覆寫（例如固定比例的內嵌地圖）。
  不得用 !important 硬鎖 width／height——那會逼使用端也用 !important 才蓋得掉。
*/
.map-embed {
  --map-embed-height: clamp(calc(300 * var(--vw-base)), 50vh, calc(700 * var(--vw-base)));
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: var(--map-embed-height);
  border: 0;
}

/* ========================
  🎭 Stage / Layer（分層進場）
======================== */
.stage-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage,
.layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* ========================
  🎬 Video Components
======================== */
.bg-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bg-video-wrap > div {
  position: absolute;
  inset: 0;
}
.bg-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-ctrl-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.video-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 9999;
  pointer-events: auto;
}

.btn-music {
  font-size: 2rem;
  color: #E0DFC6;
  cursor: pointer;
  background: none;
  border: none;
  padding: 1.5vw;
  line-height: 1;
}

.btn-sound {
  display: none;
}

.video-wrap {
  display: flex;
  width: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
}
.video-wrap > div {
  width: 100%;
  font-size: 0;
  position: relative;
}
.video-wrap > div video {
  display: block;
  width: 100%;
}
.video-wrap .video-controls {
  width: 100%;
}

.youtube-embed iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1680/954;
  border: none;
}

.youtube-thumb {
  overflow: hidden;
  padding: 5% 10%;
}
.youtube-thumb a {
  display: block;
}
.youtube-thumb a .Img .img-ratio {
  padding-top: 56%;
}
.youtube-thumb a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 5rem;
  transition: all 0.5s;
}
.youtube-thumb a:hover i {
  font-size: 6rem;
  transition: all 0.5s;
}

/* ========================
  🧭 Fixed Nav Offset
======================== */
/*
  Site shell 變數：fixed nav 的高度與底部保留量。
  這裡提供元件預設值；案件若實測到不同高度，只覆蓋 --site-nav-height，
  不要另外複製 body.has-site-nav 規則。
*/
:root {
  /* Desktop：nav 固定於頂部，不佔用底部空間 */
  --site-nav-height: 0px;
  --site-nav-reserve: 0px;
}

@media (max-width: 991.98px) {
  :root {
    --site-nav-height: calc(74 * var(--vw-base));
    /* reserve = nav 實際高度 + 安全邊際。
       安全值屬功能防護，不得在窄螢幕隨 vw 縮到低於 3px。 */
    --site-nav-reserve: calc(var(--site-nav-height) + max(3px, calc(3 * var(--vw-base))));
  }
}
/*
  Exporter／模板有輸出 .site-nav 時，才在 <body> 加上 has-site-nav。
  這是明確的輸出狀態，不由 JavaScript 切換，也不使用 body:has()。
  env(safe-area-inset-bottom) 為裝置動態附加，不屬於設計稿數值。
*/
body.has-site-nav {
  padding-bottom: calc(var(--site-nav-reserve) + env(safe-area-inset-bottom));
}

/* 第一個正式 Nav variant：建案／個案銷售網站。
   .site-nav 只保留 component identity，不承擔特定產品外觀。 */
.site-nav--property-sales {
  padding: 0;
  width: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: rgba(252, 252, 252, 0.571);
  backdrop-filter: saturate(180%) blur(calc(20 * var(--vw-base)));
  color: #000;
  box-shadow: calc(1 * var(--vw-base)) calc(1 * var(--vw-base)) calc(3 * var(--vw-base)) rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  /* Nav 專用 icon box：四個 icon 一律使用同一個外框尺寸，
     視覺墨跡差異再由 --site-nav-icon-scale 做最小光學校正。
     校正值來自 Chrome 4x 截圖的實際墨跡量測（墨跡高度，單位為 4x 像素）：
       phone 100｜facebook 100｜location 73｜envelope 78
     以墨跡高度 80 為共同視覺目標，換算出各自的縮放值。
     transform 不影響 Layout 尺寸，四者的 box 仍完全相同。 */
  --site-nav-icon-size: 1.35em;
}
.site-nav--property-sales .icon-phone {
  --site-nav-icon-scale: 0.8;
}
.site-nav--property-sales .icon-facebook {
  --site-nav-icon-scale: 0.8;
}
.site-nav--property-sales .icon-location {
  --site-nav-icon-scale: 1.1;
}
.site-nav--property-sales .icon-envelope {
  --site-nav-icon-scale: 1.03;
}
.site-nav--property-sales .navbar-brand {
  padding-inline: 2%;
  display: flex;
  align-items: center;
}
.site-nav--property-sales .navbar-brand img {
  height: 2.7rem;
}
.site-nav--property-sales .navbar-Link {
  display: flex;
}
.site-nav--property-sales .navbar-Link .btn {
  flex: 1;
  /* 每一個項目內部改直向堆疊（icon / 標題 / 副標）；
     .site-nav 與 .navbar-Link 本身維持橫向排列 */
  flex-direction: column;
  /* 副標放大到 vw(24) 後，最寬的「GoogleMap」需 vw(134)；vw(160) 保留左右各約 13px 餘裕 */
  min-width: calc(160 * var(--vw-base));
  color: #333;
  padding: calc(12 * var(--vw-base)) calc(24 * var(--vw-base));
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.site-nav--property-sales .navbar-Link .btn:hover, .site-nav--property-sales .navbar-Link .btn:active {
  border-color: transparent;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.6666666667);
}
.site-nav--property-sales .navbar-Link .btn > i {
  /* Desktop 不顯示 icon；box 尺寸仍統一定義，Mobile 直接開啟顯示 */
  display: none;
  flex: 0 0 var(--site-nav-icon-size);
  width: var(--site-nav-icon-size);
  height: var(--site-nav-icon-size);
  /* transform 不影響 Layout 尺寸，只做視覺墨跡校正 */
  transform: scale(var(--site-nav-icon-scale, 1));
}
.site-nav--property-sales .navbar-Link .btn {
  /*
    主標（中文）：Desktop 文字層級，四個 action 共用同一套樣式，
    不為個別 action（電話／FB／Map／Booking）設定字級。
  */
}
.site-nav--property-sales .navbar-Link .btn b {
  display: block;
  font-size: calc(18 * var(--vw-base));
  line-height: 1.2;
  font-weight: normal;
}
.site-nav--property-sales .navbar-Link .btn {
  /*
    副標（電話號碼／英文名稱）：以真正的 Typography 建立層級，
    不用 transform 縮放文字（縮放會連同字重與 hinting 一起失真）。
    四個 action 共用同一組規則。
  */
}
.site-nav--property-sales .navbar-Link .btn span {
  display: block;
  font-size: calc(20 * var(--vw-base));
  line-height: 1.2;
  letter-spacing: 0.03em;
  transform: none;
  white-space: nowrap;
}
.site-nav--property-sales .navbar-Link .btn {
  /*
    缺值連結（例如尚未提供 FB／Google Map URL）：
    不輸出 href、加上 aria-disabled="true"，因此本身即不可 focus。
    只停用互動，不改變文字與 icon 顏色，維持與其他項目一致。
  */
}
.site-nav--property-sales .navbar-Link .btn.is-disabled {
  pointer-events: none;
  cursor: default;
}
.site-nav--property-sales {
  /* Sticky */
  opacity: 0;
  transform: translateY(calc(-10 * var(--vw-base)));
  transition: all 0.5s;
  pointer-events: none;
}
.site-nav--property-sales.Sticky {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s;
  pointer-events: all;
}
@media (max-width: 991.98px) {
  .site-nav--property-sales {
    box-shadow: 0 calc(-6 * var(--vw-base)) calc(20 * var(--vw-base)) rgba(0, 0, 0, 0.1);
    bottom: 0;
    top: auto;
  }
  .site-nav--property-sales .navbar-brand {
    display: none;
  }
  .site-nav--property-sales .navbar-Link {
    width: 100%;
  }
  .site-nav--property-sales .navbar-Link .btn {
    min-width: auto;
    font-size: calc(14 * var(--vw-base));
    padding: calc(10 * var(--vw-base)) 0;
    padding-bottom: calc(20 * var(--vw-base));
  }
  .site-nav--property-sales .navbar-Link .btn > i {
    display: block;
  }
  .site-nav--property-sales .navbar-Link .btn {
    /* Desktop 文字層級不套用到 Mobile：主標回到繼承 .btn 的字級與行高 */
  }
  .site-nav--property-sales .navbar-Link .btn b {
    font-size: 1em;
    line-height: inherit;
    font-weight: normal;
  }
  .site-nav--property-sales .navbar-Link .btn span {
    display: none;
  }
}

/* ========================
  Site Footer variants
======================== */
/*
  Footer 的背景與文字色開成元件 Token。
  用 `background`（不是 `background-color`）讓 --site-footer-background
  同時接受純色與漸層；Footer 因此不再把 --color-brand-primary 當成固定背景責任，
  案件只要覆寫元件 Token 就能換底，不需要改品牌色，也不需要 !important。
*/
.site-footer--property-sales {
  --site-footer-background: var(--color-brand-primary);
  --site-footer-color: var(--color-fixed-white);
  --site-footer-font-family: var(--font-zh-serif);
  padding-block: calc(16 * var(--vw-base));
  background: var(--site-footer-background);
  color: var(--site-footer-color);
  text-align: center;
  font-family: var(--site-footer-font-family);
  font-size: calc(14 * var(--vw-base));
  line-height: 1.7142857143;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__credit-link {
  color: inherit;
  line-height: 1;
}

@media (max-width: 991.98px) {
  .site-footer--property-sales {
    padding-block: calc(20 * var(--vw-base));
    font-size: calc(18 * var(--vw-base));
    line-height: 1.6666666667;
  }
}
/* 隱私權政策 Fancybox inline content。隱藏掛在來源容器，不能掛在
   Fancybox 開啟時會搬移的 #privacy-policy 內容節點本身。 */
.site-policy-source {
  display: none;
}

.site-policy {
  width: 100%;
  max-width: 1000px;
  padding: 40px;
  background-color: var(--color-fixed-white);
  color: var(--color-text-primary);
  font-family: var(--font-zh-serif);
  font-size: 16px;
  line-height: 1.9;
  text-align: justify;
}

.site-policy__title {
  margin: 0 0 24px;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
  color: var(--color-brand-primary);
}

.site-policy__subtitle {
  margin: 28px 0 8px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-brand-primary);
}

.site-policy p {
  margin: 0 0 12px;
}

.site-policy__list {
  margin: 0 0 12px;
  padding-inline-start: 1.6em;
  list-style: disc;
}

.site-policy__list li {
  margin-block-end: 4px;
}

.site-policy__actions {
  margin-block-start: 32px;
  text-align: center;
}

.site-policy__close {
  min-width: 160px;
  padding: 12px 32px;
  border: 0;
  background-color: var(--color-brand-secondary);
  font-family: var(--font-zh-serif);
  font-size: 16px;
  color: var(--color-fixed-white);
  cursor: pointer;
}

@media (max-width: 991.98px) {
  .site-policy {
    padding: 24px 20px;
    font-size: 15px;
  }
  .site-policy__title {
    font-size: 19px;
  }
  .site-policy__subtitle {
    font-size: 16px;
  }
  .site-policy__close {
    width: 100%;
    min-width: 0;
  }
}
body.is-loading {
  overflow: hidden;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background-color: #f6f1eb;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.site-loader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.site-loader__logo {
  width: calc(240 * var(--vw-base));
  height: auto;
}

.site-loader__logo path {
  fill: transparent;
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  stroke-width: 1.2;
}

.site-loader__logo path.st0 {
  stroke: #4D4D4D;
  animation: logo-reveal-dark 2.4s ease-in-out forwards;
}

.site-loader__logo path.st1 {
  stroke: #C8C9CA;
  animation: logo-reveal-light 2.4s ease-in-out forwards;
}

@keyframes logo-reveal-dark {
  0% {
    stroke-dashoffset: var(--len, 2000);
    fill: transparent;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  65% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #4D4D4D;
    opacity: 1;
  }
}
@keyframes logo-reveal-light {
  0% {
    stroke-dashoffset: var(--len, 2000);
    fill: transparent;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  65% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #C8C9CA;
    opacity: 1;
  }
}
.site-loader__spinner {
  width: calc(70 * var(--vw-base));
  height: calc(70 * var(--vw-base));
  border: calc(1 * var(--vw-base)) solid rgba(105, 57, 5, 0.25);
  border-top-color: #693905;
  border-radius: 50%;
  animation: site-loader-spin 0.7s linear infinite;
  will-change: transform;
}

@keyframes site-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader {
    transition: none;
  }
  .site-loader__logo path.st0 {
    animation: none;
    stroke-dashoffset: 0;
    fill: #4D4D4D;
    opacity: 1;
  }
  .site-loader__logo path.st1 {
    animation: none;
    stroke-dashoffset: 0;
    fill: #C8C9CA;
    opacity: 1;
  }
  .site-loader__spinner {
    animation: none;
    will-change: auto;
  }
}
.icon-phone,
.icon-facebook,
.icon-location,
.icon-envelope {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: var(--icon-mask) center/contain no-repeat;
  -webkit-mask: var(--icon-mask) center/contain no-repeat;
}

/* 單一來源：四個 nav icon 一律使用 --icon-mask 契約（1em box）。
   此處採用原本第二段定義的圖形，避免整併後 phone 圖形改變。 */
.icon-phone {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42a18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/svg%3E");
}

.icon-facebook {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M16 8.049C16 3.603 12.418 0 8 0S0 3.603 0 8.049C0 12.067 2.925 15.397 6.75 16v-5.624H4.719V8.049H6.75V6.276c0-2.017 1.194-3.132 3.022-3.132.875 0 1.791.157 1.791.157v1.984h-1.009c-.994 0-1.304.621-1.304 1.258v1.506h2.219l-.355 2.327H9.25V16C13.075 15.397 16 12.067 16 8.049z'/%3E%3C/svg%3E");
}

.icon-location {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M12 6c0 2.05-2.17 5.23-4 7.44C6.17 11.23 4 8.05 4 6a4 4 0 1 1 8 0zm-4 2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
}

.icon-envelope {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-.5a.5.5 0 0 0-.5.5v.217l6.5 3.9 6.5-3.9V4a.5.5 0 0 0-.5-.5H2zm12.5 2.466-4.793 2.876L14.5 11.7V5.966zM14.293 13 8.97 9.806 8 10.388l-.97-.582L1.707 13h12.586zM1.5 11.7l4.793-2.858L1.5 5.966V11.7z'/%3E%3C/svg%3E");
}

.icon, .icon-cat {
  --icon-size: 1.35em;
  vertical-align: -0.22em;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
}

.icon-filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

.icon-cat {
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  --svg: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxZW0nIGhlaWdodD0nMWVtJyB2aWV3Qm94PScwIDAgMjQgMjQnPjxwYXRoIGQ9J00wIDBoMjR2MjRIMHonIGZpbGw9J25vbmUnIC8+PGcgZmlsbD0nbm9uZScgc3Ryb2tlPSdjdXJyZW50Q29sb3InIHN0cm9rZS13aWR0aD0nMS41Jz48cGF0aCBzdHJva2UtbGluZWNhcD0ncm91bmQnIGQ9J00xOS4xIDEwLjY2YzEuMTExIDEuMzE0Ljg4IDIuOTIyLjg4IDQuMzRjMCAzLjkwNi01LjI2NyA1LTcuOTggNXMtNy45OC0xLjA5NC03Ljk4LTVjMC0xLjQxOC0uMjMxLTMuMDI2Ljg4LTQuMzRtMTQuMiAwYy0uMTk1LS4yMy0uNDMtLjQ1LS43MTYtLjY2bS43MTUuNjZjLjcuNDAzLjg4LTEuMTA1Ljg4MS0xLjU5OFY3LjE4OEMxOS45OCA1LjU2MyAxOC44NjMgNSAxNy45MDUgNWMtLjk1NyAwLTIuODczIDEuNTYzLTMuNTExIDEuNTYzYy0uNzY2IDAtLjkxNC0uMTU3LTIuMzk0LS4xNTdzLTEuNjI4LjE1Ny0yLjM5NC4xNTdDOC45NjggNi41NjMgNy4wNTIgNSA2LjA5NSA1UzQuMDIgNS41NjMgNC4wMiA3LjE4OHYxLjg3NWMuMDAyLjQ5Mi4xOCAyIC44OCAxLjU5N20wIDBjLjE5NS0uMjMuNDMtLjQ1LjcxNi0uNjYnIC8+PHBhdGggZD0nTTEyLjgyNiAxNmMwIC4xNzMtLjM2MS4zMTMtLjgwNy4zMTNjLS40NDUgMC0uODA2LS4xNC0uODA2LS4zMTNzLjM2MS0uMzEyLjgwNi0uMzEycy44MDcuMTQuODA3LjMxMlptMi42NzQtMi40MDZjMCAuNDMxLS4yMTcuNzgxLS40ODQuNzgxcy0uNDg0LS4zNS0uNDg0LS43ODFzLjIxNy0uNzgxLjQ4NC0uNzgxcy40ODQuMzUuNDg0Ljc4Wm0tNiAwYzAgLjQzMS0uMjE3Ljc4MS0uNDg0Ljc4MXMtLjQ4NC0uMzUtLjQ4NC0uNzgxcy4yMTctLjc4MS40ODQtLjc4MXMuNDg0LjM1LjQ4NC43OFonIC8+PHBhdGggc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBkPSdNMjIgMTUuNDY5Yy0uNDgzLS4zMTMtMi41OC0xLjA5NC0zLjM4Ny0xLjA5NG0xLjc3NCAzLjU5NGMtLjQ4NC0uMzEzLTEuNjEzLTEuMDk0LTIuNDItMS4wOTRNMiAxNS40NjljLjQ4NC0uMzEzIDIuNTgtMS4wOTQgMy4zODctMS4wOTRtLTEuNzc0IDMuNTk0Yy40ODQtLjMxMyAxLjYxMy0xLjA5NCAyLjQyLTEuMDk0JyAvPjwvZz48L3N2Zz4g");
}

.icon-logo-utmost {
  --logo-height: 1em;
  display: inline-block;
  width: auto;
  height: var(--logo-height);
  aspect-ratio: 253/61.7;
  background-color: currentColor;
  -webkit-mask-image: url("../images/logo-utmost.svg");
  mask-image: url("../images/logo-utmost.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.aerial-bg {
  --aerial-bg: #2285de;
  background-color: var(--aerial-bg);
}

.aerial-anchor {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
.aerial-anchor .aerial-anchor-label {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding: calc(3 * var(--vw-base)) calc(10 * var(--vw-base));
  white-space: nowrap;
  letter-spacing: 0.05em;
  margin-bottom: calc(4 * var(--vw-base));
  backdrop-filter: blur(calc(4 * var(--vw-base)));
}
.aerial-anchor::before {
  content: "";
  display: block;
  width: calc(1 * var(--vw-base));
  height: calc(36 * var(--vw-base));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
  margin: 0 auto;
}
.aerial-anchor::after {
  content: "";
  display: block;
  width: calc(8 * var(--vw-base));
  height: calc(8 * var(--vw-base));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 calc(3 * var(--vw-base)) rgba(255, 255, 255, 0.35), 0 0 calc(14 * var(--vw-base)) calc(4 * var(--vw-base)) rgba(255, 255, 255, 0.5);
  margin: calc(4 * var(--vw-base)) auto 0;
}

.aerial-map-wrap {
  position: relative;
  --aerial-h: 80vh;
  --aerial-min-h: 100vh;
}
.aerial-map-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  padding-top: 20%;
  background: linear-gradient(to bottom, var(--aerial-bg) 0%, transparent 100%);
}
@media (max-width: 991.98px) {
  .aerial-map-wrap {
    height: var(--aerial-h);
    min-height: var(--aerial-min-h);
    overflow: hidden;
  }
}
.aerial-map-wrap .aerial-txt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}
.aerial-map-wrap .aerial-txt-overlay > * {
  pointer-events: auto;
}
.aerial-map-wrap .aerial-txt-overlay .txt-wrap {
  text-align: center;
}
.aerial-map-wrap .aerial-txt-overlay .txt-wrap > small {
  display: block;
  letter-spacing: 0.3em;
  opacity: 0.75;
  margin-bottom: 0.5rem;
}
@media (max-width: 991.98px) {
  .aerial-map-wrap .aerial-map-scroll {
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
  }
  .aerial-map-wrap .aerial-map-scroll:active {
    cursor: grabbing;
  }
  .aerial-map-wrap .aerial-map-scroll::-webkit-scrollbar {
    display: none;
  }
}
.aerial-map-wrap .aerial-map-inner {
  position: relative;
}
@media (min-width: 992px) {
  .aerial-map-wrap .aerial-map-inner img {
    display: block;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 991.98px) {
  .aerial-map-wrap .aerial-map-inner {
    display: inline-block;
    height: var(--aerial-h);
    min-height: var(--aerial-min-h);
  }
  .aerial-map-wrap .aerial-map-inner img {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
  }
}
.aerial-map-wrap .aerial-hint {
  position: absolute;
  left: calc(10 * var(--vw-base));
  bottom: calc(10 * var(--vw-base));
  z-index: 5;
  animation: aerial-hint-flick 2s ease-in-out infinite alternate;
}
.aerial-map-wrap .aerial-hint--icon {
  left: 50%;
  bottom: 10vw;
  transform: translateX(-50%);
  animation: none;
}

.txt-wrap .aerial-hint--icon {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
}

.aerial-hint {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0 calc(8 * var(--vw-base)) rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.aerial-hint--icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--vw-base));
  font-size: 1.5rem;
  letter-spacing: 0;
}
.aerial-hint--icon .bi {
  display: block;
  animation: aerial-hint-swipe 0.9s ease-in-out infinite alternate;
}
.aerial-hint--icon small {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

@keyframes aerial-hint-flick {
  0% {
    letter-spacing: 0.02em;
  }
  100% {
    letter-spacing: 0.16em;
  }
}
@keyframes aerial-hint-swipe {
  from {
    transform: translateX(-12px);
  }
  to {
    transform: translateX(calc(12 * var(--vw-base)));
  }
}
html.is-draft {
  --draft-line-width: calc(2 * var(--vw-base));
  --draft-grid-color: rgba(255, 193, 7, .28);
  --draft-grid-border: rgba(255, 193, 7, .85);
  --draft-content-padding-color: rgba(0, 132, 255, .18);
  --draft-content-padding-border: rgba(0, 132, 255, .75);
  --draft-txt-padding-color: rgba(255, 0, 180, .16);
  --draft-txt-padding-border: rgba(255, 0, 180, .75);
}
@media (min-width: 992px) {
  html.is-draft {
    --draft-line-width: calc(1 * var(--vw-base));
  }
}
html.is-draft body {
  position: relative;
}
html.is-draft body::after {
  content: "";
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 0% 21.5%;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  border: calc(2 * var(--vw-base)) solid blue;
  opacity: 0.2;
}
@media (min-width: 992px) {
  html.is-draft body::after {
    background-position: 0% 0%;
  }
}
html.is-draft body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cg font-family='Arial,sans-serif' font-size='18' font-weight='700' text-anchor='middle' dominant-baseline='middle' fill='red' stroke='white' stroke-width='4' paint-order='stroke'%3E%3Ctext x='50' y='16'%3E1%3C/text%3E%3Ctext x='150' y='16'%3E2%3C/text%3E%3Ctext x='250' y='16'%3E3%3C/text%3E%3Ctext x='350' y='16'%3E4%3C/text%3E%3Ctext x='450' y='16'%3E5%3C/text%3E%3Ctext x='550' y='16'%3E6%3C/text%3E%3Ctext x='650' y='16'%3E7%3C/text%3E%3Ctext x='750' y='16'%3E8%3C/text%3E%3Ctext x='850' y='16'%3E9%3C/text%3E%3Ctext x='950' y='16'%3E10%3C/text%3E%3Ctext x='1050' y='16'%3E11%3C/text%3E%3Ctext x='1150' y='16'%3E12%3C/text%3E%3C/g%3E%3C/svg%3E"), repeating-linear-gradient(90deg, transparent 0, transparent calc(8.3333333333% - var(--draft-line-width)), red calc(8.3333333333% - var(--draft-line-width)), red 8.3333333333%);
  background-repeat: no-repeat, repeat;
  background-size: 100% calc(32 * var(--vw-base)), auto;
  background-position: center, 0 0;
}
html.is-draft .container {
  border: var(--draft-line-width) solid rgb(0, 26, 255);
}
html.is-draft .container > .row {
  position: relative;
}
html.is-draft .container > .row::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  border: var(--draft-line-width) solid rgb(0, 255, 51);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cg font-family='Arial,sans-serif' font-size='18' font-weight='700' text-anchor='middle' dominant-baseline='middle' fill='rgb(0,255,51)' stroke='white' stroke-width='4' paint-order='stroke'%3E%3Ctext x='50' y='16'%3E1%3C/text%3E%3Ctext x='150' y='16'%3E2%3C/text%3E%3Ctext x='250' y='16'%3E3%3C/text%3E%3Ctext x='350' y='16'%3E4%3C/text%3E%3Ctext x='450' y='16'%3E5%3C/text%3E%3Ctext x='550' y='16'%3E6%3C/text%3E%3Ctext x='650' y='16'%3E7%3C/text%3E%3Ctext x='750' y='16'%3E8%3C/text%3E%3Ctext x='850' y='16'%3E9%3C/text%3E%3Ctext x='950' y='16'%3E10%3C/text%3E%3Ctext x='1050' y='16'%3E11%3C/text%3E%3Ctext x='1150' y='16'%3E12%3C/text%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to right, rgba(123, 255, 0, 0.1) 0, rgba(123, 255, 0, 0.1) calc(100% - var(--draft-line-width)), rgb(0, 255, 51) calc(100% - var(--draft-line-width)), rgb(0, 255, 51) 100%);
  background-repeat: no-repeat, repeat;
  background-size: 100% calc(32 * var(--vw-base)), 8.3333333333% 100%;
  background-position: center, 0 0;
}
html.is-draft .container > .row::after {
  content: "";
  position: absolute;
  inset-block: calc(var(--grid-gap-y) / -2);
  inset-inline: 0;
  z-index: 998;
  pointer-events: none;
  border-block: 1px dashed var(--draft-grid-border);
}
html.is-draft .container > .row > [class^=col],
html.is-draft .container > .row > [class*=" col"] {
  position: relative;
  outline: 1px dashed var(--draft-grid-border);
  outline-offset: calc(var(--draft-line-width) * -1);
}
html.is-draft .container > .row > [class^=col]::before,
html.is-draft .container > .row > [class*=" col"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--draft-grid-color) 0, var(--draft-grid-color) calc(var(--grid-gap-x) / 2), transparent calc(var(--grid-gap-x) / 2), transparent calc(100% - var(--grid-gap-x) / 2), var(--draft-grid-color) calc(100% - var(--grid-gap-x) / 2), var(--draft-grid-color) 100%);
}
html.is-draft .content-px,
html.is-draft .content-ps,
html.is-draft .content-pe,
html.is-draft .content-px--mobile-0,
html.is-draft .content-ps--mobile-0,
html.is-draft .content-pe--mobile-0,
html.is-draft .txt-px,
html.is-draft .txt-py,
html.is-draft .txt-ps,
html.is-draft .txt-pe,
html.is-draft .txt-pt,
html.is-draft .txt-pb,
html.is-draft .txt-lg-px,
html.is-draft .txt-lg-py,
html.is-draft .txt-lg-ps,
html.is-draft .txt-lg-pe,
html.is-draft .txt-lg-pt,
html.is-draft .txt-lg-pb {
  --draft-content-ps: 0;
  --draft-content-pe: 0;
  --draft-txt-ps: 0;
  --draft-txt-pe: 0;
  --draft-txt-pt: 0;
  --draft-txt-pb: 0;
  outline-offset: calc(var(--draft-line-width) * -1);
}
html.is-draft .content-px,
html.is-draft .content-ps,
html.is-draft .content-pe,
html.is-draft .content-px--mobile-0,
html.is-draft .content-ps--mobile-0,
html.is-draft .content-pe--mobile-0 {
  outline: 1px dashed var(--draft-content-padding-border);
}
html.is-draft .txt-px,
html.is-draft .txt-py,
html.is-draft .txt-ps,
html.is-draft .txt-pe,
html.is-draft .txt-pt,
html.is-draft .txt-pb,
html.is-draft .txt-lg-px,
html.is-draft .txt-lg-py,
html.is-draft .txt-lg-ps,
html.is-draft .txt-lg-pe,
html.is-draft .txt-lg-pt,
html.is-draft .txt-lg-pb {
  outline: 1px dashed var(--draft-txt-padding-border);
}
html.is-draft .content-px {
  --draft-content-ps: var(--content-edge);
  --draft-content-pe: var(--content-edge);
}
html.is-draft .content-ps {
  --draft-content-ps: var(--content-edge);
  --draft-content-pe: var(--content-edge);
}
html.is-draft .content-pe {
  --draft-content-ps: var(--content-edge);
  --draft-content-pe: var(--content-edge);
}
@media (min-width: 992px) {
  html.is-draft .content-px--mobile-0 {
    --draft-content-ps: var(--content-edge);
    --draft-content-pe: var(--content-edge);
  }
  html.is-draft .content-ps--mobile-0 {
    --draft-content-ps: var(--content-edge);
    --draft-content-pe: 0;
  }
  html.is-draft .content-pe--mobile-0 {
    --draft-content-ps: 0;
    --draft-content-pe: var(--content-edge);
  }
  html.is-draft .content-ps {
    --draft-content-pe: 0;
  }
  html.is-draft .content-pe {
    --draft-content-ps: 0;
  }
  html.is-draft .ps-lg-0 {
    --draft-content-ps: 0;
    --draft-txt-ps: 0;
  }
  html.is-draft .pe-lg-0 {
    --draft-content-pe: 0;
    --draft-txt-pe: 0;
  }
  html.is-draft .pt-lg-0 {
    --draft-txt-pt: 0;
  }
  html.is-draft .pb-lg-0 {
    --draft-txt-pb: 0;
  }
}
html.is-draft .content-px,
html.is-draft .content-ps,
html.is-draft .content-pe,
html.is-draft .content-px--mobile-0,
html.is-draft .content-ps--mobile-0,
html.is-draft .content-pe--mobile-0 {
  box-shadow: inset var(--draft-content-ps) 0 0 var(--draft-content-padding-color), inset calc(var(--draft-content-pe) * -1) 0 0 var(--draft-content-padding-color);
}
html.is-draft .txt-px {
  --draft-txt-ps: var(--txt-px);
  --draft-txt-pe: var(--txt-px);
}
html.is-draft .txt-py {
  --draft-txt-pt: var(--txt-py);
  --draft-txt-pb: var(--txt-py);
}
html.is-draft .txt-ps {
  --draft-txt-ps: var(--txt-px);
}
html.is-draft .txt-pe {
  --draft-txt-pe: var(--txt-px);
}
html.is-draft .txt-pt {
  --draft-txt-pt: var(--txt-py);
}
html.is-draft .txt-pb {
  --draft-txt-pb: var(--txt-py);
}
@media (min-width: 992px) {
  html.is-draft .txt-lg-px {
    --draft-txt-ps: var(--txt-px);
    --draft-txt-pe: var(--txt-px);
  }
  html.is-draft .txt-lg-py {
    --draft-txt-pt: var(--txt-py);
    --draft-txt-pb: var(--txt-py);
  }
  html.is-draft .txt-lg-ps {
    --draft-txt-ps: var(--txt-px);
  }
  html.is-draft .txt-lg-pe {
    --draft-txt-pe: var(--txt-px);
  }
  html.is-draft .txt-lg-pt {
    --draft-txt-pt: var(--txt-py);
  }
  html.is-draft .txt-lg-pb {
    --draft-txt-pb: var(--txt-py);
  }
}
html.is-draft .txt-px,
html.is-draft .txt-py,
html.is-draft .txt-ps,
html.is-draft .txt-pe,
html.is-draft .txt-pt,
html.is-draft .txt-pb,
html.is-draft .txt-lg-px,
html.is-draft .txt-lg-py,
html.is-draft .txt-lg-ps,
html.is-draft .txt-lg-pe,
html.is-draft .txt-lg-pt,
html.is-draft .txt-lg-pb {
  box-shadow: inset var(--draft-txt-ps) 0 0 var(--draft-txt-padding-color), inset calc(var(--draft-txt-pe) * -1) 0 0 var(--draft-txt-padding-color), inset 0 var(--draft-txt-pt) 0 var(--draft-txt-padding-color), inset 0 calc(var(--draft-txt-pb) * -1) 0 var(--draft-txt-padding-color);
}

/* ========================
  🔧 Base
======================== */
*,
*::before,
*::after {
  position: relative;
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  overflow-y: auto;
}

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

/* ========================
  🔗 Link / Button
======================== */
a,
.btn {
  text-decoration: none;
  border-radius: 0;
}
a:hover,
.btn:hover {
  text-decoration: none;
}

/*
  🎯 Focus Ring（鍵盤可及性）
  焦點框不得移除：鍵盤操作必須看得見目前焦點在哪裡。
  這裡只用 :focus-visible，因此滑鼠點擊不會出現焦點框，
  但 Tab、方向鍵與螢幕閱讀器操作一定看得見。
  顏色／粗細走 --focus-ring-* Token（定義於 _root.scss），案件只要覆寫 Token 即可換色，
  不需要在案件層用 !important 補洞。
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
a,
button,
input,
select,
textarea,
summary,
[tabindex]:not([tabindex="-1"]) {
  /* 滑鼠／觸控點擊不強制呈現與鍵盤相同的焦點框 */
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) {
  outline: none;
}

a {
  color: #693905;
}

p {
  margin-bottom: 0;
}/*# sourceMappingURL=main.css.map */