/* ==BEGIN:review== */
/* 原文連結清單：外觀沿用引用卡片，但語意上不是引用 */
.linklist{background:#fff;border:1px solid var(--line);border-left:3px solid var(--navy);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.linklist .src{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;
  font-size:var(--t-xs);color:var(--muted);margin-bottom:var(--sp-2)}
.linklist .site{background:var(--navy);color:#fff;border-radius:var(--r-sm);
  padding:var(--sp-05) var(--sp-2);font-weight:700}
.linklist .lk a{color:var(--navy);font-size:var(--t-sm)}

/* 全部走 ==BEGIN:scale== 宣告的 token，禁止手打數值——這是「凌亂」的根因 */
.rv-hero{padding:var(--sp-7) var(--sp-0) var(--sp-6);border-bottom:1px solid var(--line)}
.rv-top{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:var(--sp-6);align-items:center}
.rv-top img.brand-lg{width:88px;height:88px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-2)}
/* 沒有 logo 檔時的替代徽章：寧可顯示品牌字，也不要輸出必然 404 的 <img> */
.rv-top .brand-txt{display:flex;align-items:center;justify-content:center;font-family:var(--serif);
  font-size:var(--t-lg);color:var(--navy);background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-lg);width:88px;height:88px;letter-spacing:var(--ls-1)}
.rv-top .lg-dark{background:#14213d!important;border-color:#14213d!important}
.rv-name{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--navy);
  margin:var(--sp-0) var(--sp-0) var(--sp-1);line-height:var(--lh-tight)}
.rv-meta{display:flex;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--t-sm);color:var(--muted);font-weight:600}
.rv-meta b{color:var(--navy)}
.rv-scorebox{text-align:center;background:#fff;border:1.5px solid var(--amber);
  border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-5);min-width:118px}
.rv-scorebox .n{font-family:var(--serif);font-size:var(--t-2xl);color:var(--amber-d);line-height:1;
  font-variant-numeric:lining-nums tabular-nums}
.rv-scorebox .s{color:var(--star);letter-spacing:var(--ls-star);font-size:var(--t-sm);
  display:block;margin:var(--sp-1) var(--sp-0) var(--sp-05)}
.rv-scorebox .l{font-size:var(--t-xs);color:var(--muted);font-weight:700;letter-spacing:var(--ls-1)}
/* 避雷名單專用：這些平台不進推薦榜，因此沒有分數，改標示警示狀態 */
.rv-scorebox.warn{border-color:var(--red);background:#fdf6f5}
.rv-scorebox.warn .n{font-size:var(--t-xl);color:var(--red)}
.rv-scorebox.warn .s{color:var(--red);letter-spacing:var(--ls-0)}
/* 事實表的警示列：把「不可查證」那幾條標出來，讀者一眼掃得到 */
.facts tr.fact-alert th{color:var(--red)}
.facts tr.fact-alert td{background:#fdf6f5}
@media(max-width:760px){.rv-top{grid-template-columns:64px minmax(0,1fr)}
  .rv-top img.brand-lg{width:64px;height:64px}.rv-scorebox{grid-column:1/-1}}

.verdict{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--paper);
  border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-7);margin:var(--sp-6) var(--sp-0)}
.verdict .lb{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-2);color:var(--amber);
  display:block;margin-bottom:var(--sp-2)}
.verdict p{margin:var(--sp-0);font-size:var(--t-base);line-height:var(--lh-base);color:#e8edf4}
.verdict p+p{margin-top:var(--sp-3)}
.verdict b{color:var(--amber)}

.facts{width:100%;border-collapse:collapse;margin:var(--sp-0) var(--sp-0) var(--sp-6);font-size:var(--t-sm)}
.facts th{background:var(--paper-2);color:var(--navy);text-align:left;padding:var(--sp-3) var(--sp-3);
  font-weight:700;width:30%;border-bottom:1px solid var(--line)}
.facts td{padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line);color:#3f4756}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:none}

.proscons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);
  margin:var(--sp-0) var(--sp-0) var(--sp-6)}
.pc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}
.pc.good{border-top:3px solid #4a7c59}
.pc.bad{border-top:3px solid var(--red)}
.pc h3{margin:var(--sp-0) var(--sp-0) var(--sp-3);font-size:var(--t-md);color:var(--navy)}
.pc ul{margin:var(--sp-0);padding-left:var(--sp-4)}
.pc li{font-size:var(--t-sm);line-height:var(--lh-base);margin-bottom:var(--sp-05);color:#3f4756}
.pc.good li::marker{color:#4a7c59}
.pc.bad li::marker{color:var(--red)}
@media(max-width:700px){.proscons{grid-template-columns:minmax(0,1fr)}}

.shot{margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.shot img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);display:block}
.shot figcaption{font-size:var(--t-xs);color:var(--muted);margin-top:var(--sp-2);padding-left:var(--sp-05);
  line-height:var(--lh-ui)}
.shot figcaption b{color:var(--navy)}
.shot.illus img{border-style:dashed}

/* ── 圖片區塊擴充：素材要多，但排版不能因此變亂 ── */
/* 兩張並排：適合「同一頁不同區塊」的對照 */
.shotgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);
  margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.shotgrid .shot{margin:var(--sp-0)}
@media(max-width:700px){.shotgrid{grid-template-columns:minmax(0,1fr)}}
/* 三張縮圖列：適合「機台／介面」快覽 */
.shotrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);
  margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.shotrow figure{margin:var(--sp-0)}
