@charset "UTF-8";
/* ========================
  🎨 Design Tokens - Variables
======================== */
/* Theme semantic colors */
/* 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。 */
/* ==========================================================================
  全陽交響曲 THE LIVING SYMPHONY — 案件樣式
  Desktop design width 1920（沿用 _root.scss）
  Mobile  design width 780（案件覆蓋；來源：全陽羅斯福子網_ol.ai ArtBox 0 0 780 14400）
  設計稿尺寸直接填入 vw()，不做換算。
========================================================================== */
/* ==========================================================================
  1. 案件字型
  jf 金萱 3.1 為授權字型，僅以 local() 使用「本機已安裝」的版本，
  不複製、不轉檔、不輸出、不嵌入字型檔。未安裝時退回 Noto Serif TC
  （由 index.html 的 Google Fonts 載入）與系統宋體。
========================================================================== */
@font-face {
  font-family: "Project Jinxuan";
  src: local("jf 金萱 3.1 Book"), local("jf-jinxuan-3.1-book");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Project Jinxuan";
  src: local("jf 金萱 3.1 Medium"), local("jf-jinxuan-3.1-medium");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
/* 需要做 alpha 運算的地方使用（CSS 變數無法直接進 rgba()） */
/* ==========================================================================
  2. Root Token（案件覆蓋）
========================================================================== */
:root {
  --color-brand-primary: #860000;
  --color-brand-secondary: #c89f62;
  /* Hover 尚無設計稿依據：第一版與 Default 相同，待確認後再調整此兩行 */
  --color-brand-primary-hover: #860000;
  --color-brand-secondary-hover: #c89f62;
  --color-text-primary: #5e5b5a;
  --color-background-primary: #ffffff;
  /* 文字群組間距（候選值：跨 Section 實測一致）
     設計稿量到的是「墨跡距離」：label→主標 39、標題→內文 33、段落→段落 51。
     CSS margin 是盒模型距離，需扣掉 line-height 的上下留白，故實際寫入較小值。 */
  --txt-label-gap: calc(19 * var(--vw-base));
  --txt-title-gap: calc(20 * var(--vw-base));
  --txt-body-gap: calc(37 * var(--vw-base));
}

@media (max-width: 991.98px) {
  :root {
    --design-width: 780;
    --content-edge: calc(70 * var(--vw-base));
    --section-py: calc(65 * var(--vw-base));
    --txt-label-gap: calc(19 * var(--vw-base));
    --txt-title-gap: calc(20 * var(--vw-base));
    --txt-body-gap: calc(37 * var(--vw-base));
    /* 覆蓋 _nav.scss 的預設高度為本案實測值：.btn 改 column 後重新量測 = 99.4 @780。
       只覆蓋高度，reserve 與 body.has-site-nav 規則都留在共用層。 */
    --site-nav-height: calc(99.4 * var(--vw-base));
  }
}
/* ==========================================================================
  3. --design-width 由 610 改為 780 的補償
  共用檔內所有手機 vw() 是以 610 為基準挑的數字，改成 780 後會縮為 78.2%。
  以下把「實際會用到」的 UI 元件換算回原本的視覺比例（原值 x 780 / 610）。
  尚未補償且目前未使用：.row / .alert / .card-body /
  .page-en-* / .page-slogan-* / .txt-p*，若之後用到需另行指定。
========================================================================== */
@media (max-width: 991.98px) {
  body {
    font-size: calc(18.4 * var(--vw-base));
  }
  /* property-sales variant 的案件覆蓋。.site-nav 只是 component identity，
     不承擔特定產品外觀 —— 外觀一律掛在 variant class 上。 */
  .site-nav--property-sales {
    box-shadow: 0 calc(-7.7 * var(--vw-base)) calc(25.6 * var(--vw-base)) rgba(0, 0, 0, 0.1);
  }
  .site-nav--property-sales .navbar-Link .btn {
    font-size: calc(17.9 * var(--vw-base));
    padding: calc(12.8 * var(--vw-base)) 0;
    padding-bottom: calc(25.6 * var(--vw-base));
  }
  .btn {
    padding: calc(12.8 * var(--vw-base)) calc(30.7 * var(--vw-base));
    font-size: calc(17.9 * var(--vw-base));
  }
  .btn-sm {
    padding: calc(7.7 * var(--vw-base)) calc(17.9 * var(--vw-base));
    font-size: calc(15.3 * var(--vw-base));
  }
  .form-control,
  .form-select {
    padding: calc(12.8 * var(--vw-base)) calc(17.9 * var(--vw-base));
    font-size: calc(17.9 * var(--vw-base));
  }
  .aerial-map-wrap .aerial-hint {
    bottom: calc(12.8 * var(--vw-base));
  }
}
/* ==========================================================================
  4. Theme utility 案件覆蓋
  _foundation.scss / main.scss / _vendors.scss / _loader.scss 內的品牌色
  是 Sass 變數編譯後的固定值，不會跟著 :root 變數改變，必須逐一覆蓋。
  已確認 .site-nav 本身使用固定 rgba(252,252,252,.571) 與 #000 / #333，
  不讀取品牌色，因此不在此調整（設計稿亦無 Nav 視覺）。
========================================================================== */
.text-primary {
  color: var(--color-brand-primary) !important;
}

.text-secondary {
  color: var(--color-brand-secondary) !important;
}

.bg-primary {
  background-color: var(--color-brand-primary) !important;
}

.bg-secondary {
  background-color: var(--color-brand-secondary) !important;
}

.border-primary {
  border-color: var(--color-brand-primary) !important;
}

.border-secondary {
  border-color: var(--color-brand-secondary) !important;
}

a {
  color: var(--color-brand-primary);
}

.btn-primary {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.btn-primary:hover {
  background: var(--color-brand-primary-hover);
  border-color: var(--color-brand-primary-hover);
}

.btn-secondary {
  background: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
}

.btn-secondary:hover {
  background: var(--color-brand-secondary-hover);
  border-color: var(--color-brand-secondary-hover);
}

.btn-outline-primary {
  color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.btn-outline-primary:hover {
  color: var(--color-fixed-white);
  background: var(--color-brand-primary);
}

.btn-outline-secondary {
  color: var(--color-brand-secondary);
  border-color: var(--color-brand-secondary);
}

.btn-outline-secondary:hover {
  color: var(--color-fixed-white);
  background: var(--color-brand-secondary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 calc(10 * var(--vw-base)) calc(3 * var(--vw-base)) rgba(134, 0, 0, 0.44);
}

.form-check-input:checked {
  accent-color: var(--color-brand-primary);
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-brand-primary);
}

.swiper-pagination-bullet-active {
  background: var(--color-brand-primary);
}

.site-loader__spinner {
  border-color: rgba(134, 0, 0, 0.25);
  border-top-color: var(--color-brand-primary);
}

/* ==========================================================================
  5. 斷點命名替代
  共用檔既有的 .layout-reverse-lg 保留不動，本案一律使用 -desktop- 命名。
========================================================================== */
@media (min-width: 992px) {
  .layout-desktop-reverse > :first-child {
    order: 2;
  }
  .layout-desktop-reverse > :last-child {
    order: 1;
  }
}

/* ==========================================================================
  6. Text Style（只負責 Typography）
  責任分離：text-style-* 管字體與字級；txt-heading / txt-content 管群組間距；
  pageXX 管定位、版型、顏色、尺寸與案件特殊值。

  級數以設計稿的「字元前進量」實測回推：主標 48、次標 33、內文 24、
  小標 27（字距實測 advance 52 → letter-spacing ≈ 0.93em）。
  但本站實際使用 Noto Serif TC fallback（金萱未授權發布），同一字串比金萱
  約寬 2%，會讓 page04 標題與 page06 內文在設計稿欄寬內折行，因此下列是
  「以 fallback 字型對齊設計稿寬度」後的校正值：
    主標 48 → 46｜次標 33 → 31.5｜內文 24 → 23
  行距維持設計稿的絕對 pitch（主標 63 / 次標 42 / 內文 36 / 小標 45）。
  若日後取得金萱網頁字型授權，應改回括號內的設計稿原值再重新對稿。
========================================================================== */
.text-style-heading-zh {
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(46 * var(--vw-base));
  line-height: 1.3695652174;
}

.text-style-subheading-zh {
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(31.5 * var(--vw-base));
  line-height: 1.3333333333;
}

.text-style-label-zh {
  /* 設計稿實測 advance 52 / font-size 27 → 字距 0.93em，此值不得更動 */
  --label-letter-spacing: 0.93em;
  /* letter-spacing 會在「最後一個字之後」多留一份空白，置中時墨跡視覺中心
     左偏半個字距（實測 letter-spacing 25.11px → 墨跡偏移 -12.6px）。
     此處只宣告補償量，實際套用交給 .text-optical-center，
     讓 Text Style 維持純 Typography、左右對齊時不會被動位移。 */
  --text-optical-center-offset: var(--label-letter-spacing);
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(27 * var(--vw-base));
  line-height: 1.6666666667;
  letter-spacing: var(--label-letter-spacing);
}

/* 大字距文字置中時的視覺中心修正：
   以一份完整字距的起始內距，把內容盒中心右移半個字距，墨跡回到視覺中心。
   只在「置中對齊」的節點加這個 modifier，不改變字距本身。 */
.text-optical-center {
  padding-inline-start: var(--text-optical-center-offset, 0);
}

.text-style-body-zh {
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(23 * var(--vw-base));
  line-height: 1.5652173913;
}

.text-style-caption-zh {
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(15 * var(--vw-base));
  line-height: 1.6;
}

/* ==========================================================================
  7. 文字群組結構（只負責排列與間距）
    .txt-content
      └ .txt-heading            標題群組（eyebrow / title / subtitle / description）
      └ .txt-content__body      內文段落群組
========================================================================== */
.txt-content {
  display: grid;
  row-gap: var(--txt-title-gap);
}

.txt-heading {
  display: grid;
  row-gap: var(--txt-label-gap);
}

/* 標題群組單獨使用（沒有內文）時，以內容寬度收縮，便於置中或靠邊定位 */
.txt-heading--unit {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.txt-content__body {
  display: grid;
  row-gap: var(--txt-body-gap);
}

/* 清掉瀏覽器對 h2 / p 的預設 margin，群組間距一律由 row-gap 決定 */
.txt-heading > *,
.txt-content__body > * {
  margin: 0;
}

/* ==========================================================================
  8. 斷行
  永久斷行使用 .d-block；Mobile 斷行、Desktop 同行使用 .d-block .d-desktop-inline。
  兩者皆由 _foundation.scss 提供，案件不建立專用斷行 utility，
  也不使用 <br> 控制視覺排版。
========================================================================== */
/* ==========================================================================
  9. 媒體結構補充
========================================================================== */
.img-wrap picture {
  display: block;
}

/* ==========================================================================
  Site Footer（Site-level Template component）
  位於 .page-wrap 之外，不屬於任何 pageXX。與 page11 共用同一組 Theme 背景色，
  視覺上維持連續紅底。不使用 .bg-primary / .py-3 / .text-center / .text-white
  等 utility 組合作為元件契約。
========================================================================== */
.site-footer--property-sales {
  padding-block: calc(16 * var(--vw-base));
  background-color: var(--color-brand-primary);
  color: var(--color-fixed-white);
  text-align: center;
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  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;
  }
}
/* ==========================================================================
  Site Policy（Site-level Template component）
  隱私權政策全文，以 Fancybox inline content 開啟。
  .site-policy-source 只是隱藏來源的容器；Fancybox 會把 #privacy-policy 搬進
  lightbox，所以隱藏必須掛在外層，不能掛在內容節點本身。
  字級不使用 vw()：這是彈窗長文，需要固定的可讀字級，不隨設計稿寬度縮放。
========================================================================== */
.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: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", 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: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: 16px;
  color: #f2efeb;
  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;
  }
}
/* ==========================================================================
  page01 — KV 主視覺
  Desktop 1920 x 1080｜Mobile 780 x 1492
  四層素材皆為滿版工作區域尺寸，以 .layer 疊放。
========================================================================== */
#page01 {
  aspect-ratio: 1920/1080;
  background-color: var(--color-brand-primary);
  overflow: hidden;
}
#page01 .layer {
  background-size: 100% 100%;
}
#page01 .page01-layer-1 {
  background-image: url("../images/img/page01-layer-1.png");
}
#page01 {
  /* Desktop layer 1 同時貼齊左下與右側：保留父層的柔和 Zoom，
     再用兩份相同素材作遮色片，由兩側外圍向畫面內部揭露。 */
}
@media (min-width: 992px) {
  #page01 .page01-layer-1 {
    /* 預設為完整顯示；GSAP 初始化時再設為 0% 作為動畫起點。
       CDN 載入失敗或停用 JavaScript 時，主視覺仍不會消失。 */
    --page01-reveal-left: 150%;
    --page01-reveal-right: 150%;
    background-image: none;
  }
  #page01 .page01-layer-1::before, #page01 .page01-layer-1::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background-image: url("../images/img/page01-layer-1.png");
    background-size: 200% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    will-change: clip-path;
  }
  #page01 .page01-layer-1::before {
    left: 0;
    background-position: left center;
    clip-path: circle(var(--page01-reveal-left) at 0% 100%);
  }
  #page01 .page01-layer-1::after {
    right: 0;
    background-position: right center;
    clip-path: circle(var(--page01-reveal-right) at 100% 50%);
  }
}
#page01 .page01-layer-2 {
  background-image: url("../images/img/page01-layer-2.png");
}
#page01 .page01-layer-3 {
  background-image: url("../images/img/page01-layer-3.png");
}
#page01 {
  /* Desktop 的 layer 2／3 可見花朵集中在畫布左側，中心約為 x 28%、y 51%。
     GSAP 只改變縮放與旋轉；transform-origin 指向素材內容中心，
     讓花朵由自身中心展開，不再由整張透明畫布中央長出。 */
}
@media (min-width: 992px) {
  #page01 .page01-layer-2,
  #page01 .page01-layer-3 {
    transform-origin: 28% 51%;
  }
}
#page01 .page01-layer-4 {
  background-image: url("../images/img/page01-layer-4.svg");
}
@media (max-width: 991.98px) {
  #page01 {
    aspect-ratio: 780/1492;
  }
  #page01 .page01-layer-1 {
    background-image: url("../images/img/page01-layer-1-m.png");
  }
  #page01 .page01-layer-2 {
    background-image: url("../images/img/page01-layer-2-m.png");
  }
  #page01 .page01-layer-3 {
    background-image: url("../images/img/page01-layer-3-m.png");
  }
  #page01 .page01-layer-4 {
    background-image: url("../images/img/page01-layer-4-m.svg");
  }
}

