/* ============================================================
   真機實測 REALME TW AC — realmetwac.com.tw
   視覺系統：平面高飽和色塊 × 描邊鏤空數字 × 試算表介面
   ============================================================ */

:root {
  --lime:  #c9d178;          /* matcha — brand green, desaturated */
  --lime-tint: #eceedb;      /* soft matcha wash for large surfaces */
  --blue:  #3e4c9e;          /* muted indigo */
  --blue-tint: #e9ebf4;
  --pink:  #a34d66;          /* muted rose */
  --pink-lt: #d796aa;        /* rose for text on dark surfaces */
  --pink-tint: #f3e7eb;
  --ink:   #23211c;          /* warm ink */
  --paper: #f6f4ee;          /* warm oat paper */
  --teal:  #3e8f84;
  --orange:#c2703f;

  --font-disp: "Archivo Black", "Noto Sans TC", sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "IBM Plex Mono", "Noto Sans TC", monospace;

  --ease: cubic-bezier(.7, 0, .3, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --hard: 5px 5px 0 var(--ink);
  --hard-sm: 3px 3px 0 var(--ink);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--lime); color: var(--ink); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.site-head :focus-visible, .section-ink :focus-visible, .site-foot :focus-visible, .subscribe :focus-visible, .mobile-nav :focus-visible { outline-color: var(--lime); }

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 字型階層 ---------- */
.disp {
  font-family: var(--font-disp);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .01em;
}
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.outline-ink {
  color: transparent;
  -webkit-text-stroke: 2px rgba(35,33,28,.5);
}
.outline-lime {
  color: transparent;
  -webkit-text-stroke: 2px var(--lime);
}
.outline-paper {
  color: transparent;
  -webkit-text-stroke: 2px rgba(246,244,238,.6);
}

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--blue); color: #fff;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(0,0) scale(.98); box-shadow: 1px 1px 0 var(--ink); transition-duration: .12s; }
.btn-pink  { background: var(--pink); }
.btn-lime  { background: var(--lime); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--lime); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

/* ---------- 頂部快訊跑馬燈 ---------- */
.ticker {
  background: var(--ink);
  color: rgba(246,244,238,.85);
  overflow: hidden;
  border-bottom: 1px solid rgba(246,244,238,.14);
  position: relative;
  z-index: 60;
}
.ticker-track {
  display: flex; width: max-content;
  animation: marquee 60s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .06em;
  padding: 9px 0;
  white-space: nowrap;
}
.ticker-item::after {
  content: "◆";
  margin: 0 28px;
  color: rgba(201,209,120,.75);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- 站首 ---------- */
.site-head {
  background: var(--ink);
  color: var(--paper);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 2px solid var(--ink);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark {
  width: 44px; height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.brand:hover .brand-mark { transform: rotate(-8deg); }
.brand-name { font-family: var(--font-disp); font-size: 17px; letter-spacing: .04em; line-height: 1.1; }
.brand-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .22em; color: rgba(246,244,238,.72); text-transform: uppercase; }

.main-nav { display: flex; gap: 4px; margin-left: auto; }
.main-nav a {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .12em;
  padding: 8px 14px;
  color: rgba(246,244,238,.78);
  position: relative;
  transition: color .2s var(--ease);
}
.main-nav a::before {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--lime);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav a:hover { color: #fff; }
.main-nav a:hover::before { transform: scaleX(1); }
.main-nav a.active { color: var(--lime); }
.main-nav a.active::before { transform: scaleX(1); }

.head-cta {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  background: var(--lime); color: var(--ink);
  border: none; padding: 10px 18px; border-radius: 999px;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.head-cta:hover { transform: translateY(-2px); background: #fff; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none; border: 2px solid var(--paper);
  width: 42px; height: 42px; border-radius: 8px;
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 9px; right: 9px; height: 2px;
  background: var(--paper); transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span { top: 50%; }
.nav-toggle span::before, .nav-toggle span::after { left: 0; right: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); background: var(--paper); }
body.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); background: var(--paper); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 45;
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  transform: translateY(-102%);
  transition: transform .55s var(--ease);
}
body.nav-open .mobile-nav { transform: translateY(0); }
.mobile-nav a {
  font-family: var(--font-disp);
  font-size: clamp(38px, 9vw, 64px);
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 2px solid var(--ink);
  display: flex; align-items: baseline; gap: 16px;
}
.mobile-nav a .idx { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; }
.mobile-nav a:hover { color: var(--blue); }
.mobile-nav a:active { color: var(--blue); }
.mobile-nav .m-sub { margin-top: 26px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; }

/* ---------- Hero ---------- */
/* Hero 要在任何螢幕都「一頁看完」：ticker 41px + sticky 站首 70px = 111px，
   剩下的視窗高度全是 hero 的預算。所以 hero 改成 flex column——.wrap 吃掉
   可用空間、跑馬燈固定收在最底——而且內部每一個尺寸都用 min(vw, vh) 夾住：
   螢幕矮的時候縮的是高度方向，不是等寬度縮到看不見。
   用 svh 不用 vh：手機網址列展開時 vh 會偏大，那正是會爆版的那一刻。 */
.hero {
  --head-h: 111px;
  background: var(--lime);
  border-bottom: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--head-h));
  min-height: calc(100svh - var(--head-h));
  padding: clamp(24px, 5.5vh, 84px) 0 0;
}
/* ---------- Hero 背景：評測室校正圖 ----------
   原本這裡是一行鏤空巨字「REAL 實測」。Archivo Black 沒有中文字身，「實測」
   會靜靜掉回 Noto Sans TC——兩套完全不同骨架的字，卻共用同一條 2px 描邊，
   放大到 300px 就露餡：拉丁字母又寬又肥，中文卻是細瘦的黑體，看起來就是怪。
   與其硬修字，不如換一套不靠字的背景語言：方格紙 + 一條會自己畫出來的量測
   曲線。這才是「47 項檢測」該有的樣子，而且永遠不會有字體問題。 */
.hero-lab { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* 方格紙：30px 細格 + 150px 粗格，上下用遮罩收掉，不去咬標題 */
.lab-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(35,33,28,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35,33,28,.07) 1px, transparent 1px),
    linear-gradient(to right,  rgba(35,33,28,.13) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(35,33,28,.13) 1.5px, transparent 1.5px);
  background-size: 30px 30px, 30px 30px, 150px 150px, 150px 150px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 86%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 86%, transparent);
}

