:root{
  --p-ground:#EFF0EC;--p-surface:#FBFBF9;--p-line:#DCDED6;
  --p-ink:#16181A;--p-ink2:#575B57;--p-ink3:#8B8F88;--p-accent:#0052FF;--p-accent-soft:#E6EDFF;
}
@media (prefers-color-scheme: dark){:root{--p-ground:#0E0F0E;--p-surface:#171916;--p-line:#2E312D;
  --p-ink:#F0F1EC;--p-ink2:#9DA199;--p-ink3:#71756E;--p-accent:#7398FF;--p-accent-soft:#131A2B;}}
:root[data-theme="dark"]{--p-ground:#0E0F0E;--p-surface:#171916;--p-line:#2E312D;
  --p-ink:#F0F1EC;--p-ink2:#9DA199;--p-ink3:#71756E;--p-accent:#7398FF;--p-accent-soft:#131A2B;}
:root[data-theme="light"]{--p-ground:#EFF0EC;--p-surface:#FBFBF9;--p-line:#DCDED6;
  --p-ink:#16181A;--p-ink2:#575B57;--p-ink3:#8B8F88;--p-accent:#0052FF;--p-accent-soft:#E6EDFF;}
*{box-sizing:border-box}
body{margin:0;background:var(--p-ground);color:var(--p-ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Helvetica Neue","Noto Sans TC",sans-serif;
  font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
.wrap{max-width:1500px;margin:0 auto;padding:32px 32px 80px}
.pagehead{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.eyebrow{margin:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--p-accent);font-weight:600}
.pagehead h1{margin:0;font-size:34px;line-height:1.2;letter-spacing:-.032em;font-weight:650}
.pagehead p.lead{margin:0;color:var(--p-ink2);max-width:66ch}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 17px;margin-bottom:12px;
  background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px}
.tb-label{font-size:12px;color:var(--p-ink3)}
.toolbar select{font:inherit;font-size:14px;color:var(--p-ink);background:var(--p-ground);
  border:1px solid var(--p-line);border-radius:999px;padding:8px 12px}
.toolbar select:focus-visible{outline:2px solid var(--p-accent);outline-offset:2px}
.tswitch{display:flex;background:var(--p-ground);border:1px solid var(--p-line);border-radius:999px;padding:4px;gap:2px}
.tswitch button{font:inherit;font-size:14px;color:var(--p-ink2);background:transparent;border:0;
  border-radius:999px;padding:4px 12px;cursor:pointer}
.tswitch button[aria-pressed="true"]{background:var(--p-surface);color:var(--p-ink);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:500}
.scale-note{margin-left:auto;font-size:12px;color:var(--p-ink3);font-variant-numeric:tabular-nums}
.warnbar{display:flex;gap:8px;align-items:flex-start;padding:12px 17px;margin-bottom:17px;
  background:var(--p-accent-soft);border:1px solid color-mix(in srgb,var(--p-accent) 26%,transparent);
  border-radius:14px;font-size:14px;line-height:1.6;color:var(--p-ink2)}
.warnbar strong{color:var(--p-ink)}
.warnbar svg{flex:none;margin-top:4px;color:var(--p-accent)}
.stage{width:100%;overflow:hidden;border-radius:18px;background:var(--p-ground);
  border:1px solid var(--p-line);box-shadow:0 20px 48px -30px rgba(0,0,0,.5)}
.notes{margin-top:32px;display:grid;gap:17px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.note{background:var(--p-surface);border:1px solid var(--p-line);border-radius:16px;padding:17px 24px}
.note h3{margin:0 0 8px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--p-accent);font-weight:600}
.note ul{margin:0;padding-left:1.1em;color:var(--p-ink2);font-size:14px}
.note li{margin-bottom:4px}.note li:last-child{margin-bottom:0}

/* ================= 畫布 ================= */
.canvas{
  width:100%;min-height:100vh;
  --bg:#FBFBF9;--bg2:#F2F3EF;--fill:#E9EAE3;--line:#DCDED6;--hair:#E7E8E1;
  --ink:#16181A;--ink2:#575B57;--ink3:#8B8F88;
  --blue:#0052FF;--blue-soft:#E6EDFF;--on-blue:#FFFFFF;
  --card:#FFFFFF;--seg-track:#E9EAE3;--seg-thumb:#FFFFFF;
  --up:#248A3D;--up-soft:#E3F5E8;--up-vivid:#34C759;--down:#C22B26;--down-soft:#FAE8E6;
  --amber:#96690F;--amber-soft:#F6EEDB;
  --mono:ui-monospace,"SF Mono",Menlo,"Roboto Mono","Noto Sans Mono",monospace;
  background:var(--bg);color:var(--ink);display:block;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Helvetica Neue","Noto Sans TC",sans-serif;
  font-size:14px;line-height:1.6;font-variant-numeric:tabular-nums;
}
.canvas[data-lang="ja"]{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif}
.canvas[data-lang="ko"]{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
.canvas[data-lang="en"]{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",sans-serif}
.canvas[data-mock-theme="dark"]{
  --bg:#101113;--bg2:#171819;--fill:#1F2123;--line:#2C2E31;--hair:#212325;
  --ink:#F1F2F3;--ink2:#9BA0A6;--ink3:#6F747A;
  --blue:#5A87FF;--blue-soft:#151E33;--on-blue:#0A0D14;
  --card:#1C1E20;--seg-track:#1F2123;--seg-thumb:#3A3D41;
  --up:#30D158;--up-soft:#122A18;--up-vivid:#30D158;--down:#E4736A;--down-soft:#2B1715;
  --amber:#CFA44C;--amber-soft:#272014;
}
.canvas button{font:inherit;color:inherit;cursor:pointer}
/* 量到的數字一律等寬——這是儀器，不是廣告 */
.canvas .cell,.canvas .gauge-val,.canvas .stat .v,.canvas .big .v,.canvas .dbig .v,
.canvas .mval,.canvas .spec td,.canvas .dspec td,.canvas .dmr .c,.canvas .rank,
.canvas .bar2 .c,.canvas .ruler-lab,.canvas .cgrid .cv,.canvas .sdate,.canvas .mcode,
.canvas .dchip .c,.canvas .cv{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.canvas .stat .v small,.canvas .big .v small,.canvas .dbig .v small{font-family:inherit;letter-spacing:0}
.canvas :focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.mk-ribbon{background:var(--blue-soft);color:var(--blue);font-size:12px;letter-spacing:.05em;
  text-align:center;padding:8px 12px;font-weight:500;border-bottom:1px solid var(--line)}
.mk-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:32px;padding:0 32px;height:68px;
  border-bottom:1px solid var(--line);background:var(--bg)}
.mk-brand{display:flex;align-items:center;gap:8px;flex:none;background:none;border:0;padding:0}
.mk-brand .bmark{width:28px;height:28px;color:var(--blue);flex:none}
.mk-brand .bname{font-size:17px;font-weight:650;letter-spacing:-.03em;white-space:nowrap}
.mk-nav{display:flex;gap:24px;align-items:center}
.mk-nav > button,.navdrop > button{border:0;background:transparent;color:var(--ink2);padding:8px 0;
  font-size:14px;position:relative;white-space:nowrap;display:flex;align-items:center;gap:4px}
.mk-nav > button[aria-selected="true"],.navdrop > button[aria-selected="true"]{color:var(--ink);font-weight:600}
.mk-nav > button[aria-selected="true"]::after,.navdrop > button[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-25px;height:2px;background:var(--blue);border-radius:2px}
.navdrop{position:relative}
.navpanel{position:absolute;left:-14px;top:calc(100% + 18px);background:var(--bg);border:1px solid var(--line);
  border-radius:16px;padding:8px;min-width:250px;box-shadow:0 18px 44px -16px rgba(0,0,0,.34);z-index:30;display:none}
.navdrop[data-open="1"] .navpanel{display:block}
.navpanel .ng{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;padding:8px 12px 8px}
.navpanel button{display:flex;width:100%;align-items:center;gap:8px;border:0;background:none;
  padding:8px 12px;border-radius:10px;font-size:14px;text-align:left;color:var(--ink)}
.navpanel button:hover{background:var(--fill)}
.navpanel button[disabled]{color:var(--ink3);cursor:default}
.navpanel button[disabled]:hover{background:none}
.navpanel button .ni{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--blue-soft);color:var(--blue)}
.navpanel button[disabled] .ni{background:var(--fill);color:var(--ink3)}
.navpanel button .nc{margin-left:auto;font-size:12px;color:var(--ink3)}
.navpanel button .nc.bad{color:var(--down-text)}
.navsep{height:1px;background:var(--hair);margin:8px 8px}
.mk-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.mk-search{display:flex;align-items:center;gap:8px;background:var(--fill);border:0;border-radius:999px;
  padding:8px 17px;width:230px;min-width:0;flex-shrink:1;color:var(--ink3);font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-top{min-width:0}
.mk-right{min-width:0}
@media (max-width:1120px){
  .mk-top{gap:17px;padding:0 17px}
  .mk-nav{gap:17px}
  .mk-search{width:150px}
}
@media (max-width:960px) and (min-width:861px){
  .mk-search{display:none}
  .mk-top{gap:12px}
}
.langsel{display:flex;align-items:center;gap:8px;background:var(--fill);border:0;border-radius:999px;
  padding:8px 12px;font-size:14px;color:var(--ink);white-space:nowrap}
.langmenu{position:relative}
.langlist{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:8px;min-width:158px;box-shadow:0 14px 34px -14px rgba(0,0,0,.34);z-index:20;display:none}
.langmenu[data-open="1"] .langlist{display:block}
.langlist button{display:flex;width:100%;align-items:center;gap:8px;border:0;background:none;
  padding:8px 12px;border-radius:9px;font-size:14px;text-align:left}
.langlist button:hover{background:var(--fill)}
.langlist button[aria-pressed="true"]{color:var(--blue);font-weight:600}
.langlist .code{font-size:10px;color:var(--ink3);margin-left:auto;letter-spacing:.06em}
/* 權重要壓過 .canvas button{color:inherit}，否則文字會被吃成跟底同色 */
.mk-theme{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--bg);color:var(--ink2);display:grid;place-items:center;padding:0}
.mk-theme:hover{color:var(--ink);border-color:var(--ink3)}
.canvas button.mk-cta{flex:none;border:1px solid var(--blue);background:var(--blue);color:var(--on-blue);
  border-radius:999px;padding:8px 17px;font-size:14px;font-weight:650;white-space:nowrap;letter-spacing:.01em}
.canvas button.mk-cta:hover{background:transparent;color:var(--blue)}

.scroll{background:var(--bg)}
.page{max-width:1240px;margin:0 auto;padding:0 32px}
.page.wide{max-width:1520px}

/* 首頁形象 banner */
.banner{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:var(--bg2)}
/* 方格紙：細格 + 粗格，像實驗記錄本 */
.banner-grid{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%)}
.banner-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 620px;gap:48px;
  align-items:center;padding:48px 0 48px}
.banner-copy .eyeb{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.04em;color:var(--ink2);background:var(--bg);border:1px solid var(--line);
  padding:8px 12px;border-radius:999px;margin-bottom:24px}
.banner-copy .eyeb .pulse{width:7px;height:7px;border-radius:50%;background:var(--up);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--up) 22%,transparent)}
.banner h1{margin:0 0 17px;font-size:56px;line-height:1.12;letter-spacing:-.045em;font-weight:650;max-width:17ch;text-wrap:balance}
.banner p{margin:0;font-size:17px;line-height:1.68;color:var(--ink2);max-width:52ch}
.banner .cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.banner-foot{position:relative;display:flex;gap:24px;flex-wrap:wrap;padding:0 0 24px;
  font-family:var(--mono);font-size:12px;color:var(--ink3);letter-spacing:.02em}
.banner-foot b{color:var(--ink2);font-weight:600}
.banner-art{position:relative}
.bmx{width:100%;height:auto;display:block}
.bmx .lbl{font-size:14px;font-weight:700;letter-spacing:.09em;fill:var(--ink3)}
.bmx .cap{font-size:12px;fill:var(--ink3)}
.bmx .capb{font-size:12px;fill:var(--ink2);font-weight:600}
.bmx .lane{fill:var(--bg2)}
.bmx .edge{stroke:var(--line);stroke-width:1;fill:none}
/* 首頁 */
.hero{padding:48px 0 32px;border-bottom:1px solid var(--line)}
.hero h1{margin:0 0 12px;font-size:40px;line-height:1.16;letter-spacing:-.042em;font-weight:650;max-width:20ch;text-wrap:balance}
.hero p{margin:0;font-size:17px;line-height:1.66;color:var(--ink2);max-width:60ch}
.hero .cta{display:flex;gap:12px;margin-top:24px}
.btn{border:0;border-radius:999px;padding:12px 24px;font-size:14px;font-weight:600}
.btn.primary{background:var(--blue);color:var(--on-blue)}
.btn.ghost{background:var(--fill);color:var(--ink)}
.strip{display:flex;border-bottom:1px solid var(--line)}
.stat{flex:1;padding:24px 24px 24px;position:relative;min-width:0}
.stat + .stat::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:1px;background:var(--hair)}
.stat:first-child{padding-left:0}
.stat .k{font-size:12px;color:var(--ink3);margin-bottom:4px}
.stat .v{font-size:28px;font-weight:650;letter-spacing:-.035em;line-height:1.1}
.stat .v small{font-size:14px;font-weight:400;color:var(--ink3);margin-left:4px;letter-spacing:0}
.stat.alert .v{color:var(--down-text)}
.stat .n{font-size:12px;color:var(--ink3);margin-top:4px}
.sec{padding:48px 0;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:24px;font-weight:650;letter-spacing:-.032em}
.sec-h .d{font-size:14px;color:var(--ink3)}
.sec-h .more{margin-left:auto;font-size:14px;color:var(--blue);background:none;border:0;padding:0;font-weight:500}
.feed{display:flex;flex-direction:column}
.fitem{display:flex;align-items:center;gap:17px;padding:17px 0;border-bottom:1px solid var(--hair);
  text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%}
.fitem:last-child{border-bottom:0}
.fitem:hover .ft{color:var(--blue)}
.fmark{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center}
.fmark.bad{background:var(--down-soft);color:var(--down-text)}
.fmark.warn{background:var(--amber-soft);color:var(--amber-text)}
.fbody{flex:1;min-width:0}
.fbody .ft{display:block;font-size:14px;font-weight:600;letter-spacing:-.018em;line-height:1.45}
.fbody .fd{display:block;font-size:14px;color:var(--ink3);line-height:1.5}
.ftag{flex:none;font-size:12px;color:var(--ink3);display:flex;align-items:center;gap:8px}
.src{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:4px 8px;border-radius:999px;white-space:nowrap}
.src.scan{background:var(--blue-soft);color:var(--blue)}
.src.reader{background:var(--up-soft);color:var(--up-text)}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cat{text-align:left;background:var(--bg2);border:1px solid var(--line);border-radius:16px;
  padding:17px 24px 17px;display:flex;flex-direction:column;gap:2px;min-height:132px;transition:border-color .13s,transform .13s}
.cat:hover{border-color:var(--blue);transform:translateY(-1px)}
.cat.soon{opacity:.62}.cat.soon:hover{border-color:var(--line);transform:none;cursor:default}
.cat .ci{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;background:var(--blue-soft);color:var(--blue)}
.cat .cn{font-size:17px;font-weight:650;letter-spacing:-.024em}
.cat .cc{font-size:14px;color:var(--ink3);margin-top:1px}
.cat .cf{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600}
.cat .cf.bad{color:var(--down-text)}.cat .cf.ok{color:var(--up-text)}.cat .cf.soon{color:var(--ink3);font-weight:400}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tool{text-align:left;background:var(--blue-soft);border:0;border-radius:16px;padding:24px 24px;display:flex;gap:17px;align-items:center}
.tool .ti{width:42px;height:42px;border-radius:12px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;flex:none}
.tool .tn{display:block;font-size:17px;font-weight:650;letter-spacing:-.022em}
.tool .td{display:block;font-size:14px;color:var(--ink2)}

/* 市場覆蓋條（首頁） */
.mkts{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mkt{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:17px 17px}
.mkt .mc{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--ink3);margin-bottom:8px}
.mkt .mn{font-size:14px;font-weight:650;letter-spacing:-.02em;margin-bottom:8px}
.mkt .ml{display:flex;flex-direction:column;gap:4px}
.mkt .mi{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink2)}
.mkt .mi .d{width:6px;height:6px;border-radius:50%;flex:none}
.mkt .mi .d.ok{background:var(--up)}
.mkt .mi .d.no{background:var(--amber)}
.mkt .mi .d.na{background:var(--ink3);opacity:.5}
.mkt .mi em{font-style:normal;color:var(--ink3);font-size:12px;margin-left:auto}

