/* 指南頁共用版型 —— 中英文引用同一份，畫面才不會各走各的。
   改這裡會同時影響 /guide/ 與 /en/guide/ 底下所有頁面。
   各頁只負責設定 --font 與 --lh，其餘一律共用。 */
:root{
  --navy:#16233F;--navy-2:#1E2E52;--navy-soft:#2C3E63;--navy-deep:#101A2E;
  --gold:#B8901A;--gold-bright:#C9A227;--gold-soft:#E3C463;
  --paper:#FBFAF7;--surface:#FFFFFF;--line:#E5E2D9;
  --ink:#1C1F24;--ink-2:#3F434B;--muted:#6E7076;
  --on-navy:#FFF;--on-navy-2:#C3CCE0;--on-navy-3:#8E9BB5;
  --ok:#2E6B4F;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --t-xs:12px;--t-sm:14px;--t-base:16px;--t-md:17px;--t-lg:20px;--t-xl:24px;--t-2xl:30px;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-full:999px;
  --shadow:0 8px 28px rgba(16,26,46,.13);--shadow-sm:0 1px 3px rgba(16,26,46,.07);
  --ease-out:cubic-bezier(.2,.8,.3,1);--dur:180ms;--tap:44px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* 字體由各頁指定：英文頁用 Inter，中文頁用 Noto Sans TC。
   中文行高要比英文寬鬆，所以 --lh 也開放覆寫。 */
body{font-family:var(--font,system-ui),system-ui,-apple-system,'Segoe UI',sans-serif;font-size:var(--t-base);
  line-height:var(--lh,1.75);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--s5)}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;border-radius:var(--r-sm)}

/* ===== 頁首 ===== */
.topbar{position:sticky;top:0;z-index:50;background:rgba(22,35,63,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.09);padding-block:var(--s3)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s3);color:#fff;text-decoration:none;min-height:var(--tap)}
.brand svg{width:40px;height:40px;flex:none}
.brand b{font-size:var(--t-lg);font-weight:700;letter-spacing:.3px;line-height:1}
.brand b i{color:var(--gold-soft);font-style:normal}
.brand small{display:block;font-size:var(--t-xs);color:var(--on-navy-3);font-weight:400;margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:var(--s3)}
/* 語言切換：兩邊互通，Google 才認得 hreflang 這組關係 */
.lang{display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--tap);padding-inline:var(--s2);
  color:var(--on-navy-2);text-decoration:none;font-size:var(--t-sm);font-weight:500}
.lang:hover{color:#fff}
.lang svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);
  padding:var(--s3) var(--s5);font-family:inherit;font-size:var(--t-base);font-weight:600;
  border:none;border-radius:var(--r-md);text-decoration:none;cursor:pointer;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.btn-gold{color:var(--navy);background:linear-gradient(180deg,var(--gold-soft),var(--gold-bright));
  box-shadow:0 4px 16px rgba(184,144,26,.34)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-sm{min-height:38px;padding:var(--s2) var(--s4);font-size:var(--t-sm);border-radius:var(--r-full);
  white-space:nowrap}
/* 窄螢幕：頁首三個元素都會各自換行，擠成三層。副標先讓位。 */
.lang{white-space:nowrap}
@media(max-width:479px){
  .brand small{display:none}
  .brand svg{width:34px;height:34px}
  .brand b{font-size:var(--t-base)}
  .topbar-right{gap:var(--s1)}
}

/* ===== 版面：桌機兩欄，右側目錄跟著捲 ===== */
.layout{display:block}
@media(min-width:1024px){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s8);align-items:start}
}

.crumb{font-size:var(--t-sm);color:var(--muted);padding-top:var(--s6)}
.crumb a{color:var(--navy-soft);text-decoration:none}
.crumb a:hover{text-decoration:underline}

article{padding-bottom:var(--s8);min-width:0}
article h1{font-size:26px;line-height:1.28;color:var(--navy);font-weight:700;
  margin-top:var(--s4);letter-spacing:-.4px;text-wrap:balance}
@media(min-width:640px){article h1{font-size:var(--t-2xl)}}
.meta{font-size:var(--t-sm);color:var(--muted);margin-top:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center}
.tagpill{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  padding:2px 12px;font-size:var(--t-xs);color:var(--navy)}
.lead{font-size:var(--t-md);color:var(--ink-2);margin-top:var(--s5);padding:var(--s5);
  background:var(--surface);border-left:4px solid var(--gold-bright);border-radius:0 var(--r-md) var(--r-md) 0}

/* 行動版目錄：桌機換成右側 sticky 版本，這個就收起來 */
.toc-inline{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);margin-top:var(--s6)}
.toc-inline b{font-size:var(--t-sm);color:var(--navy);display:block;margin-bottom:var(--s3)}
.toc-inline ol{list-style:none;counter-reset:t;display:grid;gap:var(--s1)}
.toc-inline li{counter-increment:t;font-size:var(--t-sm)}
.toc-inline li::before{content:counter(t) '.';color:var(--gold);font-weight:700;margin-right:var(--s2)}
.toc-inline a{color:var(--ink-2);text-decoration:none}
.toc-inline a:hover{color:var(--navy);text-decoration:underline}

