/* 今日匯流共用樣式 · 設計系統 v1.0(2026-06-05)
   ★ 改主題,只改這裡的 :root,全站一起變。舊變數名保留為別名,確保既有頁面不破版。
   依據:docs/design/content-hub-design-system-20260605.md */
:root{
  /* 背景階層 */
  --bg-0:#faf6ee; --bg-1:#f3ecdf; --bg-2:#efe9dc;  /* 暖報刊紙色(驚豔範本套用 2026-06-07) */
  /* 表面 */
  --surface:#ffffff; --surface-2:#fbfcfe;
  /* 文字(Gemini 調:放棄純黑→高質感深炭墨;次要文字改暖石板灰,更舒服耐看) */
  --ink:#1c1a17; --ink-2:#423d38; --muted:#7c756b; --on-primary:#ffffff;
  /* 主色 + 色階(Gemini 調:略偏暖的權威紅,飽和不刺眼) */
  --primary:#cc2229; --primary-hover:#a61d24; --primary-active:#8f161d; --primary-soft:#fdeaec; --primary-ink:#9c1019;
  /* 強調(暖橘:CTA/熱度) */
  --accent:#f97316; --accent-soft:#fff1e6;
  /* 語意 */
  --success:#15a35b; --success-soft:#e7f6ee; --warn:#e0a312; --warn-soft:#fcf3df; --danger:#e11d2e; --danger-soft:#fdeced; --buy:#15a35b; --sell:#e11d2e;
  /* 邊框 */
  --line:#edeae0; --line-strong:#dcd7c9;
  /* 字體 */
  --font-sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Noto Serif TC","Songti TC","SimSun",serif;  /* 報頭感標題(Gemini建議 2026-06-07) */
  /* 圓角階梯 */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-full:999px;
  /* 間距 8pt */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* 分層著色陰影 */
  --sh-1:0 1px 2px rgba(31,33,46,.06),0 1px 1px rgba(31,33,46,.04);
  --sh-2:0 2px 4px rgba(31,33,46,.06),0 4px 8px rgba(31,33,46,.06);
  --sh-3:0 4px 8px rgba(31,33,46,.07),0 12px 24px rgba(31,33,46,.10);
  --sh-4:0 8px 16px rgba(31,33,46,.10),0 24px 48px rgba(31,33,46,.14);
  --sh-primary:0 6px 16px rgba(204,34,41,.28);
  --focus:0 0 0 3px rgba(204,34,41,.22);
  --ease:cubic-bezier(.2,.7,.3,1); --t-fast:.12s; --t:.18s;
  /* ── 舊變數別名(向後相容,現有頁面照用、但吃新配色)── */
  --bg:var(--bg-0); --card:var(--surface); --accent2:var(--accent); --ok:var(--success);
  --primary-dark:var(--primary-hover); --form-line:var(--line-strong);
  --radius:var(--r-sm); --shadow:var(--sh-1); --shadow-lg:var(--sh-3);
  /* ── Gemini 設計協作用別名(2026-06-06):讓 Gemini 產的 CSS 命名也能直接解析,不必逐條改 ── */
  --card-bg:var(--surface); --bg-hover:var(--bg-1); --light-muted:var(--line-strong);
  --accent-hover:#ea580c;
  --radius-xs:var(--r-xs); --radius-sm:var(--r-sm); --radius-md:var(--r-md); --radius-lg:var(--r-lg); --radius-pill:var(--r-full);
  --shadow-sm:var(--sh-1); --shadow-md:var(--sh-3);
  --transition-smooth:all .35s cubic-bezier(.215,.61,.355,1);
}
*{ box-sizing:border-box; }
/* 全站統一捲軸(拉桿)風格 — 暖報刊調 */
*{ scrollbar-width:thin; scrollbar-color:var(--line-strong,#dcd7c9) transparent; }
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-strong,#dcd7c9); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--primary,#cc2229); }
::-webkit-scrollbar-corner{ background:transparent; }
body{ margin:0; font-family:var(--font-sans); font-size:15px; line-height:1.65; color:var(--ink);
  background:var(--bg-0); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:inherit; text-decoration:none; }
.muted,small,.small{ color:var(--muted); } small,.small{ font-size:13px; }
h1{ font-family:var(--font-serif); font-size:27px; line-height:1.3; font-weight:700; letter-spacing:.01em; margin:0 0 var(--s-3); }
h2{ font-family:var(--font-serif); font-size:21px; line-height:1.35; font-weight:700; margin:0 0 var(--s-3); }
h3{ font-family:var(--font-serif); font-size:17px; line-height:1.4; font-weight:700; margin:0 0 var(--s-2); }

/* 表單 */
input,textarea,select{ width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:11px 14px; box-sizing:border-box;
  transition:border-color var(--t-fast),box-shadow var(--t-fast); }
input::placeholder,textarea::placeholder{ color:var(--muted); }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--primary); box-shadow:var(--focus); }
textarea{ resize:vertical; line-height:1.6; }
label{ display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:var(--s-1); }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,.card:focus-visible,.thread:focus-visible,.acard:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:var(--r-sm); }