/* 麵包屑 */
.crumb{display:flex;align-items:center;gap:8px;padding:17px 0 0;font-size:14px;color:var(--ink3);flex-wrap:wrap}
.crumb button{border:0;background:none;color:var(--ink3);padding:0;font-size:14px}
.crumb button:hover{color:var(--blue)}
.crumb .sep{opacity:.5}

/* 品類頁 */
.cat-head{padding:24px 0 24px;border-bottom:1px solid var(--line)}
.cat-head h1{margin:0 0 8px;font-size:28px;font-weight:650;letter-spacing:-.036em}
.cat-head p{margin:0;font-size:14px;color:var(--ink2);max-width:72ch;line-height:1.72}
.cat-head p b{color:var(--ink)}
.how{display:flex;margin-top:24px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.how-i{flex:1;padding:17px 17px;border-right:1px solid var(--line)}
.how-i:last-child{border-right:0}
.how-i .hk{font-size:12px;color:var(--ink3);margin-bottom:4px}
.how-i .hv{font-size:14px;font-weight:600;letter-spacing:-.015em}
.how-i .hd{font-size:12px;color:var(--ink3);line-height:1.5;margin-top:2px}
.catbody{display:flex;align-items:flex-start}
.rail{flex:none;width:196px;padding:24px 24px 24px 0;position:sticky;top:88px}
.tblwrap{flex:1;min-width:0;padding-bottom:32px}
/* 第三欄：詳情面板 */
.detail{flex:none;width:396px;margin-left:24px;padding:24px 0 32px;position:sticky;top:88px;max-height:calc(100vh - 108px);overflow-y:auto}
.dcard{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:24px 24px 24px}
.dtop{display:flex;align-items:center;gap:12px;margin-bottom:17px}
.dtop .pmark{width:46px;height:46px;font-size:17px}
.dtop .m{display:block;font-size:21px;font-weight:650;letter-spacing:-.03em;line-height:1.2}
.dtop .b{display:block;font-size:14px;color:var(--ink3);line-height:1.4}
.dbig{margin-bottom:17px}
.dbig .lbl{font-size:14px;color:var(--ink2);margin-bottom:4px}
.dbig .v{font-size:40px;font-weight:650;letter-spacing:-.042em;line-height:1}
.dbig .v small{font-size:17px;font-weight:500;color:var(--ink3);margin-left:8px}
.dbig .s{margin-top:8px;font-size:14px;color:var(--ink3)}
.dbig .s b{color:var(--down-text);font-weight:650}
.dsec{padding-top:17px;margin-top:17px;border-top:1px solid var(--line)}
.dsec-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.dsec-h h5{margin:0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.dsec-h .sp{flex:1}
.dmx{display:flex;flex-direction:column;gap:2px}
.dmr{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:8px 0;font-size:14px}
.dmr .c{font-size:10px;font-weight:700;letter-spacing:.07em;color:var(--ink3);background:var(--fill);
  padding:2px 0;border-radius:5px;text-align:center}
.dmr .n{color:var(--ink2)}
.dmr .s{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.dmr .s .dt{width:7px;height:7px;border-radius:50%;flex:none}
.dmr .s.ok{color:var(--up-text)} .dmr .s.ok .dt{background:var(--up)}
.dmr .s.no{color:var(--down-text);font-weight:600} .dmr .s.no .dt{background:var(--down)}
.dmr .s.self{color:var(--amber-text)} .dmr .s.self .dt{background:var(--amber)}
.dmr .s.na{color:var(--ink3)} .dmr .s.na .dt{background:var(--fill);border:1px solid var(--line)}
.dsay{margin:0;font-size:14px;line-height:1.7;color:var(--ink2)}
.dsay b{color:var(--ink);font-weight:600}
.dfull{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:17px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:12px;font-size:14px;font-weight:600}
.dfull:hover{border-color:var(--blue);color:var(--blue)}
.dempty{color:var(--ink3);font-size:14px;padding:32px 4px;text-align:center}
.dspec{width:100%;border-collapse:collapse;font-size:14px}
.dspec th,.dspec td{padding:8px 0;border-bottom:1px solid var(--hair);text-align:left}
.dspec tr:last-child th,.dspec tr:last-child td{border-bottom:0}
.dspec th{font-weight:400;color:var(--ink3)}
.dspec td{text-align:right;font-weight:600}
.f-group{margin-bottom:24px}
.f-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;background:var(--fill);color:var(--ink2);border-radius:999px;padding:8px 12px;font-size:14px}
.chip[aria-pressed="true"]{background:var(--blue);color:var(--on-blue);font-weight:600}
.list-head{display:flex;align-items:center;gap:12px;padding:24px 0 12px}
.list-title{font-size:17px;font-weight:650;letter-spacing:-.026em}
.list-title span{font-size:14px;font-weight:400;color:var(--ink3);margin-left:8px}
.sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink3)}
.sort select{font:inherit;font-size:14px;color:var(--ink);background:var(--fill);border:0;border-radius:999px;padding:8px 12px}
.thead,.trow{display:grid;gap:12px;align-items:center;padding:0 12px}
.thead{height:38px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);
  border-bottom:1px solid var(--line);font-weight:600}
.thead .r{text-align:right}
.trow{width:100%;height:76px;text-align:left;border:0;background:transparent;
  border-bottom:1px solid var(--hair);color:var(--ink);border-radius:10px;transition:background .12s}
.trow:hover{background:var(--bg2)}
.trow[aria-current="true"]{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.trow[aria-current="true"] .pname .b{color:var(--ink2)}
.rank{font-size:14px;color:var(--ink3)}
.pname{display:flex;align-items:center;gap:12px;min-width:0}
.pname > span{min-width:0}
.pmark{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--on-blue);font-size:14px;font-weight:700}
.pname .m{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pname .b{display:block;font-size:12px;color:var(--ink3);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell{text-align:right;font-size:14px}
.cell.dim{color:var(--ink3)}
.cell.hi{font-weight:650;font-size:14px;letter-spacing:-.02em}
.cell.spd{font-family:var(--mono);font-size:14px;line-height:1.3;text-align:right}
.cell.spd em{display:block;font-style:normal;font-size:10px;color:var(--ink3)}
.fbar{display:flex;flex-wrap:wrap;gap:17px 24px;align-items:flex-end;padding:4px 0 17px;border-bottom:1px solid var(--line)}
.fgrp{display:flex;flex-direction:column;gap:8px}
.flab{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.fsel{font:inherit;font-size:14px;color:var(--ink);background:var(--fill);border:0;border-radius:999px;padding:8px 12px}
.gauge{display:flex;flex-direction:column;gap:8px}
.gauge-track{height:6px;border-radius:3px;background:var(--fill);position:relative}
.gauge-fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--up-vivid) 82%,#fff) 0%,var(--up-vivid) 100%);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--up-vivid) 45%,transparent)}
.gauge-fill.over{background:var(--down)}
.gauge-tick{position:absolute;top:-3px;bottom:-3px;width:1.5px;background:var(--ink3);opacity:.5;border-radius:1px}
.gauge-tick.hard{background:var(--down);opacity:.75}
.gauge-val{font-size:12px;color:var(--ink2)}
.gauge-val b{color:var(--ink);font-weight:600}
/* 市場小燈 */
.dots{display:flex;gap:4px;justify-content:flex-end}
.dchip{display:flex;flex-direction:column;align-items:center;gap:4px;width:26px}
.dchip .c{font-size:10px;letter-spacing:.04em;color:var(--ink3);font-weight:600}
.dchip .d{width:8px;height:8px;border-radius:50%}
.dchip .d.ok{background:var(--up)}
.dchip .d.no{background:var(--down)}
.dchip .d.self{background:var(--amber)}
.dchip .d.na{background:var(--fill);border:1px solid var(--line)}
.verd{display:flex;align-items:center;gap:8px;font-size:14px;justify-content:flex-end}
.verd .dot{width:7px;height:7px;border-radius:50%;flex:none}
.verd.ok{color:var(--up-text)}.verd.ok .dot{background:var(--up)}
.verd.bad{color:var(--down-text);font-weight:600}.verd.bad .dot{background:var(--down)}
.empty{padding:32px 4px;color:var(--ink3)}

/* 單品頁 */
.prod{padding:17px 0 48px;display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:48px;align-items:start}
.prod-id{display:flex;align-items:center;gap:17px;margin-bottom:24px}
.prod-id .pmark{width:56px;height:56px;font-size:17px}
.prod-id .m{display:block;font-size:28px;font-weight:650;letter-spacing:-.036em;line-height:1.18}
.prod-id .b{display:block;font-size:14px;color:var(--ink3);line-height:1.4}
.hero2{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;margin-bottom:24px;background:var(--bg2)}
@media (max-width:430px){
  .hero2{flex-direction:column}
  .hero2 .h2div{flex:0 0 1px;height:1px;width:auto}
  .hero2 > div{padding:17px 17px}
}
.hero2 > div{flex:1 1 0;min-width:0;padding:17px 24px}
.hero2 .lbl,.hero2 .sub2{overflow-wrap:anywhere}
.hero2 .h2div{flex:0 0 1px;padding:0;background:var(--line)}
.hero2 .lbl{font-size:14px;color:var(--ink2);margin-bottom:8px}
.hero2 .lbl em{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:1px}
.hero2 .v{font-size:40px;font-weight:650;letter-spacing:-.042em;line-height:1;font-family:var(--mono)}
.hero2 .v.ok{color:var(--up-text)}
.hero2 .v small{font-size:17px;font-weight:500;color:var(--ink3);margin-left:4px;font-family:inherit;letter-spacing:0}
.hero2 .sub2{margin-top:8px;font-size:12px;color:var(--ink3);line-height:1.6}
.big{margin-bottom:24px}
.big .lbl{font-size:14px;color:var(--ink2);margin-bottom:4px}
.big .v{font-size:56px;font-weight:650;letter-spacing:-.045em;line-height:1}
.big .v small{font-size:21px;font-weight:500;color:var(--ink3);margin-left:8px;letter-spacing:-.01em}
.big .s{margin-top:8px;font-size:14px;color:var(--ink3)}
.big .s b{color:var(--down-text);font-weight:650}
.phtbl{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.phrow{display:grid;grid-template-columns:minmax(110px,1.2fr) 92px minmax(80px,1fr) 70px;gap:12px;
  align-items:center;padding:8px 17px;border-bottom:1px solid var(--hair);font-size:14px}
.phrow:last-child{border-bottom:0}
.phrow .pn2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phrow .pc{font-family:var(--mono);font-size:12px;color:var(--ink3);text-align:right}
.phrow .pbar{height:6px;border-radius:3px;background:var(--fill);position:relative;overflow:hidden}
.phrow .pf{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:3px}
.phrow .pt{font-family:var(--mono);font-weight:650;text-align:right}
.phrow .pt.good{color:var(--up-text)}
.phrow .pt.low{color:var(--amber-text)}
@media (max-width:520px){
  .phrow{grid-template-columns:minmax(0,1fr) 64px 56px;gap:8px;padding-left:12px;padding-right:12px}
  .phrow .pbar{grid-column:1/-1;order:9;margin-top:-4px}
  .phrow .pc{font-size:10px}
}
.blk{margin-bottom:32px}
.blk-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.blk-h h4{margin:0;font-size:17px;font-weight:650;letter-spacing:-.024em}
.blk-h .sp{flex:1}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:4px 12px;border-radius:999px}
.tag.ok{background:var(--up-soft);color:var(--up-text)}
.tag.bad{background:var(--down-soft);color:var(--down-text)}
.tag.warn{background:var(--amber-soft);color:var(--amber-text)}
.tag.info{background:var(--fill);color:var(--ink2)}
.tag .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.bar2{height:38px;border-radius:11px;background:var(--fill);position:relative;overflow:hidden;margin-bottom:12px}
.bar2 .f{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:11px 0 0 11px}
.bar2 .c{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 12px;font-size:14px;font-weight:600}
.say{margin:0;font-size:14px;color:var(--ink2);line-height:1.75}
.say + .say{margin-top:8px}
.say b{color:var(--ink);font-weight:600}
.ruler{margin-bottom:17px}
.ruler-t{height:10px;border-radius:5px;background:var(--fill);position:relative}
.ruler-f{position:absolute;left:0;top:0;bottom:0;border-radius:5px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--up-vivid) 78%,#fff) 0%,var(--up-vivid) 100%)}
.ruler-f.over{background:var(--down)}
.ruler-l{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink3);opacity:.55;border-radius:1px}
.ruler-l.hard{background:var(--down);opacity:.8}
.ruler-labs{position:relative;height:34px;margin-top:8px}
.ruler-lab{position:absolute;top:0;transform:translateX(-50%);text-align:center;font-size:12px;line-height:1.35;color:var(--ink3);white-space:nowrap}
.ruler-lab b{display:block;color:var(--ink2);font-size:12px;font-weight:600}

/* 認證矩陣 */
.matrix{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mrow{display:grid;grid-template-columns:118px 1fr 132px 176px;gap:12px;align-items:center;
  padding:12px 17px;border-bottom:1px solid var(--hair)}
.mrow:last-child{border-bottom:0}
.mrow.hd{background:var(--bg2);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:600;padding:8px 17px}
.mcty{display:flex;align-items:center;gap:8px}
.mcode{font-size:10px;font-weight:700;letter-spacing:.07em;background:var(--fill);color:var(--ink2);
  padding:2px 8px;border-radius:5px}
.mcty span{font-size:14px;color:var(--ink2)}
.mname{font-size:14px;font-weight:600}
.mname em{display:block;font-style:normal;font-size:12px;color:var(--ink3);font-weight:400;line-height:1.5}
.mstat{display:flex;align-items:center;gap:8px;font-size:14px}
.mstat .i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none}
.mstat.ok{color:var(--up-text)}.mstat.ok .i{background:var(--up-soft)}
.mstat.no{color:var(--down-text)}.mstat.no .i{background:var(--down-soft)}
.mstat.self{color:var(--amber-text)}.mstat.self .i{background:var(--amber-soft)}
.mstat.na{color:var(--ink3)}.mstat.na .i{background:var(--fill)}
.mval{font-size:14px;color:var(--ink2);text-align:right;overflow-wrap:anywhere}
.lkbtn{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:12px;font-weight:600;
  color:var(--ink2);background:var(--fill);border-radius:999px;padding:2px 8px;text-decoration:none;white-space:nowrap}
.lkbtn:hover{color:var(--blue);background:var(--blue-soft)}
.lkbtn.deep{color:var(--blue);background:var(--blue-soft)}
.ce-note{margin-top:12px;padding:17px 17px;background:var(--amber-soft);border-radius:12px;
  font-size:14px;line-height:1.72;color:var(--ink2)}
.ce-note b{color:var(--ink)}

/* 快照 */
.snap{border:1px solid var(--line);border-radius:14px;padding:8px 17px}
.srow{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:flex-start}
.srow:last-child{border-bottom:0}
.sdate{flex:none;width:104px;font-size:14px;color:var(--ink3);padding-top:1px}
.sbody{flex:1;min-width:0}
.sbody .st{display:block;font-size:14px;font-weight:600;line-height:1.45}
.sbody .sd{display:block;font-size:14px;color:var(--ink3);line-height:1.55}
.sview{flex:none;font-size:14px;color:var(--blue);background:none;border:0;padding:0;font-weight:500;white-space:nowrap}
.sdot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:8px;background:var(--fill);border:2px solid var(--line)}
.sdot.chg{background:var(--amber);border-color:var(--amber)}
.sdot.gone{background:var(--down);border-color:var(--down)}


/* ══ 佈局方案切換器 ══ */
.laybar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--fill);border-radius:14px;padding:8px 12px;margin:4px 0 17px}
.laybar > b{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.02em;white-space:nowrap}
.laybar .lb{display:flex;gap:4px;background:var(--card);border-radius:999px;padding:4px;
  border:1px solid var(--line);flex-wrap:wrap}
