/* ==========================================================================
   韋諾帕 Wenopa — 蒸氣藍・星金（3a 左固定價目軌）
   單一樣式表，取代原模板的 bootstrap / aos / owl / slick / nice-select / main.css
   ========================================================================== */

:root{
  --bg:#eaf1f5;
  --paper:#dde7ed;
  --white:#ffffff;
  --ink:#0a2a40;
  --ink-2:#163d56;
  --mute:#52697d;      /* AA: 5.71 on white, 5.01 on --bg */
  --mute-2:#577086;    /* AA: 5.16 on white, 4.52 on --bg */
  --line:#cbd9e2;
  --line-2:#b6c9d5;
  --blue:#0f6cc5;
  --gold:#e8930c;        /* 只當底色，上面放深藍字 */
  --gold-ink:#8a5200;    /* 金色文字用 */
  --gold-soft:#fdefd6;
  --danger:#a8261c;
  --danger-soft:#fbeeec;
  --danger-ink:#4a2320;
  --line-green:#06C755;
  --frame:#dbe5ec;

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

  --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) }
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:38px; background:var(--ink) }
.utility p{ font-size:12.5px; line-height:1; color:rgba(255,255,255,.72) }
.utility span{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:rgba(255,255,255,.6) }

.site-header{ display:flex; align-items:center; gap:36px; padding:0 40px; height:76px; border-bottom:1px solid var(--line); background:var(--white) }
.site-logo img{ height:25px; width:auto; filter:brightness(0) saturate(0) }
.nav{ display:flex; gap:28px; font-size:16px; font-weight:500; color:var(--ink-2) }
.nav a.is-active{ color:var(--ink); font-weight:700; border-bottom:2px solid var(--gold); padding-bottom:5px }
.btn-line{ margin-left:auto; background:var(--line-green); color:#fff; font-weight:700; font-size:15px; padding:14px 22px; border-radius:8px }
.btn-line:hover{ color:#fff; filter:brightness(.95) }
.nav-toggle{ display:none }

.crumb{ padding:22px 40px; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--mute) }
.crumb b{ color:var(--ink); font-weight:400 }

/* ---------- 骨架：左固定價目軌 + 右內容 ---------- */
.shell{ display:grid; grid-template-columns:var(--rail) 1fr }
.rail{
  background:var(--bg); border-right:1px solid var(--line);
  padding:34px 32px; display:flex; flex-direction:column; gap:26px;
  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{ padding-top:22px; border-top:1px solid var(--line) }
.rail-group:first-of-type{ padding-top:0; border-top:0 }

.price-head{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--ink) }
.price-head b{ font-size:17px; font-weight:700 }
.price-head span{ font-size:12.5px; color:var(--mute) }
.price-row{ display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line) }
.price-row:last-child{ border-bottom-color:var(--ink) }
.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); 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 }
.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(--gold); color:var(--ink); border-radius:8px; 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:8px; 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 }

/* ---------- 內容區塊 ---------- */
.content{ display:flex; flex-direction:column }
.sec{ padding:44px 48px; border-bottom:1px solid var(--line) }
.sec.tint{ background:var(--bg) }
.sec.navy{ background:var(--ink) }
.sec-title{ display:flex; align-items:baseline; gap:14px; margin-bottom:22px; flex-wrap:wrap }
.sec-title .n{ font-family:var(--font-num); font-weight:700; font-size:15px; color:var(--gold-ink) }
.sec.navy .sec-title .n{ color:var(--gold) }
.sec-title h2{ font-size:30px; font-weight:900; line-height:1.4; letter-spacing:-.025em }
.sec.navy .sec-title h2{ color:#fff }
.sec-title .aside{ font-size:14.5px; color:var(--mute); font-weight:400 }
.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 }

/* 英雄區 */
.hero{ padding:54px 48px 46px; border-bottom:1px solid var(--line) }
.hero .brand{ font-size:14.5px; color:var(--blue) }
.hero h1{ font-size:52px; font-weight:900; line-height:1.38; letter-spacing:-.03em; margin-top:16px; max-width:760px; text-wrap:pretty }
.hero h1 em{ font-style:normal; color:var(--gold-ink) }
.hero .sub{ font-size:17.5px; line-height:1.9; color:var(--ink-2); margin-top:18px; max-width:660px; 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:660px }
.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 }

/* 照片佔位 */
.ph{ background:var(--frame); outline:1px dashed #a4bacb; outline-offset:-12px; display:grid; place-items:center; text-align:center; padding:24px }
.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 }
.ph-21x9{ aspect-ratio:21/9; border-bottom:1px solid var(--line) }
.ph-4x3{ aspect-ratio:4/3; outline-offset:-10px }
.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 }