/* ==========================================================================
  page02 — 手繪定位地圖
  顯示區：Desktop 1920 x 1080｜Mobile 780 x 1080
  內部圖片：原檔 2787 x 1080，高度貼齊 1080（1:1），寬度自然超出後水平捲動。
  兩個斷點都可水平拖移：桌機用 Pointer Events 滑鼠拖曳，手機用瀏覽器原生
  touch scroll（不以 JS 模擬）。載入時依 data-anchor-x 置中一次，
  使用者手動拖移後不再自動歸位。

  --page02-anchor-x：建案位置在原圖水平方向的百分比。
  同一個值同時給：標記 left 與 home.js 的自動置中
  （HTML 以 data-anchor-x 提供，不使用 inline style）。
  推導：塔樓在原圖 x=1633（2787 寬）；桌機稿落在 x=939（1920 寬）、
  手機稿落在 x=402（780 寬）。以實際渲染回推，桌機需 58.8%、手機需 58.2%，
  取 58.5% 作為單一值，兩個斷點各偏移約 9px。

  高度正式值：桌機與手機都是 1080（地圖原檔 1080 高，1:1 置放）。
  初次分析寫的 1105 是量測誤差，已作廢，不得再沿用。
========================================================================== */
#page02 {
  --page02-anchor-x: 58.5%;
}
#page02 .aerial-map-wrap {
  --aerial-h: calc(1080 * var(--vw-base));
  --aerial-min-h: calc(1080 * var(--vw-base));
  height: calc(1080 * var(--vw-base));
  overflow: hidden;
  /* 設計稿地圖上緣為硬邊，不使用共用元件的頂部漸層 */
}
#page02 .aerial-map-wrap::before {
  content: none;
}
#page02 .aerial-map-wrap {
  /* 地圖已內建建案名稱，標記只作為捲動定位用，不輸出額外視覺 */
}
#page02 .aerial-map-wrap .aerial-anchor-main {
  left: var(--page02-anchor-x);
}
#page02 .aerial-map-wrap .aerial-anchor-main::before, #page02 .aerial-map-wrap .aerial-anchor-main::after {
  content: none;
}
#page02 .aerial-map-wrap {
  /* 捲動層：桌機與手機共用同一組行為 */
}
#page02 .aerial-map-wrap .aerial-map-scroll {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
#page02 .aerial-map-wrap .aerial-map-scroll::-webkit-scrollbar {
  display: none;
}
#page02 .aerial-map-wrap .aerial-map-scroll.is-grabbing {
  cursor: grabbing;
}
#page02 .aerial-map-wrap .aerial-map-inner {
  display: inline-block;
  height: calc(1080 * var(--vw-base));
  min-height: 0;
}
#page02 .aerial-map-wrap .aerial-map-inner img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  /* 滑鼠拖曳時避免觸發瀏覽器的圖片拖放 */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