/* 圖表只佔 hero 下緣那一帶：標題跟內文是要讀的，不該有線從字上面穿過去。
   壓在腳邊反而更像儀器的記錄紙——內容站在上面，數據在下面跑。
   高度綁著寬度算，viewBox 的 2.5:1 在窄視窗才不會被拉成一排尖刺；
   路徑另外標了 pathLength="1000"，dasharray 就不受這個縮放影響。 */
.lab-plot { position: absolute; left: 0; right: 0; bottom: 0; height: min(62%, 40vw); }
.lab-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.lab-chart path { fill: none; }
.lab-ref { stroke: rgba(35,33,28,.22); stroke-width: 2; stroke-dasharray: 2 11; stroke-linecap: round; }
.lab-trace {
  stroke: rgba(35,33,28,.26);
  stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: labTrace 15s linear infinite;
}
/* 畫進來（0→46%）、停一下、再從頭抹掉（60→100%）。頭尾都是「看不見」的
   狀態，所以循環接點不會有跳格。 */
@keyframes labTrace {
  0%, 2%   { stroke-dashoffset: 1000; }
  46%, 60% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: -1000; }
}

/* 跟著筆尖跑的游標線，讓它讀起來像儀器正在即時記錄 */
.lab-cursor {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(35,33,28,.34) 26%, rgba(35,33,28,.34) 80%, transparent);
  animation: labCursor 15s linear infinite;
}
/* 兩趟都要有筆尖：第一趟畫線（實），第二趟抹線（虛一點）。
   52% 那格用 steps(1) 讓它在看不見的時候瞬移回左邊，才不會拉出一條回程線。 */
@keyframes labCursor {
  0%, 2%  { transform: translateX(0);      opacity: 0; }
  7%, 42% { opacity: .9; }
  46%     { transform: translateX(100vw);  opacity: .9; }
  52%     { transform: translateX(100vw);  opacity: 0; animation-timing-function: steps(1, end); }
  60%     { transform: translateX(0);      opacity: 0; }
  64%, 94%{ opacity: .5; }
  100%    { transform: translateX(100vw);  opacity: 0; }
}

/* 製圖表格邊上的那行註記，直排在左側留白，只在夠寬的視窗出現 */
.lab-fig {
  position: absolute; left: 18px; top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(35,33,28,.32);
}
@media (max-width: 1180px) { .lab-fig { display: none; } }
/* 手機版 hero 是直的一長條，下緣整片被照片壓住，圖表帶改停在按鈕與數據盒後面 */
@media (max-width: 860px) { .lab-plot { bottom: auto; top: 30%; height: 52vw; } }

.hero .wrap {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  /* .hero 的下內距要留給跑馬燈（它是 .hero 的直接子元素），所以收尾的空間
     只能加在 .wrap 上。沒有這段時數據卡底部離跑馬燈只剩 5px——剛好等於
     卡片 5px 硬陰影的位移量，陰影整條被壓進黑色燈條裡，看起來就是卡片
     插進跑馬燈。 */
  padding-bottom: clamp(26px, 4.4vh, 68px);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  border: 2px solid var(--ink); color: var(--ink);
  padding: 4px 14px;
  font-family: var(--font-mono); font-size: clamp(10.5px, 1.3vh, 12px); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: clamp(12px, 2.2vh, 26px);
}
.hero-kicker .dot { width: 8px; height: 8px; background: var(--pink); border-radius: 50%; animation: blink 2.2s infinite; }
@keyframes blink { 50% { opacity: .4; } }

.hero-title {
  font-size: clamp(34px, min(6.6vw, 8.6vh), 84px);
  margin-bottom: clamp(12px, 2.2vh, 24px);
}
/* 「玩真的」原本是整塊黑底反白。上面 kicker 一塊、下面內文兩塊、照片上再
   三張貼紙，同一個畫面塞了七塊色塊。這裡只留一條底線：重音還在，噪音少一塊。*/
.hero-title .hl {
  position: relative;
  display: inline-block;
  padding-bottom: .08em;
}
.hero-title .hl::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: .085em;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  animation: hlDraw .85s .45s var(--ease-out) forwards;
}
@keyframes hlDraw { to { transform: scaleX(1); } }
.hero-sub {
  max-width: 46ch;
  font-size: clamp(14px, min(1.15vw, 1.9vh), 16.5px);
  font-weight: 500;
  margin-bottom: clamp(14px, 2.8vh, 34px);
}
.hero-sub b { font-weight: 700; border-bottom: 2px solid rgba(35,33,28,.38); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(16px, 3.2vh, 44px); }

.hero-stats {
  display: flex; gap: 0;
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: var(--hard);
  width: fit-content;
}
.hero-stat { padding: clamp(9px, 1.4vh, 14px) clamp(13px, 1.5vw, 24px); border-right: 2px solid var(--ink); }
.hero-stat:last-child { border-right: none; }
.hero-stat .n { font-family: var(--font-disp); font-size: clamp(21px, min(2vw, 3vh), 30px); line-height: 1; }
.hero-stat .l { font-family: var(--font-mono); font-size: clamp(9px, 1.1vh, 10.5px); letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-top: clamp(3px, .6vh, 6px); }