.laybar .lb button{border:0;background:transparent;color:var(--ink2);font-size:12px;font-weight:600;
  padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.laybar .lb button[aria-selected="true"]{background:var(--blue);color:var(--on-blue)}
.laybar em{font-style:normal;font-size:12px;color:var(--ink3);min-width:0}

/* ── 方案 B：結論在上、明細兩欄 ── */
.prod[data-lay="b"]{display:block}
.prod[data-lay="b"] .aside{position:static;max-height:none;overflow:visible;padding-right:0;
  display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:17px;align-items:start}
.prod[data-lay="b"] .spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.prod[data-lay="b"] .spec tbody{display:contents}
.prod[data-lay="b"] .spec tr{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.prod[data-lay="b"] .spec th,.prod[data-lay="b"] .spec td{border:0;padding:0;white-space:nowrap}
.prod[data-lay="b"] .spec td{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis}
.prod[data-lay="b"] > div:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px;align-items:start}
.prod[data-lay="b"] > div:first-child > .realtag,
.prod[data-lay="b"] > div:first-child > .prod-id,
.prod[data-lay="b"] > div:first-child > .hero2,
.prod[data-lay="b"] > div:first-child > .aside{grid-column:1/-1;margin-bottom:8px}
.prod[data-lay="b"] .blk{margin-bottom:0}

/* ── 方案 C：分頁 ── */
.tabbar{display:flex;gap:4px;background:var(--fill);border-radius:999px;padding:4px;
  margin:0 0 17px;overflow-x:auto;scrollbar-width:none;width:max-content;max-width:100%}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{flex:0 0 auto;border:0;background:transparent;color:var(--ink2);font-size:14px;
  font-weight:600;padding:8px 17px;border-radius:999px;cursor:pointer;white-space:nowrap}
.tabbar button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10)}
.prod[data-lay="c"] .blk[data-hide="1"]{display:none}
@media (max-width:860px){
  .prod[data-lay="b"] .aside{grid-template-columns:1fr}
  .prod[data-lay="b"] .spec{grid-template-columns:1fr}
  .prod[data-lay="b"] > div:first-child{grid-template-columns:1fr}
  .laybar{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:1180px) and (min-width:861px){
  .prod[data-lay="b"] .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ══ 讀者指正 ══ */
.fixb{border:0;background:transparent;color:var(--ink3);padding:2px 4px;margin-left:8px;
  border-radius:6px;cursor:pointer;opacity:0;transition:opacity .12s;vertical-align:1px}
.spec tr:hover .fixb,.fixb:focus{opacity:1}
.fixb:hover{color:var(--blue);background:var(--blue-soft)}
.fixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin:12px 0 4px}
.fixcell{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  border:1px solid var(--line);background:var(--card);border-radius:11px;padding:8px 12px;cursor:pointer}
.fixcell .fc1{font-size:14px;font-weight:600;color:var(--ink)}
.fixcell .fc2{font-size:10px;color:var(--ink3)}
.fixcell:hover{border-color:var(--blue)}
.fixcell:hover .fc1{color:var(--blue)}
.fixcell.need{border-style:dashed;background:var(--bg2)}
.fixcell.need .fc2{color:#B25000}
.fixcell.other{border-style:dashed}
.histh{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);margin:24px 0 8px}
.hrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.hrow .hd{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.hrow .hb{min-width:0}
.hrow .hb > b{display:block;font-size:14px;margin-bottom:4px}
.hchg{display:inline-flex;align-items:center;gap:8px;font-size:14px;background:var(--fill);
  border-radius:8px;padding:4px 8px;margin-bottom:8px;flex-wrap:wrap}
.hchg s{color:var(--ink3)}
.hchg b{color:var(--up-text)}
.hrow em{display:block;font-style:normal;font-size:12px;color:var(--ink2);line-height:1.6}
.hrow .hm{display:block;font-size:12px;color:var(--ink3);margin-top:4px;overflow-wrap:anywhere}
.hempty{font-size:14px;color:var(--ink3);line-height:1.65;background:var(--fill);
  border-radius:12px;padding:12px 17px}
.fixhdr{background:var(--blue-soft);border-radius:14px;padding:12px 17px;margin:0 0 17px}
.fixhdr .fh1{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
.fixhdr .fh2{font-size:17px;font-weight:650;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fixhdr .fhf{font-size:12px;font-weight:600;background:var(--blue);color:var(--on-blue);border-radius:999px;padding:4px 12px}
.fixhdr .fh3{font-size:12px;color:var(--ink2);margin-top:8px}

/* ══ 商品頁標頭（全寬，規格卡與商品圖齊高）══ */
.prodhead{padding:17px 0 0}
.prodhead .realtag{margin-bottom:12px}
.canvas .prod{padding-top:0}
.canvas .prod > .aside{padding-top:0}

/* ══ Apple 排版校準：字級不動，改行高、字距、字重與節奏 ══ */
.canvas{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.canvas h1{letter-spacing:-.034em;line-height:1.09;font-weight:600}
.canvas h2{letter-spacing:-.028em;line-height:1.15;font-weight:600}
.canvas h3{letter-spacing:-.024em;line-height:1.2;font-weight:600}
.canvas h4{letter-spacing:-.021em;line-height:1.25;font-weight:600}
.canvas .prod-id .m{letter-spacing:-.032em;line-height:1.1;font-weight:600}
/* 內文：Apple 的行高是 1.47–1.55，原本 1.72 偏鬆 */
.canvas .say{font-size:14px;line-height:1.58;letter-spacing:-.004em}
.canvas .cat-head p,.canvas .mdhero p,.canvas .regh p,.canvas .pd{font-size:14px;line-height:1.58}
.canvas .lede{line-height:1.55}
.canvas .conote,.canvas .ce-note,.canvas .srcnote{line-height:1.62}
.canvas .shottxt p{line-height:1.62}
.canvas .hrow em{line-height:1.58}
/* 小字：Apple 在 12px 以下改用正字距才不會糊 */
.canvas .fc2,.canvas .pre em,.canvas .hm,.canvas .b,.canvas .sub2{letter-spacing:.004em}
/* 數字一律等寬對齊 */
.canvas .cell,.canvas .gv,.canvas .spec td,.canvas .wtc .v{font-variant-numeric:tabular-nums}

/* ══ 篩選器：縮一級，密度拉高 ══ */

.canvas .rprow,.canvas .rphd{gap:8px}
.canvas .pname{gap:8px}
.canvas .fbar{gap:12px 17px;padding:2px 0 12px}
.canvas .fgrp{gap:4px}
.canvas .flab{font-size:10px;letter-spacing:.08em}
.canvas .chips{gap:4px}
.canvas .chip{font-size:12px;padding:4px 12px;letter-spacing:-.003em}
.canvas .fsel{font-size:12px;padding:8px 12px}
.canvas .prebar{gap:8px;padding:0 0 12px}
.canvas .prebar > b{font-size:10px;letter-spacing:.08em}
.canvas .pre{font-size:12px;padding:8px 12px;border-radius:10px;line-height:1.2}
.canvas .pre em{font-size:10px}

/* ══ 分段切換：蘋果式灰軌＋白色浮起膠囊 ══ */
.canvas .wtseg,.canvas .tabbar{background:var(--seg-track);border-radius:10px;padding:2px;gap:2px}
.canvas .wtseg button,.canvas .tabbar button{border-radius:8px;color:var(--ink2);font-weight:500;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.canvas .wtseg button:hover,.canvas .tabbar button:hover{color:var(--ink)}
.canvas .wtseg button[aria-selected="true"],.canvas .tabbar button[aria-selected="true"]{
  background:var(--seg-thumb);color:var(--ink);font-weight:600;
  box-shadow:0 3px 8px rgba(0,0,0,.10),0 1px 1px rgba(0,0,0,.07),0 0 0 .5px rgba(0,0,0,.05)}
.canvas[data-mock-theme="dark"] .wtseg button[aria-selected="true"],
.canvas[data-mock-theme="dark"] .tabbar button[aria-selected="true"]{
  box-shadow:0 2px 6px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.09)}
.canvas .wtseg button{padding:8px 17px;font-size:14px}

/* ══ 兩台比一比：這張表原本完全沒有樣式，所以整個垮成一直排 ══ */
.cmp .pf{display:flex;flex-direction:column;gap:8px;min-width:0}
.cmp .pf label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.cmp .pf select{font:inherit;font-size:14px;color:var(--ink);background:var(--fill);
  border:0;border-radius:11px;padding:8px 12px;min-width:230px;max-width:100%;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238B8F88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:32px}
.cgrid{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,1.35fr) minmax(0,1.35fr);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.cgrid > *{padding:12px 17px;border-bottom:1px solid var(--hair);display:flex;align-items:center;min-width:0}
.cgrid > *:nth-child(3n+1){border-right:1px solid var(--hair);background:var(--bg2)}
.cgrid > *:nth-child(3n+2){border-right:1px solid var(--hair)}
.cgrid > *:nth-last-child(-n+3){border-bottom:0}
.cgrid .ch{padding:17px;background:var(--bg2);align-items:flex-start}
.cgrid .ch:nth-child(3n+2),.cgrid .ch:nth-child(3n+3){background:var(--card)}
.cgrid .hn{display:flex;gap:12px;align-items:center;min-width:0}
.cgrid .hn .m{font-size:14px;font-weight:600;letter-spacing:-.02em;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cgrid .hn .b{font-size:12px;color:var(--ink3);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cgrid .cl{font-size:12px;color:var(--ink2);font-weight:500}
.cgrid .cv{font-size:14px;color:var(--ink);justify-content:flex-end;text-align:right;
  overflow-wrap:anywhere}
.cgrid .cv.win{color:var(--up-text);font-weight:650;background:var(--up-soft)}
@media (max-width:700px){
  .cgrid{grid-template-columns:minmax(88px,1fr) minmax(0,1fr) minmax(0,1fr)}
  .cgrid > *{padding:8px 12px}
  .cgrid .cv{font-size:12px}
  .cgrid .hn{flex-direction:column;align-items:flex-start;gap:8px}
  .cmp .pf select{min-width:0;width:100%}
  .cmp .pf{flex:1 1 100%}
}

/* ══ 內文行長上限（大螢幕才看得出差別）══ */
.canvas .say,.canvas .conote,.canvas .ce-note,.canvas .shottxt p,
.canvas .hempty,.canvas .hrow em{max-width:78ch}
.canvas .pd,.canvas .lede{max-width:74ch}

/* ══ 快速找 ══ */
.prebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0 12px}
.prebar > b{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.06em;
  text-transform:uppercase;margin-right:2px;white-space:nowrap}
.pre{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;
  padding:8px 12px;cursor:pointer;text-align:left;font-size:14px;font-weight:600;line-height:1.25}
.pre em{font-style:normal;font-size:10px;font-weight:500;color:var(--ink3)}
.pre:hover{border-color:var(--blue)}
.pre[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.pre[aria-pressed="true"] em{color:rgba(255,255,255,.78)}
.pre.clr{background:transparent;border-style:dashed;color:var(--ink3);font-weight:500}
@media (max-width:860px){
  .prebar{gap:8px}
  .pre{font-size:12px;padding:8px 12px}
  .pre em{display:none}
}

/* ══ 商品示意圖 ══ */
.art{display:block;width:100%;height:100%;object-fit:contain}
.thumb{flex:0 0 54px;width:54px;height:40px;display:flex;align-items:center;justify-content:center;
  background:var(--fill);border-radius:9px;padding:4px}
.thumb .art{width:100%;height:100%}
.shotband{display:grid;grid-template-columns:236px minmax(0,1fr);gap:24px;align-items:center;
  background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:17px 24px;margin:0 0 24px}
.shotpic{height:132px;display:flex;align-items:center;justify-content:center;
  background:var(--fill);border-radius:12px;padding:12px}
.shottxt .sh1{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.02em;margin-bottom:8px}
.shottxt p{margin:0;font-size:12px;line-height:1.68;color:var(--ink2)}
.shottxt p b{color:var(--ink)}
.shotbtn{margin-top:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:8px 17px;font-size:12px;font-weight:600;cursor:pointer}
.shotbtn:hover{border-color:var(--blue);color:var(--blue)}
@media (max-width:860px){
  .shotband{grid-template-columns:1fr;gap:12px;padding:12px}
  .shotpic{height:112px}
}

/* ── 重量基準 ── */
.wtseg{display:flex;background:var(--fill);border-radius:999px;padding:4px;gap:2px;margin-bottom:17px;
  width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wtseg::-webkit-scrollbar{display:none}
.wtseg button{flex:0 0 auto}
.wtseg button{border:0;background:transparent;color:var(--ink2);font-size:14px;font-weight:600;
  padding:8px 17px;border-radius:999px;cursor:pointer;white-space:nowrap}
.wtseg button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10)}
.wtgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:17px}
.wtc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:17px}
.wtc .k{display:block;font-size:12px;color:var(--ink3);font-weight:600;letter-spacing:.02em;margin-bottom:8px}
.wtc .v{display:block;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.wtc .v small{font-size:14px;font-weight:600;color:var(--ink3);margin-left:4px}
.wtc .r{display:block;font-size:12px;color:var(--ink3);margin-top:8px}
.wtc.na .v{color:var(--ink3);font-size:17px}
.wtbar{display:grid;grid-template-columns:190px 1fr 92px;gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line)}
.wtbar:last-child{border-bottom:0}
.wtbar .nm{font-size:14px;min-width:0}
.wtbar .nm b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtbar .nm span{display:block;font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wtbar .tr{position:relative;height:22px;background:var(--fill);border-radius:6px}
.wtbar .fl{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--blue);opacity:.72}
.wtbar .fl.alu{background:#8E8E93}
.wtbar .fl.unknown{background:var(--ink3);opacity:.32}
.wtbar .gv{font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.wtbar .gv em{display:block;font-style:normal;font-size:10px;color:var(--ink3);font-weight:500}
.mtchip{display:inline-block;font-size:10px;font-weight:600;padding:1px 8px;border-radius:999px;
  background:var(--fill);color:var(--ink2);margin-left:8px;vertical-align:1px}
.mtchip.alu{background:rgba(142,142,147,.18)}
.mtchip.plastic{background:var(--blue-soft);color:var(--blue)}
.floorline{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--down);opacity:.9;z-index:2}
.floorcap{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--down-text);font-weight:600;margin:0 0 8px}
.floorcap i{display:inline-block;width:2px;height:13px;background:var(--down);border-radius:1px}
.gapcard{background:var(--fill);border-radius:16px;padding:17px;margin-top:8px}
.gapcard h5{margin:0 0 8px;font-size:14px;font-weight:600}
.gaprow{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.gaprow:last-child{border-bottom:0}
.gaprow .gs{flex:0 0 78px;font-size:12px;font-weight:600;padding:2px 0;color:var(--dn)}
.gaprow .gs.part{color:#B25000}
.gaprow .gs.ok2{color:var(--up-text)}
.gaprow .gt{font-size:14px;line-height:1.55;color:var(--ink2);min-width:0}
.gaprow .gt b{color:var(--ink)}
@media (max-width:820px){
  .wtgrid{grid-template-columns:1fr}
  .wtbar{grid-template-columns:1fr 76px;gap:8px}
  .wtbar .tr{grid-column:1/-1}
}
.aside{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto;padding-right:4px}
.aside::-webkit-scrollbar{width:6px}
.aside::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:8px 24px;margin-bottom:17px}
.card-t{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600;
  padding:17px 0 8px;border-bottom:1px solid var(--hair)}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--hair)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{font-weight:400;color:var(--ink3)}
.spec td{text-align:right;font-weight:600;letter-spacing:-.01em}
.srcnote{font-size:12px;color:var(--ink3);line-height:1.7;padding:12px 0 17px;
  overflow-wrap:anywhere;word-break:break-word}
.srcurl{display:block;font-family:var(--mono);font-size:12px;color:var(--ink3);padding:12px 0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srcurl:hover{white-space:normal;overflow-wrap:anywhere}

/* ---- 真實商品清單 ---- */
.rpwrap{display:flex;align-items:flex-start}
.rplist{flex:1;min-width:0;padding-bottom:32px}
.rphead{display:flex;align-items:center;gap:12px;padding:17px 0 12px;flex-wrap:wrap}
.rphead .t{font-size:21px;font-weight:650;letter-spacing:-.028em}
.rphead .t span{font-size:14px;font-weight:400;color:var(--ink3);margin-left:8px}
.rpchips{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.rprow{display:grid;grid-template-columns:26px minmax(210px,1.6fr) 84px 96px minmax(88px,0.75fr) 128px 96px;
  gap:12px;align-items:center;padding:0 12px;width:100%;height:76px;text-align:left;border:0;
  background:transparent;border-bottom:1px solid var(--hair);color:var(--ink);border-radius:10px;transition:background .12s}
.rprow:hover{background:var(--bg2)}
.rprow[aria-current="true"]{background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.rphd{display:grid;grid-template-columns:26px minmax(210px,1.6fr) 84px 96px minmax(88px,0.75fr) 128px 96px;
  gap:12px;padding:0 12px;height:38px;align-items:center;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.rphd .r{text-align:right}
.certdots{display:flex;gap:8px;align-items:center}
.cd2{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.cd2.ok{background:var(--up-soft);color:var(--up-text)}
.cd2.no{background:var(--fill);color:var(--ink3)}
.pill2{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:4px 8px;border-radius:999px;white-space:nowrap}
.pill2.bad{background:var(--down-soft);color:var(--down-text)}
.pill2.warn{background:var(--amber-soft);color:var(--amber-text)}
.pill2.ok{background:var(--up-soft);color:var(--up-text)}
.srcbadge{display:inline-flex;font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 8px;
  border-radius:4px;margin-left:8px;vertical-align:middle}
.srcbadge.t2{background:var(--up-soft);color:var(--up-text)}
.srcbadge.t4{background:var(--amber-soft);color:var(--amber-text)}
.rpdetail{flex:none;width:396px;margin-left:24px;padding:17px 0 32px;position:sticky;top:88px;max-height:calc(100vh - 108px);overflow-y:auto}
.rpcard{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:24px 24px 24px}
.rpcard h3{margin:0 0 4px;font-size:21px;font-weight:650;letter-spacing:-.028em}
.rpcard .rb{font-size:14px;color:var(--ink3);margin-bottom:17px}
.rpsec{padding-top:17px;margin-top:17px;border-top:1px solid var(--line)}
.rpsec h5{margin:0 0 8px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.rpkv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;border-bottom:1px solid var(--hair)}
.rpkv:last-child{border-bottom:0}
.rpkv .k{color:var(--ink3)}
.rpkv .v{font-family:var(--mono);font-weight:600;text-align:right}
.rpv{padding:12px 12px;border-radius:10px;margin-bottom:8px;font-size:14px;line-height:1.6}
.rpv.conf{background:var(--down-soft);border:1px solid color-mix(in srgb,var(--down) 26%,transparent)}
.rpv.sus{background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 26%,transparent)}
.rpv b{display:block;margin-bottom:2px}
.rpv .m{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.rpempty{padding:32px 12px;text-align:center;color:var(--ink3);font-size:14px}

/* ---- 型號查詢：一條鏈 ---- */
.mdpage{padding:24px 0 48px;max-width:1180px}
.mdhero{margin-bottom:24px}
.mdhero h1{margin:0 0 8px;font-size:34px;font-weight:650;letter-spacing:-.036em}
.mdhero p{margin:0;font-size:14px;color:var(--ink2);line-height:1.72;max-width:70ch}
.mdhero p b{color:var(--ink)}
.mdsearch{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);
  border-radius:999px;padding:12px 24px;margin:24px 0 8px}
.mdsearch input{flex:1;border:0;background:none;font:inherit;font-size:17px;color:var(--ink);outline:none;font-family:var(--mono)}
.mdsearch input::placeholder{color:var(--ink3);font-family:inherit}
.mdhint{font-size:12px;color:var(--ink3);margin-bottom:24px}
.mdhint b{font-family:var(--mono);color:var(--blue);cursor:pointer}
.mdhint b:hover{text-decoration:underline}
.chain{display:flex;flex-direction:column;gap:0;margin-bottom:24px}
.cstep{display:flex;gap:17px}
.crail{flex:none;width:34px;display:flex;flex-direction:column;align-items:center}
.cdot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--fill);color:var(--ink2);font-family:var(--mono);font-size:12px;font-weight:700}
.cdot.on{background:var(--blue);color:var(--on-blue)}
.cdot.bad{background:var(--down);color:#fff}
.cline{flex:1;width:2px;background:var(--line);margin:4px 0}
.cbody{flex:1;padding-bottom:24px;min-width:0}
.cbody h4{margin:8px 0 8px;font-size:17px;font-weight:650;letter-spacing:-.022em}
.cbody .cd{font-size:14px;color:var(--ink3);margin-bottom:12px}
.ctbl{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ctr{display:grid;grid-template-columns:76px 1fr 150px 130px 108px;gap:12px;padding:12px 17px;
  border-bottom:1px solid var(--hair);align-items:center;font-size:14px}
.ctr:last-child{border-bottom:0}
.ctr.hd{background:var(--bg2);font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3);font-weight:600;padding:8px 17px}
.ctr .mono{font-family:var(--mono);font-size:12px}
.ctr .src{font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px;
  background:var(--fill);color:var(--ink2);text-align:center}
.ctr .src.ncc{background:var(--blue-soft);color:var(--blue)}
.ctr .pen{text-align:right;font-family:var(--mono);font-weight:650}
.ctr .pen.hot{color:var(--down-text)}
.ctr .pen.zero{color:var(--ink3);font-weight:400}
.mdempty{padding:48px 17px;text-align:center;color:var(--ink3);border:1px dashed var(--line);border-radius:14px}
.trust{border:1px solid var(--line);border-radius:16px;padding:24px 24px;background:var(--bg2);margin-top:8px}
.trust h4{margin:0 0 8px;font-size:17px;font-weight:650;letter-spacing:-.02em}
.trust .td2{margin:0 0 17px;font-size:14px;color:var(--ink3)}
.tier{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:flex-start}
.tier:last-child{border-bottom:0}
.tier .tn{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:700}
.tier.t1 .tn{background:var(--up-soft);color:var(--up-text)}
.tier.t2 .tn{background:var(--blue-soft);color:var(--blue)}
.tier.t3 .tn{background:var(--amber-soft);color:var(--amber-text)}
.tier.t4 .tn{background:var(--down-soft);color:var(--down-text)}
.tier .tt{display:block;font-size:14px;font-weight:600;line-height:1.45}
.tier .tdd{display:block;font-size:14px;color:var(--ink3);line-height:1.6}
.casebox{margin-top:17px;padding:17px 17px;border-radius:12px;background:var(--down-soft);
  border:1px solid color-mix(in srgb,var(--down) 26%,transparent);font-size:14px;line-height:1.74;color:var(--ink2)}
.casebox b{color:var(--ink)}
.casebox .cl2{display:block;font-family:var(--mono);font-size:12px;color:var(--ink3);margin-top:8px}

/* ---- 公司檔案 ---- */
.copage{padding:24px 0 48px;max-width:1240px}
.cohead{display:flex;gap:17px;align-items:flex-start;margin-bottom:24px;flex-wrap:wrap}
.coavatar{width:60px;height:60px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:var(--fill);color:var(--ink2);font-size:21px;font-weight:700}
.coavatar.bad{background:var(--down-soft);color:var(--down-text)}
.cohead .ct{flex:1;min-width:0}
.cohead h1{margin:0 0 8px;font-size:28px;font-weight:650;letter-spacing:-.034em;line-height:1.2}
.cohead .cs{display:flex;gap:8px;flex-wrap:wrap}
.cokpi{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px}
.kp{border:1px solid var(--line);border-radius:14px;padding:17px 17px;background:var(--bg2)}
.kp .k{font-size:12px;color:var(--ink3);margin-bottom:4px}
.kp .v{font-family:var(--mono);font-size:24px;font-weight:650;letter-spacing:-.03em;line-height:1.15}
.kp .n{font-size:12px;color:var(--ink3);margin-top:4px}
.kp.alert .v{color:var(--down-text)}
.kp.warn .v{color:var(--amber-text)}
.coverdict{padding:17px 24px;border-radius:14px;margin-bottom:24px;font-size:14px;line-height:1.75}
.coverdict.bad{background:var(--down-soft);border:1px solid color-mix(in srgb,var(--down) 30%,transparent);color:var(--ink2)}
.coverdict.warn{background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 32%,transparent);color:var(--ink2)}
.coverdict.ok{background:var(--bg2);border:1px solid var(--line);color:var(--ink2)}
.coverdict b{color:var(--ink)}
.cosec{margin-bottom:32px}
.cosec h3{margin:0 0 4px;font-size:17px;font-weight:650;letter-spacing:-.022em}
.cosec .sub2{margin:0 0 12px;font-size:14px;color:var(--ink3)}
.cotbl{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cotr{display:grid;gap:12px;padding:12px 17px;border-bottom:1px solid var(--hair);align-items:center;font-size:14px}
.cotr:last-child{border-bottom:0}
.cotr.hd{background:var(--bg2);font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3);font-weight:600;padding:8px 17px}
.cotr .mono{font-family:var(--mono);font-size:12px}
.cotr .dim{color:var(--ink3)}
.cotr .r{text-align:right;font-family:var(--mono)}
.colink{color:var(--blue);cursor:pointer;text-decoration:none}
.colink:hover{text-decoration:underline}
.cobars{display:flex;align-items:flex-end;gap:8px;height:96px;margin:12px 0 4px}
.cob{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.cob .bb{width:100%;background:var(--down);border-radius:4px 4px 0 0;min-height:3px;opacity:.85}
.cob .vv{font-family:var(--mono);font-size:10px;font-weight:600}
.cob .yy{font-family:var(--mono);font-size:10px;color:var(--ink3)}
.conote{font-size:12px;color:var(--ink3);line-height:1.7;margin-top:8px}

/* ---- 違規紀錄 ---- */
.vseg{display:flex;gap:2px;background:var(--fill);border-radius:999px;padding:4px;margin-bottom:17px;width:fit-content}
.vseg button{border:0;background:transparent;color:var(--ink2);border-radius:999px;padding:8px 17px;font-size:14px}
.vseg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.vrank{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vrow{display:grid;grid-template-columns:40px 1fr 74px 118px 96px 108px;gap:12px;align-items:center;
  padding:12px 17px;border-bottom:1px solid var(--hair);font-size:14px}
.vrow:last-child{border-bottom:0}
/* 這裡**不要寫 padding 簡寫**。簡寫會把左右釘在 17px，而下面 Apple 那一段
   只覆蓋上下、內容列的左右是 24px，結果整排欄位左緣差 7px。
   （.mrow 踩過一模一樣的坑。）左右一律交給 .vrow 決定。 */
.vrow.hd{background:var(--bg2);font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3);font-weight:600;padding-top:8px;padding-bottom:8px}
.vrow .rk{font-family:var(--mono);color:var(--ink3);font-size:14px}
.vrow .co{font-weight:600;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.vrow .n3{color:var(--down-text);font-weight:650}
.vrow .n2{color:var(--amber-text);font-weight:600}
.vbadge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.vbadge.hot{background:var(--down-soft);color:var(--down-text)}
.vbadge.warm{background:var(--amber-soft);color:var(--amber-text)}
.vbadge.mm{background:var(--down-soft);color:var(--down-text)}
.vlist{display:flex;flex-direction:column;gap:8px}
.vcard{border:1px solid var(--line);border-radius:14px;padding:17px 17px;background:var(--bg)}
.vcard .vh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.vcard .vp{font-size:14px;font-weight:600;letter-spacing:-.018em}
.vcard .vm{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink3);align-items:center}
.vcard .vm .mono{font-family:var(--mono)}
.vfine{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:650}
.vfine.big{color:var(--down-text)}
.vtag{display:inline-flex;font-size:12px;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--fill);color:var(--ink2)}
.vtag.mm{background:var(--down-soft);color:var(--down-text);font-weight:600}
.chan{display:inline-flex;font-size:12px;padding:2px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}
.vwarn{margin-top:24px;padding:17px 24px;border-radius:14px;background:var(--amber-soft);
  border:1px solid color-mix(in srgb,var(--amber) 32%,transparent);font-size:14px;line-height:1.72;color:var(--ink2)}
.vwarn b{color:var(--ink)}
.vbars{display:flex;align-items:flex-end;gap:8px;height:110px;margin:17px 0 4px}
.vb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.vb .bb{width:100%;background:var(--blue);border-radius:4px 4px 0 0;min-height:3px}
.vb .vv{font-family:var(--mono);font-size:12px;font-weight:600}
.vb .yy{font-family:var(--mono);font-size:10px;color:var(--ink3)}

/* ---- 真實登錄查詢 ---- */
.regpage{padding:24px 0 48px}
.realtag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;color:var(--up-text);background:var(--up-soft);padding:8px 12px;border-radius:999px;margin-bottom:17px}
.regh h1{margin:0 0 8px;font-size:34px;font-weight:650;letter-spacing:-.038em}
.regh p{margin:0;font-size:14px;color:var(--ink2);line-height:1.72;max-width:72ch}
.regh p b{color:var(--ink)}
.regstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 24px}
@media (max-width:860px){.regstats{grid-template-columns:1fr 1fr}.rst .v{font-size:21px}}
@media (max-width:430px){.regstats{grid-template-columns:1fr}}
.rst{border:1px solid var(--line);border-radius:14px;padding:17px 17px;background:var(--bg2);min-width:0}
.rst .k,.rst .n{overflow-wrap:anywhere}
.rst .v{overflow-wrap:anywhere}
.rst .k{font-size:12px;color:var(--ink3);margin-bottom:4px}
.rst .v{font-family:var(--mono);font-size:24px;font-weight:650;letter-spacing:-.03em;line-height:1.1}
.rst .n{font-size:12px;color:var(--ink3);margin-top:4px}
.regtools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:17px}
.regsearch{flex:1;min-width:280px;display:flex;align-items:center;gap:8px;background:var(--bg2);
  border:1px solid var(--line);border-radius:999px;padding:12px 17px}
.regsearch input{flex:1;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);outline:none}
.regsearch input::placeholder{color:var(--ink3)}
.regtable{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rgrow{display:grid;gap:12px;padding:12px 17px;border-bottom:1px solid var(--hair);align-items:center;font-size:14px}
.rgrow:last-child{border-bottom:0}
.rgrow.hd{background:var(--bg2);font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3);font-weight:600;padding:8px 17px}
.rgrow .mono{font-family:var(--mono);font-size:12px}
.rgrow .dim{color:var(--ink3)}
.rgcount{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;font-size:14px;color:var(--ink3)}
.rgcount b{font-family:var(--mono);font-size:17px;color:var(--ink);font-weight:650}
.regnote{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:17px}
.rn{border:1px solid var(--line);border-radius:16px;padding:17px 24px;background:var(--bg2)}
.rn.have{border-color:color-mix(in srgb,var(--up) 32%,transparent)}
.rn.lack{border-color:color-mix(in srgb,var(--down) 30%,transparent)}
.rn h4{margin:0 0 8px;font-size:14px;font-weight:650;letter-spacing:-.02em}
.rn ul{margin:0;padding-left:1.15em;font-size:14px;color:var(--ink2);line-height:1.8}
.rn li b{color:var(--ink);font-weight:600}
.rn p{margin:8px 0 0;font-size:14px;color:var(--ink3);line-height:1.7}
.yrchart{display:flex;align-items:flex-end;gap:8px;height:130px;margin:17px 0 8px}
.ybar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.ybar .b{width:100%;background:var(--blue);border-radius:5px 5px 0 0;min-height:3px}
.ybar .v{font-family:var(--mono);font-size:12px;font-weight:600}
.ybar .y{font-family:var(--mono);font-size:10px;color:var(--ink3)}

/* ---- 來源與快照頁 ---- */
.srcpage{padding:24px 0 48px;max-width:1180px}
.srch{margin-bottom:8px}
.srch h1{margin:0 0 8px;font-size:28px;font-weight:650;letter-spacing:-.036em}
.srch p{margin:0;font-size:14px;color:var(--ink2);line-height:1.72;max-width:70ch}
.srcbar{display:flex;gap:0;margin:24px 0 32px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2)}
.srcbar div{flex:1;padding:17px 17px;border-right:1px solid var(--line)}
.srcbar div:last-child{border-right:0}
.srcbar .k{font-size:12px;color:var(--ink3);margin-bottom:4px}
.srcbar .v{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.02em}
.srcbar .v.warn{color:var(--amber-text)}
.srcbar .v.bad{color:var(--down-text)}
.slist{display:flex;flex-direction:column;gap:12px}
.scard{border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow:hidden}
.scard.gone{border-style:dashed}
.shead{display:flex;gap:17px;padding:17px 17px;align-items:flex-start}
.sthumb{flex:none;width:132px;height:76px;border-radius:10px;background:var(--fill);
  display:grid;place-items:center;color:var(--ink3);position:relative;overflow:hidden}
.sthumb .lines{position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,transparent 0 9px,color-mix(in srgb,var(--ink3) 9%,transparent) 9px 10px)}
.sthumb .dur{position:absolute;right:6px;bottom:6px;background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:10px;padding:1px 4px;border-radius:4px}
.sbody2{flex:1;min-width:0}
.skind{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.stitle{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.42;margin-bottom:4px}
.smeta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--ink3);align-items:center}
.smeta .u{font-family:var(--mono);word-break:break-all}
.sstat{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  padding:4px 12px;border-radius:999px;white-space:nowrap}
.sstat .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.sstat.live{background:var(--up-soft);color:var(--up-text)}
.sstat.changed{background:var(--amber-soft);color:var(--amber-text)}
.sstat.gone{background:var(--down-soft);color:var(--down-text)}
.squote{margin:0;padding:12px 17px;border-top:1px solid var(--hair);background:var(--bg2);
  font-size:14px;line-height:1.72;color:var(--ink2)}
