/* ==========================================================================
   米赫維 Mihewi — 天藍・墨藍（2026-10-15 全站視覺重新設計）
   單一樣式表。版面概念：左側價目軌保留，內容區改為白底與淡天藍交錯的段落，
   標題用襯線字，主色取自方形 m 標誌的天藍 #29AAE1；金色只留給星等。
   所有選擇器沿用舊版名稱，頁面標記與文字不需要改動。
   ========================================================================== */

:root{
  --bg:#f1f7fb;          /* 淡天藍底 */
  --paper:#e3f0f8;
  --white:#ffffff;
  --ink:#0e2433;         /* 墨藍：文字、深色區塊 */
  --ink-2:#26394a;
  --mute:#53687a;        /* AA: 5.9 on white, 5.5 on --bg */
  --mute-2:#596e7f;      /* AA: 5.4 on white */
  --line:#d4e3ed;
  --line-2:#b9cfdd;
  --sky:#29aae1;         /* 品牌天藍：只當底色或裝飾，上面放墨藍字 */
  --sky-soft:#e2f3fb;
  --blue:#0b6ba3;        /* 連結與強調文字用的深天藍（AA: 5.6 on white） */
  --gold:#f4b223;        /* 星等黃：只當底色 */
  --gold-ink:#7f5300;    /* 金色文字用 */
  --gold-soft:#fdf1d4;
  --danger:#a8261c;
  --danger-soft:#fbeeec;
  --danger-ink:#4a2320;
  --line-green:#06C755;
  --frame:#e4eff6;

  --font-han:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-display:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --font-num:"Archivo",-apple-system,sans-serif;
  --font-mono:"DM Mono","SF Mono",Consolas,monospace;

  --radius:14px;
  --rail:380px;
  --measure:680px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-han); font-size:16px; line-height:1.9;
  -webkit-font-smoothing:antialiased; font-feature-settings:"palt";
}
img,svg{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
a:hover{ color:var(--blue) }
a:focus-visible,button:focus-visible,summary:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; border-radius:4px }
p,h1,h2,h3,h4,h5,ul,ol{ margin:0 }
ul{ padding:0; list-style:none }
strong{ font-weight:700 }
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.mono{ font-family:var(--font-mono); letter-spacing:.12em }
.eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--blue); font-weight:500 }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; font-weight:700; font-size:15px; padding:14px 20px }
.skip:focus{ left:0; color:#fff }

/* ---------- 頁首 ---------- */
.utility{ display:flex; align-items:center; gap:20px; padding:0 40px; height:36px; background:var(--ink) }
.utility p{ font-size:12.5px; line-height:1; color:rgba(255,255,255,.78); display:flex; align-items:center; gap:10px }
.utility p::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--sky) }
.utility span{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:rgba(255,255,255,.62) }

.site-header{ display:flex; align-items:center; gap:36px; padding:0 40px; height:78px; border-bottom:1px solid var(--line); background:var(--white); position:relative }
.site-header::after{ content:""; position:absolute; left:0; bottom:-1px; width:120px; height:3px; background:var(--sky) }
.site-logo img{ height:26px; width:auto; filter:brightness(0) saturate(0) }
.nav{ display:flex; gap:6px; font-size:15.5px; font-weight:500; color:var(--ink-2) }
.nav a{ padding:8px 12px; border-radius:999px }
.nav a:hover{ background:var(--bg); color:var(--ink) }
.nav a.is-active{ color:var(--ink); font-weight:700; background:var(--sky-soft) }
.btn-line{ margin-left:auto; background:var(--line-green); color:#fff; font-weight:700; font-size:15px; padding:13px 22px; border-radius:999px }
.btn-line:hover{ color:#fff; filter:brightness(.95) }
.nav-toggle{ display:none }

.crumb{ padding:18px 40px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--mute); background:var(--bg) }
.crumb a:hover{ color:var(--blue) }
.crumb b{ color:var(--ink); font-weight:500 }

/* ---------- 骨架：左固定價目軌 + 右內容 ---------- */
.shell{ display:grid; grid-template-columns:var(--rail) 1fr }
.rail{
  background:var(--bg); border-right:1px solid var(--line);
  padding:32px 28px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto;
  /* The rail still scrolls on short windows, but its scrollbar is hidden: the
     CTA sits third from the top so nothing that has to be seen is below the
     fold, and a 16px bar inside a sticky column reads as a defect. */
  scrollbar-width:none; -ms-overflow-style:none;
}
.rail::-webkit-scrollbar{ width:0; height:0 }
.rail-head{ display:flex; flex-direction:column; gap:4px }
.rail-head small{ font-size:12.5px; line-height:1.7; color:var(--mute) }
.rail-group{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px }
.rail-group:first-of-type{ padding-top:18px }
.rail .note{ border-radius:var(--radius) }

.price-head{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:10px; border-bottom:2px solid var(--sky) }
.price-head b{ font-family:var(--font-display); font-size:18px; font-weight:900 }
.price-head span{ font-size:12.5px; color:var(--mute) }
.price-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line) }
.price-row:last-child{ border-bottom-color:var(--line-2) }
.price-row .t{ flex:1; font-size:14.5px; font-weight:500; line-height:1.4 }
.price-row .t em{ font-style:normal; font-size:11px; color:var(--gold-ink); background:var(--gold-soft); border-radius:999px; padding:1px 7px; margin-left:7px }
.price-row .v{ font-family:var(--font-num); font-weight:700; font-size:17px; font-variant-numeric:tabular-nums }
.price-notes{ display:flex; flex-direction:column; gap:7px; margin-top:14px }
.price-notes span{ font-size:12.5px; line-height:1.7; color:var(--mute) }

.scale-row{ display:flex; align-items:baseline; justify-content:space-between }
.scale-row span{ font-size:13px; color:var(--mute) }
.scale-row b{ font-family:var(--font-num); font-weight:700; font-size:20px }
.scale-row b i{ font-style:normal; font-family:var(--font-han); font-weight:400; font-size:13px; color:var(--mute) }
.scale{ display:flex; gap:4px; height:8px; margin:9px 0 }
.scale i{ flex:1; background:var(--line); display:block; border-radius:2px }
.scale i.on{ background:var(--gold) }
.formula{ font-family:var(--font-mono); font-size:12px; line-height:1.7; color:var(--mute-2) }

.linkline{ font-size:14px; font-weight:700; color:var(--blue); border-bottom:1px solid var(--blue); padding-bottom:3px; align-self:flex-start }
.btn-gold{ display:flex; align-items:center; justify-content:center; height:50px; background:var(--sky); color:var(--ink); border-radius:999px; font-weight:700; font-size:15.5px }
.btn-gold:hover{ color:var(--ink); filter:brightness(.96) }
.btn-ghost{ display:flex; align-items:center; justify-content:center; height:50px; background:var(--white); color:var(--ink); border:1px solid var(--line-2); border-radius:999px; font-weight:700; font-size:15.5px }
.btn-ghost:hover{ color:var(--ink); border-color:var(--ink) }
.rail-cta{ display:flex; flex-direction:column; gap:9px; background:transparent; border:0; padding:0 }

