/* v02 評鑑誌 (review-mag) — 評測媒體版型 */
/* 佈局 DNA：頂欄＋雜誌式非對稱網格，圓形大數字評分徽章貫穿卡片，銳利小圓角。 */
/* 變體軸：主色 hue ±25°、評分徽章改方形或半圓、雜誌網格大小卡比例互換。 */

/* ============================================================
   雙模式色彩架構（Radix 12 階 primitive → semantic 雙層）
   --mag-n-* 冷調石板灰、--mag-o-* 主色橙紅；l=淺 d=深
   1–2 頁底 · 3–5 元件底 · 6–8 邊框 · 9–10 實色 · 11 次要字 · 12 主文字
   ============================================================ */
:root {
  /* 冷調石板灰 12 階 — 淺 */
  --mag-n-l1: #ffffff;  --mag-n-l2: #eef2f6;  --mag-n-l3: #f3f6f9;  --mag-n-l4: #edf1f6;
  --mag-n-l5: #e8edf2;  --mag-n-l6: #e2e8ef;  --mag-n-l7: #ccd4de;  --mag-n-l8: #b2bbc7;
  --mag-n-l9: #98a2b0;  --mag-n-l10: #7a8494; --mag-n-l11: #5c6678; --mag-n-l12: #222c3c;
  /* 冷調石板灰 12 階 — 深 */
  --mag-n-d1: #14181f;  --mag-n-d2: #1d232d;  --mag-n-d3: #262d39;  --mag-n-d4: #2b3340;
  --mag-n-d5: #313946;  --mag-n-d6: #363f4d;  --mag-n-d7: #454f60;  --mag-n-d8: #5a6476;
  --mag-n-d9: #6f7a8b;  --mag-n-d10: #838e9f; --mag-n-d11: #97a2b3; --mag-n-d12: #e9eef5;
  /* 主色橙紅 12 階 — 淺 */
  --mag-o-l1: #fff6f3;  --mag-o-l2: #ffe9e2;  --mag-o-l3: #ffd6c9;  --mag-o-l4: #ffc8b7;
  --mag-o-l5: #ffb9a4;  --mag-o-l6: #ffab92;  --mag-o-l7: #f77a55;  --mag-o-l8: #e05d3a;
  --mag-o-l9: #c8401e;  --mag-o-l10: #b23417; --mag-o-l11: #a12f14; --mag-o-l12: #5a1c0d;
  /* 主色橙紅 12 階 — 深 */
  --mag-o-d1: #211008;  --mag-o-d2: #2e160c;  --mag-o-d3: #3d1c10;  --mag-o-d4: #4c2313;
  --mag-o-d5: #5b2915;  --mag-o-d6: #6a3018;  --mag-o-d7: #8f3d1d;  --mag-o-d8: #af421e;
  --mag-o-d9: #cf471f;  --mag-o-d10: #e15a30; --mag-o-d11: #ff8b62; --mag-o-d12: #ffd0bd;
  /* 輔色實色（藍/青綠/星金/評級三色）成對 l+d */
  --mag-blue-l: #1f6fb0;  --mag-blue-d: #6bb6f5;
  --mag-teal-l: #0bab97;  --mag-teal-d: #22e0c8;
  --mag-star-l: #d1810c;  --mag-star-d: #ffb43d;
  --mag-good-l: #1a9d52;  --mag-good-d: #35d47f;
  --mag-mid-l:  #c0791a;  --mag-mid-d:  #f0a63d;
  --mag-low-l:  #d23b34;  --mag-low-d:  #f0655c;
  --mag-flare:  #ff6a42;  /* 亮橙：僅供漸層封面/縮圖裝飾 */

  /* 圓角語言 3–5px（銳利雜誌感） */
  --mag-r-sm: 3px;
  --mag-r: 4px;
  --mag-r-lg: 5px;

  /* 字體：Open Sans／Roboto 風 */
  --mag-font-head: "Open Sans", "Roboto", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mag-font-body: "Roboto", "Open Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --mag-base: 16px;

  --mag-gap: 22px;
  --mag-pad: 20px;
}