.squote b{color:var(--ink);font-weight:600}
.squote .qlab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.sacts{display:flex;gap:8px;padding:12px 17px;border-top:1px solid var(--hair);flex-wrap:wrap}
.sbtn{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;
  padding:8px 17px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.sbtn:hover{border-color:var(--ink)}
.sbtn.solid{background:var(--blue);color:var(--on-blue);border-color:var(--blue)}
.sbtn[disabled]{color:var(--ink3);border-style:dashed;cursor:default}
.sbtn[disabled]:hover{border-color:var(--line)}
.spolicy{margin-top:24px;padding:17px 24px;border:1px solid var(--line);border-radius:16px;background:var(--bg2)}
.spolicy h4{margin:0 0 8px;font-size:14px;font-weight:650;letter-spacing:-.02em}
.spolicy p{margin:0 0 8px;font-size:14px;line-height:1.72;color:var(--ink2)}
.spolicy p:last-child{margin-bottom:0}
.spolicy b{color:var(--ink);font-weight:600}

/* ---- 實測室 ---- */
.labpage{padding:0 0 48px}
.labhero{border-bottom:1px solid var(--line);padding:48px 0 48px}
.labhero .eyeb{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;color:var(--ink2);background:var(--bg);border:1px solid var(--line);
  padding:8px 12px;border-radius:999px;margin-bottom:17px}
.labhero h1{margin:0 0 12px;font-size:40px;line-height:1.16;letter-spacing:-.042em;font-weight:650;max-width:19ch}
.labhero p{margin:0;font-size:17px;line-height:1.7;color:var(--ink2);max-width:60ch}
.labsec{padding:48px 0;border-bottom:1px solid var(--line)}
.labsec:last-child{border-bottom:0}
.labsec h2{margin:0 0 8px;font-size:24px;font-weight:650;letter-spacing:-.032em}
.labsec .sd{margin:0 0 24px;font-size:14px;color:var(--ink3)}
.steps{display:flex;flex-direction:column}
.step{display:flex;gap:24px;padding:17px 0;border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:0}
.stepn{flex:none;width:40px;font-family:var(--mono);font-size:14px;color:var(--ink3);padding-top:2px}
.stepb .sn{display:block;font-size:17px;font-weight:650;letter-spacing:-.024em;margin-bottom:4px}
.stepb .sdd{display:block;font-size:14px;color:var(--ink2);line-height:1.75;max-width:76ch}
.gear{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gcard{border:1px solid var(--line);border-radius:16px;padding:17px 24px;background:var(--bg2)}
.gcard .gi{width:36px;height:36px;border-radius:10px;background:var(--bg);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);margin-bottom:12px}
.gcard .gn{font-size:14px;font-weight:650;letter-spacing:-.02em}
.gcard .gs{font-family:var(--mono);font-size:12px;color:var(--ink3);margin:2px 0 8px}
.gcard .gu{font-size:14px;color:var(--ink2);line-height:1.6}
.report{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.rhead{display:flex;align-items:center;gap:12px;padding:17px 24px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.rhead .rt{font-size:17px;font-weight:650;letter-spacing:-.022em}
.rhead .rid{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.rhead .sp{flex:1}
.rrow{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px;padding:12px 24px;
  border-bottom:1px solid var(--hair);align-items:center;font-size:14px}
.rrow:last-child{border-bottom:0}
.rrow.hd{background:var(--bg);font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);padding:8px 24px}
.rrow .n{color:var(--ink2)}
.rrow .v{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.rrow .v.claim{color:var(--ink3)}
.rrow .v.meas{font-weight:650}
.rrow .v.gap.bad{color:var(--down-text);font-weight:650}
.rrow .v.gap.ok{color:var(--up-text);font-weight:650}
.rfoot{padding:17px 24px;border-top:1px solid var(--line);background:var(--bg2);
  font-size:14px;color:var(--ink3);line-height:1.7}
.certgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.certcard{border:1px solid var(--line);border-radius:18px;padding:24px 24px 24px;background:var(--bg2)}
.certmark{width:100px;height:100px;margin-bottom:17px}
.certcard h3{margin:0 0 8px;font-size:17px;font-weight:650;letter-spacing:-.026em}
.certcard p{margin:0 0 8px;font-size:14px;line-height:1.74;color:var(--ink2)}
.certcard p:last-child{margin-bottom:0}
.certcard b{color:var(--ink);font-weight:600}
.rules{display:flex;flex-direction:column;gap:0}
.rule{display:flex;gap:12px;padding:17px 0;border-bottom:1px solid var(--hair)}
.rule:last-child{border-bottom:0}
.rule .ri{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--up-soft);color:var(--up-text)}
.rule .ri.no{background:var(--down-soft);color:var(--down-text)}
.rule .rn{display:block;font-size:14px;font-weight:600;line-height:1.45}
.rule .rd{display:block;font-size:14px;color:var(--ink3);line-height:1.62}
.conflict{margin-top:24px;padding:17px 24px;border:1px solid color-mix(in srgb,var(--amber) 34%,transparent);
  background:var(--amber-soft);border-radius:16px}
.conflict h4{margin:0 0 8px;font-size:14px;font-weight:650;letter-spacing:-.02em}
.conflict p{margin:0 0 8px;font-size:14px;line-height:1.74;color:var(--ink2)}
.conflict p:last-child{margin-bottom:0}
.conflict b{color:var(--ink);font-weight:600}

/* 投稿 */
.subpage{padding:24px 0 48px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:start}
.subpage h1{margin:0 0 12px;font-size:34px;font-weight:650;letter-spacing:-.038em}
.subpage .lede{margin:0 0 32px;font-size:17px;color:var(--ink2);line-height:1.72;max-width:58ch}
.field{margin-bottom:17px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.field .hint{display:block;font-size:14px;color:var(--ink3);font-weight:400;margin-top:2px}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:14px;color:var(--ink);
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 17px}
.field textarea{min-height:100px;resize:vertical;line-height:1.65}
.drop{border:1.5px dashed var(--line);border-radius:14px;padding:24px;text-align:center;color:var(--ink3);font-size:14px;background:var(--bg2)}
.drop b{display:block;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:4px}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink2);line-height:1.6;
  padding:17px 17px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;margin-bottom:24px}
.consent .box{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--line);flex:none;margin-top:2px;background:var(--bg)}
.policy{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:8px 24px 17px}
.policy .pt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:600;padding:17px 0 8px}
.prow{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);align-items:flex-start}
.prow:last-child{border-bottom:0}
.prow .pi{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center}
.prow .pi.scan{background:var(--blue-soft);color:var(--blue)}
.prow .pi.reader{background:var(--up-soft);color:var(--up-text)}
.prow .pn{display:block;font-size:14px;font-weight:600;line-height:1.4}
.prow .pd{display:block;font-size:12px;color:var(--ink3);line-height:1.55}

