/* 路單研究室｜v06 應援團 fanclub — 設計代幣單一事實來源
   佈局 DNA：封面應援旗橫幅＋膠囊 tab＋主欄動態流配右欄排行；斜紋應援旗色帶為招牌材質。
   變體軸：主色隊色（桃紅／靛藍／琥珀）、圓角 14px 圓潤家族、無襯線圓體標題、雙模式。
   （變數命名沿用 --fc-*；app.css 消費同名語意變數。） */

/* ================= 雙模式色彩架構（Radix 12 階 primitive → semantic 雙層） =================
   --fc-n-*＝靛偏中性灰階、--fc-s-*＝品牌桃紅；l=淺 d=深。
   1–2 頁底 · 3–5 元件底 · 6–8 邊框 · 9–10 實色 · 11 次要字 · 12 主文字 */
:root {
  /* 靛偏中性 12 階 — 淺 */
  --fc-n-l1: #ffffff;  --fc-n-l2: #eef1f8;  --fc-n-l3: #f0f0f4;  --fc-n-l4: #e9eaf0;
  --fc-n-l5: #e1e2ea;  --fc-n-l6: #e2e6f1;  --fc-n-l7: #c1c4d4;  --fc-n-l8: #a4a7bb;
  --fc-n-l9: #878aa0;  --fc-n-l10: #6d7089; --fc-n-l11: #5a6079; --fc-n-l12: #1c2033;
  /* 靛偏中性 12 階 — 深（夜場深靛，非冷灰） */
  --fc-n-d1: #16172a;  --fc-n-d2: #21233a;  --fc-n-d3: #2b2e49;  --fc-n-d4: #2a2c3f;
  --fc-n-d5: #333652;  --fc-n-d6: #363a5c;  --fc-n-d7: #525572;  --fc-n-d8: #686b8a;
  --fc-n-d9: #7e819c;  --fc-n-d10: #9497b0; --fc-n-d11: #a6abcf; --fc-n-d12: #ecedf6;
  /* 品牌桃紅 12 階 — 淺 */
  --fc-s-l1: #fff5f8;  --fc-s-l2: #fce4ec;  --fc-s-l3: #f9d0de;  --fc-s-l4: #f5bcd0;
  --fc-s-l5: #f0a3bd;  --fc-s-l6: #e87da1;  --fc-s-l7: #de5183;  --fc-s-l8: #d6316e;
  --fc-s-l9: #d21e63;  --fc-s-l10: #ad184f; --fc-s-l11: #8f1441; --fc-s-l12: #4c0f26;
  /* 品牌桃紅 12 階 — 深 */
  --fc-s-d1: #2c0f1a;  --fc-s-d2: #3a1522;  --fc-s-d3: #4a1a2c;  --fc-s-d4: #6f1533;
  --fc-s-d5: #86163b;  --fc-s-d6: #a21644;  --fc-s-d7: #c21a52;  --fc-s-d8: #e22765;
  --fc-s-d9: #ff5c88;  --fc-s-d10: #f43d72; --fc-s-d11: #ff9db6; --fc-s-d12: #ffe0e9;
  /* 輔色實色（靛藍主標色／琥珀金／草綠）成對 l+d */
  --fc-ind-l: #27356e;    --fc-ind-d: #c7cef0;
  --fc-ind-dk-l: #1c2b5e; --fc-ind-dk-d: #dfe4ff;
  --fc-green-l: #2f9e6b;  --fc-green-d: #34c98a;
  --fc-gold-l:  #b6820c;  --fc-gold-d:  #ffc233;

  /* 圓角語言：14px 圓潤家族＋膠囊 */
  --fc-r-sm: 10px;
  --fc-r: 14px;
  --fc-r-lg: 20px;
  --fc-pill: 999px;

  /* 字體：無襯線圓體（標題 800、內文 15px） */
  --fc-font-head: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --fc-font-body: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --fc-base: 15px;

  --fc-gap: 20px;
  --fc-pad: 20px;

  /* 應援旗斜紋材質 */
  --fc-flag: repeating-linear-gradient(135deg, var(--fc-seal) 0 16px, var(--fc-seal-dk) 16px 32px);
}

