/* ============================================================
   dopa-index style-v2 —— 視覺基座（2026-08 重構）
   品牌：dopa-index（多巴胺主站官方情報前哨站）
   語彙正本：主站首頁源檔 dopa-home-index-readable.html。
   token 值與元件寫法照抄主站，不自創；theme 紅 #e60012／金 #ffd700
   不進 token，僅在一番賞語境的強調色個案使用。
   結構：token → 基礎 → 版面原語 → 元件 → guardrail → 桌機 media query。
   手機優先：基準樣式即手機版；guardrail 之後只允許 media query 區塊。
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DotGothic16&display=swap");

/* ---- 1. Token（值＝主站正本） ---- */

:root {
  --ink: #171717;
  --muted: #4f5560;
  --line: #2e2e2e;
  --paper: #f7f7f2;
  --panel: #f7f7f2;
  --screen: #10100f;
  --screen-2: #181816;
  --red: #c9161f;
  --red-deep: #7f1015;
  --yellow: #ffd600;
  --blue: #2459b8;
  --mint: #1f654e;
  --violet: #4c3b87;
  --shadow: 1px 1px 0 rgba(23,23,23,.85);
  --radius: 10px;
  --radius-sm: 6px;
}

/* ---- 2. 基礎 ---- */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "DotGothic16", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", monospace, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

/* 數字、徽章走等寬字，對齊主站計數器寫法 */
.num,
.badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

img {
  max-width: 100%;
  height: auto;
}

/* 像素圖必加，避免瀏覽器把點陣圖平滑化 */
img.pixel {
  image-rendering: pixelated;
}

/* ---- 3. 版面原語 ---- */

.container {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

/* 卡片牆：手機 2 欄；桌機欄數在檔尾 media query 內提升 */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 4. 元件 ---- */

/* 按鈕：主站 .btn 語彙——2px 墨邊、硬陰影、hover 位移＋放大陰影 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}

.btn--red {
  background: var(--red);
  color: #fff;
}

.btn--yellow {
  background: var(--yellow);
  color: var(--ink);
}

.btn--blue {
  background: var(--blue);
  color: #fff;
}

/* 卡片：2px 墨邊＋3px 硬陰影 */
.card {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 3px 3px 0 rgba(23,23,23,.85);
  overflow: hidden;
}

.card--sm {
  border-radius: var(--radius-sm);
}

.card__body {
  padding: 12px;
}

/* 區段標題：主站 .section-head 語彙——深底、細掃描線、白字 */
.sec-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px),
    #242420;
  color: #fff;
  box-shadow: var(--shadow);
}

.sec-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.1;
}

/* 紅黃藍像素塊：本體紅方塊，黃、藍以 box-shadow 疊出（主站原寫法）。
   ⚠️ box-shadow 不佔版面寬度：只靠 flex gap 的話，最右邊那個藍塊會疊到標題
   第一個字上（T2.3 首次使用 .sec-title 時實測 2px 重疊）。用 margin-right
   把陰影外溢的 8px 補回來。 */
.sec-title h2::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid var(--ink);
  background: var(--red);
  box-shadow: 4px 0 0 var(--yellow), 8px 0 0 var(--blue);
}

.sec-title p {
  margin: 0;
  color: #d7d0bd;
  font-size: 13px;
  font-weight: 700;
}

/* 黑螢幕面板：主站 hero 螢幕語彙——漸層黑底＋細掃描線 */
.screen-panel {
  position: relative;
  padding: clamp(14px, 2.4vw, 24px);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #1b1b1a, var(--screen));
  color: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 左上角小標籤 slot：墨底黃字（主站 hero 標籤原寫法） */
.screen-panel__label {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--yellow);
  font-family: "Arial Black", Impact, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

/* 抽賞剩餘進度條：軌淺、條黃（裁定② 2026-08-24）。
   條寬＝**剩餘比例**（裁定①）：剩越少條越短，模板以行內 width 設定
   （SSR＝live.py `_remaining_pct()`、client＝enhance.js `updateProgress()`）。
   條內無文字，黃底不承載疊印。 */
.progress {
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: #e5e2d8;
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--yellow);
}

/* 徽章：等寬字由基礎區的 .badge 字族規則供應 */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

/* 免單徽章：黃底墨字 */
.badge--free {
  background: var(--yellow);
  color: var(--ink);
}

/* CRT 背景：掃描線＋點陣（主站 html 背景原寫法）；只用於 hero 區 */
.crt-bg {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 2px, transparent 2px 6px) 0 0 / 100% 6px,
    radial-gradient(circle, rgba(23,23,23,.72) 1px, transparent 1.25px) 0 0 / 14px 14px,
    var(--paper);
  animation: crt-scan 2.4s linear infinite;
}

@keyframes crt-scan {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 48px, 0 0, 0 0;
  }
}