/* ==========================================================================
  page03 — 中正明星學區
  Desktop 1920 x 1080 全幅照片，文字疊在右上（右 94 / 上 55）
  Mobile   780 x 1079 全幅照片，文字置中偏上（上 109），主標斷 2 行
  原圖 1921 x 1080：桌機等同 1:1，手機需大幅橫向裁切
========================================================================== */
#page03 .img-cover {
  --ratio: 1920 / 1080;
  --ratio-m: 780 / 1079;
  -o-object-position: center center;
     object-position: center center;
}
#page03 .page03-txt {
  position: absolute;
  top: calc(68.5 * var(--vw-base));
  right: calc(94 * var(--vw-base));
  z-index: 2;
}
#page03 .page03-txt {
  color: var(--color-fixed-white);
  text-align: center;
}
@media (min-width: 992px) {
  #page03 .text-style-heading-zh {
    font-weight: 500;
  }
}
@media (max-width: 991.98px) {
  #page03 .img-cover {
    -o-object-position: center center;
       object-position: center center;
  }
  #page03 .page03-txt {
    top: calc(100.5 * var(--vw-base));
    right: 0;
    left: 0;
  }
}

/* ==========================================================================
  page04 — 名校薈萃
  Desktop 版心 1240 置中，文字欄 506 ｜ gap 104 ｜ 圖 630（3:2），圖在右
  Mobile   單欄：標題 → 內文 → 圖（圖左右安全距離 70）
========================================================================== */
#page04,
#page06 {
  --container-max-width: calc(1240 * var(--vw-base));
  --layout-gap-x: calc(104 * var(--vw-base));
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}
#page04 .txt-content,
#page06 .txt-content {
  text-align: center;
}
#page04 .img-cover,
#page06 .img-cover {
  --ratio: 3 / 2;
}
@media (max-width: 991.98px) {
  #page04,
  #page06 {
    --container-max-width: 100%;
    --layout-gap-y: calc(50 * var(--vw-base));
    padding-inline: var(--content-edge);
  }
}