/* 星等刻度尺 */
.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(--gold) }
.ruler > div.pin{ background:rgba(232,147,12,.14) }
.ruler .lv{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.62) }
.ruler .head{ display:flex; flex-direction:column; gap:6px }
.ruler .lv em{ font-style:normal; color:rgba(255,255,255,.46); margin-left:8px; font-size:12px }
.ruler .pin .lv em{ color:var(--gold) }
.ruler .pin .lv{ color:var(--gold) }
.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,.52) }
.ruler .pin .use{ color:var(--gold); 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 }
.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,.6) }
.ruler-foot a{ margin-left:auto; font-size:14.5px; font-weight:700; color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:3px }
.ruler-foot a:hover{ color:var(--gold) }

/* 狀況分流 */
.routes{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.route{ border:1px solid var(--line); border-radius:8px; padding:20px 22px; display:flex; align-items:center; gap:14px }
.route:hover{ border-color:var(--ink); background:#f7fafc; color:inherit }
.route .n{ font-family:var(--font-num); font-weight:700; font-size:13px; color:var(--mute-2) }
.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:20px; 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-size:22px; font-weight:700; line-height:1.5 }
.svc-body p{ max-width:620px }
.svc-stack{ display:flex; flex-direction:column; gap:20px }

/* 條件表 */
.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:32px 1fr; gap:0 16px }
.numlist dt{ font-family:var(--font-num); font-weight:700; font-size:13px; line-height:1.8; color:var(--gold-ink); 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:22px; position:relative }
.dolist li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--blue); font-weight:700 }

.goal-block{ padding-top:26px; margin-top:26px; 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-size:21px; font-weight:700; 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:22px; position:relative }
.nolist li::before{ content:"×"; position:absolute; left:0; top:0; color:var(--gold-ink); font-weight:700 }

.split{ display:grid; grid-template-columns:1.3fr 1fr; border-bottom:1px solid var(--line) }
.split > div{ padding:44px 48px }
.split > div:first-child{ border-right:1px solid var(--line) }

/* CTA */
.cta{ padding:52px 48px; background:var(--ink); display:flex; align-items:center; gap:48px }
.cta-body{ flex:1; display:flex; flex-direction:column; gap:14px }
.cta h2{ font-size:32px; font-weight:900; line-height:1.45; letter-spacing:-.025em; color:#fff }
.cta p{ font-size:16.5px; line-height:1.9; color:rgba(255,255,255,.72); 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:8px; 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,.28); color:#fff; border-radius:8px; font-family:var(--font-mono); font-size:14.5px; letter-spacing:.05em }
.btn-outline:hover{ color:#fff; border-color:#fff }

/* 頁尾 */
.site-footer{ padding:44px 40px 32px; background:var(--bg); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:30px }
.footer-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:36px }
.footer-grid h4{ font-size:14px; font-weight:700; margin-bottom:12px }
.footer-grid p{ font-size:14px; line-height:1.9; color:var(--mute); max-width:320px; margin-top:12px }
.footer-grid img{ height:23px; width:auto; filter:brightness(0) saturate(0) }
.footer-grid ul{ display:flex; flex-direction:column; gap:9px }
.footer-grid li{ font-size:14px; line-height:1.5; color:var(--mute) }
.footer-bottom{ display:flex; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px; line-height:1.6; color:var(--mute) }
.footer-legal{ display:flex; flex-wrap:wrap; gap:4px 20px }
.footer-legal a:hover{ color:var(--ink) }

/* 返回頂部：捲過一段才出現；桌機貼右下，手機抬到底部操作條上方 */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:55;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ink); border:1px solid var(--line-2); border-radius:999px;
  box-shadow:0 6px 18px rgba(10,42,64,.14); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s, background-color .2s, color .2s, border-color .2s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none }
.to-top:hover{ background:var(--ink); color:#fff; border-color:var(--ink) }
.to-top:focus-visible{ outline:2px solid var(--blue); outline-offset:3px }
body.nav-open .to-top{ display:none }

/* 手機底部固定條 + 抽屜 */
.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(10,42,64,.42); 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,336px);
  background:var(--bg); 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(10,42,64,.3);
}
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 }
.drawer-head img{ height:21px; 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:#fff; 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:22px; border-top:1px solid var(--line) }
.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(--mute-2); min-width:22px }
.drawer-nav .lbl{ flex:1; font-size:18px; font-weight:700; 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-bottom:12px }
.drawer-sub a{ padding:11px 2px 11px 26px; border-top:1px dashed var(--line); font-size:14px; font-weight:400; color:var(--ink-2) }
.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-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:20px; font-size:15px }
}