/* 手機 */
.canvas[data-mv="detail"] .tblwrap,
.canvas[data-mv="detail"] .rail,
.dback{display:none;align-items:center;gap:8px;border:0;background:none;color:var(--blue);font-size:14px;padding:0;margin-bottom:12px}

/* ===== 中等寬度：三欄擠不下 → 詳情移到清單下方 ===== */
@media (max-width:1340px) and (min-width:861px){
  .rpwrap,.catbody{flex-direction:column}
  .rail{width:100%;position:static;padding:17px 0 8px}
  .rail .f-group{display:inline-block;margin-right:24px;vertical-align:top;margin-bottom:12px}
  .detail,.rpdetail{width:100%;margin-left:0;position:static;max-height:none;overflow:visible;padding-top:8px}
  .dcard,.rpcard{max-width:760px}
  .prod{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
  .subpage{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
  .banner-in{grid-template-columns:minmax(0,1fr) 420px;gap:32px}
  .cokpi{grid-template-columns:repeat(3,1fr)}
  .cats,.mkts{grid-template-columns:repeat(3,1fr)}
  .gear{grid-template-columns:1fr 1fr}
  .page.wide{max-width:100%}
}

/* ===== 手機／窄螢幕 ===== */
@media (max-width:860px){
.canvas .page{padding:0 17px}
.canvas .mk-top{height:auto;flex-wrap:wrap;gap:8px;padding:12px 17px}
.canvas .mk-search,.canvas .mk-cta{display:none}
.canvas .mk-right{margin-left:auto}
.canvas .mk-nav{width:100%;gap:0;justify-content:space-between;order:3}
.canvas .mk-nav button{flex:1;text-align:center;font-size:14px}
.canvas .mk-nav button[aria-selected="true"]::after{bottom:-13px}
.canvas .hero{padding:24px 0 24px}
.canvas .hero h1{font-size:28px}
.canvas .hero p{font-size:14px}
.canvas .strip{overflow-x:auto}
.canvas .stat{flex:none;min-width:150px;padding:17px 17px}
.canvas .stat:first-child{padding-left:0}
.canvas .stat .v{font-size:21px}
.canvas .stat .k{white-space:normal}
.canvas .sec{padding:24px 0}
.canvas .sec-h h2{font-size:17px}
.canvas .cats{grid-template-columns:1fr 1fr;gap:8px}
.canvas .cat{min-height:116px;padding:17px}
.canvas .cat .cn{font-size:14px}
.canvas .mkts{grid-template-columns:1fr 1fr;gap:8px}
.canvas .tools{grid-template-columns:1fr}
.canvas .how{flex-direction:column}
.canvas .how-i{border-right:0;border-bottom:1px solid var(--line)}
.canvas .how-i:last-child{border-bottom:0}
.canvas .banner-in{grid-template-columns:1fr;gap:24px;padding:32px 0 24px}
.canvas .banner h1{font-size:28px}
.canvas .banner p{font-size:14px}
.canvas .banner-foot{gap:12px;font-size:12px;padding-bottom:17px}
.canvas .navpanel{position:fixed;left:12px;right:12px;top:auto;min-width:0}
.canvas .catbody{flex-direction:column}
.canvas .rail{width:100%;position:static;padding:17px 0 4px}
.canvas .detail{display:none;width:100%;margin-left:0;position:static;padding:0 0 32px}
.canvas[data-mv="detail"] .detail{display:block}
.canvas[data-mv="detail"] .cat-head{display:none}
.canvas .dback{display:inline-flex}
.canvas .f-group{margin-bottom:17px}
.canvas .cat-head h1{font-size:24px}
.canvas .thead{display:none}
.canvas .trow{grid-template-columns:1fr auto !important;height:auto;padding:12px 8px;gap:4px 12px}
.canvas .trow .rank,.canvas .trow .cell.dim{display:none}
.canvas .trow .pname{grid-column:1}
.canvas .trow .cell.hi{grid-column:2}
.canvas .trow .gauge{grid-column:1;grid-row:2}
.canvas .trow .dots{grid-column:2;grid-row:2;align-items:flex-end}
.canvas .trow .verd{grid-column:1/-1;grid-row:3;justify-content:flex-start;font-size:14px;margin-top:4px}
.canvas .rpwrap{flex-direction:column}
.canvas .rphd{display:none}
.canvas .rprow{grid-template-columns:1fr auto;height:auto;padding:12px 8px;gap:4px 12px}
.canvas .rprow .rk2{display:none}
.canvas .rpdetail{width:100%;margin-left:0;position:static;padding:0 0 32px;display:none}
.canvas[data-mv="detail"] .rpdetail{display:block}
.canvas[data-mv="detail"] .rplist{display:none}
.canvas .ctr{grid-template-columns:1fr auto;gap:4px 8px;padding:12px 12px}
.canvas .ctr.hd{display:none}
.canvas .mdhero h1{font-size:24px}
.canvas .mdsearch input{font-size:14px}
.canvas .cokpi{grid-template-columns:1fr 1fr;gap:8px}
.canvas .kp .v{font-size:17px}
.canvas .cohead h1{font-size:21px}
.canvas .cotr{grid-template-columns:1fr auto !important;gap:4px 8px;padding:12px 12px}
.canvas .cotr.hd{display:none}
.canvas .vrow{grid-template-columns:1fr auto;gap:4px 8px;padding:12px 12px}
.canvas .vrow.hd{display:none}
.canvas .vrow .rk{display:none}
.canvas .vrow .co{grid-column:1}
.canvas .vrow .num{font-size:14px}
.canvas .vcard .vfine{margin-left:0}
.canvas .srcbar{flex-direction:column}
.canvas .srcbar div{border-right:0;border-bottom:1px solid var(--line)}
.canvas .srcbar div:last-child{border-bottom:0}
.canvas .shead{flex-direction:column;gap:12px}
.canvas .sthumb{width:100%;height:132px}
.canvas .srch h1,.canvas .labhero h1{font-size:24px}
.canvas .labhero{padding:24px 0 24px}
.canvas .labsec{padding:24px 0}
.canvas .labsec h2{font-size:21px}
.canvas .gear{grid-template-columns:1fr}
.canvas .certgrid{grid-template-columns:1fr;gap:12px}
.canvas .step{gap:12px;padding:17px 0}
.canvas .stepn{width:26px;font-size:12px}
.canvas .stepb .sn{font-size:14px}
.canvas .rrow{grid-template-columns:1fr auto;gap:4px 12px;padding:12px 12px}
.canvas .rrow.hd{display:none}
.canvas .rrow .n{grid-column:1/-1;font-size:14px}
.canvas .rrow .v{font-size:14px}
.canvas .rhead,.canvas .rfoot{padding:12px}
.canvas .prod,.canvas .subpage{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:12px}
.canvas .prod > *,.canvas .subpage > *{min-width:0}
.canvas .prod-id{min-width:0}
.canvas .prod-id .m,.canvas .prod-id .b{overflow-wrap:anywhere}
.canvas .subpage h1{font-size:24px}
.canvas .prod-id .m{font-size:21px}
.canvas .prod-id .pmark{width:44px;height:44px;font-size:14px}
.canvas .big .v{font-size:40px}
.canvas .bar2 .c{padding:0 8px;font-size:12px}
.canvas .blk-h{align-items:flex-start}
.canvas .blk-h h4{flex:1 1 auto;min-width:0}
.canvas .blk-h .sp{display:none}
.canvas .blk-h .tag{flex:none;max-width:100%}
.canvas .aside{position:static}
.canvas .mrow{grid-template-columns:1fr auto;gap:8px 12px;padding:12px 12px}
.canvas .mrow.hd{display:none}
.canvas .mrow .mcty{grid-column:1;grid-row:1}
.canvas .mrow .mname{grid-column:1;grid-row:2}
.canvas .mrow .mstat{grid-column:2;grid-row:1;justify-content:flex-end}
.canvas .mrow .mval{grid-column:2;grid-row:2;font-size:12px}
.canvas .fitem{flex-wrap:wrap}
.canvas .fbody{flex:1 1 100%;order:2}
.canvas .ftag{order:3;flex:1 1 100%;margin-top:8px}
.canvas .fbody .ft{font-size:14px}
.canvas .sdate{width:78px;font-size:12px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}

/* ================================================================
   Django 版接縫
   模擬是單頁 App，導覽全是 <button> ＋ JS 換頁。真站台要能開新分頁、
   要能被搜尋引擎爬，所以導覽改成 <a>。下面把原本只選 button 的規則
   補上 a，樣式完全沿用，不另外長一套。
   ================================================================ */
.mk-brand{text-decoration:none;color:inherit}
.mk-nav > a,.mk-nav > button,.navdrop > button{border:0;background:transparent;color:var(--ink2);
  padding:8px 0;font-size:14px;position:relative;white-space:nowrap;display:flex;align-items:center;gap:4px;
  text-decoration:none}
.mk-nav > a[aria-selected="true"]{color:var(--ink);font-weight:600}
.mk-nav > a[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-25px;
  height:2px;background:var(--blue);border-radius:2px}
.navpanel a{display:flex;width:100%;align-items:center;gap:8px;border:0;background:none;
  padding:8px 12px;border-radius:10px;font-size:14px;text-align:left;color:var(--ink);text-decoration:none}
.navpanel a:hover{background:var(--fill)}
.navpanel a .ni{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--blue-soft);color:var(--blue)}
.navpanel a .nc{margin-left:auto;font-size:12px;color:var(--ink3)}
.canvas a.mk-cta{flex:none;border:1px solid var(--blue);background:var(--blue);color:var(--on-blue);
  border-radius:999px;padding:8px 17px;font-size:14px;font-weight:650;white-space:nowrap;
  letter-spacing:.01em;text-decoration:none;display:inline-flex;align-items:center}
.canvas a.mk-cta:hover{background:transparent;color:var(--blue)}

/* 搜尋框在模擬裡只是個裝飾 div，這裡做成真的會送出的表單 */
.mk-search input{border:0;background:none;font:inherit;font-size:14px;color:var(--ink);
  width:100%;min-width:0;padding:0;outline:none}
.mk-search input::placeholder{color:var(--ink3)}

/* 清單的每一列在模擬裡是 button，這裡是連到商品頁的 <a> */
.canvas a.rprow{text-decoration:none;color:inherit}
.canvas a.rprow *{text-decoration:none}

/* 篩選、快捷、排序在模擬裡是 button，這裡是連結（能開新分頁、能加書籤） */
.canvas a.chip,.canvas a.pre,.canvas a.dfull{text-decoration:none}
.canvas a.chip{display:inline-flex;align-items:center}
.canvas a.pre em{text-decoration:none}

/* 投稿表單。模擬沒有做這一頁的樣式，照全站語彙補上。 */
.sfform{max-width:620px;margin-top:17px}
.sfform label{display:block;margin-bottom:17px;font-size:14px;color:var(--ink2)}
.sfform label em{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:4px;line-height:1.6}
.sfform input[type=text],.sfform input[type=url],.sfform textarea{
  display:block;width:100%;margin-top:8px;font:inherit;font-size:14px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 12px}
.sfform input:focus,.sfform textarea:focus{outline:none;border-color:var(--blue)}
.sfform input[readonly]{background:var(--fill);color:var(--ink2)}
.sfform textarea{min-height:84px;resize:vertical;line-height:1.6}
.mrow em{display:block;font-style:normal;font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.5}

/* ================================================================
   Apple 規範
   唯一事實來源：docs/DESIGN-apple.md（Mars 提供的 token 規範）
   套用方式與必要的偏離：docs/設計規範.md
   改版面改這裡的變數，不要在各頁另外硬寫，兩套會走鐘。
   ================================================================ */
:root{
  /* 容器：規範裡 Wide desktop ≥1441 時 content locks at 1440 */
  --maxw:1440px; --gut:32px;
  /* 間距 xxs xs sm md lg xl xxl section */
  --s1:4px; --s2:8px; --s3:12px; --s4:17px; --s5:24px; --s6:32px; --s7:48px; --s8:80px;
  /* 圓角。不要出現中間值 */
  --r-sm:8px; --r-md:11px; --r-lg:18px;
}
@media (max-width:1023px){:root{--gut:24px}}
@media (max-width:767px){:root{--gut:16px}}

/* 顏色改用規範的 token。單一藍色，不准有第二個互動色。 */
.canvas{
  --bg:#ffffff; --bg2:#f5f5f7; --fill:#f5f5f7; --line:#e0e0e0; --hair:#f0f0f0;
  --ink:#1d1d1f; --ink2:#333333; --ink3:#7a7a7a;
  --blue:#0066cc; --blue-soft:#e8f1fb; --on-blue:#ffffff;
  --card:#ffffff;
}
.canvas[data-mock-theme="dark"],:root[data-theme="dark"] .canvas{
  --bg:#000000; --bg2:#1d1d1f; --fill:#272729; --line:#3a3a3c; --hair:#2a2a2c;
  --ink:#ffffff; --ink2:#cccccc; --ink3:#8e8e93;
  --blue:#2997ff; --blue-soft:#0a2540; --card:#1d1d1f;
}

/* ── 容器：所有區塊的內容左緣都在同一條垂直線上 ────────────── */
.page,.page.wide,.banner .page{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.banner-foot{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ── 字級。字重階梯是 300/400/600/700，500 刻意不存在。 ──── */
.canvas{font-size:17px;line-height:1.47;letter-spacing:-.374px;color:var(--ink)}
.banner-copy h1{font-size:56px;line-height:1.07;letter-spacing:-.28px;font-weight:600}
.cat-head h1,.prod-id .m{font-size:40px;line-height:1.10;letter-spacing:0;font-weight:600}
.sec-h h2,.rphead .t,.rpcard h3{font-size:34px;line-height:1.2;letter-spacing:-.374px;font-weight:600}
.blk-h h4,.card-t,.acard h5,.rpsec h5{font-size:21px;line-height:1.19;letter-spacing:.231px;
  font-weight:600;color:var(--ink);text-transform:none}
.cat-head p,.banner-copy p,.say{font-size:17px;line-height:1.47;letter-spacing:-.374px;max-width:68ch}
/* 註解段落。**margin 一定要寫死**——這些是 <p>，沒寫的那一邊會吃到瀏覽器
   預設的 1em，等於 14px，剛好不在間距表上，而且會隨字級浮動。 */
.conote,.srcnote,.rpempty,.shottxt p{font-size:14px;line-height:1.43;letter-spacing:-.224px;
  max-width:68ch;margin-top:var(--s3);margin-bottom:0}
.flab,.hk,.stat .k,.crumb{font-size:12px;line-height:1.33;letter-spacing:-.12px}
@media (max-width:1068px){.banner-copy h1{font-size:40px}}
@media (max-width:640px){.banner-copy h1{font-size:34px}.cat-head h1,.prod-id .m{font-size:28px}
  .sec-h h2,.rphead .t,.rpcard h3{font-size:24px}}

/* ── 間距。section 80，分隔線後不可以貼著。 ───────────────── */
.cat-head{padding:var(--s6) 0 var(--s7)}
.how{margin-top:var(--s5)}
.stat{padding:var(--s5) var(--s5) var(--s6)}
.rphead{padding:var(--s8) 0 var(--s4)}
.prebar{padding:0 0 var(--s4)}
.fbar{padding:0 0 var(--s5)}
.rplist{padding-bottom:var(--s8)}
.blk{margin-bottom:var(--s8)}
.blk-h{margin-bottom:var(--s4)}
.sec{padding:var(--s8) 0}
.sec-h{margin-bottom:var(--s5)}
.prodhead{padding-bottom:var(--s5)}
@media (max-width:1023px){.rphead{padding-top:var(--s7)}.blk{margin-bottom:var(--s7)}.sec{padding:var(--s7) 0}}
@media (max-width:640px){.rphead{padding-top:var(--s6)}.blk{margin-bottom:var(--s6)}.sec{padding:var(--s6) 0}}

/* ── 陰影：規範說全站只有一個陰影，且只給商品照。我們沒有商品照 ── */
.card,.acard,.rpcard,.pc,.shot,.rail,.st{box-shadow:none}

/* ── 圓角：8 / 11 / 18 / pill，不要中間值 ─────────────────── */
.card,.acard,.rpcard,.how,.rows,.matrix,.ctbl,.phtbl,.casebox,.okbox,.warnbox,
.shotband,.hero2,.stage{border-radius:var(--r-lg)}
.chip,.pre,.pill2,.bd,.srcbadge,.tag,.realtag,.mk-cta,.btn,.mk-search,.lkbtn{border-radius:9999px}
.mk-theme{border-radius:9999px}
.navpanel,.langlist{border-radius:var(--r-lg)}
.thumb,.shotpic{border-radius:var(--r-md)}

/* ── 按下：全站統一的微互動 ─────────────────────────────── */
.canvas a.btn:active,.canvas a.mk-cta:active,.canvas a.chip:active,
.canvas a.pre:active,.canvas button:active{transform:scale(.95)}
.canvas a.btn,.canvas a.mk-cta,.canvas a.chip,.canvas a.pre,.canvas button{transition:transform .12s ease}

/* ── 水平對齊：並排的兩欄頂端必須切齊 ─────────────────────── */
.rpwrap,.prod{align-items:flex-start}
.rpdetail{padding:var(--s8) 0;max-height:none;overflow:visible;position:static}
.aside{padding:0;max-height:none;overflow:visible;position:static}
.home .rplist,.home .rpdetail{padding-top:var(--s8)}
.home .rplist .blk:first-child{margin-top:0}

/* ── 導覽列：用字重與顏色標示所在頁，不用底線 ────────────── */
.mk-nav > a[aria-selected="true"]::after,
.mk-nav > button[aria-selected="true"]::after,
.navdrop > button[aria-selected="true"]::after{display:none}
.mk-nav > a[aria-selected="true"]{color:var(--ink);font-weight:600}
.mk-brand{text-decoration:none;color:inherit}
.mk-nav > a,.mk-nav > button,.navdrop > button{border:0;background:transparent;color:var(--ink2);
  padding:var(--s2) 0;font-size:14px;line-height:1.29;letter-spacing:-.224px;position:relative;
  white-space:nowrap;display:flex;align-items:center;gap:var(--s1);text-decoration:none}
.navpanel a{display:flex;width:100%;align-items:center;gap:var(--s3);border:0;background:none;
  padding:var(--s3);border-radius:var(--r-sm);font-size:14px;letter-spacing:-.224px;
  text-align:left;color:var(--ink);text-decoration:none}
.navpanel a:hover{background:var(--fill)}
.navpanel a .ni{width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;
  flex:none;background:var(--blue-soft);color:var(--blue)}
.navpanel a .nc{margin-left:auto;font-size:12px;color:var(--ink3)}
.canvas a.mk-cta{flex:none;border:1px solid var(--blue);background:var(--blue);color:var(--on-blue);
  padding:12px 24px;font-size:17px;font-weight:400;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;letter-spacing:-.374px}
.canvas a.mk-cta:hover{background:transparent;color:var(--blue)}
.mk-search{height:44px;padding:0 17px}
.mk-search input{border:0;background:none;font:inherit;font-size:17px;color:var(--ink);
  width:100%;min-width:0;padding:0;outline:none;letter-spacing:-.374px}
.mk-search input::placeholder{color:var(--ink3)}

/* ── 連結：模擬是 button，真站台是 <a> ───────────────────── */
.canvas a.rprow{text-decoration:none;color:inherit}
.canvas a.rprow *{text-decoration:none}
.canvas a.chip,.canvas a.pre,.canvas a.dfull,.canvas a.btn,.canvas a.lkbtn,
.canvas a.fixb,.canvas a.shotbtn,.canvas a.tool{text-decoration:none}
.canvas a.chip,.canvas a.btn{display:inline-flex;align-items:center;justify-content:center}
.btn{padding:12px 24px;font-size:17px;font-weight:400;letter-spacing:-.374px}

/* 麵包屑：灰色、無底線（藍底線會跟頁面的分隔線打架） */
.crumb{padding:var(--s5) 0 0}
.crumb a{color:var(--ink3);text-decoration:none}
.crumb a:hover{color:var(--ink)}

.mrow em{display:block;font-style:normal;font-size:14px;color:var(--ink3);
  margin-top:var(--s1);line-height:1.43;letter-spacing:-.224px}

/* 投稿表單。模擬沒有做這一頁，照規範補上。 */
.sfform{max-width:620px;margin-top:var(--s5)}
.sfform label{display:block;margin-bottom:var(--s5);font-size:14px;color:var(--ink2);
  letter-spacing:-.224px}
.sfform label em{display:block;font-style:normal;font-size:12px;color:var(--ink3);
  margin-top:var(--s1);line-height:1.33}
.sfform input[type=text],.sfform input[type=url],.sfform textarea{
  display:block;width:100%;margin-top:var(--s2);font:inherit;font-size:17px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:9999px;padding:12px 17px;
  letter-spacing:-.374px}
.sfform textarea{border-radius:var(--r-lg);min-height:96px;resize:vertical;line-height:1.47}
.sfform input:focus,.sfform textarea:focus{outline:2px solid #0071e3;outline-offset:2px;border-color:transparent}
.sfform input[readonly]{background:var(--fill);color:var(--ink2)}

/* 微調：側欄標題不該用頁面級字級；分隔線後留 48 不是 128 */
.rpcard h3{font-size:21px;line-height:1.19;letter-spacing:.231px}
.rpsec h5,.acard h5{font-size:17px;line-height:1.24;letter-spacing:-.374px;font-weight:600}
.rphead{padding-top:var(--s7)}
.home .rplist,.home .rpdetail{padding-top:var(--s7)}
.rpdetail{padding:var(--s7) 0 var(--s8)}
.mk-search{width:280px}
@media (max-width:1120px){.mk-search{width:200px}}

/* ================================================================
   工具頁元件（依 docs/DESIGN-apple.md）
   規範重點：交替 canvas / parchment 分段（色塊本身就是分隔線）、
   18px 圓角的 utility card ＋ 1px hairline、無陰影、單一藍色、
   section 80px、pill 只給動作。
   ================================================================ */

/* ── 分段：色塊交替就是分隔線，不畫線 ─────────────────────── */
.tsec{padding:var(--s8) 0}
.tsec.parch{background:var(--bg2)}
.tsec.canvas-white{background:var(--card)}
.tsec + .tsec{border-top:0}

/* ── 工具頁的 Hero ─────────────────────────────────────── */
.thero{padding:var(--s8) 0 var(--s7)}
.thero .eyeb2{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px;
  line-height:1;letter-spacing:-.12px;color:var(--blue);font-weight:600;margin-bottom:var(--s4)}
.thero .eyeb2 svg{width:14px;height:14px}
.thero h1{margin:0 0 var(--s3);font-size:40px;line-height:1.1;letter-spacing:0;font-weight:600}
.thero .lead2{margin:0;font-size:21px;line-height:1.33;letter-spacing:.231px;
  color:var(--ink2);max-width:52ch;font-weight:400}
@media (max-width:640px){.thero h1{font-size:28px}.thero .lead2{font-size:17px;letter-spacing:-.374px}}

/* ── utility card：18px 圓角、1px hairline、24px 內距、無陰影 ── */
.ucard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:none}
.ucards{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ucard h3{margin:0 0 var(--s2);font-size:21px;line-height:1.19;letter-spacing:.231px;font-weight:600}
.ucard p{margin:0;font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink2)}
.ucard .go{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s4);
  font-size:17px;letter-spacing:-.374px;color:var(--blue);text-decoration:none}
a.ucard,a.ucard *{text-decoration:none}
a.ucard{display:block;color:inherit;transition:transform .12s ease}
a.ucard:active{transform:scale(.98)}
a.ucard:hover{border-color:var(--ink3)}

/* ── 搜尋列：pill、44px 高，跟主 CTA 同一套語彙 ────────────── */
.tsearch{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-top:var(--s5)}
.tsearch .fld{flex:1;min-width:220px;display:flex;align-items:center;gap:var(--s3);
  height:52px;padding:0 24px;background:var(--card);border:1px solid var(--line);border-radius:9999px}
.tsearch .fld svg{flex:none;color:var(--ink3)}
.tsearch input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;
  font-size:17px;letter-spacing:-.374px;color:var(--ink)}
.tsearch input::placeholder{color:var(--ink3)}
.tsearch .fld:focus-within{outline:2px solid #0071e3;outline-offset:2px;border-color:transparent}
.tsearch button{flex:none;height:52px;padding:0 24px;border:0;border-radius:9999px;
  background:var(--blue);color:var(--on-blue);font:inherit;font-size:17px;letter-spacing:-.374px;
  cursor:pointer;transition:transform .12s ease}
.tsearch button:active{transform:scale(.95)}
.tsearch .unit{font-size:14px;color:var(--ink3);letter-spacing:-.224px}

/* ── 商品選擇卡（比一比用）───────────────────────────────── */
.picks{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  margin-top:var(--s4)}
.pick{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--card);text-decoration:none;color:inherit;
  transition:transform .12s ease}
.pick:active{transform:scale(.97)}
.pick:hover{border-color:var(--ink3)}
.pick[aria-pressed="true"]{border-color:var(--blue);border-width:2px;padding:calc(var(--s3) - 1px)}
.pick .pa{width:40px;height:40px;flex:none;border-radius:var(--r-sm);background:var(--fill);
  display:grid;place-items:center;overflow:hidden;padding:4px}
.pick .pa svg{width:100%;height:auto}
.pick .pt{min-width:0}
.pick .pt b{display:block;font-size:14px;font-weight:600;letter-spacing:-.224px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .pt span{display:block;font-size:12px;color:var(--ink3);letter-spacing:-.12px}

/* ── 比一比的對照表 ─────────────────────────────────────── */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-bottom:var(--s5)}
.cmphd{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);text-align:center}
.cmphd .art{width:120px;height:auto;margin:0 auto var(--s4);display:block}
.cmphd b{display:block;font-size:21px;line-height:1.19;letter-spacing:.231px;font-weight:600}
.cmphd span{display:block;font-size:14px;color:var(--ink3);letter-spacing:-.224px;margin-top:4px}
.cmphd a{color:var(--blue);text-decoration:none;font-size:14px;letter-spacing:-.224px}
.cmptbl{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.cmpr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair)}
.cmpr:last-child{border-bottom:0}
.cmpk{grid-column:1/-1;padding:var(--s3) var(--s5) 0;font-size:12px;color:var(--ink3);
  letter-spacing:-.12px}