/* ---- semantic：淺色（預設）---- */
:root {
  --fc-brown: var(--fc-ind-l);        /* 靛藍：標題／連結（app.css 對映 --primary） */
  --fc-brown-dk: var(--fc-ind-dk-l);
  --fc-seal: var(--fc-s-l9);          /* 桃紅：主按鈕／強調（app.css 對映 --accent） */
  --fc-seal-dk: var(--fc-s-l10);
  --fc-green: var(--fc-green-l);
  --fc-bg: var(--fc-n-l2);            /* 頁底 */
  --fc-paper: var(--fc-n-l1);         /* 卡面 */
  --fc-paper-2: var(--fc-n-l3);       /* 卡面替代／柔底 */
  --fc-line: var(--fc-n-l6);
  --fc-line-strong: var(--fc-n-l7);
  --fc-ink: var(--fc-n-l12);
  --fc-mute: var(--fc-n-l11);
  --fc-gold: var(--fc-gold-l);
  --fc-panel: #27356e;                /* 深靛裝飾底（頁尾／表頭）：兩模式都深 */
  --fc-btn-text: #ffffff;             /* 主按鈕文字 */
  --fc-shadow: 0 8px 24px rgba(39, 53, 110, .10);
  --fc-shadow-sm: 0 2px 10px rgba(39, 53, 110, .07);
}
/* @check text=#1c2033 bg=#f6f7fb muted=#5a6079 primary=#d21e63 btntext=#ffffff mode=light */

/* ---- semantic：深色（夜場深靛＋霓虹桃紅）---- */
[data-mode="dark"] {
  --fc-brown: var(--fc-ind-d);
  --fc-brown-dk: var(--fc-ind-dk-d);
  --fc-seal: var(--fc-s-d9);
  --fc-seal-dk: var(--fc-s-d10);
  --fc-green: var(--fc-green-d);
  --fc-bg: var(--fc-n-d1);
  --fc-paper: var(--fc-n-d2);
  --fc-paper-2: var(--fc-n-d3);
  --fc-line: var(--fc-n-d6);
  --fc-line-strong: var(--fc-n-d7);
  --fc-ink: var(--fc-n-d12);
  --fc-mute: var(--fc-n-d11);
  --fc-gold: var(--fc-gold-d);
  --fc-panel: #20223a;
  --fc-btn-text: #37071c;
  --fc-shadow: 0 8px 24px rgba(0, 0, 0, .46);
  --fc-shadow-sm: 0 2px 10px rgba(0, 0, 0, .34);
}
/* @check text=#ecedf6 bg=#16172a muted=#a6abcf primary=#ff5c88 btntext=#37071c mode=dark */

