/* 常規檢查視窗內容的兩種排法（三個版型共用；顏色取各頁的變數） */

/* 2 方塊版 */
.tl-grp { margin-top: 16px; padding: 14px 12px 12px; background: var(--card, var(--row, #F1EEE7)); }
.tl-h { display: flex; align-items: center; gap: 10px; }
.tl-h h4 { font-size: 16px; font-weight: 500; letter-spacing: .08em; }
.tl-n { margin-left: auto; min-width: 26px; height: 26px; border-radius: 13px; background: var(--ink); color: var(--bg); font: 400 13px/26px var(--font-disp); text-align: center; padding: 0 6px; }
.tl-m { margin: 8px 0 10px; padding-left: 10px; border-left: 2px solid var(--line); font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* 方塊用 flex：短名兩個並排；放不下半寬就自動整排；一排只剩一個就撐滿 */
.tl-g { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-g + .tl-m { margin-top: 14px; }
.tl-h + .tl-g { margin-top: 10px; } /* 標題下面直接接方塊時（沒有說明那行），數字圓圈不會貼到方塊 */
.tl { flex: 1 1 calc(50% - 3px); background: var(--bg); padding: 8px 10px; display: grid; gap: 1px; line-height: 1.35; }
.tl b, .tl small { white-space: nowrap; }
.tl.wide { flex-basis: 100%; }
.tl.wide b, .tl.wide small { white-space: normal; }
.tl b { font-size: 13.5px; font-weight: 500; }
.tl small { font-family: var(--font-latin); font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }

/* 視窗打開時把焦點放在視窗本身，不顯示框線 */
.m-sheet:focus { outline: none; }

/* 只在標點後換行用的小塊 */
.nb { display: inline-block; }

/* ── 加價購視窗：套餐卡＋單項兩行式（--pick 是各版主色，未設定就用墨黑）── */
.ad-btn { display: inline-flex; align-items: center; justify-content: center; width: 86px; gap: 4px; white-space: nowrap; border: 1px solid var(--pick, var(--ink)); color: var(--pick, var(--ink)); border-radius: 999px; padding: 4px 12px 4px 9px; font-size: 13px; }
.ad-btn svg { width: 13px; height: 13px; }
[aria-pressed="true"] > .ad-btn, [aria-pressed="true"] .pk-foot .ad-btn { background: var(--pick, var(--ink)); color: var(--bg); }

.pk { width: 100%; display: grid; gap: 10px; text-align: left; background: var(--card, var(--row, #F1EEE7)); border: 1px solid transparent; padding: 14px 12px 12px; margin-top: 12px; }
.pk[aria-pressed="true"] { border-color: var(--pick, var(--ink)); }
.pk-top { display: flex; align-items: center; gap: 10px; }
.pk-k { width: 34px; height: 34px; border-radius: 50%; background: var(--pick, var(--ink)); color: var(--bg); display: grid; place-items: center; font-size: 18px; font-weight: 400; flex: none; }
.pk-t { font-size: 15.5px; font-weight: 500; line-height: 1.4; min-width: 0; }
.pk-t small { display: block; font-size: 12px; font-weight: 300; color: var(--muted); }
/* 內容標籤：兩欄等寬對齊；放不下半欄就自動整排 */
.pk-g { display: flex; flex-wrap: wrap; gap: 4px; }
.pk-g span { flex: 1 1 calc(50% - 2px); background: var(--bg); padding: 3px 8px; font-size: 12.5px; white-space: nowrap; line-height: 1.6; }
.pk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.pk-pr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pk-pr b { font-size: 22px; font-weight: 400; }
.pk-pr s { font-size: 13px; color: var(--muted); }
.pk-pr em { font-style: normal; font-size: 12px; color: var(--pick, var(--ink)); }

.op { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 86px; grid-template-areas: "nm nm nm" "sub pr btn"; gap: 4px 10px; align-items: center; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.op-nm { grid-area: nm; font-size: 15px; font-weight: 400; line-height: 1.45; }
.op-sub { grid-area: sub; font-family: var(--font-latin); font-size: 12px; color: var(--muted); min-width: 0; line-height: 1.4; }
.op.has-note { grid-template-areas: "nm nm nm" "sub pr btn" "note note note"; }
.op-note { grid-area: note; font-size: 12px; line-height: 1.6; color: var(--pick, var(--ink)); background: var(--card, var(--row, #F1EEE7)); padding: 4px 8px; margin-top: 4px; }
.op-pr { grid-area: pr; font-size: 19px; font-weight: 400; justify-self: end; }
.op .ad-btn { grid-area: btn; }
.op[aria-pressed="true"] .op-nm { font-weight: 500; }
.pk-part { font-size: 12px; color: var(--pick, var(--ink)); background: var(--bg); padding: 4px 8px; }

/* ── 性別列置中；沒選時提示在按鈕下方 ── */

/* ── 分類標題：標題＋一行灰字，其餘都不放 ── */
/* 標題下方分隔：整條細線＋左端一小段主色粗線 */
.ch { position: relative; margin: 18px 0 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); text-align: center; }
.ch::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 32px; margin-left: -16px; height: 3px; background: var(--pick, var(--ink)); }
.ch h3 { font-size: 19px; font-weight: 500; letter-spacing: .16em; padding-left: .16em; line-height: 1.35; }
.ch-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ── 視窗標題三選一（共用：左中右三格，標題永遠置中）── */
.m-head.mh { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; text-align: center; }
.mh-t { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.m-back { border: 0; background: none; padding: 6px; line-height: 0; color: inherit; justify-self: start; }
.m-back svg { width: 24px; height: 24px; }

/* 2 App 導覽列：左上返回、標題小而置中，最省高度 */
.m-head.mh-nav { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.mh-nav h2 { font-size: 17px; letter-spacing: .14em; padding-left: .14em; }

/* ── 加價購：沒選性別就只顯示選性別 ── */

/* ── 首頁「下一步」與錯誤提示 ── */
.dec-err { text-align: center; }
#app .send svg { width: 18px; height: 18px; vertical-align: -3px; margin-left: 4px; }

/* ── 第三步：受檢者資料頁 ── */
.ip { max-width: 620px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)); }
#app[data-layout="cards"] .ip { padding-inline: 0; }
.ip-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); }
.ip-top h1 { text-align: center; font-size: 19px; font-weight: 500; letter-spacing: .16em; padding-left: .16em; }
.ip-back { border: 0; background: none; padding: 6px; line-height: 0; justify-self: start; color: inherit; }
.ip-back svg { width: 24px; height: 24px; }
.ip-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ip-steps li { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12.5px; color: var(--muted); padding: 7px 4px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.ip-steps svg { width: 14px; height: 14px; }
.ip-steps .ok { color: var(--pick, var(--ink)); border-bottom-color: var(--pick, var(--ink)); }
.ip-steps .cur { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.ip-steps .cur b { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-size: 11px; font-weight: 400; }
.ip-sum { margin-top: 18px; background: var(--card, var(--row, #F1EEE7)); padding: 6px 14px 12px; }
.ip-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ip-row span { color: var(--muted); }
.ip-row b { font-weight: 500; margin-left: auto; }
.ip-row:has(.ip-edit) b { margin-left: auto; }
.ip-edit { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 2px 12px; font-size: 12.5px; }
.ip .who { margin-top: 26px; padding-inline: 0; }
.ip .send { display: block; width: 100%; margin-top: 24px; border: 0; border-radius: 999px; background: var(--pick, var(--ink)); color: var(--bg); padding: 15px; font-size: 16px; letter-spacing: .2em; }

/* 第三頁頂部已有標題，表單內不再重複 */
.ip .who-h { display: none; }
.ip .who { margin-top: 22px; }

/* ── 加價購視窗精簡版（ui=seg／bag／float）── */
.m-sheet { position: relative; }
.m-head.mh-ui { grid-template-columns: 40px minmax(0, 1fr) auto; text-align: left; padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
.mh-ui .mh-t { justify-items: start; }
.mh-ui h2 { font-size: 18px; letter-spacing: .14em; padding-left: 0; }
.hd-r { display: flex; align-items: center; gap: 8px; }
.hd-bag { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: inherit; display: grid; place-items: center; padding: 0; }
.hd-bag svg { width: 20px; height: 20px; }
.hd-n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--pick, var(--ink)); color: var(--bg); font: 400 12px/20px var(--font-disp); padding: 0 5px; }
.bagpop { position: absolute; inset: 0; z-index: 5; background: rgb(28 28 26 / .35); display: flex; align-items: flex-end; }
.bp-card { width: 100%; max-height: 80%; overflow: auto; background: var(--bg); padding: 14px 16px max(14px, env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 30px -12px rgb(0 0 0 / .3); }
.bp-h { display: flex; align-items: center; }
.bp-h h3 { font-size: 17px; font-weight: 500; letter-spacing: .12em; }
.bp-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 20px 0; margin: 0; }
.bp-acts { display: flex; gap: 10px; margin-top: 14px; }
.bp-acts .btn { flex: 1; }
.m-main { padding-bottom: 80px; }
/* 窄手機（375）套餐標題不斷行 */
.pk-t { font-size: clamp(14px, 3.9vw, 15.5px); }

/* ── 左欄：有選的分類置頂，下方小分隔線 ── */
.m-rail-div { display: block; height: 0; margin: 4px 22%; border-top: 2px solid var(--pick, var(--ink)); }
/* ── 過敏原四選一：已選一種時，其他鈕顯示「換成這個」 ── */
.ad-btn.swap { border-style: dashed; color: var(--muted); border-color: var(--muted); }

/* ── 導覽列＋購物袋：← 標題 性別 袋子 四個平均分布 ── */
.m-head.mh-ui { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mh-ui .hd-r { display: contents; }
.mh-ui > span:empty { width: 40px; flex: none; }
.mh-ui .mh-t { flex: none; }
.mh-ui .m-back { flex: none; width: 40px; }

/* 第三頁：已加購時性別只顯示、不給改（避免改性別默默刪掉 B/C 式） */

/* ── 員工登入（只有 #app[data-login] 的頁面會出現）── */
.pin { position: relative; display: flex; gap: 12px; margin-top: 16px; cursor: text; }
.pin-c { width: 56px; height: 66px; border: 1px solid var(--line); background: var(--card, #F1EEE7); display: grid; place-items: center; font-size: 36px; font-weight: 400; line-height: 1; }
.pin:focus-within .pin-c { border-color: var(--ink); }
.pin.bad .pin-c { border-color: var(--err); }
.pin input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; }
.me { display: inline-flex; align-items: baseline; gap: 12px; font-size: 14px; }
.me button { border: 0; background: none; padding: 0; color: var(--muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.wl-name { font-size: 32px; font-weight: 400; letter-spacing: .3em; padding-left: .3em; margin-top: 6px; }
.wl-hi { margin: 0; color: var(--muted); font-size: 14px; }

/* ── 品牌 logo：雲川水月 Clavius（官方商標裁切成遮罩，顏色由 background 決定，不改組合）── */
.brand-h, .brand-m, .brand-v { display: inline-block; flex: none; background: #25573C; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.brand-h { -webkit-mask-image: url(img/clavius-h.png); mask-image: url(img/clavius-h.png); height: 30px; aspect-ratio: 1024 / 259; }
.brand-m { -webkit-mask-image: url(img/clavius-mark.png); mask-image: url(img/clavius-mark.png); width: 148px; aspect-ratio: 345 / 344; }
.brand-v { -webkit-mask-image: url(img/clavius-v.png); mask-image: url(img/clavius-v.png); width: 136px; aspect-ratio: 437 / 494; }
.top.tb { align-items: center; padding-block: 12px; }
.done .brand-h { height: 34px; margin-bottom: 6px; }

/* ── 登入成功／失敗樣態 ── */
.pin.ok .pin-c { background: #25573C; border-color: #25573C; color: #F4F1EA; transition: background .25s, color .25s; }
.pin.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45%, 55% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.pin.bad .pin-c { background: #F3E6E1; color: var(--err); }
.pin-ok { margin: 6px 0 0; color: #25573C; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.pin-ok:empty { display: none; }
.pin-ok svg { width: 16px; height: 16px; }

/* ── 迎接動畫（共用）── */
.wel { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px 16px; text-align: center; background: var(--bg, #E7E3D9); color: var(--ink, #1C1C1A); cursor: pointer; overflow: hidden; }
.wel-in { display: grid; justify-items: center; gap: 6px; }
.wel .rise { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.wel .wl-name { margin-top: 2px; }

/* 3 幕啟：品牌綠整片升起，白色直式 logo，結束時整片往上收 */
.wel-3 { background: #25573C; color: #F4F1EA; animation: curtainIn .65s cubic-bezier(.7, 0, .25, 1) both; }
.wel-3.out { animation: curtainOut .7s cubic-bezier(.7, 0, .25, 1) forwards; }
@keyframes curtainIn { from { transform: translateY(100%); } }
@keyframes curtainOut { to { transform: translateY(-100%); } }
.wel-3 .brand-v { background: #F4F1EA; }
.wl-rule { display: block; width: 0; height: 1px; background: currentColor; opacity: .6; margin: 26px 0 12px; animation: grow .7s ease .9s forwards; }
@keyframes grow { to { width: 64px; } }
.wel-3 .wl-hi { color: #F4F1EA; font-weight: 600; letter-spacing: .08em; } /* 用戶：要粗體、不要細體淡字 */

/* 迎接動畫、紅框震動一律播放（不跟手機「減少動態效果」設定），用戶要求 */

/* 隱碼：格子只顯示圓點；輸入框本身透明＋圓點遮字（保險） */
.dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.pin input { -webkit-text-security: disc; color: transparent; caret-color: transparent; }

/* 迎接：團隊・職別膠囊（後台名冊帶入，例：內廚｜正職） */
.wl-team { display: inline-flex; align-items: center; gap: 12px; margin: 10px 0 2px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 18px; font-size: 14px; letter-spacing: .14em; }
.wl-team span { padding-left: .14em; }
.wl-team i { width: 1px; height: 12px; background: currentColor; opacity: .45; }
.wel-3 .wl-team { border-color: rgb(244 241 234 / .5); }

/* 首頁右上：團隊｜職別＋全名（質感粗體，不放登出） */
.me { display: inline-flex; align-items: center; gap: 12px; }
.me-t { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .16em; color: #25573C; }
.me-t i { width: 1px; height: 11px; background: currentColor; opacity: .5; }
.me b { font-size: 16px; font-weight: 700; letter-spacing: .16em; }

/* 加價購視窗標題列：團隊＋本名（不顯示性別） */
.hd-me { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hd-me .me-t { font-size: 12.5px; }
.hd-me b { font-size: 15px; font-weight: 700; letter-spacing: .12em; }
/* 登入頁三版：整頁剛好一屏，不多出捲動 */
#app:has(.lux) { padding-bottom: 0; }

/* 居住地址：縣市＋鄉鎮市區下拉（底線樣式，跟其他欄位一致）＋詳細地址 */
.f-addr { grid-column: 1 / -1; }

/* 右上身分列：團隊｜職別｜姓名 同字級、同粗細、同顏色（不讓名字突然變粗） */
.me.me-t, .hd-me.me-t { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; letter-spacing: .14em; color: #25573C; white-space: nowrap; }
.me-t i { width: 1px; height: 11px; background: currentColor; opacity: .45; }

/* 居住地址（改版）：兩顆選擇鈕，點了在下面展開一格格選項，選完自動收起；不用系統下拉 */
.ad-pick { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 6px 0; font: 400 17px var(--font-body); color: var(--ink); text-align: left; }
.ad-pick svg { width: 16px; height: 16px; flex: none; transition: transform .2s; }
.ad-pick[aria-expanded="true"] { border-bottom-width: 2px; }
.ad-pick[aria-expanded="true"] svg { transform: rotate(180deg); }
.ad-pick.empty { color: var(--muted); }
.ad-pick:disabled { opacity: .35; }
.ad-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding: 12px; background: var(--card, #F1EEE7); }
.ad-chip { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 8px 2px; font-size: 14px; letter-spacing: .04em; white-space: nowrap; color: var(--ink); }
.ad-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* 第三頁摘要：左邊標題都四個字、右邊值同一條線靠右，最右一格固定給鉛筆鈕（第一列留空位） */
.ip-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 34px; gap: 12px; align-items: center; }
.ip-row b { margin-left: 0; text-align: right; }
.ip-slot { width: 34px; }
.ip-edit { width: 34px; height: 34px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.ip-edit svg { width: 16px; height: 16px; }
/* 同仁資料一排（名冊帶入，不能改） */

/* ══ 登入頁（石紋）共用 ══ */
.lux { position: relative; min-height: 100svh; margin-inline: calc(50% - 50vw); overflow: hidden; display: flex; flex-direction: column; isolation: isolate;
  --thin: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Jost", sans-serif; --zh: "PingFang TC", "Noto Sans TC", sans-serif; }
.lux .pin { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lux .pin-c { width: auto; height: 64px; border-radius: 14px; transition: background .25s, border-color .25s, box-shadow .25s; }
.lux .pst { position: relative; height: 22px; margin-top: 12px; }
.lux .pst > p { position: absolute; inset: 0; margin: 0; font: 400 13px/22px var(--zh); letter-spacing: .08em; }
.lux .pin-ok { display: flex; align-items: center; gap: 6px; }

.lux .pst { width: 100%; }

/* 登入頁（石紋）：字體＝明體＋Garamond（品牌提案） */
body:has(.gx), body:has(.gx)::before { background: #25573C; }
.gx { --serif: "Noto Serif TC", "Songti TC", serif; --en: "EB Garamond", Garamond, "Times New Roman", serif; --paper: #F4F1EA;
  color: var(--paper); background: #25573C; padding: max(30px, env(safe-area-inset-top)) 30px max(28px, env(safe-area-inset-bottom)); }
.gx .brand-h { background: var(--paper); height: 30px; align-self: flex-start; }
.gx-mid { margin-top: auto; padding-top: 36px; }
.gx-tag { display: block; font: italic 400 16px/1 var(--en); letter-spacing: .04em; opacity: .78; }
.gx-num { font: 400 92px/.95 var(--en); letter-spacing: .01em; margin-top: 6px; }
.gx-title { margin: 8px 0 0; font: 500 21px/1.4 var(--serif); letter-spacing: .3em; }
.gx-form { padding-top: 32px; }
.gx-h { margin: 0; font: 500 18px/1.3 var(--serif); letter-spacing: .26em; }
.gx-p { margin: 8px 0 0; font: 400 13px/1.5 var(--serif); letter-spacing: .1em; opacity: .7; }
.gx .pin { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gx .pin-c { width: auto; height: 60px; border-radius: 10px; background: rgb(255 255 255 / .04); border: 1px solid rgb(244 241 234 / .34); color: var(--paper); }
.gx .pin:focus-within .pin-c { border-color: rgb(244 241 234 / .7); }
.gx .pin.ok .pin-c { background: var(--paper); border-color: var(--paper); color: #25573C; }
.gx .pin.bad .pin-c { background: rgb(242 184 172 / .12); border-color: #F2B8AC; color: #F2B8AC; }
.gx .pst { margin-top: 12px; }
.gx .pst > p { font-family: var(--serif); }
.gx .err { color: #F6C3B8; } .gx .pin-ok { color: var(--paper); }

/* 2 石紋：提案 p.12 的綠色流紋石材當桌布，壓深一點；下方霧面深綠玻璃卡；置中 */
.gx-2 { background: #1A3D2B url(img/marble.jpg) 40% 30% / cover no-repeat; align-items: center; text-align: center; }
.gx-2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(16 42 29 / .35) 0%, rgb(16 42 29 / .55) 55%, rgb(12 34 23 / .82) 100%); }
.gx-2 .gx-mid { display: grid; justify-items: center; padding-top: 0; margin-top: auto; }
.gx-2 .brand-m { width: 64px; background: var(--paper); margin-bottom: 22px; }
.gx-2 .gx-title { padding-left: .3em; }
.gx-2 .gx-form { margin-top: auto; width: 100%; padding: 22px 20px 20px; border-radius: 22px; background: rgb(18 46 32 / .42); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgb(244 241 234 / .16); }
.gx-2 .gx-h { padding-left: .26em; }
.gx-2 .pst > p { justify-content: center; }

/* 矮螢幕（Safari 工具列）收在一屏內 */
@media (max-height: 640px) {
  .gx { padding-top: 22px; }
  .gx .brand-h { height: 26px; }
  .gx-mid { padding-top: 18px; }
  .gx-num { font-size: 74px; }
  .gx-title { font-size: 18px; }
  .gx-form { padding-top: 20px; }
  .gx .pin-c { height: 54px; }
  .gx-2 .gx-form { padding: 16px 16px 14px; }
}

/* ══ 配色 A 森與亞麻（:root.forest）：登入綠、迎接綠；內頁亞麻底，頂列與按鈕用品牌綠串起來 ══ */
:root.forest { --pick: #25573C; }
:root.forest body::before { background: #25573C; }
:root.forest .top.tb { background: #25573C; border-bottom: 0; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); padding-block: 14px; }
:root.forest .top.tb .brand-h { background: #F4F1EA; }
:root.forest .top.tb .me-t, :root.forest .hd-me.me-t { color: #CFE2D5; }
:root.forest .top.tb .tag { color: #F4F1EA; }
:root.forest .send, :root.forest .btn.solid, :root.forest .ip .send { background: #25573C; border-color: #25573C; color: #F4F1EA; }
#app .send:disabled { opacity: .5; cursor: default; } /* 送出中：按鈕變淡，不能再按 */
:root.forest .chip.pay { background: #25573C; color: #F4F1EA; }
:root.forest .chip.free { background: rgb(37 87 60 / .1); color: #25573C; }
:root.forest .m-head { background: #25573C; color: #F4F1EA; border-bottom: 0; }
:root.forest .m-head .hd-bag { border-color: rgb(244 241 234 / .6); }
:root.forest .m-head .hd-n { background: #F4F1EA; color: #25573C; }
:root.forest .m-rail [aria-selected="true"] .m-ic { background: #25573C; color: #F4F1EA; }
:root.forest .ip-top { background: #25573C; color: #F4F1EA; border-bottom: 0; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }

/* ══ 受檢者資料三版（?form=1|2|3）══ */
.fx { margin-top: 18px; }
.fx .err { margin: 6px 0 0; }
.fx input { width: 100%; min-width: 0; border: 0; background: transparent; font: 400 16px var(--font-body); color: var(--ink); padding: 0; border-radius: 0; }
.fx input:focus { outline: none; }
.fx input::placeholder { color: var(--muted); opacity: .8; }

/* 1 名牌＋分組卡：上面一張品牌綠「同仁名牌」，下面像 iPhone 設定的白色分組，左邊小圖示 */
.f1-g { border-radius: 16px; background: var(--card, #F1EEE7); overflow: hidden; border: 1px solid var(--line); }
.f1-r { display: grid; grid-template-columns: 22px 3em minmax(0, 1fr); align-items: center; gap: 10px; padding: 15px 16px; border-top: 1px solid var(--line); }
.f1-r:first-child { border-top: 0; }
.f1-r svg { width: 18px; height: 18px; color: var(--pick, var(--ink)); }
.f1-st { grid-template-columns: minmax(0, 1fr); padding-top: 13px; }
.f1-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.f1-two .ad-pick { border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px 6px 14px; font-size: 15px; }
.f1-g .ad-panel { margin: 0; border-top: 1px solid var(--line); background: transparent; }

/* 同仁資料：唯讀的內容字 */
.f1-v { font-size: 16px; letter-spacing: .08em; color: var(--ink); }

/* 個人資料填寫（定稿方向）：置中標題＋細線中間一段主色粗線；兩個圖示框分開放，框內只有圖示＋內容 */
.fx-title { margin: 6px 0 18px; text-align: center; font-size: 18px; font-weight: 500; letter-spacing: .3em; padding: 0 0 14px .3em; position: relative; border-bottom: 1px solid var(--line); }
.fx-title::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 32px; height: 2px; margin-left: -16px; background: var(--pick, var(--ink)); }
.fx-1 .f1-g + .f1-g { margin-top: 14px; }
.f1-x { grid-template-columns: 22px minmax(0, 1fr); gap: 14px; }
.f1-x .f1-two { grid-column: auto; margin-top: 0; }
.fx-1 .f1-st { padding-left: 52px; }
/* 步驟條圓圈裡的數字置中（原本字型行高讓數字往下偏） */
.ip-steps .cur b { display: inline-flex; align-items: center; justify-content: center; font: 500 11px/1 var(--font-latin, "Jost"), sans-serif; padding: 0; font-variant-numeric: lining-nums; }
.consent span { white-space: nowrap; align-self: center; }
.consent { align-items: center; }
.consent input { margin-top: 0; }

/* ══ 錯誤提示三版：都只在原欄位上標紅，不在下面多塞一行字 ══ */
.f1-r.bad { background: rgb(176 74 53 / .07); box-shadow: inset 0 0 0 1.5px var(--err); }
.f1-g .f1-r.bad:first-child { border-radius: 16px 16px 0 0; }
.f1-g .f1-r.bad:last-child { border-radius: 0 0 16px 16px; }
.f1-r.bad svg { color: var(--err); }
.f1-r.bad .ad-pick.empty { border-color: var(--err); color: var(--err); }
.f1-r.bad input::placeholder { color: var(--err); opacity: 1; }
.consent.bad { box-shadow: inset 0 0 0 1.5px var(--err); background: rgb(176 74 53 / .07); }
.consent.bad span { color: var(--err); }
.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97) both; }
/* 地址錯誤：縣市＋鄉鎮市區＋路街整塊一起框紅 */
.f1-ab { border-top: 1px solid var(--line); }
.f1-ab.bad { background: rgb(176 74 53 / .07); box-shadow: inset 0 0 0 1.5px var(--err); border-radius: 0 0 16px 16px; }
.f1-ab.bad svg { color: var(--err); }
.f1-ab.bad .ad-pick.empty { border-color: var(--err); color: var(--err); }
.f1-ab.bad input::placeholder { color: var(--err); opacity: 1; }

/* 登入：同一張石紋，換成主題色（石紋明暗不變，只換色相） */
/* 迎接幕 */
/* 內頁：頂列、視窗標題列、第三頁標題列＝主題色漸層；按鈕同一組漸層 */

  --sage: #2F5A4E; --sage-soft: rgb(47 90 78 / .11); --pick: #2F5A4E; --err: #B0462F;
  --band: linear-gradient(135deg, #3E6759 0%, #1E3A33 100%); --band-solid: #2A4B42; --on-band: #F2F5F2; --on-band-2: #C6DBD1;
  --tint: linear-gradient(160deg, #57826F 0%, #0E201B 100%); --veil: linear-gradient(180deg, rgb(14 32 27 / .25) 0%, rgb(14 32 27 / .5) 55%, rgb(9 22 18 / .84) 100%); --glass: rgb(16 36 30 / .42); }


/* ══ 幕啟看得見：登入頁往後退＋變暗；幕的頂端一道亮邊＋向上的陰影；幕本身上亮下深 ══ */
.lux.leaving { transform: scale(.93) translateY(-2%); filter: brightness(.5); transition: transform .7s cubic-bezier(.7, 0, .25, 1), filter .7s ease; }
.wel-3 { box-shadow: 0 -30px 60px -12px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .28); }
:root.forest .wel-3 { background: linear-gradient(180deg, #33704F 0%, #25573C 45%, #1D4730 100%); }

/* ══ 首頁：第二列置中小標題＋兩張大卡 ══ */
:root.forest { --band: linear-gradient(135deg, #2F6A4B 0%, #25573C 100%); --band-solid: #25573C; --on-band: #F4F1EA; }
.hm-sub { margin: 18px 0 4px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.hm-sub .tag { color: var(--muted); }
.hm-sub b { font-size: 17px; font-weight: 500; letter-spacing: .24em; padding-left: .24em; }
.hm-sub b .d { font-size: 22px; font-weight: 300; letter-spacing: .02em; }
.hx { position: relative; display: grid; justify-items: start; gap: 4px; width: 100%; text-align: left; margin-top: 14px; padding: 22px 20px 20px; border: 0; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 14px 28px -22px rgb(0 0 0 / .35); }
.hx-n { font-size: 64px; line-height: .9; color: var(--pick, var(--ink)); }
.hx .chip { position: absolute; top: 22px; right: 20px; }
.hx h2 { font-size: 26px; letter-spacing: .18em; margin-top: 6px; }
.hx p { margin: 0; color: var(--muted); font-size: 14px; }
.hx .pt-icons { margin-top: 10px; }
.hx .pt-go { justify-self: end; }
.hx .acts { width: 100%; }
.hx .acts .btn { flex: 1; }
.hx .st { width: 100%; }

/* ══ 首頁（定案）：整頁剛好一個畫面，卡片跟著螢幕高度伸縮 ══ */
#app:has(> .hm) { padding-bottom: 0; }
.hm { min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
.hm .hm-sub { margin: clamp(8px, 1.6svh, 16px) 0 0; gap: clamp(10px, 3svh - 6px, 22px); }
.hm-cards { flex: 1; display: flex; flex-direction: column; gap: clamp(10px, 1.8svh, 14px); padding-top: clamp(8px, 1.5svh, 18px); }
.hm .hx { flex: 1 1 auto; margin: 0; padding: clamp(15px, 2.8svh, 22px) 18px; }
.hm .hx h2 { margin: 0; font-size: 24px; }
.hm .hx-n { font-size: clamp(44px, 8.6svh, 64px); }
.hm .pt-icons { gap: 6px; margin: 0; }
.hm .mini { width: 34px; height: 34px; }
.hm .mini svg { width: 18px; height: 18px; }
.hm .pt-go { margin: 0; white-space: nowrap; }
.hm .acts { margin: 0; flex-wrap: nowrap; }
.hm .acts .btn { flex: 1; padding-block: 11px; white-space: nowrap; }
.hm .send { margin-top: 12px; }
.h-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }

/* 大編號放標題左邊；圖示和「查看內容」併成同一列 */
.hm .hx { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 12px; align-items: center; }
.hm .hx-n { line-height: .82; }
.hm .h-t { display: grid; gap: 2px; padding-right: 4px; }
.hm .hx .chip { top: clamp(15px, 2.8svh, 22px); right: 18px; }
.hm .h-foot, .hm .acts { grid-column: 1 / -1; align-self: end; width: 100%; }

/* 已選加購：淡綠底一條，左邊實心圓購物車、中間項數、右邊箭頭（點了看明細）；不加購是虛線框 */
.sc2 { grid-column: 1 / -1; align-self: end; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; border: 0; text-align: left; color: inherit; align-items: center; gap: 12px; width: 100%; padding: 9px 14px 9px 10px; border-radius: 14px; background: color-mix(in srgb, var(--pick, var(--ink)) 8%, transparent); }
.sc2-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--pick, var(--ink)); color: var(--bg); }
.sc2-ic svg { width: 20px; height: 20px; }
.sc2-t { display: grid; min-width: 0; line-height: 1.4; }
.sc2-t b { font-size: 14.5px; font-weight: 500; }
.sc2-t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc2 > svg { width: 18px; height: 18px; color: var(--muted); }
.sc2.off { background: transparent; border: 1px dashed var(--line); }
.sc2.off .sc2-ic { background: transparent; border: 1px solid var(--line); color: var(--muted); }

.hm #addpart:has(.sc2) { row-gap: 8px; padding-block: clamp(12px, 2.2svh, 22px); }
.hm #addpart:has(.sc2) .acts .btn { padding-block: 9px; }
.hm #addpart .sc2 { padding: 6px 12px 6px 7px; }
.hm #addpart .sc2-ic { width: 34px; height: 34px; }
.hm .hm-cards:has(.sc2) + .send { margin-top: 10px; }

/* ══ 圓圈裡的數字／字母（組數、購物袋數、左欄數、套餐字母、步驟）：一律真正置中 ══
   不靠 line-height（每種字體上下留白不同，iPhone 上數字會偏下），改成把字裁到「大寫高度～基線」，再用上下內距置中 */
@supports (text-box: trim-both cap alphabetic) {
  .tl-n, .hd-n, .m-badge, .pk-k, .ip-steps .cur b { display: block; box-sizing: border-box; height: var(--h); line-height: 1; text-align: center; text-box: trim-both cap alphabetic; padding-block: calc((var(--h) - 1cap) / 2); }
  .tl-n { --h: 26px; }
  .hd-n { --h: 20px; }
  .m-badge { --h: 18px; }
  .pk-k { --h: 34px; }
  .ip-steps .cur b { --h: 18px; }
}

/* ══ 離開加價購的確認提示：霧面遮罩＋中間一張卡，淡入微彈 ══ */
.cf { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgb(20 28 24 / .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cfIn .22s ease both; }
.cf-card { width: min(320px, 100%); display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 22px 20px; border-radius: 22px; background: var(--card, #F1EEE7); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 30px 60px -24px rgb(0 0 0 / .5); animation: cfPop .34s cubic-bezier(.2, .9, .25, 1.15) both; }
.cf-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: color-mix(in srgb, var(--pick, var(--ink)) 12%, transparent); color: var(--pick, var(--ink)); }
.cf-ic svg { width: 26px; height: 26px; }
.cf-card h3 { font-size: 18px; font-weight: 500; letter-spacing: .16em; padding-left: .16em; }
.cf-card p { margin: 0; color: var(--muted); font-size: 14.5px; letter-spacing: .08em; }
.cf-acts { display: flex; gap: 10px; width: 100%; margin-top: 18px; }
.cf-acts .btn { flex: 1; padding-block: 11px; }
@keyframes cfIn { from { opacity: 0; } }
@keyframes cfPop { from { opacity: 0; transform: translateY(12px) scale(.94); } }

/* ══ 常規檢查視窗右上「看加價購」：白底膠囊、柔和陰影，取代下方的關閉／看加價購 ══ */
.hd-go { flex: none; display: inline-flex; align-items: center; gap: 2px; border: 0; border-radius: 999px; padding: 8px 10px 8px 15px; background: #FFFFFF; color: var(--pick, var(--ink)); font-size: 14px; font-weight: 500; letter-spacing: .12em; white-space: nowrap; box-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 8px 18px -10px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .04); }
.hd-go svg { width: 16px; height: 16px; }
.hd-go:active { transform: translateY(1px); box-shadow: 0 4px 10px -8px rgb(0 0 0 / .5); }

/* 受檢者資料頁：確認送出下面只留一點呼吸空間（原本外層＋本頁各留 60px，疊成一大塊空白） */
#app:has(> .ip) { padding-bottom: 0; }
.ip { padding-bottom: 20px; }

/* ══ 送出完成（定案：封緘印記）：一個畫面放完，沒有按鈕 ══ */
#app:has(> .dn) { padding-bottom: 0; }
.dn { min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 0; text-align: center; }
.dn .up { animation: dnUp .65s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes dnUp { from { opacity: 0; transform: translateY(14px); } }
.dn-ty { font: 500 40px/1.1 var(--font-latin); letter-spacing: .02em; }
.dn-me { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.dn-me i { width: 1px; height: 11px; background: currentColor; opacity: .45; }
.ck { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ck-p { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ckDraw var(--t, .5s) cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes ckDraw { to { stroke-dashoffset: 0; } }
.dn ul { list-style: none; margin: 0; padding: 0; }
.dn li { display: flex; align-items: center; gap: 14px; text-align: left; font-size: 15.5px; letter-spacing: .06em; }
.dn li svg { width: 19px; height: 19px; flex: none; color: var(--pick, var(--ink)); }
.ip.out { animation: ipOut .38s ease forwards; }
@keyframes ipOut { to { opacity: 0; transform: translateY(12px) scale(.97); } }

/* 品牌綠圓章蓋下來、一圈漣漪散開，下面三列細線 */
.dn-seal { position: relative; width: 92px; height: 92px; margin-bottom: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--pick, var(--ink)); color: #F4F1EA; box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 18px 30px -16px rgb(0 0 0 / .5); animation: dnStamp .55s cubic-bezier(.2, .9, .25, 1.2) both; }
.dn-seal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--pick, var(--ink)); animation: dnRipple 1.1s .3s ease-out both; }
@keyframes dnStamp { 0% { opacity: 0; transform: scale(1.8); } 60% { opacity: 1; transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes dnRipple { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.dn .dn-rows { width: min(300px, 100%); margin-top: 24px; border-top: 1px solid var(--line); }
.dn .dn-rows li { padding: 14px 4px; border-bottom: 1px solid var(--line); }

/* 圓章裡放雲川水月圓形標誌，右下角彈出打勾小章（logo 跟勾勾合在一起） */
.dn-seal .brand-m { width: 50px; background: #F4F1EA; }
.dn-badge { position: absolute; right: -7px; bottom: -7px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #F4F1EA; color: var(--pick, var(--ink)); box-shadow: 0 0 0 3px var(--bg), 0 6px 12px -6px rgb(0 0 0 / .45); animation: dnBadge .45s .5s cubic-bezier(.2, .9, .25, 1.35) both; }
.dn-badge .ck { width: 21px; height: 21px; stroke-width: 4.6; }
@keyframes dnBadge { from { opacity: 0; transform: scale(0); } }

/* 首頁第二列：115 年度同仁健康檢查＋健檢週期（拿掉英文小標） */
.hm-per { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13.5px; line-height: 1.3; color: var(--ink); letter-spacing: .12em; }
.hm-per small { font-size: 12.5px; letter-spacing: .08em; }
.hm-per em { font-style: normal; margin: 0 2px; letter-spacing: 0; }
.hm-sub b { line-height: 1.4; }
.hm-per .d { font-size: 17px; font-weight: 400; letter-spacing: .02em; }

/* ══ 送出後的「下一步」（定案：三步進度＋常見問題）══ */
/* 再登入（審查中、開放預約）不再蓋章：圓章直接在、沒有漣漪 */
.dn.still .dn-seal, .dn.still .dn-badge { animation: none; }
.dn.still .dn-seal::after { display: none; }
.dn.still .ck-p { animation-duration: 1ms; animation-delay: 0s; }
.dn.fq .dn-seal { width: 80px; height: 80px; margin-bottom: 12px; }
.dn.fq .dn-seal .brand-m { width: 44px; }
.dn.fq .dn-ty { font-size: 34px; }
.dn.fq .dn-rows { margin-top: 16px; }
.dn.fq .dn-rows li { padding: 11px 4px; }

/* 三步進度：登記完成 → 醫院審查 → 開放預約，下面一列「常見問題」（開放後換成「預約方式與受檢須知」） */
.stp { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); width: min(300px, 100%); margin: 18px auto 0; padding: 0; position: relative; }
.stp::before { content: ""; position: absolute; top: 13px; left: 16.6%; right: 16.6%; height: 1px; background: var(--line); }
.stp li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12.5px; letter-spacing: .08em; color: var(--muted); }
.stp b { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); color: var(--muted); font: 400 13px var(--font-disp); }
.stp b svg { width: 14px; height: 14px; }
.stp .ok { color: var(--pick, var(--ink)); }
.stp .ok b { background: var(--pick, var(--ink)); border-color: var(--pick, var(--ink)); color: #F4F1EA; }
.stp .cur { color: var(--ink); font-weight: 500; }
.stp .cur b { border-color: var(--pick, var(--ink)); color: var(--pick, var(--ink)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pick, var(--ink)) 14%, transparent); }
.nx2 { width: min(300px, 100%); margin-top: 14px; }
.nx-row { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; padding: 12px 4px; font-size: 15px; letter-spacing: .08em; color: var(--ink); text-align: left; }
.nx-row svg:first-child { width: 19px; height: 19px; color: var(--pick, var(--ink)); }
.nx-row span { flex: 1; }
.nx-row svg:last-child { width: 16px; height: 16px; color: var(--muted); }

/* 常見問題（中間視窗） */
.qa { margin: 0; text-align: left; }
.qa dt { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; letter-spacing: .06em; }
.qa dt svg { width: 18px; height: 18px; flex: none; color: var(--pick, var(--ink)); }
.qa dd { margin: 4px 0 0 26px; font-size: 13.5px; line-height: 1.7; letter-spacing: .04em; }
.qa dd + dt { margin-top: 12px; }
.cf-wide { width: min(340px, 100%); max-height: min(80svh, 620px); grid-template-rows: auto minmax(0, 1fr) auto; justify-items: stretch; text-align: left; padding: 22px 20px 18px; }
.cf-wide > h3 { text-align: center; }
.cf-body { overflow: auto; margin-top: 10px; padding-right: 2px; overscroll-behavior: contain; }
@supports (text-box: trim-both cap alphabetic) {
  .stp b { display: block; box-sizing: border-box; height: var(--h); line-height: 1; text-align: center; text-box: trim-both cap alphabetic; padding-block: calc((var(--h) - 2px - 1cap) / 2); --h: 26px; }
  .stp .ok b { display: grid; padding: 0; text-box: normal; }
}
.stp-w { width: min(300px, 100%); }
.dn .stp .ok b svg { color: #F4F1EA; width: 14px; height: 14px; } /* 完成頁 li 圖示一律綠色，步驟圓圈裡的勾要白 */

/* ══ 到院健檢指南（開放預約後）：左欄 預約／時段／交通／須知／問卷，內容沿用常規檢查的區塊樣式 ══ */
.gd-act { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; background: color-mix(in srgb, var(--pick, var(--ink)) 8%, transparent); color: var(--ink); text-decoration: none; }
.gd-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--pick, var(--ink)); color: #F4F1EA; }
.gd-ic svg { width: 20px; height: 20px; }
.gd-t { display: grid; min-width: 0; line-height: 1.4; }
.gd-t b { font-size: 15.5px; font-weight: 500; letter-spacing: .08em; }
.gd-t small { font-size: 12.5px; letter-spacing: .04em; }
.gd-act > svg { width: 18px; height: 18px; color: var(--muted); }
.gd-list { list-style: none; margin: 8px 0 0; padding: 0; }
.gd-list li { display: flex; gap: 8px; padding: 5px 0; font-size: 14px; line-height: 1.6; letter-spacing: .03em; }
.gd-list svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--pick, var(--ink)); }
.gd-p { margin: 8px 0 0; font-size: 14px; line-height: 1.7; letter-spacing: .03em; }
.gd-p b { font-weight: 500; }
.gd-date { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 14px 0 2px; }
.gd-date .d { font-size: 24px; font-weight: 400; }
.gd-date small { font-size: 13px; letter-spacing: .08em; }
.gd-date em { font-style: normal; margin: 0 4px; }
.gd-days { margin-left: auto; font-size: 13.5px; letter-spacing: .08em; }
.gd-time { margin: 6px 0 0; font-size: 26px; font-weight: 400; letter-spacing: .02em; color: var(--pick, var(--ink)); }
.gd-note { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; letter-spacing: .04em; }
.gd-day { margin-top: 16px; }
/* 常見問題答案是條列時（為什麼選博仁） */
.qa-li { list-style: none; margin: 0; padding: 0; }
.qa-li li { position: relative; padding-left: 12px; }
.qa-li li::before { content: ""; position: absolute; left: 0; top: .78em; width: 4px; height: 4px; border-radius: 50%; background: var(--pick, var(--ink)); }
/* 中間視窗打開時：背後不能捲、不能點 */
html.cf-open, html.cf-open body { overflow: hidden; }
.cf { touch-action: none; overscroll-behavior: contain; }
.cf-body { touch-action: pan-y; }
.cf-msg { margin: 6px 0 0; font-size: 14.5px; line-height: 1.7; letter-spacing: .04em; text-align: center; }