.shotrow img{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line);display:block}
.shotrow figcaption{font-size:var(--t-xs);color:var(--muted);margin-top:var(--sp-1);line-height:var(--lh-ui)}
@media(max-width:640px){.shotrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 遊戲商 logo 牆：從官網頁尾擷取的第三方供應商，是可查證的規模指標 */
.logowall{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--sp-4) var(--sp-0);margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.logowall .ttl{font-size:var(--t-xs);color:var(--muted);font-weight:700;
  letter-spacing:var(--ls-1);margin-bottom:var(--sp-3)}
.logowall .ls{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.logowall .ls span{font-size:var(--t-xs);color:var(--navy);background:var(--paper-2);
  border-radius:var(--r-sm);padding:var(--sp-05) var(--sp-2);font-weight:700}
/* 圖片群組標題：多圖時需要小標，否則讀者不知道在看什麼 */
.shot-h{font-family:var(--serif);font-size:var(--t-md);color:var(--navy);
  margin:var(--sp-6) var(--sp-0) var(--sp-3)}

.barcmp{margin:var(--sp-0) var(--sp-0) var(--sp-6)}
.barcmp .row{display:grid;grid-template-columns:120px minmax(0,1fr) 64px;gap:var(--sp-3);
  align-items:center;margin-bottom:var(--sp-2);font-size:var(--t-sm)}
.barcmp .nm{color:var(--navy);font-weight:700}
.barcmp .tr{height:22px;background:#eee6d6;border-radius:var(--r-sm);overflow:hidden}
.barcmp .fl{display:block;height:100%;min-height:22px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--amber),var(--amber-d))}  /* display:block 是必要的：inline 元素吃不到 width/height，會渲染成 0x0 看不見 */
.barcmp .row.self .fl{background:linear-gradient(90deg,#4a7c59,#3a6347)}
.barcmp .row.warn .fl{background:linear-gradient(90deg,#a4433a,#7d322b)}
.barcmp .vv{text-align:right;font-family:var(--serif);color:var(--amber-d);font-weight:700;
  font-variant-numeric:lining-nums tabular-nums}
.barcmp .cap{font-size:var(--t-xs);color:var(--muted);margin-top:var(--sp-2);line-height:var(--lh-ui)}
@media(max-width:600px){.barcmp .row{grid-template-columns:88px minmax(0,1fr) 52px;font-size:var(--t-xs)}}

.whofor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);
  margin:var(--sp-0) var(--sp-0) var(--sp-6)}
.who{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5)}
.who .ic{font-size:var(--t-lg);line-height:1}
.who h4{margin:var(--sp-05) var(--sp-0) var(--sp-1);font-size:var(--t-base);color:var(--navy)}
.who p{margin:var(--sp-0);font-size:var(--t-sm);color:var(--muted);line-height:var(--lh-ui)}
.who.yes{border-left:3px solid #4a7c59}
.who.no{border-left:3px solid var(--red)}
@media(max-width:760px){.whofor{grid-template-columns:minmax(0,1fr)}}

.rvcta{background:#fff;border:1.5px solid var(--amber);border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-6);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-5);align-items:center;margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.rvcta h3{margin:var(--sp-0) var(--sp-0) var(--sp-1);font-size:var(--t-md);color:var(--navy)}
.rvcta p{margin:var(--sp-0);font-size:var(--t-sm);color:var(--muted)}
@media(max-width:700px){.rvcta{grid-template-columns:minmax(0,1fr)}}

/* ── 強調分層 ──
   問題：整頁 18 個 <b> 全部同色同級，佔 13% 的字 = 沒有重點。
        中文粗體的辨識度本來就低於拉丁文（沒有明顯字重對比），全靠 bold 撐不住。
   解法：分兩層。第一層加深顏色拉開與內文的差距；第二層用「螢光筆底標」——
        用背景而非文字色，所以不消耗全站的金色強調配額（一屏 ≤2 處的規則不受影響）。 */

/* 第一層：事實強調。加深到 navy，與內文 #23303f 產生可辨色差 */
/* ⚠ 只作用在淺底。深色表面（判定卡、深藍區塊）必須排除，
     否則 navy 字疊 navy 底 = 隱形。這條規則的特異度(0,1,2)高於 .verdict b(0,1,1)，
     若不明確排除就會把深底上的金色字蓋掉。 */
.prose p b, .prose li b, .facts td b{ color:var(--navy); font-weight:700 }
/* 深色表面上的強調：一律走金色，且不用螢光筆（深底上的半透明色帶會變髒） */
.prose .verdict p b, .verdict p b, .verdict b{ color:var(--amber) !important }
.prose .verdict .key, .prose .verdict .keyw,
.verdict .key, .verdict .keyw{
  color:var(--amber) !important; background:none !important;
  border-bottom:2px solid rgba(209,145,60,.55); padding:var(--sp-0);
}

/* 第二層：關鍵句。每個小節最多一處，多了就失效 */
.prose .key,.prose .keyw{
  font-weight:700; padding:var(--sp-0) var(--sp-05); border-radius:var(--r-sm);
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
/* 一般重點：金色螢光筆 */
.prose .key{
  color:var(--navy);
  background:linear-gradient(180deg,transparent 52%,rgba(209,145,60,.48) 52%);
}
/* 警示重點：紅色螢光筆（避雷頁專用，語意就是警告） */
.prose .keyw{
  color:#7d2f27;
  background:linear-gradient(180deg,transparent 52%,rgba(164,67,58,.32) 52%);
}
/* 小節標題加一道短飾線，讓 h3 從內文裡站出來 */
.prose h3{ position:relative; padding-left:var(--sp-4) }
.prose h3::before{
  content:""; position:absolute; left:0; top:.34em;
  width:var(--sp-1); height:1em; border-radius:var(--r-sm); background:var(--amber);
}
.prose h3.w::before{ background:var(--red) }

/* ── 論壇引述卡 ──
   為什麼是引述卡不是整篇截圖：
     1) 論壇貼文是使用者著作，整篇重製的著作權風險高；短引述+出處+連結屬評論目的的合理使用
     2) 對「可查證性」為核心的評測站，能點過去自己查的連結比截圖更有公信力——
        截圖反而是內容農場的做法（我已查獲多個以 PTT／Dcard 命名的仿冒網域在偽造截圖）
   紀律：只引真網域（ptt.cc / dcard.tw）、標明日期、遮蔽帳號、註明未獨立查證。 */
.forumq{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin:var(--sp-0) var(--sp-0) var(--sp-4)}
.forumq .src{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:baseline;
  font-size:var(--t-xs);color:var(--muted);font-weight:700;margin-bottom:var(--sp-3)}
.forumq .src .site{background:var(--navy);color:var(--paper);border-radius:var(--r-sm);
  padding:var(--sp-05) var(--sp-2);letter-spacing:var(--ls-1)}
.forumq .src .bd{color:var(--navy)}
.forumq blockquote{margin:var(--sp-0);font-size:var(--t-sm);line-height:var(--lh-base);
  color:var(--ink);quotes:"「" "」"}
.forumq blockquote p{margin:var(--sp-0) var(--sp-0) var(--sp-2)}
.forumq blockquote p:last-child{margin-bottom:var(--sp-0)}
.forumq .cmt{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px dashed var(--line);
  font-size:var(--t-xs);color:var(--muted);line-height:var(--lh-ui)}
.forumq .cmt b{color:var(--navy)}
.forumq .lk{margin-top:var(--sp-3);font-size:var(--t-xs)}
.forumq .lk a{color:var(--navy);font-weight:700}
.forumq-note{font-size:var(--t-xs);color:var(--muted);line-height:var(--lh-ui);
  margin:var(--sp-0) var(--sp-0) var(--sp-6)}

/* ── 證據圖（可點擊放大）──
   用 <a href="原圖" target="_blank"> 包住，不寫 JS：沒有 lightbox 也一定點得開，
   失效安全。重要區域另外裁切放大成獨立圖，讀者不必自己找。 */
.evid{margin:var(--sp-0) var(--sp-0) var(--sp-4)}
.evid a{display:block;position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#fff}
.evid img{width:100%;height:auto;display:block}
.evid .zoom{position:absolute;right:var(--sp-2);bottom:var(--sp-2);
  background:rgba(20,33,61,.86);color:var(--paper);font-size:var(--t-xs);font-weight:700;
  border-radius:var(--r-sm);padding:var(--sp-05) var(--sp-2);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .evid a{transition:border-color var(--d-hover) var(--ease-out)}
  .evid a:hover{border-color:var(--navy)}
}
.evid figcaption{font-size:var(--t-xs);color:#5a5548;margin-top:var(--sp-2);
  line-height:var(--lh-ui)}
.evid figcaption b{color:var(--navy)}
/* 深色卡內的圖說必須翻成亮色——.verdict 是深藍漸層，沿用預設色會變成深字深底 */
.verdict .evid figcaption,.verdict .evid figcaption b{color:#e8edf4}
/* 兩張並排：放大圖 + 全圖 */
.evidpair{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-4);
  margin:var(--sp-0) var(--sp-0) var(--sp-4);align-items:start}
.evidpair .evid{margin:var(--sp-0)}
@media(max-width:700px){.evidpair{grid-template-columns:minmax(0,1fr)}}

/* ── 燈箱：站內放大，不是連到圖檔 ──
   用 CSS :target，不寫 JS —— 連到 .webp 檔會被部分瀏覽器當成下載，
   使用者要的是「點了就在頁面上放大」。沒有 JS 也一定能開能關。 */
.lbox{position:fixed;inset:0;display:none;z-index:90;overflow:auto;
  background:rgba(12,18,30,.93);padding:var(--sp-9) var(--sp-4) var(--sp-7)}
.lbox:target{display:block}
.lbox .lb-bg{position:fixed;inset:0;display:block}
.lbox img{position:relative;display:block;margin:var(--sp-0) auto;
  width:100%;max-width:min(1000px,94vw);height:auto;border-radius:var(--r-md);
  background:#fff}
.lbox .lb-x{position:fixed;top:var(--sp-4);right:var(--sp-5);z-index:2;
  background:var(--paper);color:var(--navy);text-decoration:none;font-weight:800;
  font-size:var(--t-sm);border-radius:var(--r-full);padding:var(--sp-2) var(--sp-5)}
.lbox .lb-cap{position:relative;max-width:min(1000px,94vw);margin:var(--sp-3) auto var(--sp-0);
  color:#d5dbe6;font-size:var(--t-xs);line-height:var(--lh-ui)}
@media (prefers-reduced-motion: no-preference){
  .lbox:target img{animation:lbIn 240ms var(--ease-out) both}
  @keyframes lbIn{from{opacity:0;transform:scale(.985)}}
}

.crumb{font-size:var(--t-xs);color:var(--muted);padding:var(--sp-3) var(--sp-0) var(--sp-0)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--navy)}
.crumb span{margin:var(--sp-0) var(--sp-1);color:#c9c2b2}

.rvnav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);
  margin:var(--sp-6) var(--sp-0) var(--sp-0)}
.rvnav a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);text-decoration:none;transition:border-color var(--d-hover) var(--ease-out)}
.rvnav a:hover{border-color:var(--navy)}
.rvnav .d{font-size:var(--t-xs);color:var(--muted);font-weight:700;letter-spacing:var(--ls-1)}
.rvnav .t{font-family:var(--serif);color:var(--navy);font-size:var(--t-base);margin-top:var(--sp-05)}
@media(max-width:600px){.rvnav{grid-template-columns:minmax(0,1fr)}}

/* 自打嘴巴對照：把同一家平台的兩種說法並排，讓讀者自己看 */
.clash{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;margin:var(--sp-5) var(--sp-0);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;background:#fff}
.clash .side{padding:var(--sp-5)}
.clash .side .hd{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-1);
  margin-bottom:var(--sp-3)}
.clash .side .q{font-family:var(--serif);font-size:var(--t-md);line-height:var(--lh-tight);
  margin:var(--sp-0) var(--sp-0) var(--sp-3)}
.clash .side .cite{font-size:var(--t-xs);color:var(--muted);line-height:var(--lh-ui);
  margin:var(--sp-0)}
.clash .a{background:#f2f6fb}
.clash .a .hd,.clash .a .q{color:var(--navy)}
.clash .b{background:#fdf3f2}
.clash .b .hd{color:var(--red)}
.clash .b .q{color:#8f1d14}
.clash .b .q b{color:#8f1d14}
.clash .vs{display:flex;align-items:center;justify-content:center;background:var(--navy);
  color:var(--paper);font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-1);
  padding:var(--sp-0) var(--sp-2);writing-mode:vertical-rl}
@media(max-width:640px){
  .clash{grid-template-columns:minmax(0,1fr)}
  .clash .vs{writing-mode:horizontal-tb;padding:var(--sp-2)}
}
/* 倍數對照：官方宣稱 vs 玩家實際回報 */
.ratio{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--sp-4);
  align-items:center;text-align:center;background:var(--navy);color:var(--paper);
  border-radius:var(--r-lg);padding:var(--sp-7) var(--sp-5);margin:var(--sp-5) var(--sp-0)}
.ratio .n{font-family:var(--serif);font-size:var(--t-2xl);line-height:var(--lh-none);
  color:var(--amber)}
.ratio .k{font-size:var(--t-xs);color:var(--paper);margin-top:var(--sp-3);
  line-height:var(--lh-ui)}
.ratio .op{font-size:var(--t-lg);color:var(--amber);font-weight:700}
@media(max-width:640px){.ratio{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}}
/* ==END:review== */

/* ==BEGIN:revmotion== */
/* ========== 評測頁動效 ==========
   ⚠ 不使用 scroll-driven（scroll-driven timeline）控制內容可見性。
     實測兩個致命行為：(1) 文件底部一個視窗高內的元素永遠走不完 entry；
     (2) 跳躍式捲動時 currentTime 停在負值。兩者都會讓內容永久隱形。
   改用 IntersectionObserver：內容預設可見，只有 JS 成功執行才啟用隱藏。 */

@media (prefers-reduced-motion: no-preference){
  .rv [data-rv]{ opacity:0; transform:translateY(14px);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out) }
  .rv [data-rv].rv-in{ opacity:1; transform:none }
  .rv .barcmp .fl{ transform:scaleX(0); transform-origin:left center;
    transition: transform 640ms var(--ease-out) }
  .rv .barcmp.rv-in .fl{ transform:scaleX(1) }

  /* 評分盒：頁面主角，進場給它一點份量（時間軸動畫，不影響可見性） */
  @keyframes scoreIn{ from{ opacity:0; transform:scale(.94) } }
  .rv-scorebox{ animation: scoreIn 420ms var(--ease-out) both; animation-delay:80ms }
  @keyframes numIn{ from{ opacity:0; transform:translateY(8px) } }
  .rv-scorebox .n{ animation: numIn 460ms var(--ease-out) both; animation-delay:180ms }
  .rv-scorebox .s{ animation: numIn 460ms var(--ease-out) both; animation-delay:260ms }
}
@media (prefers-reduced-motion: reduce){
  [data-rv]{ opacity:1 !important; transform:none !important; transition:none !important }
  .barcmp .fl{ transform:none !important; transition:none !important }
  .rv-scorebox,.rv-scorebox .n,.rv-scorebox .s{ animation:none !important }
}

/* ── hover 互動（gate 在指標裝置）── */
.shot img{ transition: transform var(--d-hover) var(--ease-out) }
.shot{ overflow:hidden; border-radius:var(--r-lg) }
.facts tr{ transition: background-color var(--d-hover) var(--ease-out) }
.pc{ transition: transform var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out) }
.who{ transition: transform var(--d-hover) var(--ease-out) }
.rv-scorebox{ transition: transform var(--d-hover) var(--ease-out) }
.barcmp .row{ transition: transform var(--d-hover) var(--ease-out) }

@media (hover: hover) and (pointer: fine){
  /* 截圖：滑過微放大，邀請細看 */
  .shot:hover img{ transform: scale(1.025) }
  /* 事實表：標出正在讀的那一列 */
  .facts tr:hover td,.facts tr:hover th{ background: #fbf6ec }
  /* 優缺點卡 */
  .pc:hover{ transform: translateY(-2px) }
  .pc.good:hover{ border-color:#4a7c59 }
  .pc.bad:hover{ border-color:var(--red) }
  /* 適合誰 */
  .who:hover{ transform: translateY(-3px) }
  /* 評分盒 */
  .rv-scorebox:hover{ transform: scale(1.03) }
  /* 對比條：滑過該列微推 */
  .barcmp .row:hover{ transform: translateX(3px) }
}

@media (prefers-reduced-motion: reduce){
  .shot:hover img,.pc:hover,.who:hover,.rv-scorebox:hover,.barcmp .row:hover{
    transform:none !important;
  }
}
/* ==END:revmotion== */


/* ==BEGIN:mobile-fix== 2026-08-20 真機寬度（375px）實測後追加 ==
   ① 表格在手機上自己捲，不要把整頁撐寬（blacklist 原本文件寬 406 > 視窗 375）
   ② 表格內與麵包屑的連結加大可點區域（原本只有 18px，iOS 建議 44px） */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.tblwrap > table{margin-bottom:var(--sp-0)}
@media (max-width:768px){
  .tblwrap{margin-inline:calc(var(--sp-5) * -1);padding-inline:var(--sp-5)}
  .tblwrap table{min-width:34rem}
  .tblwrap th a,.tblwrap td a{display:inline-block;padding:var(--sp-3) var(--sp-0);
    line-height:var(--lh-ui)}
  nav.crumb a,.crumb a{display:inline-block;padding:var(--sp-2) var(--sp-0)}
  .wact .mini,.act .mini{display:inline-block;padding:var(--sp-3) var(--sp-0);
    line-height:var(--lh-ui)}
  .sameas a{display:inline-block;padding:var(--sp-2) var(--sp-0)}
  /* 標題區在 375px 下三欄擠不下，文字會疊到 logo 上 —— 改單欄堆疊 */
  .rv-top{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .rv-top .brand-txt,.rv-top img.brand-lg{width:64px;height:64px}
  .rv-scorebox{justify-self:start}
  /* 查證連結是本站價值的落點，手機上必須點得到（原本只有 15px） */
  .lk a,.forumq .lk a,.src a,figcaption a{display:inline-block;
    padding:var(--sp-3) var(--sp-0);line-height:var(--lh-ui)}
  /* 浮動 CTA：縮小並留出頁尾空間，避免壓住最後一段 */
  .float{right:12px;bottom:12px}
  .float .btn{padding:var(--sp-3) var(--sp-4);font-size:var(--t-sm)}
  body{padding-bottom:72px}
}
/* ==END:mobile-fix== */


:root{
  /* ==BEGIN:scale== 尺度 token — 單一真相源，禁止在元件內手打數值 == */
  --t-xs:12px; --t-sm:14px; --t-base:17px; --t-md:20px;
  --t-lg:24px; --t-xl:30px; --t-2xl:38px;
  --t-3xl:clamp(2.1rem,4.6vw,3.4rem);
  --sp-0:0px; --sp-05:2px; --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px;
  --sp-10:56px; --sp-11:64px; --sp-12:80px; --sp-13:96px;
  --r-sm:4px; --r-md:9px; --r-lg:14px; --r-xl:20px; --r-full:999px;
  --ls-0:0; --ls-1:.04em; --ls-2:.1em; --ls-3:.22em; --ls-star:2px;
  --lh-none:1.1; --lh-tight:1.25; --lh-ui:1.5; --lh-base:1.75;
  --sh-1:0 1px 2px rgba(20,33,61,.06);
  --sh-2:0 8px 24px rgba(20,33,61,.10);
  /* ==END:scale== */

  --navy:#14213d; --navy-2:#1e2f4d; --paper:#f7f4ec; --paper-2:#efe9db;
  --ink:#23303f; --amber:#d1913c; --amber-d:#b6772a; --line:#dfd6c4;
  --red:#a4433a; --muted:#6b6656; --star:#b6772a;
  --shadow:0 1px 2px rgba(20,33,61,.08),0 8px 24px rgba(20,33,61,.10);
  --serif:"NotoSerifTCSub","Noto Serif TC","Source Han Serif TC","Songti TC",PMingLiU,MingLiU,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}
/* ==BEGIN:scale-base== 兜底：沒被規則覆蓋的元素不准掉回瀏覽器預設值 == */
input,select,textarea{font-family:inherit;font-size:var(--t-base)}
h1{font-size:var(--t-3xl)} h2{font-size:var(--t-xl)} h3{font-size:var(--t-md)}
h4,h5,h6{font-size:var(--t-base)}
/* ==END:scale-base== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--t-base);line-height:var(--lh-base);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* paper grain overlay — cheap, static, no repaint */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.wrap{max-width:1120px;margin:var(--sp-0) auto;padding:var(--sp-0) var(--sp-5);position:relative;z-index:2}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-0)}
.eyebrow{font-family:var(--sans);font-size:var(--t-xs);letter-spacing:var(--ls-3);text-transform:uppercase;
  color:var(--muted);font-weight:700}

/* ---- top strip ---- */
.strip{background:var(--navy);color:var(--paper);font-size:var(--t-xs);letter-spacing:var(--ls-1)}
.strip .wrap{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);flex-wrap:wrap}
.strip b{color:var(--amber)}

/* ---- header ---- */
header{position:sticky;top:0;z-index:20;background:rgba(247,244,236,.86);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-5);gap:var(--sp-4)}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.brand .mark{width:34px;height:34px;border:2px solid var(--navy);border-radius:50%;
  display:grid;place-items:center;position:relative;background:var(--paper)}
.brand .mark::after{content:"";position:absolute;width:13px;height:13px;border-top:2px solid var(--amber-d);
  border-right:2px solid var(--amber-d);border-radius:0 var(--r-lg) 0 0;transform:rotate(6deg)}
.brand .bn{font-family:var(--serif);font-weight:700;font-size:var(--t-md);color:var(--navy);line-height:1}
.brand .bn small{display:block;font-family:var(--sans);font-size:var(--t-xs);letter-spacing:var(--ls-3);
  color:var(--muted);font-weight:600;margin-top:var(--sp-05)}
.menu{display:flex;gap:var(--sp-5);font-size:var(--t-sm);font-weight:600}
.menu a{text-decoration:none;color:var(--ink);position:relative;padding:var(--sp-1) var(--sp-0)}
.menu a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--amber-d);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}

@media(max-width:860px){.menu{display:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:700;font-size:var(--t-sm);
  text-decoration:none;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);cursor:pointer;border:1.5px solid transparent;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
.btn-amber{background:var(--amber);color:#2a1c05;box-shadow:var(--sh-1)}

.btn-amber:active{transform:translateY(0) scale(.98)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}

/* sweep-light button */
.btn-line{position:relative;overflow:hidden;background:var(--navy);color:var(--paper)}
.btn-line::before{content:"";position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-200%);transition:transform 260ms var(--ease-out)}



/* ---- hero ---- */
.hero{padding:var(--sp-10) var(--sp-0) var(--sp-8)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-8);align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);color:var(--navy);margin:var(--sp-3) var(--sp-0) var(--sp-4)}
.hero h1 em{font-style:normal;color:var(--amber-d);position:relative;white-space:nowrap}
.hero p.lead{font-size:var(--t-base);color:#3a4657;max-width:34ch;margin:var(--sp-0) var(--sp-0) var(--sp-6)}
.hero .cta{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.trust{margin-top:var(--sp-5);display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--t-xs);color:var(--muted);font-weight:600}
.trust span{display:flex;align-items:center;gap:var(--sp-1)}
.trust .dot{width:6px;height:6px;border-radius:50%;background:var(--muted)}
.hero figure{margin:0;aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,var(--navy),var(--navy-2));position:relative;box-shadow:var(--sh-1)}
.hero figure img{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:normal}
@media(max-width:820px){.hero .grid{grid-template-columns:1fr}.hero figure{order:-1}}