@media (max-width:1023px){
  .utility{ display:none }
  .site-header{ padding:0 20px; height:60px; gap:12px; position:sticky; top:0; z-index:50; background:rgba(234,241,245,.95); backdrop-filter:blur(12px) }
  .site-logo img{ height:21px }
  .nav,.site-header .btn-line{ display:none }
  .nav-toggle{
    display:inline-flex; align-items:center; gap:8px; margin-left:auto;
    background:#fff; border:1px solid var(--line-2); border-radius:999px; padding:9px 13px; 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:16px 20px; font-size:12.5px }

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

  .hero{ padding:30px 20px 32px }
  .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:30px 20px }
  .sec-title{ margin-bottom:16px; gap:10px }
  .sec-title h2{ font-size:25px; line-height:1.45; letter-spacing:-.02em }
  .sec-title .n{ font-size:13px }
  .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 }

  /* 刻度尺改單欄列 */
  .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,.46); margin-left:8px; font-size:12.5px }
  .ruler .pin .lv em{ color:var(--gold) }
  .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:19px }

  .split{ grid-template-columns:1fr }
  .split > div{ padding:30px 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:32px 20px 34px; 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:32px 20px 130px }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px }
  .footer-bottom{ flex-direction:column; gap:8px }
  /* 底部操作條實測約 91px 高（含邊框與行高），另加安全區；按鈕在其上方留 16px */
  .to-top{ right:16px; bottom:calc(107px + env(safe-area-inset-bottom)) }

  /* 底部固定操作條 */
  .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(234,241,245,.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:#fff; 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,.to-top{ display:none !important }
  .shell{ grid-template-columns:1fr }
  body{ font-size:12pt }
}


/* ---------- 內頁：規格對照表 ---------- */
.tbl{ display:grid; border-top:1px solid var(--ink) }
.tbl .tr{ display:contents }
.tbl > div{ border-bottom:1px solid var(--line); padding:15px 20px 15px 0 }
.tbl > div:last-child{ border-bottom-color:var(--ink) }
.tbl .th{ padding-top:12px; padding-bottom:12px; font-size:13px; font-weight:500; color:var(--mute) }
.tbl .hl{ background:var(--bg) }
.tbl .tr.on > div{ background:var(--bg) }
.tbl .tr.on > div:first-child{ padding-left:14px }
.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; padding-right:0 }
.tbl b{ font-size:16.5px; 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(--gold-ink) }

/* ---------- 專案方案 ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.plan{ border:1px solid var(--line); padding:26px 24px; display:flex; flex-direction:column; gap:12px }
.plan.best{ border-color:var(--ink); background:var(--bg) }
.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 }

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

/* ---------- FAQ 手風琴 ---------- */
.faq{ border-top:1px solid var(--line); max-width:900px }
.faq details{ border-bottom:1px solid var(--line) }
.faq details[open]{ background:transparent }
.faq details.flag,.faq details.flag[open]{ background:var(--bg) }
.faq summary{ display:flex; align-items:baseline; gap:14px; padding:20px 0; cursor:pointer; list-style:none }
.faq details.flag summary{ padding-left:20px; padding-right:20px }
.faq summary::-webkit-details-marker{ display:none }
.faq summary .q{ flex:1; font-size:18px; font-weight:500; line-height:1.5 }
.faq details[open] summary .q{ font-weight:700; font-size:20px }
.faq summary .s{ font-family:var(--font-mono); font-size:16px; color:var(--mute-2) }
.faq details[open] summary .s{ color:var(--gold-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) }
.faq details.flag p{ padding-left:20px; padding-right:20px }

