/* ============================================================================
   guide.css — /guides/<slug>/ 內容頁(2026-09-10 新建;三個搜尋意圖:找供應商 /
   cast vs calendered / MOQ 與每卷尺寸)+ /guides/ 目錄頁。
   shell 由 tools/www/gen_guides.mjs 產生(三語各一份;內容烤進 HTML,SEO 不靠 JS)。
   設計:碳黑 hero(字體 + 紅斜帶 + 膠膜色譜條)→ 紙色閱讀本體(左 TOC 黏住、右文章 78ch)
   → 章節頭 = 碳黑色帶 + 幽靈編號(重點一眼看到)→ 碳黑 CTA 帶。
   對比:紙底 ink #101013 / ink2 #4A4750 / red-ink #B0121B;碳底 mut #C9C6CE / red-td #FF5A60(交付前程式量測)。
   ============================================================================ */
:root{
  --carbon:#0A0A0C;--carbon2:#141418;--paper:#F4F2EE;--paper2:#EAE7E1;--white:#FFFFFF;
  --ink:#101013;--ink2:#4A4750;--ink3:#5F5B65;--mut:#C9C6CE;--mut2:#A8A49B;
  --red:#E32027;--red-td:#FF5A60;--red-ink:#B0121B;--amber:#F5C518;
  --line:rgba(16,16,19,.14);--line-d:rgba(255,255,255,.14);
  --disp:'Archivo','Noto Sans TC',sans-serif;--body:'IBM Plex Sans','Noto Sans TC',sans-serif;--mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  --spectrum:linear-gradient(90deg,#E32027 0 14.28%,#F26B1D 0 28.57%,#F5C518 0 42.85%,#2FB25B 0 57.14%,#19A9C2 0 71.42%,#2563EB 0 85.71%,#7C3AED 0 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--mxsn-h,56px) + 16px)}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}
.disp{font-family:var(--disp);font-stretch:112%;font-weight:900;letter-spacing:-.01em}
html[lang^="zh"] .disp{font-family:'Noto Sans TC',var(--disp);font-stretch:100%;letter-spacing:.01em;line-height:1.16}
.mono{font-family:var(--mono)}
.eb,.gd-art .eb{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-td);display:flex;align-items:center;gap:10px;font-weight:500}
.eb i{width:26px;height:2px;background:var(--red);flex:none}
.wrapx{max-width:1240px;margin:0 auto;padding:0 clamp(18px,3.4vw,44px)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* reading progress(sticky 條子下方 3px 紅線) */
.gd-prog{position:fixed;left:0;right:0;top:var(--mxsn-h,56px);height:3px;z-index:8000;pointer-events:none;background:transparent}
.gd-prog i{display:block;height:100%;width:0;background:var(--red);transition:width .12s linear}

/* ───────── hero ───────── */
.gd-hero{position:relative;background:var(--carbon);color:#fff;overflow:hidden;padding:clamp(48px,7vw,96px) 0 clamp(56px,7.5vw,104px);isolation:isolate}
.gd-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 16px)}
.gd-hero .diag{position:absolute;right:-12%;top:-30%;width:38vw;max-width:560px;height:180%;background:var(--red);
  transform:skewX(-11deg);opacity:.92;z-index:0}
.gd-hero .diag::after{content:"";position:absolute;left:-26px;top:0;bottom:0;width:8px;background:#fff;opacity:.9}
.gd-hero .ghost{position:absolute;right:2%;bottom:-8%;font:900 clamp(160px,26vw,380px)/1 var(--disp);color:transparent;
  letter-spacing:-.04em;opacity:.16;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text}
.gd-hero .spectrum{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--spectrum);z-index:2}
.gd-hero-in{position:relative;z-index:1;max-width:880px}
.gd-crumb{font:500 12.5px/1.6 var(--mono);letter-spacing:.04em;color:var(--mut);display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:26px}
.gd-crumb a{text-decoration:none;color:var(--mut)}
.gd-crumb a:hover{color:#fff;text-decoration:underline}
.gd-crumb span[aria-current]{color:#fff}
.gd-hero h1{font-size:clamp(34px,5.6vw,72px);line-height:1.02;margin:18px 0 22px;max-width:16ch;text-wrap:balance}
html[lang^="zh"] .gd-hero h1{font-size:clamp(30px,5vw,62px);line-height:1.18;max-width:18ch}
.gd-hero .dek{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--mut);max-width:58ch}
.gd-meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font:500 12.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}
.gd-meta li{display:flex;align-items:center;gap:8px}
.gd-meta li::before{content:"";width:6px;height:6px;background:var(--red);transform:skewX(-14deg)}

/* ───────── body grid ───────── */
.gd-body{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px)}
.gd-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.gd-toc{position:sticky;top:calc(var(--mxsn-h,56px) + 24px)}
.gd-toc-h{font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.gd-toc ol{list-style:none}
.gd-toc li a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:9px 0 9px 12px;text-decoration:none;color:var(--ink2);
  font-size:14px;line-height:1.45;border-left:3px solid transparent;transition:color .15s,border-color .15s}