/* ---- section frame ---- */
section{padding:var(--sp-9) var(--sp-0);position:relative}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-6);
  border-bottom:2px solid var(--navy);padding-bottom:var(--sp-3)}
.sec-head h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--navy);margin:var(--sp-1) var(--sp-0) var(--sp-0)}
.sec-head .side{font-size:var(--t-sm);color:var(--muted);font-weight:600;text-align:right}

/* ---- CSS-only tabs ---- */
.tabs input{position:absolute;opacity:0;pointer-events:none}
.tablist{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.tablist label{padding:var(--sp-2) var(--sp-4);border:1.5px solid var(--navy);border-radius:var(--r-full);font-weight:700;
  font-size:var(--t-sm);cursor:pointer;color:var(--navy);background:var(--paper);transition:.18s;user-select:none}

#t-line:checked~.tablist label[for=t-line],
#t-cash:checked~.tablist label[for=t-cash],
#t-credit:checked~.tablist label[for=t-credit]{background:var(--navy);color:var(--paper)}
.panel{display:none}
#t-line:checked~#p-line,#t-cash:checked~#p-cash,#t-credit:checked~#p-credit{display:block}
.panel .note{font-size:var(--t-xs);color:var(--muted);margin:calc(-1 * var(--sp-1)) var(--sp-0) var(--sp-4)}

/* ---- ranking cards ---- */
.rank{display:grid;gap:var(--sp-3)}
.card{display:grid;grid-template-columns:52px 1fr auto;gap:var(--sp-4);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;position:relative}

.card.top{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),var(--shadow)}
.card .rk{font-family:var(--serif);font-size:var(--t-xl);color:var(--navy);text-align:center;line-height:1}
.card.top .rk{color:var(--amber-d)}
.card .name{font-family:var(--serif);font-size:var(--t-md);font-weight:700;color:var(--navy);display:flex;align-items:center;gap:var(--sp-2)}
.badge{font-family:var(--sans);font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-2);padding:var(--sp-05) var(--sp-2);border-radius:var(--r-sm);
  background:var(--amber);color:#2a1c05;text-transform:uppercase}
