/* 卡普歐 Kapueo — 全站樣式 v2（2026-10-20 改版）
   設計語彙取自台灣機車道路：品牌藍（logo #011095）、標線黃、柏油灰；黃色虛線標線當分隔，
   「待轉格」虛線方框當步驟編號，路牌窄體（Barlow Condensed）用在英文標籤與數字，霞鶩文楷用在卡普歐本人的話。
   行動按鈕：標線黃底＋深藍字（對比 8:1）。斷點：選單 980px 以下收合；內容 760px 以下單欄。 */
:root{
  --navy:#011095;--navy-d:#000A5E;--navy-l:#E9ECFB;
  --asphalt:#1B1E27;--asphalt-2:#262B37;--asphalt-3:#343A48;
  --yellow:#F6B800;--yellow-d:#8A6400;--yellow-l:#FFF5D1;
  --paper:#F3F4F7;--card:#FFFFFF;--ink:#12162A;--body:#3B4157;--muted:#646C84;--line:#DADEE8;--line2:#ECEEF3;
  --ok:#16794A;--ok-l:#E6F4EC;
  --sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --sign:'Barlow Condensed','Arial Narrow','Noto Sans TC',sans-serif;
  --voice:'LXGW WenKai TC','Noto Sans TC',cursive;
  --r:10px;--shadow:0 1px 2px rgba(18,22,42,.05),0 8px 24px rgba(18,22,42,.06);
  --lane:repeating-linear-gradient(90deg,var(--yellow) 0 26px,transparent 26px 44px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;height:auto}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--navy-d);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:4px}
