/* =========================================================
   玉山銀行 × VOLVO 活動登錄頁
   桌機設計稿 1920×3000（05_玉山銀行登陸網頁_底圖_w1920xh3000px.pdf）
   手機設計稿 390×844
   座標系統：1rem = 100 設計稿 px（html font-size = 100vw/19.2）
   ========================================================= */

/* ---------- 字體 ---------- */
@font-face { font-family: 'Source Han TC'; src: url('../assets/fonts/SourceHanSansTW-Normal.otf') format('opentype');  font-weight: 350; font-display: block; }
@font-face { font-family: 'Source Han TC'; src: url('../assets/fonts/SourceHanSansTW-Regular.otf') format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Source Han TC'; src: url('../assets/fonts/SourceHanSansTW-Medium.otf') format('opentype');  font-weight: 500; font-display: block; }
@font-face { font-family: 'Source Han TC'; src: url('../assets/fonts/SourceHanSansTW-Bold.otf') format('opentype');    font-weight: 700; font-display: block; }
@font-face { font-family: 'Volvo Centum'; src: url('../assets/fonts/VolvoCentum-DarkRegular.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Volvo Centum'; src: url('../assets/fonts/VolvoCentum-DarkMedium.ttf') format('truetype');  font-weight: 500; font-display: block; }
@font-face { font-family: 'Volvo Centum'; src: url('../assets/fonts/VolvoCentum-DarkBold.ttf') format('truetype');    font-weight: 700; font-display: block; }
/* 法務內文之西文／數字：設計稿尺寸為中文之 118%，以 size-adjust 對齊 */
@font-face { font-family: 'Volvo Novum Legal'; src: url('../assets/fonts/VolvoNovum-Light.otf') format('opentype'); font-weight: 300; size-adjust: 118%; font-display: block; }

:root {
  --gold: #e8ce86;
  --ink: #363643;
  --btn-edge: inset 0 -.075rem .08rem -.028rem rgba(28, 30, 38, .5);
  --f-main: 'Volvo Centum', 'Source Han TC', 'PingFang TC', sans-serif;
  --f-legal: 'Volvo Novum Legal', 'Source Han TC', 'PingFang TC', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: calc(100vw / 19.2); -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-main); font-synthesis: none; -webkit-font-smoothing: antialiased; background: #06121f; overflow-x: hidden; }

.page {
  position: relative;
  /* 寬度必須與 rem 同基準（100vw），否則滾動條會使背景縮放與 rem 座標錯位，
     按鈕選取變灰時會露出烘焙底圖的白色膠囊邊 */
  width: 19.2rem;
  height: 30rem;
  /* bg_desktop_v2.jpg（1920×3000）：自設計 PDF 抽出的調色底圖 +
     設計師切圖（玻璃面板/膠囊/陰影/Logo）依量測座標烘焙合成 */
  background: url('../assets/img/bg_desktop_v2.jpg') 0 0 / 100% 100% no-repeat;
  overflow: hidden;
}

/* 通用：絕對定位置中的文字列 */
.t1, .t2, .subtitle, .gold, .offer-body, .form-title, .req,
.lb, .helper, .slogan { position: absolute; left: 0; right: 0; text-align: center; color: #fff; }

.m-only { display: none; }

/* ---------- Hero 標題 ---------- */
/* Hero 區（1920 設計稿：字級為 1440 版的 0.9 倍、位置重排） */
.t1 {
  top: 2.268rem; font-size: .5513rem; line-height: .7632rem;
  font-weight: 700; letter-spacing: .11em;
  display: flex; justify-content: center; align-items: baseline;
}
.t1 .en-volvo { margin-left: .408rem; }
.t1 .sep {            /* 直線分隔（與手機版相同，依字級比例放大）；baseline 對齊後再上移 */
  position: relative; width: .038rem; height: .286rem;
  margin-left: .389rem; top: -.064rem; background: #fff;
}

.t2 { top: 3.024rem; font-size: .5513rem; line-height: .7632rem; font-weight: 500; letter-spacing: .07em; }
.subtitle { top: 4.265rem; font-size: .3198rem; line-height: .45rem; font-weight: 400; letter-spacing: .08em; }

/* ---------- 優惠文案 ---------- */
.gold { color: var(--gold); font-weight: 700; font-size: .370rem; line-height: .54rem; letter-spacing: .08em; }
.g1 { top: 5.216rem; }
.g2 { top: 6.249rem; }
.offer-body { top: 6.961rem; font-size: .2627rem; line-height: .315rem; font-weight: 400; letter-spacing: .08em; }
.offer-body b { font-weight: 700; }

/* ---------- 表單 ---------- */
#bookingForm { position: absolute; inset: 0; }

.form-title { top: 13.943rem; font-size: .4405rem; line-height: .6rem; font-weight: 700; letter-spacing: .08em; }
.form-title .gap { display: inline-block; width: .17rem; }
.req { top: 14.602rem; font-size: .215rem; line-height: .3rem; font-weight: 400; letter-spacing: .08em; }

.lb { font-size: .288rem; line-height: .4rem; font-weight: 500; letter-spacing: .08em; }
.lb-name  { top: 15.484rem; left: 5.51rem; right: auto; width: 3.81rem; }
.lb-phone { top: 15.484rem; left: 9.88rem; right: auto; width: 3.81rem; }
.lb-time  { top: 17.162rem; }
.lb-city  { top: 18.880rem; }
.lb-note  { top: 20.562rem; font-size: .2404rem; line-height: .34rem; }

/* 欄位本體：底圖已烘焙於背景 → 欄位透明、只負責互動 */
.field {
  position: absolute; border: 0; background: transparent;
  font-family: var(--f-main); font-weight: 500; color: var(--ink);
  text-align: center; outline: none; border-radius: .095rem;
}
.f-name  { top: 16.05rem; left: 5.51rem; width: 3.81rem; height: .66rem; font-size: .24rem; }
.f-phone { top: 16.05rem; left: 9.88rem; width: 3.81rem; height: .66rem; font-size: .24rem; letter-spacing: .04em; }

/* placeholder 顏色 */
.field::placeholder { color: rgba(54, 54, 67, .45); }

.time {
  position: absolute; top: 17.73rem; width: 3.81rem; height: .70rem;
  border: 0; border-radius: .21rem; cursor: pointer;
  font-family: var(--f-main); font-weight: 500; font-size: .311rem;
  /* 外擴一圈同色描邊，蓋住烘焙底圖白色膠囊的反鋸齒邊緣 */
  letter-spacing: .08em; color: var(--ink); background: #afb0b1;
  box-shadow: 0 0 0 .015rem #afb0b1, var(--btn-edge);
}
.t-am { left: 5.51rem; }
.t-pm { left: 9.88rem; }
.time.selected { background: #fff; box-shadow: var(--btn-edge); }

.f-city {
  top: 19.45rem; left: 5.51rem; width: 8.18rem; height: .66rem;
  font-size: .2488rem; letter-spacing: .082em;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  text-align: center; text-align-last: center;
}
.f-city option { color: var(--ink); background: #fff; }

.f-note {
  top: 21.08rem; left: 5.51rem; width: 8.18rem; height: 1.02rem;
  border-radius: .095rem; resize: none;
  text-align: left; padding: .16rem .3rem; font-size: .24rem; line-height: .34rem;
}

.helper { top: 22.328rem; font-size: .1971rem; line-height: .341rem; font-weight: 400; letter-spacing: .10em; }

.submit {
  position: absolute; top: 23.80rem; left: 8.54rem; width: 2.12rem; height: .59rem;
  border: 0; border-radius: .21rem; background: transparent; cursor: pointer;
  font-family: var(--f-main); font-weight: 500; font-size: .2404rem;
  letter-spacing: .08em; color: #fff;
}
.submit:hover { background: rgba(255,255,255,.12); }
.submit:active { background: rgba(0,0,0,.10); }

/* 互動狀態：聚焦不顯示框線 */
.field, .time, .submit, .popup-close { outline: none; -webkit-tap-highlight-color: transparent; }
.time.invalid  { box-shadow: inset 0 0 0 .02rem #d75450, var(--btn-edge); }

/* 驗證錯誤提示文字（顯示於欄位正下方） */
.err {
  position: absolute; text-align: center; color: #ff8c84;
  font-size: .18rem; line-height: .26rem; font-weight: 400; letter-spacing: .05em;
}
.err-name  { top: 16.76rem; left: 5.51rem; width: 3.81rem; }
.err-phone { top: 16.76rem; left: 9.88rem; width: 3.81rem; }
.err-city  { top: 20.16rem; left: 5.51rem; width: 8.18rem; }

/* ---------- Footer ---------- */
.legal {
  /* 1920 設計稿：法務欄寬縮為面板同寬（453..1466）、字級 ×0.9、行距不變 */
  position: absolute; top: 25.619rem; left: 4.53rem; width: 10.13rem;
  font-family: var(--f-legal); font-weight: 350;
  font-size: .1167rem; line-height: .194rem; letter-spacing: .012em;
  color: #fff; text-align: justify;
}
.slogan { top: 27.901rem; font-size: .4068rem; line-height: .5rem; font-weight: 400; }
.slogan .sp { display: inline-block; width: .23em; }
.rates {
  position: absolute; top: 28.480rem; left: 3.964rem; width: 11.272rem;
  font-family: var(--f-legal); font-weight: 350;
  font-size: .2312rem; line-height: .3315rem; letter-spacing: .032em;
  color: #fff; text-align: justify;
}

/* ---------- 完成預約彈窗 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
}
.overlay[hidden] { display: none; }
.popup {
  position: relative; width: min(600px, 86vw); aspect-ratio: 5001 / 2085;
  min-height: 220px;
  background: url('../assets/img/popup.png') center / contain no-repeat;
}
.popup-close {
  position: absolute; top: 3%; right: 1%; width: 12%; height: 26%;
  border: 0; background: transparent; cursor: pointer;
}

/* ---------- 防 Bot：Honeypot 欄位（真人不可見） ---------- */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* =========================================================
   手機版（設計稿 390×844）：1rem = 100 設計稿 px
   ========================================================= */
@media (max-width: 640px) {
  html { font-size: calc(100vw / 3.9); }
  :root { --btn-edge: inset 0 -.015rem .015rem -.006rem rgba(28, 30, 38, .5); }

  .page { width: 3.9rem; height: 8.44rem; background-image: url('../assets/img/bg_mobile.jpg'); }

  .d-only { display: none; }
  .m-only { display: inline; }

  .t1 { top: .5964rem; font-size: .1731rem; line-height: .24rem; }
  .t1 .en-volvo { margin-left: .128rem; }
  .t1 .sep { width: .012rem; height: .09rem; margin-left: .122rem; top: -.02rem; }

  .t2 { top: .8364rem; font-size: .1731rem; line-height: .24rem; }
  .subtitle { top: 1.2224rem; font-size: .1004rem; line-height: .145rem; }

  .gold { font-size: .1162rem; line-height: .17rem; }
  .g1 { top: 1.5249rem; }
  .g2 { top: 1.8479rem; }
  .offer-body { top: 2.0742rem; font-size: .0825rem; line-height: .099rem; }

  .form-title { top: 3.9798rem; font-size: .1245rem; line-height: .18rem; }
  .form-title .gap { width: .048rem; }
  .req { top: 4.169rem; font-size: .0608rem; line-height: .10rem; }

  .lb { font-size: .0814rem; line-height: .12rem; }
  .lb-name  { top: 4.4201rem; left: .795rem; width: 1.075rem; }
  .lb-phone { top: 4.4201rem; left: 2.03rem; width: 1.075rem; }
  .lb-time  { top: 4.8941rem; }
  .lb-city  { top: 5.3801rem; }
  .lb-note  { top: 5.8583rem; font-size: .068rem; line-height: .10rem; }

  .field { border-radius: .022rem; }
  .f-name  { top: 4.586rem; left: .795rem; width: 1.075rem; height: .187rem; font-size: .07rem; }
  .f-phone { top: 4.586rem; left: 2.03rem; width: 1.075rem; height: .187rem; font-size: .07rem; }

  .time { top: 5.06rem; width: 1.075rem; height: .198rem; border-radius: .057rem; font-size: .0879rem; }
  .t-am { left: .795rem; }
  .t-pm { left: 2.03rem; }

  .err { font-size: .055rem; line-height: .08rem; }
  .err-name  { top: 4.787rem; left: .795rem; width: 1.075rem; }
  .err-phone { top: 4.787rem; left: 2.03rem; width: 1.075rem; }
  .err-city  { top: 5.748rem; left: .795rem; width: 2.31rem; }

  .f-city { top: 5.546rem; left: .795rem; width: 2.31rem; height: .186rem; font-size: .0703rem; }
  .f-note { top: 6.007rem; left: .795rem; width: 2.31rem; height: .288rem; border-radius: .022rem; padding: .05rem .1rem; font-size: .07rem; line-height: .10rem; }

  .helper { top: 6.3599rem; font-size: .0557rem; line-height: .096rem; }

  .submit { top: 6.774rem; left: 1.65rem; width: .60rem; height: .169rem; border-radius: .053rem; font-size: .068rem; }

  .legal { top: 7.2639rem; left: .357rem; width: 3.186rem; font-size: .0367rem; line-height: .0545rem; }
  .slogan { top: 7.8625rem; font-size: .115rem; line-height: .15rem; }
  /* 手機版費率行的西文採 VolvoCentum（同字級），與桌機(Novum 118%)不同 */
  .rates { top: 8.0317rem; left: .357rem; width: 3.186rem; font-size: .0653rem; line-height: .093rem;
           font-family: var(--f-main); font-weight: 350; }
}