/* 按鈕 */
button,.btn{ cursor:pointer; border:none; border-radius:var(--r-full); padding:12px 26px; font-weight:600; font-size:15px;
  background:var(--primary); color:var(--on-primary); font-family:inherit; box-shadow:var(--sh-1);
  transition:background var(--t-fast),box-shadow var(--t),transform .05s; }
button:hover,.btn:hover{ background:var(--primary-hover); box-shadow:var(--sh-primary); }
button:active,.btn:active{ background:var(--primary-active); transform:translateY(1px); }
button.full,.full{ width:100%; } button.sm,.mini,.btn.sm{ padding:7px 12px; font-size:13px; border-radius:var(--r-xs); box-shadow:none; }
.btn2{ background:var(--bg-1); color:var(--ink); box-shadow:none; } .btn2:hover{ background:var(--bg-2); }
.btn-outline{ background:transparent; color:var(--primary); border:1px solid var(--line-strong); box-shadow:none; } .btn-outline:hover{ background:var(--primary-soft); border-color:var(--primary); }
.danger,.btn-danger{ background:var(--danger); color:#fff; } .danger:hover{ filter:brightness(.94); }

/* 卡片 / 浮窗 / 提示 / 標籤 */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-4); margin-bottom:var(--s-3); box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease),box-shadow var(--t),border-color var(--t); }
.card.hoverable:hover,a.card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(28,26,23,.12); }
a.card,.card.big{ box-shadow:0 8px 24px rgba(28,26,23,.05); }  /* Gemini:文章卡編輯漂浮感(暖色陰影) */
.modal-bg{ position:fixed; inset:0; background:rgba(20,22,28,.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:50; padding:var(--s-4); animation:fade .15s var(--ease); }
.modal{ background:var(--surface); border-radius:var(--r-lg); padding:var(--s-5); width:100%; max-width:460px; max-height:90vh; overflow-y:auto; box-shadow:var(--sh-4); animation:pop .18s var(--ease); }
.modal h3{ margin-top:0; }
.x{ float:right; cursor:pointer; color:var(--muted); font-size:20px; line-height:1; padding:4px; }
@keyframes fade{ from{opacity:0} } @keyframes pop{ from{opacity:0;transform:translateY(8px) scale(.98)} }
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--ink); color:#fff; padding:11px 20px; border-radius:var(--r-full); font-size:14px; font-weight:700; box-shadow:var(--sh-4); opacity:0; pointer-events:none; transition:opacity var(--t),transform var(--t); z-index:99; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.chip{ background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-full); padding:6px 13px; font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; transition:var(--t-fast); }
.chip:hover{ background:var(--primary-soft); color:var(--primary); border-color:var(--primary-soft); }

/* 徽章 / 標籤 / 分頁 / 清單 / 區塊標題(共用元件) */
.tag{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; line-height:1; padding:4px 9px; border-radius:var(--r-xs); background:var(--primary-soft); color:var(--primary-ink); }
.tag.accent{ background:var(--accent-soft); color:#b4530a; } .tag.success{ background:var(--success-soft); color:#0d6b3b; }
.heat{ display:inline-flex; align-items:center; gap:2px; font-size:11.5px; font-weight:700; color:#fff; background:var(--accent); padding:2px 8px; border-radius:var(--r-full); }
.tabs{ display:flex; gap:var(--s-1); border-bottom:1px solid var(--line); }
.tabs button{ background:none; border:none; box-shadow:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:15px; color:var(--muted); padding:11px 14px; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--t-fast),border-color var(--t-fast); }
.tabs button:hover{ background:none; color:var(--ink); } .tabs button.on{ background:none; color:var(--primary); border-bottom-color:var(--primary); }
.tabs.pill{ border:none; flex-wrap:wrap; } .tabs.pill button{ background:var(--bg-1); border-radius:var(--r-full); margin:0; } .tabs.pill button.on{ background:var(--primary); color:#fff; border-bottom-color:transparent; }
.sec-title{ font-size:20px; font-weight:700; margin:var(--s-2) 0 var(--s-4); display:flex; align-items:center; gap:var(--s-2); }
.sec-title::before{ content:''; width:4px; height:20px; background:var(--primary); border-radius:var(--r-full); }