/* ---------- 內容區塊 ---------- */
.content{ display:flex; flex-direction:column; min-width:0 }
.sec{ padding:52px 56px; border-bottom:1px solid var(--line) }
.sec.tint{ background:var(--bg) }
.sec.navy{ background:var(--ink) }
.sec-title{ display:flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap }
.sec-title .n{
  display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 8px; border-radius:999px;
  background:var(--sky-soft); color:var(--blue); font-family:var(--font-num); font-weight:700; font-size:14px;
}
.sec.navy .sec-title .n{ background:rgba(41,170,225,.18); color:var(--sky) }
.sec-title h2{ font-family:var(--font-display); font-size:31px; font-weight:900; line-height:1.4; letter-spacing:-.01em }
.sec.navy .sec-title h2{ color:#fff }
.sec-title .aside{ font-size:13px; color:var(--mute); font-weight:500; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:3px 12px }
.sec.tint .sec-title .aside{ background:var(--white) }
.measure{ max-width:var(--measure) }
.lede{ font-size:19px; font-weight:700; line-height:1.8; margin-bottom:14px }
.sec p{ font-size:16.5px; line-height:1.95; color:var(--ink-2); text-wrap:pretty }
.sec p + p{ margin-top:14px }
.sec h3{ font-family:var(--font-display); font-weight:900 }

/* 英雄區 */
.hero{ padding:60px 56px 52px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--sky-soft),var(--white) 78%) }
.hero .brand{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--blue) }
.hero .brand::before{ content:""; width:18px; height:3px; border-radius:2px; background:var(--sky) }
.hero h1{ font-family:var(--font-display); font-size:52px; font-weight:900; line-height:1.36; letter-spacing:-.015em; margin-top:16px; max-width:780px; text-wrap:pretty }
.hero h1 em{ font-style:normal; color:var(--blue) }
.hero .sub{ font-size:17.5px; line-height:1.9; color:var(--ink-2); margin-top:18px; max-width:680px; text-wrap:pretty }
.hero .keywords{ font-size:13.5px; line-height:1.9; color:var(--mute); margin-top:14px; max-width:760px }
.facts{ display:flex; gap:28px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); max-width:680px }
.facts div{ display:flex; flex-direction:column; gap:5px }
.facts b{ font-family:var(--font-num); font-weight:700; font-size:24px }
.facts span{ font-size:13px; line-height:1.6; color:var(--mute) }
.facts hr{ width:1px; border:0; background:var(--line); margin:0 }

/* 照片：已完成的照片與預留位置（預留位置交給 Codex 生成寫實照片） */
.ph{ background:var(--frame); outline:1.5px dashed var(--line-2); outline-offset:-14px; display:grid; place-items:center; text-align:center; padding:28px }
.ph span{ font-family:var(--font-mono); font-size:12px; line-height:2; letter-spacing:.1em; color:var(--mute) }
.ph span i{ font-style:normal; font-family:var(--font-han); font-size:13.5px; letter-spacing:0; line-height:1.8; display:block; max-width:520px; margin:6px auto 0 }
.ph-21x9{ aspect-ratio:21/9; border-bottom:1px solid var(--line) }
.ph-4x3{ aspect-ratio:4/3; outline-offset:-10px; border-radius:var(--radius) }
.photo{ display:block; overflow:hidden; background:var(--frame) }
.photo img{ display:block; width:100%; height:100%; object-fit:cover }
.photo-hero{ aspect-ratio:21/9; border-bottom:1px solid var(--line) }
.photo-4x3{ aspect-ratio:4/3; border-radius:var(--radius) }

/* 星等刻度尺 */
.ruler{ display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid rgba(255,255,255,.22) }
.ruler > div{ padding:18px 16px 20px; border-right:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:9px; position:relative }
.ruler > div:last-child{ border-right:0 }
.ruler > div:first-child::before{ content:""; position:absolute; top:-1px; left:0; width:30px; height:3px; background:var(--sky) }
.ruler > div.pin{ background:rgba(41,170,225,.14) }
.ruler .lv{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.66) }
.ruler .head{ display:flex; flex-direction:column; gap:6px }
.ruler .lv em{ font-style:normal; color:rgba(255,255,255,.5); margin-left:8px; font-size:12px }
.ruler .pin .lv em{ color:var(--sky) }
.ruler .pin .lv{ color:var(--sky) }
.ruler .amt{ font-family:var(--font-num); font-weight:700; font-size:27px; color:#fff; font-variant-numeric:tabular-nums }
.ruler .use{ font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.56) }
.ruler .pin .use{ color:var(--sky); font-weight:700 }
.ticks{ display:flex; gap:3px; height:6px; margin-top:2px }
.ticks i{ flex:1; background:rgba(255,255,255,.16); display:block; border-radius:2px }
.ticks i.on{ background:var(--gold) }
.ruler-foot{ display:flex; gap:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.22); flex-wrap:wrap; align-items:baseline }
.ruler-foot span{ font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.64) }
.ruler-foot a{ margin-left:auto; font-size:14.5px; font-weight:700; color:var(--sky); border-bottom:1px solid var(--sky); padding-bottom:3px }
.ruler-foot a:hover{ color:var(--sky) }

/* 狀況分流 */
.routes{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.route{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; display:flex; align-items:center; gap:14px; transition:border-color .2s, box-shadow .2s }
.route:hover{ border-color:var(--sky); box-shadow:0 10px 24px -18px rgba(14,36,51,.45); color:inherit }
.route .n{ font-family:var(--font-num); font-weight:700; font-size:13px; color:var(--blue) }
.route .t{ flex:1; font-size:16px; font-weight:500; line-height:1.65 }
.route .go{ font-family:var(--font-mono); font-size:14px; color:var(--blue) }

/* 服務長條 */
.svc{ display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line) }
.svc:last-child{ padding-bottom:0; border-bottom:0 }
.svc-body{ display:flex; flex-direction:column; gap:10px }
.svc-body h3{ font-family:var(--font-display); font-size:23px; font-weight:900; line-height:1.5 }
.svc-body p{ max-width:620px }
.svc-stack{ display:flex; flex-direction:column; gap:22px }

/* 條件表 */
.spec{ display:grid; grid-template-columns:96px 1fr; gap:0 20px }
.spec dt{ font-size:14px; font-weight:500; line-height:1.8; color:var(--mute); padding:14px 0; border-top:1px solid var(--line) }
.spec dd{ margin:0; font-size:15.5px; line-height:1.8; padding:14px 0; border-top:1px solid var(--line) }
.spec dt:last-of-type,.spec dd:last-of-type{ border-bottom:1px solid var(--line) }

.numlist{ display:grid; grid-template-columns:36px 1fr; gap:0 16px }
.numlist dt{ font-family:var(--font-num); font-weight:700; font-size:13px; line-height:1.8; color:var(--blue); padding:14px 0; border-top:1px solid var(--line) }
.numlist dd{ margin:0; font-size:15.5px; line-height:1.8; padding:14px 0; border-top:1px solid var(--line) }
.numlist dt:last-of-type,.numlist dd:last-of-type{ border-bottom:1px solid var(--line) }