#page04 {
  padding-block: calc(91 * var(--vw-base)) calc(85 * var(--vw-base));
  /* 設計稿：文字欄 510 ｜ gap 104 ｜ 圖 630 */
  --layout-columns: minmax(0, 510fr) minmax(0, 630fr);
}
@media (max-width: 991.98px) {
  #page04 {
    padding-block: calc(172 * var(--vw-base)) calc(109 * var(--vw-base));
  }
}

/* ==========================================================================
  page05 — 捷運古亭站
  Desktop 1920 x 1080（原圖 1:1，不裁切），文字疊左下（左 70 / 下 69）
  Mobile   780 x 1170（2:3），文字置中偏上（上 110），主標斷 2 行
========================================================================== */
#page05 .img-cover {
  --ratio: 1920 / 1080;
  --ratio-m: 780 / 1170;
  -o-object-position: center center;
     object-position: center center;
}
#page05 .page05-txt {
  position: absolute;
  left: calc(70 * var(--vw-base));
  bottom: calc(58.5 * var(--vw-base));
  z-index: 2;
}
#page05 .page05-txt {
  color: var(--color-fixed-white);
}
#page05 {
  /* 設計稿：群組整體靠左下定位，但群組內容兩個斷點都置中
     （桌機 eyebrow 墨跡中心 392.5 / 主標 393；手機 394 / 391.5）*/
}
#page05 .txt-heading {
  text-align: center;
}
#page05 {
  /* 桌機靠左下：標題群組不置中收縮 */
}
#page05 .txt-heading--unit {
  margin-inline: 0;
}
#page05 {
  /* 手機圖說在左下，覆蓋共用元件的右下對齊 */
}
#page05 .img-caption {
  right: auto;
  left: 0;
  text-align: left;
}
@media (min-width: 992px) {
  #page05 .text-style-heading-zh {
    font-weight: 500;
  }
}
@media (max-width: 991.98px) {
  #page05 {
    /* 手機改用專屬裁切圖 page05-img-1-m.jpg（721x1080 ≈ 2:3），不需再平移對稿 */
  }
  #page05 .img-cover {
    -o-object-position: center center;
       object-position: center center;
  }
  #page05 .page05-txt {
    left: 0;
    right: 0;
    bottom: auto;
    top: calc(101.5 * var(--vw-base));
  }
  #page05 .txt-heading--unit {
    margin-inline: auto;
  }
}