/* ---------- 星數試算 ---------- */
.calc{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start }
.calc-box{ background:#fff; border:1px solid var(--line); padding:28px }
.calc-in{ display:flex; gap:10px; margin-top:18px }
.calc-in div{ flex:1; border:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:6px }
.calc-in div.tgt{ border-color:var(--ink) }
.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(--ink); outline-offset:4px }
.calc-in input::-webkit-outer-spin-button,
.calc-in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.calc-out span{ line-height:1.8 }
.calc-out{ background:var(--ink); padding:24px; margin-top:16px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px }
.calc-out span{ font-size:13px; color:rgba(255,255,255,.66) }
.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(--gold); 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); padding:24px 26px }
.mini h3{ font-size:18px; font-weight:700; 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:#fff; padding:4px 8px; border:1px solid var(--line) }

/* ---------- 服務索引軌 ---------- */
.idx-h{ font-size:13px; font-weight:700; display:block; padding-bottom:10px; border-bottom:1px solid var(--ink) }
.idx-r{ display:flex; align-items:baseline; gap:10px; padding:11px 0; border-bottom:1px solid var(--line) }
.idx-r .t{ flex:1; font-size:14px; font-weight:500; line-height:1.5 }
.idx-r .tag{ font-size:12.5px; font-weight:700; color:var(--gold-ink); background:var(--gold-soft); padding:5px 7px; 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:1px; background:var(--line); border:1px solid var(--line) }
.grid6 a{ background:#fff; padding:24px 26px; display:flex; flex-direction:column; gap:12px; min-height:152px }
.grid6 a:hover{ background:#f7fafc; color:inherit }
.grid6 .n{ font-family:var(--font-num); font-weight:700; font-size:13px; color:var(--gold-ink) }
.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(--bg); border-left:3px solid var(--gold); 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-top:0 }
  .tbl .th{ display:none }
  .tbl .tr{
    display:block; border:1px solid var(--line); background:#fff;
    padding:16px 18px 14px;
  }
  .tbl .tr.on{ border-color:var(--ink); background:var(--bg) }
  .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{ 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 }
  .facts3 div{ flex-direction:row; align-items:baseline; gap:12px }
  .facts3 b{ font-size:18px; min-width:62px }
  .faq summary{ padding:16px 0 }
  .faq summary .q{ font-size:16px }
  .faq details[open] summary .q{ font-size:16.5px }
  .faq details.flag summary,.faq details.flag p{ padding-left:20px; padding-right:20px }
  .faq details.flag{ margin:0 -20px }
  .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:26px 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; background:transparent; border:0 }
  .grid6 a{ border:1px solid var(--line); 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:900px; margin:0 auto; padding:72px 40px 64px; width:100% }
.wrap-narrow{ max-width:var(--measure) }

/* 聯絡管道大卡 */
.chan{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.chan a{ padding:34px 32px; display:flex; flex-direction:column; gap:14px; border-radius:8px }
.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,.8) }
.chan-line .t{ font-size:30px; font-weight:900; line-height:1.4; letter-spacing:-.02em; color:#fff }
.chan-line p,.chan-line .go{ color:rgba(255,255,255,.9) }
.chan-mail{ background:var(--bg); border:1px solid var(--line) }
.chan-mail:hover{ border-color:var(--ink); 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); padding:30px 32px }
.card.tint{ background:var(--bg); border:0 }
.card h2{ font-size:24px; font-weight:900; line-height:1.5; letter-spacing:-.02em; 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(--gold); letter-spacing:-.05em }
.err h1{ font-size:44px; font-weight:900; line-height:1.4; letter-spacing:-.03em; color:#fff }
.err p{ font-size:17.5px; line-height:1.9; color:rgba(255,255,255,.72); 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:1px; background:var(--line); border:1px solid var(--line) }
.quick a{ background:#fff; padding:22px 24px; display:flex; align-items:center; gap:14px }
.quick a:hover{ background:var(--bg); 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(--bg); margin:0 -10px; padding-left:10px; padding-right:10px }
.legal-idx .n{ font-family:var(--font-mono); font-size:11px; color:var(--mute) }
.legal-idx a.key .n{ color:var(--gold-ink) }
.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-size:44px; font-weight:900; line-height:1.4; letter-spacing:-.03em }
.legal-meta{ background:var(--bg); padding:18px 22px; border-left:3px solid var(--line); 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:baseline; gap:14px }
.art-h .n{ font-family:var(--font-num); font-weight:700; font-size:15px; color:var(--gold-ink) }
.art-h h2{ font-size:26px; font-weight:900; line-height:1.5; letter-spacing:-.02em }
.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 }
.art.hero-art .art-h .n{ color:var(--gold) }
.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 }
.rights{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px }
.rights div{ background:#fff; border:1px solid var(--line); 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(--gold-ink) }
.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 }
.legal-cta .m{ background:var(--bg); border:1px solid var(--line) }
.legal-cta .m:hover{ border-color:var(--ink); 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,.8) }
.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:30px 20px 34px }
  .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:0 }
  .card{ border:0; border-top:1px solid var(--line); padding:26px 20px; margin:0 -20px }
  .card.tint{ margin:0 -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; letter-spacing:-.02em }
  .err p{ font-size:15.5px }
  .err .btn-gold{ align-self:stretch }
  .quick{ grid-template-columns:1fr; gap:0; background:transparent; border:0 }
  .quick a{ padding:16px 0; border-top:1px solid var(--line) }
  .quick a:last-child{ border-bottom:1px solid var(--line) }
  .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(--gold-ink) }
  .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 }
  .art.hero-art .art-h h2{ font-size:23px }
  .art.hero-art p{ font-size:15px }
  .art.tint{ padding:22px 20px; margin:0 -20px }
  .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 }
}