/* ---- 4b. /ip 套組頁（T2.3）----
   版位順序＝spec §4：H1 → 導購狀態卡（首屏） → 獎項一覽 → 發售資訊 →
   情報解說 → 同作品其他套組 → 底部 CTA。
   ⚠️ 唯一的行內樣式是 .progress__bar 的 width（資料驅動、每天不同，做不成
   class；§4 .progress 的註解已載明）。其餘一律走 class。 */

.wave-page {
  padding: 16px 0 8px;
}

.wave-head {
  margin: 0 0 14px;
}

.wave-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.wave-h1 {
  margin: 0 0 8px;
  font-size: clamp(21px, 5.4vw, 30px);
  line-height: 1.25;
}

.wave-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.wave-sec {
  margin: 22px 0 0;
}

/* --- 導購狀態卡：三態共用外殼（黑螢幕面板語彙） --- */

.buy-card {
  margin: 14px 0 0;
}

.buy-card__h {
  margin: 0 0 6px;
  font-size: clamp(18px, 4.6vw, 24px);
  line-height: 1.2;
}

.buy-card__name {
  margin: 0 0 10px;
  color: #d7d0bd;
  font-size: 13px;
  line-height: 1.5;
}

.buy-card__lead {
  margin: 0 0 12px;
  color: #d7d0bd;
  font-size: 13px;
  line-height: 1.7;
}

.buy-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.buy-card__cta {
  margin: 14px 0 0;
}

/* CTA 在手機上撐滿：主要出口不該是一顆需要瞄準的小按鈕 */
.buy-card__cta .btn {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}

.buy-card__note {
  margin: 10px 0 0;
  color: #a8a294;
  font-size: 11px;
  line-height: 1.6;
}

/* 各賞級剩餘：事實列表，不做「剩很少快來抽」之類的煽動語 */
.tier-remain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.tier-remain__i {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid #4a4a42;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

/* 完抽賞級（裁定③ 2026-08-24）：灰化＋刪除線＋「終了」像素貼紙。
   貼紙用 ::after 綁在 is-out 上——SSR 與 enhance.js 切換的是同一個 class，
   貼紙跟著 class 走，就不會出現 SSR/client 兩份語意。
   刪除線直接下在兩個 span：text-decoration 不穿透 flex item。 */
.tier-remain__i.is-out {
  position: relative;
  color: #8b8677;
}

.tier-remain__i.is-out .tier-remain__t,
.tier-remain__i.is-out .tier-remain__n {
  text-decoration: line-through;
}

.tier-remain__i.is-out::after {
  content: "終了";
  position: absolute;
  top: -7px;
  right: -5px;
  padding: 1px 4px;
  border: 1px solid var(--paper);
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.4;
  transform: rotate(-6deg);
  box-shadow: var(--shadow);
}

.tier-remain__t {
  font-weight: 900;
}

.tier-remain__n {
  white-space: nowrap;
}

/* series_live：同作品在售卡 ≤4 張，各自直連商品頁 */
.buy-alt {
  margin: 0;
  padding: 0;
  list-style: none;
}

.buy-alt__i {
  overflow: hidden;
}

.buy-alt__a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
}

.buy-alt__a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.buy-alt__n {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

.buy-alt__m {
  color: var(--muted);
  font-size: 11px;
}

/* --- 獎項一覽：圖鑑格（裁定⑤ 2026-08-24）---
   每賞級一張卡＝官方獎項圖＋賞級標＋賞品名；手機 2 欄、桌機 4 欄（檔尾
   media query）。無圖賞級走 .emoji-fallback（article.py 同款模式），格子照出。
   圖框語彙照 §4g .art-prize-img（白底、contain 不裁圖）。 */

.prize-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prize-list__i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 10px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--panel);
  text-align: center;
}