/* ==========================================================================
  page06 — 從容城市移動
  Desktop 圖在左、文字在右（.layout-desktop-reverse），版心 1240、gap 104
  Mobile   單欄：標題 → 內文 → 圖 → 路線圖示
  路線圖示：古亭 —（238 x 3 綠線）— 公館，兩端各 10 間距，整組置中於圖欄
========================================================================== */
#page06 {
  /* route 併入 slide 後 swiper 容器高度 = 圖片 + 路線，
     導航與分頁改對齊「圖片」本身，避免壓到路線文字。
     路線高度：margin 29 + 站名 28 + margin 16 + 說明 23 = 96 */
  --swiper-navigation-top-offset: calc(210 * var(--vw-base));
  --swiper-pagination-bottom: calc(0 * var(--vw-base));
  padding-block: calc(71 * var(--vw-base)) calc(99 * var(--vw-base));
  /* 設計稿：圖 630 ｜ gap 104 ｜ 文字欄 504（圖在左） */
  --layout-columns: minmax(0, 630fr) minmax(0, 504fr);
  /* 路線顏色：起點固定綠、終點依各 slide 目的地。
     變數掛在每個 slide 自己的 .page06-route 修飾詞（內容導向，非 nth-child），
     切換 slide 時顏色自然跟著切換，不需 JS 同步。 */
}
#page06 .page06-route {
  --route-start-color: #31714b;
  --route-end-color: #31714b;
  margin-top: calc(29 * var(--vw-base));
  text-align: center;
  margin-bottom: calc(52 * var(--vw-base));
}
#page06 .page06-route--gongguan {
  --route-end-color: #31714b;
}
#page06 .page06-route--taipei-main {
  --route-end-color: #c14c4b;
}
#page06 .page06-route--city-hall {
  --route-end-color: #4b7ba8;
}
#page06 .page06-route--zhongshan {
  --route-end-color: #31714b;
}
#page06 .page06-route-stations {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--vw-base));
  margin: 0;
  /* 站名為本案專屬字級（設計稿實測 advance 28），不屬於共用 Text Style */
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(28 * var(--vw-base));
  line-height: 1;
  font-weight: 500;
}
#page06 .page06-route-stations span:first-child {
  color: var(--route-start-color);
}
#page06 .page06-route-stations span:last-child {
  color: var(--route-end-color);
}
#page06 .page06-route-stations i {
  display: block;
  width: calc(238 * var(--vw-base));
  height: calc(3 * var(--vw-base));
  background: linear-gradient(to right, var(--route-start-color) 0 50%, var(--route-end-color) 50% 100%);
}
#page06 .page06-route-note {
  margin: calc(16 * var(--vw-base)) 0 0;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 991.98px) {
  #page06 {
    --layout-gap-y: calc(56 * var(--vw-base));
    --swiper-navigation-top-offset: calc(213 * var(--vw-base));
    padding-block: calc(110 * var(--vw-base)) calc(87 * var(--vw-base));
  }
}

/* ==========================================================================
  page07 — 百年城心
  標題群組 → 全幅地標圖帶（等高不等寬，slidesPerView:'auto' + centered + loop）
  → 次標 + 內文
  圖帶高度：Desktop 445｜Mobile 446；slide 間距 8
========================================================================== */
#page07 {
  --page07-strip-height: calc(445 * var(--vw-base));
  /* 設計稿：次標 → 內文墨跡距離 Desktop 48 / Mobile 33（兩端不同） */
  --txt-title-gap: calc(35 * var(--vw-base));
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  padding-block: calc(89.5 * var(--vw-base)) calc(99 * var(--vw-base));
}
#page07 .txt-heading,
#page07 .txt-content {
  text-align: center;
}
#page07 {
  /* 標題群組 → 圖帶 */
}
#page07 .page07-strip {
  margin-block: calc(41.5 * var(--vw-base)) calc(65 * var(--vw-base));
}
#page07 .swiper-slide {
  width: auto;
}
#page07 .img-cover {
  width: auto;
  height: var(--page07-strip-height);
  max-width: none;
  aspect-ratio: auto;
}
@media (max-width: 991.98px) {
  #page07 {
    --page07-strip-height: calc(446 * var(--vw-base));
    --txt-title-gap: calc(20 * var(--vw-base));
    padding-block: calc(75.5 * var(--vw-base)) calc(62 * var(--vw-base));
    padding-inline: var(--content-edge);
    /* 圖帶維持全幅，抵銷 section 的左右安全距離。
       .media-slider 有 width:100%，需改回 auto 負邊距才會真正撐開 */
  }
  #page07 .page07-strip {
    width: auto;
    margin-block: calc(49.5 * var(--vw-base)) calc(64 * var(--vw-base));
    margin-inline: calc(var(--content-edge) * -1);
  }
}

/* ==========================================================================
  page08 / page09 — 全陽建設 / 名門地標
  Desktop：版心 180、兩欄各 780、gap 0；圖 779 x 997（--ratio 844/1080）
  Mobile ：照片全幅 780 x 1170（2:3），label + 主標以絕對定位疊在照片上，
           次標與內文留在下方白底
  素材：Desktop / Mobile 共用同一張 780 x 1170，僅裁切定位不同
========================================================================== */
#page08,
#page09 {
  --content-edge: calc(180 * var(--vw-base));
  --layout-gap-x: 0;
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
}
#page08 .txt-content,
#page09 .txt-content {
  text-align: center;
}
#page08,
#page09 {
  /* lead（label + 主標）是 .txt 的直屬子層，不放在 .txt-content 內：
     .txt-content 會被 GSAP 進場動態加上 transform，transform 會成為絕對定位的
     containing block，手機疊字就會被鎖在文字區而不是照片上。 */
}
#page08 .txt,
#page09 .txt {
  display: grid;
  align-content: start;
  text-align: center;
}
#page08 .img-cover,
#page09 .img-cover {
  /* Desktop 版位 779 x 997（844:1080），原圖 780 x 1170 需縱向裁切 172，
     以 center bottom 保留建築基座與樹景，實際渲染比對設計稿建築頂端誤差 <5px */
  --ratio: 844 / 1080;
  --ratio-m: 780 / 1170;
  -o-object-position: center bottom;
     object-position: center bottom;
}
@media (max-width: 991.98px) {
  #page08,
  #page09 {
    --content-edge: calc(70 * var(--vw-base));
    /* 設計稿：白底文字區緊接照片，上留白由 .txt 的 padding 負責 */
    --layout-gap-y: 0;
    /* Mobile 版位 780 x 1170 與原圖尺寸完全相同，不會產生裁切，
       object-position 在此無視覺作用，明確寫成 center center 以免誤導 */
  }
  #page08 .img-cover,
  #page09 .img-cover {
    -o-object-position: center center;
       object-position: center center;
  }
  #page08,
  #page09 {
    /* 照片全幅，只有文字區需要左右安全距離 */
  }
  #page08 .container-fluid,
  #page09 .container-fluid {
    padding-inline: 0;
  }
  #page08 .txt,
  #page09 .txt {
    padding-inline: var(--content-edge);
  }
  #page08,
  #page09 {
    /* 疊字以 .layout-split 為定位基準（媒體在前，top 即照片頂端）。
       全域 * { position: relative } 會讓中間層變成定位祖先，需要還原成 static。 */
  }
  #page08 .layout-split,
  #page09 .layout-split {
    position: relative;
  }
  #page08 .txt,
  #page08 .txt-content,
  #page09 .txt,
  #page09 .txt-content {
    position: static;
  }
  #page08,
  #page09 {
    /* label + 主標疊在照片上 */
  }
  #page08 .page08-lead,
  #page08 .page09-lead,
  #page09 .page08-lead,
  #page09 .page09-lead {
    position: absolute;
    top: calc(99.5 * var(--vw-base));
    left: 0;
    right: 0;
    z-index: 2;
    color: var(--color-fixed-white);
    text-align: center;
  }
  #page08 .page08-lead > *,
  #page08 .page09-lead > *,
  #page09 .page08-lead > *,
  #page09 .page09-lead > * {
    margin-inline: auto;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
  }
}