/* Hero 手機舞台 */
/* 收尾距離改由 .hero .wrap 統一負責，這裡只留一點餘裕給 -2deg 旋轉與硬陰影的溢出 */
.hero-stage { position: relative; display: grid; place-items: center; padding-bottom: clamp(10px, 1.6vh, 24px); }
/* 照片是 4/5，高 = 寬 x 1.25，所以用 42vh 卡寬度等於把高度壓在 52.5vh 以內 */
.hero-stage .shot { width: min(100%, 430px, 42vh); transform: rotate(-2deg); }
.sticker {
  position: absolute;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 12px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.sticker-1 { top: 12%; left: 2%; background: var(--pink); color: #fff; transform: rotate(-6deg); }
.sticker-2 { top: 40%; right: 0%; background: var(--paper); transform: rotate(4deg); }
.sticker-3 { bottom: 16%; left: 6%; background: var(--blue); color: #fff; transform: rotate(3deg); }

.hero-marquee {
  flex: 0 0 auto;
  border-top: 2px solid var(--ink);
  background: var(--ink); color: var(--lime);
  overflow: hidden;
}
.hero-marquee .ticker-track { animation-duration: 44s; }
.hero-marquee:hover .ticker-track { animation-play-state: paused; }
.hero-marquee .hm-item {
  font-family: var(--font-disp);
  font-size: clamp(15px, min(2.1vw, 2.7vh), 26px);
  padding: clamp(8px, 1.2vh, 14px) 0; white-space: nowrap;
}
.hero-marquee .hm-item::after {
  content: "✦";
  margin: 0 clamp(16px, 2vw, 30px);
  color: rgba(201,209,120,.55);
  -webkit-text-stroke: 0;
}

/* ---------- 實拍照片 ----------
   照片沿用全站的平面語言：粗描邊 + 硬陰影，
   像評測室貼上去的接觸印樣，而不是去背的產品圖。
   17 張照片調性不一，因此統一壓一點點飽和度收斂色調。 */
.shot {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--plate, var(--lime-tint));
  border: 2px solid var(--ink);
  overflow: hidden;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.94) contrast(1.03);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
/* 只在 JS 有跑時才淡入 —— 停用 JS 時照片必須直接看得到 */
.js .shot img:not([data-loaded]) { opacity: 0; }

/* 變體一律加 shot-- 前綴：.hero / .lead 這種裸類名會撞到區塊層的規則 */
.shot--sq   { aspect-ratio: 1 / 1; }
.shot--hero { aspect-ratio: 4 / 5; border-width: 3px; box-shadow: 8px 8px 0 var(--ink); }
.shot--lead { aspect-ratio: 4 / 3; border-width: 3px; box-shadow: var(--hard); }

/* 照片說明 —— 評測室檔案條 */
.shot-cap {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px;
  width: 100%;
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(35, 33, 28, .62);
}
.shot-cap b { color: var(--ink); font-weight: 600; letter-spacing: .14em; }
.section-ink .shot-cap, .shot-cap.on-ink { color: rgba(246, 244, 238, .6); }
.section-ink .shot-cap b, .shot-cap.on-ink b { color: var(--lime); }

/* 觸控裝置點一下就會觸發 hover，所以要擋掉 */
@media (hover: hover) and (pointer: fine) {
  .rcard:hover .shot img { transform: scale(1.04); }
}

/* 圖組 —— 關於頁的評測室情境 */
.shot-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}
.shot-strip .shot { aspect-ratio: 1 / 1; box-shadow: var(--hard-sm); }

/* ---------- 區塊系統 ---------- */
.section { padding: clamp(56px, 8vw, 110px) 0; }
.section-ink { background: var(--ink); color: var(--paper); }
.section-lime { background: var(--lime); }
.section-head {
  display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 40px);
  margin-bottom: clamp(34px, 5vw, 60px);
}
.section-idx {
  font-family: var(--font-disp);
  font-size: clamp(56px, 8vw, 120px);
  line-height: .9;
  flex-shrink: 0;
}
.section-title { font-size: clamp(30px, 4.6vw, 58px); }
.section-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.section-kicker::before { content: "▸ "; color: var(--pink); }
.section-ink .section-kicker::before { color: var(--pink-lt); }
.section-more { margin-left: auto; flex-shrink: 0; align-self: center; }

/* ---------- 評測卡片 ---------- */
.card-grid {
  display: grid;
  /* min() 讓 320px 視窗（內容區只有 280px）時軌道能縮到比 310px 窄，
     否則卡片會被切掉右邊——卡片放了照片之後特別明顯 */
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: clamp(18px, 2.6vw, 30px);
}
.rcard {
  background: #fff;
  border: 2px solid var(--ink);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rcard:hover { transform: translate(-3px,-3px); box-shadow: 4px 4px 0 var(--ink); }
.rcard-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.rcard-tier { background: var(--ink); color: var(--lime); padding: 3px 10px; }
/* 卡片照片 —— 滿版置頂，像真的評測站列表 */
.rcard-shot { position: relative; border-bottom: 2px solid var(--ink); }
.rcard-shot .shot { border: none; }
.rcard-body {
  padding: 18px 18px 16px;
  flex: 1;
}
.rcard-brand { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.rcard-name { font-family: var(--font-disp); font-size: 21px; line-height: 1.25; margin-bottom: 10px; }
.rcard-meta { font-family: var(--font-mono); font-size: 12px; color: rgba(35,33,28,.72); line-height: 1.7; }
.rcard-meta b { color: var(--pink); }
.rcard-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  border-top: 2px solid var(--ink);
  padding: 12px 18px;
}
/* 三個元素擠在窄卡片裡會把「看評測」折成兩行——可點擊的文字不能折行 */
.rcard-price { font-family: var(--font-disp); font-size: 19px; white-space: nowrap; }
.rcard-link { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.rcard:hover .rcard-link { color: var(--blue); }
.rcard-badge {
  position: absolute; top: -14px; right: 14px; z-index: 2;
  background: var(--pink); color: #fff;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  padding: 5px 12px;
  border: 2px solid var(--ink);
  transform: rotate(3deg);
}
.rcard-badge.lime { background: var(--lime); color: var(--ink); }

/* 評分徽章 */
.score-badge {
  background: var(--lime);
  border: 2px solid var(--ink);
  padding: 10px 14px 8px;
  text-align: center;
  min-width: 74px;
  box-shadow: 4px 4px 0 var(--ink);
}
.sb-num { font-family: var(--font-disp); font-size: 30px; line-height: 1; display: block; }
.sb-lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; display: block; margin-top: 5px; opacity: .78; }
.score-badge.blue { background: var(--blue); color: #fff; }
.score-badge.pink { background: var(--pink); color: #fff; }

/* ---------- 維度量表 ---------- */
.dims { display: grid; gap: 12px; }
.dim { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 14px; }
.dim-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; }
.dim-track { height: 14px; border: 2px solid var(--ink); background: #fff; position: relative; overflow: hidden; }
.dim-fill {
  position: absolute; inset: 0; width: 0;
  transition: width 1.1s var(--ease);
}
.dim-perf   { background: var(--blue); }
.dim-cam    { background: var(--pink); }
.dim-batt   { background: var(--lime); }
.dim-screen { background: var(--teal); }
.dim-value  { background: var(--orange); }
.dim-val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; text-align: right; }
.section-ink .dim-track { background: rgba(246,244,238,.08); border-color: rgba(246,244,238,.3); }

/* ---------- 排行榜（深色區） ---------- */
.rank-list { border-top: 2px solid rgba(246,244,238,.2); }
.rank-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  gap: clamp(14px, 3vw, 40px);
  align-items: center;
  padding: 22px clamp(10px, 2vw, 26px);
  border-bottom: 2px solid rgba(246,244,238,.2);
  transition: background .3s var(--ease), color .3s var(--ease);
  position: relative;
}
.rank-row:hover { background: rgba(246,244,238,.06); }
.rank-num {
  font-family: var(--font-disp);
  font-size: clamp(46px, 6.5vw, 84px);
  line-height: .95;
  color: transparent;
  -webkit-text-stroke: 2px rgba(246,244,238,.5);
  transition: -webkit-text-stroke-color .3s var(--ease);
}
.rank-row:hover .rank-num { -webkit-text-stroke-color: rgba(246,244,238,.95); }
.rank-first .rank-num { -webkit-text-stroke-color: var(--lime); }
.rank-name { font-family: var(--font-disp); font-size: clamp(19px, 2.4vw, 27px); line-height: 1.2; }
.rank-name small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .68; margin-top: 5px; font-weight: 400; }
.rank-reason { font-size: 13.5px; line-height: 1.65; opacity: .78; transition: opacity .3s var(--ease); }
.rank-row:hover .rank-reason { opacity: 1; }
.rank-score {
  font-family: var(--font-disp); font-size: clamp(24px, 3vw, 34px);
  background: var(--lime); color: var(--ink);
  border: 2px solid var(--ink);
  padding: 4px 14px;
}
.rank-price { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; }