.prize-list__fig {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

.prize-list__fig img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.prize-list__fig .emoji-fallback {
  color: var(--muted);
  font-size: 40px;
}

.prize-list__t {
  flex: none;
}

.prize-list__n {
  font-size: 12px;
  line-height: 1.5;
}

/* --- 發售資訊 --- */

.wave-info {
  display: grid;
  gap: 12px;
}

.wave-figure {
  margin: 0;
}

.wave-figure img {
  display: block;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}

/* 窄螢幕時表格自己捲，頁面本體不得橫向捲動 */
.spec-wrap {
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.spec-table th,
.spec-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #d8d5c8;
  text-align: left;
  vertical-align: top;
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: 0;
}

.spec-table th {
  width: 6.5em;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

/* --- 同作品其他套組 --- */

.wave-rel {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wave-rel__i {
  overflow: hidden;
}

.wave-rel__a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
}

.wave-rel__a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.wave-rel__k {
  color: var(--muted);
  font-size: 11px;
}

.wave-rel__t {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

/* --- 底部 CTA 列 --- */

.linkrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- 情報解說內文（.wave-article）——T4.1 自 style.css 遷入 ----
   內文 HTML 由 scripts/prerender_lib/article.py 產生（.art-* 語彙），全部
   scope 在 .wave-article 底下。遷入時把舊 Famicom 紙感 token（--cream／
   --line-2／--brand…）翻譯成本檔 token；舊檔的 var(--brand) 從未被定義，
   賞級小丸標（.art-prize-tier）實際上是白字透明底＝隱形，本次一併修復。
   ⚠️ .art-img 與 .emoji-fallback 今天沒有任何產出頁用到，但 article.py 的
   `![alt](url)` 與「無圖賞位」路徑會產生它們——規則要留著，砍掉的話下一篇
   帶圖文章就是裸的（css_coverage 也會紅）。 */

.wave-article {
  max-width: 820px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.85;
}

.wave-article h2 {
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d8d5c8;
  font-size: 18px;
}

.wave-article h2:first-child {
  margin-top: 0;
}

.wave-article h3 {
  margin: 20px 0 6px;
  font-size: 15px;
}

.wave-article p {
  margin: 0 0 14px;
  color: var(--muted);
}

.wave-article strong {
  color: var(--ink);
  font-weight: 900;
}

.wave-article a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wave-article a:hover {
  opacity: .8;
}

/* 主視覺／一般圖片框：§4b .wave-figure img 同一語彙（2px 墨邊） */
.wave-article .art-hero {
  margin: 18px 0 22px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.wave-article .art-img {
  margin: 16px 0 22px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.wave-article .art-hero img,
.wave-article .art-img img {
  display: block;
  width: 100%;
  height: auto;
}

.wave-article .art-img figcaption {
  padding: 8px 14px;
  border-top: 1px solid #d8d5c8;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* 單一賞位公仔圖（[[prize:X]]）：置中大圖＋賞級標＋名稱 */
.wave-article .art-prize {
  margin: 16px 0 22px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.wave-article .art-prize-img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--panel);
}

.wave-article .art-prize-img img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.wave-article .art-prize-img .emoji-fallback {
  color: var(--muted);
  font-size: 48px;
}

.wave-article .art-prize figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid #d8d5c8;
  background: #fff;
  font-size: 13px;
  text-align: center;
}

/* 賞級標：墨底白字的中性標籤——紅底留給「現正開抽」、黃底留給免單（§4 語意） */
.wave-article .art-prize-tier {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.wave-article .art-prize-name {
  display: block;
  line-height: 1.4;
}

/* 2–3 張賞位圖並排 */
.wave-article .art-prize-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 22px;
}

.wave-article .art-prize-row .art-prize {
  margin: 0;
}

.wave-article .art-prize-row .art-prize-img {
  aspect-ratio: 1 / 1;
}

/* 重點摘要框（> 引用區塊）：黃調紙底＝「重點」語意（§4g .text-mark 同源） */
.wave-article .art-callout {
  margin: 18px 0 24px;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: #fff6cf;
  box-shadow: var(--shadow);
}

.wave-article .art-callout-h {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.wave-article .art-callout p {
  margin: 0 0 8px;
  color: var(--ink);
}

.wave-article .art-callout p:last-child {
  margin-bottom: 0;
}

.wave-article .art-callout ul {
  margin: 0;
  padding-left: 20px;
}

.wave-article .art-callout li {
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.75;
}

.wave-article .art-callout li:last-child {
  margin-bottom: 0;
}

/* 內文條列 */
.wave-article ul.art-list {
  margin: 12px 0 18px;
  padding-left: 22px;
}

.wave-article ul.art-list li {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.8;
}

.wave-article ul.art-list li strong {
  color: var(--ink);
}

/* ---- 4c. 首頁（T2.4；版位序改於 2026-08-24 裁定④）----
   版位順序：H1 → 焦點大卡（首屏） → 本月新賞 → 現正開抽卡片牆（兩區） →
   作品入口 → 指南與驗證。
   焦點大卡沿用 §4 的 .screen-panel／.progress／.badge 與 §4b 的
   .buy-card__meta／.tier-remain（事實區由 live.py 的
   `_live_detail_ssr()` 一份程式碼供應，/ip 與首頁共用，避免兩邊各長一套）。
   ⚠️ 卡片牆的**卡片本身**（.livegrid*）2026-08-24 T2.5 起搬到 §4d：那批卡
   /live 也在用，留在「首頁」節裡會讓下一個人以為改它只影響首頁。
   ⚠️ 唯一的行內樣式一樣是 .progress__bar 的 width（資料驅動）。 */

.home {
  padding: 16px 0 8px;
}

.home-head {
  margin: 0 0 14px;
}

.home-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.home-h1 {
  margin: 0 0 8px;
  font-size: clamp(21px, 5.4vw, 32px);
  line-height: 1.25;
}

.home-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.home-sec {
  margin: 22px 0 0;
}

/* --- 焦點大卡 --- */

.home-hero {
  margin: 14px 0 0;
}

.home-hero__h {
  margin: 0 0 10px;
  font-size: clamp(19px, 4.8vw, 26px);
  line-height: 1.2;
}

.home-hero__body {
  display: grid;
  gap: 12px;
}

.home-hero__fig {
  margin: 0;
}

.home-hero__fig img {
  display: block;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
}

/* grid item 預設 min-width:auto——長商品名會把欄撐爆、整頁橫向捲動 */
.home-hero__facts {
  min-width: 0;
}

.home-hero__name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
}

.home-hero__sub {
  margin: 0 0 12px;
  color: #d7d0bd;
  font-size: 12px;
  line-height: 1.6;
}

.home-hero__sub a {
  color: var(--yellow);
}

.home-hero__cta {
  margin: 14px 0 0;
}

/* 主要出口在手機上撐滿：不該是一顆需要瞄準的小按鈕（同 .buy-card__cta） */
.home-hero__cta .btn {
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}

.home-hero__note {
  margin: 12px 0 0;
  color: #a8a294;
  font-size: 11px;
  line-height: 1.6;
}

/* --- 本月新賞 --- */

.home-new {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-new__i {
  overflow: hidden;
}

.home-new__a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
}

.home-new__a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.home-new__k {
  color: var(--muted);
  font-size: 10px;
}

.home-new__t {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

/* --- 作品入口／指南 pill --- */

.home-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}

.pill b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

/* --- 區塊尾的次要出口與註腳 --- */

.home-more {
  margin: 12px 0 0;
}

.home-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* --- 信任區 --- */

.home-trust {
  margin: 12px 0 0;
}

.home-trust__h {
  margin: 0 0 8px;
  font-size: 14px;
}

.home-trust p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.75;
}

.home-trust p:last-child {
  margin-bottom: 0;
}

/* 內文連結必須看得出來是連結：style.css 把全域 a 設成同色無底線，段落中間的
   連結因此和內文一模一樣（實測 color 都是 rgb(23,23,23)、decoration:none）。
   看不出來的連結等於沒有連結——沒有人會點，而且沒有任何閘門會叫。 */
.home-trust a {
  color: var(--ink);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- 4d. 可抽商品卡（首頁牆與 /live 共用）＋ /live 總覽頁（T2.5）----
   卡片語彙**一份**：首頁卡片牆（§4c 的版位）與 /live 全列表畫的是同一張卡，
   由 live.py `_live_grid_card_ssr()` 一支程式碼供應。類名不帶 home- 前綴就是
   為了這個——兩頁共用卻叫 .home-* ，下一個人只會照著在 /live 再長一套。
   /live 頁自己的殼（.live-page／.live-head／.live-sec…）沿用 §4b、§4c 既有的
   頁型前綴慣例（.wave-*／.home-*），刻意不共用：那些只是間距，共用的收益
   抵不過「改首頁間距順手改壞 /live」的風險。
   ⚠️ 唯一的行內樣式仍是 .progress__bar 的 width（資料驅動，見 §4 .progress）。 */

/* --- 可抽商品卡（<ul class="livegrid grid"> ＋ <li class="livegrid__i">）--- */

.livegrid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.livegrid__i {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.livegrid__a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
}

/* 類型標籤（一番賞／景品賞／大物賞／戰鬥陀螺…）壓在卡圖左上角。
   墨底紙字，刻意**不用**黃色——黃色在本站的語意是免單活動（.badge--free），
   兩件不同的事共用一個顏色，讀者只會學到「黃色＝某種好康」。 */
.livegrid__fig {
  position: relative;
  display: block;
}

.livegrid__type {
  position: absolute;
  left: 5px;
  top: 5px;
  border-color: var(--paper);
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
}

/* 沒有商品圖時的退路：標籤改排在名稱上方（見 live.py `_live_grid_card_ssr`） */
.livegrid__types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 16:9＝主站商品縮圖的原生比例（實測 300×169）。用 4:3 會把上下各裁掉一截，
   而商品圖的主體通常就在正中間偏上——裁掉的是臉。 */
.livegrid__a img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.livegrid__n {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

.livegrid__m {
  color: var(--muted);
  font-size: 11px;
}

/* 卡內的「去抽」是 <span>，不是第二個連結：整張卡本身就是那個連結，
   巢狀 <a> 在 HTML 無效。margin-top:auto 讓它在不等高的卡片裡對齊底部。 */
.livegrid__go {
  width: 100%;
  min-height: 34px;
  margin-top: auto;
  font-size: 12px;
}

.livegrid__info {
  padding: 7px 8px;
  border-top: 2px solid var(--ink);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.livegrid__info:hover {
  background: var(--yellow);
}


/* --- /live 總覽頁的殼 --- */

.live-page {
  padding: 16px 0 8px;
}

.live-head {
  margin: 0 0 14px;
}

.live-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.live-h1 {
  margin: 0 0 8px;
  font-size: clamp(21px, 5.4vw, 30px);
  line-height: 1.25;
}

.live-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.live-sec {
  margin: 22px 0 0;
}

.live-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* 空狀態（drawable==0）。內部元素不另給 class：這一態今天不會出現，
   多一個 class 就多一條要靠 check_css_coverage 才發現漏掉的樣式。 */
.live-empty {
  margin: 14px 0 0;
}

.live-empty h2 {
  margin: 0 0 10px;
  font-size: clamp(19px, 4.8vw, 26px);
  line-height: 1.2;
}

.live-empty p {
  margin: 0 0 12px;
  color: #d7d0bd;
  font-size: 13px;
  line-height: 1.6;
}

.live-empty p:last-child {
  margin-bottom: 0;
}

/* ---- 4e. /new 新賞情報頁（T2.6）----
   合併 this-month-kuji／upcoming-kuji／calendar 三頁的新頁型。
   殼類（.new-page／.new-head／.new-sec…）沿用 §4c、§4d 的頁型前綴慣例，
   刻意不與 .home-*／.live-* 共用（同一條理由：那些只是間距，共用的收益
   抵不過「改別頁間距順手改壞本頁」的風險）。
   新賞卡（.new-wave*）與 §4d 的 .livegrid* 是不同語彙：livegrid 的主動作是
   「去抽」（主站直連），new-wave 的主動作是「看情報」（/ip 頁）、直連只是
   liveStatus=="live" 時的卡底次要出口——共用會把兩種卡的語意攪在一起。
   ⚠️ 本頁無行內樣式（沒有進度條）。 */

.new-page {
  padding: 16px 0 8px;
}

.new-head {
  margin: 0 0 14px;
}

.new-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.new-h1 {
  margin: 0 0 8px;
  font-size: clamp(21px, 5.4vw, 30px);
  line-height: 1.25;
}

.new-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.new-sec {
  margin: 22px 0 0;
}

/* 即將上架區的月份分組標題（calendar 月視角的併入點） */
.new-month {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 16px 0 8px;
  font-size: 15px;
  line-height: 1.2;
}

.new-month__n {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

/* --- 新賞卡 --- */

.new-wave {
  margin: 0;
  padding: 0;
  list-style: none;
}

.new-wave__i {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.new-wave__a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
}

/* 4:3＝官方套組主視覺的慣用比例（§4c .home-new__a img 同一個值，同一批資產） */
.new-wave__a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.new-wave__k {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.new-wave__t {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

/* 「開抽中」事實徽章：紅底白字＝本站「現正開抽」的既有語意（.btn--red 同源）。
   不用黃色——黃色在本站語意是免單活動（§4 .badge--free）。 */
.new-wave__live {
  border-color: var(--ink);
  background: var(--red);
  color: #fff;
  font-size: 10px;
}

/* 卡底直連（次要出口，僅 live 套組有）：與 §4d .livegrid__info 同構的
   border-top 條，但紅底——它是導購出口，不是站內資訊連結。 */
.new-wave__go {
  padding: 7px 8px;
  border-top: 2px solid var(--ink);
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.new-wave__go:hover {
  background: var(--red-deep);
}

/* --- 承接文區塊（this-month／upcoming 兩頁說明文的落點） --- */

.new-guide {
  margin: 0;
}

.new-guide h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.new-guide h3 + p {
  margin-top: 0;
}

.new-guide p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.75;
}

.new-guide p:last-child {
  margin-bottom: 0;
}

/* 內文連結要看得出是連結（§4c .home-trust a 同一條教訓） */
.new-guide a {
  color: var(--ink);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.new-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* ---- 4f. /series 作品圖鑑（T2.7）----
   hub（/series 的 .serieshub* 格）與作品頁（/series/{sid} 的 .serieswave* 套組卡）。
   殼類沿用頁型前綴慣例（§4c–§4e 同一條理由：間距不跨頁共用）。
   頁首導購列直接用 §4d 的 .livegrid* 卡（T2.5 已一般化；差別只有
   cta_location／utm 由呼叫端傳入），橫列上限 4 張配 .grid--4。
   套組卡與 §4e 的 .new-wave* 同構（主動作都是「看情報」＝/ip 頁）但不共用
   ——共用會把「改 /new 順手改壞 /series」變成可能。 */

.series-page {
  padding: 16px 0 8px;
}

.series-head {
  margin: 0 0 14px;
}

.series-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.series-h1 {
  margin: 0 0 8px;
  font-size: clamp(21px, 5.4vw, 30px);
  line-height: 1.25;
}

.series-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.series-sec {
  margin: 22px 0 0;
}

.series-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* 註腳裡的連結要看得出是連結（§4c .home-trust a 同一條教訓） */
.series-note a {
  margin-left: 6px;
  color: var(--ink);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 套組卡（作品頁歷代套組列表；data-sale-ym 給 T2.10 排序切換用） --- */

.serieswave {
  margin: 0;
  padding: 0;
  list-style: none;
}

.serieswave__i {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.serieswave__a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
}

/* 4:3＝官方套組主視覺的慣用比例（§4e .new-wave__a img 同一個值，同一批資產） */
.serieswave__a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.serieswave__k {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
}

.serieswave__t {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

/* 「開抽中」事實徽章：紅底白字＝「現正開抽」既有語意（§4e .new-wave__live 同款；
   黃色不可用——本站黃色語意是免單活動） */
.serieswave__live {
  border-color: var(--ink);
  background: var(--red);
  color: #fff;
  font-size: 10px;
}

/* 排序切換鈕（T2.10 enhance.js 動態插進 .sec-title；無 JS＝無鈕＝預設新→舊。
   check_css_coverage 掃不到 JS 插入的 class，本條規則的消失只能靠人眼） */
.serieswave-sort {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

/* --- hub 作品格（文字格：作品名＋套組數＋可抽標記） --- */

.serieshub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.serieshub__i {
  display: flex;
}

.serieshub__a {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 10px;
  color: var(--ink);
  text-decoration: none;
}

.serieshub__t {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.serieshub__m {
  color: var(--muted);
  font-size: 11px;
}

/* 「可抽」事實標記：紅底白字＝「現正開抽」既有語意（同 .serieswave__live） */
.serieshub__live {
  border-color: var(--ink);
  background: var(--red);
  color: #fff;
  font-size: 10px;
}

/* ---- 4g. /guides 指南（T2.8）＋ SEO 主題頁殼（T2.9 就地掛名）----
   hub（/guides 的 .guidehub* 格）與詳頁（/guides/{slug} 的 .guide-page 殼）。
   SEO 主題頁（/ichiban-kuji /prize-figure /gk）的殼類 .topic-* 與本區指南殼
   共用同一組規則（compound selector 就地加名，改一處兩頁型同動——分抄兩份
   就會漂移）；主題頁獨有的元素在檔尾 §4h。
   殼類沿用頁型前綴慣例（§4c–§4f 同一條理由：間距不跨頁共用）。
   ⚠️ 類名刻意避開 site/style.css 的 .guide-visual／.guide-aside／.guide-faq
   等舊名——過渡期兩份 CSS 並載，同名會讓舊樣式滲進新版面。
   詳頁內文（.gart）是長文語彙：h2＋段落＋步驟 <ol>（.gsteps，fairness 用），
   側欄（.gaside）手機直落、桌機貼右（media query 區）。 */

.guides-page,
.guide-page,
.topic-page {
  padding: 16px 0 8px;
}

.guides-head,
.guide-head,
.topic-head {
  margin: 0 0 14px;
}

.guides-kicker,
.guide-kicker,
.topic-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.guides-h1,
.guide-h1,
.topic-h1 {
  margin: 0 0 8px;
  font-size: clamp(21px, 5.4vw, 30px);
  line-height: 1.25;
}

.guides-lead,
.guide-lead,
.topic-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.guides-sec,
.guide-sec,
.topic-sec {
  margin: 22px 0 0;
}

/* --- hub 指南卡 --- */

.guidehub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guidehub__i {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.guidehub__a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
}

.guidehub__fig {
  display: block;
}

/* 16:9＝指南卡用主視覺當氛圍圖，不是套組主圖語意（4:3 留給套組卡） */
.guidehub__fig img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.guidehub__k {
  color: var(--muted);
  font-size: 10px;
}

.guidehub__t {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

.guidehub__m {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* --- 詳頁：chips／主視覺／重點先看 --- */

.guide-chips,
.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.guide-chips span,
.topic-chips span {
  padding: 3px 8px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.gfig {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  margin: 16px 0 0;
}

.gfig__main {
  position: relative;
}

.gfig__main img,
.gfig__side img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.gfig__tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

.gfig__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

.gfig figcaption {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.ghl {
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.ghl__k {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ghl ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.ghl li {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
}

.ghl li:last-child {
  margin-bottom: 0;
}

/* --- 詳頁：內文＋側欄 --- */

.gcols {
  margin: 22px 0 0;
}

.gart section {
  margin: 0 0 22px;
}

.gart section:last-child {
  margin-bottom: 0;
}

.gart h2 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.35;
}

.gart p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.8;
}

.gart p:last-child {
  margin-bottom: 0;
}

.gsteps {
  margin: 0 0 12px;
  padding: 0 0 0 22px;
}

.gsteps li {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.8;
}

/* 內文行動連結：黃底按鈕條（導流出口要看得出可點；紅底留給主站導購） */
.gcta {
  display: inline-block;
  margin: 2px 0 0;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.gcta:hover {
  background: var(--panel);
}

.gaside {
  margin: 22px 0 0;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
}

.gaside__k {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.gaside__k + .gaside__links {
  margin-bottom: 12px;
}

.gaside__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gaside__links:last-child {
  margin-bottom: 0;
}

.gaside__links a {
  padding: 5px 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.gaside__links a:hover {
  background: var(--yellow);
}

/* --- 詳頁：FAQ／套組對照卡 --- */

.gfaq details {
  margin: 0 0 8px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.gfaq summary {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.gfaq p {
  margin: 0;
  padding: 0 12px 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.gfaq .gcta {
  margin: 0 12px 10px;
}

.gwave {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gwave__i {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gwave__a {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  color: var(--ink);
  text-decoration: none;
}

/* 4:3＝官方套組主視覺的慣用比例（§4e .new-wave__a img 同一批資產） */
.gwave__a img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}

.gwave__k {
  color: var(--muted);
  font-size: 10px;
}

.gwave__t {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.4;
}

/* 內文關鍵句標記（config.TEXT_MARK_PHRASES）：黃色螢光筆——
   舊 style.css 也有 .text-mark，這裡重定義讓新版面吃 token 值。
   .wave-article mark＝文章 ==text== 語法（article.py）的裸 <mark>，
   T4.1 併進同一條：同一枝螢光筆，不做兩種黃 */
.text-mark,
.wave-article mark {
  display: inline;
  padding: 0 .08em .03em;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent 46%, rgba(255, 214, 0, .55) 46%, rgba(255, 214, 0, .55) 92%, transparent 92%);
  color: var(--ink);
  font-weight: 900;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- 4h. SEO 主題頁（T2.9）：/ichiban-kuji /prize-figure /gk ----
   殼類（.topic-page／-head／-kicker／-h1／-lead／-sec／-chips）與 §4g 指南殼
   共用規則（該區 compound selector 就地掛名）。內容原語（.gart／.gsteps／
   .gcta／.gfaq）與可抽商品卡（§4d .livegrid*）直接沿用，不另創同構語彙。
   本區只放主題頁獨有的元素。 */

/* 「現正開抽」區的快照註腳（§4f .series-note 同構：不同頁型不跨區共名） */
.topic-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* 註腳裡的連結要看得出是連結（§4c .home-trust a 同一條教訓） */
.topic-note a {
  margin-left: 6px;
  color: var(--ink);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- 4i. /search 搜尋頁（T2.10）＋ 404 頁（T2.11）----
   殼類沿用頁型前綴慣例（§4c–§4h 同一條理由：間距不跨頁共用）。
   搜尋結果卡直接用 §4f 的 .serieswave* 套組卡（enhance.js 動態插入；
   卡片語彙一份，不另創同構語彙）。404 面板沿用 §4 .screen-panel。 */

.search-page {
  padding: 16px 0 8px;
}

.search-head {
  margin: 0 0 14px;
}

.search-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.search-h1 {
  margin: 0 0 8px;
  font-size: clamp(21px, 5.4vw, 30px);
  line-height: 1.25;
}

.search-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.search-form {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
}

.search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  box-shadow: var(--shadow);
}

.search-form__input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.search-sec {
  margin: 22px 0 0;
}

/* 結果容器：SSR 空狀態與 enhance.js 動態結果共用同一個盒 */
.search-results {
  margin: 0;
}

.search-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* 熱搜區沿用 .linkrow＋.btn；本 class 是 enhance.js 攔截範圍的錨點 */
.search-hot .btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.search-serieslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
}

.search-serieslinks a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- 404（T2.11）：黑螢幕面板置中，出口三顆按鈕 --- */

.nf-page {
  padding: 24px 0 8px;
}

.nf-panel {
  max-width: 640px;
  margin: 0 auto;
}

.nf-h {
  margin: 0 0 10px;
  font-size: clamp(24px, 6vw, 40px);
  line-height: 1.15;
}

.nf-lead {
  margin: 0 0 16px;
  color: #d7d0bd;
  font-size: 14px;
  line-height: 1.7;
}

.nf-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

/* ---- 5. 站台骨架（header／nav／footer）——T2.2 接上基座模板時新增 ----
   §4 的元件類是「頁面內容」的語彙，沒有 chrome 類；header/nav/footer 由
   scripts/prerender.py 逐頁產生，樣式集中在這裡（模板內不寫 inline style）。
   導覽在手機上用橫捲而非漢堡選單：收合需要 JS，JS 掛了導覽就消失。 */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 900;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
}

.site-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
}

.site-head__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.site-head__brand img {
  width: 36px;
  height: 36px;
}

.site-head__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-head__name b {
  font-family: "Arial Black", Impact, "Noto Sans TC", sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
}

.site-head__name small {
  color: var(--muted);
  font-size: 11px;
}

/* CTA 不參與收縮：品牌名在窄螢幕會被壓，但「抽賞去！」是導購主按鈕，
   寧可讓左邊的品牌區讓位也不能讓它縮成兩行。 */
.site-head__cta {
  flex: none;
}

/* 導覽列：手機橫捲。所有項目都在 DOM 裡，沒有需要展開的隱藏層。 */
.site-nav {
  border-top: 2px solid var(--ink);
  background: #242420;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav__row {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

.site-nav a {
  flex: none;
  padding: 10px 12px;
  color: #f2efe4;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.site-nav a:hover {
  background: #34342e;
}

.site-nav a[aria-current="page"] {
  background: var(--red);
  color: #fff;
}

.site-foot {
  margin-top: 32px;
  padding: 20px 0 24px;
  border-top: 2px solid var(--ink);
  background: #242420;
  color: #d7d0bd;
}

.site-foot__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.site-foot__col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site-foot__h {
  color: var(--yellow);
  font-family: "Arial Black", Impact, "Noto Sans TC", sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
}

.site-foot__col a {
  color: #f2efe4;
  font-size: 13px;
  text-decoration: none;
}

.site-foot__col a:hover {
  text-decoration: underline;
}

.site-foot__legal {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid #4a4a42;
  color: #a8a294;
  font-size: 11px;
  line-height: 1.6;
}

/* ⚠️ mobile guardrail——此區之後不得再出現無 media query 的版面規則 */

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sec-title {
    padding: 12px 16px;
  }

  .card__body {
    padding: 14px;
  }

  /* 桌機：導覽收進 header bar 同一列，不再另起一條橫捲列 */
  .site-head__bar {
    min-height: 64px;
  }

  .site-head__brand img {
    width: 44px;
    height: 44px;
  }

  .site-head__name b {
    font-size: 18px;
  }

  .site-head__name small {
    font-size: 12px;
  }

  .site-nav a {
    padding: 11px 16px;
    font-size: 14px;
  }

  .site-foot__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  /* /ip 套組頁（T2.3） */
  .wave-page {
    padding: 24px 0 12px;
  }

  .wave-sec {
    margin: 30px 0 0;
  }

  .buy-card__cta .btn {
    width: auto;
    min-width: 260px;
  }

  .tier-remain {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .buy-alt__n,
  .wave-rel__t {
    font-size: 13px;
  }

  /* 發售資訊：主視覺與規格表並排（無主視覺時表格自己佔滿） */
  .wave-info {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 16px;
  }

  .wave-info > .spec-wrap:only-child {
    grid-column: 1 / -1;
  }

  /* 獎項圖鑑格：桌機 4 欄（手機 2 欄＝§4b 基準值） */
  .prize-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .spec-table {
    font-size: 14px;
  }

  /* 情報解說內文（T4.1 遷入；基準值＝手機） */
  .wave-article {
    font-size: 15px;
  }

  .wave-article h2 {
    margin-top: 36px;
    font-size: 20px;
  }

  .wave-article .art-prize-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
  }

  .wave-article .art-callout {
    padding: 18px 20px 14px;
  }

  /* 首頁（T2.4） */
  .home {
    padding: 24px 0 12px;
  }

  .home-sec {
    margin: 30px 0 0;
  }

  /* 焦點卡桌機並排：主視覺左、事實與 CTA 右（手機仍是上下堆疊） */
  .home-hero__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 18px;
  }

  .home-hero__cta .btn {
    width: auto;
    min-width: 260px;
  }

  .home-hero__name {
    font-size: 17px;
  }

  .livegrid__n,
  .home-new__t {
    font-size: 13px;
  }

  .livegrid__go {
    font-size: 13px;
  }

  /* /live 總覽頁（T2.5）——與首頁同一組間距 */
  .live-page {
    padding: 24px 0 12px;
  }

  .live-sec {
    margin: 30px 0 0;
  }

  /* /new 新賞情報頁（T2.6）——與首頁同一組間距 */
  .new-page {
    padding: 24px 0 12px;
  }

  .new-sec {
    margin: 30px 0 0;
  }

  .new-wave__t {
    font-size: 13px;
  }

  .new-month {
    font-size: 17px;
  }

  /* /series 作品圖鑑（T2.7）——與其他頁型同一組間距 */
  .series-page {
    padding: 24px 0 12px;
  }

  .series-sec {
    margin: 30px 0 0;
  }

  .serieswave__t {
    font-size: 13px;
  }

  .serieshub__t {
    font-size: 14px;
  }

  /* /guides 指南（T2.8）——與其他頁型同一組間距 */
  .guides-page,
  .guide-page,
  .topic-page {
    padding: 24px 0 12px;
  }

  .guides-sec,
  .guide-sec,
  .topic-sec,
  .search-sec {
    margin: 30px 0 0;
  }

  .guidehub__t,
  .gwave__t {
    font-size: 13px;
  }

  .gcols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: start;
  }

  .gaside {
    margin: 0;
    position: sticky;
    top: 12px;
  }

  .gart h2 {
    font-size: 18px;
  }

  .gart p,
  .gsteps li,
  .gfaq p {
    font-size: 14px;
  }

  .pill {
    min-height: 38px;
    padding: 0 13px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt-bg {
    animation: none;
  }
}