#page08 {
  padding-block: calc(109 * var(--vw-base)) calc(65 * var(--vw-base));
  /* 設計稿：次標 → 內文 33（墨跡） */
  --txt-title-gap: calc(21 * var(--vw-base));
}
#page08 .txt {
  /* 設計稿：主標群組 → 次標群組 45.5（盒模型） */
  row-gap: calc(45.5 * var(--vw-base));
  /* 設計稿文字群組比圖片中心低 37 */
  top: calc(37 * var(--vw-base));
}
@media (max-width: 991.98px) {
  #page08 {
    --txt-title-gap: calc(20 * var(--vw-base));
    padding-block: 0 calc(117 * var(--vw-base));
  }
  #page08 .txt {
    row-gap: 0;
    top: 0;
    padding-block-start: calc(56 * var(--vw-base));
  }
}

#page09 {
  padding-block: calc(68 * var(--vw-base)) calc(64 * var(--vw-base));
}
#page09 .txt {
  /* 設計稿：主標群組 → 次標群組 40.5（盒模型） */
  row-gap: calc(40.5 * var(--vw-base));
  /* 設計稿文字群組比圖片中心低 43 */
  top: calc(43 * var(--vw-base));
}
@media (max-width: 991.98px) {
  #page09 {
    padding-block: 0 calc(25 * var(--vw-base));
  }
  #page09 .txt {
    row-gap: 0;
    top: 0;
    padding-block-start: calc(64 * var(--vw-base));
  }
}

/* ==========================================================================
  page10 — 巨擘聯手（建築團隊）
  Desktop 4 欄（190 x 287、欄距 87、整組 1021 置中）
  Mobile  2 x 2（190 x 285、欄距 52、列距 47、整組 432 置中）
  不使用 Carousel。
========================================================================== */
#page10 {
  --container-max-width: calc(1021 * var(--vw-base));
  --layout-columns: 4;
  --layout-columns-m: 2;
  --layout-gap-x: calc(87 * var(--vw-base));
  --layout-gap-y: 0;
  --page10-member-gap: calc(21 * var(--vw-base));
  padding-block: calc(65 * var(--vw-base)) calc(102 * var(--vw-base));
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  text-align: center;
}
#page10 .page10-divider {
  width: calc(62 * var(--vw-base));
  height: calc(2 * var(--vw-base));
  margin-inline: auto;
  margin-block-end: calc(107 * var(--vw-base));
  background-color: #898787;
}
#page10 .txt-heading {
  margin-block-end: calc(49 * var(--vw-base));
}
#page10 .page10-team {
  margin: 0;
  padding: 0;
  list-style: none;
}
#page10 .page10-member {
  display: grid;
  row-gap: var(--page10-member-gap);
}
#page10 {
  /* p 只有 main.scss 的 margin-bottom:0，UA 的 margin-top 仍在，需一併歸零 */
}
#page10 .page10-member > * {
  margin: 0;
}
#page10 .img-cover {
  --ratio: 720 / 1080;
}
@media (max-width: 991.98px) {
  #page10 {
    --container-max-width: calc(432 * var(--vw-base));
    --layout-gap-x: calc(52 * var(--vw-base));
    --layout-gap-y: calc(47 * var(--vw-base));
    --page10-member-gap: calc(22 * var(--vw-base));
    padding-block: calc(31 * var(--vw-base)) calc(95 * var(--vw-base));
  }
  #page10 .page10-divider {
    width: calc(61 * var(--vw-base));
    margin-block-end: calc(62.5 * var(--vw-base));
  }
}