.dolist{ display:flex; flex-direction:column; gap:14px }
.dolist li{ font-size:15.5px; line-height:1.85; color:var(--ink-2); padding-left:24px; position:relative }
.dolist li::before{ content:""; position:absolute; left:2px; top:.72em; width:10px; height:10px; border-radius:999px; background:var(--sky) }

.goal-block{ padding-top:28px; margin-top:28px; border-top:1px solid var(--line); max-width:var(--measure) }
.goal-block:first-of-type{ padding-top:0; margin-top:0; border-top:0 }
.goal-block h3{ font-family:var(--font-display); font-size:22px; font-weight:900; line-height:1.5; margin-bottom:12px }
.goal-block p + p,.goal-block ul + p{ margin-top:12px }
.goal-block ul{ margin-top:12px }

.nolist{ display:flex; flex-direction:column; gap:14px }
.nolist li{ font-size:15.5px; line-height:1.85; color:var(--ink-2); padding-left:24px; position:relative }
.nolist li::before{ content:""; position:absolute; left:3px; top:.62em; width:8px; height:8px; transform:rotate(45deg); border:2px solid var(--sky); border-left:0; border-bottom:0 }

.split{ display:grid; grid-template-columns:1.3fr 1fr; border-bottom:1px solid var(--line) }
.split > div{ padding:52px 56px }
.split > div:first-child{ border-right:1px solid var(--line) }
.split h2{ font-family:var(--font-display); font-weight:900 }

/* CTA */
.cta{ padding:56px; background:var(--ink); display:flex; align-items:center; gap:48px; position:relative; overflow:hidden }
.cta::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--sky) }
.cta-body{ flex:1; display:flex; flex-direction:column; gap:14px }
.cta h2{ font-family:var(--font-display); font-size:32px; font-weight:900; line-height:1.45; letter-spacing:-.01em; color:#fff }
.cta p{ font-size:16.5px; line-height:1.9; color:rgba(255,255,255,.76); max-width:560px; text-wrap:pretty }
.cta-actions{ display:flex; flex-direction:column; gap:10px; width:260px }
.btn-line-lg{ display:flex; align-items:center; justify-content:center; height:52px; background:var(--line-green); color:#fff; border-radius:999px; font-weight:700; font-size:16px }
.btn-line-lg:hover{ color:#fff; filter:brightness(.95) }
.btn-outline{ display:flex; align-items:center; justify-content:center; height:52px; border:1px solid rgba(255,255,255,.32); color:#fff; border-radius:999px; font-family:var(--font-mono); font-size:14.5px; letter-spacing:.05em }
.btn-outline:hover{ color:#fff; border-color:var(--sky) }

/* 頁尾：墨藍底，白色字標直接顯示原色 */
.site-footer{ padding:52px 40px 34px; background:var(--ink); color:rgba(255,255,255,.72); display:flex; flex-direction:column; gap:32px }
.site-footer a:hover{ color:var(--sky) }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px }
.footer-grid h2{ font-size:14px; font-weight:700; margin-bottom:12px; color:#fff }
.footer-grid p{ font-size:14px; line-height:1.9; color:rgba(255,255,255,.66); max-width:320px; margin-top:14px }
.footer-grid img{ height:24px; width:auto; filter:none }
.footer-grid ul{ display:flex; flex-direction:column; gap:9px }
.footer-grid li{ font-size:14px; line-height:1.5; color:rgba(255,255,255,.72) }
.footer-bottom{ display:flex; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.6) }

/* 手機底部固定條 + 抽屜 */
.bottombar{ display:none }
.drawer{ position:fixed; inset:0; z-index:100; visibility:hidden; pointer-events:none }
body.nav-open .drawer{ visibility:visible; pointer-events:auto }
.drawer-scrim{ position:absolute; inset:0; background:rgba(14,36,51,.46); opacity:0; transition:opacity .28s cubic-bezier(.2,0,0,1) }
body.nav-open .drawer-scrim{ opacity:1 }
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(86vw,340px);
  background:var(--white); border-left:1px solid var(--line);
  padding:18px 22px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.16,1,.3,1);
  box-shadow:-24px 0 48px -16px rgba(14,36,51,.32);
}
body.nav-open .drawer-panel{ transform:none }
body.nav-open{ overflow:hidden }
.drawer-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:3px solid var(--sky) }
.drawer-head img{ height:22px; width:auto; margin-top:6px; filter:brightness(0) saturate(0) }
.drawer-close{ width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; background:var(--bg); border:1px solid var(--line-2); border-radius:999px; font-family:var(--font-mono); font-size:17px; color:var(--ink); cursor:pointer }
.drawer-live{ align-self:flex-start; margin-top:22px; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--ink-2) }
.drawer-live i{ width:7px; height:7px; border-radius:999px; background:var(--line-green) }
.drawer-nav{ display:flex; flex-direction:column; margin-top:10px }
.drawer-nav > li{ border-bottom:1px solid var(--line) }
.drawer-nav a{ display:flex; align-items:center; gap:14px; padding:15px 2px }
.drawer-nav .n{ font-family:var(--font-mono); font-size:11px; color:var(--blue); min-width:22px }
.drawer-nav .lbl{ flex:1; font-family:var(--font-display); font-size:18px; font-weight:900; line-height:1.4 }
.drawer-nav .arr{ font-family:var(--font-mono); font-size:12px; color:var(--mute-2) }
.drawer-sub{ display:flex; flex-direction:column; padding:0 0 12px; margin:0 -6px; }
.drawer-sub a{ padding:11px 8px 11px 32px; border-radius:10px; font-size:14px; font-weight:400; color:var(--ink-2) }
.drawer-sub a:hover{ background:var(--bg) }
.drawer-sub .lbl{ font-family:var(--font-han) }
.drawer-sub .cc{ font-family:var(--font-mono); font-size:10px; color:var(--mute-2); min-width:38px }
.drawer-cta{ display:flex; flex-direction:column; gap:10px; margin-top:26px }
.drawer-cta a{ height:52px; display:flex; align-items:center; justify-content:center; border-radius:999px; font-weight:700; font-size:16px }
.drawer-cta a[style*="--gold"]{ background:var(--sky) !important }
.drawer-foot{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:6px; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--mute) }

/* ==========================================================================
   響應式
   ========================================================================== */
@media (max-width:1180px){
  :root{ --rail:320px }
  .hero h1{ font-size:44px }
  .nav{ gap:2px; font-size:14.5px }
  .nav a{ padding:8px 10px }
}