h1,h2,h3{color:var(--ink);line-height:1.35;letter-spacing:.01em;text-wrap:pretty}
h1{font-size:clamp(1.8rem,1.15rem + 2.6vw,2.85rem);font-weight:900;margin:0 0 .45em}
h2{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);font-weight:900;margin:2.2em 0 .7em}
h3{font-size:1.12rem;font-weight:700;margin:1.8em 0 .5em}
p{margin:0 0 1em}
ul,ol{padding-left:1.4em;margin:0 0 1.2em}
li{margin:.3em 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:6px}
.skip:focus{top:12px;color:#fff}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.wrap.narrow{max-width:900px}
.ico{width:18px;height:18px;flex:none}
.mt0{margin-top:0}

/* 標籤字：路牌窄體 */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sign);font-weight:700;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:.7em}
.eyebrow::before{content:"";width:22px;height:4px;background:var(--yellow);border-radius:1px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border-radius:8px;font-weight:700;font-size:1rem;line-height:1.3;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn:hover{text-decoration:none}
.btn-cta{background:var(--yellow);color:var(--navy-d)}
.btn-cta:hover{background:#FFC92E;color:var(--navy-d)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-d);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-line:hover{background:#fff;color:var(--asphalt)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.5em}
.acts.mb{margin-bottom:56px}

/* 頂部資訊列＋頁首 */
.util{background:var(--asphalt);color:#C9CEDC;font-size:.82rem}
.util .wrap{display:flex;justify-content:space-between;gap:16px;min-height:34px;align-items:center}
.util a{color:#E7EAF3;text-decoration:none}
.util a:hover{color:var(--yellow)}
.util .u-mail{display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
@media (max-width:760px){.util .u-mail{display:none}.util .wrap{justify-content:center;text-align:center;font-size:.78rem;line-height:1.5;padding-block:6px}}
.hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.logo img{width:40px;height:40px}
.logo .lt{display:flex;flex-direction:column;line-height:1.05}
.logo b{font-size:1.3rem;font-weight:900;letter-spacing:.14em;color:var(--navy)}
.logo i{font-style:normal;font-family:var(--sign);font-size:.82rem;letter-spacing:.34em;color:var(--muted);font-weight:700}
.nav{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav ul a{display:block;padding:8px 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:500;font-size:.98rem;white-space:nowrap;position:relative}
.nav ul a:hover{background:var(--paper)}
.nav ul a[aria-current],.nav ul a.on{color:var(--navy);font-weight:700}
.nav ul a[aria-current]::after,.nav ul a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;background:var(--lane)}
.hd-cta,.burger{display:none}
.burger{align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:8px;min-height:42px;padding:6px 10px;margin-right:-4px;color:var(--ink);cursor:pointer;font:inherit;font-size:.86rem;font-weight:700}
.burger svg{width:22px;height:22px;display:block}
.burger .i-x{display:none}
.burger-t{line-height:1}
@media (max-width:980px){
  .bar{min-height:62px;gap:12px}
  .nav{display:none}
  .hd-cta{display:inline-flex;margin-left:auto;min-height:40px;padding:6px 16px;font-size:.95rem}
  .burger{display:inline-flex}
}
@media (max-width:420px){.logo i{display:none}.logo b{font-size:1.15rem}.hd-cta{padding:6px 12px}}
@media (max-width:360px){.burger-t{display:none}}

/* MOTO 次選單、麵包屑 */
.subnav{background:var(--asphalt-2);color:#fff}
.subnav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li{margin:0;flex:none}
.subnav a{display:block;padding:11px 14px;color:#C9CEDC;text-decoration:none;font-size:.92rem;white-space:nowrap;border-bottom:3px solid transparent}
.subnav a:hover{color:#fff}
.subnav a[aria-current]{color:#fff;font-weight:700;border-bottom-color:var(--yellow)}
.crumb{font-size:.85rem;color:var(--muted);padding:14px 0 0;background:var(--card)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--navy);text-decoration:underline}
.crumb .sep{margin:0 .55em;color:#B9BFCE}

/* 首頁與轉換頁 hero：柏油底＋虛線 */
.hero{background:linear-gradient(180deg,var(--asphalt) 0%,var(--asphalt-2) 100%);color:#D4D8E4;padding:60px 0 80px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:28px;height:5px;background:var(--lane);opacity:.9}
.hero::before{content:"";position:absolute;right:-90px;top:-60px;width:420px;height:420px;background:url(/images/logo-light.png) center/contain no-repeat;opacity:.05;pointer-events:none}
.hero h1{color:#fff;max-width:18em}
.hero .lead{font-size:1.1rem;max-width:36em;color:#D4D8E4}
.hero .eyebrow{color:var(--yellow)}
.hero .eyebrow::before{background:#fff}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:48px;align-items:center;position:relative;z-index:1}
.hero-grid > *{min-width:0}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:28px}.hero{padding:40px 0 70px}.hero-grid .ph{max-width:460px}}
.lead{font-size:1.08rem}

/* 內頁 page-head：白底＋下緣虛線 */
.phero{background:var(--card);padding:22px 0 34px;border-bottom:1px solid var(--line);position:relative}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;background:var(--lane)}
.phero h1{max-width:22em}
.phero .lead{max-width:40em;color:var(--body)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:44px;align-items:center}
.phero-grid > *{min-width:0}
@media (max-width:980px){.phero-grid{grid-template-columns:1fr;gap:20px}.phero-grid .ph{max-width:520px}}

/* 揭露條 */
.disc{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 15px;font-size:.92rem;color:var(--body);margin:22px 0 0;max-width:46em}
.disc::before{content:"i";flex:none;width:20px;height:20px;border-radius:4px;background:var(--yellow);color:var(--navy-d);font-weight:700;font-size:.82rem;line-height:20px;text-align:center;margin-top:3px;font-family:Georgia,serif;font-style:italic}
.hero .disc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#D4D8E4}

/* 照片槽位：有檔案顯示照片＋出處；沒有檔案顯示空白佔位（sitekit.PHOTOS） */
.ph{margin:0;min-width:0}
.ph img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--line2)}
.ph-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:26px 22px;border-radius:var(--r);border:2px dashed #B9BFCE;color:var(--muted);
  background:repeating-linear-gradient(135deg,var(--paper) 0 14px,#E7E9EF 14px 15px);aspect-ratio:var(--ar,16/10);max-width:100%;overflow:hidden}
.ph-box svg{width:36px;height:36px;color:#8C93A8;flex:none}
.ph-box b{color:var(--ink);font-size:.98rem}
.ph-box span{font-size:.84rem;line-height:1.55;max-width:26em}
.ph-box .ph-k{position:absolute;left:10px;top:7px;font-family:var(--sign);font-size:.78rem;letter-spacing:.12em;color:#8C93A8;text-transform:uppercase}
.ph figcaption{font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.55}
.ph figcaption a{color:var(--muted)}
.hero .ph-box{background:repeating-linear-gradient(135deg,var(--asphalt-2) 0 14px,var(--asphalt-3) 14px 15px);border-color:#4A5163;color:#AEB4C5}
.hero .ph-box b{color:#fff}
.hero .ph-box svg,.hero .ph-box .ph-k{color:#7E8598}
.hero .ph figcaption{color:#9AA0B3}
.ph-wide{margin:0 0 1.6em}
@media (max-width:560px){.ph-box{padding:18px 14px}.ph-box span{font-size:.8rem}}

/* sections */
.sec{padding:60px 0}
.sec.alt{background:var(--card);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.sec > .wrap > h2:first-child,.sec-h{margin-top:0}
.sec-intro{max-width:44em;color:var(--body);margin-bottom:1.6em}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid.g1{grid-template-columns:1fr}
@media (max-width:400px){.grid.g2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;min-width:0}
.card h3{margin:0 0 .4em;font-size:1.1rem}
.card p{font-size:.96rem;margin-bottom:.8em}
.card .more{margin-top:auto;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-size:.95rem}
.card .more .ico{transition:transform .15s}
.card .tag{align-self:flex-start;font-size:.76rem;font-weight:700;color:var(--ink);background:var(--yellow-l);border:1px solid #F1DF9A;border-radius:4px;padding:1px 8px;margin-bottom:12px;letter-spacing:.04em}
.sec.alt .card{background:var(--paper)}
a.card{text-decoration:none;color:var(--body);transition:border-color .15s,box-shadow .15s}
a.card:hover{border-color:var(--navy);box-shadow:var(--shadow);color:var(--body)}
a.card:hover .more .ico{transform:translateX(4px)}
a.card h3{color:var(--ink)}
a.card .more{color:var(--navy)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.split > *{min-width:0}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:22px}.sec{padding:46px 0}}

/* 卡普歐本人的話 */
.voice{font-family:var(--voice);font-size:1.22rem;line-height:1.75;color:var(--ink);border-left:4px solid var(--yellow);padding:4px 0 4px 18px;margin:0 0 1.2em}
.voice cite{display:block;font-family:var(--sans);font-style:normal;font-size:.85rem;color:var(--muted);margin-top:8px}

/* 步驟：待轉格 */
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 1.2em}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;margin:0;position:relative}
.sec.alt .steps li{background:var(--paper)}
.steps li::before{content:counter(s,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:52px;height:40px;border:2px dashed var(--navy);border-radius:4px;color:var(--navy);font-family:var(--sign);font-weight:700;font-size:1.35rem;letter-spacing:.04em;margin-bottom:12px}
.steps b{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:4px}
.steps .who{display:inline-block;font-size:.76rem;font-weight:700;border-radius:4px;padding:1px 9px;margin-top:10px;background:var(--navy-l);color:var(--navy)}
.steps .who.dealer{background:var(--yellow-l);color:var(--yellow-d)}

/* article */
.art{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:52px;align-items:start;padding-top:36px;padding-bottom:60px}
.prose{max-width:760px;min-width:0}
.prose > h2:first-child{margin-top:.5em}
.prose h2{border-top:1px solid var(--line);padding-top:1.2em;position:relative}
.prose h2::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:3px;background:var(--yellow)}
.prose h2:first-of-type{border-top:0;padding-top:0}
.prose h2:first-of-type::before{display:none}
.upd{font-size:.86rem;color:var(--muted);margin:-.2em 0 1.2em}
.answer{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;margin:0 0 1.8em;position:relative;overflow:hidden}
.answer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--lane)}
.answer > b:first-child{display:block;font-family:var(--sign);color:var(--navy);font-size:1rem;letter-spacing:.14em;margin-bottom:6px}
.answer p:last-child,.answer ul:last-child{margin-bottom:0}
.toc{position:sticky;top:100px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 10px;font-size:.92rem}
.toc b{display:block;color:var(--ink);margin-bottom:6px}
.toc ol{padding-left:1.3em;margin:0 0 .6em}
.toc a{color:var(--body);text-decoration:none}
.toc a:hover{color:var(--navy);text-decoration:underline}
.side-cta{margin-top:16px;background:var(--asphalt);color:#D4D8E4;border-radius:var(--r);padding:18px 18px 22px;font-size:.92rem;position:relative;overflow:hidden}
.side-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--lane)}
.side-cta b{color:#fff;display:block;margin-bottom:4px}
.side-cta .btn{width:100%;margin-top:10px}
@media (max-width:980px){.art{grid-template-columns:1fr;gap:0;padding-top:24px}.art aside{order:-1}.toc{position:static;margin-bottom:24px}.side-cta{display:none}}
.note,.warn,.ok{border-radius:8px;padding:14px 18px;margin:1.2em 0 1.4em;font-size:.96rem}
.note{background:var(--navy-l);border:1px solid #C7CEF2}
.warn{background:var(--yellow-l);border:1px solid #EFD27A}
.ok{background:var(--ok-l);border:1px solid #B9DEC8}
.note p:last-child,.warn p:last-child,.ok p:last-child,.note ul:last-child,.warn ul:last-child{margin-bottom:0}
.checklist{list-style:none;padding:0}
.checklist li{position:relative;padding-left:32px;margin:.55em 0}
.checklist li::before{content:"";position:absolute;left:0;top:.36em;width:19px;height:19px;border:2px solid var(--navy);border-radius:4px;background:#fff}
.src{font-size:.88rem;color:var(--muted);border-top:1px solid var(--line);margin-top:2.6em;padding-top:1em}
.src h2{font-size:1rem;margin:0 0 .5em;border:0;padding:0}
.src h2::before{display:none}
.src ul{margin:0}
.related{margin-top:2.6em}
.related h2{font-size:1.15rem;border:0;padding:0}
.related h2::before{display:none}
.prose-page{max-width:880px;padding-top:30px;padding-bottom:60px}
.prose-page h2{border-top:1px solid var(--line);padding-top:1.2em}

/* tables */
.tbl-wrap{overflow-x:auto;margin:0 0 1.4em;border:1px solid var(--line);border-radius:var(--r);background:var(--card);-webkit-overflow-scrolling:touch}
.tbl{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
.tbl th,.tbl td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line2)}
.tbl thead th{background:var(--asphalt);color:#fff;font-weight:700;white-space:nowrap}
.tbl tbody th{color:var(--ink);font-weight:700;white-space:nowrap}
.tbl tbody tr:nth-child(even){background:#FAFBFC}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}

/* FAQ */
.faqs{display:grid;gap:10px;margin:0 0 1.4em}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:8px}
details.faq[open]{border-color:var(--navy)}
details.faq summary{cursor:pointer;list-style:none;padding:15px 52px 15px 18px;font-weight:700;color:var(--ink);position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:4px;background:var(--paper);color:var(--navy);font-weight:700;line-height:24px;text-align:center;font-size:1.1rem}
details.faq[open] summary::after{content:"−";background:var(--yellow);color:var(--navy-d)}
details.faq > div{padding:0 18px 14px}
details.faq > div p:last-child{margin-bottom:0}

/* CTA band */
.cta-band{background:var(--navy);color:#DDE2FF;padding:58px 0 60px;position:relative}
.cta-band::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--lane)}
.cta-band h2{color:#fff;margin:0 0 .4em}
.cta-band p{max-width:42em}
.cta-band .small{font-size:.86rem;color:#B8C0F2;margin-top:1.4em}
.cta-band a:not(.btn){color:#fff}

/* contact */
.mailbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.mailbox .addr{font-family:var(--sign);font-size:1.6rem;font-weight:700;letter-spacing:.04em;color:var(--navy);word-break:break-all;margin-bottom:.4em}
.fields{display:grid;gap:0;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.fields div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line2);font-size:.95rem}
.fields div:last-child{border-bottom:0}
.fields b{color:var(--ink)}
.fields .opt{color:var(--muted);font-size:.85rem}
@media (max-width:560px){.fields div{grid-template-columns:1fr;gap:2px}}

/* footer：柏油底＋虛線 */
.ft{background:var(--asphalt);color:#AEB4C5;font-size:.93rem}
.ft::before{content:"";display:block;height:5px;background:var(--lane)}
.ft a{color:#E2E5EE;text-decoration:none}
.ft a:hover{color:var(--yellow);text-decoration:underline}
.ftop{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px;padding-top:52px}
.ftop > *{min-width:0}
.ft .logo b{color:#fff}
.ft .logo i{color:#8C93A8}
.fslogan{margin:14px 0 6px;color:#E2E5EE;font-family:var(--voice);font-size:1.08rem}
.fbrand a{display:inline-flex;align-items:center;gap:8px}
.fh{color:#fff;font-size:1rem;margin:0 0 .7em}
.fcol ul{list-style:none;padding:0;margin:0}
.fcol li{margin:.4em 0}
.fdisc{margin-top:36px;padding:20px 0;border-top:1px solid var(--asphalt-3);font-size:.85rem;color:#8C93A8}
.fdisc p{margin:0 0 .5em}
.fdisc b{color:#E2E5EE}
.fbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:18px 0 24px;border-top:1px solid var(--asphalt-3);font-size:.85rem}
.fbar nav{display:flex;gap:18px;flex-wrap:wrap}
@media (max-width:860px){.ftop{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media (max-width:480px){.ftop{grid-template-columns:1fr}}

/* 手機底部固定按鈕 */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid var(--line);padding:8px max(12px,env(safe-area-inset-left,0px)) calc(8px + env(safe-area-inset-bottom,0px))}
  .mbar .btn{flex:1;min-height:44px;padding:8px 10px}
  body{padding-bottom:64px}
}

/* 404 */
.nf{text-align:center;padding:80px 0}
.nf .code{font-family:var(--sign);font-size:6rem;font-weight:700;color:var(--navy);line-height:1;margin-bottom:.1em}
.nf .acts{justify-content:center}

/* 試算工具（/moto/guides/ownership-cost/） */
.calc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 22px;margin:0 0 1.6em;position:relative;overflow:hidden}
.calc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--lane)}
.calc h3{margin-top:0}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 18px}
.calc-field{display:grid;gap:4px;min-width:0}
.calc-field label{font-weight:700;color:var(--ink);font-size:.93rem}
.calc-field input,.calc-field select{font:inherit;font-size:1rem;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%;font-variant-numeric:tabular-nums}
.calc-field input:focus,.calc-field select:focus{outline:3px solid var(--yellow);outline-offset:1px;border-color:var(--navy)}
.calc-field small{color:var(--muted);font-size:.8rem;line-height:1.5}
.calc-out{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.calc-out div{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.calc-out b{display:block;font-family:var(--sign);font-size:1.6rem;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.calc-out span{font-size:.85rem;color:var(--body)}
.calc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* 列印（交車檢查清單、詢價清單）：只印內容 */
@media print{
  .util,.hd,.subnav,.crumb,.ft,.mbar,.toc,.side-cta,.cta-band,.related,.skip,.acts,.ph{display:none!important}
  body{background:#fff;padding:0;font-size:12pt;color:#000}
  .art{display:block;padding:0}
  .phero{padding:0;border:0}.phero::after{display:none}
  .phero-grid{display:block}
  .card,.answer,.tbl-wrap,details.faq{box-shadow:none}
  .tbl thead th{background:#eee;color:#000}
  a{color:#000;text-decoration:none}
  .checklist li{break-inside:avoid}
  .calc input{border:1px solid #999}
}
@media (max-width:900px){.hero .ph-box,.phero .ph-box{aspect-ratio:16/9}}
.prose-page > h2:first-child{border-top:0;padding-top:0;margin-top:.4em}
@media (max-width:900px){.hero .ph img,.phero .ph img{aspect-ratio:16/9!important}}

/* 圖解卡（沒有照片的槽位，sitekit.VIZ）：白卡＋上緣虛線；深色 hero 內改柏油底 */
.viz{margin:0;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;position:relative;overflow:hidden;display:grid;gap:12px;align-content:start}
.viz::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--lane)}
.viz-h{display:grid;gap:2px}
.viz-k{font-family:var(--sign);font-weight:700;font-size:.85rem;letter-spacing:.16em;color:var(--navy)}
.viz-h b{color:var(--ink);font-size:1.12rem;line-height:1.4}
.viz-note{font-size:.82rem;color:var(--muted);margin:0;line-height:1.55}
.viz ul,.viz ol{margin:0}
/* 路線圖：直線虛線＋待轉格節點 */
.viz-route{list-style:none;padding:0;counter-reset:r;display:grid;gap:0}
.viz-route li{counter-increment:r;position:relative;padding:0 0 14px 50px;margin:0;display:grid;gap:1px}
.viz-route li:last-child{padding-bottom:0}
.viz-route li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:0;width:36px;height:28px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--navy);border-radius:4px;font-family:var(--sign);font-weight:700;font-size:1rem;color:var(--navy);background:var(--card)}
.viz-route li::after{content:"";position:absolute;left:18px;top:30px;bottom:2px;width:0;border-left:2px dashed var(--yellow)}
.viz-route li:last-child::after{display:none}
.viz-route b{color:var(--ink);font-size:.98rem;line-height:1.4}
.viz-route span{font-size:.84rem;color:var(--muted);line-height:1.5}
.viz-route .who{justify-self:start;font-style:normal;font-size:.72rem;font-weight:700;border-radius:4px;padding:0 8px;margin-top:3px;background:var(--navy-l);color:var(--navy)}
.viz-route .who.dealer{background:var(--yellow-l);color:var(--yellow-d)}
/* 公式 */
.viz-expr{font-family:var(--sign);font-weight:700;font-size:clamp(1.25rem,1rem + 1.2vw,1.7rem);letter-spacing:.03em;color:var(--navy);margin:0;padding:12px 14px;background:var(--paper);border-radius:8px;text-align:center;line-height:1.35;overflow-wrap:anywhere}
.viz-legend{margin:0;display:grid;gap:6px}
.viz-legend div{display:grid;grid-template-columns:minmax(52px,auto) 1fr;gap:10px;align-items:baseline;font-size:.88rem}
.viz-legend dt{font-family:var(--sign);font-weight:700;color:var(--navy);font-size:1rem}
.viz-legend dd{margin:0;color:var(--body)}
/* 清單 */
.viz-list{padding:0;list-style:none;display:grid;gap:6px}
.viz-list li{position:relative;padding-left:28px;margin:0;font-size:.92rem;color:var(--body)}
.viz-list li::before{content:"";position:absolute;left:0;top:.38em;width:16px;height:16px;border:2px solid var(--navy);border-radius:3px}
ol.viz-list{counter-reset:v}
ol.viz-list li{counter-increment:v}
ol.viz-list li::before{content:counter(v);width:20px;height:20px;top:.2em;border:0;border-radius:4px;background:var(--yellow);color:var(--navy-d);font-family:var(--sign);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}
/* 分欄 */
.viz-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.viz-cols > div{background:var(--paper);border-radius:8px;padding:10px 12px;min-width:0}
.viz-cols b{display:block;color:var(--ink);font-size:.92rem;border-bottom:2px solid var(--yellow);padding-bottom:4px;margin-bottom:6px}
.viz-cols ul{list-style:none;padding:0;display:grid;gap:2px}
.viz-cols li{margin:0;font-size:.84rem;color:var(--body)}
/* 資訊卡 */
.viz-card{display:grid;gap:6px}
.viz-badge{justify-self:start;font-size:.74rem;font-weight:700;background:var(--yellow);color:var(--navy-d);border-radius:4px;padding:1px 9px}
.viz-title{margin:0;font-size:1.2rem;font-weight:900;color:var(--ink);line-height:1.35}
.viz-sub{margin:0 0 6px;font-size:.86rem;color:var(--muted)}
.viz-card .viz-legend div{border-top:1px solid var(--line2);padding-top:6px}
.viz-card .viz-legend dt{font-family:var(--sans);font-size:.82rem;color:var(--muted);font-weight:700}
/* 問答 */
.viz-qa{margin:0;display:grid;gap:10px}
.viz-qa div{display:grid;gap:2px}
.viz-qa dt{font-weight:700;color:var(--ink);font-size:.95rem}
.viz-qa dt::before{content:"Q";font-family:var(--sign);color:var(--navy);margin-right:8px}
.viz-qa dd{margin:0;font-size:.88rem;color:var(--body);padding-left:20px}
/* 標籤 */
.viz-chips{display:flex;flex-wrap:wrap;gap:8px}
.viz-chips a,.viz-chips span{font-size:.9rem;border:1px solid var(--line);border-radius:6px;padding:6px 12px;background:var(--paper);color:var(--ink);text-decoration:none}
.viz-chips a:hover{border-color:var(--navy);color:var(--navy)}
/* 需求表單 */
.viz-form{display:grid;gap:8px}
.viz-form div{display:grid;grid-template-columns:minmax(0,7.5em) 1fr;gap:10px;align-items:end;font-size:.88rem;color:var(--body)}
.viz-form i{display:block;border-bottom:1.5px dashed #B9BFCE;height:1.2em}
/* 深色 hero 內 */
.hero .viz{background:var(--asphalt-2);border-color:var(--asphalt-3)}
.hero .viz-k{color:var(--yellow)}
.hero .viz-h b,.hero .viz-route b{color:#fff}
.hero .viz-route span,.hero .viz-note,.hero .viz-form div{color:#AEB4C5}
.hero .viz-route li::before{background:var(--asphalt-2);border-color:#9DAAFF;color:#C9D0FF}
.hero .viz-route .who{background:rgba(157,170,255,.16);color:#C9D0FF}
.hero .viz-route .who.dealer{background:rgba(246,184,0,.16);color:var(--yellow)}
.hero .viz-form i{border-color:#5A6175}
@media print{.viz{display:none!important}}

/* ---- 手機選單 v2（右側滑入全螢幕面板；sitekit.mobile_nav、kapueo.js） ---- */
.mnav{position:fixed;top:0;right:0;bottom:0;z-index:300;width:min(100%,440px);height:100dvh;background:var(--paper);display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s linear .28s;box-shadow:-12px 0 32px rgba(18,22,42,.18)}
.mnav.open{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s}
.mn-scrim{position:fixed;inset:0;z-index:290;background:rgba(18,22,42,.45)}
html.menu-open,html.menu-open body{overflow:hidden}
.mn-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px 18px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:#fff;border-bottom:1px solid var(--line);position:relative}
.mn-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--lane)}
.mn-close{width:46px;height:46px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mn-close svg{width:22px;height:22px}
.mn-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 24px;display:grid;gap:22px;align-content:start}
.mn-h{font-family:var(--sign);font-size:.92rem;font-weight:700;letter-spacing:.16em;color:var(--muted);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.mn-h::before{content:"";width:16px;height:3px;background:var(--yellow)}
/* 從這裡開始：待轉格＋虛線 */
.mn-route{list-style:none;margin:0;padding:0;counter-reset:m;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 0}
.mn-route li{counter-increment:m;margin:0;position:relative}
.mn-route a{display:grid;grid-template-columns:44px 1fr auto;column-gap:12px;align-items:center;padding:10px 14px;text-decoration:none;color:var(--ink);min-height:58px}
.mn-route a::before{content:counter(m,decimal-leading-zero);grid-row:span 2;width:44px;height:34px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--navy);border-radius:4px;font-family:var(--sign);font-weight:700;font-size:1.1rem;color:var(--navy);background:#fff;position:relative;z-index:1}
.mn-route a::after{content:"›";grid-row:1/span 2;grid-column:3;font-size:1.4rem;color:var(--muted)}
.mn-route li:not(:last-child)::after{content:"";position:absolute;left:35px;top:46px;bottom:-12px;border-left:2px dashed var(--yellow)}
.mn-route b{font-size:1.02rem;line-height:1.3}
.mn-route span{font-size:.82rem;color:var(--muted);line-height:1.35}
.mn-route a[aria-current]{background:var(--navy-l)}
.mn-route a[aria-current]::before{background:var(--navy);color:#fff;border-style:solid}
/* 依需求找車：圖示方塊 */
.mn-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mn-tile{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem}
.mn-tile svg{width:26px;height:26px;flex:none;color:var(--navy);padding:3px;background:var(--yellow-l);border-radius:6px;box-sizing:content-box}
.mn-tile[aria-current]{background:var(--navy);color:#fff;border-color:var(--navy)}
.mn-tile[aria-current] svg{background:rgba(255,255,255,.14);color:#fff}
/* 買車工具：標籤 */
.mn-chips{display:flex;flex-wrap:wrap;gap:8px}
.mn-chip{display:inline-flex;align-items:center;min-height:42px;padding:6px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:.92rem}
.mn-chip[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
/* 更多：按鈕格 */
.mn-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mn-btn{display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:6px 8px;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;font-size:.88rem;line-height:1.35}
.mn-btn[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.mn-dealer{margin:0;font-size:.82rem;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:14px}
/* 底部固定行動按鈕 */
.mn-cta{flex:none;display:grid;grid-template-columns:1.6fr 1fr;gap:8px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(18,22,42,.06)}
.mn-cta .btn{min-height:50px;padding:8px 10px}
@media (max-width:360px){.mn-btns{grid-template-columns:1fr 1fr}.mn-tile{font-size:.88rem}}
@media (min-width:981px){.mnav,.mn-scrim{display:none!important}}
@media (prefers-reduced-motion:reduce){.mnav,.mnav.open{transition:none}}
@media print{.mnav,.mn-scrim{display:none!important}}