/* ==========================================================================
  page11 — 案訊 / 地圖 / 預約表單（頁尾紅底）
  Desktop 版心 1072（案訊 429 ｜ gap 42 ｜ 地圖 601）
  Mobile  版心 601 單欄

  底部空間拆分（設計稿底部空間由三個責任共同組成，page11 只負責其中一段）：
    Mobile @780： page11 尾端留白 117.6 ＋ .site-footer 100 ＋ fixed-nav reserve 102.4 ＝ 320
    Desktop    ： page11 尾端留白 42  ＋ .site-footer 56               ＝ 98
  env(safe-area-inset-bottom) 為裝置動態附加，不計入設計稿的 320。
========================================================================== */
#page11 {
  /* 設計稿各區塊寬度不同：案訊+地圖 1072、表單 1142、同意條文 1165、送出鈕 601 */
  --container-max-width: calc(1165 * var(--vw-base));
  --layout-gap-x: calc(42 * var(--vw-base));
  --layout-columns: minmax(0, 429fr) minmax(0, 601fr);
  --page11-spec-size: calc(34 * var(--vw-base));
  --page11-label-size: calc(17 * var(--vw-base));
  --page11-tel-size: calc(38 * var(--vw-base));
  --page11-addr-size: calc(23 * var(--vw-base));
  --page11-credit-size: calc(18 * var(--vw-base));
  --page11-credit-line: calc(28 * var(--vw-base));
  --page11-map-height: calc(349 * var(--vw-base));
  --page11-label-gap: calc(16 * var(--vw-base));
  --page11-tel-gap: calc(4 * var(--vw-base));
  --page11-addr-gap: calc(7 * var(--vw-base));
  --page11-credit-gap: calc(33 * var(--vw-base));
  /* 設計稿底部 98 = page11 尾端留白 42 ＋ .site-footer 實測高度 56
     （桌機沒有底部 fixed nav，故不含 nav reserve） */
  padding-block: calc(114 * var(--vw-base)) calc(42 * var(--vw-base));
  background-color: var(--color-brand-primary);
  color: var(--color-brand-secondary);
  text-align: center;
  /* ── 品牌識別 ────────────────────────────────── */
  /* 設計稿識別組總高 276（mark 126 ＋ 案名 51 ＋ 英文 3 行 65 ＋ 兩段間距） */
}
#page11 .page11-brand__lockup {
  height: calc(276 * var(--vw-base));
  width: auto;
  margin-inline: auto;
}
#page11 {
  /* ── 案訊 + 地圖 ─────────────────────────────── */
}
#page11 .page11-info {
  max-width: calc(1072 * var(--vw-base));
  margin-inline: auto;
  margin-block-start: calc(74 * var(--vw-base));
  align-items: start;
}
#page11 .page11-info p {
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
}
#page11 .page11-info__spec {
  margin: 0;
  font-size: var(--page11-spec-size);
  line-height: 1;
}
#page11 .page11-info__label {
  margin: var(--page11-label-gap) 0 0;
  font-size: var(--page11-label-size);
  line-height: 1;
}
#page11 .page11-info__tel {
  margin: var(--page11-tel-gap) 0 0;
  font-size: var(--page11-tel-size);
  line-height: 1;
}
#page11 .page11-info__tel a {
  color: inherit;
}
#page11 .page11-info__addr {
  margin: var(--page11-addr-gap) 0 0;
  font-size: var(--page11-addr-size);
  line-height: 1;
}
#page11 .page11-info__credits {
  margin: var(--page11-credit-gap) 0 0;
  font-size: var(--page11-credit-size);
  line-height: calc(var(--page11-credit-line) / var(--page11-credit-size));
}
#page11 {
  /* ── 地圖 ────────────────────────────────────── */
}
#page11 .map-wrap {
  width: 100%;
  height: var(--page11-map-height);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
#page11 .map-wrap__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
#page11 .map-wrap__pending {
  margin: 0;
  padding-inline: calc(24 * var(--vw-base));
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: var(--page11-label-size);
  line-height: 1.6470588235;
  color: rgba(255, 255, 255, 0.75);
}
#page11 {
  /* ── 表單 ────────────────────────────────────── */
}
#page11 .page11-form-lead {
  margin: calc(69 * var(--vw-base)) 0 0;
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(26 * var(--vw-base));
  line-height: 1;
}
#page11 .page11-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: calc(38 * var(--vw-base));
       column-gap: calc(38 * var(--vw-base));
  row-gap: calc(10 * var(--vw-base));
  max-width: calc(1142 * var(--vw-base));
  margin-inline: auto;
  margin-block-start: calc(44 * var(--vw-base));
}
#page11 .page11-form__field--full {
  grid-column: 1/-1;
}
#page11 .form-control,
#page11 .form-select {
  height: calc(93 * var(--vw-base));
  padding-inline: calc(30 * var(--vw-base));
  border: 0;
  background-color: #f0eee7;
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(24 * var(--vw-base));
  color: var(--color-text-primary);
}
#page11 {
  /* 下拉：關掉系統外觀以維持與輸入框一致的平面樣式，右側補一個自繪箭頭當作可展開的提示 */
}
#page11 .form-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-inline-end: calc(60 * var(--vw-base));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23c89f62' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(30 * var(--vw-base)) center;
  background-size: calc(20 * var(--vw-base)) auto;
  cursor: pointer;
}
#page11 {
  /* 尚未選擇時，文字比照 input placeholder 的灰階；選定後回到內文色 */
}
#page11 .form-select[data-empty=true] {
  color: #767370;
}
#page11 {
  /* 驗證碼欄：外框是欄位底色，輸入框透明疊在裡面，右側嵌入「獲取驗證碼」。
     比例取自設計稿——按鈕寬 233／552 欄寬、高 56／93 欄高、右內縮 12。 */
}
#page11 .page11-form__otp {
  display: flex;
  align-items: center;
  background-color: #f0eee7;
  padding-inline-end: calc(12 * var(--vw-base));
  /* DOM 依 Mobile 順序把驗證碼排在最後；Desktop 第三列用明確定位放回左欄，
     鄉鎮市區則自動落到剩下的右欄，不需要 order 或 dense 流向。 */
  grid-column: 1;
  grid-row: 3;
}
#page11 .page11-form__otp .form-control {
  flex: 1 1 auto;
  min-width: 0;
  background-color: transparent;
}
#page11 .page11-form__otp-btn {
  flex: 0 0 calc(233 * var(--vw-base));
  height: calc(56 * var(--vw-base));
  border: 0;
  background-color: var(--color-brand-secondary);
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(24 * var(--vw-base));
  color: #f2efeb;
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.15s ease;
}
#page11 .page11-form__otp-btn:hover, #page11 .page11-form__otp-btn:focus-visible {
  filter: brightness(1.1);
}
#page11 .page11-form__otp-btn:focus-visible {
  outline: calc(2 * var(--vw-base)) solid #f2efeb;
  outline-offset: calc(2 * var(--vw-base));
}
#page11 .page11-form__otp-btn:active {
  transform: translateY(calc(1 * var(--vw-base)));
}
#page11 .page11-consent {
  margin-block-start: calc(60 * var(--vw-base));
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(23 * var(--vw-base));
  line-height: 1.9130434783;
}
#page11 .page11-consent p {
  margin: 0;
}
#page11 {
  /* 隱私權聲明入口：語意上是按鈕，外觀完全比照設計稿的純文字——置中、無底線 */
}
#page11 .page11-consent__policy {
  display: block;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