@media (max-width:1023px){
  .utility{ display:none }
  .site-header{ padding:0 20px; height:62px; gap:12px; position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(12px) }
  .site-header::after{ width:72px }
  .site-logo img{ height:22px }
  .nav,.site-header .btn-line{ display:none }
  .nav-toggle{
    display:inline-flex; align-items:center; gap:8px; margin-left:auto;
    background:var(--sky-soft); border:1px solid var(--line-2); border-radius:999px; padding:9px 14px; cursor:pointer;
  }
  .nav-toggle .bars{ display:flex; flex-direction:column; gap:3px }
  .nav-toggle .bars i{ width:15px; height:2px; background:var(--ink); border-radius:2px }
  .nav-toggle .lbl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; color:var(--ink) }

  .crumb{ padding:14px 20px; font-size:12.5px }

  /* 手機無軌：價格已在 01 星等刻度段完整呈現 */
  .shell{ grid-template-columns:1fr }
  .rail{ display:none }

  .hero{ padding:32px 20px 34px }
  .hero h1{ font-size:31px; line-height:1.45; margin-top:12px }
  .hero .sub{ font-size:15.5px; margin-top:14px }
  .hero .keywords{ font-size:12.5px }
  .facts{ flex-wrap:wrap; gap:18px 24px }
  .facts hr{ display:none }
  .facts b{ font-size:21px }

  .sec{ padding:34px 20px }
  .sec-title{ margin-bottom:18px; gap:10px }
  .sec-title h2{ font-size:25px; line-height:1.45 }
  .sec-title .n{ min-width:32px; height:32px; font-size:12.5px }
  .sec-title .aside{ display:none }
  .sec p{ font-size:15px; line-height:1.9 }
  .lede{ font-size:17px }

  .ph-21x9,.photo-hero{ aspect-ratio:4/3 }
  .ph span{ font-size:11px }
  .ph span i{ font-size:12.5px }

  /* 刻度尺改單欄列 */
  .ruler{ grid-template-columns:1fr }
  .ruler > div{ padding:15px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.14); gap:8px }
  .ruler > div:first-child::before{ display:none }
  .ruler > div.pin{ margin:0 -20px; padding-left:20px; padding-right:20px }
  .ruler .head{ display:flex; flex-direction:row; align-items:baseline; gap:12px }
  .ruler .lv{ flex:1 }
  .ruler .amt{ font-size:21px }
  .ruler .use{ display:none }
  .ruler .lv em{ font-style:normal; color:rgba(255,255,255,.5); margin-left:8px; font-size:12.5px }
  .ruler .pin .lv em{ color:var(--sky) }
  .ruler-foot{ gap:8px; flex-direction:column; align-items:flex-start }
  .ruler-foot a{ margin-left:0 }

  .routes{ grid-template-columns:1fr; gap:10px }
  .route{ padding:16px 18px }
  .route .t{ font-size:15px }

  .svc{ grid-template-columns:1fr; gap:16px; padding-bottom:22px }
  .svc-body h3{ font-size:20px }

  .split{ grid-template-columns:1fr }
  .split > div{ padding:34px 20px }
  .split > div:first-child{ border-right:0; border-bottom:1px solid var(--line) }
  .spec{ grid-template-columns:1fr; gap:0 }
  .spec dt{ padding:13px 0 0; border-top:1px solid var(--line) }
  .spec dd{ padding:4px 0 13px; border-top:0 }
  .spec dt:last-of-type{ border-bottom:0 }

  .cta{ padding:36px 20px 38px; flex-direction:column; align-items:stretch; gap:18px }
  .cta h2{ font-size:25px }
  .cta p{ font-size:15px }
  .cta-actions{ width:auto }

  .site-footer{ padding:36px 20px 130px }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px }
  .footer-grid > div:first-child{ grid-column:1 / -1 }
  .footer-bottom{ flex-direction:column; gap:8px }

  /* 底部固定操作條 */
  .bottombar{
    display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:12px 20px calc(18px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.95); border-top:1px solid var(--line);
    backdrop-filter:blur(12px);
  }
  .bottombar a{ height:52px; display:flex; align-items:center; justify-content:center; border-radius:999px; font-weight:700 }
  .bottombar .bb-line{ flex:1.8; background:var(--line-green); color:#fff; font-size:16px }
  .bottombar .bb-line:hover{ color:#fff }
  .bottombar .bb-alt{ flex:1; background:var(--sky-soft); border:1px solid var(--line-2); color:var(--ink); font-size:15px }
}

@media (max-width:400px){
  .hero h1{ font-size:28px }
  .sec-title h2{ font-size:23px }
}

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

@media print{
  .bottombar,.drawer,.nav-toggle,.rail{ display:none !important }
  .shell{ grid-template-columns:1fr }
  body{ font-size:12pt }
}


/* ---------- 內頁：規格對照表 ---------- */
.tbl{ display:grid; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--white) }
.tbl .tr{ display:contents }
.tbl > div,.tbl .tr > div{ border-bottom:1px solid var(--line); padding:15px 20px }
.tbl .tr:last-child > div{ border-bottom:0 }
.tbl .th{ padding-top:12px; padding-bottom:12px; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--blue); background:var(--sky-soft); border-bottom:1px solid var(--line) }
.tbl .hl{ background:var(--bg) }
.tbl .tr.on > div{ background:var(--sky-soft) }
.tbl .tr > div[data-l=""]{ display:block }
.tbl .tr > div[data-l=""] .n{ margin-right:0 }
.tbl .hl.pad{ padding-left:16px }
.t5{ grid-template-columns:44px 1.5fr 1fr 1.4fr 1.1fr }
.t4{ grid-template-columns:1fr 1fr 1fr 1.2fr }
.t3{ grid-template-columns:260px 1fr 140px }
.t3 .right{ text-align:right }
.tbl b{ font-size:16px; font-weight:700; line-height:1.7 }
.tbl span{ font-size:15px; line-height:1.8; color:var(--ink-2) }
.tbl .n{ font-family:var(--font-num); font-weight:700; font-size:14px; color:var(--blue) }

/* ---------- 專案方案 ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.plan{ border:1px solid var(--line); border-radius:var(--radius); background:var(--white); padding:26px 24px; display:flex; flex-direction:column; gap:12px }
.plan.best{ border:2px solid var(--sky); background:var(--sky-soft) }
.plan .lb{ font-size:14px; font-weight:500; color:var(--mute) }
.plan .was{ font-size:15px; color:var(--mute-2); text-decoration:line-through }
.plan .now{ font-family:var(--font-num); font-weight:700; font-size:34px; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.plan p{ font-size:14px; line-height:1.8 }
.plan h3{ font-family:var(--font-display) }

/* ---------- 事實卡 ---------- */
.facts3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.facts3 div{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; display:flex; flex-direction:column; gap:6px }
.facts3 b{ font-family:var(--font-num); font-weight:700; font-size:22px; color:var(--ink) }
.facts3 span{ font-size:14px; line-height:1.7; color:var(--mute) }