/* 排行頁籤 */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4vw, 48px); }
.tab {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 20px;
  background: transparent; color: inherit;
  border: 2px solid currentColor;
  border-radius: 999px;
  transition: opacity .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  opacity: .7;
}
.tab:hover { opacity: 1; }
.tab.active { background: var(--lime); color: var(--ink); border-color: var(--lime); opacity: 1; }
.section:not(.section-ink) .tab.active { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

/* ---------- 試算表式評測總表 ---------- */
.dtable { border: 2px solid var(--ink); background: #fff; box-shadow: var(--hard); }
.dtable-head, .dtable-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1fr) 74px minmax(0, 1.5fr) 86px minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: center;
  padding: 13px 20px;
}
.dtable-head {
  background: var(--ink); color: rgba(246,244,238,.68);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
}
.dtable-body { }
.dtable-row {
  border-top: 1px solid rgba(35,33,28,.14);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), background .2s var(--ease);
}
.dtable-row.in { opacity: 1; transform: none; }
.dtable-body:hover .dtable-row { opacity: .55; }
.dtable-body .dtable-row:hover { opacity: 1; background: var(--lime-tint); }
.dt-no { font-family: var(--font-mono); font-size: 12px; opacity: .68; }
.dt-name {
  font-family: var(--font-disp); font-size: 16.5px;
  white-space: nowrap; overflow: hidden;
  mask-image: linear-gradient(90deg, #000 82%, transparent);
}
.dtable-row:hover .dt-name { animation: cellMarquee 3.2s linear infinite; mask-image: none; }
@keyframes cellMarquee { 0%,15% { transform: translateX(0); } 85%,100% { transform: translateX(calc(-100% + 26ch)); } }
.dt-brand { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.dt-tier { font-family: var(--font-mono); font-size: 11px; background: var(--ink); color: var(--lime); text-align: center; padding: 3px 0; }
.dt-chip { font-family: var(--font-mono); font-size: 11.5px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-score { font-family: var(--font-disp); font-size: 20px; }
.dt-price { font-family: var(--font-mono); font-size: 12.5px; }
.dt-date { font-family: var(--font-mono); font-size: 11.5px; opacity: .7; text-align: right; }

/* 篩選晶片 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  padding: 7px 16px;
  background: #fff; color: var(--ink);
  border: 2px solid var(--ink);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.chip:hover { transform: translate(-2px,-2px); box-shadow: var(--hard-sm); }
.chip:active { transform: none; box-shadow: none; transition-duration: .1s; }
.chip.active { background: var(--blue); color: #fff; }
.chip-group { margin-bottom: 8px; }
.chip-group .mono { display: block; margin-bottom: 10px; opacity: .5; }

/* ---------- 規格比較 ---------- */
.compare-slots {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-bottom: 34px;
}
.cslot { border: 2px solid var(--ink); background: #fff; padding: 18px; position: relative; }
.cslot .mono { opacity: .5; display: block; margin-bottom: 8px; }
.cslot select {
  width: 100%;
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  padding: 10px 12px;
  border: 2px solid var(--ink); background: var(--paper);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 13px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.cslot .cslot-phone { display: grid; place-items: center; padding: 20px 0 6px; min-height: 200px; align-content: center; gap: 14px; }
.cslot .cslot-score { position: absolute; top: -14px; right: 14px; }

.ctable { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: #fff; box-shadow: var(--hard); }
.ctable th, .ctable td {
  border: 1px solid rgba(35,33,28,.16);
  padding: 13px 16px;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
}
.ctable thead th {
  background: var(--ink); color: var(--paper);
  font-family: var(--font-disp); font-size: 15px;
}
.ctable tbody th {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--paper);
  width: 132px;
  color: rgba(35,33,28,.66);
}
.ctable td.win { background: var(--lime-tint); font-weight: 700; box-shadow: inset 3px 0 0 var(--lime); }
.ctable td .mono { letter-spacing: .04em; }
.ctable-note { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; opacity: .7; letter-spacing: .06em; }

/* ---------- 評測文章頁 ---------- */
.crumbs { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 30px; opacity: .72; }
.crumbs a:hover { color: var(--blue); }
.article-head { margin-bottom: clamp(36px, 5vw, 60px); }
.article-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.atag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 13px; border: 2px solid var(--ink);
}
.atag.fill { background: var(--ink); color: var(--lime); }
.article-title { font-size: clamp(36px, 6vw, 76px); margin-bottom: 18px; }
.article-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; opacity: .72; display: flex; gap: 26px; flex-wrap: wrap; }

.article-hero {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: stretch;
  margin-bottom: clamp(40px, 6vw, 70px);
}
.article-stage {
  background: var(--lime-tint);
  border: 2px solid var(--ink);
  box-shadow: var(--hard);
  display: grid; place-items: center;
  padding: 44px 20px;
  position: relative;
}
.article-stage .shot { width: 100%; }
.article-panel {
  border: 2px solid var(--ink); background: #fff;
  padding: clamp(22px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 24px;
}
.article-panel-top { display: flex; gap: 22px; align-items: center; }
.article-panel-top .score-badge { min-width: 104px; padding: 16px 18px 12px; }
.article-panel-top .sb-num { font-size: 46px; }
.ap-grade { font-family: var(--font-disp); font-size: 24px; }
.ap-grade small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; opacity: .55; margin-top: 4px; }

.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); margin-bottom: clamp(40px, 6vw, 70px); }
.pc { border: 2px solid var(--ink); padding: clamp(20px, 3vw, 30px); background: #fff; }
.pc-good { box-shadow: 6px 6px 0 var(--blue); }
.pc-bad  { box-shadow: 6px 6px 0 var(--pink); }
.pc h3 { font-family: var(--font-disp); font-size: 21px; margin-bottom: 16px; }
.pc-good h3 { color: var(--blue); }
.pc-bad h3 { color: var(--pink); }
.pc ul { list-style: none; display: grid; gap: 12px; }
.pc li { padding-left: 26px; position: relative; font-size: 14.5px; line-height: 1.7; }
.pc-good li::before { content: "＋"; position: absolute; left: 0; color: var(--blue); font-weight: 900; }
.pc-bad li::before { content: "－"; position: absolute; left: 0; color: var(--pink); font-weight: 900; }

.verdict {
  border: 2px solid var(--ink);
  background: var(--lime-tint);
  padding: clamp(26px, 4vw, 48px);
  box-shadow: var(--hard);
  margin-bottom: clamp(44px, 6vw, 72px);
  position: relative;
}
.verdict::before {
  content: "最終判定 VERDICT";
  position: absolute; top: -15px; left: 26px;
  background: var(--ink); color: var(--lime);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  padding: 5px 14px;
}
.verdict p { font-size: clamp(16px, 2vw, 19px); font-weight: 500; line-height: 1.9; max-width: 62ch; }

.spec-table { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: #fff; }
.spec-table th, .spec-table td { border: 1px solid rgba(35,33,28,.16); padding: 12px 18px; font-size: 14px; text-align: left; }
.spec-table th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--paper); width: 150px; color: rgba(35,33,28,.66); }

/* 同場加映 */
.also-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 16px; }
.also {
  border: 2px solid var(--ink); background: #fff;
  padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.also:hover { background: var(--lime-tint); transform: translate(-2px,-2px); box-shadow: var(--hard-sm); }
.also .a-name { font-family: var(--font-disp); font-size: 15.5px; line-height: 1.3; }
.also .a-name small { display: block; font-family: var(--font-mono); font-size: 10.5px; opacity: .68; letter-spacing: .12em; margin-top: 3px; }
.also .a-score { font-family: var(--font-disp); font-size: 22px; color: var(--blue); }
.also:hover .a-score { color: var(--ink); }

/* ---------- 方法論 ---------- */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; border: 2px solid var(--ink); background: #fff; box-shadow: var(--hard); }
.method-cell { padding: clamp(20px, 3vw, 30px); border-right: 2px solid var(--ink); position: relative; }
.method-cell:last-child { border-right: none; }
.method-cell .m-no { font-family: var(--font-disp); font-size: 40px; color: transparent; -webkit-text-stroke: 1.5px rgba(35,33,28,.6); display: block; margin-bottom: 14px; transition: -webkit-text-stroke-color .3s var(--ease); }
.method-cell h4 { font-family: var(--font-disp); font-size: 19px; margin-bottom: 4px; }
.method-cell .m-w { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--pink); display: block; margin-bottom: 12px; }
.method-cell p { font-size: 13.5px; line-height: 1.75; opacity: .85; transition: opacity .3s var(--ease); }
.method-cell { transition: background .3s var(--ease); }
.method-cell:nth-child(1):hover { background: var(--blue-tint); }
.method-cell:nth-child(2):hover { background: var(--pink-tint); }
.method-cell:nth-child(3):hover { background: var(--lime-tint); }
.method-cell:nth-child(4):hover { background: #e4efed; }
.method-cell:nth-child(5):hover { background: #f5ebe3; }
.method-cell:nth-child(1):hover .m-no { -webkit-text-stroke-color: var(--blue); }
.method-cell:nth-child(2):hover .m-no { -webkit-text-stroke-color: var(--pink); }
.method-cell:nth-child(3):hover .m-no { -webkit-text-stroke-color: #8a9440; }
.method-cell:nth-child(4):hover .m-no { -webkit-text-stroke-color: var(--teal); }
.method-cell:nth-child(5):hover .m-no { -webkit-text-stroke-color: var(--orange); }
.method-cell:hover p { opacity: 1; }

.grade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.grade-card { border: 2px solid var(--ink); background: #fff; padding: 22px 24px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.grade-card:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.grade-card .g-range { font-family: var(--font-disp); font-size: 26px; }
.grade-card .g-label { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; background: var(--ink); color: var(--lime); padding: 4px 12px; margin: 10px 0 12px; }
.grade-card p { font-size: 13.5px; opacity: .82; }

.about-lead { font-size: clamp(19px, 2.6vw, 27px); font-weight: 700; line-height: 1.85; max-width: 56ch; }
/* 原本一句話裡塞了綠、藍、桃紅三塊填色，讀起來像三個不相干的標籤。
   改成螢光筆只掃過下緣，加上網域用等寬字表示——強調的層次剩兩級就夠。 */
.about-lead b {
  font-weight: 900;
  background: linear-gradient(to top, var(--lime) 0 .34em, transparent .34em);
  padding: 0 .1em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.about-lead .dom {
  font-family: var(--font-mono);
  font-size: .8em; letter-spacing: .01em;
  border-bottom: 2px solid rgba(35,33,28,.3);
}

.decode {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  box-shadow: 6px 6px 0 rgba(35,33,28,.18);
}
.decode-cell { padding: 26px 22px; border-right: 2px solid rgba(246,244,238,.16); }
.decode-cell:last-child { border-right: none; }
.decode-cell .d-code { font-family: var(--font-disp); font-size: 30px; color: var(--lime); }
.decode-cell .d-mean { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 8px 0 10px; color: var(--pink-lt); }
.decode-cell p { font-size: 13px; line-height: 1.7; opacity: .85; }

/* ---------- 頁尾 ---------- */
.site-foot { background: var(--ink); color: var(--paper); border-top: 2px solid var(--ink); }
.foot-marquee { overflow: hidden; border-bottom: 2px solid rgba(246,244,238,.14); }
.foot-marquee .ticker-track { animation-duration: 52s; }
.foot-marquee:hover .ticker-track { animation-play-state: paused; }
.foot-marquee .fm-item {
  font-family: var(--font-disp);
  font-size: clamp(36px, 6vw, 78px);
  padding: 18px 0; white-space: nowrap; line-height: 1.1;
}
.foot-marquee .fm-item:nth-child(odd) { color: transparent; -webkit-text-stroke: 2px rgba(246,244,238,.38); }
.foot-marquee .fm-item:nth-child(even) { color: var(--lime); -webkit-text-stroke: 0; }
.foot-marquee .fm-item::after { content: "✦"; margin: 0 34px; color: rgba(215,150,170,.55); -webkit-text-stroke: 0; font-size: .6em; vertical-align: middle; }

.foot-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(44px, 6vw, 72px) 0; }
.foot-brand p { font-size: 13.5px; opacity: .75; max-width: 34ch; margin-top: 14px; line-height: 1.8; }
.foot-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pink-lt); margin-bottom: 18px; }
.foot-col a { display: block; padding: 5px 0; font-size: 14px; opacity: .8; transition: opacity .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.foot-col a:hover { opacity: 1; color: var(--lime); transform: translateX(6px); }
.foot-bar {
  border-top: 2px solid rgba(246,244,238,.14);
  /* 底部留 88px：手機的回頂部按鈕仍浮在右下（12px + 50px），不留這段的話
     捲到底時會蓋住右邊那排條款連結，連點都點不到。桌機已改成收進本列，
     不再需要這段空距，於 861px 以上還原成 20px（見下方 RWD）。 */
  padding: 20px 0 88px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(246,244,238,.62);
}

/* ---------- 訂閱區 ---------- */
.subscribe {
  border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper);
  box-shadow: var(--hard-sm), 8px 8px 0 var(--lime);
  padding: clamp(30px, 5vw, 56px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center;
}
.subscribe h3 { font-family: var(--font-disp); font-size: clamp(26px, 3.6vw, 44px); line-height: 1.15; margin-bottom: 14px; }
.subscribe h3 span { color: var(--lime); }
.subscribe p { opacity: .8; font-size: 14.5px; }
.sub-form { display: flex; gap: 0; border: 2px solid rgba(246,244,238,.2); background: #fff; }
.sub-form input {
  flex: 1; border: none; outline: none;
  padding: 16px 18px; font-size: 15px; min-width: 0;
  font-family: var(--font-body);
}
.sub-form button {
  border: none; background: var(--ink); color: var(--lime);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 0 26px;
  transition: background .25s var(--ease);
}
.sub-form button:hover { background: var(--blue); color: #fff; }
.sub-note { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; opacity: .75; margin-top: 10px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%;
  transform: translate(-50%, 140%);
  background: var(--ink); color: var(--lime);
  border: 2px solid var(--lime);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  padding: 14px 26px;
  z-index: 90;
  transition: transform .5s var(--ease);
  box-shadow: 5px 5px 0 rgba(35,33,28,.28);
}
.toast.show { transform: translate(-50%, 0); }

/* ---------- 動畫 / 工具 ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.back-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 50px; height: 50px;
  background: var(--lime); color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 20px;
  opacity: 0; pointer-events: none;
  transform: translateY(14px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.back-top.show { opacity: 1; pointer-events: auto; transform: none; }
.back-top:hover { background: var(--ink); color: var(--lime); }

/* 手機／窄視窗：維持浮動，位置再往下靠一點。加 safe-area 是因為 iOS 的
   home indicator 與 Android 手勢列會吃掉底部，純 12px 會被壓到。 */
@media (max-width: 860px) {
  .back-top { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* 桌機：捲到頁尾底列就收進那一排，與版權、條款同排靠右。
   position 從 fixed 變 static 便自動回到 flex 流裡；opacity 這裡直接寫死，
   短頁面捲不到 700px 也要看得到，否則底列會空一格。 */
@media (min-width: 861px) {
  .foot-bar { padding-bottom: 20px; align-items: center; justify-content: flex-start; }
  .foot-legal { margin-left: auto; }
  .back-top.docked {
    position: static;
    margin-left: 18px;
    opacity: 1; pointer-events: auto; transform: none;
  }
}

.empty-state {
  border: 2px dashed var(--ink); padding: 60px 20px; text-align: center;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; opacity: .72;
}

/* ---------- RWD ---------- */
@media (max-width: 1080px) {
  .dtable-head { display: none; }
  .dtable-row { grid-template-columns: 40px minmax(0, 2fr) 74px 86px; row-gap: 6px; }
  .dt-brand, .dt-chip, .dt-date { display: none; }
  .article-hero { grid-template-columns: 1fr; }
  .article-stage { min-height: 340px; }
  .subscribe { grid-template-columns: 1fr; }
  .foot-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .main-nav, .head-cta { display: none; }
  .nav-toggle { display: block; }
  .hero .wrap { grid-template-columns: 1fr; }
  /* 直式堆疊後文字與照片不再共用高度、而是相加，照片得讓出大部分，
     所以這裡把 42vh 收到 18vh（等於高度 22.5vh）。 */
  .hero-stage { padding: clamp(8px, 1.6vh, 20px) 0 0; }
  .hero-stage .shot { width: min(100%, 320px, 18vh); }
  /* 堆疊後區塊從兩欄變六段，段間距是相加的，垂直節奏一併收緊 */
  .hero-kicker  { margin-bottom: clamp(10px, 1.6vh, 18px); }
  .hero-title   { margin-bottom: clamp(10px, 1.6vh, 18px); }
  .hero-sub     { margin-bottom: clamp(12px, 2.1vh, 24px); }
  .hero-actions { margin-bottom: clamp(14px, 2.4vh, 28px); }
  .rank-row { grid-template-columns: 64px minmax(0,1fr) auto; }
  .rank-reason, .rank-price { display: none; }
  .proscons { grid-template-columns: 1fr; }
  .compare-slots { grid-template-columns: 1fr; }
  .method-cell { border-right: none; border-bottom: 2px solid var(--ink); }
  .method-cell:last-child { border-bottom: none; }
  .section-more { display: none; }
  .ctable { display: block; overflow-x: auto; }
}
@media (max-width: 560px) {
  /* 原本 flex-wrap 會折成兩排，白白吃掉約 54px 高。改成四等分格線後
     單排就排得下（320px 視窗時每格仍有 56px 淨寬），高度省一半。 */
  .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
  .hero-stat { padding: clamp(8px, 1.3vh, 12px) 6px; text-align: center; }
  .hero-stat .l { font-size: 8.5px; letter-spacing: .04em; }
  .hero-stage .shot { width: min(100%, 320px, 17.5vh); }
  .foot-main { grid-template-columns: 1fr; }
  .sub-form { flex-direction: column; }
  .sub-form button { padding: 14px; }
  .article-panel-top { flex-direction: column; align-items: flex-start; }
}

/* 矮視窗的取捨。標題＋內文＋兩顆按鈕＋四格數據＋照片，在 700px 以下的
   視窗高度裡放不進同一頁——一定要有東西讓位，只是讓的順序要對：
   先讓照片（純裝飾），再讓內文與數據（首頁下方還會再講一次）。
   標題、CTA、跑馬燈永遠留著，那才是 hero 真正要傳達的東西。 */
/* 版面一堆疊，照片與文字就從「共用高度」變成「相加高度」，照片能分到的
   高度立刻掉到縮圖等級。與其硬塞一張看不清楚的照片、再把 CTA 擠出畫面，
   不如把整份高度還給文字。視窗夠高時（> 980px，例如直立平板）它會回來。 */
@media (max-width: 560px) and (max-height: 820px) {
  .hero-stage { display: none; }
}
/* 561–860px 這一段標題還跟著 6.6vw 長，文字塊比手機高出一截，
   照片要到 1000px 以上的視窗高度才擠得進來（直立平板正好都在這之上）。 */
@media (min-width: 561px) and (max-width: 860px) and (max-height: 999px) {
  .hero-stage { display: none; }
}
/* 矮視窗（561–700px：小筆電、1024x600 上網本、投影輸出、分割視窗）。
   到這個高度撐爆版面的不是字級，是五個區塊之間的間距與上下留白加總，
   所以這一段只收間距、不動字級——看起來還是同一個 hero，只是站得比較挺。 */
@media (min-height: 561px) and (max-height: 700px) {
  .hero { padding-top: clamp(18px, 3.4vh, 40px); }
  .hero .wrap { padding-bottom: clamp(14px, 2.6vh, 30px); }
  .hero-kicker  { margin-bottom: clamp(6px, 1.1vh, 14px); }
  .hero-title   { margin-bottom: clamp(6px, 1.1vh, 14px); }
  .hero-sub     { margin-bottom: clamp(8px, 1.5vh, 18px); }
  .hero-actions { margin-bottom: clamp(10px, 1.8vh, 22px); }
}

/* 手機橫置這一類極矮視窗：光是 ticker + 站首就吃掉 111px，佔掉三分之一
   個螢幕。這裡只留 hero 真正非講不可的東西——標題、兩顆 CTA、跑馬燈，
   其餘（徽章、內文、數據卡、照片）全部收起，字級下限也一起放低。 */
@media (max-height: 560px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-kicker, .hero-sub, .hero-stats, .hero-stage { display: none; }
  .hero-title { font-size: clamp(26px, min(6.6vw, 8.6vh), 84px); }
  .hero-actions { margin-bottom: 0; }
  .hero-marquee .hm-item { font-size: clamp(13px, min(2.1vw, 2.7vh), 26px); padding: 6px 0; }
}
/* 440px 以下就別談留白了，內距的下限也得讓路 */
@media (max-height: 440px) {
  .hero { padding-top: 10px; }
  .hero .wrap { padding-bottom: 10px; }
  .hero-title { margin-bottom: clamp(8px, 2.2vh, 24px); }
}

/* 370px 以下 hero 的兩個隱形破口：徽章那行字會折成兩行、兩顆 CTA 也擠不進
   同一排，光這兩項就多吃掉 80px 高。把字級與內距各收一級讓它們回到單行，
   比讓 hero 溢出畫面划算得多。 */
@media (max-width: 370px) {
  .hero-kicker { font-size: 9px; letter-spacing: .1em; padding: 4px 10px; }
  .hero-sub { font-size: 13px; }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { padding: 10px 16px; font-size: 11.5px; letter-spacing: .08em; gap: 7px; }
}

/* 320px 視窗：卡片內容區只剩 280px，售價＋評分＋連結三欄剛好卡住，
   收掉內距與字級讓它們排得下，「看評測」才不會被折成兩行 */
@media (max-width: 350px) {
  .rcard-foot { padding: 12px 12px; gap: 6px; }
  .rcard-price { font-size: 17px; }
  .rcard-link { font-size: 10.5px; letter-spacing: .08em; gap: 5px; }
  .score-badge { min-width: 66px; padding: 9px 10px 7px; }
  .rcard-foot .sb-num { font-size: 26px; }
}

@media (hover: none), (pointer: coarse) {
  .btn:hover, .rcard:hover, .chip:hover, .also:hover, .grade-card:hover, .head-cta:hover {
    transform: none; box-shadow: none;
  }
  .rcard:hover { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .ticker-track { animation: none !important; }
  .lab-trace { animation: none !important; stroke-dashoffset: 0 !important; }
  .lab-cursor { display: none !important; }
  .hero-title .hl::after { animation: none !important; transform: scaleX(1); }
  .reveal, .dtable-row { opacity: 1; transform: none; }
}

/* ============================================================
   法律頁（服務條款 / 隱私權政策）
   長文閱讀優先：字級比卡片大一級、行高拉到 1.95、正文限寬 74ch，
   視覺仍沿用全站的 2px 硬框、描邊編號與螢光筆底線。
   ============================================================ */
.legal-meta, .doc-meta {
  display: flex; flex-wrap: wrap;
  border: 2px solid var(--ink); background: #fff;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.legal-meta > div, .doc-meta > div { flex: 1 1 auto; min-width: 148px; padding: 14px 22px; border-right: 2px solid var(--ink); }
.legal-meta > div:last-child, .doc-meta > div:last-child { border-right: none; }
.lm-k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(35,33,28,.55); margin-bottom: 5px; }
.lm-v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: .02em; }

.legal-toc, .doc-toc { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(28px,4vw,40px) 0 clamp(38px,5.5vw,58px); }
.legal-toc a, .doc-toc a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  padding: 7px 14px; background: #fff; border: 2px solid var(--ink);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.legal-toc a:hover, .doc-toc a:hover { transform: translate(-2px,-2px); box-shadow: var(--hard-sm); background: var(--lime); }
.legal-toc a:active, .doc-toc a:active { transform: none; box-shadow: none; transition-duration: .1s; }
.legal-toc .t-no, .doc-toc .t-no { color: var(--pink); margin-right: 8px; }
.legal-toc a:hover .t-no, .doc-toc a:hover .t-no { color: var(--ink); }

/* 內文寬度對齊頁首的 .wrap（1280px），不再另外收窄 */
.legal-body, .doc-body { max-width: none; }
.legal-block, .doc-block {
  border-top: 2px solid var(--ink);
  padding: clamp(26px, 3.6vw, 38px) 0;
  /* 頁首吸頂 68px＋跑馬燈，錨點跳轉時留出這段高度 */
  scroll-margin-top: 88px;
}
.legal-block:last-of-type, .doc-block:last-of-type { border-bottom: 2px solid var(--ink); }
.legal-block .lg-no, .doc-block .lg-no {
  display: block; margin-bottom: 10px;
  font-family: var(--font-disp); font-size: 34px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(35,33,28,.5);
  transition: -webkit-text-stroke-color .3s var(--ease);
}
.legal-block:hover .lg-no, .doc-block:hover .lg-no { -webkit-text-stroke-color: var(--pink); }
.legal-block h3, .doc-block h3 { font-family: var(--font-disp); font-size: clamp(20px, 2.6vw, 27px); line-height: 1.35; margin-bottom: 6px; }
.legal-block .lg-en, .doc-block .lg-en { display: block; margin-bottom: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.legal-block p, .doc-block p { font-size: 15.5px; line-height: 1.95; margin-bottom: 14px; opacity: .9; }
.legal-block p:last-child, .doc-block p:last-child, .legal-block .legal-list:last-child, .doc-block .doc-list:last-child { margin-bottom: 0; }
.legal-block b, .doc-block b {
  font-weight: 700;
  background: linear-gradient(to top, var(--lime) 0 .3em, transparent .3em);
  padding: 0 .08em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.legal-block code, .doc-block code, .legal-inline, .doc-inline {
  font-family: var(--font-mono); font-size: .86em;
  border-bottom: 2px solid rgba(35,33,28,.28); padding-bottom: 1px;
}

.legal-list, .doc-list { list-style: none; margin-bottom: 14px; }
.legal-list li, .doc-list li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 15px; line-height: 1.9; opacity: .9; }
.legal-list li:last-child, .doc-list li:last-child { margin-bottom: 0; }
.legal-list li::before, .doc-list li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 9px; height: 9px; background: var(--lime); border: 1.5px solid var(--ink);
}
.legal-list.no li::before, .doc-list.no li::before { background: var(--pink); }

.legal-note, .doc-note {
  position: relative;
  border: 2px solid var(--ink); background: var(--blue-tint);
  padding: clamp(24px,3.4vw,34px) clamp(22px,3vw,32px);
  box-shadow: var(--hard);
  margin: clamp(30px,4vw,42px) 0 clamp(38px,5.5vw,58px);
}
.legal-note .ln-tag, .doc-note .ln-tag {
  position: absolute; top: -15px; left: 22px;
  background: var(--ink); color: var(--lime);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  padding: 5px 14px;
}
.legal-note p, .doc-note p { font-size: clamp(15px,1.8vw,17px); font-weight: 500; line-height: 1.9; max-width: 62ch; }
.legal-note p + p, .doc-note p + p { margin-top: 12px; }

.legal-contact, .doc-cta {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(18px,3vw,36px);
  background: var(--ink); color: var(--paper);
  padding: clamp(28px,4vw,44px);
  margin-top: clamp(40px,5.5vw,64px);
}
.legal-contact h4, .doc-cta h4 { font-family: var(--font-disp); font-size: clamp(20px,2.6vw,28px); line-height: 1.25; margin-bottom: 12px; }
.legal-contact h4 span, .doc-cta h4 span { color: var(--lime); }
.legal-contact p, .doc-cta p { font-size: 14px; line-height: 1.85; opacity: .8; max-width: 46ch; }
.legal-contact .lc-mail, .doc-cta .lc-mail { font-family: var(--font-mono); color: var(--lime); border-bottom: 1px solid rgba(201,209,120,.5); }
.legal-contact .lc-act, .doc-cta .lc-act { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }

@media (max-width: 700px) {
  .legal-meta > div, .doc-meta > div { flex: 1 1 100%; border-right: none; border-bottom: 2px solid var(--ink); }
  .legal-meta > div:last-child, .doc-meta > div:last-child { border-bottom: none; }
  .legal-contact, .doc-cta { grid-template-columns: 1fr; }
  .legal-contact .lc-act, .doc-cta .lc-act { flex-direction: row; flex-wrap: wrap; }
}
@media (hover: none), (pointer: coarse) {
  .legal-toc a:hover, .doc-toc a:hover { transform: none; box-shadow: none; background: #fff; }
}

/* 頁尾底列的法律連結：跟旁邊的聲明同一級字，只在 hover 時亮起來 */
.foot-legal { display: flex; gap: 18px; }
.foot-legal a { color: inherit; border-bottom: 1px solid rgba(246,244,238,.28); transition: color .2s var(--ease), border-color .2s var(--ease); }
.foot-legal a:hover { color: var(--lime); border-color: var(--lime); }

/* 聯絡區是深底，ghost 按鈕的 ink 邊框與文字會整個消失，這裡反相 */
.legal-contact .btn-ghost, .doc-cta .btn-ghost { color: var(--paper); border-color: rgba(246,244,238,.45); }
.legal-contact .btn-ghost:hover, .doc-cta .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ---------- 聯絡頁的信箱卡 ----------
   全站只有一個對外信箱，所以它值得一整塊版面，而不是一行連結。 */
.mail-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: clamp(18px,3vw,32px);
  border: 2px solid var(--ink); background: var(--lime);
  padding: clamp(24px,3.6vw,38px) clamp(22px,3vw,34px);
  box-shadow: var(--hard);
  margin: clamp(28px,4vw,40px) 0 clamp(38px,5.5vw,56px);
}
.mail-card .mc-k {
  display: block; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(35,33,28,.62);
}
.mail-card .mc-mail {
  display: inline-block;
  font-family: var(--font-mono); font-size: clamp(18px,2.8vw,31px); font-weight: 600;
  border-bottom: 3px solid var(--ink);
  word-break: break-all;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.mail-card .mc-mail:hover { color: var(--blue); border-color: var(--blue); }
.mail-card .mc-note {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  color: rgba(35,33,28,.72);
}
.mail-card .btn { background: var(--ink); color: var(--lime); flex-shrink: 0; }
.mail-card .btn:hover { background: #fff; color: var(--ink); }

@media (max-width: 700px) {
  .mail-card { grid-template-columns: 1fr; }
}

/* 區塊前的引導句：比內文大一級，但不到 .about-lead 那麼重 */
.doc-lede { font-size: clamp(15px,1.9vw,17px); line-height: 1.95; max-width: 62ch; margin-bottom: clamp(20px,2.8vw,28px); opacity: .9; }

/* 主選單從 5 項變 6 項後，矮視窗（320×568 這種）原本會頂到上下邊界。
   置中改成 safe center 讓它永遠不會從上方裁掉，矮螢幕再收一級字。 */
.mobile-nav { overflow-y: auto; justify-content: safe center; padding-top: 20px; padding-bottom: 20px; }
@media (max-height: 640px) {
  .mobile-nav a { font-size: clamp(26px, 7vw, 38px); padding: 7px 0; }
  .mobile-nav .m-sub { margin-top: 18px; }
}