/* ---- 未手動切換時跟隨系統 ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --fc-brown: var(--fc-ind-d); --fc-brown-dk: var(--fc-ind-dk-d);
    --fc-seal: var(--fc-s-d9); --fc-seal-dk: var(--fc-s-d10); --fc-green: var(--fc-green-d);
    --fc-bg: var(--fc-n-d1); --fc-paper: var(--fc-n-d2); --fc-paper-2: var(--fc-n-d3);
    --fc-line: var(--fc-n-d6); --fc-line-strong: var(--fc-n-d7);
    --fc-ink: var(--fc-n-d12); --fc-mute: var(--fc-n-d11); --fc-gold: var(--fc-gold-d);
    --fc-panel: #20223a; --fc-btn-text: #37071c;
    --fc-shadow: 0 8px 24px rgba(0, 0, 0, .46); --fc-shadow-sm: 0 2px 10px rgba(0, 0, 0, .34);
  }
}

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

body {
  font-family: var(--fc-font-body);
  font-size: var(--fc-base);
  line-height: 1.7;
  color: var(--fc-ink);
  background: var(--fc-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--fc-font-head); font-weight: 800; line-height: 1.32; margin: 0 0 .5em; color: var(--fc-ink); }
a { color: var(--fc-brown); text-decoration: none; }
a:hover { color: var(--fc-seal); text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ===== 品牌匾／看板 ===== */
.plaque { font-family: var(--fc-font-head); font-weight: 900; font-size: 22px; color: var(--fc-ink); display: inline-flex; align-items: center; gap: 9px; }
.plaque .stamp { font-family: var(--fc-font-head); font-size: 11px; color: #fff; background: var(--fc-seal); padding: 3px 6px; border-radius: var(--fc-r-sm); letter-spacing: 2px; font-weight: 800; }

/* 晝夜切換：膠囊字鈕（本套識別式樣，☀/🌙） */
.lantern { font-family: var(--fc-font-head); font-weight: 800; border: 1.5px solid var(--fc-seal); color: var(--fc-seal); background: transparent; cursor: pointer; height: 38px; padding: 0 14px; border-radius: var(--fc-pill); font-size: 15px; line-height: 1; }
.lantern:hover { background: var(--fc-s-l2); }

/* ===== 卡面 ===== */
.board { background: var(--fc-paper); border: 1px solid var(--fc-line); border-radius: var(--fc-r); box-shadow: var(--fc-shadow-sm); padding: var(--fc-pad); }
.board-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--fc-line); }
.board-head .seal-dot { width: 10px; height: 18px; background: var(--fc-seal); border-radius: 4px; }
.board-head h2, .board-head .h { font-family: var(--fc-font-head); font-size: 19px; font-weight: 800; margin: 0; color: var(--fc-brown); }

/* ===== 工具表單卡修飾（主打工具用 .brew 作外觀強化） ===== */
.brew .intro { color: var(--fc-mute); margin-top: 0; font-size: 14px; }

/* ===== 文章卡（最新專欄用 .papers/.paper/.scroll/.sheet/.genre） ===== */
.papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fc-gap); }
.paper { padding: 0; overflow: hidden; }
.paper .scroll { height: 118px; background: linear-gradient(135deg, var(--fc-seal), var(--fc-panel)); }
.paper .sheet { padding: 14px 16px 16px; }
.paper .genre { color: var(--fc-seal); font-weight: 800; font-size: 12px; }
.paper h3 { font-size: 16px; margin: 4px 0; }

/* ===== 徽章式標籤（應援勳章感） ===== */
.seal-tag { display: inline-block; font-family: var(--fc-font-head); font-size: 12px; font-weight: 800; padding: 3px 11px; background: var(--fc-s-l2); color: var(--fc-seal-dk); border-radius: var(--fc-pill); letter-spacing: .5px; }
.seal-tag.jade { background: color-mix(in srgb, var(--fc-green) 16%, transparent); color: var(--fc-green); }
.seal-tag.gold { background: color-mix(in srgb, var(--fc-gold) 20%, transparent); color: var(--fc-gold-l); }

/* ===== 表格底線 ===== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ===== 響應式（欄內） ===== */
@media (max-width: 768px) { .papers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .papers { grid-template-columns: 1fr; } }

/* ===== v06 招牌材質：主場光暈＋應援旗斜紋（防指紋 DNA） ===== */
body {
  background-image:
    radial-gradient(circle at 8% -4%, color-mix(in srgb, var(--fc-seal) 13%, transparent), transparent 30%),
    radial-gradient(circle at 96% 12%, color-mix(in srgb, var(--fc-gold) 12%, transparent), transparent 26%);
  background-attachment: fixed;
}
.cheer-flag { height: 10px; background: var(--fc-flag); border-radius: 4px; }

/* 路單研究室站內變體 */
:root{--brand:#7e2148;--brand-2:#17223b;--gold:#ffc857}body{background-image:radial-gradient(circle at 82% -8%,rgba(199,220,50,.16),transparent 29%),linear-gradient(180deg,rgba(213,31,121,.035),transparent 38%)}.hero-media img{object-position:center 42%}.tool-card:focus-within,.feed-card:hover{border-color:rgba(213,31,121,.48)}