/* ---- semantic：淺色（預設）---- */
:root {
  --mag-primary: var(--mag-o-l9);
  --mag-primary-dk: var(--mag-o-l11);
  --mag-secondary: var(--mag-blue-l);
  --mag-accent: var(--mag-teal-l);
  --mag-bg: var(--mag-n-l2);
  --mag-surface: var(--mag-n-l1);
  --mag-surface-2: var(--mag-n-l3);
  --mag-line: var(--mag-n-l6);
  --mag-line-strong: var(--mag-n-l7);
  --mag-text: var(--mag-n-l12);
  --mag-muted: var(--mag-n-l11);
  --mag-star: var(--mag-star-l);
  --mag-good: var(--mag-good-l);
  --mag-mid: var(--mag-mid-l);
  --mag-low: var(--mag-low-l);
  --mag-shadow: 0 2px 10px rgba(43, 52, 68, .08);
  --mag-shadow-sm: 0 1px 4px rgba(43, 52, 68, .06);
}
/* @check text=#222c3c bg=#eef2f6 muted=#5c6678 primary=#c8401e btntext=#ffffff mode=light */

/* ---- semantic：深色 ---- */
[data-mode="dark"] {
  --mag-primary: var(--mag-o-d9);
  --mag-primary-dk: var(--mag-o-d11);
  --mag-secondary: var(--mag-blue-d);
  --mag-accent: var(--mag-teal-d);
  --mag-bg: var(--mag-n-d1);
  --mag-surface: var(--mag-n-d2);
  --mag-surface-2: var(--mag-n-d3);
  --mag-line: var(--mag-n-d6);
  --mag-line-strong: var(--mag-n-d7);
  --mag-text: var(--mag-n-d12);
  --mag-muted: var(--mag-n-d11);
  --mag-star: var(--mag-star-d);
  --mag-good: var(--mag-good-d);
  --mag-mid: var(--mag-mid-d);
  --mag-low: var(--mag-low-d);
  --mag-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  --mag-shadow-sm: 0 1px 6px rgba(0, 0, 0, .38);
}
/* @check text=#e9eef5 bg=#14181f muted=#97a2b3 primary=#cf471f btntext=#ffffff mode=dark */

/* ---- 未手動切換時跟隨系統 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --mag-primary: var(--mag-o-d9);
    --mag-primary-dk: var(--mag-o-d11);
    --mag-secondary: var(--mag-blue-d);
    --mag-accent: var(--mag-teal-d);
    --mag-bg: var(--mag-n-d1);
    --mag-surface: var(--mag-n-d2);
    --mag-surface-2: var(--mag-n-d3);
    --mag-line: var(--mag-n-d6);
    --mag-line-strong: var(--mag-n-d7);
    --mag-text: var(--mag-n-d12);
    --mag-muted: var(--mag-n-d11);
    --mag-star: var(--mag-star-d);
    --mag-good: var(--mag-good-d);
    --mag-mid: var(--mag-mid-d);
    --mag-low: var(--mag-low-d);
    --mag-shadow: 0 4px 18px rgba(0, 0, 0, .45);
    --mag-shadow-sm: 0 1px 6px rgba(0, 0, 0, .38);
  }
}

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

body {
  font-family: var(--mag-font-body);
  font-size: var(--mag-base);
  line-height: 1.62;
  color: var(--mag-text);
  background: var(--mag-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--mag-font-head); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; }
a { color: var(--mag-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* ===== 頂欄 ===== */
.masthead { background: var(--mag-surface); border-bottom: 3px solid var(--mag-primary); box-shadow: var(--mag-shadow-sm); position: sticky; top: 0; z-index: 30; }
.masthead-row { display: flex; align-items: center; gap: 20px; height: 66px; }
.masthead-logo { font-family: var(--mag-font-head); font-weight: 800; font-size: 24px; letter-spacing: -.01em; color: var(--mag-text); }
.masthead-logo b { color: var(--mag-primary); }
.masthead-nav { display: flex; gap: 4px; margin-left: 6px; }
.masthead-link { color: var(--mag-text); font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: var(--mag-r); }
.masthead-link:hover { background: var(--mag-surface-2); text-decoration: none; }
.masthead-link.is-active { color: var(--mag-primary); border-bottom: 2px solid var(--mag-primary); border-radius: 0; }
.masthead-fill { flex: 1; }
.masthead-cta { background: var(--mag-primary); color: #fff; font-weight: 700; padding: 9px 16px; border-radius: var(--mag-r); font-size: 14px; }
.masthead-toggle { border: 1px solid var(--mag-line); background: var(--mag-surface); color: var(--mag-text); width: 38px; height: 38px; border-radius: var(--mag-r); cursor: pointer; font-size: 16px; display: grid; place-items: center; margin-left: 10px; }
.masthead-toggle:hover { border-color: var(--mag-primary); color: var(--mag-primary); }
.masthead-toggle::before { content: "☾"; }
[data-mode="dark"] .masthead-toggle::before { content: "☀"; }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .masthead-toggle::before { content: "☀"; } }