.cmpv{padding:4px var(--s5) var(--s4);font-size:17px;font-weight:600;letter-spacing:-.374px;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.cmpv:first-of-type{border-right:1px solid var(--hair)}
.cmpv.more{color:var(--blue)}
.cmpv.na{color:var(--ink3);font-weight:400}
@media (max-width:640px){.cmp{grid-template-columns:1fr}.cmphd .art{width:88px}}

/* ── 重量基準的排行條 ───────────────────────────────────── */
.brow{display:grid;grid-template-columns:28px 1fr 240px 110px;gap:var(--s4);align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--hair)}
.brow:last-child{border-bottom:0}
.brow .bk{font-size:14px;color:var(--ink3);font-variant-numeric:tabular-nums;text-align:right}
.brow .bn{min-width:0}
.brow .bn a{font-size:17px;font-weight:600;letter-spacing:-.374px;color:var(--ink);
  text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bn span{font-size:12px;color:var(--ink3);letter-spacing:-.12px}
.brow .bd{font-size:21px;font-weight:600;letter-spacing:-.374px;text-align:right;
  font-variant-numeric:tabular-nums}
.btrack{position:relative;height:8px;border-radius:9999px;background:var(--fill);overflow:visible}
.btrack i{position:absolute;left:0;top:0;bottom:0;border-radius:9999px;background:#34C759}
.btrack i.over{background:#c22b26}
.btrack u{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink3);opacity:.55}
@media (max-width:860px){.brow{grid-template-columns:24px 1fr 92px;gap:var(--s3)}
  .brow .btrack{display:none}}

/* ── 型號查詢的鏈路 ─────────────────────────────────────── */
.chain{display:grid;gap:var(--s4)}
.step{display:grid;grid-template-columns:44px 1fr;gap:var(--s4);align-items:start}
.step .sn{width:44px;height:44px;border-radius:9999px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;font-size:17px;font-weight:600;letter-spacing:-.374px}
.step .sb{min-width:0}
.step .sb h4{margin:0 0 var(--s2);font-size:21px;line-height:1.19;letter-spacing:.231px;font-weight:600}
.step.dim .sn{background:var(--fill);color:var(--ink3)}

/* ── 飛機規則的刻度 ─────────────────────────────────────── */
.gauge{position:relative;height:14px;border-radius:9999px;overflow:hidden;
  background:linear-gradient(to right,#34C759 0 45%,#96690F 45% 72%,#c22b26 72% 100%);
  margin:var(--s5) 0 var(--s2)}
.gmark{position:absolute;top:-7px;width:4px;height:28px;border-radius:2px;background:var(--ink);
  box-shadow:0 0 0 3px var(--card)}
.glabs{position:relative;height:20px;font-size:12px;color:var(--ink3);letter-spacing:-.12px}
.glabs span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.verdict{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.verdict .big{font-size:56px;line-height:1.07;letter-spacing:-.28px;font-weight:600;
  font-variant-numeric:tabular-nums}
.verdict .u{font-size:21px;color:var(--ink3);letter-spacing:.231px}
@media (max-width:640px){.verdict .big{font-size:40px}}

/* ── 排行列（誰被罰過）─────────────────────────────────── */
.lrow{display:grid;grid-template-columns:32px 1fr auto auto;gap:var(--s4);align-items:center;
  padding:var(--s4) 0;border-bottom:1px solid var(--hair)}
.lrow:last-child{border-bottom:0}
.lrow .lk{font-size:14px;color:var(--ink3);font-variant-numeric:tabular-nums;text-align:right}
.lrow .ln a{font-size:17px;letter-spacing:-.374px;color:var(--ink);text-decoration:none}
.lrow .ln a:hover{color:var(--blue)}
.lrow .ln em{display:block;font-style:normal;font-size:12px;color:var(--ink3);letter-spacing:-.12px}
/* 型號查詢那一欄放的是政府登錄的比對鍵，可能很長。nowrap ＋ auto 欄
   會把整頁撐破（375 寬量到 439px）。長字串准它斷行，欄位本身准它縮。 */
.lrow .lc{font-size:17px;font-weight:600;letter-spacing:-.374px;font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap;min-width:0}
.lrow .lc[style*="--ink3"]{white-space:normal;overflow-wrap:anywhere}
@media (max-width:640px){.lrow{grid-template-columns:24px 1fr auto;gap:var(--s3)}
  .lrow .lc:first-of-type{display:none}}

/* 界線說明：不是警告，是說明。用最低調的樣式，不要嚇人 */
.bound{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);font-size:14px;line-height:1.43;letter-spacing:-.224px;
  color:var(--ink2);max-width:68ch}
.bound b{color:var(--ink)}
/* 排行條：讓「尺」吃掉多餘寬度，名稱固定，這樣長度才可比 */
.brow{grid-template-columns:28px minmax(180px,340px) minmax(0,1fr) 110px}
@media (max-width:860px){.brow{grid-template-columns:24px 1fr 92px}}

/* ── 儀表卡：四格一列，數字大、說明小 ─────────────────────── */
.dash{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.dcard .dk{font-size:12px;letter-spacing:-.12px;color:var(--ink3)}
/* 數字與單位不准拆行；窄卡片降一級。理由同 .strip .stat .v。 */
.dcard .dv{font-size:40px;line-height:1.1;letter-spacing:0;font-weight:600;margin:8px 0 2px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dcard .dv small{font-size:17px;font-weight:400;color:var(--ink3);letter-spacing:-.374px;margin-left:4px}
.dcard .dd{font-size:12px;letter-spacing:-.12px;color:var(--ink3);line-height:1.4}
@media (max-width:1360px){.dcard .dv{font-size:34px}}
@media (max-width:640px){.dcard .dv{font-size:28px}}

/* ── 分段切換：灰軌＋白膠囊，Apple 的 segmented control ────── */
/* 比一比的品類切換會隨品類數變長，手機上會把整頁撐破（375 寬量到 1018px）。
   給它自己的橫向捲軸——只有真的裝不下才出現，不會平白多一條。 */
.seg2{display:inline-flex;background:var(--fill);border-radius:9999px;padding:4px;gap:2px;
  max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg2::-webkit-scrollbar{display:none}
.seg2 a{padding:8px 17px;border-radius:9999px;font-size:14px;letter-spacing:-.224px;
  color:var(--ink2);text-decoration:none;white-space:nowrap;transition:transform .12s ease}
.seg2 a:active{transform:scale(.95)}
.seg2 a[aria-current="true"]{background:var(--card);color:var(--ink);font-weight:600}

/* ── 排行表 ────────────────────────────────────────────── */
.vrank{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.vrow{display:grid;grid-template-columns:44px minmax(0,1fr) 88px 148px 104px 132px;
  gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);border-bottom:1px solid var(--hair)}
.vrow:last-child{border-bottom:0}
.vrow.hd{background:var(--bg2);padding-top:var(--s3);padding-bottom:var(--s3)}
.vrow.hd span{font-size:12px;letter-spacing:-.12px;color:var(--ink3)}
.vrow .rk{font-size:14px;color:var(--ink3);font-variant-numeric:tabular-nums;text-align:right}
.vrow .co a{font-size:17px;letter-spacing:-.374px;color:var(--ink);text-decoration:none}
.vrow .co a:hover{color:var(--blue)}
.vrow .co em{display:block;font-style:normal;font-size:12px;color:var(--ink3);letter-spacing:-.12px}
.vrow .num{text-align:right;font-variant-numeric:tabular-nums;font-size:17px;letter-spacing:-.374px}
.vrow .num.n3{color:var(--down-text);font-weight:600}
.vrow .num.n2{color:var(--amber-text);font-weight:600}
.vbadge{display:inline-flex;padding:4px 8px;border-radius:9999px;font-size:12px;
  letter-spacing:-.12px;font-weight:600;white-space:nowrap}
.vbadge.hot{background:var(--down-soft);color:var(--down-text)}
.vbadge.warm{background:var(--amber-soft);color:var(--amber-text)}
:root[data-theme="dark"] .vbadge.hot{background:#2a1614;color:#ff6961}
:root[data-theme="dark"] .vbadge.warm{background:#272014;color:#e0a33c}
@media (max-width:1023px){
  .vrow{grid-template-columns:36px minmax(0,1fr) 72px 116px}
  .vrow > :nth-child(5),.vrow > :nth-child(6){display:none}
}
@media (max-width:640px){.vrow{grid-template-columns:28px minmax(0,1fr) 64px;padding:var(--s4)}
  .vrow > :nth-child(4){display:none}}

/* ── 處分明細卡 ─────────────────────────────────────────── */
.vlist{display:grid;gap:var(--s3)}
.vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.vcard .vh{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:8px}
.vcard .vp a{font-size:17px;font-weight:600;letter-spacing:-.374px;color:var(--ink);text-decoration:none}
.vcard .vp a:hover{color:var(--blue)}
.vcard .vfine{margin-left:auto;font-size:17px;font-weight:600;letter-spacing:-.374px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.vcard .vfine.big{color:var(--down-text)}
.vcard .vm{font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink2)}
.vcard .vm .mono{font-size:12px;color:var(--ink3);letter-spacing:-.12px}
.rgcount{font-size:14px;letter-spacing:-.224px;color:var(--ink3);margin-bottom:var(--s4)}
.rgcount b{font-size:21px;color:var(--ink);letter-spacing:.231px;margin-right:8px}

/* 搜尋列跟下一段之間要留 48，不要貼著色塊 */
.thero + .tsearch,.tsearch{margin-bottom:var(--s7)}
.tsearch + .conote{margin-top:calc(var(--s7) * -1 + 12px);margin-bottom:var(--s7)}

/* ── 比一比：品類切換、選滿的停用態、可變欄數 ─────────────── */
.seg2 a.off{color:var(--ink3);cursor:default;display:inline-flex;align-items:baseline;gap:8px}
.seg2 a.off em{font-style:normal;font-size:12px;letter-spacing:-.12px}
.seg2 a.off:active{transform:none}
.pick{position:relative}
.pick.off{opacity:.4;cursor:default}
.pick.off:hover{border-color:var(--line)}
.pick .pn{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:9999px;
  background:var(--blue);color:var(--on-blue);font-size:12px;font-weight:600;display:grid;place-items:center;
  letter-spacing:0}
.cmp{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
.cmpr{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
.cmpv{border-right:1px solid var(--hair)}
.cmpv:last-child{border-right:0}
.cmphd{position:relative}
.cmphd .rm{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:9999px;
  background:var(--fill);color:var(--ink3);display:grid;place-items:center;font-size:17px;
  line-height:1;text-decoration:none}
.cmphd .rm:hover{background:var(--line);color:var(--ink)}
@media (max-width:900px){.cmp,.cmpr{grid-template-columns:repeat(min(var(--n,2),2),minmax(0,1fr))}}
@media (max-width:640px){.cmp,.cmpr{grid-template-columns:1fr}
  .cmpv{border-right:0;border-bottom:1px solid var(--hair)}
  .cmpv:last-child{border-bottom:0}}

/* ================================================================
   連結：全站不畫底線
   規範裡 Apple 的 text-link 是「underlined or non-underlined per
   context」，而 apple.com 實際上一律不畫底線——底線是 1990 年代的
   網頁語彙，靠顏色與位置就足以表示可點。
   造訪過的連結也不變紫，紫色會讓整頁看起來很舊。
   ================================================================ */
.canvas a{text-decoration:none}
.canvas a:hover{text-decoration:none}
/* 內文裡的連結維持藍色（但仍然不畫底線），才看得出來可以點。
   表格儲存格裡的連結也算內文——漏掉它，商品頁「資料來源」那一欄會
   掉回瀏覽器預設的 #0000EE 紫藍，深色模式下對比只有 1.70。 */
.canvas p a,.canvas .conote a,.canvas .bound a,.canvas .srcnote a,
.canvas li a,.canvas .say a,.canvas td a{color:var(--blue)}
.canvas p a:visited,.canvas .conote a:visited,.canvas .bound a:visited,
.canvas .srcnote a:visited,.canvas li a:visited,.canvas .say a:visited,
.canvas td a:visited{color:var(--blue)}
/* 卡片、列、動作按鈕一律繼承文字色，不要藍也不要紫 */
.canvas a.fitem,.canvas a.fitem *,.canvas a.cat,.canvas a.cat *,
.canvas a.tool,.canvas a.tool *,.canvas a.pick,.canvas a.pick *,
.canvas a.rprow,.canvas a.rprow *,.canvas a.ucard,.canvas a.ucard *{color:inherit}
.canvas .more,.canvas .more:visited{color:var(--blue)}

/* ================================================================
   首頁統計條：改用跟「誰被罰過」同一組儀表卡
   原本是五格擠在一條線上，說明文字被擠成兩三行，字級也對不上規範。
   ================================================================ */
.strip{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border-bottom:0;padding:var(--s8) 0 0}
.strip .stat{flex:none;padding:var(--s5);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.strip .stat::after{display:none}
.strip .stat .k{font-size:12px;line-height:1.33;letter-spacing:-.12px;color:var(--ink3)}
/* 數字與單位不准拆行——「213,541」把「筆」擠到下一行，看起來像兩個數字。
   五格並排時，卡片在 1280 寬的筆電上只剩 176px 可用，40px 的七位數塞不下，
   所以在那個寬度降一級到 34px（都是規範上的字級，不是湊出來的）。 */
.strip .stat .v{font-size:40px;line-height:1.1;letter-spacing:0;font-weight:600;
  margin:8px 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.strip .stat .v small{font-size:17px;font-weight:400;color:var(--ink3);
  letter-spacing:-.374px;margin-left:4px}
.strip .stat .d{font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink3)}
@media (max-width:1360px){.strip .stat .v{font-size:34px}}
@media (max-width:640px){.strip .stat .v{font-size:28px}}

/* 「今天抓到什麼」的列：加大留白、標題用 body-strong */
.feed{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.fitem{padding:var(--s5)}
.fitem .ft{font-size:17px;font-weight:600;line-height:1.24;letter-spacing:-.374px}
.fitem .fd{font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink3);margin-top:4px}
.fitem .ftag{font-size:12px;letter-spacing:-.12px;color:var(--ink3)}
/* 日期不是數量，用 40px 會在窄卡片裡折行。降一級並禁止折行。 */
.strip .stat .v.date,.dcard .dv.date{font-size:28px;line-height:1.14;letter-spacing:-.374px;
  white-space:nowrap}
@media (max-width:640px){.strip .stat .v.date,.dcard .dv.date{font-size:24px}}

/* ================================================================
   品牌（設計師規範 v1.0，見 docs/BRAND-specfacts.md）
   色票以品牌規範為準——那是 SpecFacts 自己的識別；
   字級與間距沿用 Apple 那套，兩者本來就幾乎一致。
   ================================================================ */
.canvas{
  --ink:#132238;        /* Trust Navy 信任深藍 */
  --blue:#2463EB;       /* Facts Blue 事實藍 */
  --bg:#FBFBF9;         /* Paper 資料白 */
  --card:#FFFFFF;
  --up:#22B573;         /* Signal Green 通過綠——只表達資料狀態 */
  --down:#E94444;       /* Evidence Red 警示紅 */
  --blue-soft:#E7EEFD;
}
:root[data-theme="dark"] .canvas{
  --ink:#FFFFFF; --bg:#0B1522; --bg2:#132238; --card:#152840;
  --line:#25384F; --hair:#1C2E44; --ink2:#C5CEDA; --ink3:#8494A8;
  --blue:#5B8DF5; --blue-soft:#16283F;
  /* 淡色底一定要一起翻。少翻這幾個，深色模式下狀態膠囊會變成
     「淺綠底＋近白字」，對比只有 1.14，等於整片看不見。 */
  --up-soft:#123021; --down-soft:#331A18; --amber-soft:#2E2614; --fill:#1F2A3A;
  /* 深色模式的藍是亮藍，上面**不能再放白字**（只有 3.19）。
     --on-blue 這個 token 本來就是為這件事準備的，全站實心藍底一律用它。 */
  --on-blue:#0A1526;
}

/* 標誌。安全留白至少一個 F 橫臂高（約字標高度的 1/6）。 */
.mk-brand{gap:0;padding-right:calc(24px / 6)}
.mk-brand .lg{height:26px;width:auto;display:block}
.mk-brand .lg.dark{display:none}
:root[data-theme="dark"] .mk-brand .lg.light{display:none}
:root[data-theme="dark"] .mk-brand .lg.dark{display:block}
/* 標誌只認 data-theme，**與決定頁面配色的來源同一個**。
   踩過（SF-0005）：這裡本來多掛一條 @media (prefers-color-scheme:dark)，
   於是頁面問「使用者切過什麼」（沒切過 → 淺色），標誌問「作業系統是什麼」（→ 反白）。
   系統深色的訪客第一次進站看到的是白底配白標誌，站名整個消失。
   兩個問題不同，答案就會打架——不要再把系統偏好加回來。 */
/* 規範的最低尺寸：僅英文標誌 92px。低於這個寬度不再縮小。 */
@media (max-width:640px){.mk-brand .lg{height:22px;min-width:92px}}

/* ── Mars 指定：工具與品類的 icon 改成深藍底、白色圖示 ──────
   原本是淡藍底配藍圖示，在淡色卡片上幾乎看不出來。
   深藍底（Trust Navy）配白圖示對比夠，也跟標誌同一個色系。 */
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.tool .ti{background:var(--blue);color:var(--on-blue);border-radius:var(--r-md);width:44px;height:44px}
.cat .ci{background:var(--blue);color:var(--on-blue);border-radius:var(--r-md);width:40px;height:40px}
.cat.soon .ci{background:var(--fill);color:var(--ink3)}
.navpanel a .ni{background:var(--blue);color:var(--on-blue)}
.navpanel button[disabled] .ni{background:var(--fill);color:var(--ink3)}
.step .sn{background:var(--blue);color:var(--on-blue)}
.step.dim .sn{background:var(--fill);color:var(--ink3)}

/* ── Banner 的兩顆按鈕 ─────────────────────────────────────
   主要：Facts Blue 底＋白字（規範的 button-primary）
   次要：透明底＋藍字＋藍框（規範的 button-secondary-pill）
   原本次要用 --fill 當底，在 Paper 底色上幾乎看不見，像純文字。 */
.canvas a.btn.primary{background:var(--blue);color:var(--on-blue);border:1px solid var(--blue)}
.canvas a.btn.primary:hover{background:transparent;color:var(--blue)}
.canvas a.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--blue)}
.canvas a.btn.ghost:hover{background:var(--blue);color:var(--on-blue)}
/* 權重要壓過前面「卡片文字一律繼承」那條，否則白圖示會被吃成深藍 */
.canvas a.tool .ti,.canvas a.cat .ci,.canvas .navpanel a .ni,
.canvas .step .sn{color:var(--on-blue)}
.canvas .cat.soon .ci,.canvas .step.dim .sn,
.canvas .navpanel button[disabled] .ni{color:var(--ink3)}

/* ── 排序自成一列，左緣跟其他篩選組切齊 ────────────────────
   原本用 margin-left:auto 把它推到最右邊，但它又會換行，
   結果變成孤零零一組縮在畫面中間，左緣跟上面每一組都對不上。
   規範第一條就是「所有區塊的內容左緣必須在同一條垂直線上」。 */
.fbar .sortgrp{flex-basis:100%;margin-left:0;margin-top:var(--s2);
  padding-top:var(--s4);border-top:1px solid var(--hair)}

/* ── 各國認證表：欄寬固定、字級照規範 ───────────────────────
   原本狀態欄被擠成兩行（「本站未接，可自／行查」），
   字號欄還印著狀態句子。欄位放錯東西，字級也沿用模擬的舊值。 */
.matrix{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
.mrow{display:grid;grid-template-columns:88px minmax(0,1fr) 132px 210px;
  gap:var(--s4);align-items:center;padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--hair)}
.mrow:last-child{border-bottom:0}
.mrow.hd{background:var(--bg2);padding-top:var(--s3);padding-bottom:var(--s3)}
.mrow.hd span{font-size:12px;line-height:1.33;letter-spacing:-.12px;color:var(--ink3);font-weight:400}
.mrow > span{font-size:17px;line-height:1.24;letter-spacing:-.374px;min-width:0}
.mrow > span:first-child{font-weight:600}
.mrow em{display:block;font-style:normal;font-size:14px;line-height:1.43;
  letter-spacing:-.224px;color:var(--ink3);margin-top:2px}
.mrow .st{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:9999px;
  font-size:14px;line-height:1.29;letter-spacing:-.224px;white-space:nowrap;justify-self:start}
/* 底色留原本的淡色，字一律走 -text 那一套，不要再寫死色碼 */
.mrow .st.ok{background:#E4F6EC;color:var(--up-text)}
.mrow .st.no{background:#FBE9E9;color:var(--down-text)}
.mrow .st.na,.mrow .st.co{background:var(--fill);color:var(--ink3-tint)}
.mrow .st.self{background:#FAF0DC;color:var(--amber-text)}
:root[data-theme="dark"] .mrow .st.ok{background:#10301F;color:#5BD98F}
:root[data-theme="dark"] .mrow .st.no{background:#301616;color:#FF8A80}
:root[data-theme="dark"] .mrow .st.self{background:#2C2413;color:#E0B45C}
.mrow .num,.mrow > span:last-child{font-variant-numeric:tabular-nums;text-align:right;
  display:flex;align-items:center;gap:var(--s2);justify-content:flex-end;flex-wrap:wrap}
.lkbtn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:9999px;
  background:var(--fill);color:var(--ink2);font-size:12px;line-height:1.33;letter-spacing:-.12px;
  white-space:nowrap}
.lkbtn.deep{background:var(--blue-soft);color:var(--blue)}
@media (max-width:900px){
  .mrow{grid-template-columns:1fr auto;gap:var(--s2) var(--s3);padding:var(--s4)}
  .mrow.hd{display:none}
  .mrow > span:first-child{grid-column:1/-1;font-size:12px;color:var(--ink3);font-weight:400}
  .mrow > span:nth-child(2){grid-column:1}
  .mrow .st{grid-column:2;justify-self:end}
  .mrow > span:last-child{grid-column:1/-1;justify-content:flex-start}
}

/* ── 示意圖說明：字級照規範，寬度收斂 ───────────────────────
   原本 12px/1.68 的小字鋪滿整個右半邊，看起來像一大段免責聲明。 */
.shotband{grid-template-columns:236px minmax(0,1fr);gap:var(--s5);padding:var(--s5)}
.shottxt{max-width:56ch}
.shottxt .sh1{font-size:12px;line-height:1.33;letter-spacing:-.12px;
  color:var(--ink3);font-weight:600;margin-bottom:var(--s2)}
.shottxt p{font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink2)}
.shotbtn{margin-top:var(--s3);font-size:14px;line-height:1.29;letter-spacing:-.224px;
  padding:8px 17px;border-radius:9999px}
@media (max-width:768px){.shotband{grid-template-columns:1fr}}

/* ── 導覽列的「我要投稿」太大 ───────────────────────────────
   規範的 global-nav 是 44px 高、按鈕 14px/400、padding 8×15。
   原本用了 17px 內文字級＋11×22 內距，在 68px 的列裡顯得很笨重。 */
.canvas a.mk-cta{font-size:14px;line-height:1.29;letter-spacing:-.224px;
  font-weight:400;padding:8px 17px}
.mk-theme{width:34px;height:34px}
.mk-search{height:40px;padding:0 17px}
.mk-search input{font-size:14px;letter-spacing:-.224px}
.mk-top{height:64px}
/* Mars 指定：icon 一律藍底白字（不是深藍底） */
.tool .ti,.cat .ci,.navpanel a .ni,.step .sn{background:var(--blue)}
.cat.soon .ci,.step.dim .sn,.navpanel button[disabled] .ni{background:var(--fill)}

/* ================================================================
   已造訪連結與「已選取」狀態
   踩過的坑：先前為了去底線寫了 `.canvas a:visited{color:inherit}`，
   它的權重（0-2-1）壓過 `.chip[aria-pressed="true"]`（0-2-0），
   結果**任何點過一次的膠囊都會變成藍底深字，完全看不清楚**。
   改成：只讓「卡片／列」這類本來就該繼承文字色的連結不變紫，
   並把每一個反白狀態的顏色連同 :visited 一起釘死。
   ================================================================ */
.canvas a.fitem,.canvas a.fitem *,.canvas a.fitem:visited,
.canvas a.cat,.canvas a.cat *,.canvas a.cat:visited,
.canvas a.tool,.canvas a.tool *,.canvas a.tool:visited,
.canvas a.pick,.canvas a.pick *,.canvas a.pick:visited,
.canvas a.rprow,.canvas a.rprow *,.canvas a.rprow:visited,
.canvas a.ucard,.canvas a.ucard *,.canvas a.ucard:visited,
.canvas .vrow .co a:visited,.canvas .lrow .ln a:visited,
.canvas .brow .bn a:visited,.canvas .rw .a a:visited,
.canvas .cmphd b,.canvas .crumb a:visited{color:inherit}
.canvas .crumb a,.canvas .crumb a:visited{color:var(--ink3)}

/* 反白狀態：底色深，字一定要白。連 :visited 一起指定，不然點過就壞。 */
.canvas .chip[aria-pressed="true"],
.canvas .chip[aria-pressed="true"]:visited,
.canvas .pre[aria-pressed="true"],
.canvas .pre[aria-pressed="true"]:visited,
.canvas a.mk-cta,.canvas a.mk-cta:visited,
.canvas a.btn.primary,.canvas a.btn.primary:visited,
.canvas .tool .ti,.canvas .cat .ci,.canvas .navpanel a .ni,.canvas .step .sn{
  color:var(--on-blue)}
.canvas .pre[aria-pressed="true"] em,
.canvas .pre[aria-pressed="true"]:visited em{color:color-mix(in srgb,var(--on-blue) 82%,transparent)}

/* 淺底的選取狀態：字要用 ink，不能繼承成灰或紫 */
.canvas .seg2 a[aria-current="true"],
.canvas .seg2 a[aria-current="true"]:visited{background:var(--card);color:var(--ink);font-weight:600}
.canvas .seg2 a,.canvas .seg2 a:visited{color:var(--ink2)}

/* 藍框空心按鈕：底是透明的，字必須是藍的 */
.canvas a.btn.ghost,.canvas a.btn.ghost:visited{color:var(--blue)}
.canvas a.btn.ghost:hover{background:var(--blue);color:var(--on-blue)}
.canvas a.mk-cta:hover{background:transparent;color:var(--blue)}

/* 未選取的膠囊：淺底深字，點過也一樣 */
.canvas .chip,.canvas .chip:visited{color:var(--ink2)}
.canvas .pre,.canvas .pre:visited{color:var(--ink)}
.canvas .pre em,.canvas .pre:visited em{color:var(--ink3)}
.canvas .lkbtn,.canvas .lkbtn:visited{color:var(--ink2)}
.canvas .lkbtn.deep,.canvas .lkbtn.deep:visited{color:var(--blue)}
.canvas .dfull,.canvas .dfull:visited{color:var(--ink)}
.canvas .shotbtn,.canvas .shotbtn:visited{color:var(--ink)}
.canvas .more,.canvas .more:visited{color:var(--blue)}
.canvas .fixb,.canvas .fixb:visited{color:var(--ink3)}

/* ── 修訂紀錄：日期不准折行 ──────────────────────────────────
   原本沿用各國認證那套欄寬（第一欄 88px），日期被折成
   「2026-07-」／「26」兩行。日期欄給足寬度並禁止折行。 */
.revlog .mrow{grid-template-columns:124px minmax(0,1fr) minmax(0,1fr) 88px}
.revlog .mrow .date{white-space:nowrap;font-variant-numeric:tabular-nums;
  font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink3);font-weight:400}
.revlog .mrow > span{font-size:14px;line-height:1.43;letter-spacing:-.224px}
.revlog .mrow > span b{font-size:17px;line-height:1.24;letter-spacing:-.374px;font-weight:600}
.revlog .mrow em{font-size:12px;line-height:1.33;letter-spacing:-.12px}
@media (max-width:768px){
  .revlog .mrow{grid-template-columns:1fr auto;gap:var(--s2) var(--s3)}
  .revlog .mrow .date{grid-column:1/-1}
}

/* ================================================================
   對比度：填色與文字色分成兩套
   ================================================================
   踩過的坑：品牌色 --up / --down / --amber 原本同時當「填色」（圓點、
   長條、膠囊底）和「文字色」用。當填色沒問題，當文字就過不了 WCAG AA
   ——通過綠 #22B573 印在綠底上只有 2.33，幾乎看不見。

   治本是拆成兩套 token，不是一個一個 class 去補：
     --up / --down / --amber            填色用，**維持品牌原色不動**
     --up-text / --down-text / --amber-text  文字用，深一階

   全站 61 處 `color:var(--品牌色)` 已機械替換成 `-text` 版；
   `background:` 與 `border-color:` 一處都沒動，所以圓點與長條的顏色不變。
   **日後寫新樣式：底用 --up，字用 --up-text。**

   實測值（本站六種底色裡最差的那一個）：
     --up-text     #0F7A48  最低 4.55（紅底）
     --down-text   #C62828  最低 4.75（紅底）
     --amber-text  #7A5509  最低 5.67（紅底）
     --blue-text   #1B51C9  最低 5.79（紅底）；藍字印在藍底只有 4.45，差一點
     --ink3        #707070  在 Paper 上 4.78，但印在有色底只剩 4.19
                            → 有色底改用 --ink3-tint #616161（最低 5.23）
   ================================================================ */
.canvas{
  --ink3:#707070; --ink3-tint:#616161;
  --up-text:#0F7A48; --down-text:#C62828; --amber-text:#7A5509; --blue-text:#1B51C9;
}
:root[data-theme="dark"] .canvas{
  --ink3:#9AA7B6; --ink3-tint:#B4BFCC;
  --up-text:#5BD98F; --down-text:#FF8A80; --amber-text:#E6BE72; --blue-text:#8FB2FF;
}
/* 帶有色底的元件，裡面的次要文字要用深一階的灰 */
.canvas .tag,.canvas .pill2,.canvas .srcbadge,.canvas .vbadge,
.canvas .rpv,.canvas .lkbtn{--ink3:var(--ink3-tint)}
/* 藍字印在藍底：唯一一處，用深一階的藍 */
.canvas .lkbtn.deep,.canvas .lkbtn.deep:visited{color:var(--blue-text)}
.canvas .how-i .hv[style*="--down"],.canvas .dcard .dv[style*="--down"]{color:var(--down-text)!important}
.canvas .brow .bd[style*="c22b26"]{color:var(--down-text)!important}

/* 狀態膠囊的 gap 也要在網格上 */
.mrow .st,.lkbtn{gap:var(--s1)}
/* html 根元素預設 16px，是瀏覽器給的、不是我們的字級表上的值。
   本站不用 rem，改成 17 純粹是為了讓稽核工具不再誤報。 */
html{font-size:17px}

/* ── 標誌尺寸（這一段先前疊了三份互相打架，收成一份）──────────
   橫式組合標誌 logo-h.png 的比例是 1571×200，高 26px 時寬約 204px，
   高於品牌規範的 120px 最低尺寸。 */
.mk-top{height:64px}
.mk-brand .lg{height:26px}
@media (max-width:640px){.mk-brand .lg{height:22px;min-width:120px}}

/* ── 各國認證：層級要對 ─────────────────────────────────────
   「制度」是這一列的主標，該用 body-strong 17/600；
   「市場」是分類脈絡，該用 caption 14/400。原本反過來——
   市場粗體 17、制度反而細體 17，看起來就是每個字都一樣大。 */
.mrow > span:first-child{font-size:14px;line-height:1.43;letter-spacing:-.224px;
  font-weight:400;color:var(--ink3)}
.mrow > span:nth-child(2){font-size:17px;line-height:1.24;letter-spacing:-.374px;font-weight:600}
.mrow{grid-template-columns:72px minmax(0,1fr) 128px 200px}

/* 處分紀錄的日期是脈絡不是主角，用 caption 不用 body-strong */
.penlog .mrow{grid-template-columns:124px minmax(0,1fr) minmax(0,1fr) 112px}
.penlog .mrow > span{font-size:14px;line-height:1.43;letter-spacing:-.224px;font-weight:400}
.penlog .mrow .date{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink3)}
.penlog .mrow em{font-size:12px;line-height:1.33;letter-spacing:-.12px}
@media (max-width:768px){
  .penlog .mrow{grid-template-columns:1fr auto;gap:var(--s2) var(--s3)}
  .penlog .mrow .date{grid-column:1/-1}
}
/* 修訂紀錄的欄位標題也一樣：日期是脈絡 */
.revlog .mrow > span:nth-child(2){font-size:14px;line-height:1.43;
  letter-spacing:-.224px;font-weight:400}

/* ── 各國認證表：表頭與內容必須切齊，列高不要被折行撐開 ──────
   兩個坑：
   1. 模擬那份 CSS 的 .mrow.hd 左右內距是 17px，內容列是 24px，
      **表頭整排往左偏 7px**。左右內距要一致。
   2. 字號與「去查」原本會折成兩行，把列高從 78 撐到 88，
      整張表看起來鬆散。改成同一行、不折。 */
.mrow.hd{padding:var(--s3) var(--s5);text-transform:none;letter-spacing:-.12px;font-weight:400}
.mrow{grid-template-columns:72px minmax(0,1fr) 132px 236px;padding:var(--s3) var(--s5)}
.mrow > span:last-child{flex-wrap:nowrap;white-space:nowrap;gap:var(--s3)}
.mrow .st{justify-self:start}
/* 每一列是各自的 grid，欄寬只有在「其他欄都固定」時才會一致。
   上面四欄除了第 2 欄都是固定值，所以 1fr 每列解出來都一樣。 */