/* 共用：只放行為與結構，不放風格。風格在 ui.css */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
img { max-width: 100%; }

/* 輸入框 ≥16px：避免 iOS 聚焦時自動放大 */
input[type=text], input[type=tel], input[type=email], select {
  width: 100%; font-size: 16px; -webkit-appearance: none; appearance: none; border-radius: 0; }
.f { display: grid; align-content: start; min-width: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } /* 一邊出現錯誤訊息，另一邊不被拉高錯位 */
@media (max-width: 350px) { .row2 { grid-template-columns: 1fr; } }

/* 選項：原生 input 疊在上面透明，保留無障礙與點擊 */
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }

/* 圖示（lucide）：預設跟文字同色同大小，各風格再調 */
svg.lucide { width: 1.15em; height: 1.15em; stroke-width: 1.75; flex: none; }
.lbl, .card-title { display: flex; align-items: center; flex-wrap: wrap; gap: .45em; }
.add, .dep-x { display: inline-flex; align-items: center; justify-content: center; gap: .4em; }
.step-ico { display: none; }

/* 必填標記與錯誤訊息 */
.err { display: none; }
.touched .f:has(:invalid) > .err, .touched .f:has(.opts.bad) > .err { display: block; }
.f.live:has(:invalid) > .err { display: block; }

/* 被選擇器接手的原生欄位：留在 DOM 做驗證，但不顯示 */
.pick-src { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.f { position: relative; }
.pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; }
.pick-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-ico { display: grid; flex: none; }
.pick-ico svg { width: 18px; height: 18px; }

/* 由下往上的選擇面板（寬螢幕改為置中） */
html.sheet-open, html.sheet-open body { overflow: hidden; }
.sheet { position: fixed; inset: 0; z-index: 80; }
.sheet-bg { position: absolute; inset: 0; opacity: 0; transition: opacity .28s; }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sheet.in .sheet-bg { opacity: 1; }
.sheet.in .sheet-panel { transform: none; }
.sheet-head { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.sheet-head b { text-align: center; }
.sheet-head button { background: none; border: 0; height: 48px; }
.sheet-body { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* 背景遮罩、面板標題列不可拖動頁面；清單本身滑到底也不會帶動背景 */
.sheet-bg, .sheet-grip, .sheet-head { touch-action: none; }
.wheel, .gp-list, .gp-side { overscroll-behavior: contain; }
.sheet-list { display: grid; }
.sheet-opt { text-align: left; background: none; border: 0; }
@media (min-width: 640px) {
  .sheet-panel { left: 50%; right: auto; top: 50%; bottom: auto; width: 400px; transform: translate(-50%, -46%) scale(.97); opacity: 0;
    transition: transform .25s, opacity .25s; }
  .sheet.in .sheet-panel { transform: translate(-50%, -50%); opacity: 1; }
  .sheet-grip { display: none; }
}

/* 年月日滾輪：用捲動吸附，iOS / Android 手感一致 */
.wheels { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr; height: 220px; }
.wheel { height: 220px; overflow-y: auto; scroll-snap-type: y mandatory; padding-block: 88px; scrollbar-width: none; overscroll-behavior: contain; position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); }
.wheel::-webkit-scrollbar { display: none; }
.wheel-item { height: 44px; display: flex; align-items: center; justify-content: center; gap: 3px; scroll-snap-align: center; cursor: pointer; }
.wheel-band { position: absolute; left: 8px; right: 8px; top: 88px; height: 44px; pointer-events: none; }

/* 身分證照片格 */
.shots { display: grid; grid-template-columns: 1fr 1fr; }
.shot { position: relative; display: block; aspect-ratio: 1.58; max-width: 100%; overflow: hidden; cursor: pointer; }
.shot input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; z-index: 2; cursor: pointer; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.shot-ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.shot.has img { display: block; }
.shot.has .shot-ph { inset: auto 8px 8px auto; display: block; }
.shot.has .shot-ph b { display: none; }
.shot.has .shot-ph::after { content: "・重拍"; }
.shot.busy { opacity: .5; }

.review { margin: 0; }
.review div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; }
.review dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.dep-head { display: flex; justify-content: space-between; align-items: center; }
.link { background: none; border: 0; padding: 0; justify-self: start; }

/* 底部導覽固定，避開 iPhone 底部橫條 */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding-bottom: env(safe-area-inset-bottom, 0px); }
.nav-in { display: flex; }
#nextBtn { flex: 1 1 0; }
main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); }

.done { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; text-align: center; }

.toast { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); margin: 0 auto; max-width: 420px;
  padding: 12px 16px; border-radius: 12px; background: rgba(20, 20, 20, .9); color: #fff; font: 14px/1.4 -apple-system, "PingFang TC", sans-serif; text-align: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }