@charset "utf-8";
/* ============================================================
   闆言闆語 MVP — 全站唯一 CSS（復古扁平插畫風）
   調性：嘲諷慣老闆、站打工人這邊的娛樂網站 · zh-TW
   風格語彙：奶油紙底、深藍靛墨、珊瑚紅/芥末黃強調、扁平色塊、
            圓角、細邊、大量留白；無硬陰影、無粗黑全框。
   ============================================================ */

/* -------- 設計變數 -------- */
:root {
  /* 基底調色（奶油紙底、深藍靛墨） */
  --paper:     #EFE6D4;           /* 整頁紙底 */
  --bg:        #EFE6D4;           /* alias：沿用舊名 */
  --card:      #FFFFFF;           /* 白面板 */
  --bg-panel:  #FFFFFF;           /* alias */
  --ink:       #2E3358;           /* 主墨（標題/文字/邊框/插畫主色） */
  --ink-soft:  #4C5170;           /* 次墨（說明文字） */
  --muted:     #8B8577;           /* 灰米說明字 */
  --line:      #2E3358;           /* alias：邊框色 */

  /* 強調色 */
  --coral:     #E96D5E;           /* 珊瑚紅（主強調） */
  --coral-deep:#D2513F;           /* 珊瑚深化（danger） */
  --coral-soft:#F2A79B;           /* 淡珊瑚 */
  --mustard:   #EFC163;           /* 芥末黃 */
  --slate:     #23263F;           /* 深板岩 */
  --sand:      #E3D8C2;           /* 輔助淡沙 */
  --accent:    #E96D5E;           /* alias：主色 */
  --accent-ink:#ffffff;
  --danger:    #D2513F;           /* alias */
  --ok:        #5E9E7E;           /* 柔綠（狀態：公開中） */
  --paper-2:   #E3D8C2;           /* alias：次級底 = sand */

  /* 段位四色階（霧藍灰/芥末/珊瑚/板岩金字） */
  --rank-1: #8B93B0;   /* 菜鳥出氣 — 霧藍灰 */
  --rank-2: #EFC163;   /* 怒火中燒 — 芥末黃 */
  --rank-3: #E96D5E;   /* 理智斷線 — 珊瑚紅 */
  --rank-4: #EFC163;   /* 勞基法之怒 — 金字（配板岩底） */
  --rank-4-bg: #23263F;/* 段位四：板岩深底 */

  /* 六 tag 色票 */
  --tag-bigpie:   #EFC163;   /* 畫大餅 — 芥末黃（深藍字） */
  --tag-guilt:    #E96D5E;   /* 情勒 — 珊瑚紅（白字） */
  --tag-overtime: #2E3358;   /* 凹加班 — 深藍靛（白字） */
  --tag-salary:   #E3D8C2;   /* 薪水話術 — 淡沙（深藍字） */
  --tag-blame:    #23263F;   /* 甩鍋 — 板岩（白字） */
  --tag-quote:    #F2A79B;   /* 名言金句 — 淡珊瑚（深藍字） */

  /* 圓角與框線（扁平：細邊 + 圓角，無硬陰影） */
  --bd:        2px;
  --bd-thick:  2px;
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  /* 柔和陰影（僅淡淡浮起感，非像素硬陰影） */
  --soft:    0 3px 10px rgba(46, 51, 88, .10);
  --soft-sm: 0 2px 6px rgba(46, 51, 88, .08);

  --font-title: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  --font-body:  system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;

  /* -------- Type scale（一致字級，clamp 流暢縮放） -------- */
  --fs-h1:    clamp(1.6rem, 4vw, 2.4rem);
  --fs-h2:    clamp(1.25rem, 2.6vw, 1.6rem);
  --fs-h3:    1.15rem;
  --fs-body:  1rem;         /* 16px 基準 */
  --fs-small: .85rem;
  --lh-title: 1.3;          /* 標題行高 1.25–1.35 */
  --lh-body:  1.7;          /* 內文行高 */

  /* -------- Spacing rhythm（8px 基準的間距刻度） -------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  /* 語意間距（隨斷點在 media query 內覆寫，故各處只引用語意變數） */
  --section-y:   var(--sp-8);   /* section 上下留白：手機 32 → 桌機 48–56 */
  --heading-gap: var(--sp-5);   /* 標題與其下內容 20px（上方 2x 見 h2 規則） */
  --card-pad:    var(--sp-5);   /* 卡片內 padding：手機 20 → 桌機 24 */
  --wall-gap:    var(--sp-5);   /* 卡牆卡間 gap 20px */
  --para-gap:    var(--sp-4);   /* 段落 / stack 間距 16px */
  --field-gap:   var(--sp-6);   /* 表單欄位群之間 24px */
  --chip-gap:    10px;          /* chip 群行距 */
}

/* -------- Reset 補強（外層已有 minimal reset） -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  /* 極淡質感漸層，不用圖片 */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
  word-break: break-word;
}
img, canvas, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: var(--lh-title);
  margin: 0 0 var(--heading-gap);   /* 下方留白 1x */
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: 1.25; }
/* 標題上方留白 > 下方（上 2x），讓段落分組清楚；居容器首位時取消上方留白 */
h2 { font-size: var(--fs-h2); font-weight: 800; margin-top: calc(var(--heading-gap) * 2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
:where(h1, h2, h3, h4):first-child { margin-top: 0; }
p { margin: 0 0 var(--para-gap); }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* 外框字副標（大標搭配用） */
.outline-title {
  font-family: var(--font-title);
  font-weight: 900;
  color: var(--ink);                         /* fallback */
  -webkit-text-stroke: 2px var(--ink);
  color: transparent;
  letter-spacing: -.01em;
}

/* -------- 版心 -------- */
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding: 0 20px; }
.section { padding: var(--section-y) 0; }
.stack > * + * { margin-top: var(--para-gap); }
/* ============================================================
   Header / Footer（layout.js 注入）
   ============================================================ */
.site-header {
  border-bottom: var(--bd) solid rgba(46, 51, 88, .12);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.site-header__bar {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
  min-height: 56px;
}
.brand {
  align-self: center;
  display: inline-flex; align-items: center;
  padding: 6px 4px;
}
.brand__logo { display: block; height: 40px; width: auto; }
.brand:hover { text-decoration: none; }
.brand:hover .brand__logo { opacity: .85; }
.site-nav { margin-left: auto; display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex; align-items: center;
  font-family: var(--font-title);
  font-weight: 500; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 14px;
  color: var(--ink);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: background-color .12s ease, color .12s ease;
}
.site-nav a:hover { background: var(--sand); text-decoration: none; }
/* 當前頁：珊瑚紅實色塊，自頂部延伸下來、白字 */
.site-nav a[aria-current="page"] {
  background: var(--coral); color: #fff; font-weight: 700;
}
.site-nav a[aria-current="page"]:hover { background: var(--coral); }
/* 窄螢幕：nav 現有五項，字級與 padding 縮小避免擁擠；允許換行（flex-wrap 已開） */
@media (max-width: 400px) {
  .site-nav a { font-size: .74rem; padding: 6px 8px; letter-spacing: .02em; }
}

/* 簡約裝飾：可重用 class（deco-line 分隔線、section-kicker 眉標） */
.deco-line {
  border: none; height: 0;
  border-top: 2px solid var(--coral);
  width: 48px; margin: var(--sp-5) 0;
}
.deco-line--center { margin-inline: auto; }
.section-kicker {
  display: inline-block;
  font-family: var(--font-title); font-weight: 800;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--coral);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--coral);
  margin-bottom: 10px;
}

/* footer：深板岩底、淡字，頂端 coral 細線分隔 */
.site-footer {
  border-top: 3px solid var(--coral);
  background: var(--slate);
  color: var(--sand);
  margin-top: var(--sp-12);
}
.site-footer__inner {
  max-width: 1120px; margin: 0 auto; padding: var(--sp-8) 20px var(--sp-6);
}
.site-footer__cols {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-8);
}
.site-footer__col--brand { max-width: 32ch; }
.site-footer__logo { display: block; height: 36px; width: auto; margin-bottom: var(--sp-3); }
.site-footer__note { font-size: .76rem; line-height: 1.6; color: var(--muted); margin: var(--sp-1) 0 0; }
.site-footer__heading {
  font-family: var(--font-title); font-weight: 800;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mustard); margin: 0 0 var(--sp-3);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin: 0 0 var(--sp-2); }
.site-footer__list a { font-size: .9rem; color: var(--sand); }
.site-footer__list a:hover { color: var(--coral); text-decoration: underline; }

/* ============================================================
   Inline SVG icon 系統（全站唯一一套：24×24 stroke 風、繼承文字色）
   由 layout.js 的 Icons/hydrate 注入；顏色隨文字（currentColor）。
   ============================================================ */
.icon {
  display: inline-block;      /* 覆蓋全域 svg{display:block}——icon 必須與文字同一行 */
  width: 1em; height: 1em;
  flex: 0 0 auto;             /* flex 容器（.btn/.site-nav a）內不被壓縮 */
  vertical-align: -0.14em;    /* 與行內文字基線對齊（標題等非 flex 場景） */
  margin-right: .4em;         /* 與文字間距 */
}
/* flex 容器已用 gap 控間距，避免雙重間距 */
.btn .icon,
.site-nav a .icon { margin-right: 0; }
.site-nav a { gap: .4em; }

/* ============================================================
   按鈕 .btn（primary/secondary/ghost/danger）— 扁平色塊圓角
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-title);
  font-weight: 700; font-size: 1rem;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--sand); color: var(--ink);
  cursor: pointer;
  transition: transform .1s ease, filter .12s ease, background-color .12s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; filter: brightness(.96); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); filter: brightness(.92); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.btn--primary   { background: var(--coral); color: #fff; }
.btn--secondary { background: var(--mustard); color: var(--ink); }
.btn--danger    { background: var(--coral-deep); color: #fff; }
.btn--ghost     { background: transparent; color: var(--ink); border: var(--bd) solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); filter: none; }
.btn--lg { font-size: 1.2rem; padding: 15px 28px; border-radius: var(--radius); }
.btn--block { display: flex; width: 100%; }
.btn--sm { font-size: .85rem; padding: 8px 14px; }
/* ============================================================
   語錄卡 .card（文字、tag chip、地區、🦷 數、可點）
   ============================================================ */
.card {
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--soft-sm);
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform .12s ease, box-shadow .12s ease;
}
a.card, .card--clickable { cursor: pointer; }
a.card:hover, .card--clickable:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--soft);
}
.card__quote {
  font-family: var(--font-title);
  font-size: 1.15rem; font-weight: 800; line-height: 1.42;
  color: var(--ink);
  margin: 0;
}
.card__quote::before { content: "「"; color: var(--coral); }
.card__quote::after  { content: "」"; color: var(--coral); }
.card__ctx { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.card__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .85rem; margin-top: auto;
}
.card__region {
  border: var(--bd) solid var(--sand); border-radius: 999px;
  padding: 2px 10px; color: var(--muted);
  font-family: var(--font-title); font-size: .76rem; font-weight: 600;
}
.card__teeth {
  margin-left: auto;
  font-family: var(--font-title); font-weight: 800;
  color: var(--coral);
  display: inline-flex; align-items: center; gap: 4px;
}
/* 語錄大卡標題（q 頁 h1）：走 type scale 的 h1 字級，不用寫死值 */
.card--big .card__quote,
.card--big.card__quote { font-size: var(--fs-h1); }

/* 語錄大卡（/q/{id} 落地頁） */
.quote-hero {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--soft);
  padding: 28px;
  background: var(--card);
  position: relative;
}
/* hero 區珊瑚細橫線裝飾 */
.quote-hero::after {
  content: ""; display: block;
  height: 2px; background: var(--coral);
  margin-top: 20px; border-radius: 2px;
}
.quote-hero__agg { font-family: var(--font-title); color: var(--coral); font-weight: 800; }

/* ============================================================
   卡牆 grid（375px 單欄；1024px 多欄）
   ============================================================ */
.card-wall { display: grid; grid-template-columns: 1fr; gap: var(--wall-gap); }

/* ============================================================
   Tag chip 章 / 地區 chip 選擇 .chip
   ============================================================ */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-title); font-weight: 700; font-size: .78rem;
  letter-spacing: .01em;
  padding: 3px 11px;
  border: none; border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.tag-bigpie   { background: var(--tag-bigpie);   color: var(--ink); }