/* 右側 sticky 目錄 */
.toc-side{display:none}
@media(min-width:1024px){
  .toc-inline{display:none}
  .toc-side{display:block;position:sticky;top:88px;padding-top:var(--s8);font-size:var(--t-sm)}
  .toc-side b{display:block;color:var(--navy);font-weight:600;margin-bottom:var(--s4);
    padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
  .toc-side ol{list-style:none;display:grid;gap:var(--s3)}
  .toc-side a{color:var(--ink-2);text-decoration:none;line-height:1.5;display:block;
    border-left:2px solid transparent;padding-left:var(--s3);margin-left:-2px;
    transition:color var(--dur),border-color var(--dur)}
  .toc-side a:hover{color:var(--navy)}
  .toc-side a.on{color:var(--navy);font-weight:600;border-left-color:var(--gold-bright)}
}

.prose{margin-top:var(--s7)}
.prose h2{font-size:var(--t-xl);color:var(--navy);font-weight:700;line-height:1.35;
  margin-top:var(--s8);margin-bottom:var(--s4);scroll-margin-top:88px;letter-spacing:-.2px;
  display:flex;align-items:flex-start;gap:var(--s3)}
.prose h2::before{content:'';width:4px;height:1.2em;border-radius:2px;background:var(--gold-bright);flex:none}
.prose h3{font-size:var(--t-md);color:var(--navy);font-weight:600;margin-top:var(--s6);margin-bottom:var(--s3);
  scroll-margin-top:88px}
.prose p{margin-bottom:var(--s4);color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 var(--s4) var(--s5);display:grid;gap:var(--s2)}
.prose li{color:var(--ink-2)}
.prose a{color:var(--navy-soft)}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);margin-bottom:var(--s5)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:var(--t-sm)}
th,td{padding:var(--s3);text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
/* 桌機欄寬有限，欄位標題用短的；行動版橫捲不受影響 */
th:first-child,td:first-child{padding-left:var(--s4)}
th:last-child,td:last-child{padding-right:var(--s4)}
thead th{background:var(--navy);color:#fff;font-weight:500;white-space:nowrap;font-size:var(--t-xs);
  letter-spacing:.6px;text-transform:uppercase}
tbody th{background:var(--paper);color:var(--navy);font-weight:600;white-space:nowrap}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}
td .best{display:inline-block;background:rgba(46,107,79,.1);color:var(--ok);font-weight:600;
  border-radius:var(--r-full);padding:1px 10px;font-size:var(--t-xs);white-space:nowrap}

/* 每個區塊結尾的小 CTA，不用讀者捲到最下面才找得到怎麼買 */
.mini-cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold-bright);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--s4) var(--s5);margin:var(--s5) 0 var(--s6)}
.mini-cta p{margin:0;font-size:var(--t-sm);color:var(--ink-2);flex:1 1 220px}
.mini-cta b{color:var(--navy);font-weight:600}
.mini-cta .btn{flex:none}

/* 提醒方塊 */
.note-box{background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.3);
  border-radius:var(--r-md);padding:var(--s4) var(--s5);margin-bottom:var(--s5)}
.note-box p{margin:0;font-size:var(--t-sm);color:var(--ink-2)}
.note-box p+p{margin-top:var(--s2)}

/* FAQ 手風琴：用原生 details，沒有 JavaScript 也能開合 */
.faq{margin-top:var(--s5)}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:var(--s3);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);font-weight:600;color:var(--navy);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--tap);
  font-size:var(--t-base)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';width:10px;height:10px;flex:none;border-right:2px solid var(--gold);
  border-bottom:2px solid var(--gold);transform:rotate(45deg);margin-top:-4px;
  transition:transform var(--dur) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.faq .answer{padding:0 var(--s5) var(--s5);font-size:var(--t-sm);color:var(--ink-2)}
.faq .answer p+p{margin-top:var(--s3)}

.cta-box{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;
  border-radius:var(--r-xl);padding:var(--s7) var(--s5);text-align:center;margin-top:var(--s8)}
.cta-box p{font-size:var(--t-md);font-weight:600;color:#fff}
.cta-box small{display:block;color:var(--on-navy-2);font-size:var(--t-sm);margin-top:var(--s2);font-weight:400}
.cta-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:var(--s5)}
/* 窄螢幕兩顆按鈕會上下排且寬度不一，看起來像壞掉。統一撐滿；
   寬螢幕放得下就並排，不要各佔一整列。 */
@media(max-width:639px){.cta-buttons .btn{flex:1 1 100%}}
.btn-wa{color:#fff;background:#25D366;box-shadow:0 4px 16px rgba(37,211,102,.3)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-wa svg{width:20px;height:20px;fill:currentColor;flex:none}
.btn-ghost{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.cta-box .fineprint{display:block;margin-top:var(--s4);font-size:var(--t-xs);color:var(--on-navy-3)}

.more{margin-top:var(--s8)}
.more b{font-size:var(--t-md);color:var(--navy);display:block;margin-bottom:var(--s4)}
.more a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);margin-bottom:var(--s3);text-decoration:none;
  transition:border-color var(--dur),transform var(--dur) var(--ease-out)}
.more a:hover{border-color:var(--navy-soft);transform:translateX(3px)}
.more a span{display:block;font-size:var(--t-base);font-weight:600;color:var(--navy);line-height:1.5}
.more a em{display:block;font-style:normal;font-size:var(--t-sm);color:var(--muted);margin-top:var(--s1)}

.sources{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--muted);line-height:1.8}
.sources b{display:block;color:var(--ink-2);font-size:var(--t-sm);margin-bottom:var(--s2)}
.sources a{color:var(--navy-soft)}

footer{background:var(--navy-deep);color:var(--on-navy-3);padding-block:var(--s7) var(--s6);
  font-size:var(--t-sm);margin-top:var(--s8)}
footer a{color:var(--gold-soft);text-decoration:none}
footer .fine{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--t-xs);color:#6C7891;line-height:1.8}

@media(min-width:640px){
  :root{--t-2xl:38px;--t-xl:27px}
  .cta-buttons .btn{min-width:210px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}