#page11 .page11-consent__agree {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--vw-base));
  cursor: pointer;
}
#page11 {
  /* _foundation.scss 的 .form-check-input 帶 float 與負邊距，於此還原為一般 inline 元素 */
}
#page11 .page11-consent__agree .form-check-input {
  float: none;
  width: calc(20 * var(--vw-base));
  height: calc(20 * var(--vw-base));
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--color-brand-secondary);
}
#page11 .page11-form__submit {
  width: calc(601 * var(--vw-base));
  height: calc(101 * var(--vw-base));
  margin-block-start: calc(45 * var(--vw-base));
  margin-inline: auto;
  display: block;
  border: 0;
  background-color: var(--color-brand-secondary);
  font-family: "Project Jinxuan", "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", "MingLiU", serif;
  font-size: calc(26 * var(--vw-base));
  color: #f2efeb;
  cursor: pointer;
}
@media (max-width: 991.98px) {
  #page11 {
    --container-max-width: calc(601 * var(--vw-base));
    --layout-columns: minmax(0, 1fr);
    --layout-gap-y: calc(75 * var(--vw-base));
  }
  #page11 .page11-info,
  #page11 .page11-form {
    max-width: none;
  }
  #page11 {
    --page11-spec-size: calc(53 * var(--vw-base));
    --page11-label-size: calc(27 * var(--vw-base));
    --page11-tel-size: calc(57 * var(--vw-base));
    --page11-addr-size: calc(35 * var(--vw-base));
    /* 設計稿最長一行「門廳公設：…郭陞弘」實測 562／22 字 → 26；用 28 會折行 */
    --page11-credit-size: calc(26 * var(--vw-base));
    --page11-credit-line: calc(44 * var(--vw-base));
    --page11-map-height: calc(347 * var(--vw-base));
    /* @780 設計稿底部 320 = page11 尾端留白 117.6 ＋ .site-footer 實測高度 100
       ＋ fixed-nav reserve 102.4（= --site-nav-height 99.4 ＋ 3）。
       @390 時 max(3px, vw(3)) 會額外補 1.5px 功能安全值，驗收總量為 161.5，
       不回扣 page11 留白。env(safe-area-inset-bottom) 同樣為裝置動態附加，
       不計入設計稿的固定高度。 */
    padding-block: calc(204 * var(--vw-base)) calc(117.6 * var(--vw-base));
  }
  #page11 .page11-brand__lockup {
    height: calc(256 * var(--vw-base));
  }
  #page11 .page11-info {
    margin-block-start: calc(68 * var(--vw-base));
  }
  #page11 {
    --page11-label-gap: calc(26 * var(--vw-base));
    --page11-tel-gap: calc(5 * var(--vw-base));
    --page11-addr-gap: calc(14 * var(--vw-base));
    --page11-credit-gap: calc(53 * var(--vw-base));
  }
  #page11 .page11-form-lead {
    margin-block-start: calc(28 * var(--vw-base));
    font-size: calc(26 * var(--vw-base));
  }
  #page11 .page11-form {
    grid-template-columns: minmax(0, 1fr);
    row-gap: calc(11 * var(--vw-base));
    margin-block-start: calc(106 * var(--vw-base));
  }
  #page11 {
    /* 字級一律照設計稿，不設下限。
       iOS Safari 在 focus 小於 16px 的欄位時會自動放大整頁，這件事改由
       js/form.js 在聚焦期間暫時鎖住縮放來處理，不動任何字級。 */
  }
  #page11 .form-control,
  #page11 .form-select {
    height: calc(101 * var(--vw-base));
    font-size: calc(26 * var(--vw-base));
  }
  #page11 .form-select {
    padding-inline-end: calc(64 * var(--vw-base));
    background-position: right calc(32 * var(--vw-base)) center;
    background-size: calc(22 * var(--vw-base)) auto;
  }
  #page11 .page11-form__otp {
    padding-inline-end: calc(13 * var(--vw-base));
    /* 單欄時取消 Desktop 的定位，驗證碼依 DOM 順序落在最後一格 */
    grid-area: auto;
  }
  #page11 .page11-form__otp-btn {
    flex: 0 0 calc(254 * var(--vw-base));
    height: calc(61 * var(--vw-base));
    font-size: calc(26 * var(--vw-base));
  }
  #page11 .page11-consent {
    font-size: calc(26 * var(--vw-base));
    line-height: 1.8461538462;
  }
  #page11 .page11-form__submit {
    width: 100%;
    height: calc(101 * var(--vw-base));
    font-size: calc(30 * var(--vw-base));
  }
}/*# sourceMappingURL=style.css.map */