.tag-guilt    { background: var(--tag-guilt);    color: #fff; }
.tag-overtime { background: var(--tag-overtime); color: #fff; }
.tag-salary   { background: var(--tag-salary);   color: var(--ink); }
.tag-blame    { background: var(--tag-blame);    color: #fff; }
.tag-quote    { background: var(--tag-quote);    color: var(--ink); }

/* 選擇用 chip（tag 單選 / 地區複選） */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-title); font-weight: 600; font-size: .9rem;
  padding: 8px 16px;
  border: var(--bd) solid var(--ink);
  border-radius: 999px;
  background: transparent; color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: background-color .12s ease, color .12s ease;
}
.chip:hover { background: var(--sand); }
.chip[aria-pressed="true"], .chip.is-selected {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--chip-gap); }
/* ============================================================
   段位徽章 .badge-rank（四階）
   ============================================================ */
.badge-rank {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-title); font-weight: 900;
  padding: 9px 18px;
  border: none; border-radius: 999px;
  color: #fff;
}
.badge-rank--1 { background: var(--rank-1); color: #fff; }
.badge-rank--2 { background: var(--rank-2); color: var(--ink); }
.badge-rank--3 { background: var(--rank-3); color: #fff; }
.badge-rank--4 {
  background: var(--rank-4-bg); color: var(--rank-4);
  border: var(--bd) solid var(--rank-4);
  text-shadow: 0 1px 6px rgba(239, 193, 99, .45);
}
.badge-rank--lg { font-size: 1.5rem; padding: 13px 30px; }

/* ============================================================
   Modal / Layer（攔截層、局末結果層等覆蓋層）
   ============================================================ */
.layer {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(35, 38, 63, .70);
  overflow-y: auto;
}
.layer[hidden] { display: none; }
.modal {
  width: 100%; max-width: 480px;
  background: var(--card);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(35, 38, 63, .28);
  padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.modal--wide { max-width: 640px; }
.modal__title { font-family: var(--font-title); font-weight: 900; font-size: 1.3rem; margin: 0; }
.modal__body { margin: 0; }
.modal__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modal__actions .btn { flex: 1 1 auto; }

/* ============================================================
   墓碑頁 .tombstone（語錄已刪除，非 404）
   ============================================================ */
.tombstone {
  max-width: 480px; margin: 48px auto;
  text-align: center;
  border: none;
  border-radius: 80px 80px var(--radius-lg) var(--radius-lg);
  box-shadow: var(--soft);
  background: var(--sand);
  padding: 52px 24px 36px;
}
.tombstone__mark { font-family: var(--font-title); font-weight: 900; font-size: 2.6rem; color: var(--ink); margin: 0 0 8px; }
.tombstone__text { color: var(--ink-soft); }
.tombstone__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
/* ============================================================
   表單元件
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--field-gap); }
.field__label { font-family: var(--font-title); font-weight: 700; font-size: .95rem; color: var(--ink); }
.field__hint { font-size: .8rem; color: var(--muted); }
.field__count { font-size: .8rem; color: var(--muted); text-align: right; }
.field__req { color: var(--coral-deep); }
.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  padding: 11px 14px;
  border: var(--bd) solid var(--sand);
  border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink);
  transition: border-color .12s ease;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(233, 109, 94, .18);
}
/* 守門提示行 */
.gate-note {
  font-size: .82rem; color: var(--ink-soft);
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 8px 12px; background: var(--sand);
}

/* ============================================================
   狀態標記（戰績頁狀態列：公開中/未公開/複審中/已刪除）
   ============================================================ */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-title); font-size: .78rem; font-weight: 700;
  padding: 3px 10px; border: none; border-radius: 999px;
}
.status--public  { background: var(--ok); color: #fff; }
.status--hidden  { background: var(--sand); color: var(--ink-soft); }
.status--review  { background: var(--mustard); color: var(--ink); }
.status--deleted { background: var(--muted); color: #fff; }

/* Banner（離線等全站提示） */
.banner {
  border: none; border-radius: var(--radius-sm);
  background: var(--mustard); color: var(--ink);
  font-family: var(--font-title); font-weight: 700;
  padding: 10px 16px; text-align: center;
}

/* ============================================================
   Admin tab .admin-tab（後台頁分頁）
   ============================================================ */
.admin-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: var(--bd) solid var(--sand); margin-bottom: 20px; }
.admin-tab {
  font-family: var(--font-title); font-size: .9rem; font-weight: 700;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent; color: var(--muted);
  cursor: pointer; margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab[aria-selected="true"], .admin-tab.is-active {
  background: transparent; color: var(--coral);
  border-bottom-color: var(--coral);
}
.admin-panel[hidden] { display: none; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border: var(--bd) solid var(--sand); padding: 9px 12px; text-align: left; font-size: .9rem; }
.table th { background: var(--sand); font-family: var(--font-title); font-weight: 700; color: var(--ink); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ============================================================
   Hero / 計數（首頁怒氣值）
   ============================================================ */
.hero { text-align: center; padding: var(--sp-10) 0; }
.hero__tagline { font-family: var(--font-title); font-weight: 900; font-size: 1.6rem; line-height: var(--lh-title); letter-spacing: -.01em; margin-bottom: var(--sp-5); }
.anger-counter {
  font-family: var(--font-title); font-weight: 900; font-size: 2.8rem;
  color: #fff; letter-spacing: .01em;
  display: inline-block;
  border: none; border-radius: var(--radius);
  padding: 8px 24px;
  background: var(--coral);
  min-width: 7ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.hero__actions { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; margin-top: var(--sp-6); }

/* 遊戲全屏舞台（slate 深底襯 canvas） */
.stage {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  background: var(--slate);
  border: var(--bd) solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.stage {
  margin-inline: auto;
  max-width: min(430px, calc(82vh * 9 / 16));
  max-width: min(430px, calc(82svh * 9 / 16));
}
.stage canvas { width: 100%; height: 100%; }
.stage__hud { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; font-family: var(--font-title); font-weight: 700; color: #fff; }

/* 工具 */
.text-center { text-align: center; }
/* 視覺隱藏（保留給輔助技術；用於無可見主標題的頁面之 h1，如 play 遊戲頁） */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.pill-count { font-family: var(--font-title); font-weight: 700; }
.divider { border: none; border-top: var(--bd) solid var(--sand); margin: var(--sp-8) 0; }

/* ============================================================
   置中與桌機比例：表單頁窄欄、hero 置中、卡牆置中
   ============================================================ */
/* 表單頁（submit / report）內容欄收窄置中，約 640px */
.wrap:has(#submit-form),
.wrap:has(#report-main) { max-width: 680px; }
#submit-form,
#report-main { max-width: 640px; margin-inline: auto; }
/* hero 區塊置中（水平置中、內容不貼左） */
.hero { margin-inline: auto; }
/* 卡牆在版心內置中不貼左（已由 .wrap 置中，網格本身滿版填欄） */
.card-wall { margin-inline: auto; }

/* ============================================================
   RWD 斷點（mobile-first；375 單欄、1024 多欄）
   兩個斷點皆不得橫向捲軸
   ============================================================ */
@media (min-width: 640px) {
  /* 桌機拉開節奏：section 留白與卡片 padding 隨斷點放大（h1 走 clamp 不再硬指定） */
  :root { --section-y: var(--sp-12); --card-pad: var(--sp-6); }
  .card-wall { grid-template-columns: repeat(2, 1fr); }
  .hero__actions { flex-direction: row; justify-content: center; }
  /* footer 桌機三欄：品牌欄較寬 */
  .site-footer__cols { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-10); }
}
@media (min-width: 1024px) {
  :root { --section-y: var(--sp-14); }
  .card-wall { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: var(--sp-16) 0; }
  .hero__tagline { font-size: 2.1rem; }
  .anger-counter { font-size: 3.4rem; }
  /* 桌機左右 padding 加寬至 32px（版心置中比例） */
  .wrap { padding: 0 32px; }
  .site-header__bar { padding: 0 32px; }
  .site-footer__inner { padding: var(--sp-6) 32px; }
}

/* reduced-motion：關閉位移/動畫效果，保留可用性 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .btn:hover, .btn:active, .chip:active, a.card:hover, .card--clickable:hover { transform: none; }
}