.meta{font-size:var(--t-sm);color:var(--muted);margin-top:var(--sp-1);display:flex;gap:var(--sp-3);flex-wrap:wrap}
.stars{color:var(--star);letter-spacing:var(--ls-star);font-size:var(--t-sm)}
.card .act{display:flex;flex-direction:column;gap:var(--sp-2);align-items:stretch;min-width:118px}
.act a{text-align:center;font-size:var(--t-sm);padding:var(--sp-2) var(--sp-3)}
.mini{text-decoration:none;color:var(--navy);border:1.4px solid var(--line);border-radius:var(--r-md);font-weight:700;transition:.18s}

@media(max-width:640px){.card{grid-template-columns:40px 1fr}.card .act{grid-column:1/-1;flex-direction:row}}

/* ---- compare hub ---- */
.hub{background:var(--navy);color:var(--paper);border-radius:var(--r-lg);padding:var(--sp-7);display:grid;
  grid-template-columns:1.3fr 1fr;gap:var(--sp-6);align-items:center}
.hub h2{color:var(--paper);font-size:var(--t-xl);margin:var(--sp-2) var(--sp-0) var(--sp-2)}
.hub p{color:#c9d2e0;margin:var(--sp-0) var(--sp-0) var(--sp-4)}
.hub .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-2);font-size:var(--t-xs)}
.hub .cols div{background:var(--navy-2);border:1px solid #2c3f61;border-radius:var(--r-md);padding:var(--sp-3)}
.hub .cols b{color:var(--amber);display:block;margin-bottom:var(--sp-05);font-size:var(--t-sm)}
@media(max-width:760px){.hub{grid-template-columns:1fr}}

/* ---- method / redflags ---- */
.grid3{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.tile .n{font-family:var(--serif);color:var(--navy);font-size:var(--t-md)}
.tile h3{font-size:var(--t-base);color:var(--navy);margin:var(--sp-2) var(--sp-0) var(--sp-1)}
.tile p{font-size:var(--t-sm);color:var(--muted);margin:0}
@media(max-width:820px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.grid3{grid-template-columns:1fr}}
.flags{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.flag{display:flex;gap:var(--sp-3);background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--r-md);padding:var(--sp-4) var(--sp-4)}
.flag .x{color:var(--red);font-weight:800;font-family:var(--serif);font-size:var(--t-md)}
.flag h3{margin:var(--sp-0) var(--sp-0) var(--sp-1);font-size:var(--t-base);color:var(--navy)}
.flag p{margin:0;font-size:var(--t-sm);color:var(--muted)}
@media(max-width:640px){.flags{grid-template-columns:1fr}}

/* ---- FAQ ---- */
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-05) var(--sp-4);margin-bottom:var(--sp-2)}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);padding:var(--sp-4) var(--sp-0);list-style:none;
  display:flex;justify-content:space-between;align-items:center;font-family:var(--serif);font-size:var(--t-base)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-size:var(--t-lg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:var(--sp-0) var(--sp-0) var(--sp-4);color:#40495a;font-size:var(--t-sm)}

/* ---- author ---- */
.author{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-6);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6)}
.author img{width:120px;height:120px;border-radius:var(--r-lg);object-fit:cover;background:var(--navy);border:1px solid var(--line)}
.author h3{margin:var(--sp-0) var(--sp-0) var(--sp-1);color:var(--navy);font-size:var(--t-md)}
.author .role{color:var(--muted);font-weight:700;font-size:var(--t-sm);letter-spacing:var(--ls-1);margin-bottom:var(--sp-2)}
.author p{margin:var(--sp-0) var(--sp-0) var(--sp-3);color:#40495a;font-size:var(--t-sm)}
@media(max-width:560px){.author{grid-template-columns:1fr}.author img{width:96px;height:96px}}

/* ---- footer ---- */
footer{background:var(--navy);color:#c9d2e0;margin-top:var(--sp-9);padding:var(--sp-8) var(--sp-0) var(--sp-6);font-size:var(--t-sm)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--sp-6)}
footer h4{color:var(--paper);font-size:var(--t-xs);letter-spacing:var(--ls-2);text-transform:uppercase;margin:var(--sp-0) var(--sp-0) var(--sp-3)}
footer a{color:#c9d2e0;text-decoration:none;display:block;padding:var(--sp-1) var(--sp-0);transition:color .15s var(--ease-out)}

.fbrand{font-family:var(--serif);color:var(--paper);font-size:var(--t-md);margin-bottom:var(--sp-2)}
.fbot{border-top:1px solid #2c3f61;margin-top:var(--sp-6);padding-top:var(--sp-4);display:flex;justify-content:space-between;
  gap:var(--sp-3);flex-wrap:wrap;font-size:var(--t-xs);color:#8b96a8}
.warn{display:inline-block;border:1px solid var(--amber);color:var(--amber);border-radius:var(--r-sm);padding:var(--sp-05) var(--sp-2);font-weight:700}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}

/* floating LINE */
.float{position:fixed;right:18px;bottom:18px;z-index:40}
.float a{box-shadow:0 8px 22px rgba(20,33,61,.3)}



/* ranking score + tab counts */
.starline{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-05) var(--sp-0)}
.score{font-family:var(--serif);font-weight:700;color:var(--amber-d);font-size:var(--t-base)}
.tablist label b{display:inline-block;background:var(--paper-2);color:var(--muted);border-radius:var(--r-xl);
  padding:1px var(--sp-2);font-size:var(--t-xs);margin-left:var(--sp-1);font-weight:800}
#t-line:checked~.tablist label[for=t-line] b,#t-cash:checked~.tablist label[for=t-cash] b,#t-credit:checked~.tablist label[for=t-credit] b{background:var(--amber);color:#2a1c05}

/* E-E-A-T components */
.eeat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin:var(--sp-1) var(--sp-0)}
.eeat .it{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3)}
.eeat .it b{display:block;color:var(--navy);font-family:var(--serif);font-size:var(--t-base);margin-bottom:var(--sp-05)}
.eeat .it span{font-size:var(--t-xs);color:var(--muted)}
@media(max-width:820px){.eeat{grid-template-columns:1fr 1fr}}
.disclosure{font-size:var(--t-xs);color:#40495a;background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4)}
.disclosure b{color:var(--navy)}
.rg{background:#fff;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:var(--r-lg);padding:var(--sp-6)}
.rg .h{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.rg .age{background:var(--red);color:#fff;font-family:var(--serif);font-weight:800;font-size:var(--t-base);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);white-space:nowrap}
.rg h2{color:var(--navy);font-size:var(--t-lg);margin:0}
.rg p{margin:var(--sp-0) var(--sp-0) var(--sp-2);font-size:var(--t-sm);color:#40495a}
.rg .lines{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-2);font-size:var(--t-sm)}
.rg .lines b{color:var(--navy)}
.sameas{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-1) var(--sp-0) var(--sp-3)}
.sameas a{font-size:var(--t-xs);font-weight:700;color:var(--navy);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-1) var(--sp-3);text-decoration:none;transition:.15s}

.reviewed{font-size:var(--t-xs);color:var(--muted);margin:var(--sp-0) var(--sp-0) var(--sp-2)}
.reviewed b{color:var(--navy)}


/* danger / watch list */
.warnzone{margin-top:var(--sp-7);border:1px solid #e6d9c9;border-top:4px solid var(--red);
  border-radius:var(--r-lg);background:#fdfaf6;padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.wzh{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-4)}
.wzi{font-size:var(--t-lg);color:var(--red);line-height:1}
.wzh h3{margin:var(--sp-0) var(--sp-0) var(--sp-1);color:var(--red);font-size:var(--t-md)}
.wzh p{margin:0;font-size:var(--t-sm);color:#5c5548;line-height:var(--lh-base);max-width:78ch}
.wzh p b{color:var(--red)}
.wrank{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.wcard{display:grid;grid-template-columns:38px 1fr;gap:var(--sp-3);align-items:start;
  background:#fff;border:1px solid var(--line);border-left:3px solid #d9b8a5;
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);transition:border-color .18s}

.wcard .lg-w{width:38px;height:38px;filter:grayscale(1);opacity:.62}
.wname{font-family:var(--serif);font-weight:700;color:#4a4438;font-size:var(--t-base);
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.rtag{font-family:var(--sans);font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-1);
  padding:var(--sp-05) var(--sp-2);border-radius:var(--r-sm);background:var(--paper-2);color:var(--muted)}
.rtag-hot{background:var(--red);color:#fff}
.rtag-sev{background:#8f1d14;color:#fff;letter-spacing:var(--ls-1);font-size:var(--t-xs);padding:var(--sp-1) var(--sp-2)}
/* 嚴重警示：跨欄大卡 */
.wcard.wsev{grid-column:1/-1;grid-template-columns:56px 1fr;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5) var(--sp-4);
  background:linear-gradient(180deg,#fff4f1,#fffaf9);border:1.5px solid #e8b3a6;
  border-left:6px solid #8f1d14;border-radius:var(--r-lg);
  box-shadow:0 2px 10px rgba(143,29,20,.10);position:relative;overflow:hidden}
.wcard.wsev::before{content:"出金爭議警示";position:absolute;top:0;right:0;
  background:#8f1d14;color:#fff;font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-2);
  padding:var(--sp-1) var(--sp-3);border-radius:0 var(--r-md) 0 var(--r-md)}
.wcard.wsev .lg-w{width:56px;height:56px;filter:grayscale(1) contrast(.9);opacity:.72;
  border:1px solid #e8cfc7;background:#fff}
.wcard.wsev .wname{color:#8f1d14;font-size:var(--t-md)}
.wcard.wsev .ft{color:#7d4034;font-size:var(--t-sm);margin-top:var(--sp-2);font-weight:500}
.wcard.wsev .meta{color:#94776e}

.wcard .meta{font-size:var(--t-xs);margin-top:var(--sp-05)}
.wcard .ft{margin:var(--sp-1) var(--sp-0) var(--sp-0);font-size:var(--t-xs);color:#6b6455;line-height:var(--lh-ui)}
@media(max-width:820px){.wrank{grid-template-columns:1fr}}

/* brand lineage tracking */
.linked{margin-top:var(--sp-3);background:#fff;border:1px dashed #d8b0a2;border-radius:var(--r-md);padding:var(--sp-3) var(--sp-3)}
.lk-h{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-2);color:#8f1d14;margin-bottom:var(--sp-2)}
.lk-chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.lk-n{font-family:var(--serif);font-size:var(--t-sm);font-weight:700;color:#7d4034;
  background:#fdf2ee;border:1px solid #ecd2c8;border-radius:var(--r-sm);padding:var(--sp-05) var(--sp-2)}
.lk-me{font-family:var(--serif);font-size:var(--t-sm);font-weight:800;color:#fff;
  background:#8f1d14;border-radius:var(--r-sm);padding:var(--sp-05) var(--sp-2)}
.lk-a{color:#b98476;font-size:var(--t-sm);font-weight:700}
.lk-note{margin:0;font-size:var(--t-xs);color:#6b5148;line-height:var(--lh-ui)}

/* structural risk explainer (credit) */
.structrisk{background:#fff8f4;border:1px solid #eddbcf;border-left:4px solid var(--red);
  border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-5);margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.sr-h{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.sr-i{width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;
  display:grid;place-items:center;font-size:var(--t-sm);flex:0 0 auto;line-height:1}
.structrisk h3{margin:0;color:var(--red);font-size:var(--t-base)}
.structrisk p{margin:var(--sp-0) var(--sp-0) var(--sp-2);font-size:var(--t-sm);color:#4d4639;line-height:var(--lh-base)}
.structrisk ul{margin:var(--sp-0) var(--sp-0) var(--sp-2);padding-left:var(--sp-5)}
.structrisk li{font-size:var(--t-sm);color:#4d4639;line-height:var(--lh-base);margin-bottom:var(--sp-1)}
.structrisk li b{color:var(--navy)}
.sr-f{margin:0!important;padding-top:var(--sp-2);border-top:1px dashed #e3d3c4;
  font-size:var(--t-xs)!important;color:#6b6455!important}

/* scoring rationale (house pick) */
.rationale{margin:calc(-1 * var(--sp-1)) var(--sp-0) var(--sp-4);background:linear-gradient(180deg,#fffdf8,#fbf7ee);
  border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r-lg) var(--r-lg);padding:var(--sp-4) var(--sp-5) var(--sp-4)}
.rt-h{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.rt-i{width:21px;height:21px;border-radius:50%;background:var(--amber);color:#2a1c05;
  display:grid;place-items:center;font-size:var(--t-xs);font-weight:800;flex:0 0 auto}
.rationale h4{margin:0;font-family:var(--serif);color:var(--navy);font-size:var(--t-base)}
.rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-5);margin-bottom:var(--sp-3)}
.rd-h{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-sm);
  font-weight:700;color:var(--navy);margin-bottom:var(--sp-1)}
.rd-h b{font-family:var(--serif);color:var(--navy);font-size:var(--t-sm)}
.rd-bar{height:5px;background:#eee6d6;border-radius:var(--r-sm);overflow:hidden;margin-bottom:var(--sp-1)}
.rd-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--amber-d));border-radius:var(--r-sm)}
.rd p{margin:0;font-size:var(--t-xs);color:#6b6455;line-height:var(--lh-ui)}
.rt-why{margin:var(--sp-0) var(--sp-0) var(--sp-2);font-size:var(--t-sm);color:#3f4756;line-height:var(--lh-base);
  padding-top:var(--sp-3);border-top:1px dashed #e8dcc6}
.rt-why b{color:var(--navy)}
.rt-minus{margin:0;font-size:var(--t-xs);color:#7a5a4a;line-height:var(--lh-base);background:#fbf1e9;
  border-left:3px solid #d9b8a5;border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-2) var(--sp-3)}
.rt-minus b{color:var(--red)}
@media(max-width:700px){.rd-grid{grid-template-columns:1fr}}

/* pinned-but-not-first badge */
.badge-alt{background:var(--navy);color:var(--paper)}

/* multi-version tag */
.alsotag{font-family:var(--sans);font-size:var(--t-xs);font-weight:700;padding:var(--sp-05) var(--sp-2);border-radius:var(--r-sm);
  background:#eef2f7;color:#5b6c85;border:1px solid #dde4ee;letter-spacing:var(--ls-0)}

/* collapse: top10 + more */
.moretoggle{position:absolute;opacity:0;pointer-events:none}
.morewrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.morewrap>.rank{overflow:hidden;min-height:0}
.moretoggle:checked+.morewrap{grid-template-rows:1fr;margin-top:var(--sp-3)}
.morebtn{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);margin:var(--sp-4) auto var(--sp-0);
  max-width:340px;padding:var(--sp-3) var(--sp-5);border:1.5px solid var(--navy);border-radius:var(--r-full);
  font-weight:700;font-size:var(--t-sm);color:var(--navy);cursor:pointer;background:var(--paper);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .2s;user-select:none}

.morebtn .mc{display:none}
.moretoggle:checked~.morebtn .mo{display:none}
.moretoggle:checked~.morebtn .mc{display:inline}

/* logo cards */
.card{grid-template-columns:44px 46px 1fr auto;gap:var(--sp-3);align-items:center}
.card .lg{width:44px;height:44px;object-fit:contain;border-radius:var(--r-md);background:#fff;
  border:1px solid var(--line);padding:var(--sp-05);display:block}
.lg-dark{background:#14213d!important;border-color:#14213d!important}
.wcard .lg-dark{background:#3a3a3a!important;border-color:#3a3a3a!important}
.card .lg-ph{display:grid;place-items:center;background:var(--navy);color:var(--paper);
  font-family:var(--serif);font-weight:700;font-size:var(--t-sm);border:none}
.card .info{min-width:0}
.card .ft{margin:var(--sp-1) var(--sp-0) var(--sp-0);font-size:var(--t-xs);color:#59606e;line-height:var(--lh-ui)}
.tier{font-family:var(--sans);font-size:var(--t-xs);font-weight:800;padding:var(--sp-05) var(--sp-1);border-radius:var(--r-sm);
  letter-spacing:var(--ls-1);vertical-align:middle}
.tier.t-S{background:var(--navy);color:var(--paper)}
.tier.t-A{background:var(--paper-2);color:var(--muted)}
.tier.t-B{background:transparent;color:#a9a294;border:1px solid var(--line)}
@media(max-width:700px){
  .card{grid-template-columns:34px 40px 1fr;gap:var(--sp-2);padding:var(--sp-3)}
  .card .lg{width:40px;height:40px}
  .card .act{grid-column:1/-1;flex-direction:row;margin-top:var(--sp-2)}
  .card .rk{font-size:var(--t-lg)}
}



/* ==BEGIN:motion== */
/* ========== MOTION SYSTEM v2 — 依 animations.dev 十條標準重寫 ==========
   只動 transform / opacity｜UI <300ms｜hover 需 gate｜無常駐裝飾動畫       */
:root{
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* 進出場：強 ease-out */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* 螢幕內移動 */
  --d-press: 140ms;   /* 按壓回饋 100–160ms */
  --d-hover: 180ms;   /* hover 反應 */
  --d-panel: 240ms;   /* 面板/下拉 150–250ms */
}

/* 頁面切換：原生跨文件 View Transition */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ── 按壓回饋：scale(.97) / 140ms ease-out（標準：任何可壓元素）── */
.btn, .mini, .tablist label, .morebtn, .sameas a {
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-hover) ease, color var(--d-hover) ease;
}
.btn:active, .mini:active, .tablist label:active, .morebtn:active, .sameas a:active {
  transform: scale(.97);
}

/* ── 陰影改走 opacity（GPU）：實體陰影放 ::after ── */
.card { position: relative; transition: transform var(--d-hover) var(--ease-out); }
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 10px 26px rgba(20,33,61,.13); opacity:0;
  transition: opacity var(--d-hover) var(--ease-out);
}
.btn-amber, .btn-line { position: relative; }

/* ── hover 動效一律 gate（標準 8）＋ 幅度克制（標準 2）── */
@media (hover: hover) and (pointer: fine) {
  .btn-line:hover::before{transform:translateX(220%)} /* sweepGate */
  .card:hover { transform: translateY(-2px); }
  .card:hover::after { opacity: 1; }
  .card .lg { transition: transform var(--d-hover) var(--ease-out); }
  .card:hover .lg { transform: scale(1.05); }
  .wcard { transition: transform var(--d-hover) var(--ease-out), border-color var(--d-hover) ease; }
  .wcard:hover { transform: translateY(-2px); }
  .btn-amber:hover, .btn-ghost:hover, .btn-line:hover { transform: translateY(-2px); }
  .morebtn:hover { transform: translateY(-2px); }
  /* 同列其他卡片降對比，聚焦當前 */
  .rank:has(.card:hover) .card:not(:hover) { opacity: .84; }
  .rank .card { transition: transform var(--d-hover) var(--ease-out), opacity var(--d-hover) ease; }
  /* 底線生長：內文連結 */
  .prose a:not(.btn):not(.mini)::after {
    content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
    background:var(--amber-d); transform:scaleX(0); transform-origin:right;
    transition: transform var(--d-hover) var(--ease-out);
  }
  .prose a:not(.btn):not(.mini):hover::after { transform:scaleX(1); transform-origin:left; }
}
.prose a:not(.btn):not(.mini) { position: relative; }

/* ── 分頁切換：transition 而非 keyframes（可中斷，標準 6）── */
.panel { opacity: 0; transform: translateY(6px); transition: opacity var(--d-panel) var(--ease-out), transform var(--d-panel) var(--ease-out); }
#t-line:checked ~ #p-line, #t-cash:checked ~ #p-cash, #t-credit:checked ~ #p-credit { opacity: 1; transform: none; }

/* ── 摺疊展開：控制在 260ms ── */
.morewrap { transition: grid-template-rows 260ms var(--ease-out), margin-top 260ms var(--ease-out); }

/* ── 實測快報跑馬：constant motion → linear（標準）── */
.ticker { background:var(--navy-2); color:#cfd8e6; overflow:hidden; white-space:nowrap;
  border-bottom:1px solid #2c3f61; font-size:var(--t-xs); letter-spacing:var(--ls-1); }
.ticker-in { display:inline-flex; gap:var(--sp-8); padding:var(--sp-1) var(--sp-0);  }
.ticker b { color:var(--amber); font-weight:700; }
.ticker .tk-lb { position:sticky; left:0; z-index:2; background:var(--red); color:#fff;
  font-weight:800; padding:var(--sp-1) var(--sp-3); margin-right:var(--sp-4); letter-spacing:var(--ls-2); font-size:var(--t-xs); }
@media (prefers-reduced-motion: no-preference) {
  .ticker-in { animation: tk 52s linear infinite; }
  .ticker:hover .ticker-in { animation-play-state: paused; }
}
@keyframes tk { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 滾動揭示：稀有、單次、只動 transform/opacity ── */
/* scroll-driven 揭示已移除：改用 IntersectionObserver（見 ==BEGIN:reveal2==）*/

/* ── 減少動態：保留 opacity，移除位移（標準 8：gentler, not zero）── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color, box-shadow !important;
    transition-duration: 160ms !important;
  }
  #t-line:checked ~ #p-line, #t-cash:checked ~ #p-cash, #t-credit:checked ~ #p-credit { opacity: 1; transform: none; }
}

/* ── 修1：分頁淡入補啟動條件（原本宣告了但 display:none 讓 transition 不觸發）── */
.panel{
  transition: opacity var(--d-panel) var(--ease-out),
              transform var(--d-panel) var(--ease-out);
}
/* display 過渡只給「進場」的面板；離場面板立即隱藏，避免兩份同時佔位 */
#t-line:checked ~ #p-line,
#t-cash:checked ~ #p-cash,
#t-credit:checked ~ #p-credit{
  transition: opacity var(--d-panel) var(--ease-out),
              transform var(--d-panel) var(--ease-out),
              display var(--d-panel) allow-discrete;
}
@starting-style{
  #t-line:checked ~ #p-line,
  #t-cash:checked ~ #p-cash,
  #t-credit:checked ~ #p-credit{ opacity:0; transform:translateY(6px); }
}

/* ── 修2：搜尋結果容器進出場（全站唯一大面積內容置換，需橋接）── */
.sres{
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              display 200ms allow-discrete;
}
@starting-style{ .sres{ opacity:0; transform:translateY(-6px); } }
.sres[hidden]{ opacity:0; transform:translateY(-6px); }

/* ── 修3：跨頁轉場指定共用元素（固定框架不該跟著淡掉）── */
header  { view-transition-name: site-header; }
.ticker { view-transition-name: site-ticker; }
.float  { view-transition-name: site-float;  }
footer  { view-transition-name: site-footer; }
::view-transition-group(site-header),
::view-transition-group(site-ticker),
::view-transition-group(site-float),
::view-transition-group(site-footer){ animation: none; }
::view-transition-old(root){ animation-duration:120ms; animation-timing-function: var(--ease-out); }
::view-transition-new(root){ animation-duration:200ms; animation-timing-function: var(--ease-out); }

/* ── 修4：sticky header 捲動狀態（scroll-linked，只動 opacity）── */
header::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
  pointer-events:none; opacity:0;
  background:linear-gradient(to bottom, rgba(20,33,61,.10), rgba(20,33,61,0));
}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: scroll()){
    @keyframes hdrLift{ to{ opacity:1 } }
    header::after{
      animation: hdrLift auto linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90px;
    }
  }
}

/* ── 修5：FAQ 展開由硬彈改為過渡（沿用 .morewrap 的 260ms 語彙）── */
:root{ interpolate-size: allow-keywords; }
.faq details::details-content{
  block-size:0; overflow:hidden; opacity:0;
  transition: block-size 260ms var(--ease-out),
              opacity 180ms var(--ease-out),
              content-visibility 260ms allow-discrete;
}
.faq details[open]::details-content{ block-size:auto; opacity:1; }

/* ── 修6：sticky header 錨點偏移（原本跳段會被 header 蓋住）── */
section[id], [id]{ scroll-margin-top: 84px; }

/* ── reduced-motion：改為 gentler 而非 zero ── */
@media (prefers-reduced-motion: reduce){
  .sres{ transition: opacity 120ms linear, display 120ms allow-discrete !important; }
  .sres, .sres[hidden]{ transform:none !important; }
  header::after{ opacity:1; }
  .ticker-in{ animation:none !important; transform:none !important; }
}

/* 006 focus */
.srch-i{transition:border-color var(--d-hover) var(--ease-out),box-shadow var(--d-hover) var(--ease-out),transform var(--d-hover) var(--ease-out)}
.srch-i:focus-within{transform:translateY(-1px)}
/* ==END:motion== */

/* ==BEGIN:fixes== */
/* LINE 轉換區 */
.linecta{display:grid;grid-template-columns:1.4fr .9fr;gap:var(--sp-7);align-items:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--paper);
  border-radius:var(--r-lg);padding:var(--sp-7) var(--sp-7)}
.linecta .eyebrow{color:var(--amber)}
.linecta h2{color:var(--paper);font-size:var(--t-lg);margin:var(--sp-2) var(--sp-0) var(--sp-3);line-height:var(--lh-tight)}
.linecta p{color:#c9d2e0;margin:var(--sp-0) var(--sp-0) var(--sp-3);font-size:var(--t-sm);line-height:var(--lh-base)}
.lc-pts{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--t-sm);color:#dbe3ee}
.lc-act{text-align:center}
.lc-main{width:100%;justify-content:center;font-size:var(--t-base);padding:var(--sp-4) var(--sp-6)}
.lc-note{margin:var(--sp-3) var(--sp-0) var(--sp-0);font-size:var(--t-xs);color:#8b96a8}
@media(max-width:760px){.linecta{grid-template-columns:1fr;padding:var(--sp-6) var(--sp-5)}}

/* 停用態 CTA（無官方網域可導） */
.btn-off{background:var(--paper-2);color:#a9a294;cursor:default;box-shadow:none}
.btn-off:hover{transform:none!important}

/* ── a11y：焦點可見（原本全站 0 個 :focus-visible）── */
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:var(--r-md)}
#t-line:focus-visible~.tablist label[for=t-line],
#t-cash:focus-visible~.tablist label[for=t-cash],
#t-credit:focus-visible~.tablist label[for=t-credit],
.moretoggle:focus-visible~.morebtn{outline:2px solid var(--navy);outline-offset:3px}
.faq summary:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:var(--r-md)}

/* ── 字體排印：CJK 校準（依 apple-design §15）── */
/* 死碼已移除：改由 ==BEGIN:scale== 統一宣告 */
@supports (text-spacing-trim: space-first){
  h1,h2,h3,body{text-spacing-trim:space-first}
}
@supports (text-autospace: normal){ body{text-autospace:normal} }
h1,h2,h3{text-wrap:balance}
.hero h1{line-height:var(--lh-none);letter-spacing:var(--ls-0)}
.sec-head h2{line-height:var(--lh-none);letter-spacing:var(--ls-0)}
.card .name{line-height:var(--lh-tight);letter-spacing:0}
.tile h3,.flag h3,.wzh h3,.structrisk h3{line-height:var(--lh-ui);letter-spacing:var(--ls-0)}
/* 數字等寬對齊（襯線 oldstyle 數字會高低不齊）*/
.rk,.score,.rd-h b,.sres-h b,.ticker b,.stat b,.tablist label b{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
/* CJK 不該套拉丁的正 tracking */
.eyebrow{letter-spacing:var(--ls-1);text-transform:none}
footer h4{letter-spacing:var(--ls-1);text-transform:none}
.badge,.tk-lb{letter-spacing:var(--ls-1);text-transform:none}
.brand .bn small{letter-spacing:var(--ls-3)}
.hero p.lead{max-width:28em}
.wzh p{max-width:40em}

/* ── 其他偏好訊號（原本只處理 reduced-motion）── */
@media (prefers-reduced-transparency: reduce){
  header{background:var(--paper);backdrop-filter:none}
  body::before{display:none}
}
@media (prefers-contrast: more){
  .card,.tile,.flag,.wcard{border-color:var(--navy)}
  .meta,.card .ft,.tile p{color:#3a3a3a}
}
/* ==END:fixes== */

/* site search */
.srchbox{margin:var(--sp-0) var(--sp-0) var(--sp-4)}
.srch-i{display:flex;align-items:center;gap:var(--sp-2);background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);transition:border-color .18s,box-shadow .18s}
.srch-i:focus-within{border-color:var(--navy);box-shadow:0 6px 20px rgba(20,33,61,.10)}
.srch-i svg{color:var(--muted);flex:0 0 auto}
.srch-i input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:var(--t-sm);
  color:var(--ink);min-width:0}
.srch-i input::placeholder{color:#a49d8c}
.srch-i input::-webkit-search-cancel-button{display:none}
#qx{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--t-sm);
  padding:var(--sp-05) var(--sp-1);display:none}
#qx:hover{color:var(--navy)}
.srch-i.has #qx{display:block}
.srch-hint{margin:var(--sp-2) var(--sp-05) var(--sp-0);font-size:var(--t-xs);color:var(--muted)}
.sres{margin:var(--sp-0) var(--sp-0) var(--sp-5)}
.sres-h{font-size:var(--t-sm);color:var(--muted);font-weight:600;margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.sres-h b{font-family:var(--serif);color:var(--navy);font-size:var(--t-base)}
.sres-h span{color:var(--navy)}
.sres-none{font-size:var(--t-sm);color:var(--muted);background:#fff;border:1px dashed var(--line);
  border-radius:var(--r-md);padding:var(--sp-4);text-align:center;margin:0}
.catpill{font-family:var(--sans);font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-1);
  padding:var(--sp-05) var(--sp-2);border-radius:var(--r-sm);background:var(--paper-2);color:var(--muted);margin-left:var(--sp-1)}
.catpill.c-line{background:#e8f0e6;color:#4a6b45}
.catpill.c-cash{background:#eaf0f8;color:#42597c}
.catpill.c-credit{background:#f6ece8;color:#8a5b4d}

/* ==BEGIN:motion3== */
/* ========== 建構型動效（animate skill）==========
   Gate：分頁切換/搜尋=Occasional｜卡片 hover=幾十次/天走協同不走幅度
   工具：CSS transition + CSS animation（離主執行緒）｜屬性：transform/opacity only  */

@media (prefers-reduced-motion: no-preference){

  /* ── 1. 分頁切換：前 10 名串接進場（display:none→block 會重播）── */
  @keyframes cascadeIn{ from{ opacity:0; transform:translateY(12px) } }
  .panel > .rank > .card{
    animation: cascadeIn 300ms var(--ease-out) both;
  }
  .panel > .rank > .card:nth-child(1){ animation-delay:0ms }
  .panel > .rank > .card:nth-child(2){ animation-delay:35ms }
  .panel > .rank > .card:nth-child(3){ animation-delay:70ms }
  .panel > .rank > .card:nth-child(4){ animation-delay:105ms }
  .panel > .rank > .card:nth-child(5){ animation-delay:140ms }
  .panel > .rank > .card:nth-child(6){ animation-delay:170ms }
  .panel > .rank > .card:nth-child(7){ animation-delay:195ms }
  .panel > .rank > .card:nth-child(8){ animation-delay:215ms }
  .panel > .rank > .card:nth-child(9){ animation-delay:230ms }
  .panel > .rank > .card:nth-child(n+10){ animation-delay:245ms }

  /* ── 2. 搜尋結果：短促串接（結果重建時自然重播）── */
  #sres-list > .card, #sres-list > .wcard{
    animation: cascadeIn 260ms var(--ease-out) both;
  }
  #sres-list > :nth-child(1){ animation-delay:0ms }
  #sres-list > :nth-child(2){ animation-delay:25ms }
  #sres-list > :nth-child(3){ animation-delay:50ms }
  #sres-list > :nth-child(4){ animation-delay:70ms }
  #sres-list > :nth-child(5){ animation-delay:85ms }
  #sres-list > :nth-child(6){ animation-delay:95ms }
  #sres-list > :nth-child(n+7){ animation-delay:105ms }

  /* ── 3. 避雷名單：嚴重警示卡進場比一般卡明顯（單次，非常駐）── */
  @keyframes sevIn{ from{ opacity:0; transform:translateY(14px) scale(.985) } }
  .warnzone .wcard.wsev{ animation: sevIn 340ms var(--ease-out) both }
  .warnzone .wcard.wsev:nth-of-type(1){ animation-delay:0ms }
  .warnzone .wcard.wsev:nth-of-type(2){ animation-delay:60ms }
  .warnzone .wcard.wsev:nth-of-type(3){ animation-delay:110ms }
  .warnzone .wcard.wsev:nth-of-type(n+4){ animation-delay:150ms }
}

/* ── 4. 卡片 hover：協同回饋（不是加大幅度，是多個元素同步反應）── */
.card .rk, .card .score, .card .lg, .card .stars{
  transition: transform var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out);
}
.card{ transition: transform var(--d-hover) var(--ease-out),
                   border-color var(--d-hover) var(--ease-out) }

@media (hover: hover) and (pointer: fine){
  .card:hover{ transform: translateY(-3px); border-color: var(--amber) }
  .card:hover .rk{ transform: translateY(-2px); color: var(--amber-d) }
  .card:hover .lg{ transform: translateY(-2px) scale(1.06) }
  .card:hover .score{ transform: scale(1.08) }
  .card:hover .stars{ transform: scale(1.04) }
  .card:hover::after{ opacity:1 }

  /* 避雷卡：hover 時警示更強 */
  .wcard{ transition: transform var(--d-hover) var(--ease-out),
                      border-left-color var(--d-hover) var(--ease-out) }
  .wcard:hover{ transform: translateY(-2px) }
  .wcard .lg-w{ transition: filter var(--d-hover) var(--ease-out), opacity var(--d-hover) var(--ease-out) }
  .wcard:hover .lg-w{ filter: grayscale(0); opacity:1 }

  /* 分頁按鈕：hover 微抬 */
  .tablist label{ transition: transform var(--d-press) var(--ease-out),
                              background-color var(--d-hover) var(--ease-out),
                              color var(--d-hover) var(--ease-out) }
  .tablist label:hover{ transform: translateY(-1px) }
}

/* ── 減少動態：保留淡入、移除位移 ── */
@media (prefers-reduced-motion: reduce){
  .panel > .rank > .card,
  #sres-list > .card, #sres-list > .wcard,
  .warnzone .wcard.wsev{ animation: none !important }
  .card:hover, .card:hover .rk, .card:hover .lg,
  .card:hover .score, .card:hover .stars,
  .wcard:hover, .tablist label:hover{ transform: none !important }
}
/* ==END:motion3== */



/* ==BEGIN:motion4== */
/* ========== 第二批動效 ==========
   A 摺疊展開串接｜B 商標載入淡入｜C 箭頭方向｜D FAQ 按壓回饋      */

@media (prefers-reduced-motion: no-preference){

  /* ── A. 摺疊展開：新出現的 18–21 張卡串接（原本是整批瞬間出現）── */
  .moretoggle:checked ~ .morewrap .card{
    animation: cascadeIn 300ms var(--ease-out) both;
  }
  .moretoggle:checked ~ .morewrap .card:nth-child(1){ animation-delay:60ms }
  .moretoggle:checked ~ .morewrap .card:nth-child(2){ animation-delay:95ms }
  .moretoggle:checked ~ .morewrap .card:nth-child(3){ animation-delay:125ms }
  .moretoggle:checked ~ .morewrap .card:nth-child(4){ animation-delay:150ms }
  .moretoggle:checked ~ .morewrap .card:nth-child(5){ animation-delay:170ms }
  .moretoggle:checked ~ .morewrap .card:nth-child(6){ animation-delay:185ms }
  .moretoggle:checked ~ .morewrap .card:nth-child(n+7){ animation-delay:200ms }

  /* ── B. 商標載入淡入：146 張 lazy-load 圖片原本是「啪」地跳出來 ── */
  @keyframes logoIn{ from{ opacity:0; transform:scale(.9) } }
  .card .lg, .wcard .lg-w{
    animation: logoIn 240ms var(--ease-out) both;
  }
}

/* ── C. 摺疊按鈕箭頭：用真箭頭並指出方向（取代文字 ▾▴）── */
.morebtn .mo::after, .morebtn .mc::after{
  content:""; display:inline-block; width:.5em; height:.5em; margin-left:.45em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg) translateY(-.12em);
  transition: transform var(--d-panel) var(--ease-out);
}
.moretoggle:checked ~ .morebtn .mc::after{
  transform: rotate(-135deg) translateY(-.02em);
}

/* ── D. FAQ：按壓即回饋（Apple §1 回饋在 pointer-down）── */
.faq summary{
  border-radius:var(--r-md); margin-inline:-8px; padding-inline:var(--sp-2);
  transition: background-color var(--d-press) var(--ease-out);
}
.faq summary:active{ background: var(--paper-2) }
.faq summary::after{ transition: transform var(--d-panel) var(--ease-out) }

@media (prefers-reduced-motion: reduce){
  .moretoggle:checked ~ .morewrap .card,
  .card .lg, .wcard .lg-w{ animation:none !important }
  .morebtn .mo::after, .morebtn .mc::after{ transition:none !important }
}
/* ==END:motion4== */

/* ==BEGIN:serif== 中文襯線（自載子集，1145 字 / 228KB / 僅 700 字重）== */
@font-face{
  font-family:"NotoSerifTCSub";
  src:url("../fonts/NotoSerifTC-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  /* 只宣告子集覆蓋的範圍，超出的字自動落回 fallback，不會整段換字 */
  unicode-range:U+0020-007E,U+00A0,U+2000-206F,U+3000-303F,U+4E00-9FFF,U+FF00-FFEF;
}
/* 禁止合成字重／斜體：CJK 襯線被瀏覽器假粗體會糊掉 */
[style*="--serif"],.bn,.rk,.name,.n,.x,.fbrand,h1,h2,h3{font-synthesis:none}
/* ==END:serif== */















/* ==BEGIN:rhythm== Step6 節奏 + Step7 去模板化 == */

/* ── Step 6：依語意分組的區塊節奏（取代全站統一 48/48）──
   區塊間距序列：144 · 64 · 64 · 144 · 128 · 64 · 144
   緊 = 同一群組內；鬆 = 主題切換。均勻只會讀成一面牆。            */
#rank        { padding-block: var(--sp-12) var(--sp-12); }   /* 80/80  主角 */
#compare     { padding-block: var(--sp-11) var(--sp-7);  }   /* 64/32  群組起 */
#method      { padding-block: var(--sp-7)  var(--sp-7);  }   /* 32/32  群組中 */
#fraud       { padding-block: var(--sp-7)  var(--sp-12); }   /* 32/80  群組結 */
#faq         { padding-block: var(--sp-11) var(--sp-11); }   /* 64/64 */
#author      { padding-block: var(--sp-11) var(--sp-7);  }   /* 64/32  信任尾起 */
#responsible { padding-block: var(--sp-7)  var(--sp-11); }   /* 32/64  信任尾結 */
#line-heshen { padding-block: var(--sp-12) var(--sp-12); }   /* 80/80  轉換點 */

/* 內頁：主要區塊之間也需要節奏，不能全部等距 */
.prose > h2   { margin-top: var(--sp-11); }
.prose > h2:first-child { margin-top: var(--sp-0); }

/* ── Step 7b：首屏四卡 → 細線分隔的編輯式橫帶 ──
   移除 4×(白底 + 框 + 圓角) = 12 層裝飾，換成一組髮絲線。      */
.eeat{
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--sp-0);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: var(--sp-6) var(--sp-0) var(--sp-0);
}
.eeat .it{
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5);
}
.eeat .it:first-child{ border-left: none; padding-left: var(--sp-0); }
@media (max-width: 760px){
  .eeat{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .eeat .it:nth-child(odd){ border-left: none; padding-left: var(--sp-0); }
  .eeat .it:nth-child(n+3){ border-top: 1px solid var(--line); }
}
@media (max-width: 420px){
  .eeat{ grid-template-columns: minmax(0,1fr); }
  .eeat .it{ border-left: none; padding-left: var(--sp-0); }
  .eeat .it + .it{ border-top: 1px solid var(--line); }
}

/* ── Step 7a：浮動 LINE 鈕捲過 hero 才淡入 ──
   失效安全設計：CSS 預設「永遠可見」。只有行內 JS 成功掛上 <html class="fab-armed">
   之後才允許隱藏。無 JS / JS 失敗 / 舊瀏覽器 → 鈕維持可見，CTA 絕不會消失。
   （不用 scroll-driven timeline：實測四次結果不一致，而失敗代價是掉一個轉換點）*/
/* 桌機：刪除。sticky header 已有「看排行榜」CTA、頁尾有 #line-heshen 轉換區，
   浮動鈕是第三個搶同一件事的 CTA——冗餘，而且吃掉首屏金色配額又蓋住內容。 */
@media (min-width: 761px){
  .float{ display: none; }
}
/* 手機：保留。手機沒有 sticky CTA，浮動鈕在這裡才有價值。
   加上安全區內距，避免蓋到 iOS 底部手勢列。 */
@media (max-width: 760px){
  .float{ bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sp-4)); }
}
.fab-armed{}  /* 保留鉤子：未來若要做「捲過才出現」，CSS 已就位 */

/* ── 可點擊文字不得斷成兩行（實測 320px 時 header CTA 會斷）──
   按鈕文字斷行會破壞點擊目標的可讀性與可預測性。               */
.btn, .menu a, .tablist label{ white-space: nowrap; }
@media (max-width: 460px){
  header .btn{ padding-inline: var(--sp-3); font-size: var(--t-xs); }
}

/* 避雷卡的評測連結 */
.wact{margin-top:var(--sp-2)}
.wact .mini{font-size:var(--t-xs);color:var(--red);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(164,67,58,.35);padding-bottom:1px}
.wact .mini:hover{border-bottom-color:var(--red)}
/* ==END:rhythm== */

/* ==BEGIN:reveal2== 一次性進場揭示（失效安全）==
   .rv 這個 class 由行內 JS 立刻加上；沒有 JS 就沒有 .rv，內容全部照常可見。 */
@media (prefers-reduced-motion: no-preference){
  .rv .card,.wcard,.tile,.flag,.eeat .it,.structrisk,.hub,.rg,.kbio{
    opacity:0; transform:translateY(14px);
    transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }
  .rv .card.rv-in,.wcard.rv-in,.tile.rv-in,.flag.rv-in,.eeat .it.rv-in,.structrisk.rv-in,.hub.rv-in,.rg.rv-in,.kbio.rv-in{ opacity:1; transform:none }
  .rv .rd-bar i{ transform:scaleX(0); transform-origin:left center;
    transition: transform 640ms var(--ease-out) }
  .rv .rd-bar.rv-in i{ transform:scaleX(1) }
}
@media (prefers-reduced-motion: reduce){
  .card,.wcard,.tile,.flag,.eeat .it,.structrisk,.hub,.rg,.kbio{ opacity:1 !important; transform:none !important }
  .rd-bar i{ transform:none !important }
}
/* ==END:reveal2== */