/* 醫療儲備計算機 · 四步全闊流程（2026-10-03 重新設計，用戶已批樣板） ⚠️ 只得 medical-reserve.html 載呢份；保費融資計算機照用 medreserve.css 嘅 mr-shell（唔郁）。 全部 class 用 mr2- 前綴（或者 scope 喺 #mrBody.mr2），唔會撞 medreserve.css 舊殼；斷點跟內容區闊度（@container mrpage）。 字級／色／間距一律 token；撳得嘅嘢 ≥44px；正文 ≥14px（var(--fs-md)）、細字 ≥12px（var(--fs-xs)）。 */ body[data-page="med-reserve"] #mrBody.mr2{display:block;container:mrpage/inline-size} #mrBody.mr2 .mr2-i,.mr2-dr .mr2-i,.mr2-pop .mr2-i,.mr2-cv .mr2-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} #mrBody.mr2 .mono,.mr2-dr .mono,.mr2-cv .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} #mrBody.mr2 .sml,.mr2-dr .sml,.mr2-pop .sml{font-size:var(--fs-xs);color:var(--muted);line-height:1.55} #mrBody.mr2 .warn{color:var(--warn)} /* ── 頁頭（深色，矮）── */ body[data-page="med-reserve"] #mrBody.mr2>.mr2-hero{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3h) var(--sp-5);margin-bottom:0} #mrBody.mr2 .mr2-hero .t{flex:1;min-width:0} #mrBody.mr2 .mr2-hero h1{font-size:var(--fs-xl);color:var(--primary-ink);margin:0} #mrBody.mr2 .mr2-hero .ctx{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:2px;min-height:20px;font-size:var(--fs-sm);color:rgba(255,255,255,.72)} /* 10-24：純字儲存狀態（唔撳得唔似掣 #413） */ #mrBody.mr2 .mr2-hero .ctx b{color:var(--primary-ink)} #mrBody.mr2 .mr2-hero .mr-headact{display:flex;align-items:center;gap:var(--sp-2h);flex:none} #mrBody.mr2 .mr2-hero .mr-headact .dim{color:rgba(255,255,255,.7);font-size:var(--fs-xs);white-space:nowrap} #mrBody.mr2 .mr2-hero .mr-headact button.act:disabled{background-color:rgba(255,255,255,.06);color:rgba(255,255,255,.45)} /* 10-24 Q5 A：儲存改淺色掣；深底停用版 */ /* ── 步驟條（sticky）── */ #mrBody.mr2 .mr2-steps{position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px));z-index:12;background:var(--bg);padding:var(--sp-2h) 0;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap} #mrBody.mr2 .mr2-steps .seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:auto;flex:1 1 0;min-width:0} /* 10-22 顯示貨幣掣（第②–④步）：步驟條右邊；窄位自己一行靠右 */ /* 10-24 輸入格等值細字（顯示貨幣唔同計劃貨幣先出；資料，冇框冇底） */ #mrBody.mr2 .mr2-eq{font-size:var(--fs-sm);color:var(--muted);font-weight:500;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} #mrBody.mr2 .mr2-dccy{flex:none;display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink2);font-weight:700} #mrBody.mr2 .mr2-dccy .mr-seg{width:auto} #mrBody.mr2 .mr2-dccy .mr-seg button{min-height:44px;min-width:56px;font-size:var(--fs-sm);padding:0 var(--sp-3)} #mrBody.mr2 .mr2-inflnote{font-size:var(--fs-xs);color:var(--warn)} #mrBody.mr2 .mr2-steps .seg button{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;font-size:var(--fs-md);padding:var(--sp-1) var(--sp-2);white-space:normal;line-height:1.25;text-align:left} #mrBody.mr2 .mr2-steps .seg button .no{width:24px;height:24px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;flex:none} #mrBody.mr2 .mr2-steps .seg button.done .no{background:var(--brand-green-deep);border-color:var(--brand-green-deep);color:var(--primary-ink)} #mrBody.mr2 .mr2-steps .seg button.done.on .no{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--accent)} #mrBody.mr2 .mr2-steps .seg button.lock{color:var(--faint)} #mrBody.mr2 .mr2-steps .seg button .no .mr2-i{width:14px;height:14px;stroke-width:2.6} /* ── 共用卡／掣／chips ── */ #mrBody.mr2 .mr2-card{margin-top:var(--sp-3)} #mrBody.mr2 .mr2-card.pad{padding:var(--sp-3h) var(--sp-4)} #mrBody.mr2 .row{display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;padding:var(--sp-2h) var(--sp-4)} #mrBody.mr2 .row+.row,#mrBody.mr2 .mr2-editin+.row{border-top:1px solid var(--line2)} #mrBody.mr2 .lbl{font-size:var(--fs-sm);color:var(--muted);font-weight:700;min-width:64px} #mrBody.mr2 .row .sum{font-size:var(--fs-md)} .mr2-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1h);min-height:44px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:0 var(--sp-3h);font-size:var(--fs-sm);font-weight:700;cursor:pointer;white-space:nowrap;font-family:var(--sans)} .mr2-btn:hover{border-color:var(--brand-green-deep)} .mr2-btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)} .mr2-btn.on{background:var(--accent-soft);border-color:var(--brand-gold-deep);color:var(--accent-ink)} .mr2-btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)} .mr2-btn.primary:hover{background:var(--brand-deeper)} .mr2-btn:disabled{opacity:.45;cursor:not-allowed} .mr2-chips{display:flex;gap:var(--sp-1h);flex-wrap:wrap;align-items:center} .mr2-chip{display:inline-flex;align-items:center;gap:var(--sp-1h);min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:0 var(--sp-3h);font-size:var(--fs-md);font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;font-family:var(--sans)} .mr2-chip:hover{border-color:var(--brand-green-deep)} .mr2-chip .r{font-size:var(--fs-sm);color:var(--muted);font-weight:500} .mr2-chip .a{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink2);font-weight:500} .mr2-chip.on{background:var(--accent-soft);border-color:var(--brand-gold-deep)} .mr2-chip.mono{font-family:var(--mono);font-weight:500} .mr2-chip i{width:10px;height:10px;border-radius:2px;display:inline-block} /* ── 第①步（10-24 iPad 11 吋新設計；規格桌面 醫療儲備_iPad第一步_2026-10-24／規格_定稿_v2.md，用戶批樣板 v1.4）── 卡頭一行：「受保人」＋搜尋格（flex:1，48 高）＋ⓘ＋右「換客戶／取消」；受保人表一人一行（Q1 A），表頭同每行用同一副欄（subgrid）， 表頭字左邊＝每行入面字左邊（輸入格／下拉＝邊 1＋內距 12；歲＝邊 1＋內距 8；.mseg＝槽 2＋掣 12；醫保 0）；行高固定（打橫 64、打直兩行 120）。 卡只得一層（冇盒中盒）；唔撳得嘅冇框（#413）；次要動作 button.act（ui-kit.css）。 */ #mrBody.mr2 .mr2-ihd{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);min-height:60px;border-bottom:1px solid var(--line2)} #mrBody.mr2 .mr2-ihd h2{margin:0;font-size:var(--fs-lg);font-weight:700;flex:none;white-space:nowrap} #mrBody.mr2 .mr2-ihd .sp{flex:1} #mrBody.mr2 .mr2-ihd .ibtn{margin:0 calc(-1 * var(--sp-2))} #mrBody.mr2 .mr2-ipw{padding:0 var(--sp-4)} #mrBody.mr2 .mr2-srch{position:relative;flex:1 1 auto;min-width:0} #mrBody.mr2 .mr2-srch>.mr2-i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)} #mrBody.mr2 .mr2-srch input{width:100%;height:48px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 var(--sp-3h) 0 42px;font-size:var(--fs-md);background:var(--card);font-family:var(--sans)} #mrBody.mr2 .mr2-srch input:focus{outline:2px solid var(--brand-green-deep);border-color:transparent} #mrBody.mr2 .mr2-cdrop{position:absolute;left:0;right:0;top:52px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);z-index:30;max-height:420px;overflow-y:auto;-webkit-overflow-scrolling:touch} /* 搜尋結果一行：名｜歲 · 出生日期｜N 張保單｜›（冇首字頭像 #402；同名靠生日分） */ #mrBody.mr2 .mr2-cdrop .it{display:grid;grid-template-columns:minmax(0,1fr) auto auto 18px;align-items:center;column-gap:var(--sp-4);width:100%;min-height:56px;border:0;border-bottom:1px solid var(--line2);background:var(--card);padding:var(--sp-1h) var(--sp-3h);cursor:pointer;text-align:left;font-family:var(--sans);color:var(--ink)} #mrBody.mr2 .mr2-cdrop .it:last-child{border-bottom:0} #mrBody.mr2 .mr2-cdrop .it:hover{background:var(--accent-soft)} #mrBody.mr2 .mr2-cdrop .it b{font-size:var(--fs-md);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mrBody.mr2 .mr2-cdrop .it .a{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);color:var(--ink2);white-space:nowrap} #mrBody.mr2 .mr2-cdrop .it .n{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;text-align:right} #mrBody.mr2 .mr2-cdrop .it .mr2-i{color:var(--faint)} #mrBody.mr2 .mr2-cdrop .empty{padding:var(--sp-3h) var(--sp-4);color:var(--muted);font-size:var(--fs-md);line-height:1.6} #mrBody.mr2 .mr2-cdrop .cf{display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;min-height:56px;padding:var(--sp-1h) var(--sp-2) var(--sp-1h) var(--sp-4);font-size:var(--fs-md);font-weight:700} #mrBody.mr2 .mr2-cdrop .cf span{flex:1;min-width:200px} /* 受保人表 */ #mrBody.mr2 .mr2-who{--mr-c-rel:92px;--mr-c-dob:156px;--mr-c-age:64px} /* 欄闊定喺卡度：卡頭（受保人／搜尋格）同表同一個數 */ #mrBody.mr2 .mr2-itbl{display:grid;grid-template-columns:var(--mr-c-rel) minmax(0,1fr) var(--mr-c-dob) var(--mr-c-age) max-content max-content max-content 44px;column-gap:6px;padding:0 var(--sp-3)} html[lang="en"] #mrBody.mr2 .mr2-who{--mr-c-rel:128px;--mr-c-dob:132px;--mr-c-age:72px} /* 128：打直第一欄要放得落 Male／Female 細分段掣 */ #mrBody.mr2 .mr2-ir{grid-column:1/-1;display:grid;grid-template-columns:subgrid;grid-template-areas:"rel nm dob age g s pc x";align-items:center;height:64px;border-bottom:1px solid var(--line2);position:relative;min-width:0} #mrBody.mr2 .mr2-ir>.rel{grid-area:rel}#mrBody.mr2 .mr2-ir>.nm{grid-area:nm}#mrBody.mr2 .mr2-ir>.dob{grid-area:dob}#mrBody.mr2 .mr2-ir>.age{grid-area:age} #mrBody.mr2 .mr2-ir>.g{grid-area:g}#mrBody.mr2 .mr2-ir>.s{grid-area:s}#mrBody.mr2 .mr2-ir>.pc{grid-area:pc}#mrBody.mr2 .mr2-ir>.x{grid-area:x} #mrBody.mr2 .mr2-ir>*{min-width:0} #mrBody.mr2 .mr2-ir.hd{height:auto;min-height:40px;padding:var(--sp-2h) 0 var(--sp-1);font-size:var(--fs-xs);font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line)} #mrBody.mr2 .mr2-ir.hd>.rel,#mrBody.mr2 .mr2-ir.hd>.nm,#mrBody.mr2 .mr2-ir.hd>.dob{padding-left:13px} #mrBody.mr2 .mr2-ir.hd>.age{padding-left:9px} #mrBody.mr2 .mr2-ir.hd>.g,#mrBody.mr2 .mr2-ir.hd>.s{padding-left:14px} #mrBody.mr2 .mr2-ir.hd>.age,#mrBody.mr2 .mr2-ir.hd>.pc{display:flex;align-items:center;gap:2px;white-space:nowrap} #mrBody.mr2 .mr2-ir.hd .ibtn{margin:-14px -14px -14px -12px} #mrBody.mr2 .mr2-ir .rel .self{display:flex;align-items:center;min-height:48px;padding-left:13px;font-size:var(--fs-md);font-weight:700} #mrBody.mr2 .mr2-ir select.mr-sel{font-weight:700} #mrBody.mr2 .mr2-ir select.mr-sel.ph{color:var(--faint);font-weight:400} #mrBody.mr2 .mr2-ir .mr-in input{text-align:left} #mrBody.mr2 .mr2-ir .mr-in input.txt{text-overflow:ellipsis} #mrBody.mr2 .mr2-ir .mr-in input[type=date]::-webkit-datetime-edit,#mrBody.mr2 .mr2-ir .mr-in input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0;margin:0} #mrBody.mr2 .mr2-ir .mr-in input[type=date]::-webkit-datetime-edit-year-field,#mrBody.mr2 .mr2-ir .mr-in input[type=date]::-webkit-datetime-edit-month-field,#mrBody.mr2 .mr2-ir .mr-in input[type=date]::-webkit-datetime-edit-day-field{padding:0} #mrBody.mr2 .mr2-ir .mr-in input[type=date]::-webkit-date-and-time-value{text-align:left} #mrBody.mr2 .mr2-ir .mr-in .pill.sfx{flex:none;font-size:var(--fs-xs);padding:0 7px;line-height:20px} #mrBody.mr2 .mr2-ir .mr-in.bad{border-color:var(--bad)} #mrBody.mr2 .mr2-ir .age{position:relative} #mrBody.mr2 .mr2-ir .age .mr-in{padding:0 8px} #mrBody.mr2 .mr2-ir .mr2-agev{display:flex;align-items:center;gap:3px;height:48px;padding-left:9px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--fs-md);color:var(--ink);white-space:nowrap} #mrBody.mr2 .mr2-ir .mr2-agev .u{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)} #mrBody.mr2 .mr2-ir .mr2-over{position:absolute;left:0;top:calc(100% + 1px);z-index:2;pointer-events:none;white-space:nowrap} #mrBody.mr2 .mr2-ir .mr2-dobv{display:flex;flex-direction:column;justify-content:center;height:48px;padding-left:13px;font-size:var(--fs-md);line-height:1.2} #mrBody.mr2 .mr2-ir .mr2-dobv small{font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted)} #mrBody.mr2 .mr2-ir .g,#mrBody.mr2 .mr2-ir .s,#mrBody.mr2 .mr2-ir .pc,#mrBody.mr2 .mr2-ir .x{display:flex;align-items:center;min-height:48px} #mrBody.mr2 .mr2-ir.hd>.g,#mrBody.mr2 .mr2-ir.hd>.s,#mrBody.mr2 .mr2-ir.hd>.pc,#mrBody.mr2 .mr2-ir.hd>.x{min-height:0} #mrBody.mr2 .mr2-ir .pc{font-size:var(--fs-md);white-space:nowrap;gap:4px} #mrBody.mr2 .mr2-ir .pc .pfx{display:none;color:var(--muted);font-size:var(--fs-sm);margin-right:4px} #mrBody.mr2 .mr2-ir .pc .none{color:var(--warn);font-weight:700} #mrBody.mr2 .mr2-ir .x{justify-content:flex-end} /* Q3 A 原位問：蓋住成行（同一個高度，唔郁位） */ #mrBody.mr2 .mr2-ask{position:absolute;inset:0;z-index:3;display:flex;align-items:center;gap:var(--sp-2h);flex-wrap:wrap;background:var(--card);padding-left:var(--sp-1);font-size:var(--fs-md);font-weight:700} #mrBody.mr2 .mr2-ask span{flex:1;min-width:200px} #mrBody.mr2 .mr2-ask button.act.dz{color:var(--bad);background-color:var(--bad-soft)} /* Q4 A 建議行：淺灰底＋「建議」 */ #mrBody.mr2 .mr2-ir.cand{display:flex;align-items:center;gap:var(--sp-3);margin:0 calc(-1 * var(--sp-3));padding:0 var(--sp-3);background:var(--card2)} #mrBody.mr2 .mr2-ir.cand .t{flex:1;min-width:0;color:var(--muted);font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #mrBody.mr2 .mr2-ir.cand .t .pill{margin-right:var(--sp-2)} #mrBody.mr2 .mr2-ir.cand .t b{color:var(--ink2)} #mrBody.mr2 .mr2-famadd{display:flex;align-items:center;gap:var(--sp-3);min-height:60px;padding:var(--sp-2) var(--sp-3)} #mrBody.mr2 .mr2-famadd .lim{font-size:var(--fs-sm);color:var(--muted)} /* 過往分析（Q7 A）：一行可撳列表行 */ #mrBody.mr2 .mr2-past{display:flex;align-items:center;gap:var(--sp-2h);padding:var(--sp-1) var(--sp-2);border-top:1px solid var(--line2)} #mrBody.mr2 .lrow,.mr2-dr .lrow{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:52px;padding:0 var(--sp-2);border:0;background:transparent;text-align:left;cursor:pointer;font-family:var(--sans);font-size:var(--fs-md);color:var(--ink)} #mrBody.mr2 .lrow:hover,.mr2-dr .lrow:hover{background:var(--card2)} #mrBody.mr2 .lrow .nm,.mr2-dr .lrow .nm{flex:1 1 auto;min-width:0;line-height:1.3} #mrBody.mr2 .lrow .chev,.mr2-dr .lrow .chev{color:var(--ink2);display:flex;flex:none} .mr2-dr .mr2-pastl{padding:var(--sp-1) var(--sp-2)} .mr2-dr .mr2-pastl .lrow{min-height:60px;border-bottom:1px solid var(--line2)} .mr2-dr .mr2-pastl .lrow.on{background:var(--accent-soft)} .mr2-dr .mr2-pastl .lrow small{display:block;font-size:var(--fs-xs);color:var(--muted)} .mr2-dr .panel.past{width:min(480px,100vw)} #mrBody.mr2 .mr2-who>.mr-note{margin:0 var(--sp-4) var(--sp-2h);font-size:var(--fs-sm)} /* 底部未齊原因（淺橙可撳掣；撳 → 捲去嗰格＋金框閃一次） */ #mrBody.mr2 .mr2-why{display:inline-flex;align-items:center;gap:var(--sp-1h);min-height:44px;padding:0 var(--sp-3h);border:0;background:var(--warn-soft);border-radius:10px;color:var(--warn);font-weight:700;font-size:var(--fs-md);cursor:pointer;text-align:left;line-height:1.35;font-family:var(--sans)} #mrBody.mr2 .mr2-why:hover{background:rgba(168,98,14,.18)} #mrBody.mr2 .mr2-why .mr2-i{width:16px;height:16px} #mrBody.mr2 .mr2-why small{font-weight:500;opacity:.85;margin-left:var(--sp-1)} @keyframes mr2flash{0%,60%{box-shadow:0 0 0 3px var(--brand-gold)}100%{box-shadow:0 0 0 3px rgba(201,164,92,0)}} #mrBody.mr2 .mr2-flash{animation:mr2flash 1.4s ease-out 1} #mrBody.mr2 tr.mr2-flash td{animation:mr2flash 1.4s ease-out 1} @media (prefers-reduced-motion:reduce){#mrBody.mr2 .mr2-flash,#mrBody.mr2 tr.mr2-flash td{animation:none;box-shadow:0 0 0 3px var(--brand-gold)}} /* 打直（內容區 ≤860：iPad 820 直放約 776）：每人兩行 —— 關係｜姓名｜出生日期｜歲 ／ 性別｜吸煙｜醫保｜× */ @container mrpage (max-width:860px){ #mrBody.mr2 .mr2-itbl{grid-template-columns:minmax(var(--mr-c-rel),max-content) max-content minmax(0,1fr) var(--mr-c-dob) var(--mr-c-age) 44px} #mrBody.mr2 .mr2-ir{grid-template-areas:"rel nm nm dob age ." "g s pc pc pc x";height:120px;row-gap:var(--sp-2)} #mrBody.mr2 .mr2-ir.hd{grid-template-areas:"rel nm nm dob age .";height:auto} #mrBody.mr2 .mr2-ir.hd>.g,#mrBody.mr2 .mr2-ir.hd>.s,#mrBody.mr2 .mr2-ir.hd>.pc,#mrBody.mr2 .mr2-ir.hd>.x{display:none} #mrBody.mr2 .mr2-ir.cand{height:64px} #mrBody.mr2 .mr2-ir .pc .pfx{display:inline} } /* 手機（內容區 <600）：表頭收埋、每人一張堆疊（照一行一人，唔變卡） */ @container mrpage (max-width:599px){ #mrBody.mr2 .mr2-itbl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #mrBody.mr2 .mr2-ir{grid-template-areas:"rel age" "nm nm" "dob dob" "g s" "pc x";height:auto;padding:var(--sp-2) 0;row-gap:var(--sp-2)} #mrBody.mr2 .mr2-ir.hd{display:none} #mrBody.mr2 .mr2-ihd{flex-wrap:wrap;padding:var(--sp-2) var(--sp-3)} #mrBody.mr2 .mr2-ihd .mr2-srch{flex-basis:100%;order:3} #mrBody.mr2 .mr2-cdrop .it{grid-template-columns:minmax(0,1fr) auto 18px} #mrBody.mr2 .mr2-cdrop .it .n{display:none} } #mrBody.mr2 .mr2-gset{display:flex;align-items:center;gap:var(--sp-3h);flex-wrap:wrap;padding:var(--sp-2h) var(--sp-3h);border-bottom:1px solid var(--line);background:var(--card2);border-radius:var(--r-md) var(--r-md) 0 0} #mrBody.mr2 .mr2-gset .g{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} #mrBody.mr2 .mr2-gset .g>b{font-size:var(--fs-sm);color:var(--ink2)} #mrBody.mr2 .mr2-gset .vr{width:1px;height:28px;background:var(--line)} #mrBody.mr2 .mr2-gset .mr-in{width:96px} #mrBody.mr2 .mr-sug{display:inline-flex;flex-direction:row;gap:var(--sp-1h);margin:0} #mrBody.mr2 .mr2-ref,body[data-page="med-reserve"] #mrBody.mr2 .mr-sug button.mr2-ref{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:44px;height:auto;border:1px dashed var(--brand-gold-deep);background:var(--card);border-radius:var(--r-pill);padding:0 var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--brand-gold-deep);cursor:pointer;white-space:nowrap} #mrBody.mr2 .mr2-ref.on,body[data-page="med-reserve"] #mrBody.mr2 .mr-sug button.mr2-ref.on{border-style:solid;background:var(--accent-soft);color:var(--accent-ink)} #mrBody.mr2 .mr2-ref b{font-family:var(--mono);font-weight:500} #mrBody.mr2 .mr2-fxbtn{display:inline-flex;align-items:center;gap:var(--sp-1h);min-height:44px;border:0;background:transparent;cursor:pointer;font-size:var(--fs-md);color:var(--ink);padding:0 var(--sp-1);font-family:var(--sans)} #mrBody.mr2 .mr2-fxbtn small{font-size:var(--fs-xs);color:var(--muted)} #mrBody.mr2 .mr2-fxbtn .mr2-i{width:16px;height:16px;color:var(--muted)} #mrBody.mr2 .mr2-tblwrap{width:100%} #mrBody.mr2 table.mr2-ptbl{table-layout:fixed;width:100%;border-collapse:collapse} #mrBody.mr2 .mr2-ptbl col.c-ck{width:46px}#mrBody.mr2 .mr2-ptbl col.c-who{width:12%}#mrBody.mr2 .mr2-ptbl col.c-plan{width:29%}#mrBody.mr2 .mr2-ptbl col.c-pt{width:22%} #mrBody.mr2 .mr2-ptbl col.c-prem{width:15%}#mrBody.mr2 .mr2-ptbl col.c-end{width:9%}#mrBody.mr2 .mr2-ptbl col.c-m{width:8%}#mrBody.mr2 .mr2-ptbl col.c-go{width:52px} /* 10-24 Q6 A：醫保表按受保人分組（剷受保人欄同「對應」欄）—— 組頭一行、冇醫保＝「未有醫保」、組尾「加入醫保」 */ #mrBody.mr2 .mr2-ptbl.grouped col.c-plan{width:38%}#mrBody.mr2 .mr2-ptbl.grouped col.c-pt{width:28%}#mrBody.mr2 .mr2-ptbl.grouped col.c-prem{width:19%}#mrBody.mr2 .mr2-ptbl.grouped col.c-end{width:15%} #mrBody.mr2 .mr2-ptbl tr.gh td{height:auto;padding:var(--sp-3h) var(--sp-2h) var(--sp-1);font-size:var(--fs-sm);font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line2);background:var(--card)} #mrBody.mr2 .mr2-ptbl tr.gh.sep td{border-top:1px solid var(--line)} #mrBody.mr2 .mr2-ptbl tr.gnone td{height:52px;padding:var(--sp-1h) var(--sp-2h) var(--sp-1h) 54px;color:var(--faint);font-size:var(--fs-md)} #mrBody.mr2 .mr2-ptbl tr.gf td{border-bottom:0;padding:var(--sp-1h) var(--sp-2h) var(--sp-2h)} #mrBody.mr2 .mr2-ptbl .nm small .pill+.pill{margin-left:var(--sp-1)} #mrBody.mr2 .mr2-ptbl thead th{position:sticky;top:calc(var(--topbar-h) + var(--mr2-stick,68px));z-index:5;background:var(--card2);font-size:var(--fs-xs);font-weight:700;color:var(--ink2);padding:var(--sp-2) var(--sp-2);text-align:left;box-shadow:inset 0 -1px 0 var(--line);white-space:normal} #mrBody.mr2 .mr2-ptbl thead th.num{text-align:right} #mrBody.mr2 .mr2-ptbl td{height:64px;padding:var(--sp-1h) var(--sp-2);border-bottom:1px solid var(--line2);font-size:var(--fs-md);vertical-align:middle;overflow-wrap:anywhere;overflow:hidden;white-space:normal} #mrBody.mr2 .mr2-ptbl tr.link{cursor:pointer} #mrBody.mr2 .mr2-ptbl tr.link:hover td{background:var(--card2)} #mrBody.mr2 .mr2-ptbl td.chk{padding:0;text-align:center} #mrBody.mr2 .mr2-ckl{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer} #mrBody.mr2 .mr2-ck{width:22px;height:22px;accent-color:var(--primary);cursor:pointer;margin:0} #mrBody.mr2 .mr2-ck:disabled{cursor:not-allowed} #mrBody.mr2 .mr2-ptbl td.who small,#mrBody.mr2 .mr2-ptbl .pt small,#mrBody.mr2 .mr2-ptbl .nm small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:500;margin-top:2px} #mrBody.mr2 .mr2-ptbl .pl{display:flex;align-items:center;gap:var(--sp-2h);min-width:0} #mrBody.mr2 .mr2-ptbl .pl .nm{font-weight:700;line-height:1.3;min-width:0} #mrBody.mr2 .mr2-ptbl .pt{line-height:1.35} #mrBody.mr2 .mr2-ptbl td.num{font-family:var(--mono);text-align:right;white-space:nowrap} #mrBody.mr2 .mr2-ptbl td.num small{display:block;font-family:var(--sans);font-size:var(--fs-xs);color:var(--muted);white-space:normal} #mrBody.mr2 .mr2-ptbl td .u{font-family:var(--sans);font-size:var(--fs-sm);color:var(--muted)} #mrBody.mr2 .mr2-ptbl .dim{color:var(--muted)} #mrBody.mr2 .mr2-ptbl tr.off td{opacity:.55} #mrBody.mr2 .mr2-ptbl tr.cand{cursor:pointer} #mrBody.mr2 .mr2-ptbl tr.cand td{background:var(--card2)} #mrBody.mr2 .mr2-ptbl tr.miss td{background:var(--warn-soft)} #mrBody.mr2 .mr2-ptbl .misstxt{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--warn);margin-top:2px} #mrBody.mr2 .mr2-ptbl td.go{text-align:right;padding:0 var(--sp-1h) 0 0} /* 10-16「×」移除（每行都有；得一張都刪得）：44px 撳位，hover 先轉紅 */ #mrBody.mr2 .mr2-rm{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0} #mrBody.mr2 .mr2-rm:hover{color:var(--bad);border-color:var(--bad)} #mrBody.mr2 .mr2-rm .mr2-i{width:16px;height:16px} #mrBody.mr2 .mr2-ptbl tr.addr td{height:auto;padding:0;background:var(--card);border-bottom:0} #mrBody.mr2 .mr2-ptbl .pill{font-size:var(--fs-xs)} .mr2-logo{width:28px;height:28px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line2);object-fit:contain;padding:2px;flex:none;display:inline-flex;align-items:center;justify-content:center} .mr2-logo.txt{width:auto;min-width:28px;padding:0 var(--sp-1);font-size:var(--fs-xs);font-weight:700;color:var(--ink2);background:var(--bg2);white-space:nowrap;overflow:hidden} #mrBody.mr2 .mr2-nextrow{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap} #mrBody.mr2 .mr2-nextrow .hint{flex:1;min-width:0;font-size:var(--fs-md);color:var(--muted)} #mrBody.mr2 .mr2-next{display:inline-flex;align-items:center;gap:var(--sp-2h);min-height:56px;min-width:200px;justify-content:center;background:var(--primary);color:var(--primary-ink);border:0;border-radius:var(--r-md);font-size:var(--fs-lg);font-weight:700;cursor:pointer;padding:0 var(--sp-5) 0 var(--sp-6);margin-left:auto;font-family:var(--sans)} #mrBody.mr2 .mr2-next:hover{background:var(--brand-deeper)} #mrBody.mr2 .mr2-next .mr2-i{width:22px;height:22px;stroke-width:2.4} #mrBody.mr2 .mr2-next.dim{background:var(--line);color:var(--muted)} .mr2-prev{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:48px;border:0;background:transparent;color:var(--link);font-weight:700;font-size:var(--fs-md);cursor:pointer;padding:0 var(--sp-2) 0 0;font-family:var(--sans)} /* ── 第②步 ── */ #mrBody.mr2 .mr2-headline{font-size:var(--fs-2xl);line-height:1.5;font-weight:700;margin:2px 0 var(--sp-1);color:var(--ink)} #mrBody.mr2 .mr2-headline em{font-style:normal;font-family:var(--mono);font-weight:500;color:var(--bad)} #mrBody.mr2 .mr2-headline .x{color:var(--bad);font-size:var(--fs-3xl);font-family:var(--mono);font-weight:500} /* 10-16 第②步四格：今日／65／85 每年＋合共（一行等闊同高；窄位兩格一行） */ #mrBody.mr2 .mr2-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:var(--sp-3) 0} #mrBody.mr2 .mr2-kpis>div{display:grid;gap:2px;padding:var(--sp-2h) var(--sp-3h);border-left:1px solid var(--line2);min-width:0} #mrBody.mr2 .mr2-kpis>div:first-child{border-left:0} #mrBody.mr2 .mr2-kpis .l,#mrBody.mr2 .mr2-kpis .s{font-size:var(--fs-sm);color:var(--muted)} #mrBody.mr2 .mr2-kpis .v{font-family:var(--mono);font-size:var(--fs-xl);font-variant-numeric:tabular-nums;line-height:1.35;overflow-wrap:anywhere} #mrBody.mr2 .mr2-kpis .tot{background:var(--card2)} @container mrpage (max-width:620px){#mrBody.mr2 .mr2-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}#mrBody.mr2 .mr2-kpis>div:nth-child(odd){border-left:0}#mrBody.mr2 .mr2-kpis>div:nth-child(n+3){border-top:1px solid var(--line2)}} #mrBody.mr2 .mr2-ovnote{font-size:var(--fs-sm);color:var(--ink2);margin:0 0 var(--sp-1);line-height:1.5} #mrBody.mr2 .mr2-ptbl .nm small.hint{color:var(--warn);font-weight:700} #mrBody.mr2 .mr2-chd{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2h);flex-wrap:wrap} #mrBody.mr2 .mr2-chd .sp{flex:1} #mrBody.mr2 .mr2-chd .ttl{font-size:var(--fs-lg)} #mrBody.mr2 .mr2-chd .mr-seg{width:auto} #mrBody.mr2 .mr2-lgd{display:flex;align-items:center;gap:var(--sp-1h);flex-wrap:wrap} #mrBody.mr2 .mr2-lgd button{display:inline-flex;align-items:center;gap:var(--sp-1h);min-height:44px;border:1px solid transparent;background:transparent;border-radius:var(--r-pill);padding:0 var(--sp-2h);font-size:var(--fs-md);color:var(--ink2);cursor:pointer;font-weight:600;font-family:var(--sans)} #mrBody.mr2 .mr2-lgd button:hover{border-color:var(--line)} #mrBody.mr2 .mr2-lgd button.on{background:var(--accent-soft);border-color:var(--brand-gold-deep);color:var(--ink)} #mrBody.mr2 .mr2-lgd i,#mrBody.mr2 .mr2-lgd2 i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none} #mrBody.mr2 .mr2-lgd i.dash{height:0;width:18px;border-top:2px dashed var(--ink2);border-radius:0} #mrBody.mr2 .mr2-lgd .nolink{display:inline-flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-md);color:var(--ink2);padding:0 var(--sp-2)} #mrBody.mr2 .mr2-chart{position:relative;margin-top:var(--sp-1h)} #mrBody.mr2 .mr2-chart svg{display:block;max-width:100%;overflow:visible} #mrBody.mr2 .mr2-chart .hit{cursor:crosshair} #mrBody.mr2 .mr2-tick{font-family:var(--mono);font-size:var(--fs-xs);fill:var(--muted)} #mrBody.mr2 .mr2-mk{fill:var(--ink);font-family:var(--mono);font-size:var(--fs-xs);font-weight:700} #mrBody.mr2 .mr2-note{fill:var(--ink);font-size:var(--fs-xs);font-weight:700} #mrBody.mr2 .mr2-ctip{display:none;position:absolute;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:var(--sp-2h) var(--sp-3);font-size:var(--fs-sm);pointer-events:none;z-index:6;min-width:210px} #mrBody.mr2 .mr2-ctip .d{font-weight:700;font-size:var(--fs-md);margin-bottom:var(--sp-1h)} #mrBody.mr2 .mr2-ctip .d small{font-weight:500;color:var(--muted);font-size:var(--fs-xs);margin-left:var(--sp-1h)} #mrBody.mr2 .mr2-ctip .l{display:flex;align-items:center;gap:var(--sp-2);line-height:1.75} #mrBody.mr2 .mr2-ctip .l i{width:10px;height:10px;border-radius:2px;flex:none} #mrBody.mr2 .mr2-ctip .l i.dash{height:0;width:14px;border-top:2px dashed var(--ink2);border-radius:0} #mrBody.mr2 .mr2-ctip .l span{flex:1;color:var(--ink2)} #mrBody.mr2 .mr2-ctip .l b{font-family:var(--mono);font-weight:500;margin-left:var(--sp-3)} #mrBody.mr2 .mr2-ctip .l.t{border-top:1px solid var(--line2);margin-top:var(--sp-1);padding-top:var(--sp-1)} #mrBody.mr2 .mr2-ctip .l.t span,#mrBody.mr2 .mr2-ctip .l.t b{color:var(--ink);font-weight:700} #mrBody.mr2 .mr2-pills{display:flex;gap:var(--sp-1h);flex-wrap:wrap;margin-top:var(--sp-2h)} #mrBody.mr2 .mr2-pills .pill{font-size:var(--fs-sm);font-weight:500;white-space:normal} #mrBody.mr2 .mr2-fn{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-2h) 0 0;line-height:1.6} /* ── 第③步 ── */ /* 10-14 用戶：「供款嘅排版完全唔美觀，要絕對整齊」→ 改成兩欄表格：左欄標題（同一條起點）、右欄控制（同一條起點）； 每行控制一律 44px 高（掣組、輸入格、用最低）；年期掣同「自訂」格同一行，唔再上下疊令嗰格高過人 */ #mrBody.mr2 .mr2-ctrl{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:var(--sp-4);row-gap:var(--sp-2h);align-items:center;padding:var(--sp-3) var(--sp-4)} #mrBody.mr2 .mr2-ctrl .grp{display:contents} #mrBody.mr2 .mr2-ctrl .grp>.lbl{font-size:var(--fs-sm);color:var(--muted);font-weight:700;white-space:nowrap;line-height:44px} #mrBody.mr2 .mr2-ctrl .grp>.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-width:0} #mrBody.mr2 .mr2-ctrl .mr-seg{width:auto;max-width:100%;height:44px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} #mrBody.mr2 .mr2-ctrl .mr-seg::-webkit-scrollbar{display:none} #mrBody.mr2 .mr2-ctrl .mr-seg button{padding:0 var(--sp-3);flex:none;font-size:var(--fs-sm)} #mrBody.mr2 .mr2-ctrl .brand{display:inline-flex;align-items:center;height:44px;font-weight:700;font-size:var(--fs-md)} #mrBody.mr2 .mr2-ctrl select.mr-sel{min-width:200px;height:44px} #mrBody.mr2 .mr2-ctrl .mr-in{height:44px;min-width:84px;width:160px;flex:none} #mrBody.mr2 .mr2-ctrl .mr-in .px{font-size:var(--fs-sm);font-weight:700;color:var(--ink2)} #mrBody.mr2 .mr2-ctrl .mr2-tcust{width:112px} #mrBody.mr2 .mr2-ctrl .amt{display:flex;align-items:center;gap:var(--sp-2)} #mrBody.mr2 .mr2-ctrl .amt .mr-in{width:220px} #mrBody.mr2 .mr2-ctrl .mr2-minchip{min-height:44px;height:44px} @media (max-width:640px){ #mrBody.mr2 .mr2-ctrl{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-1)} #mrBody.mr2 .mr2-ctrl .grp>.lbl{line-height:1.4;margin-top:var(--sp-2)} #mrBody.mr2 .mr2-ctrl .amt{width:100%} #mrBody.mr2 .mr2-ctrl .amt .mr-in{flex:1;width:auto} } #mrBody.mr2 .mr2-minchip{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid var(--brand-green-deep);background:var(--card);color:var(--brand-green-deep);border-radius:var(--r-md);padding:0 var(--sp-3);font-size:var(--fs-md);font-weight:700;cursor:pointer;white-space:nowrap;font-family:var(--sans)} #mrBody.mr2 .mr2-minchip:hover{background:var(--ok-soft)} #mrBody.mr2 .mr2-minchip.on{background:var(--brand-green-deep);color:var(--primary-ink)} #mrBody.mr2 .mr2-minchip:disabled{opacity:.45;cursor:not-allowed} #mrBody.mr2 .mr2-ctrlnote{font-size:var(--fs-sm);color:var(--muted);margin:var(--sp-2) var(--sp-1) 0;line-height:1.6} #mrBody.mr2 .mr2-ctrlnote .mr-vendor{display:block;font-size:var(--fs-sm)} #mrBody.mr2 .mr2-cardh{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line2);flex-wrap:wrap} #mrBody.mr2 .mr2-cardh h2{margin:0;font-size:var(--fs-lg);flex:1;min-width:0} #mrBody.mr2 .mr2-cardh .sub{font-size:var(--fs-sm);color:var(--muted);font-weight:400;margin-left:var(--sp-2)} #mrBody.mr2 .mr2-advbtn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);padding:0 var(--sp-3h) 0 var(--sp-2h);font-size:var(--fs-md);font-weight:700;color:var(--ink2);cursor:pointer;font-family:var(--sans)} #mrBody.mr2 .mr2-advbtn:hover{border-color:var(--brand-green-deep);color:var(--brand-green-deep)} #mrBody.mr2 .mr2-advbtn:disabled{opacity:.45;cursor:not-allowed} #mrBody.mr2 .mr2-advbtn .ic{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:var(--fs-sm)} #mrBody.mr2 table.mr2-cmp{border-collapse:collapse;width:100%;table-layout:fixed} #mrBody.mr2 .mr2-cmp col.c0{width:24%} #mrBody.mr2 .mr2-cmp th,#mrBody.mr2 .mr2-cmp td{padding:var(--sp-2h) var(--sp-3h);border-bottom:1px solid var(--line2);text-align:left;vertical-align:middle;overflow-wrap:break-word} #mrBody.mr2 .mr2-cmp thead th{background:var(--card2);font-size:var(--fs-md);font-weight:700;color:var(--ink);height:60px;position:sticky;top:calc(var(--topbar-h) + var(--mr2-stick,68px));z-index:4;box-shadow:inset 0 -1px 0 var(--line)} #mrBody.mr2 .mr2-cmp thead th small{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--muted);margin-top:1px} #mrBody.mr2 .mr2-cmp thead th.hl{background:var(--accent-soft);background-color:color-mix(in srgb,var(--brand-gold) 18%,var(--card))} #mrBody.mr2 .mr2-cmp td.hl{background:var(--accent-soft)} #mrBody.mr2 .mr2-cmp tbody th{font-size:var(--fs-md);color:var(--ink2);font-weight:700;height:58px} #mrBody.mr2 .mr2-cmp td{font-size:var(--fs-md)} #mrBody.mr2 .mr2-cmp td .mono{font-size:var(--fs-lg)} #mrBody.mr2 .mr2-cmp td.big{font-size:var(--fs-lg);font-weight:700} #mrBody.mr2 .mr2-cmp .neg{color:var(--bad)} #mrBody.mr2 .mr2-cmp .pos{color:var(--ok)} #mrBody.mr2 .mr2-cmp tr:last-child th,#mrBody.mr2 .mr2-cmp tr:last-child td{border-bottom:0} #mrBody.mr2 .mr2-cmp .hrow{display:flex;align-items:center;gap:var(--sp-1h);flex-wrap:wrap} #mrBody.mr2 .mr2-cmp .rinp{width:88px;height:46px;flex:none} #mrBody.mr2 .mr2-cmp .rinp input{height:44px} #mrBody.mr2 .mr2-empty{padding:var(--sp-5) var(--sp-4);font-size:var(--fs-md);color:var(--muted);line-height:1.6} #mrBody.mr2 .mr2-cmpcard>.mr-note,#mrBody.mr2 .mr2-cmpcard .mr-ch{margin:var(--sp-3) var(--sp-4);font-size:var(--fs-md)} #mrBody.mr2 .mr2-cmpcard .mr-ch{padding:0} #mrBody.mr2 .mr2-lgd2{display:flex;flex-wrap:wrap;gap:var(--sp-1h) var(--sp-4);font-size:var(--fs-sm);color:var(--ink2);margin-top:var(--sp-2)} #mrBody.mr2 .mr2-lgd2 span{display:inline-flex;align-items:center;gap:var(--sp-1h)} #mrBody.mr2 .mr2-lgd2 b{font-weight:700;color:var(--ink);margin-right:2px} /* 10-16 第③步「由幾歲開始用儲備」＋「生活費」卡 */ #mrBody.mr2 .mr2-useb,#mrBody.mr2 .mr2-livb{padding:var(--sp-3) var(--sp-4)} #mrBody.mr2 .mr2-useb .ctl{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} #mrBody.mr2 .mr2-useb .mr-seg{width:auto;max-width:100%;flex-wrap:wrap} #mrBody.mr2 .mr2-useb .mr-seg button{padding:0 var(--sp-3h);font-size:var(--fs-sm)} #mrBody.mr2 .mr2-useb .mr-in{height:50px;width:112px} #mrBody.mr2 .mr2-useb .sml{margin:var(--sp-2) 0 0;font-size:var(--fs-sm)} #mrBody.mr2 .mr2-livf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-2)} #mrBody.mr2 .mr2-livf .mr-in{height:50px} #mrBody.mr2 .mr2-livf .mr-f>label{font-size:var(--fs-xs)} #mrBody.mr2 .mr2-livf .help{font-size:var(--fs-xs);line-height:1.45} #mrBody.mr2 .mr2-livf .help.warn{color:var(--warn)} @container mrpage (max-width:620px){#mrBody.mr2 .mr2-livf{grid-template-columns:minmax(0,1fr)}} #mrBody.mr2 .mr2-cmpfn{margin:0;padding:var(--sp-2h) var(--sp-4) var(--sp-3);border-top:1px solid var(--line2)} #mrBody.mr2 .mr2-ctrlnote .mr2-minwhy{color:var(--ok);font-weight:700} /* ── 第④步 ── */ #mrBody.mr2 .mr2-sumcard{background:var(--primary);color:var(--primary-ink);border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-6);position:relative;overflow:hidden;margin-top:var(--sp-3)} #mrBody.mr2 .mr2-sumcard .eb{font-size:var(--fs-sm);color:rgba(255,255,255,.66);font-weight:700} #mrBody.mr2 .mr2-sumcard h2{font-size:var(--fs-2xl);line-height:1.55;margin:var(--sp-1h) 0 0;font-weight:700;color:var(--primary-ink)} #mrBody.mr2 .mr2-sumcard h2 em{font-style:normal;color:var(--brand-gold);font-family:var(--mono);font-weight:500} #mrBody.mr2 .mr2-sumcard .ng{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:rgba(255,255,255,.66);line-height:1.55} /* 10-16 你俾幾多，換返幾多：兩條同一把尺嘅橫棒＋三格；時間軸 —— 第④步同客戶版共用（客戶版喺 .mr2-cv 入面） */ #mrBody.mr2 .mr2-cb{padding:var(--sp-3) var(--sp-4) var(--sp-3h)} .mr2-gg{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--sp-2h) var(--sp-3);align-items:center} .mr2-gg .l{font-size:var(--fs-sm);color:var(--ink2)} .mr2-gg .l b{display:block;font-family:var(--mono);font-size:var(--fs-lg);color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums} .mr2-gg .bar{display:flex;height:34px;border-radius:var(--r-sm);overflow:hidden;background:var(--card2)} .mr2-gg .bar>div{height:100%} .mr2-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:var(--sp-3h)} .mr2-parts>div{display:grid;gap:2px;padding:var(--sp-2h) var(--sp-3h);border-left:1px solid var(--line2);min-width:0} .mr2-parts>div:first-child{border-left:0} .mr2-parts.two{grid-template-columns:repeat(2,minmax(0,1fr))} .mr2-parts .l{display:flex;align-items:center;gap:var(--sp-1h);font-size:var(--fs-sm);color:var(--ink2)} .mr2-parts .l i{width:10px;height:10px;border-radius:2px;flex:none} .mr2-parts .v{font-family:var(--mono);font-size:var(--fs-xl);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} .mr2-parts .s{font-size:var(--fs-xs);color:var(--muted);line-height:1.45} .mr2-tl .track{display:flex;height:30px;border-radius:var(--r-sm);overflow:hidden} .mr2-tl .track>div{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden} .mr2-tl .track span{font-size:var(--fs-xs);font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 var(--sp-1)} .mr2-tl .ages{position:relative;height:20px;margin-top:var(--sp-1);font-family:var(--mono);font-size:var(--fs-xs);color:var(--muted)} .mr2-tl .ages span{position:absolute;transform:translateX(-50%);white-space:nowrap} .mr2-tl .ages span:first-child{transform:none} .mr2-tl .ages span.end{transform:translateX(-100%)} .mr2-tlnote{margin:var(--sp-3) 0 0;font-size:var(--fs-md);color:var(--ink2);background:var(--card2);border-radius:var(--r-md);padding:var(--sp-2h) var(--sp-3);line-height:1.6} .mr2-tlnote b{font-family:var(--mono);font-weight:500;color:var(--ink)} @media (max-width:640px){.mr2-parts{grid-template-columns:minmax(0,1fr)}.mr2-parts>div{border-left:0;border-top:1px solid var(--line2)}.mr2-parts>div:first-child{border-top:0}.mr2-gg{grid-template-columns:88px minmax(0,1fr)}} #mrBody.mr2 .mr2-secttl{font-size:var(--fs-md);font-weight:700;color:var(--ink2);margin:var(--sp-4) 0 var(--sp-2)} #mrBody.mr2 .mr2-adj{display:grid;gap:var(--sp-2)} #mrBody.mr2 .mr2-adj .a{display:flex;align-items:center;gap:var(--sp-3h);padding:var(--sp-3) var(--sp-3h);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)} #mrBody.mr2 .mr2-adj .a .tx{flex:1;min-width:0} #mrBody.mr2 .mr2-adj .a b{display:block;font-size:var(--fs-md)} #mrBody.mr2 .mr2-adj .a span{font-size:var(--fs-md);color:var(--ink2)} #mrBody.mr2 .mr2-acts{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3h);flex-wrap:wrap} #mrBody.mr2 .mr2-acts .mr2-btn{min-height:56px;font-size:var(--fs-lg);padding:0 var(--sp-5)} #mrBody.mr2 .mr2-acts .mr2-btn.primary{min-width:220px} #mrBody.mr2 details.mr2-legal{margin-top:var(--sp-4);border-top:1px solid var(--line)} #mrBody.mr2 details.mr2-legal summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:48px;cursor:pointer;font-weight:700;color:var(--ink2);font-size:var(--fs-md);padding:0 var(--sp-1)} #mrBody.mr2 details.mr2-legal summary::-webkit-details-marker{display:none} #mrBody.mr2 details.mr2-legal[open] summary .mr2-i{transform:rotate(180deg)} #mrBody.mr2 details.mr2-legal>div{padding:0 var(--sp-1) var(--sp-2);display:grid;gap:var(--sp-2)} #mrBody.mr2 details.mr2-legal .mr-disc,#mrBody.mr2 details.mr2-legal .mr-legal{font-size:var(--fs-xs)} #mrBody.mr2 .mr2-lock{display:grid;gap:var(--sp-2);justify-items:start} #mrBody.mr2 .mr2-lock b{font-size:var(--fs-lg)} #mrBody.mr2 .mr2-lock p{margin:0;font-size:var(--fs-md);color:var(--ink2)} /* 10-04 第③步「每張醫保點安排」（提取年齡＋改級別由第①步搬嚟）＋逐位受保人代付到幾歲 */ #mrBody.mr2 .mr2-arr .mr2-gset{border-radius:0} #mrBody.mr2 .mr2-arr .mr2-gset .sml{max-width:320px} #mrBody.mr2 table.mr2-atbl{table-layout:fixed;width:100%;border-collapse:collapse} #mrBody.mr2 .mr2-atbl col.c-who{width:18%}#mrBody.mr2 .mr2-atbl col.c-plan{width:28%}#mrBody.mr2 .mr2-atbl col.c-draw{width:20%}#mrBody.mr2 .mr2-atbl col.c-sw{width:34%} #mrBody.mr2 .mr2-atbl thead th{background:var(--card2);font-size:var(--fs-xs);font-weight:700;color:var(--ink2);padding:var(--sp-2);text-align:left;border-bottom:1px solid var(--line)} #mrBody.mr2 .mr2-atbl td{padding:var(--sp-2h) var(--sp-2);border-bottom:1px solid var(--line2);font-size:var(--fs-md);vertical-align:top;overflow-wrap:anywhere} #mrBody.mr2 .mr2-atbl td small{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1);line-height:1.45} #mrBody.mr2 .mr2-atbl .nm{font-weight:700;line-height:1.3} #mrBody.mr2 .mr2-atbl .dim{color:var(--muted);font-size:var(--fs-sm)} #mrBody.mr2 .mr2-atbl td small.bad{color:var(--bad);font-weight:700} #mrBody.mr2 .mr-in.sm{width:96px;display:inline-flex} #mrBody.mr2 .mr2-swon{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;font-weight:700;cursor:pointer} #mrBody.mr2 .mr2-swon input{width:20px;height:20px;accent-color:var(--primary)} /* 10-17 iPad 11 全螢幕：「由幾歲起 [ ] 改做 [ ]」窄欄會將下拉擠落下一行、「改做」吊喺行尾 → 改兩行對齊（標籤一欄、格一欄） */ #mrBody.mr2 .mr2-swrow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} #mrBody.mr2 .mr2-swrow>span{color:var(--ink2);white-space:nowrap} #mrBody.mr2 .mr2-swrow .mr-in.sm{height:44px} #mrBody.mr2 .mr2-swrow .mr-sel{width:220px;min-width:0;max-width:100%;height:44px} #mrBody.mr2 .mr2-arreff{margin:var(--sp-3) var(--sp-4) 0;font-size:var(--fs-md);color:var(--ink2);line-height:1.6} #mrBody.mr2 .mr2-arreff em{font-style:normal;font-weight:700;color:var(--ink)} #mrBody.mr2 .mr2-arr>.mr2-fn{margin:var(--sp-2) var(--sp-4) var(--sp-3h)} #mrBody.mr2 .mr2-axl{font-weight:700} /* 10-05 第②步年齡分段表（每 10 年／逐年 × 全家／逐人）：表自己一個捲動框（逐年有幾十行），表頭／表尾 sticky；窄位年齡欄黐左 */ #mrBody.mr2 .mr2-btctl{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-top:var(--sp-3)} #mrBody.mr2 .mr2-btctl .mr-seg{display:inline-flex;width:auto;flex:0 0 auto} #mrBody.mr2 .mr2-btctl .mr-seg button{flex:0 0 auto;padding-left:var(--sp-4);padding-right:var(--sp-4)} #mrBody.mr2 .mr2-bwrap{margin-top:var(--sp-2);max-height:460px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)} #mrBody.mr2 table.mr2-btbl{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums} #mrBody.mr2 .mr2-btbl th,#mrBody.mr2 .mr2-btbl td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line2);text-align:left;vertical-align:top;font-size:var(--fs-md)} #mrBody.mr2 .mr2-btbl td.num,#mrBody.mr2 .mr2-btbl th.num{text-align:right;font-family:var(--mono);white-space:nowrap} #mrBody.mr2 .mr2-btbl td.dim{color:var(--muted)} #mrBody.mr2 .mr2-btbl thead th{position:sticky;top:0;z-index:2;background:var(--card2);font-size:var(--fs-xs);font-weight:700;color:var(--ink2);font-family:var(--sans)} #mrBody.mr2 .mr2-btbl thead tr.h2 th{top:33px} #mrBody.mr2 .mr2-btbl thead th.grp{text-align:center;border-bottom:1px solid var(--line)} #mrBody.mr2 .mr2-btbl tbody th{font-weight:700;white-space:nowrap} #mrBody.mr2 .mr2-btbl tbody th small{display:flex;flex-direction:column;font-size:var(--fs-xs);color:var(--muted);font-weight:500;margin-top:2px} #mrBody.mr2 .mr2-btbl tfoot th,#mrBody.mr2 .mr2-btbl tfoot td{position:sticky;bottom:0;background:var(--card2);font-weight:700;border-top:1px solid var(--line);border-bottom:0} @container mrpage (max-width:759px){ #mrBody.mr2 table.mr2-btbl:not(.yr){min-width:600px} #mrBody.mr2 .mr2-btbl tbody th,#mrBody.mr2 .mr2-btbl tfoot th,#mrBody.mr2 .mr2-btbl thead tr:first-child th:first-child{position:sticky;left:0;z-index:1;background:var(--card)} #mrBody.mr2 .mr2-btbl thead tr:first-child th:first-child{z-index:3;background:var(--card2)} #mrBody.mr2 .mr2-btbl tfoot th{z-index:3;background:var(--card2)} } #mrBody.mr2 .mr2-swnote{margin:var(--sp-2h) 0 0;font-size:var(--fs-sm);color:var(--ink2);line-height:1.6} .mr2-cv .mr2-swnote{margin:var(--sp-1) 0 var(--sp-2);font-size:var(--fs-sm);line-height:1.6} #mrBody.mr2 .mr2-pcov,.mr2-cv .mr2-pcov{margin-top:var(--sp-1h);font-size:var(--fs-sm);font-weight:500;line-height:1.5;color:var(--ink2);display:grid;gap:2px} #mrBody.mr2 .mr2-pcovs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-2)} #mrBody.mr2 .mr2-pcovs .c{display:grid;gap:var(--sp-1);padding:var(--sp-3) var(--sp-3h);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)} #mrBody.mr2 .mr2-pcovs .c.warn{border-color:var(--warn);background:var(--warn-soft)} #mrBody.mr2 .mr2-pcovs .l{font-size:var(--fs-md);font-weight:700} #mrBody.mr2 .mr2-pcovs .v{font-family:var(--mono);font-size:var(--fs-2xl)} #mrBody.mr2 .mr2-pcovs .v small{font-family:var(--sans);font-size:var(--fs-md);margin-left:2px} #mrBody.mr2 .mr2-pcovs .s{font-size:var(--fs-sm);color:var(--ink2);line-height:1.5} @container mrpage (max-width:759px){ /* 窄位唔收欄（table-layout:fixed 收 td 會令 colgroup 錯位）：收窄計劃欄＋摺行 */ #mrBody.mr2 .mr2-atbl col.c-who{width:20%}#mrBody.mr2 .mr2-atbl col.c-plan{width:22%}#mrBody.mr2 .mr2-atbl col.c-draw{width:24%}#mrBody.mr2 .mr2-atbl col.c-sw{width:34%} #mrBody.mr2 .mr2-atbl td,#mrBody.mr2 .mr2-atbl th{padding-left:var(--sp-1);padding-right:var(--sp-1)} #mrBody.mr2 .mr-in.sm{width:80px} } /* ── 彈出卡 ── */ .mr2-pop{position:absolute;z-index:80;width:min(320px,calc(100vw - 24px));background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:var(--sp-3) var(--sp-3h);font-size:var(--fs-md);color:var(--ink);line-height:1.6} .mr2-pop h4{margin:0 0 var(--sp-1);font-size:var(--fs-md)} .mr2-pop p{margin:0 0 var(--sp-2)} .mr2-pop .mr-in{height:48px} /* ── 抽屜（右邊滑出；醫保編輯／顧問核對）── */ .mr2-dr{position:fixed;inset:0;z-index:70;pointer-events:none} .mr2-dr .scrim{position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .2s} .mr2-dr .panel{position:absolute;right:0;top:0;bottom:0;width:min(560px,100vw);background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .24s ease} .mr2-dr .panel.advanced{width:min(640px,100vw)} .mr2-dr.on{pointer-events:auto} .mr2-dr.on .scrim{opacity:.32} .mr2-dr.on .panel{transform:none} .mr2-dr .dr-hd{padding:var(--sp-3h) var(--sp-4) var(--sp-2h);border-bottom:1px solid var(--line);display:grid;gap:var(--sp-2)} .mr2-dr .dr-hd .r1{display:flex;align-items:center;gap:var(--sp-2h)} .mr2-dr .dr-hd h3{margin:0;font-size:var(--fs-lg);flex:1;color:var(--brand-green-deep)} .mr2-dr .dr-hd .sub{font-size:var(--fs-sm);color:var(--muted)} .mr2-dr .dr-hd .mr-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .mr2-dr .mr2-x{width:44px;height:44px;border-radius:50%;border:0;background:var(--bg2);color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .mr2-dr .dr-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch} .mr2-dr .dr-foot{display:flex;align-items:center;gap:var(--sp-2h);padding:var(--sp-2h) var(--sp-4);border-top:1px solid var(--line)} .mr2-dr .dr-foot .sp{flex:1} .mr2-dr .dr-foot .mr2-btn.primary{min-width:140px;min-height:48px} .mr2-dr .dr-foot .mr2-btn.ghost{color:var(--bad)} .mr2-dr .mr2-lv{border-bottom:1px solid var(--line2)} .mr2-dr .mr2-lv .lh{display:flex;align-items:center;gap:var(--sp-2h);min-height:52px;padding:var(--sp-1) var(--sp-4);width:100%;border:0;background:var(--card);text-align:left;cursor:pointer;font-family:var(--sans)} .mr2-dr .mr2-lv .lh .k{font-size:var(--fs-sm);color:var(--muted);font-weight:700;width:76px;flex:none} .mr2-dr .mr2-lv .lh .v{flex:1;font-size:var(--fs-md);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:var(--sp-2);min-width:0} .mr2-dr .mr2-lv .lh .v.ph,.mr2-dr .mr2-lv .lh .v .ph{color:var(--warn);font-weight:700} .mr2-dr .mr2-lv .lh .chg{font-size:var(--fs-sm);color:var(--link);font-weight:700;flex:none} .mr2-dr .mr2-lv.auto .lh,.mr2-dr .mr2-lv.dis .lh{cursor:default;background:var(--card2)} .mr2-dr .mr2-lv.auto .lh .v{font-weight:500;color:var(--ink2)} .mr2-dr .mr2-lv.dis .lh .v{font-weight:500;color:var(--faint)} .mr2-dr .mr2-lv .lh .tag{font-size:var(--fs-xs);font-weight:700;color:var(--muted);background:var(--neutral-soft);border-radius:var(--r-pill);padding:0 var(--sp-2);flex:none} .mr2-dr .mr2-lv .ops{padding:0 var(--sp-2h) var(--sp-2h) 92px;display:grid;gap:var(--sp-1);max-height:360px;overflow:auto} .mr2-dr .mr2-lv .opt{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--card);padding:var(--sp-1) var(--sp-2h);text-align:left;font-size:var(--fs-md);color:var(--ink);cursor:pointer;font-family:var(--sans)} .mr2-dr .mr2-lv .opt:hover{border-color:var(--brand-green-deep)} .mr2-dr .mr2-lv .opt.on{border-color:var(--brand-gold-deep);background:var(--accent-soft)} .mr2-dr .mr2-lv .opt .grow{flex:1;min-width:0} .mr2-dr .mr2-dsec{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line2);display:grid;gap:var(--sp-2h)} .mr2-dr .mr2-dsec h4{margin:0;font-size:var(--fs-md);color:var(--ink2)} .mr2-dr .mr2-dsec h4 .ml{font-size:var(--fs-xs);color:var(--brand-gold-deep);margin-left:var(--sp-1h)} .mr2-dr .mr2-dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2h)} .mr2-dr .mr2-dnote{padding:var(--sp-2h) var(--sp-4);font-size:var(--fs-sm);color:var(--ink2);background:var(--card2);border-bottom:1px solid var(--line2);line-height:1.6} .mr2-dr .mr-f>label,.mr2-dr .mr-f .help{font-size:var(--fs-xs);white-space:normal;line-height:1.45} .mr2-dr .mr-in{height:48px;padding:0 var(--sp-3)} .mr2-dr .mr-in input{height:46px;font-size:var(--fs-md)} .mr2-dr select.mr-sel{height:48px;font-size:var(--fs-md)} .mr2-dr .mr-seg button{min-height:44px;font-size:var(--fs-sm)} .mr2-dr .mr-note{font-size:var(--fs-sm)} .mr2-dr .mr-note button{min-height:44px;font-size:var(--fs-sm)} .mr2-dr .help.warn{font-size:var(--fs-xs);color:var(--warn)} .mr2-dr .mr2-tog{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2h);min-height:52px;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-1) var(--sp-3);background:var(--card);cursor:pointer;font-size:var(--fs-md);font-weight:600} .mr2-dr .mr2-tog input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .mr2-dr .mr2-tog small{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:500} .mr2-dr .mr2-tog i{width:38px;height:22px;border-radius:11px;background:var(--line);position:relative;flex:none;transition:background .15s} .mr2-dr .mr2-tog i::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s} .mr2-dr .mr2-tog.on i{background:var(--brand-green-deep)} .mr2-dr .mr2-tog.on i::after{left:18px} .mr2-dr .mr2-tog.na{opacity:.5;cursor:not-allowed} .mr2-dr .mr2-tog:focus-within{outline:2px solid var(--brand-green-deep)} .mr2-dr .mr2-pkrow{display:flex;gap:var(--sp-1h);flex-wrap:wrap;align-items:center;padding:var(--sp-2h) var(--sp-4)} .mr2-dr .mr2-pkrow .sp{flex:1} .mr2-dr .mr2-pkrow .mr-seg{width:auto} .mr2-dr .dr-body .mr-sec{padding:0 var(--sp-4) var(--sp-4)} .mr2-dr .dr-body .mr-sec>h3{font-size:var(--fs-md);margin:var(--sp-3) 0 0} .mr2-dr .dr-body .mr-tblwrap{max-height:none;overflow:visible;border:0} .mr2-dr table.mr-tbl{font-size:var(--fs-md)} .mr2-dr .mr-tbl thead th{font-size:var(--fs-xs);top:0;white-space:normal} .mr2-dr .mr-tbl tr>:first-child{position:sticky;left:0;z-index:1;background:var(--card)} .mr2-dr .mr-tbl thead tr>:first-child{z-index:2;background:var(--card2)} .mr2-dr .mr-basis .r{font-size:var(--fs-sm)} .mr2-dr .mr-basis .r .t{font-size:var(--fs-xs)} .mr2-dr .mr-disc{font-size:var(--fs-xs)} .mr2-dr .pill{font-size:var(--fs-xs)} /* ── 客戶版（全屏一頁，蓋住側欄）── */ .mr2-cv{position:fixed;inset:0;z-index:75;background:var(--bg2);overflow-y:auto;display:none} .mr2-cv.on{display:block} html.mr2-cv-open,html.mr2-cv-open body{overflow:hidden} .mr2-cv .mr2-cvbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--sp-3);background:var(--bg2);padding:var(--sp-2) var(--sp-5);border-bottom:1px solid var(--line)} .mr2-cv .mr2-cvbar .sp{flex:1} .mr2-cv .mr2-cvbar .tiny{font-size:var(--fs-sm);color:var(--muted)} .mr2-cv .mr2-paper{width:min(820px,calc(100vw - 32px));margin:var(--sp-5) auto var(--sp-7);background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--sp-6) var(--sp-7) var(--sp-5)} .mr2-cv .ph{display:flex;align-items:center;gap:var(--sp-3h);padding-bottom:var(--sp-4);border-bottom:2px solid var(--primary)} .mr2-cv .ph img{height:44px;width:auto;max-width:160px;border-radius:var(--r-md)} /* 唔用 object-fit：html2canvas 唔識，分享 PDF／圖片會壓扁 logo（10-05 h2c 事故） */ .mr2-cv .ph .t{flex:1} .mr2-cv .ph b{display:block;font-size:var(--fs-xl)} .mr2-cv .ph span{font-size:var(--fs-md);color:var(--muted)} .mr2-cv .mr2-cvbar .mr2-btn{min-height:44px} /* 10-16 客戶版三段：每段一句（數字 mono）＋一幅圖 */ .mr2-cv .mr2-paper section{padding:var(--sp-4) 0;border-bottom:1px solid var(--line2)} .mr2-cv .mr2-paper section h3{margin:0 0 var(--sp-1h);font-size:var(--fs-sm);color:var(--muted);font-weight:700;letter-spacing:.04em} .mr2-cv .mr2-paper .say{margin:0 0 var(--sp-3);font-size:var(--fs-lg);font-weight:700;line-height:1.6;color:var(--ink)} .mr2-cv .mr2-paper .say em{font-style:normal;font-family:var(--mono);font-weight:500;white-space:nowrap} .mr2-cv .mr2-cvsvg{display:block;width:100%;height:auto} /* 分享用嘅離屏複製（html2canvas 影呢份）：固定 794px 闊，唔受 iPad 直向／捲動影響；唔准蓋住畫面 */ .mr2-cv.mr2-cvshot{position:fixed;left:-99999px;right:auto;top:0;bottom:auto;width:794px;height:auto;overflow:visible;background:#fff;z-index:-1} .mr2-cv.mr2-cvshot .mr2-paper{width:794px;margin:0;box-shadow:none;border-radius:0} .mr2-cv .disc{margin-top:var(--sp-5);padding-top:var(--sp-3h);border-top:1px solid var(--line2);display:grid;gap:var(--sp-2)} .mr2-cv .disc .mr-disc,.mr2-cv .disc .mr-legal{font-size:var(--fs-xs)} .mr2-cv .sig{display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--muted)} /* ── 窄（內容區 <760：iPad 直向／手機）：醫保清單收細欄、控制列逐組一行、里程碑兩格一行 ── */ @container mrpage (max-width:759px){ #mrBody.mr2 .mr2-steps .seg button{flex-direction:column;gap:2px;font-size:var(--fs-sm);text-align:center} #mrBody.mr2 .mr2-steps .seg{flex-basis:100%}#mrBody.mr2 .mr2-dccy{margin-left:auto} /* 窄位唔收欄（table-layout:fixed 收 td 會令 colgroup 錯位），改收窄每欄＋摺行；logo 收埋慳位 */ #mrBody.mr2 .mr2-ptbl col.c-ck{width:44px}#mrBody.mr2 .mr2-ptbl col.c-who{width:13%}#mrBody.mr2 .mr2-ptbl col.c-plan{width:28%}#mrBody.mr2 .mr2-ptbl col.c-pt{width:22%}#mrBody.mr2 .mr2-ptbl col.c-prem{width:15%} #mrBody.mr2 .mr2-ptbl col.c-end{width:9%}#mrBody.mr2 .mr2-ptbl col.c-m{width:13%}#mrBody.mr2 .mr2-ptbl col.c-go{width:50px} #mrBody.mr2 .mr2-ptbl.grouped col.c-plan{width:36%}#mrBody.mr2 .mr2-ptbl.grouped col.c-pt{width:26%}#mrBody.mr2 .mr2-ptbl.grouped col.c-prem{width:22%}#mrBody.mr2 .mr2-ptbl.grouped col.c-end{width:16%} #mrBody.mr2 .mr2-ptbl td,#mrBody.mr2 .mr2-ptbl th{padding-left:var(--sp-1);padding-right:var(--sp-1)} #mrBody.mr2 .mr2-ptbl .pl .mr2-logo{display:none} #mrBody.mr2 .mr2-ptbl td.num{white-space:normal} #mrBody.mr2 .mr2-headline{font-size:var(--fs-xl)} #mrBody.mr2 .mr2-cmp col.c0{width:28%} #mrBody.mr2 .mr2-cmp th,#mrBody.mr2 .mr2-cmp td{padding:var(--sp-2)} #mrBody.mr2 .mr2-sumcard{padding:var(--sp-4)} #mrBody.mr2 .mr2-sumcard h2{font-size:var(--fs-xl)} #mrBody.mr2 .mr2-next{min-width:160px} } @media (max-width:640px){ .mr2-cv .mr2-paper{padding:var(--sp-4)} } /* 10-16 v4（規格桌面 醫療儲備_v4_寫code規格）：第③步「儲備要俾乜」清單（一行一筆、每行自己由幾歲到幾歲）＋趕唔切＋時間軸；第④步逐筆表 */ #mrBody.mr2 .mr2-rtbl col.c-who{width:17%}#mrBody.mr2 .mr2-rtbl col.c-what{width:39%}#mrBody.mr2 .mr2-rtbl col.c-rng{width:36%}#mrBody.mr2 .mr2-rtbl col.c-x{width:60px} #mrBody.mr2 .mr2-rtbl td.who{font-weight:700;overflow-wrap:anywhere} #mrBody.mr2 .mr2-rtbl td.who small{font-weight:400} #mrBody.mr2 .mr2-rtbl td.x{text-align:right;vertical-align:top} #mrBody.mr2 .mr2-rtbl .nm{font-weight:700} #mrBody.mr2 .mr2-rtbl tr.late td{background:var(--bad-soft)} #mrBody.mr2 .mr2-rtbl tr.off td{color:var(--muted)} #mrBody.mr2 .mr2-rtbl td small.warn{color:var(--warn);font-weight:700} #mrBody.mr2 .mr2-rng{display:flex;align-items:center;gap:var(--sp-1h);flex-wrap:wrap} #mrBody.mr2 .mr2-rng .ar{color:var(--faint)} #mrBody.mr2 .mr2-rng .mr-in.sm{width:88px;height:44px} #mrBody.mr2 .mr2-age.bad{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)} #mrBody.mr2 .mr2-kind{display:inline-block;font-size:var(--fs-xs);border-radius:999px;padding:1px 9px;margin-right:var(--sp-1h);font-weight:700;vertical-align:1px;white-space:nowrap} #mrBody.mr2 .mr2-kind.med{background:var(--ok-soft);color:var(--ok)} #mrBody.mr2 .mr2-kind.liv{background:var(--warn-soft);color:var(--chart-2)} #mrBody.mr2 .mr2-lamt{display:inline-flex;align-items:center;gap:var(--sp-1h);flex-wrap:wrap;font-weight:700} #mrBody.mr2 .mr2-lamt .mr-in.amt{width:150px;height:44px} /* 10-17 改級別副行（橫跨「俾乜＋由幾歲到幾歲」）：夠闊＝「☑ 改級別｜由幾歲起 [ ] 改做 [ ]」一行；格窄過 520px 先自動疊（container query 睇格闊唔睇機型） */ #mrBody.mr2 .mr2-rtbl tr.has-sw td{border-bottom:0;padding-bottom:var(--sp-1)} #mrBody.mr2 .mr2-rtbl tr.sw td{padding-top:0} #mrBody.mr2 .mr2-rsw{container-type:inline-size;display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--sp-4);row-gap:var(--sp-1)} #mrBody.mr2 .mr2-rsw>small{flex-basis:100%;margin-top:0} @container (max-width:520px){ #mrBody.mr2 .mr2-rsw .mr2-swon{flex-basis:100%} #mrBody.mr2 .mr2-swrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-2h);flex-basis:100%;max-width:360px} #mrBody.mr2 .mr2-swrow .mr-in.sm{justify-self:start} #mrBody.mr2 .mr2-swrow .mr-sel{width:100%} } #mrBody.mr2 .mr2-rowsb{padding:var(--sp-2h) var(--sp-4) var(--sp-3h)} #mrBody.mr2 .mr2-rowsb>.mr2-fn{margin:var(--sp-2) 0 0} #mrBody.mr2 .mr2-rowsb .mr2-arreff{margin:var(--sp-2h) 0 0} /* 10-17 用戶：「加一筆提取」只換顏色（形狀／全闊／大細照舊）→ 強調色實底 */ #mrBody.mr2 .mr2-addrow{display:flex;align-items:center;justify-content:center;gap:var(--sp-1h);width:100%;min-height:44px;border:1px solid var(--accent);border-radius:var(--r-md);background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;cursor:pointer} #mrBody.mr2 .mr2-addrow:hover{background:var(--brand-gold-deep);border-color:var(--brand-gold-deep)} #mrBody.mr2 .mr2-addf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:var(--sp-2h);align-items:end;padding:var(--sp-3);border:1px dashed var(--line);border-radius:var(--r-md);background:var(--card2)} #mrBody.mr2 .mr2-addf .mr-sel{width:100%;height:50px} #mrBody.mr2 .mr2-addf .mr-in{height:50px} #mrBody.mr2 .mr2-addf .acts{display:flex;gap:var(--sp-2)} #mrBody.mr2 .mr2-fn.bad{color:var(--bad);font-weight:700} #mrBody.mr2 .mr2-lanelg{margin-top:var(--sp-3)} #mrBody.mr2 .mr2-lanes{margin-top:var(--sp-1h);min-height:20px} .mr2-lanes svg{display:block;width:100%;height:auto} #mrBody.mr2 .mr2-late{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin:var(--sp-3) var(--sp-4) 0;padding:var(--sp-2h) var(--sp-3h);border:1px solid var(--bad);border-radius:var(--r-md);background:var(--bad-soft);line-height:1.6} #mrBody.mr2 .mr2-late .t{flex:1 1 260px;min-width:0} #mrBody.mr2 .mr2-late b{color:var(--bad)} #mrBody.mr2 .mr2-late .acts{display:flex;gap:var(--sp-2);flex-wrap:wrap} #mrBody.mr2 .mr2-okline{display:flex;gap:var(--sp-2);align-items:center;margin:var(--sp-3) var(--sp-4) 0;color:var(--ok);font-weight:700;font-size:var(--fs-sm)} #mrBody.mr2 .mr2-okline i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} #mrBody.mr2 .mr2-plan .mr2-ctrl{padding-top:var(--sp-3)} #mrBody.mr2 .mr2-dim{opacity:.45;pointer-events:none} #mrBody.mr2 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .mr2-brkw{margin-top:var(--sp-3h);border:1px solid var(--line);border-radius:var(--r-md);overflow:auto} table.mr2-brk{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .mr2-brk th,.mr2-brk td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line2);text-align:left;vertical-align:top;font-size:var(--fs-md)} .mr2-brk thead th{background:var(--card2);font-size:var(--fs-xs);font-weight:700;color:var(--ink2)} .mr2-brk .num{text-align:right;font-family:var(--mono);white-space:nowrap} .mr2-brk td.mono{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink2)} .mr2-brk tfoot th,.mr2-brk tfoot td{font-weight:700;background:var(--card2)} .mr2-brk tbody tr:last-child td{border-bottom:1px solid var(--line)} .mr2-brk i.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:var(--sp-1h);vertical-align:0} .mr2-brk small{display:block;font-size:var(--fs-xs);margin-top:2px} .mr2-brk small.bad{color:var(--bad);font-weight:700} @container mrpage (max-width:759px){ #mrBody.mr2 .mr2-rtbl,#mrBody.mr2 .mr2-rtbl tbody,#mrBody.mr2 .mr2-rtbl tr,#mrBody.mr2 .mr2-rtbl td{display:block;width:100%} #mrBody.mr2 .mr2-rtbl thead,#mrBody.mr2 .mr2-rtbl colgroup{display:none} #mrBody.mr2 .mr2-rtbl tr{position:relative;border-bottom:1px solid var(--line2);padding:var(--sp-2) 0} #mrBody.mr2 .mr2-rtbl td{border-bottom:0;padding:var(--sp-1) var(--sp-3);padding-right:64px} #mrBody.mr2 .mr2-rtbl td.x{position:absolute;top:var(--sp-1);right:var(--sp-1);width:auto;padding:0} #mrBody.mr2 .mr2-rtbl tr.has-sw{border-bottom:0;padding-bottom:0} #mrBody.mr2 .mr2-rtbl tr.sw{padding-top:0} #mrBody.mr2 .mr2-rtbl tr.sw td:empty{display:none} #mrBody.mr2 .mr2-addf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #mrBody.mr2 .mr2-addf .acts{grid-column:1/-1} } /* 客戶版（.mr2-cv 喺 #mrBody 以外）時間軸圖例：同計算機頁同一個樣 */ .mr2-cv .mr2-lgd2{display:flex;flex-wrap:wrap;gap:var(--sp-1h) var(--sp-4);font-size:var(--fs-sm);color:var(--ink2);margin-top:var(--sp-2)} .mr2-cv .mr2-lgd2 span{display:inline-flex;align-items:center;gap:var(--sp-1h)} .mr2-cv .mr2-lgd2 i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none} #mrBody.mr2 .mr2-late .acts .mr2-btn{white-space:normal;text-align:left;height:auto;min-height:44px} /* ══ 10-24 第①步「絕對整齊」（用戶睇預覽站：「輸入欄位、按鈕都唔能夠絕對整齊，要用一個最高規格嘅絕對整齊設計」）══ 四條尺，tools/headless/medreserve-s1.spec.js ⑫ 逐 px 量（誤差 ≤0.5px，打橫／打直 × 中英）： ① 一個控件高度 48：輸入格、下拉、搜尋格、細分段掣（灰槽本身 48，金色選中 36 喺中間）、淺色掣、× 掣、通脹參考值；底部原因掣同「下一步」一樣 56 ② 一條左框線：兩張卡內距同一個 --mr-pad；卡標題、受保人表第一欄每個框、加入家人、醫療通脹、醫保組名、剔格、加入醫保 全部貼呢條線 ③ 一條右框線：ⓘ、換客戶／取消、受保人 ×、打直嘅 ×、醫保表 × 全部貼卡右內距 ④ 一條字線：框入面嘅字＝框左＋13（邊 1＋內距 12）；表頭字、純字格（本人、歲數純字、醫保張數）、細分段掣第一個字都喺嗰度 只管第①步兩張卡＋底部（.mr2-who／.mr2-plans／.mr2-nextrow）；第③步共用嘅 .mr2-gset 唔郁 */ #mrBody.mr2{--mr-pad:16px;--mr-ctl:48px} #mrBody.mr2 .mr2-who .mr2-ihd{padding:0 var(--mr-pad);min-height:64px} #mrBody.mr2 .mr2-who .mr2-ihd .ibtn{margin:0} /* 10-24 用戶揀 A（「受保人、本人、輸入格左邊條線未對齊」）：卡頭跟受保人表兩條直線 —— 「受保人」字＝第一欄字線（關係／本人／下拉入面字，框左＋13）；搜尋格左邊＝姓名格左邊（h2 佔第一欄闊＋欄距 6） */ #mrBody.mr2 .mr2-who .mr2-ihd{column-gap:6px} #mrBody.mr2 .mr2-who .mr2-ihd h2{flex:0 0 var(--mr-c-rel);width:var(--mr-c-rel);padding-left:13px;box-sizing:border-box;overflow:hidden} #mrBody.mr2 .mr2-who .mr2-ipw{padding:0 var(--mr-pad)} #mrBody.mr2 .mr2-who .mr2-itbl{padding:0 var(--mr-pad);grid-template-columns:var(--mr-c-rel) minmax(0,1fr) var(--mr-c-dob) var(--mr-c-age) max-content max-content max-content var(--mr-ctl)} #mrBody.mr2 .mr2-who .mr2-ir.cand{margin:0 calc(-1 * var(--mr-pad));padding:0 var(--mr-pad)} #mrBody.mr2 .mr2-who .mr2-famadd{padding:var(--sp-2) var(--mr-pad)} #mrBody.mr2 .mr2-who .mr2-past{padding:var(--sp-1) var(--mr-pad)} #mrBody.mr2 .mr2-who .mr2-past .lrow{padding:0} #mrBody.mr2 .mr2-who>.mr-note{margin:0 var(--mr-pad) var(--sp-2h)} /* ① 控件 48 */ #mrBody.mr2 .mr2-who button.act,#mrBody.mr2 .mr2-plans button.act{height:var(--mr-ctl);min-height:var(--mr-ctl);border:0} #mrBody.mr2 .mr2-who .mr2-rm,#mrBody.mr2 .mr2-plans .mr2-rm{width:var(--mr-ctl);height:var(--mr-ctl)} #mrBody.mr2 .mr2-itbl .mseg{height:var(--mr-ctl);padding:0 1px} #mrBody.mr2 .mr2-itbl .mseg::before{top:0;bottom:0} #mrBody.mr2 .mr2-itbl .mseg button{height:var(--mr-ctl)} #mrBody.mr2 .mr2-itbl .mseg button::before{top:6px;bottom:6px} #mrBody.mr2 .mr2-itbl .mr2-ir.hd>.g,#mrBody.mr2 .mr2-itbl .mr2-ir.hd>.s{padding-left:13px} #mrBody.mr2 .mr2-plans .mr2-ref,body[data-page="med-reserve"] #mrBody.mr2 .mr2-plans .mr-sug button.mr2-ref{min-height:var(--mr-ctl);height:var(--mr-ctl)} /* ② 醫保卡：表頂一行、剔格、組名、加入醫保 貼左框線；× 貼右框線 */ #mrBody.mr2 .mr2-plans .mr2-gset{padding:var(--sp-2) var(--mr-pad) var(--sp-2) calc(var(--mr-pad) + 13px)} /* 「醫療通脹」純字 → 字線 */ #mrBody.mr2 .mr2-plans .mr2-ptbl col.c-ck{width:calc(var(--mr-pad) + 44px)} #mrBody.mr2 .mr2-plans .mr2-ptbl col.c-go{width:calc(var(--mr-pad) + var(--mr-ctl) + 6px)} #mrBody.mr2 .mr2-plans .mr2-ptbl td.chk{padding:0 0 0 var(--mr-pad);text-align:left} #mrBody.mr2 .mr2-plans .mr2-ptbl .mr2-ckl{justify-content:flex-start} #mrBody.mr2 .mr2-plans .mr2-ptbl td.go{padding:0 var(--mr-pad) 0 0} #mrBody.mr2 .mr2-plans .mr2-ptbl thead th:last-child{padding-right:var(--mr-pad)} #mrBody.mr2 .mr2-plans .mr2-ptbl tr.gh td{padding-left:calc(var(--mr-pad) + 13px);padding-right:var(--mr-pad)} /* 組名係純字 → 字線（同上面受保人／關係／本人一條） */ /* 計劃欄字線＝計劃名（logo 28＋間距 10 之後）：表頭「計劃」、未有醫保、缺乜嘢紅字都對住計劃名；未揀公司嘅行留空 logo 位 */ #mrBody.mr2 .mr2-plans{--mr-logo:38px} #mrBody.mr2 .mr2-plans .mr2-ptbl thead th:nth-child(2){padding-left:calc(var(--sp-2) + var(--mr-logo))} #mrBody.mr2 .mr2-plans .mr2-ptbl .misstxt{margin-left:var(--mr-logo)} #mrBody.mr2 .mr2-plans .mr2-ptbl tr.gnone td{padding-left:calc(var(--mr-pad) + 44px + var(--sp-2) + var(--mr-logo))} .mr2-logo.nil{visibility:hidden} #mrBody.mr2 .mr2-plans .mr2-ptbl .mr2-logo.txt{width:28px;min-width:28px;padding:0;justify-content:center;letter-spacing:-.02em} /* 冇 logo 圖嘅公司字章同 logo 一樣闊（字線唔郁） */ @container mrpage (max-width:759px){#mrBody.mr2 .mr2-plans{--mr-logo:0px}} /* 通脹參考值：同其他次序動作一樣嘅淺色掣（唔再虛線框）；用緊＝打剔＋淡色（同 button.act.on） */ #mrBody.mr2 .mr2-plans .mr2-ref,body[data-page="med-reserve"] #mrBody.mr2 .mr2-plans .mr-sug button.mr2-ref{border:0;border-radius:10px / 12px;background:rgba(0,112,60,.10);color:var(--brand-green-deep);padding:0 var(--sp-3h);font-size:var(--fs-md)} #mrBody.mr2 .mr2-plans .mr2-ref:hover,body[data-page="med-reserve"] #mrBody.mr2 .mr2-plans .mr-sug button.mr2-ref:hover{background:rgba(0,112,60,.16)} #mrBody.mr2 .mr2-plans .mr2-ref.on,body[data-page="med-reserve"] #mrBody.mr2 .mr2-plans .mr-sug button.mr2-ref.on{background:rgba(0,112,60,.06);color:var(--ink2)} #mrBody.mr2 .mr2-plans .mr2-ptbl tr.addr.gf td{padding:var(--sp-2) var(--mr-pad) var(--sp-3)} /* 底部：原因掣同「下一步」同一個高度、同一條中線 */ #mrBody.mr2 .mr2-nextrow{align-items:center} #mrBody.mr2 .mr2-nextrow .mr2-why{min-height:56px;border-radius:var(--r-md)} /* 打直：每人兩行，第二行 × 同第一行歲數格同一欄（右框線一條）；醫保張數放出生日期欄（字線對日期字） */ @container mrpage (max-width:860px){ #mrBody.mr2 .mr2-who .mr2-itbl{grid-template-columns:var(--mr-c-rel) max-content minmax(0,1fr) var(--mr-c-dob) var(--mr-c-age)} /* 第一欄定闊（卡頭「受保人」同搜尋格跟住佢） */ #mrBody.mr2 .mr2-who .mr2-ir{grid-template-areas:"rel nm nm dob age" "g s . pc x";align-content:center} #mrBody.mr2 .mr2-who .mr2-ir.hd{grid-template-areas:"rel nm nm dob age"} #mrBody.mr2 .mr2-who .mr2-ir>.pc{padding-left:13px} } @container mrpage (max-width:599px){ #mrBody.mr2 .mr2-who .mr2-itbl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} #mrBody.mr2 .mr2-who .mr2-ir{grid-template-areas:"rel age" "nm nm" "dob dob" "g s" "pc x"} #mrBody.mr2 .mr2-who .mr2-ir>.pc{padding-left:0} #mrBody.mr2 .mr2-who .mr2-ihd h2{flex:1 1 auto;width:auto} } /* 10-24 用戶：「加入家人、加入醫保可唔可以用盡晒左右兩邊，令使用者更加容易撳」→ 全闊（左框線到右框線）、字置中； 上限 12 位時「最多 12 位家人」落下一行（掣唔縮） */ #mrBody.mr2 .mr2-who .mr2-famadd{flex-wrap:wrap} #mrBody.mr2 .mr2-who #fAddMember{flex:1 1 100%;width:100%} #mrBody.mr2 .mr2-plans tr.gf button.act{width:100%} /* 10-24 醫療儲備改書面語＋說明收入 ⓘ：卡標題旁 ⓘ，撳開喺標題下面原位出（同第①步一樣）；客戶版工具列 ⓘ 喺列下面 */ #mrBody.mr2 .mr2-cardh h2 .ibtn,#mrBody.mr2 .mr2-chd .ttl .ibtn{margin:-14px -10px -14px -6px} #mrBody.mr2 .mr2-cardh+.mr2-ipw .ipop{margin:var(--sp-2) 0} #mrBody.mr2 .mr2-ipw .ipop p{margin:0}#mrBody.mr2 .mr2-ipw .ipop p+p{margin-top:var(--sp-1h)} .mr2-cv .mr2-cvip{padding:0 var(--sp-5)}.mr2-cv .mr2-cvip .ipop{margin:var(--sp-2) 0 0} /* 10-24 第二批：第②步頭條 ⓘ（說明框喺頭條下面原位）；醫保抽屜標題 ⓘ */ #mrBody.mr2 .mr2-headline .ibtn{margin:-14px -10px -14px -4px;vertical-align:middle} #mrBody.mr2 .mr2-ipw0 .ipop{margin:0 0 var(--sp-2)} .mr2-dr .dr-hd h3 .ibtn{margin:-14px -10px -14px -4px} .mr2-dr .dr-hd .ipop{margin:var(--sp-1) 0 0} /* ── 10-28 手機版（iPhone 直向；只喺 html[data-dev="phone"]，iPad／電腦一條都唔中 —— mob-zero 閘）── 頁頭貼邊、字入 16：標題＋狀態一行、儲存掣同提示落第二行（以前同一行逼到標題一個字一行）； 步驟條黏頂照舊；分段掣每粒最少 44 闊。計數一行都冇郁（T1：NUM 對數照 medreserve.spec.js）。 */ html[data-dev="phone"] #mrBody.mr2 .mseg button{min-width:44px} html[data-dev="phone"] #mrBody.mr2{--mr-pad:12px} /* ══ 10-29 手機版 v1（iPhone 直向；用戶批樣板方向 A＋Q1–Q4 全 A；規格桌面 醫療儲備_手機版_2026-10-29）══ 每條規則 html[data-dev="phone"] 開頭（tools/mobile-medres.test.js 閘）；iPad／電腦一條都唔中。 對線（iPhone Air 420）：框 12／408（.th-main 手機 padding 12）、卡外字 16、卡入面字 24；撳位 ≥44；輸入格字 16。 */ /* 頁頭收埋（頂欄已經寫頁名＋狀態細字＋⋯）；頁底投資頁講法（回報為單位價變幅…）醫療頁唔出 */ html[data-dev="phone"] body[data-page="med-reserve"] #mrBody.mr2>.mr2-hero{display:none} html[data-dev="phone"] body[data-page="med-reserve"] .th-foot>div+div{display:none} /* 頂欄：頁名旁狀態細字、右邊 ⋯ */ html[data-dev="phone"] .th-top .mr-ph-st{flex:0 1 auto;min-width:0;margin-left:8px;font-size:12px;font-weight:500;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-dev="phone"] .th-top .mr-ph-more{flex:none;width:44px;height:44px;margin-right:-8px;border:0;background:none;border-radius:var(--r-md);color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0} html[data-dev="phone"] .th-top .mr-ph-more[hidden]{display:none} /* 步驟條：一行四格、數字圈＋底線；黐頂只得呢一層（金額顯示收入 ⋯） */ html[data-dev="phone"] #mrBody.mr2 .mr2-steps{margin:calc(-1 * var(--sp-3)) calc(-1 * var(--sp-3)) 0;padding:0 var(--sp-2);background:var(--card);border-bottom:1px solid var(--line);gap:0;flex-wrap:nowrap} html[data-dev="phone"] #mrBody.mr2 .mr2-dccy{display:none} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;flex:1 1 auto;background:none;border:0;border-radius:0;padding:0;gap:0} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button{position:relative;min-height:48px;padding:0 2px;gap:5px;white-space:nowrap;font-size:14px;font-weight:500;line-height:1.2;justify-content:center;background:none;color:var(--muted);border-radius:0} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:3px;border-radius:2px;background:transparent} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button .no{width:20px;height:20px;font-size:12px;font-weight:600} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button .no .mr2-i{width:12px;height:12px} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button.done{color:var(--ink2)} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button.done::after{background:rgba(5,150,105,.35)} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button.on{background:none;color:var(--ink);font-weight:700} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button.on .no{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button.on::after{background:var(--accent)} html[data-dev="phone"] #mrBody.mr2 .mr2-steps .seg button.lock{color:var(--faint)} /* 原本頁內「上一步／下一步」、第④步掣、選單收埋嘅原分段掣 */ html[data-dev="phone"] #mrBody.mr2 .mr2-nextrow,html[data-dev="phone"] #mrBody.mr2 .mr2-acts{display:none} /* 底部動作條（黐喺底部導航上面） */ html[data-dev="phone"] #mrBody.mr2{padding-bottom:72px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-abar{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h,0px) + env(safe-area-inset-bottom,0px));z-index:27;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(5,13,24,.06)} html.mr2-cv-open[data-dev="phone"] #mrBody.mr2 .mr-ph-abar{display:none} html[data-dev="phone"] #mrBody.mr2 .mr-ph-abar>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:var(--r-md);font:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap} html[data-dev="phone"] #mrBody.mr2 .mr-ph-next{flex:1 1 auto;min-width:0;border:1px solid var(--primary);background:var(--primary);color:var(--primary-ink);padding:0 14px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-next:disabled{background:#D9DCD6;border-color:#D9DCD6;color:#7E8782;cursor:not-allowed} html[data-dev="phone"] #mrBody.mr2 .mr-ph-next .mr2-i,html[data-dev="phone"] #mrBody.mr2 .mr-ph-sec2 .mr2-i{width:18px;height:18px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-why+.mr-ph-next{flex:0 0 auto} html[data-dev="phone"] #mrBody.mr2 .mr-ph-back{flex:none;width:48px;padding:0;border:1px solid var(--line);background:var(--card);color:var(--ink)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-sec2{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 14px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-abar .mr-ph-why{flex:1 1 0;min-width:0;min-height:48px;justify-content:flex-start;text-align:left;white-space:normal;border:0;background:none;padding:0;color:var(--warn);font-size:13px;font-weight:500;line-height:1.35} html[data-dev="phone"] #mrBody.mr2 .mr-ph-abar span.mr-ph-why{display:flex;align-items:center;flex:1 1 0;color:var(--muted);font-size:13px} /* 卡＝卡外標題（17px）＋一張卡；卡入面冇框中框 */ html[data-dev="phone"] #mrBody.mr2 .mr-ph-sec{margin-top:16px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-sech{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;padding:0 4px;margin-bottom:6px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-sech h2{margin:0;font-size:17px;font-weight:700;line-height:1.3;display:flex;align-items:center;min-width:0;color:var(--ink)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-sech h2 .ibtn{margin:-10px -6px -10px -2px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-sech .r{flex:none;font-size:13px;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-ipw .ipop{margin:0 0 8px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-ipw.in{padding:0 12px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card,html[data-dev="phone"] .mr-ph-sh .mr-ph-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card.pad{padding:12px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card.mr-ph-bands{overflow:visible} html[data-dev="phone"] #mrBody.mr2 .mr-ph-past,html[data-dev="phone"] #mrBody.mr2 .mr-ph-links{margin-top:16px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-past .mr2-past{padding:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-past .lrow{min-height:52px;padding:0 8px 0 12px;font-size:15px} /* 列表行（撳入去改）：名＋細字｜右邊數＋細字｜› */ html[data-dev="phone"] .mr-ph-row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 8px 8px 12px;border:0;border-bottom:1px solid var(--line2);background:transparent;text-align:left;cursor:pointer;color:var(--ink);font-family:var(--sans)} html[data-dev="phone"] .mr-ph-row:last-child{border-bottom:0} html[data-dev="phone"] .mr-ph-row:active{background:var(--card2)} html[data-dev="phone"] .mr-ph-row:disabled{cursor:default;opacity:.55} html[data-dev="phone"] .mr-ph-row .nm{flex:1 1 auto;min-width:0;font-size:15px;font-weight:500;line-height:1.35;overflow-wrap:anywhere} html[data-dev="phone"] .mr-ph-row .nm small{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:1px;line-height:1.4} html[data-dev="phone"] .mr-ph-row .nm small small{display:block;font-size:13px;margin:2px 0 0} html[data-dev="phone"] .mr-ph-row .nm small.bad,html[data-dev="phone"] .mr-ph-row .nm .bad{color:var(--bad)} html[data-dev="phone"] .mr-ph-row b.warn,html[data-dev="phone"] .mr-ph-sh b.warn{color:var(--warn);font-weight:500} html[data-dev="phone"] .mr-ph-row .v{flex:none;max-width:44%;text-align:right;font-size:15px;font-weight:600;font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.3} html[data-dev="phone"] .mr-ph-row .v small{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:400} html[data-dev="phone"] .mr-ph-row .chev{flex:none;display:flex;color:var(--faint)} html[data-dev="phone"] .mr-ph-row .chev .mr2-i{width:18px;height:18px} html[data-dev="phone"] .mr-ph-row.late .nm{color:var(--bad)} html[data-dev="phone"] .mr-ph-row.off .nm{color:var(--muted)} html[data-dev="phone"] .mr-ph-row .pill{font-size:12px;vertical-align:1px} /* 醫保：按人分組；行頭剔格 ≥44 */ html[data-dev="phone"] #mrBody.mr2 .mr-ph-grp{padding:10px 12px 4px;font-size:13px;font-weight:700;color:var(--muted);background:var(--card2);border-bottom:1px solid var(--line2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-prow{display:flex;align-items:stretch;border-bottom:1px solid var(--line2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-prow .mr-ph-row{border-bottom:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-prow .mr-ph-ck{flex:none;display:flex;align-items:center;justify-content:center;width:44px;min-height:56px;margin:0;padding:0 0 0 4px;cursor:pointer} html[data-dev="phone"] #mrBody.mr2 .mr-ph-prow .mr-ph-ck+.mr-ph-row{padding-left:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-prow.off{background:var(--card2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-none{padding:12px;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line2)} html[data-dev="phone"] .mr-ph-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;border:0;border-bottom:1px solid var(--line2);background:rgba(5,150,105,.07);color:var(--brand-green-deep);font:inherit;font-size:15px;font-weight:700;cursor:pointer} html[data-dev="phone"] .mr-ph-add:last-child{border-bottom:0} html[data-dev="phone"] .mr-ph-add:disabled{opacity:.5;cursor:not-allowed} html[data-dev="phone"] .mr-ph-add .mr2-i{width:18px;height:18px} html[data-dev="phone"] .mr-ph-add.liv{background:var(--accent-soft);color:var(--brand-gold-deep)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-note{margin:0;padding:8px 12px;font-size:13px;color:var(--muted)} /* 受保人：搜尋格、建議行 */ html[data-dev="phone"] #mrBody.mr2 .mr-ph-srow{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-srow .mr2-srch input{height:44px;font-size:16px;border:0;padding-left:30px;outline:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-srow .mr2-srch>.mr2-i{left:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-srow .mr2-cdrop{top:48px;max-height:60vh} html[data-dev="phone"] #mrBody.mr2 .mr-ph-srow .mr2-cdrop .it{grid-template-columns:minmax(0,1fr) 18px;column-gap:8px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-srow .mr2-cdrop .it .a,html[data-dev="phone"] #mrBody.mr2 .mr-ph-srow .mr2-cdrop .it .n{grid-column:1;text-align:left;white-space:normal} html[data-dev="phone"] #mrBody.mr2 .mr-ph-srow .mr2-cdrop .it .mr2-i{grid-column:2;grid-row:1 / span 3} html[data-dev="phone"] #mrBody.mr2 .mr-ph-cand{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;background:var(--card2);border-bottom:1px solid var(--line2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-cand .nm{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.35} html[data-dev="phone"] #mrBody.mr2 .mr-ph-cand .nm small{display:block;font-size:13px;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-cand button.act{flex:none} /* 表單行（假設卡／底片）：標籤｜控制 */ html[data-dev="phone"] .mr-ph-frow{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px;border-bottom:1px solid var(--line2)} html[data-dev="phone"] .mr-ph-frow:last-child{border-bottom:0} html[data-dev="phone"] .mr-ph-frow>label,html[data-dev="phone"] .mr-ph-frow>.lb{flex:none;max-width:42%;font-size:15px;color:var(--ink2)} html[data-dev="phone"] .mr-ph-frow .ibtn{flex:none;margin:0 -8px 0 -6px} html[data-dev="phone"] .mr-ph-frow .ctl{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} html[data-dev="phone"] .mr-ph-frow .ctl .mr-in{height:46px;width:100%;max-width:200px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-frow .ctl .mr-in{max-width:150px} html[data-dev="phone"] .mr-ph-frow .ctl .mr-in input{font-size:16px;height:44px} /* 10-29 第二批（副總監③）：撳位 ≥44（框 46＝44＋上下 1px 邊）；同檔 .mr2-ctrl／.mr-ph-rate 兩處一齊改 */ html[data-dev="phone"] .mr-ph-frow .ctl .mr-in.mr2-age{max-width:120px} html[data-dev="phone"] .mr-ph-frow .ctl select.mr-sel{height:44px;font-size:16px;max-width:200px} html[data-dev="phone"] .mr-ph-frow .ctl .mr2-agev,html[data-dev="phone"] .mr-ph-frow .ctl .mr2-dobv{font-size:16px} html[data-dev="phone"] .mr-ph-frow .ctl .mr2-over{white-space:normal} html[data-dev="phone"] #mrBody.mr2 .mr-ph-warn{margin:0;padding:0 12px 8px;font-size:13px;color:var(--warn)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-sug{padding:0 12px 10px;border-bottom:1px solid var(--line2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-sug .mr-sug{display:flex;flex-wrap:wrap;gap:6px} /* 10-29 副總監：參考值唔准似唔撳得嘅虛線 pill（#413）→ 手機同 button.act 一樣（淺綠底、高 44）；揀咗＝淡底灰字 */ html[data-dev="phone"] #mrBody.mr2 .mr-ph-sug .mr-sug button.mr2-ref{min-height:44px;height:44px;padding:0 14px;border:2px solid transparent;border-left-width:0;border-right-width:0;background:rgba(0,112,60,.10);background-clip:padding-box;border-radius:10px / 12px;color:var(--brand-green-deep);font-size:14px;font-weight:700;white-space:nowrap} html[data-dev="phone"] #mrBody.mr2 .mr-ph-sug .mr-sug button.mr2-ref.on{background-color:rgba(0,112,60,.06);color:var(--ink2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-frow input::placeholder{font-family:var(--sans)} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk td.mono{white-space:nowrap;font-size:13px} /* 第②步 */ html[data-dev="phone"] #mrBody.mr2 .mr-ph-head{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--ink)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-head .x{font-family:var(--mono);font-weight:700;color:var(--bad)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-head .ibtn{vertical-align:middle;margin:-12px -8px -12px -2px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-tot .l{display:block;font-size:13px;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-tot b{display:block;font-size:26px;font-weight:700;line-height:1.25} html[data-dev="phone"] #mrBody.mr2 .mr-ph-kl{display:flex;flex-wrap:wrap;gap:2px 12px;margin:4px 0 10px;font-size:13px;color:var(--ink2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-kl b{font-weight:600;color:var(--ink)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card .mr2-chd{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card .mr2-chd .mr2-lgd{flex:1 1 auto;min-width:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card .mr2-lgd button{min-height:44px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card .mr2-chart{margin:0 -4px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-hctl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:0 1 auto;min-width:0;max-width:100%} /* 多人時「顯示方式：…」＋「對象：…」兩粒有名選單掣放唔落標題同一行 → 落下一行（靠右），唔准出界 */ html[data-dev="phone"] #mrBody.mr2 .mr-ph-sech{flex-wrap:wrap;row-gap:6px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-cap{margin:0;padding:8px 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-bh,html[data-dev="phone"] #mrBody.mr2 .mr-ph-br{display:grid;grid-template-columns:minmax(0,1fr) 96px 96px;gap:8px;align-items:center;padding:0 12px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-bh.yr,html[data-dev="phone"] #mrBody.mr2 .mr-ph-br.yr{grid-template-columns:minmax(0,1fr) 120px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-bh{position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top,0px) + var(--mr2-stick,48px));z-index:5;min-height:36px;background:var(--card2);border-bottom:1px solid var(--line);font-size:12px;font-weight:500;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-bh span:not(:first-child),html[data-dev="phone"] #mrBody.mr2 .mr-ph-br .n{text-align:right} html[data-dev="phone"] #mrBody.mr2 .mr-ph-br{min-height:48px;border-bottom:1px solid var(--line2);font-size:15px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-br .a small{display:flex;flex-wrap:wrap;gap:0 8px;font-size:12px;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-br .n{font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1.3} html[data-dev="phone"] #mrBody.mr2 .mr-ph-br .n small{display:block;font-family:var(--sans);font-size:12px;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-br.tot{font-weight:700;background:var(--card2);border-bottom:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-br.tot .a{font-size:13px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-br .dim{color:var(--faint)} html[data-dev="phone"] #mrBody.mr2 .mr2-ins,html[data-dev="phone"] #mrBody.mr2>.mr2-body>.mr2-fn{margin:12px 4px 0} /* 第③步：儲蓄計劃卡（表單行；選單行「值 ›」）、狀態句、三種安排三行 */ html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-okline,html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-late{margin:0;padding:10px 12px;border-bottom:1px solid var(--line2);border-radius:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-late .acts{display:grid;gap:8px;margin-top:8px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-late .acts .mr2-btn{width:100%;min-height:44px;white-space:normal} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl{display:block;padding:0;margin:0;border:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .grp{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px;border-bottom:1px solid var(--line2);margin:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .grp .lbl{flex:none;max-width:40%;font-size:15px;font-weight:500;color:var(--ink2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .grp .ctl{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .grp .ctl .amt{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .mr-in{height:46px;max-width:150px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .mr-in input{font-size:16px;height:44px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .mr-seg{width:auto} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .mr-seg button{min-height:44px;font-size:14px;padding:0 12px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl select.mr-sel{height:44px;font-size:16px;max-width:200px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrl .brand{font-size:15px;font-weight:600;text-align:right} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-minchip{min-height:44px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrlnote{margin:0;padding:10px 12px;font-size:13px;color:var(--muted);line-height:1.5} html[data-dev="phone"] #mrBody.mr2 .mr-ph-plan .mr2-ctrlnote .mr-vendor{display:block} html[data-dev="phone"] #mrBody.mr2 .mr-ph-cmp .mr2-empty,html[data-dev="phone"] #mrBody.mr2 .mr-ph-cmp .mr-ch{padding:12px;margin:0;font-size:14px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:10px 12px;border-bottom:1px solid var(--line2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr:last-child{border-bottom:0} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr.me{background:rgba(5,150,105,.05)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .nm{min-width:0;font-size:15px;font-weight:600;line-height:1.35} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .nm small{display:block;font-size:13px;font-weight:400;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .res{text-align:right;font-size:14px;line-height:1.4;max-width:210px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .res b{display:block;font-size:15px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .res b.ok{color:var(--ok)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .res b.bad{color:var(--bad)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .res>span{display:block} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .res small{display:block;font-size:12px;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .neg{color:var(--bad)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .pos{color:var(--ok)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .pc{grid-column:1 / -1;font-size:12px;color:var(--ink2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-arr .pc .mr2-pcov{margin:0;padding:0;border:0;background:none;font-size:12px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-rate{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:400;color:var(--ink2)} html[data-dev="phone"] #mrBody.mr2 .mr-ph-rate .mr-in{height:46px;width:96px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-rate .mr-in input{font-size:16px;height:44px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card .mr2-lanelg{margin:0 0 6px} html[data-dev="phone"] #mrBody.mr2 .mr-ph-card .mr2-arreff{margin:0 0 8px;font-size:13px} /* 第④步：卡外標題＋一張卡（.mr2-card 透明、內容畫成一張卡）；可再調整每項一行；重要聲明一行 */ html[data-dev="phone"] #mrBody.mr2 .mr2-sumcard{margin-top:12px;padding:16px;border-radius:var(--r-md)} html[data-dev="phone"] #mrBody.mr2 .mr2-sumcard h2{font-size:19px;line-height:1.5} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-card{background:none;border:0;box-shadow:none;padding:0;margin-top:16px} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-cardh{padding:0 4px;margin:0 0 6px;border-bottom:0} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-cardh h2{font-size:17px} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-cb{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:12px} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk{font-size:14px;width:100%} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk th,html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk td{padding:8px 4px;white-space:normal} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brkw{overflow:visible;border:0;border-radius:0;margin:12px -12px -12px;border-top:1px solid var(--line2)} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk .num{white-space:nowrap} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk tr>:first-child{padding-left:12px} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk tr>:last-child{padding-right:12px} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk tbody tr:last-child>*,html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-brk tfoot tr:last-child>*{border-bottom:0} html[data-dev="phone"] #mrBody.mr2>.mr2-body[data-cur="4"] .mr2-secttl{margin:16px 4px 6px;font-size:17px;font-weight:700} html[data-dev="phone"] #mrBody.mr2 .mr2-adj{gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden} html[data-dev="phone"] #mrBody.mr2 .mr2-adj .a{border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:8px 8px 8px 12px;min-height:56px} html[data-dev="phone"] #mrBody.mr2 .mr2-adj .a:last-child{border-bottom:0} html[data-dev="phone"] #mrBody.mr2 .mr2-adj .a b{font-size:15px} html[data-dev="phone"] #mrBody.mr2 .mr2-adj .a span{font-size:13px;color:var(--muted)} html[data-dev="phone"] #mrBody.mr2 .mr2-adj .a .mr2-btn{border:0;background:none;color:var(--brand-green-deep);padding:0 4px;min-height:44px} html[data-dev="phone"] #mrBody.mr2 details.mr2-legal{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);padding:0 12px} html[data-dev="phone"] #mrBody.mr2 .mr2-pcovs{grid-template-columns:1fr} /* 揀計劃抽屜（全屏）：iOS 表單行 —— 每層一行「層名｜已揀值 ›」，撳開清單一行 48、右邊 ✓；開關字一行＋細字一行 */ html[data-dev="phone"] .mr2-dr .panel{width:100vw} html[data-dev="phone"] .mr2-dr .dr-hd{padding:calc(6px + env(safe-area-inset-top,0px)) 8px 6px 16px} html[data-dev="phone"] .mr2-dr .dr-hd h3{font-size:17px} html[data-dev="phone"] .mr2-dr .mr2-lv .lh{padding:4px 12px 4px 16px;min-height:52px} html[data-dev="phone"] .mr2-dr .mr2-lv .lh .k{width:84px;font-size:14px;font-weight:500;color:var(--ink2)} html[data-dev="phone"] .mr2-dr .mr2-lv .lh .v{justify-content:flex-end;text-align:right;font-size:15px;font-weight:600} html[data-dev="phone"] .mr2-dr .mr2-lv .lh .chg{font-size:0;width:18px;height:18px;position:relative} html[data-dev="phone"] .mr2-dr .mr2-lv .lh .chg::after{content:"";position:absolute;left:3px;top:5px;width:7px;height:7px;border-right:1.8px solid var(--faint);border-top:1.8px solid var(--faint);transform:rotate(45deg)} html[data-dev="phone"] .mr2-dr .mr2-lv.open .lh .chg::after{transform:rotate(135deg);left:5px;top:3px} html[data-dev="phone"] .mr2-dr .mr2-lv .lh .tag{white-space:nowrap;line-height:1.3;padding:2px 8px} html[data-dev="phone"] .mr2-dr .mr2-lv .ops{padding:0;gap:0;max-height:none;background:var(--card2);border-top:1px solid var(--line2)} html[data-dev="phone"] .mr2-dr .mr2-lv .opt{min-height:48px;border:0;border-bottom:1px solid var(--line2);border-radius:0;background:var(--card);padding:6px 16px 6px 28px;font-size:15px} html[data-dev="phone"] .mr2-dr .mr2-lv .opt:last-child{border-bottom:0} html[data-dev="phone"] .mr2-dr .mr2-lv .opt.on{background:var(--card);font-weight:700} html[data-dev="phone"] .mr2-dr .mr2-lv .opt>.mr2-i{width:20px;height:20px;stroke:var(--brand-green-deep);visibility:hidden} html[data-dev="phone"] .mr2-dr .mr2-lv .opt.on>.mr2-i{visibility:visible} html[data-dev="phone"] .mr2-dr .mr-ph-og{padding:10px 16px 4px 28px;font-size:13px;font-weight:700;color:var(--muted);background:var(--card2);border-bottom:1px solid var(--line2)} html[data-dev="phone"] .mr2-dr .mr2-dgrid{grid-template-columns:1fr} html[data-dev="phone"] .mr2-dr .mr2-dgrid>div:empty{display:none} html[data-dev="phone"] .mr2-dr .mr2-tog{min-height:56px;font-size:15px;line-height:1.35} html[data-dev="phone"] .mr2-dr .mr2-tog i{width:51px;height:31px;border-radius:16px} html[data-dev="phone"] .mr2-dr .mr2-tog i::after{width:27px;height:27px} html[data-dev="phone"] .mr2-dr .mr2-tog.on i::after{left:22px} html[data-dev="phone"] .mr2-dr .mr-in input,html[data-dev="phone"] .mr2-dr select.mr-sel{font-size:16px} html[data-dev="phone"] .mr2-dr .dr-foot{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))} html[data-dev="phone"] .mr2-dr .dr-foot .mr2-btn.ghost{min-height:48px;padding:0 4px;font-size:15px} html[data-dev="phone"] .mr2-dr .dr-foot .mr2-btn.primary{min-width:120px;font-size:15px} /* 底片（.th-sheet 殼）：標題｜完成；內容一張卡；腳＝移除（紅字）／實心掣 */ /* 全站選單引擎（TH.phoneMenu，shell .th-sheet.phm-sh）：「⋯」儲存行細字一句 —— 淨醫療頁（z 由 shell 統一 1110，喺醫保抽屜 70 上面） */ html[data-dev="phone"] body[data-page="med-reserve"] .phm-sh .phm-r .tx small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--muted);line-height:1.45} html[data-dev="phone"] .mr-ph-sh .box{display:flex;flex-direction:column;width:100vw;max-height:92vh;padding:0;background:var(--bg2)} html[data-dev="phone"] .mr-ph-sh .box.tall{height:calc(100% - env(safe-area-inset-top,0px) - var(--sp-6))} /* 殼底＝底部導航列頂（shell 幾何，同引擎底片一樣）；腳唔使再留安全區 */ html[data-dev="phone"] body.th-has-tabbar .th-sheet.mr-ph-sh>.box{padding-bottom:0} html[data-dev="phone"] .mr-ph-sh .grab{flex:none;width:36px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 0} html[data-dev="phone"] .mr-ph-sh .mr-ph-shh{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 4px 0 16px;border-bottom:1px solid var(--line);background:var(--bg2)} html[data-dev="phone"] .mr-ph-sh .mr-ph-shh h3{margin:0;font-size:17px;min-width:0} html[data-dev="phone"] .mr-ph-sh .mr-ph-done{flex:none;min-height:44px;min-width:64px;border:0;background:none;color:var(--brand-green-deep);font:inherit;font-size:16px;font-weight:700;cursor:pointer} html[data-dev="phone"] .mr-ph-sh .mr-ph-shb{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 12px 16px} html[data-dev="phone"] .mr-ph-sh .mr-ph-shb .mr-ph-card+.mr-ph-card,html[data-dev="phone"] .mr-ph-sh .mr-ph-shb .mr-ph-card+.mr2-ask{margin-top:12px} html[data-dev="phone"] .mr-ph-sh .mr-ph-card.pad{padding:12px} html[data-dev="phone"] .mr-ph-sh .mr-ph-shf{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--card);border-top:1px solid var(--line)} html[data-dev="phone"] .mr-ph-sh .mr-ph-shf[hidden]{display:none} html[data-dev="phone"] .mr-ph-sh .mr-ph-del{min-height:48px;border:0;background:none;padding:0 4px;color:var(--bad);font:inherit;font-size:15px;font-weight:700;cursor:pointer} html[data-dev="phone"] .mr-ph-sh .mr-ph-pri{min-height:48px;min-width:120px;margin-left:auto;font-size:15px} html[data-dev="phone"] .mr-ph-sh .mr-ph-shnote,html[data-dev="phone"] .mr-ph-sh .mr-ph-shsub{margin:10px 4px 0;font-size:13px;color:var(--muted);line-height:1.5} html[data-dev="phone"] .mr-ph-sh .mr-ph-shsub{margin:0 4px 10px} html[data-dev="phone"] .mr-ph-sh .mr-ph-fnote{padding:8px 12px;font-size:13px;line-height:1.45;color:var(--ink2)} html[data-dev="phone"] .mr-ph-sh .mr-ph-fnote small{font-size:13px} html[data-dev="phone"] .mr-ph-sh .mr-ph-fnote .bad{color:var(--bad)} html[data-dev="phone"] .mr-ph-sh .mr-ph-fnote .warn{color:var(--warn)} html[data-dev="phone"] .mr-ph-sh .mseg button{min-width:56px;font-size:15px} html[data-dev="phone"] .mr-ph-sh .mr-in{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);padding:0 10px} html[data-dev="phone"] .mr-ph-sh .mr-in input{flex:1 1 auto;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:16px;font-family:var(--mono);text-align:right} html[data-dev="phone"] .mr-ph-sh .mr-in input.txt{font-family:var(--sans);text-align:left} html[data-dev="phone"] .mr-ph-sh .mr-in .sx,html[data-dev="phone"] .mr-ph-sh .mr-in .px{flex:none;font-size:14px;color:var(--muted)} html[data-dev="phone"] .mr-ph-sh .mr-in .sfx{flex:none;margin-left:6px} html[data-dev="phone"] .mr-ph-sh select.mr-sel{height:44px;font-size:16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);padding:0 8px} html[data-dev="phone"] .mr-ph-sh .mr2-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px;background:var(--warn-soft);border-radius:var(--r-md);font-size:14px} html[data-dev="phone"] .mr-ph-sh .mr2-ask span{flex:1 1 100%} html[data-dev="phone"] .mr-ph-sh .mr-ph-sw{padding:4px 12px 10px} html[data-dev="phone"] .mr-ph-sh .mr2-rsw{display:grid;gap:8px} html[data-dev="phone"] .mr-ph-sh .mr2-swon{display:flex;align-items:center;gap:10px;min-height:48px;font-size:15px;cursor:pointer} html[data-dev="phone"] .mr-ph-sh .mr2-swon input{width:22px;height:22px} html[data-dev="phone"] .mr-ph-sh .mr2-swrow{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;font-size:15px;color:var(--ink2)} html[data-dev="phone"] .mr-ph-sh .mr2-swrow .mr-in{height:44px;max-width:120px} html[data-dev="phone"] .mr-ph-sh .mr2-rsw small{display:block;font-size:13px;color:var(--muted)} html[data-dev="phone"] .mr-ph-sh .mr2-rsw small.bad{color:var(--bad)} html[data-dev="phone"] .mr-ph-sh .mr-ph-addf{padding:4px 12px 12px} html[data-dev="phone"] .mr-ph-sh .mr-ph-addf .mr2-addf{display:grid;gap:10px;padding:0;border:0;background:none} html[data-dev="phone"] .mr-ph-sh .mr-ph-addf .mr-f>label{display:block;font-size:14px;color:var(--ink2);margin:6px 0 4px} html[data-dev="phone"] .mr-ph-sh .mr-ph-addf .mr-in{height:44px} html[data-dev="phone"] .mr-ph-sh .mr-ph-addf select.mr-sel{width:100%} html[data-dev="phone"] .mr-ph-sh .mr-ph-addf .acts{display:none} html[data-dev="phone"] .mr-ph-sh .mr-ph-addf .help{font-size:12px;color:var(--muted);margin-top:4px} html[data-dev="phone"] .mr-ph-sh .mr-ph-addf .mr2-fn.bad{color:var(--bad);font-size:13px;margin:0} html[data-dev="phone"] .mr-ph-sh .mr2-chart{margin:8px -4px} html[data-dev="phone"] .mr-ph-sh .mr2-lgd2{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink2)} html[data-dev="phone"] .mr-ph-sh .mr2-lgd2 i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px} html[data-dev="phone"] .mr-ph-sh .mr2-i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} /* 10-29 用戶新規矩「手機唔出比較用橫條」：第④步「投入／預計價值」兩條橫棒手機剷，淨出兩個數（右對齊等寬，預計價值粗體）；iPad 照舊 */ html[data-dev="phone"] #mrBody.mr2 .mr2-gg{display:block} html[data-dev="phone"] #mrBody.mr2 .mr2-gg .bar{display:none} html[data-dev="phone"] #mrBody.mr2 .mr2-gg .l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:40px;font-size:15px;color:var(--ink2)} html[data-dev="phone"] #mrBody.mr2 .mr2-gg .l b{display:inline;text-align:right;font-size:17px;font-weight:500} html[data-dev="phone"] #mrBody.mr2 .mr2-gg .bar+.l b{font-weight:700;color:var(--ink)} /* 10-29 用戶 1A：頂欄已經寫住頁名 → 頁面大標題手機唔再出（同 calendar.css .cal-head h1／team-phone.css 頁題一樣做法）；副題／meta 照出 */ html[data-dev="phone"] body[data-page="med-reserve"] #mrBody.mr2 .mr2-hero .t>h1{display:none}