/* ---------- FAQ 手風琴 ---------- */
.faq{ display:flex; flex-direction:column; gap:10px; max-width:900px }
.faq details{ border:1px solid var(--line); border-radius:var(--radius); background:var(--white); padding:0 22px }
.faq details[open]{ border-color:var(--line-2) }
.faq details.flag,.faq details.flag[open]{ background:var(--sky-soft) }
.faq summary{ display:flex; align-items:baseline; gap:14px; padding:18px 0; cursor:pointer; list-style:none }
.faq summary::-webkit-details-marker{ display:none }
.faq summary .q{ flex:1; font-size:17px; font-weight:700; line-height:1.55 }
.faq details[open] summary .q{ font-size:18px }
.faq summary .s{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--bg); font-family:var(--font-mono); font-size:15px; color:var(--blue) }
.faq details[open] summary .s{ background:var(--sky); color:var(--ink) }
.faq details[open] summary .s::before{ content:"−" }
.faq summary .s::before{ content:"＋" }
.faq p{ padding:0 0 20px; max-width:780px; font-size:16px; line-height:1.9; color:var(--ink-2) }

/* ---------- 星數試算 ---------- */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start }
.calc-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px }
.calc-in{ display:flex; gap:10px; margin-top:18px }
.calc-in div{ flex:1; border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; background:var(--bg) }
.calc-in div.tgt{ border-color:var(--sky); background:var(--sky-soft) }
.calc-in span{ font-size:12px; color:var(--mute) }
.calc-in b{ font-family:var(--font-num); font-weight:700; font-size:22px; font-variant-numeric:tabular-nums }
.calc-in label{ font-size:12px; color:var(--mute) }
.calc-in input{ width:100%; border:0; padding:0; background:transparent; color:var(--ink); font-family:var(--font-num); font-weight:700; font-size:22px; font-variant-numeric:tabular-nums; -moz-appearance:textfield }
.calc-in input:focus{ outline:2px solid var(--sky); outline-offset:4px }
.calc-in input::-webkit-outer-spin-button,
.calc-in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.calc-out{ background:var(--ink); border-radius:var(--radius); padding:24px; margin-top:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px }
.calc-out span{ font-size:13px; line-height:1.8; color:rgba(255,255,255,.7) }
.calc-out .big{ font-family:var(--font-num); font-weight:700; font-size:46px; color:#fff; letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.calc-out .amt{ font-family:var(--font-num); font-weight:700; font-size:30px; color:var(--sky); letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.calc-note{ display:flex; flex-direction:column; gap:8px; margin-top:16px }
.calc-note span{ font-size:13.5px; line-height:1.8; color:var(--mute) }
.mini{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px }
.mini h3{ font-family:var(--font-display); font-size:19px; font-weight:900; line-height:1.5; margin-bottom:14px }
.mini p{ font-size:14px !important; line-height:1.85; color:var(--mute) !important; margin-top:14px }
.mini-tbl{ display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid var(--line) }
.mini-tbl > *{ padding:12px 0; border-bottom:1px solid var(--line) }
.mini-tbl .th{ font-size:12.5px; font-weight:500; color:var(--mute) }
.mini-tbl b{ font-family:var(--font-num); font-weight:700; font-size:16px }
.mini-tbl span{ font-size:14px; color:var(--ink-2) }
.eq{ font-family:var(--font-mono); font-size:16px; color:var(--ink); background:var(--sky-soft); padding:4px 10px; border-radius:8px; border:1px solid var(--line) }

/* ---------- 服務索引軌 ---------- */
.idx-h{ font-size:13px; font-weight:700; display:block; padding-bottom:10px; border-bottom:2px solid var(--sky) }
.idx-r{ display:flex; align-items:baseline; gap:10px; padding:10px 0; border-bottom:1px solid var(--line) }
.idx-r:hover .t{ color:var(--blue) }
.idx-r .t{ flex:1; font-size:14px; font-weight:500; line-height:1.5 }
.idx-r .tag{ font-size:12px; font-weight:700; color:var(--gold-ink); background:var(--gold-soft); border-radius:999px; padding:3px 9px; white-space:nowrap }
.idx-r .q{ font-size:12.5px; color:var(--mute); white-space:nowrap }

/* ---------- 六格狀況卡 ---------- */
.grid6{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.grid6 a{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; display:flex; flex-direction:column; gap:12px; min-height:152px; transition:border-color .2s, box-shadow .2s }
.grid6 a:hover{ border-color:var(--sky); box-shadow:0 10px 24px -18px rgba(14,36,51,.45); color:inherit }
.grid6 .n{ font-family:var(--font-num); font-weight:700; font-size:13px; color:var(--blue) }
.grid6 .t{ flex:1; font-size:16.5px; font-weight:500; line-height:1.7 }
.grid6 .go{ font-size:14.5px; font-weight:700; color:var(--blue) }

/* ---------- 提示框 ---------- */
.note{ background:var(--sky-soft); border-left:4px solid var(--sky); border-radius:0 var(--radius) var(--radius) 0; padding:20px 24px; max-width:900px }
.note.warn{ background:var(--danger-soft); border-left-color:var(--danger) }
.note.warn p{ color:var(--danger-ink) }
.note.warn .hd{ font-size:17px; font-weight:700; line-height:1.8; color:var(--danger); margin-bottom:10px }

@media (max-width:1023px){
  /* 對照表 → 卡片：列容器變回區塊，每格以 data-l 標籤自我說明 */
  .tbl{ display:flex; flex-direction:column; gap:10px; border:0; border-radius:0; overflow:visible; background:transparent }
  .tbl .th{ display:none }
  .tbl .tr{
    display:block; border:1px solid var(--line); border-radius:var(--radius); background:#fff;
    padding:16px 18px 14px;
  }
  .tbl .tr.on{ border-color:var(--sky); background:var(--sky-soft) }
  .tbl .tr > div{ border-bottom:0; padding:0; display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:baseline }
  .tbl .tr > div + div{ margin-top:9px }
  .tbl .tr > div::before{
    content:attr(data-l); font-size:12.5px; line-height:1.75; color:var(--mute-2);
  }
  .tbl .tr > div[data-l=""]:not(.hd){ display:none }
  .tbl .tr > div.hd{ display:block; margin-top:0; margin-bottom:6px }
  .tbl .tr > div.hd::before{ content:none }
  .tbl .tr .hl,.tbl .tr.on .hl,.tbl .tr.on > div{ background:transparent; padding-left:0 }
  .tbl .tr b{ font-size:17px }
  .tbl .tr span{ font-size:13.5px; line-height:1.75 }
  .tbl .tr .right{ text-align:left }
  .tbl .tr .n{ font-size:13px }
  .plans{ grid-template-columns:1fr; gap:10px }
  .plan{ flex-direction:row; align-items:baseline; gap:14px; padding:18px 20px }
  .plan p{ display:none }
  .plan .lb{ min-width:54px }
  .plan .now{ margin-left:auto; font-size:24px }
  .facts3{ grid-template-columns:1fr; gap:10px }
  .facts3 div{ flex-direction:row; align-items:baseline; gap:12px }
  .facts3 b{ font-size:18px; min-width:62px }
  .faq details{ padding:0 16px }
  .faq summary{ padding:15px 0 }
  .faq summary .q{ font-size:15.5px }
  .faq details[open] summary .q{ font-size:16px }
  .calc{ grid-template-columns:1fr }
  .calc-box{ padding:22px }
  .calc-in{ gap:8px }
  .calc-in b{ font-size:19px }
  .calc-in input{ font-size:19px }
  .calc-out{ padding:20px }
  .calc-out .big{ font-size:34px }
  .calc-out .amt{ font-size:26px }
  .mini-tbl{ grid-template-columns:1fr auto }
  .numlist{ grid-template-columns:28px 1fr; gap:0 12px }
  .numlist dt{ font-size:12.5px; padding:12px 0 }
  .numlist dd{ font-size:14.5px; padding:12px 0 }
  .grid6{ grid-template-columns:1fr; gap:10px }
  .grid6 a{ min-height:0; padding:16px 18px; gap:8px }
  .grid6 .t{ font-size:15px }
  .grid6 .go{ font-size:13.5px }
  .note{ padding:16px 18px }
}


/* ==========================================================================
   C 級：無軌頁面（contact / 404 / privacy / terms）
   ========================================================================== */
.plain{ display:block }
.plain .content{ display:flex; flex-direction:column }
.wrap{ max-width:920px; margin:0 auto; padding:72px 40px 64px; width:100% }
.wrap-narrow{ max-width:var(--measure) }
.wrap h1,.wrap h2{ font-family:var(--font-display); font-weight:900 }

/* 聯絡管道大卡 */
.chan{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.chan a{ padding:34px 32px; display:flex; flex-direction:column; gap:14px; border-radius:var(--radius) }
.chan .k{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; font-weight:500 }
.chan .go{ font-size:15px; font-weight:700; margin-top:4px }
.chan-line{ background:var(--line-green) }
.chan-line:hover{ filter:brightness(.95); color:#fff }
.chan-line .k{ color:rgba(255,255,255,.82) }
.chan-line .t{ font-family:var(--font-display); font-size:30px; font-weight:900; line-height:1.4; color:#fff }
.chan-line p,.chan-line .go{ color:rgba(255,255,255,.92) }
.chan-mail{ background:var(--sky-soft); border:1px solid var(--line) }
.chan-mail:hover{ border-color:var(--sky); color:inherit }
.chan-mail .k{ color:var(--blue) }
.chan-mail .t{ font-family:var(--font-mono); font-size:26px; font-weight:700; line-height:1.4; color:var(--ink) }
.chan-mail p{ color:var(--ink-2) }
.chan-mail .go{ color:var(--blue) }
.chan p{ font-size:15.5px; line-height:1.85 }

.pair{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start }
.card{ border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px; background:var(--white) }
.card.tint{ background:var(--bg); border-color:transparent }
.card h2{ font-family:var(--font-display); font-size:24px; font-weight:900; line-height:1.5; margin-bottom:16px }
.card p{ font-size:15.5px; line-height:1.9; color:var(--ink-2) }
.jump{ display:flex; flex-direction:column }
.jump a{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:15.5px; font-weight:500; line-height:1.7 }
.jump a:last-child{ border-bottom:1px solid var(--line) }
.jump a span:first-child{ flex:1 }
.jump .go{ font-family:var(--font-mono); font-size:13px; color:var(--blue) }

/* 404 */
.err{ padding:96px 40px 88px; background:var(--ink); display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center }
.err .code{ font-family:var(--font-num); font-weight:700; font-size:88px; line-height:1; color:var(--sky); letter-spacing:-.05em }
.err h1{ font-family:var(--font-display); font-size:44px; font-weight:900; line-height:1.4; color:#fff }
.err p{ font-size:17.5px; line-height:1.9; color:rgba(255,255,255,.76); max-width:560px; text-wrap:pretty }
.err .btn-gold{ padding:0 30px; margin-top:6px; height:56px; font-size:16px }
.quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.quick a{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; display:flex; align-items:center; gap:14px }
.quick a:hover{ border-color:var(--sky); color:inherit }
.quick .t{ flex:1; font-size:16.5px; font-weight:500; line-height:1.6 }
.quick .go{ font-family:var(--font-mono); font-size:13px; color:var(--blue) }

/* 法務頁：節號索引 + 正文 */
.legal{ display:grid; grid-template-columns:240px 1fr; gap:56px; padding:56px 40px 72px }
.legal-idx{ display:flex; flex-direction:column; gap:16px; position:sticky; top:20px; align-self:start; max-height:calc(100vh - 40px); overflow-y:auto;
  scrollbar-width:none; -ms-overflow-style:none }
.legal-idx::-webkit-scrollbar{ width:0; height:0 }
.legal-idx .rows{ display:flex; flex-direction:column }
.legal-idx a{ display:flex; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid var(--line) }
.legal-idx a:last-of-type{ border-bottom:1px solid var(--line) }
.legal-idx a.key{ background:var(--sky-soft); margin:0 -10px; padding-left:10px; padding-right:10px; border-radius:8px }
.legal-idx .n{ font-family:var(--font-mono); font-size:11px; color:var(--mute) }
.legal-idx a.key .n{ color:var(--blue) }
.legal-idx .t{ font-size:13.5px; font-weight:500; line-height:1.6 }
.legal-idx a.key .t{ font-weight:700 }
.legal-idx small{ font-size:12.5px; line-height:1.8; color:var(--mute) }
.legal-body{ max-width:var(--measure); display:flex; flex-direction:column; gap:40px }
.legal-body h1{ font-family:var(--font-display); font-size:44px; font-weight:900; line-height:1.4 }
.legal-meta{ background:var(--bg); padding:18px 22px; border-left:4px solid var(--sky); border-radius:0 var(--radius) var(--radius) 0; font-size:14.5px; line-height:1.9; color:var(--ink-2); margin-top:18px }
.art{ display:flex; flex-direction:column; gap:14px }
.art-h{ display:flex; align-items:center; gap:14px }
.art-h .n{ display:inline-grid; place-items:center; min-width:34px; height:34px; border-radius:999px; background:var(--sky-soft); font-family:var(--font-num); font-weight:700; font-size:13.5px; color:var(--blue) }
.art-h h2{ font-family:var(--font-display); font-size:26px; font-weight:900; line-height:1.5 }
.art p{ font-size:16.5px; line-height:1.95; color:var(--ink-2); text-wrap:pretty }
.art h3{ font-size:19px; font-weight:700; line-height:1.6 }
.art.hero-art{ background:var(--ink); padding:34px 36px; margin:0 -36px; border-radius:var(--radius) }
.art.hero-art .art-h .n{ background:rgba(41,170,225,.18); color:var(--sky) }
.art.hero-art .art-h h2{ color:#fff; font-size:28px }
.art.hero-art p{ font-size:17px; color:rgba(255,255,255,.86) }
.art.hero-art strong{ color:#fff }
.art.tint{ background:var(--bg); padding:28px 30px; margin:0 -30px; border-radius:var(--radius) }
.rights{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px }
.rights div{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 14px; display:flex; flex-direction:column; gap:8px }
.rights .n{ font-family:var(--font-num); font-weight:700; font-size:13px; color:var(--blue) }
.rights .t{ font-size:14.5px; font-weight:500; line-height:1.7 }
.legal-cta{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.legal-cta a{ padding:20px 22px; display:flex; flex-direction:column; gap:8px; border-radius:var(--radius) }
.legal-cta .m{ background:var(--sky-soft); border:1px solid var(--line) }
.legal-cta .m:hover{ border-color:var(--sky); color:inherit }
.legal-cta .l{ background:var(--line-green) }
.legal-cta .l:hover{ filter:brightness(.95); color:#fff }
.legal-cta .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; font-weight:500 }
.legal-cta .m .k{ color:var(--blue) }
.legal-cta .l .k{ color:rgba(255,255,255,.82) }
.legal-cta .m .v{ font-family:var(--font-mono); font-size:18px; font-weight:700; line-height:1.5; color:var(--ink) }
.legal-cta .l .v{ font-size:18px; font-weight:700; line-height:1.5; color:#fff }
.legal-idx-m{ display:none }

@media (max-width:1023px){
  .wrap{ padding:32px 20px 36px }
  .chan{ grid-template-columns:1fr; gap:12px }
  .chan a{ padding:26px 24px; gap:11px }
  .chan-line .t{ font-size:25px }
  .chan-mail .t{ font-size:20px }
  .chan p{ font-size:14.5px }
  .pair{ grid-template-columns:1fr; gap:12px }
  .card{ padding:24px 20px }
  .card h2{ font-size:22px }
  .err{ padding:56px 20px 52px; gap:16px }
  .err .code{ font-size:62px }
  .err h1{ font-size:29px; line-height:1.45 }
  .err p{ font-size:15.5px }
  .err .btn-gold{ align-self:stretch }
  .quick{ grid-template-columns:1fr; gap:10px }
  .quick a{ padding:16px 18px }
  .quick .t{ font-size:16px }

  .legal{ grid-template-columns:1fr; gap:0; padding:0 }
  .legal-idx{ display:none }
  .legal-idx-m{
    display:block; padding:18px 20px; background:var(--bg);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .legal-idx-m .rows{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; margin-top:12px }
  .legal-idx-m a{ display:flex; align-items:baseline; gap:8px; padding:9px 0; border-top:1px solid var(--line) }
  .legal-idx-m .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--mute) }
  .legal-idx-m a.key .n{ color:var(--blue) }
  .legal-idx-m .t{ font-size:13.5px; line-height:1.6 }
  .legal-idx-m a.key .t{ font-weight:700 }
  .legal-body{ max-width:none; padding:28px 20px 34px; gap:30px }
  .legal-body h1{ font-size:32px }
  .legal-meta{ padding:16px 18px; font-size:13.5px }
  .art-h h2{ font-size:22px }
  .art p{ font-size:14.5px; line-height:1.9 }
  .art h3{ font-size:17px }
  .art.hero-art{ padding:26px 20px; margin:0 -20px; border-radius:0 }
  .art.hero-art .art-h h2{ font-size:23px }
  .art.hero-art p{ font-size:15px }
  .art.tint{ padding:22px 20px; margin:0 -20px; border-radius:0 }
  .rights{ grid-template-columns:1fr 1fr }
  .rights div{ padding:14px }
  .rights .t{ font-size:14px }
  .legal-cta{ grid-template-columns:1fr; gap:10px }
  .legal-cta a{ padding:18px 20px }
  .legal-cta .m .v,.legal-cta .l .v{ font-size:17px }
}


/* ==========================================================================
   方向 C「卡片」（2026-10-15，使用者選定）：不使用側邊欄
   淺灰藍底上，每一段是一張白色圓角卡片；大標區是一整塊天藍。
   左側價目軌已從所有頁面移除，本頁目錄改為大標下方的 .toc 段落標籤。
   ========================================================================== */
:root{ --font-display:var(--font-han); --radius:18px; --card-gap:max(20px, calc((100% - 1136px) / 2)) }
body{ background:#e9f0f5 }
.site-header{ background:#e9f0f5; border-bottom:0 }
.site-header::after{ display:none }
.crumb{ background:transparent; border-bottom:0; padding-left:var(--card-gap); padding-right:var(--card-gap) }
.shell{ display:block }
.content{ gap:18px; padding:0 0 28px }

.hero{ background:var(--sky); border-bottom:0; margin:0 var(--card-gap); border-radius:28px; padding:56px 48px }
.hero .brand{ color:var(--ink) }
.hero .brand::before{ background:var(--ink) }
.hero h1{ font-weight:900; letter-spacing:-.02em }
.hero h1 em{ color:#fff }
.hero .sub{ color:var(--ink) }
.hero .keywords,.facts span{ color:var(--ink-2) }
.facts{ border-top-color:rgba(14,36,51,.18) }
.facts hr{ background:rgba(14,36,51,.18) }

.ph-21x9,.photo-hero{ margin:0 var(--card-gap); border-radius:28px; border-bottom:0; aspect-ratio:21/8; overflow:hidden }

.sec,.sec.tint,.split,.cta,.svc-index{ background:#fff; border-bottom:0; border-radius:28px; margin:0 var(--card-gap); box-shadow:0 18px 40px -32px rgba(14,36,51,.5) }
.sec,.sec.tint,.cta,.svc-index{ padding:48px }
.sec.navy{ background:var(--ink) }
.split{ padding:0; overflow:hidden }
.split > div{ padding:48px }
.cta{ background:var(--ink) }
.sec-title .n{ min-width:auto; height:auto; padding:0; background:none; border-radius:0; font-size:44px; line-height:1; color:var(--sky) }
.sec.navy .sec-title .n{ background:none }
.sec-title h2{ font-weight:900; letter-spacing:-.02em }
.site-footer{ margin-top:10px }

/* 本頁目錄：大標下方一排段落標籤 */
.toc{ display:flex; flex-wrap:wrap; gap:8px; margin:0 var(--card-gap) }
.toc a{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:14px; font-weight:500; line-height:1.5; color:var(--ink-2) }
.toc a:hover{ border-color:var(--sky); color:var(--ink) }

/* /service 的服務索引：原本在側邊欄，移進內文 */
.svc-index-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 40px }
.svc-index-col{ display:flex; flex-direction:column }
.svc-index-foot{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--line) }
.svc-index-foot .price-row{ margin-top:0 !important; border-top:0 !important; padding:0 }

/* 無軌頁面也放進卡片 */
.wrap{ background:#fff; border-radius:28px; margin:18px auto 28px; max-width:1136px; box-shadow:0 18px 40px -32px rgba(14,36,51,.5) }
.err{ margin:0 var(--card-gap); border-radius:28px }
.legal{ grid-template-columns:1fr; gap:28px; background:#fff; border-radius:28px; margin:0 var(--card-gap) 28px; box-shadow:0 18px 40px -32px rgba(14,36,51,.5) }
.legal-idx{ display:none }
.legal-idx-m{ display:block; background:#fff; border:0; border-radius:28px; padding:22px 48px; margin:0 var(--card-gap) 18px; box-shadow:0 18px 40px -32px rgba(14,36,51,.5) }
.legal-idx-m .rows{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 18px; margin-top:12px }
.legal-idx-m a{ display:flex; align-items:baseline; gap:8px; padding:9px 0; border-top:1px solid var(--line) }
.legal-idx-m .n{ font-family:var(--font-mono); font-size:10.5px; color:var(--mute) }
.legal-idx-m a.key .n{ color:var(--blue) }
.legal-idx-m .t{ font-size:13.5px; line-height:1.6 }
.legal-idx-m a.key .t{ font-weight:700 }
.legal-body{ max-width:var(--measure) }

@media (max-width:1023px){
  :root{ --card-gap:12px }
  .crumb{ padding-left:20px; padding-right:20px }
  .hero{ padding:32px 22px; border-radius:22px }
  .ph-21x9,.photo-hero{ border-radius:22px; aspect-ratio:4/3 }
  .sec,.sec.tint,.split,.cta,.svc-index,.wrap,.err,.legal{ border-radius:22px }
  .sec,.sec.tint,.cta,.svc-index{ padding:30px 20px }
  .split > div{ padding:30px 20px }
  .sec-title .n{ font-size:32px }
  .toc{ gap:6px }
  .toc a{ font-size:13px; padding:7px 12px }
  .svc-index-grid{ grid-template-columns:1fr }
  .svc-index-foot{ grid-template-columns:1fr }
  .wrap{ margin:12px; width:auto }
  .legal{ padding:0 }
  .legal-idx-m{ border-radius:22px; padding:18px 20px; margin-bottom:12px }
  .legal-idx-m .rows{ grid-template-columns:1fr 1fr }
}

/* 側邊欄拿掉後，桌機上唯一一直看得到的是頁首：固定在上方，「加 LINE 好友洽詢」隨時點得到 */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(233,240,245,.94); backdrop-filter:blur(12px) }
[id]{ scroll-margin-top:96px }
@media (max-width:1023px){ [id]{ scroll-margin-top:76px } }

/* 頁首與頁尾對齊卡片寬度，不再滿版（使用者 2026-10-15：「上下區塊變成是滿版的」） */
.utility{ background:transparent; height:34px; padding-left:var(--card-gap); padding-right:var(--card-gap) }
.utility p{ color:var(--ink-2) }
.utility span{ color:var(--mute) }
.site-header{ padding-left:var(--card-gap); padding-right:var(--card-gap) }
.site-footer{ margin:10px var(--card-gap) 28px; border-radius:28px; padding:48px 48px 30px; box-shadow:0 18px 40px -32px rgba(14,36,51,.5) }
@media (max-width:1023px){
  .site-header{ padding-left:20px; padding-right:20px }
  .site-footer{ margin:10px var(--card-gap) 120px; border-radius:22px; padding:32px 20px 24px }
}

/* 品牌區：方形 m 標誌＋中文名為主＋英文小字（使用者 2026-10-15：「品牌區需要重新設計」，參考 aunalee 的配置） */
.sprite{ position:absolute; width:0; height:0; overflow:hidden }
.site-brand{ display:inline-flex; align-items:center; gap:10px; margin:0; white-space:nowrap; color:var(--ink); text-decoration:none; line-height:1 }
.site-brand .mark{ width:34px; height:34px; flex:none; display:block }
.site-brand .zh{ font-size:24px; font-weight:900; letter-spacing:.1em; line-height:1 }
.site-brand .en{ font-family:var(--font-num); font-size:11px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); line-height:1; padding-top:5px }
.footer-grid .site-brand{ color:#fff; max-width:none; margin-top:0; line-height:1 }
.footer-grid .site-brand .en{ color:rgba(255,255,255,.6) }
.drawer-head .site-brand{ margin-top:2px }
.drawer-head .site-brand .zh{ font-size:21px }
.drawer-head .site-brand .mark{ width:30px; height:30px }
@media (max-width:1023px){
  .site-header .site-brand{ gap:8px }
  .site-header .site-brand .mark{ width:30px; height:30px }
  .site-header .site-brand .zh{ font-size:21px }
  .site-header .site-brand .en{ display:none }
}

/* 主選單：四個主題分類加下拉，與手機選單同一份分組（使用者 2026-10-15：「重新設計主選單的項目」，參考 roetta、jackopa） */
.nav{ align-items:center }
.nav-item{ position:relative }
.nav-item > .nav-top{ display:inline-flex; align-items:center; gap:7px }
.nav-item > .nav-top::after{ content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:.5; transition:transform .15s }
.nav-item:hover > .nav-top::after, .nav-item:focus-within > .nav-top::after{ transform:translateY(1px) rotate(225deg) }
.nav-item:hover > .nav-top, .nav-item:focus-within > .nav-top{ background:var(--white); color:var(--ink) }
.nav-panel{ position:absolute; top:100%; left:-6px; z-index:60; min-width:270px; margin-top:12px; padding:10px; display:flex; flex-direction:column; gap:2px;
  background:var(--white); border-radius:18px; box-shadow:0 0 0 1px var(--line), 0 26px 50px -28px rgba(14,36,51,.45);
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s, transform .15s, visibility 0s linear .15s }
.nav-panel::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px }
.nav-item:hover > .nav-panel, .nav-item:focus-within > .nav-panel{ opacity:1; visibility:visible; transform:none; transition:opacity .15s, transform .15s }
.nav .nav-panel a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; font-size:14.5px; font-weight:500; line-height:1.4; color:var(--ink-2); white-space:nowrap }
.nav .nav-panel a:hover{ background:var(--bg); color:var(--ink) }
.nav .nav-panel a[aria-current="page"]{ background:var(--sky-soft); color:var(--ink); font-weight:700 }
.nav-panel .cc{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--mute-2); min-width:50px }
.drawer-sub .lbl{ font-size:14px; font-weight:400 }
.drawer-nav a[aria-current="page"] .lbl{ color:var(--blue); font-weight:700 }
.drawer-nav > li > a[aria-current="page"] .lbl{ font-weight:900 }
@media (prefers-reduced-motion:reduce){ .nav-panel, .nav-item > .nav-top::after{ transition:none } }

/* 知識文章總覽 /guides（使用者 2026-10-15：「新增 /guides 文章總覽頁」） */
.guide-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.guide-list a{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; display:flex; flex-direction:column; gap:10px; color:inherit; transition:border-color .2s, box-shadow .2s }
.guide-list a:hover{ border-color:var(--sky); box-shadow:0 10px 24px -18px rgba(14,36,51,.45); color:inherit }
.guide-list .cc{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--blue) }
.guide-list h3{ font-size:18px; font-weight:700; line-height:1.55; margin:0 }
.guide-list p{ flex:1; font-size:14.5px; line-height:1.85; color:var(--mute); margin:0 }
.guide-list .go{ font-size:13.5px; font-weight:700; color:var(--blue) }
.guide-svc{ margin-top:18px; font-size:14.5px; color:var(--ink-2) }
.guide-svc a{ color:var(--blue); font-weight:700 }
.routes-foot{ margin-top:16px; font-size:14.5px; color:var(--ink-2) }
.routes-foot a{ color:var(--blue); font-weight:700 }
@media (max-width:767px){ .guide-list{ grid-template-columns:1fr } .guide-list a{ padding:20px } }