.gd-toc li a .no{font:500 12px/1.6 var(--mono);color:var(--ink3)}
.gd-toc li a:hover{color:var(--ink)}
.gd-toc li a.on{color:var(--ink);border-left-color:var(--red);font-weight:600}
.gd-toc li a.on .no{color:var(--red-ink)}
.gd-toc-cta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;min-height:48px;background:var(--carbon);color:#fff;
  text-decoration:none;font:700 12.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:0 16px;transition:background .15s}
.gd-toc-cta:hover{background:var(--red)}

/* ───────── article ───────── */
.gd-art{max-width:78ch;min-width:0}
.gd-art p,.gd-art li{color:var(--ink);font-size:17px;line-height:1.75}
.gd-art .vd .eb{color:var(--red-td)}
.gd-art p+p{margin-top:16px}
.gd-art ul,.gd-art ol{padding-left:22px;margin:14px 0}
.gd-art li{margin:7px 0}
.gd-art li::marker{color:var(--red-ink);font-weight:700}
.gd-art strong{font-weight:700}
.gd-art a{color:var(--red-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gd-art a:hover{color:var(--ink)}
.gd-art .lead{font-size:19px;line-height:1.65;color:var(--ink)}
.gd-note{margin:22px 0;padding:16px 20px;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--amber);font-size:15.5px;line-height:1.65;color:var(--ink2)}
.gd-note b{color:var(--ink)}

/* 一句話結論(碳黑塊) */
.vd{background:var(--carbon);color:#fff;padding:clamp(24px,3vw,36px) clamp(22px,3vw,40px);margin:0 0 clamp(36px,5vw,56px);position:relative;overflow:hidden;
  box-shadow:inset 8px 0 0 var(--red)}
.vd::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:120px;background:rgba(255,255,255,.04);transform:skewX(-14deg)}
.vd .eb{margin-bottom:14px}
.vd .vd-say{font:700 clamp(20px,2.2vw,26px)/1.35 var(--disp);font-stretch:105%;letter-spacing:0;color:#fff;max-width:30ch;text-wrap:balance;position:relative;z-index:1}
html[lang^="zh"] .vd .vd-say{font-weight:900;line-height:1.4;font-stretch:100%}
.vd-facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-d);position:relative;z-index:1}
.vd-facts li{min-width:0}
.vd-facts .k{font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}
.vd-facts .v{font:900 clamp(22px,2.4vw,30px)/1.1 var(--disp);color:#fff;letter-spacing:-.01em}
.vd-facts .v small{font:600 12.5px/1.3 var(--body);color:var(--mut);display:block;margin-top:5px;letter-spacing:0}
html[lang^="zh"] .vd-facts .v{font-size:clamp(20px,2.2vw,26px)}

/* 章節頭 = 色帶 */
.gd-sec{margin:0 0 clamp(40px,5.5vw,64px)}
.gd-sech{position:relative;background:var(--carbon);color:#fff;padding:22px 26px 22px 30px;margin:0 0 26px;overflow:hidden;
  box-shadow:inset 6px 0 0 var(--red);display:flex;align-items:center;gap:18px;min-height:88px}
.gd-sech::after{content:"";position:absolute;right:-30px;top:0;bottom:0;width:90px;background:var(--red);transform:skewX(-18deg);opacity:.95}
.gd-sech .gno{position:absolute;right:82px;top:50%;transform:translateY(-50%);font:900 96px/1 var(--disp);color:rgba(255,255,255,.08);letter-spacing:-.04em;pointer-events:none;font-style:italic}
.gd-sech .no{font:500 12.5px/1 var(--mono);letter-spacing:.2em;color:var(--red-td);flex:none;writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 0}
.gd-sech h2{font:900 clamp(21px,2.4vw,30px)/1.15 var(--disp);font-stretch:108%;letter-spacing:-.01em;color:#fff;position:relative;z-index:1;text-wrap:balance;padding-right:70px}
html[lang^="zh"] .gd-sech h2{font-stretch:100%;line-height:1.3;letter-spacing:.01em}
.gd-art h3{font:700 clamp(18px,1.7vw,21px)/1.35 var(--body);margin:30px 0 10px;color:var(--ink);display:flex;align-items:center;gap:10px}
.gd-art h3::before{content:"";width:10px;height:10px;background:var(--red);transform:skewX(-14deg);flex:none}

/* 問題清單卡(找供應商) */
.qc{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
.qc li{margin:0;background:var(--white);border:1px solid var(--line);display:grid;grid-template-columns:64px minmax(0,1fr);gap:0}
.qc .qn{background:var(--carbon);color:#fff;font:900 26px/1 var(--disp);display:flex;align-items:flex-start;justify-content:center;padding-top:20px;letter-spacing:-.02em}
.qc .qb{padding:18px 20px 20px;min-width:0}
.qc .q{font:700 18px/1.4 var(--body);color:var(--ink);margin-bottom:10px}
.qc .why,.qc .ans{font-size:15.5px;line-height:1.65;color:var(--ink2)}
.qc .why b,.qc .ans b{display:block;font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.qc .ans{margin-top:12px;padding:12px 14px;background:var(--paper);border-left:3px solid var(--red);color:var(--ink)}
.qc .ans b{color:var(--red-ink)}

/* 製程六步(橫向帶) */
.proc{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative;counter-reset:st}
.proc::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--ink);opacity:.25}
.proc li{margin:0;position:relative;padding:44px 12px 0 0;min-width:0}
.proc li::before{counter-increment:st;content:counter(st,decimal-leading-zero);position:absolute;left:0;top:8px;width:30px;height:30px;background:var(--carbon);color:#fff;
  font:700 12px/30px var(--mono);text-align:center;letter-spacing:.06em}
.proc li:nth-child(3)::before{background:var(--red)}
.proc .pt{font:700 15px/1.3 var(--body);color:var(--ink);margin-bottom:6px}
.proc .pd{font-size:13.5px;line-height:1.55;color:var(--ink2)}
.gd-art .proc-tail{margin-top:18px;padding:14px 18px;background:var(--carbon);color:#fff;font:500 13px/1.6 var(--mono);letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.proc-tail b{color:var(--red-td);font-weight:500}

/* 對照表(cast vs calendered) */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.cmp{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55;background:var(--white);border:1px solid var(--line)}
.cmp th,.cmp td{padding:14px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp th{font:700 13.5px/1.3 var(--body)}
.cmp thead th{background:var(--carbon);color:#fff;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;border-bottom:0}
.cmp thead th:first-child{background:var(--carbon2)}
.cmp thead th.hi{color:var(--red-td)}
.cmp tbody th{width:22%;color:var(--ink);background:var(--paper2)}
.cmp td{color:var(--ink);width:26%}
.cmp td b{color:var(--red-ink)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* 系列對照晶片 */
.smap{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.smap li{margin:0;background:var(--white);border:1px solid var(--line);padding:16px 18px;box-shadow:inset 4px 0 0 var(--tint,#E32027);min-width:0}
.smap .sc{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.smap .code{font:900 20px/1 var(--disp);color:var(--ink);letter-spacing:-.01em}
.smap .tag{font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;background:var(--carbon);color:#fff}
.smap .tag.poly{background:#1D4ED8}
.smap .tag.mono{background:#5B5563}
.smap .tag.tpu{background:#0F766E}
.smap .sn{font:600 15px/1.4 var(--body);color:var(--ink);margin-bottom:6px}
.smap .sd{font-size:14px;line-height:1.55;color:var(--ink2)}
.smap .sd b{color:var(--ink)}
.smap a{display:inline-block;margin-top:8px;font:600 12.5px/1.4 var(--mono);letter-spacing:.06em;text-decoration:none;color:var(--red-ink)}
.smap a::after{content:" →"}
.smap a:hover{color:var(--ink);text-decoration:underline}

/* 每卷尺寸表 */
.rt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.rt{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;background:var(--white);border:1px solid var(--line);min-width:560px;table-layout:auto}
.rt thead th{background:var(--carbon);color:#fff;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;text-align:left}
.rt td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink)}
.rt tr.band td{background:var(--paper2);font:700 12.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:10px 14px;box-shadow:inset 5px 0 0 var(--tint,#E32027)}
.rt .code{font:900 16px/1.2 var(--disp);letter-spacing:-.01em;white-space:nowrap}
.rt .nm{color:var(--ink2);font-size:13.5px;display:block;margin-top:2px;font-family:var(--body);font-weight:400;letter-spacing:0}
.rt .roll{font:600 15px/1.4 var(--mono)}
.rt .roll small{display:block;font:400 12px/1.4 var(--mono);color:var(--ink3);white-space:normal}
.rt .n{font:500 14px/1.4 var(--mono);text-align:right;white-space:nowrap}
.rt .moq{font:500 13px/1.4 var(--mono);white-space:nowrap}
.rt .moq b{color:var(--red-ink);font-weight:700}
.rt td.c5{width:1%;white-space:nowrap}
.rt a{color:var(--red-ink);text-decoration:none;font:600 12.5px/1.4 var(--mono);white-space:nowrap}
.rt a::after{content:" →"}
.rt a:hover{text-decoration:underline;color:var(--ink)}
.gd-art .rt-foot{margin-top:10px;font:400 13px/1.6 var(--mono);color:var(--ink3)}

/* 下單四步 */
.steps{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:sp}
.steps li{margin:0;background:var(--white);border:1px solid var(--line);padding:18px;position:relative;min-width:0}
.steps li::before{counter-increment:sp;content:counter(sp);position:absolute;right:14px;top:8px;font:900 44px/1 var(--disp);color:var(--paper2);letter-spacing:-.04em}
.steps .st{font:700 16px/1.35 var(--body);color:var(--ink);margin-bottom:8px;position:relative}
.steps .sd{font-size:14px;line-height:1.55;color:var(--ink2);position:relative}
.steps .sd a{color:var(--red-ink)}

/* 六問(選膜) */
.six{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.six li{margin:0;background:var(--white);border:1px solid var(--line);padding:16px 18px;min-width:0}
.six .q{font:700 15.5px/1.4 var(--body);color:var(--ink);margin-bottom:8px;display:flex;gap:10px}
.six .q i{font:500 12px/1.6 var(--mono);color:var(--red-ink);flex:none;font-style:normal}
.six .a{font-size:14px;line-height:1.55;color:var(--ink2)}
.six .a b{color:var(--ink)}

/* 事實列(規格數字) */
.facts{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.facts li{margin:0;background:var(--white);padding:16px 16px 14px;min-width:0}
.facts .k{font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.facts .v{font:900 22px/1.1 var(--disp);color:var(--ink);letter-spacing:-.01em;word-break:break-word}
.facts .v small{display:block;font:500 12.5px/1.4 var(--body);color:var(--ink2);margin-top:4px;letter-spacing:0}

/* FAQ */
.gd-faq{margin:0 0 clamp(40px,5.5vw,64px)}
.gd-faq details{background:var(--white);border:1px solid var(--line);margin-top:-1px}
.gd-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:16px 18px;font:700 16.5px/1.4 var(--body);color:var(--ink);min-height:56px}
.gd-faq summary::-webkit-details-marker{display:none}
.gd-faq summary::before{content:"+";flex:none;width:26px;height:26px;border:1.5px solid var(--ink);display:grid;place-items:center;font:500 16px/1 var(--mono)}
.gd-faq details[open] summary::before{content:"–";background:var(--carbon);color:#fff;border-color:var(--carbon)}
.gd-faq details[open] summary{color:var(--red-ink)}
.gd-faq .fa{padding:0 18px 18px 58px;font-size:15.5px;line-height:1.7;color:var(--ink2)}
.gd-faq .fa a{color:var(--red-ink)}

/* 相關指南 */
.rel{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rel li{margin:0;min-width:0}
.rel a{display:block;height:100%;background:var(--white);border:1px solid var(--line);padding:18px 20px 20px;text-decoration:none;color:var(--ink);box-shadow:inset 0 -4px 0 var(--carbon);transition:box-shadow .15s}
.rel a:hover{box-shadow:inset 0 -4px 0 var(--red)}
.rel .rk{font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red-ink);margin-bottom:8px}
.rel .rt2{font:700 17px/1.35 var(--body);margin-bottom:6px}
.rel .rd{font-size:14px;line-height:1.55;color:var(--ink2)}

/* CTA 帶 */
.gd-cta{background:var(--carbon);color:#fff;position:relative;overflow:hidden;padding:clamp(48px,6vw,84px) 0}
.gd-cta::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--spectrum)}
.gd-cta .diag{position:absolute;left:58%;top:-20%;width:34vw;height:160%;background:var(--red);transform:skewX(-11deg);opacity:.9;z-index:0}
.gd-cta .diag::before{content:"";position:absolute;left:-22px;top:0;bottom:0;width:7px;background:#fff}
.gd-cta-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center}
.gd-cta h2{font:900 clamp(26px,3.6vw,44px)/1.08 var(--disp);font-stretch:110%;letter-spacing:-.01em;max-width:16ch;text-wrap:balance}
html[lang^="zh"] .gd-cta h2{font-stretch:100%;line-height:1.22;letter-spacing:.01em}
.gd-cta p{color:var(--mut);margin-top:14px;font-size:16px;line-height:1.65;max-width:48ch}
.gd-cta-act{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-self:end}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;text-decoration:none;font:700 13px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;transition:background .15s,color .15s,border-color .15s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#fff;color:var(--carbon)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* 頁尾 */
.gd-foot{background:var(--carbon);color:var(--mut);border-top:1px solid var(--line-d);padding:22px 0}
.gd-foot .wrapx{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font:400 12px/1.7 var(--mono)}
.gd-foot a{color:var(--mut);text-decoration:none}
.gd-foot a:hover{color:#fff;text-decoration:underline}
.gd-foot .sp{flex:1}

/* ───────── 目錄頁 /guides/ ───────── */
.gx{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gx li{margin:0;min-width:0}
.gx a{display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line);padding:26px 24px 24px;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;
  box-shadow:inset 0 -5px 0 var(--carbon);transition:box-shadow .15s,transform .2s var(--ease)}
.gx a:hover{box-shadow:inset 0 -5px 0 var(--red);transform:translateY(-3px)}
.gx .gn{font:900 64px/1 var(--disp);color:var(--paper2);letter-spacing:-.04em;position:absolute;right:14px;top:8px}
.gx .gk{font:500 12px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red-ink);margin-bottom:12px;position:relative}
.gx .gt{font:900 clamp(20px,1.8vw,24px)/1.2 var(--disp);font-stretch:106%;letter-spacing:-.01em;margin-bottom:12px;position:relative;text-wrap:balance}
html[lang^="zh"] .gx .gt{font-stretch:100%;line-height:1.32;letter-spacing:.01em}
.gx .gd{font-size:15px;line-height:1.6;color:var(--ink2);position:relative;flex:1}
.gx .gm{margin-top:18px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);display:flex;justify-content:space-between;gap:10px;position:relative}
.gx .gm b{color:var(--red-ink);font-weight:600}
.gx-intro{max-width:70ch;margin-bottom:clamp(26px,3.5vw,40px)}
.gx-intro p{font-size:18px;line-height:1.65;color:var(--ink2)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ───────── 響應式(手機獨立設計)───────── */
@media (max-width:1100px){
  .gd-grid{grid-template-columns:220px minmax(0,1fr)}
  .proc{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:22px}
  .proc::before{display:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  body{font-size:16px}
  .gd-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .gd-toc{position:static;background:var(--white);border:1px solid var(--line)}
  .gd-toc-h{margin:0;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:12px;min-height:48px}
  .gd-toc-h::after{content:"+";font:500 18px/1 var(--mono);color:var(--ink)}
  .gd-toc.open .gd-toc-h::after{content:"–"}
  .gd-toc ol,.gd-toc-cta{display:none}
  .gd-toc.open ol{display:block;padding:8px 8px 10px}
  .gd-toc li a{padding:11px 8px 11px 12px;font-size:15px;min-height:44px;align-items:center}
  .gd-hero .diag{right:-42%;width:62vw;opacity:.85}
  .gd-hero h1,.gd-hero .dek{text-shadow:0 1px 2px rgba(0,0,0,.35)}
  .gd-hero .ghost{font-size:clamp(120px,34vw,220px);right:-4%;bottom:-6%}
  .gd-sech .gno{display:none}
  .gd-sech{padding:18px 20px 18px 22px;min-height:76px;gap:14px}
  .gd-sech::after{width:56px;right:-22px}
  .gd-sech h2{padding-right:40px;font-size:20px}
  .steps,.six,.rel,.gx,.smap{grid-template-columns:minmax(0,1fr)}
  .gd-cta-in{grid-template-columns:minmax(0,1fr)}
  .gd-cta-act{justify-self:start;flex-direction:row;flex-wrap:wrap}
  .gd-cta .diag{left:auto;right:-40%;width:80vw;opacity:.75}
  .vd-facts{grid-template-columns:minmax(0,1fr);gap:12px}
  .vd-facts li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
  .vd-facts .k{margin:0}
  .vd-facts .v{text-align:right}
  .vd-facts .v small{text-align:right}
}
@media (max-width:640px){
  .gd-hero{padding:34px 0 48px}
  .gd-hero .diag{right:-58%;width:66vw}
  .gd-hero h1{font-size:clamp(30px,9vw,40px);margin:14px 0 16px}
  html[lang^="zh"] .gd-hero h1{font-size:clamp(27px,8vw,34px)}
  .gd-hero .dek{font-size:16.5px}
  .gd-meta{gap:8px 16px;font-size:12px}
  .gd-art p,.gd-art li{font-size:16px;line-height:1.72}
  .gd-art .lead{font-size:17.5px}
  .vd{padding:22px 18px 22px 20px}
  .vd .vd-say{font-size:20px}
  .qc li{grid-template-columns:48px minmax(0,1fr)}
  .qc .qn{font-size:20px;padding-top:18px}
  .qc .qb{padding:14px 14px 16px}
  .qc .q{font-size:16.5px}
  .qc .why,.qc .ans{font-size:15px}
  .proc{grid-template-columns:minmax(0,1fr);row-gap:0}
  .proc li{padding:0 0 0 48px;margin-bottom:18px}
  .proc li::before{top:0;left:0}
  .proc .pt{font-size:15.5px}
  .proc .pd{font-size:14px}
  /* 對照表 → 每欄一張卡 */
  .cmp,.cmp thead,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{position:absolute;left:-9999px;top:auto}
  .cmp tr{border-bottom:2px solid var(--carbon)}
  .cmp tbody th{width:auto;padding:12px 14px 8px;background:var(--paper2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--mono);font-weight:500;color:var(--ink2)}
  .cmp td{padding:8px 14px 10px;border-bottom:1px dashed var(--line);font-size:15.5px}
  .cmp td::before{content:attr(data-k);display:block;font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink);margin-bottom:3px}
  /* 每卷尺寸表 → 每系列一張卡 */
  .rt-wrap{overflow:visible}
  .rt{min-width:0;font-size:14.5px}
  .rt thead{position:absolute;left:-9999px;top:auto}
  .rt,.rt tbody,.rt tr,.rt td{display:block;width:auto}
  .rt tr{border-bottom:1px solid var(--line);padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center}
  .rt tr.band{display:block;padding:10px 14px}
  .rt td{padding:0;border:0}
  .rt td.c1{grid-column:1;grid-row:1}
  .rt td.c2{grid-column:1;grid-row:2}
  .rt td.c3{grid-column:2;grid-row:1;text-align:right}
  .rt td.c4{grid-column:2;grid-row:2;text-align:right}
  .rt td.c5{grid-column:1/-1;grid-row:3}
  .rt .roll{white-space:normal}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 14px}
  .facts .k{margin:0}
  .facts .v{font-size:19px;text-align:right}
  .gd-faq summary{font-size:16px;padding:14px}
  .gd-faq .fa{padding:0 14px 16px 54px;font-size:15px}
  .btn{width:100%}
  .gd-cta-act{width:100%}
}

/* 2026-09-11 第 04–06 篇:對照表 4 / 5 個資料欄(原本 22% + 3×26% 只適用 3 欄,多欄會在容器內橫捲) */
.cmp.c4{table-layout:fixed}.cmp.c4 tbody th{width:20%}.cmp.c4 td{width:20%}
.cmp.c4 th,.cmp.c4 td{padding:12px 11px;font-size:14.5px}
.cmp.c5{table-layout:fixed}.cmp.c5 tbody th{width:15%}.cmp.c5 td{width:17%}
.cmp.c5 th,.cmp.c5 td{padding:11px 9px;font-size:13.5px;line-height:1.45}
@media (min-width:641px){.cmp.c5 thead th{font-size:10.5px;letter-spacing:.1em}}
.cmp.c4 td small,.cmp.c5 td small{font-size:12px}
@media (max-width:640px){.cmp.c4,.cmp.c5{table-layout:auto}.cmp.c4 td,.cmp.c5 td,.cmp.c4 tbody th,.cmp.c5 tbody th{width:auto;font-size:15.5px;padding:8px 14px 10px}}