/* ===== 麵包屑 ===== */
.crumb-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--mag-muted); font-size: 13px; padding: 14px 0; }
.crumb-nav .sep { opacity: .5; }

/* ===== 通用卡 ===== */
.card { background: var(--mag-surface); border: 1px solid var(--mag-line); border-radius: var(--mag-r); box-shadow: var(--mag-shadow-sm); }
.card-pad { padding: var(--mag-pad); }
.block-title { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--mag-muted); font-weight: 700; margin-bottom: 12px; }
.section-title { font-size: 24px; margin: 6px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--mag-line); }
.section-title span { border-bottom: 2px solid var(--mag-primary); padding-bottom: 8px; }

/* ===== 招牌：圓形大數字評分徽章 ===== */
.rating-badge { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-family: var(--mag-font-head); position: relative; box-shadow: var(--mag-shadow); }
.rating-badge .num { font-size: 24px; font-weight: 800; line-height: 1; }
.rating-badge .max { font-size: 10px; opacity: .85; }
.rating-badge.is-good { background: linear-gradient(135deg, #22c55e, #08ddc1); }
.rating-badge.is-mid { background: linear-gradient(135deg, #ff9f1a, #ff5e3a); }
.rating-badge.is-low { background: linear-gradient(135deg, #ef5350, #b91c1c); }
.rating-badge.is-lg { width: 84px; height: 84px; }
.rating-badge.is-lg .num { font-size: 34px; }

/* ===== 雜誌網格 ===== */
.mag-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--mag-gap); }
.mag-lead { position: relative; overflow: hidden; border-radius: var(--mag-r); box-shadow: var(--mag-shadow); }
/* 雜誌英雄橫幅：暖高光 + 斜向印刷紋 + 多段深化底 + 左下暗角，收於深番茄，讓字幕暗幕自然銜接 */
.mag-lead .cover {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(115% 85% at 84% 10%, rgba(255,214,138,.60), transparent 52%),
    radial-gradient(120% 120% at 16% 96%, rgba(120,32,10,.55), transparent 46%),
    repeating-linear-gradient(128deg, rgba(255,255,255,.055) 0 2px, transparent 2px 10px),
    linear-gradient(152deg, #ff7c40 0%, #ef5228 44%, #b8340f 100%);
}
.mag-lead .cover::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 46px);
  mix-blend-mode: multiply; opacity: .5;
}
[data-mode="dark"] .mag-lead .cover { filter: saturate(.85) brightness(.86); }
.mag-lead .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 22px 22px;
  background: linear-gradient(to top, rgba(44,16,7,.94) 0%, rgba(44,16,7,.74) 32%, rgba(44,16,7,.16) 64%, transparent 100%);
  color: #fff;
}
.mag-lead .tagline { display: inline-block; background: var(--mag-primary); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 4px 11px; border-radius: var(--mag-r-sm); margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.mag-lead h2 { color: #fff; font-size: 26px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.mag-side { display: flex; flex-direction: column; gap: var(--mag-gap); }

/* ===== 文章卡（雜誌次卡） ===== */
.news-card { display: flex; gap: 14px; align-items: flex-start; }
.news-card .thumb { width: 96px; height: 72px; border-radius: var(--mag-r-sm); flex: none; background: linear-gradient(120deg, #38a9ff, #08ddc1); }
.news-card .thumb.alt2 { background: linear-gradient(120deg, #ff5e3a, #ff9f1a); }
.news-card .thumb.alt3 { background: linear-gradient(120deg, #8b5cf6, #38a9ff); }
.news-card .kicker { color: var(--mag-primary); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.news-card h3 { font-size: 16px; margin: 3px 0; }
.news-card .excerpt { color: var(--mag-muted); font-size: 13px; margin: 0; }
.news-card .byline { color: var(--mag-muted); font-size: 12px; margin-top: 6px; }

.card-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mag-gap); }
.news-card.stacked { flex-direction: column; }
.news-card.stacked .thumb { width: 100%; height: 130px; }

/* ===== 工具表單卡 ===== */
.score-form .lead { color: var(--mag-muted); margin-top: 0; }
.form-field { margin-bottom: 14px; }
.form-label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.form-control, .score-form select, .score-form input[type="text"], .score-form input[type="number"] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--mag-line); border-radius: var(--mag-r); background: var(--mag-surface); color: var(--mag-text); font: inherit;
}
.form-control:focus, .score-form select:focus, .score-form input:focus { outline: none; border-color: var(--mag-secondary); box-shadow: 0 0 0 3px rgba(56,169,255,.18); }
.radio-line { display: flex; flex-wrap: wrap; gap: 16px; }
.radio-line label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.radio-line input { accent-color: var(--mag-primary); width: 16px; height: 16px; }
.btn-row { display: flex; gap: 10px; margin-top: 6px; }
.btn { font-family: var(--mag-font-head); font-weight: 700; border: none; cursor: pointer; padding: 11px 20px; border-radius: var(--mag-r); font-size: 15px; }
.btn-primary { background: var(--mag-primary); color: #fff; flex: 1; }
.btn-primary:hover { background: var(--mag-primary-dk); }
.btn-outline { background: var(--mag-surface); color: var(--mag-secondary); border: 1px solid var(--mag-secondary); }

/* ===== 結果貼文卡 ===== */
.review-post .post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-post .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #38a9ff, #08ddc1); display: grid; place-items: center; font-size: 20px; color: #fff; flex: none; }
.review-post .who { flex: 1; min-width: 0; }
.review-post .name { font-weight: 700; font-size: 16px; }
.review-post .meta { color: var(--mag-muted); font-size: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.review-post .tool-chip { background: rgba(56,169,255,.14); color: var(--mag-secondary); font-weight: 700; padding: 1px 8px; border-radius: var(--mag-r-sm); }
.review-post .serial { font-variant-numeric: tabular-nums; }
.review-post .testimony { margin: 6px 0 12px; }
.result-summary { background: var(--mag-surface-2); border-left: 3px solid var(--mag-accent); border-radius: 0 var(--mag-r) var(--mag-r) 0; padding: 12px 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; }
.result-summary .txt b { color: var(--mag-primary-dk); }
.stars-char { color: var(--mag-star); letter-spacing: 2px; font-size: 17px; }
.stars-char .off { color: var(--mag-line); }
.react-line { display: flex; gap: 6px; border-top: 1px solid var(--mag-line); padding-top: 12px; }
.react-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; cursor: pointer; color: var(--mag-muted); font: inherit; font-weight: 600; padding: 7px 12px; border-radius: var(--mag-r); }
.react-btn:hover { background: var(--mag-surface-2); }
.react-btn.liked { color: var(--mag-secondary); }

/* ===== 平台數據統計卡 ===== */
.stat-bar { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-bar .cell { text-align: center; padding: 6px; }
.stat-bar .cell + .cell { border-left: 1px solid var(--mag-line); }
.stat-bar .n { font-family: var(--mag-font-head); font-weight: 800; font-size: 26px; color: var(--mag-primary); }
.stat-bar .l { font-size: 12px; color: var(--mag-muted); }

/* ===== 熱門排行 ===== */
.rank-board { list-style: none; margin: 0; padding: 0; }
.rank-board li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--mag-line); }
.rank-board li:last-child { border-bottom: none; }
.rank-board .rk { font-family: var(--mag-font-head); font-weight: 800; font-size: 18px; width: 24px; color: var(--mag-muted); }
.rank-board li:nth-child(-n+3) .rk { color: var(--mag-primary); }
.rank-board .t { flex: 1; font-weight: 600; font-size: 14px; }
.rank-board .sc { font-weight: 700; color: var(--mag-secondary); font-size: 13px; }

/* ===== 文章內文排版 ===== */
.story-body { line-height: 1.78; font-size: 16px; }
.story-body h2 { font-size: 23px; margin-top: 1.4em; }
.story-body h3 { font-size: 18px; margin-top: 1.2em; color: var(--mag-primary-dk); }
.story-body p { margin: .8em 0; }
.story-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 14px; }
.story-body th, .story-body td { border: 1px solid var(--mag-line); padding: 9px 12px; text-align: left; }
.story-body th { background: var(--mag-surface-2); }
.story-body blockquote { margin: 1em 0; padding: 14px 18px; border-left: 4px solid var(--mag-primary); background: var(--mag-surface-2); font-style: italic; color: var(--mag-text); }
.faq-item { border-bottom: 1px solid var(--mag-line); }
.faq-item summary { cursor: pointer; padding: 13px 4px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "▾"; color: var(--mag-primary); transition: transform .15s; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item .ans { padding: 0 4px 14px; color: var(--mag-muted); }

/* ===== 工具牆 ===== */
.toolwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mag-gap); }
.toolwall-item { padding: 18px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.toolwall-item:hover { border-color: var(--mag-primary); }
.toolwall-item .ic { width: 42px; height: 42px; border-radius: var(--mag-r-sm); background: linear-gradient(135deg, #ff5e3a, #ff9f1a); display: grid; place-items: center; color: #fff; font-size: 20px; flex: none; }
.toolwall-item .nm { font-weight: 700; font-size: 15px; }
.toolwall-item .ds { color: var(--mag-muted); font-size: 12px; margin-top: 2px; }

/* ===== 16:9 影片 ===== */
.video-embed { position: relative; border-radius: var(--mag-r); overflow: hidden; }
.video-embed .ratio { aspect-ratio: 16 / 9; background: linear-gradient(120deg, #22303f, #111a24); }
.video-embed .play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-embed .play span { width: 60px; height: 60px; border-radius: 50%; background: var(--mag-primary); display: grid; place-items: center; box-shadow: var(--mag-shadow); }
.video-embed .play span::before { content: ""; margin-left: 4px; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.video-embed .lbl { position: absolute; left: 12px; bottom: 12px; color: #fff; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* ===== 圖片網格 2×2 ===== */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.photo-grid .p { aspect-ratio: 4 / 3; border-radius: var(--mag-r-sm); }
.photo-grid .p:nth-child(1) { background: linear-gradient(135deg, #ff5e3a, #ff9f1a); }
.photo-grid .p:nth-child(2) { background: linear-gradient(135deg, #38a9ff, #08ddc1); }
.photo-grid .p:nth-child(3) { background: linear-gradient(135deg, #08ddc1, #22c55e); }
.photo-grid .p:nth-child(4) { background: linear-gradient(135deg, #8b5cf6, #ff5e3a); }

/* ===== 分頁 ===== */
.page-nav { display: flex; gap: 5px; justify-content: center; padding: 8px 0; }
.page-nav a { min-width: 36px; height: 36px; padding: 0 10px; display: grid; place-items: center; border: 1px solid var(--mag-line); border-radius: var(--mag-r); font-weight: 700; color: var(--mag-text); background: var(--mag-surface); }
.page-nav a.on { background: var(--mag-primary); color: #fff; border-color: var(--mag-primary); }

/* ===== footer ===== */
.site-footer { background: #202834; color: #c9d2df; margin-top: 30px; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 34px; padding: 34px 0; }
.site-footer .col { min-width: 150px; }
.site-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.site-footer a { display: block; color: #99a5b6; padding: 4px 0; font-size: 14px; }
.site-footer a:hover { color: var(--mag-primary); }
.site-footer .base { border-top: 1px solid #333d4b; padding: 16px 0; text-align: center; font-size: 13px; color: #8a95a6; }

.layout-2col { display: grid; grid-template-columns: 1fr 320px; gap: var(--mag-gap); align-items: start; }
.col-main { display: flex; flex-direction: column; gap: var(--mag-gap); min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: var(--mag-gap); position: sticky; top: 84px; align-self: start; }
.sheet-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== 狀態與輔助 ===== */
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary:focus-visible, .btn-outline:focus-visible { outline: 3px solid rgba(56,169,255,.5); outline-offset: 2px; }
.form-control:disabled { background: var(--mag-surface-2); color: var(--mag-muted); }
.tag-chip { display: inline-block; background: var(--mag-surface-2); color: var(--mag-muted); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: var(--mag-r-sm); }
.tag-chip.hot { background: rgba(255,94,58,.12); color: var(--mag-primary-dk); }
.alert-note { border: 1px solid var(--mag-line); border-left: 4px solid var(--mag-mid); background: var(--mag-surface-2); border-radius: var(--mag-r); padding: 12px 14px; font-size: 14px; color: var(--mag-text); }
.story-body tbody tr:nth-child(even) { background: var(--mag-surface-2); }
.text-muted { color: var(--mag-muted); }
.text-center { text-align: center; }
.divider { border: none; border-top: 1px solid var(--mag-line); margin: 18px 0; }
.skeleton { background: linear-gradient(100deg, var(--mag-surface-2) 40%, #e9eef4 50%, var(--mag-surface-2) 60%); background-size: 200% 100%; animation: mag-shimmer 1.4s infinite; border-radius: var(--mag-r-sm); }
@keyframes mag-shimmer { to { background-position: -200% 0; } }

/* ===== 響應式 ===== */
@media (max-width: 900px) {
  .layout-2col { grid-template-columns: 1fr; }
  .mag-grid { grid-template-columns: 1fr; }
  .col-side { position: static; }
}
@media (max-width: 768px) {
  .masthead-nav { display: none; }
  .card-row-3, .toolwall { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .card-row-3, .toolwall { grid-template-columns: 1fr; }
  .news-card { flex-direction: column; }
  .news-card .thumb { width: 100%; height: 130px; }
  .masthead-cta { display: none; }
  .masthead-toggle { margin-left: auto; }
  .masthead-row { gap: 10px; }
  .wrap { padding-inline: 12px; }
  .mag-grid, .mag-grid > *, .mag-side, .news-card > div { min-width: 0; }
  .mag-lead h2 { font-size: 22px; overflow-wrap: anywhere; }
  .mag-lead .cap { padding: 22px 18px 18px; }
  .mag-lead::after { right: 12px; top: 12px; }
}

/* v2 visual direction: contemporary editorial review */
body { background-image: linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--mag-line) 35%, transparent) 50%, transparent 50.2%); background-size: 72px 100%; }
.masthead { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(16px); background: color-mix(in srgb, var(--mag-surface) 92%, transparent); box-shadow: 0 8px 30px rgba(57,34,22,.06); }
.wrap { max-width: 1320px; }
.mag-lead { border-radius:18px; box-shadow:0 24px 54px rgba(45,25,17,.18); }
.mag-lead .cover { background:radial-gradient(circle at 72% 34%,rgba(255,214,156,.34),transparent 24%),radial-gradient(ellipse at 70% 72%,rgba(30,19,18,.52),transparent 34%),repeating-radial-gradient(ellipse at 73% 70%,transparent 0 18px,rgba(255,255,255,.07) 19px 21px),linear-gradient(135deg,#ff7040 0%,#df351f 45%,#451d1a 100%); }
.mag-lead::after { content:"EDITOR'S PICK"; position:absolute; right:18px; top:18px; border:1px solid rgba(255,255,255,.45); padding:7px 10px; color:#fff; font-size:10px; letter-spacing:.16em; backdrop-filter:blur(8px); }
.card { border-color: color-mix(in srgb, var(--mag-accent) 12%, var(--mag-line)); box-shadow: 0 10px 28px rgba(73,42,24,.07); transition: transform .2s ease, box-shadow .2s ease; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 17px 38px rgba(73,42,24,.12); }
.score-form { border-top: 4px solid var(--mag-accent); }
.btn-primary { box-shadow: 0 9px 20px color-mix(in srgb, var(--mag-accent) 25%, transparent); }

/* mobile hardening — editorial layouts collapse without horizontal clipping */
@media (max-width: 460px) {
  html, body { overflow-x: hidden; }
  .masthead-cta { display: none !important; }
  .masthead-row, .wrap { width: 100%; max-width: 100%; }
  .masthead-row { padding-inline: 12px; }
  .mag-grid { display: block; }
  .mag-side { margin-top: var(--mag-gap); }
  .mag-grid, .mag-grid > *, .mag-lead, .mag-side, .news-card, .news-card > div {
    width: 100%; min-width: 0; max-width: 100%;
  }
  .mag-lead h2, .news-card h3 { overflow-wrap: anywhere; }
}

/* ============================================================
   廣告版位（promo-box）——占位示意；正式站預設 hidden 由 loader 展開，空則塌陷
   贊助標示：廣告 ｜ 命名沿用語意 kebab + is-* 慣例
   ============================================================ */
[hidden] { display: none !important; }                 /* 無廣告塌陷保底 */

.promo-box { position: relative; min-width: 0; }
.promo-tag {
  display: inline-block; font-family: var(--mag-font-head);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--mag-primary);
  border-radius: var(--mag-r-sm); padding: 2px 9px; margin-bottom: 8px;
}
/* 占位示意：斜紋虛線框＋版位名＋尺寸（TOP/SIDE/STICKY） */
.promo-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 90px; padding: 16px; text-align: center; color: var(--mag-muted);
  border: 1.5px dashed var(--mag-line-strong); border-radius: var(--mag-r);
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb, var(--mag-primary) 8%, transparent) 11px 12px),
    var(--mag-surface-2);
}
.promo-ph-name { font-family: var(--mag-font-head); font-weight: 800; font-size: 14px; letter-spacing: .1em; color: var(--mag-text); }
.promo-ph-size { font-size: 12px; font-variant-numeric: tabular-nums; }
.promo-box.is-side .promo-ph { min-height: 250px; }
.promo-box.is-side-b .promo-ph { min-height: 320px; }

/* 原生位：容器沿用 .card 皮膚，浮動廣告標＋原生內容 */
.promo-box.is-native > .promo-tag { position: absolute; right: 16px; top: 16px; margin: 0; z-index: 3; }
.promo-nat { display: flex; gap: 13px; align-items: flex-start; }
.promo-nat-thumb { width: 58px; height: 58px; border-radius: var(--mag-r-sm); background: linear-gradient(135deg, var(--mag-primary), var(--mag-flare)); display: grid; place-items: center; font-size: 26px; color: #fff; flex: none; }
.promo-nat-b { min-width: 0; flex: 1; }
.promo-nat-h { font-family: var(--mag-font-head); font-weight: 700; font-size: 16px; line-height: 1.3; padding-right: 46px; }
.promo-nat-d { color: var(--mag-muted); font-size: 13px; margin-top: 4px; }
.promo-nat-cta { margin-top: 12px; }
.promo-hint { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .04em; color: var(--mag-muted); opacity: .82; }
/* 文內原生（AD-ARTICLE）——左槓小卡，標示改內聯不浮動 */
.promo-box.is-inart { border: 1px solid var(--mag-line); border-left: 3px solid var(--mag-primary); border-radius: var(--mag-r); background: var(--mag-surface-2); padding: 14px 16px; margin: 1.3em 0; }
.promo-box.is-inart > .promo-tag { position: static; margin: 0 0 8px; }
.promo-box.is-inart .promo-nat-thumb { width: 44px; height: 44px; font-size: 21px; }
.promo-box.is-inart .promo-nat-h { font-size: 15px; padding-right: 0; }

/* 行動底部 sticky（≤768 顯示、≤56px、× 可關；坐落共用底部 tab 正上方，z-index 高於 shell 浮層） */
.promo-chk { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.promo-box.is-sticky { display: none; }
@media (max-width: 768px) {
  .promo-box.is-sticky {
    position: fixed; left: 8px; right: 8px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 1300;
    box-sizing: border-box; height: 54px; margin: 0; padding: 0 8px 0 12px;
    display: flex; align-items: center; gap: 10px;
    background: var(--mag-surface); border: 1px solid var(--mag-line);
    border-radius: var(--mag-r); box-shadow: var(--mag-shadow);
  }
  .promo-box.is-sticky .promo-tag { margin: 0; flex: none; }
  .promo-box.is-sticky .promo-ph { flex: 1; min-width: 0; min-height: 0; padding: 0; border: none; background: none; flex-direction: row; gap: 8px; justify-content: flex-start; align-items: baseline; }
  .promo-box.is-sticky .promo-ph-name { font-size: 12px; letter-spacing: .06em; }
  .promo-box.is-sticky .promo-ph-size { font-size: 11px; white-space: nowrap; }
  .promo-x { flex: none; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--mag-text); background: var(--mag-surface-2); border: 1px solid var(--mag-line); }
  .promo-chk:checked ~ .promo-box.is-sticky { display: none; }
}

/* ============================================================
   手機廣告強化（只在 ≤768px 生效；桌機完全不變）
   側欄回流／AD-RESULT 大 CTA／AD-STICKY 迷你 CTA 條／AD-INTERSTITIAL 插頁／CTA 加大
   全用既有語意變數（--mag-*），雙模式自動跟隨
   ============================================================ */
/* 桌機基態：回流卡與插頁不顯示、示範鈕不顯示（桌機保持原樣） */
.promo-box.is-reflow { display: none; }
.promo-box.is-interstitial { display: flex; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.promo-inter-demo { display: none; }

@media (max-width: 768px) {
  /* 1) 側欄回流：桌機側欄版位隱藏、feed 內回流原生卡顯示 */
  .promo-box.is-side, .promo-box.is-side-b { display: none; }
  .promo-box.is-reflow { display: block; }

  /* 5) 手機 CTA 全面加大：所有廣告版位 CTA ≥44px、字 ≥15px；原生卡整卡可點 */
  .promo-box.is-native { cursor: pointer; }
  .promo-box .btn { min-height: 44px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
  .promo-nat-cta { margin-top: 14px; }
  .promo-nat-cta .btn { width: 100%; }

  /* 2) AD-RESULT 手機大 CTA：整卡全寬、CTA 全寬 ≥48px、整卡可點 */
  .promo-box.is-result .promo-nat { flex-direction: column; }
  .promo-box.is-result .promo-nat-h { padding-right: 0; }
  .promo-box.is-result .promo-nat-cta .btn { min-height: 48px; font-size: 16px; }

  /* 3) AD-STICKY 迷你 CTA 條：廣告標＋圖示＋一句文案＋CTA 鈕＋× */
  .promo-box.is-sticky { height: auto; min-height: 54px; max-height: 56px; padding: 7px 8px 7px 12px; gap: 8px; }
  .promo-mini-ico { flex: none; font-size: 20px; line-height: 1; }
  .promo-mini-txt { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .promo-mini-cta {
    flex: none; min-height: 40px; padding: 0 14px; border-radius: var(--mag-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mag-font-head); font-weight: 700; font-size: 14px;
    background: var(--mag-primary); color: #fff; white-space: nowrap; text-decoration: none;
  }
  .promo-mini-cta:hover { background: var(--mag-primary-dk); }

  /* 4) AD-INTERSTITIAL 插頁：預設關，點示範鈕才出；遮罩 z-index 高於 sticky／底部 tab */
  .promo-inter-demo {
    display: inline-flex; align-items: center; gap: 4px;
    position: fixed; top: calc(env(safe-area-inset-top, 0px) + 70px); left: 10px; z-index: 1250;
    padding: 7px 12px; border-radius: var(--mag-r); cursor: pointer;
    font-family: var(--mag-font-head); font-weight: 700; font-size: 12px;
    color: var(--mag-primary); background: var(--mag-surface);
    border: 1.5px dashed var(--mag-primary); box-shadow: var(--mag-shadow-sm);
  }
  .promo-inter-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); cursor: pointer; }
  .promo-inter-card {
    position: relative; z-index: 1; width: min(92vw, 360px);
    background: var(--mag-surface); border: 1px solid var(--mag-line);
    border-radius: var(--mag-r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.5);
    padding: 24px 20px 20px; text-align: center;
  }
  .promo-box.is-interstitial .promo-tag { position: static; display: inline-block; margin: 0 0 12px; }
  .promo-inter-thumb { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: var(--mag-r); background: linear-gradient(135deg, var(--mag-primary), var(--mag-flare)); font-size: 30px; color: #fff; }
  .promo-inter-h { font-family: var(--mag-font-head); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--mag-text); }
  .promo-inter-d { color: var(--mag-muted); font-size: 14px; margin-top: 8px; }
  .promo-inter-cta { margin-top: 16px; }
  .promo-inter-cta .btn { width: 100%; min-height: 48px; font-size: 16px; display: flex; align-items: center; justify-content: center; }
  .promo-inter-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 18px; color: var(--mag-text); background: var(--mag-surface-2); border: 1px solid var(--mag-line); }
  .promo-inter-skip { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--mag-muted); cursor: pointer; }
  .promo-inter-chk:checked ~ .promo-box.is-interstitial { display: flex !important; }
}