/* v06 應援團 fanclub — 粉絲社群版型
   佈局 DNA：封面橫幅打頭＋膠囊 tab 導覽＋主欄貼文流配右側粉絲榜，斜紋應援旗背景條貫穿。
   變體軸：應援主色（桃紅／靛藍／琥珀）可換隊色，同一骨架長出不同球團／牌手粉絲站。 */

/* ================= 雙模式色彩架構（primitive 12 階 → semantic 雙層） =================
   primitive：H＝桃紅品牌色階、N＝靛偏中性灰階，light/dark 各一組（防指紋前綴 fc）。
   semantic：元件只引用語意變數；:root 為預設淺色，[data-mode="dark"] 為深色；
   未設 data-mode 時由 prefers-color-scheme 跟隨系統。 */
:root {
  /* H 品牌桃紅色階 light */
  --fcHl1:#fcfafb; --fcHl2:#fce4ec; --fcHl3:#f9d4e0; --fcHl4:#f6d5e0; --fcHl5:#f5bfd1; --fcHl6:#f0a3bd;
  --fcHl7:#e87da1; --fcHl8:#dd4b7b; --fcHl9:#d21e63; --fcHl10:#ad184f; --fcHl11:#b02359; --fcHl12:#582334;
  /* H 品牌桃紅色階 dark */
  --fcHd1:#371621; --fcHd2:#3a1522; --fcHd3:#4a1a2c; --fcHd4:#6f1533; --fcHd5:#86163b; --fcHd6:#a21644;
  --fcHd7:#c21a52; --fcHd8:#e22765; --fcHd9:#ff5c88; --fcHd10:#f43d72; --fcHd11:#ff9db6; --fcHd12:#f5e6eb;
  /* N 靛偏中性灰階 light */
  --fcNl1:#f6f7fb; --fcNl2:#eef1f8; --fcNl3:#f0f0f2; --fcNl4:#e9eaed; --fcNl5:#e1e1e5; --fcNl6:#e2e6f1;
  --fcNl7:#c1c2c8; --fcNl8:#a4a5ad; --fcNl9:#878892; --fcNl10:#71737e; --fcNl11:#5a6079; --fcNl12:#1c2033;
  /* N 靛偏中性灰階 dark */
  --fcNd1:#16172a; --fcNd2:#21233a; --fcNd3:#2b2e49; --fcNd4:#2a2c39; --fcNd5:#333645; --fcNd6:#363a5c;
  --fcNd7:#525466; --fcNd8:#686b7e; --fcNd9:#7e8091; --fcNd10:#9496a3; --fcNd11:#a6abcf; --fcNd12:#ecedf6;

  /* semantic（light 預設） */
  --fcPrimary: var(--fcHl9);
  --fcPrimarySoft: var(--fcHl2);
  --fcPrimaryDeep: var(--fcHl10);
  --fcSecondary: #27356e;      /* 靛藍：標題／品牌文字（深色模式翻亮） */
  --fcSecondarySoft: #e6e9f4;
  --fcAccent: #ffb703;
  --fcAccentSoft: #fff4d6;
  --fcBg: var(--fcNl1);
  --fcSurface: #ffffff;
  --fcSurfaceAlt: var(--fcNl2);
  --fcText: var(--fcNl12);
  --fcTextMuted: var(--fcNl11);
  --fcLine: var(--fcNl6);
  --fcStar: #ffb703;
  --fcOk: #2f9e6b;
  --fcPanel: #27356e;          /* 深色裝飾底（頁尾／表頭／徽章）：兩模式都深 */
  --fcBtnText: #ffffff;        /* 主鈕文字 */

  /* 陰影語言：柔和抬升＋主色暈染 */
  --fcShadow: 0 8px 24px rgba(39, 53, 110, .08);
  --fcShadowHover: 0 14px 32px rgba(230, 64, 114, .16);
  --fcShadowSoft: 0 2px 8px rgba(39, 53, 110, .06);

  /* 圓角語言：14px 為主的圓潤家族 */
  --fcRadius: 14px;
  --fcRadiusLg: 20px;
  --fcRadiusSm: 10px;
  --fcRadiusPill: 999px;

  /* 字體 */
  --fcFont: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --fcSizeBase: 15px;
  --fcSpace: 18px;

  /* 應援旗斜紋 */
  --fcFlag: repeating-linear-gradient(135deg, var(--fcPrimary) 0 16px, var(--fcPrimaryDeep) 16px 32px);
}

/* semantic 深色覆蓋 */
[data-mode="dark"] {
  --fcPrimary: var(--fcHd9);
  --fcPrimarySoft: var(--fcHd3);
  --fcPrimaryDeep: var(--fcHd10);
  --fcSecondary: #c7cef0;
  --fcSecondarySoft: #2b2f4d;
  --fcAccent: #ffc233;
  --fcAccentSoft: #3a2f12;
  --fcBg: var(--fcNd1);
  --fcSurface: var(--fcNd2);
  --fcSurfaceAlt: var(--fcNd3);
  --fcText: var(--fcNd12);
  --fcTextMuted: var(--fcNd11);
  --fcLine: var(--fcNd6);
  --fcStar: #ffc233;
  --fcOk: #34c98a;
  --fcPanel: #20223a;
  --fcBtnText: #37071c;
  --fcShadow: 0 8px 24px rgba(0, 0, 0, .42);
  --fcShadowHover: 0 14px 32px rgba(255, 92, 136, .22);
  --fcShadowSoft: 0 2px 8px rgba(0, 0, 0, .3);
}
/* 未手動指定時跟隨系統 */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --fcPrimary: var(--fcHd9); --fcPrimarySoft: var(--fcHd3); --fcPrimaryDeep: var(--fcHd10);
    --fcSecondary: #c7cef0; --fcSecondarySoft: #2b2f4d; --fcAccent: #ffc233; --fcAccentSoft: #3a2f12;
    --fcBg: var(--fcNd1); --fcSurface: var(--fcNd2); --fcSurfaceAlt: var(--fcNd3);
    --fcText: var(--fcNd12); --fcTextMuted: var(--fcNd11); --fcLine: var(--fcNd6);
    --fcStar: #ffc233; --fcOk: #34c98a; --fcPanel: #20223a; --fcBtnText: #37071c;
    --fcShadow: 0 8px 24px rgba(0,0,0,.42); --fcShadowHover: 0 14px 32px rgba(255,92,136,.22); --fcShadowSoft: 0 2px 8px rgba(0,0,0,.3);
  }
}
/* @check text=#1c2033 bg=#f6f7fb muted=#5a6079 primary=#d21e63 btntext=#ffffff mode=light */
/* @check text=#ecedf6 bg=#16172a muted=#a6abcf primary=#ff5c88 btntext=#37071c mode=dark */

/* 模式切換鈕 */
.fc-mode {
  width: 40px; height: 40px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--fcLine); border-radius: var(--fcRadiusPill);
  background: var(--fcSurfaceAlt); color: var(--fcSecondary);
  font-size: 1.05rem; display: grid; place-items: center;
}
.fc-mode:hover { border-color: var(--fcPrimary); color: var(--fcPrimary); }
.fc-mode .mMoon { display: none; }
[data-mode="dark"] .fc-mode .mSun { display: none; }
[data-mode="dark"] .fc-mode .mMoon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .fc-mode .mSun { display: none; }
  :root:not([data-mode="light"]) .fc-mode .mMoon { display: inline; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fcBg);
  color: var(--fcText);
  font-family: var(--fcFont);
  font-size: var(--fcSizeBase);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--fcPrimary); text-decoration: none; }
a:hover { color: var(--fcPrimaryDeep); }

h1, h2, h3, h4 { font-weight: 800; line-height: 1.3; color: var(--fcSecondary); margin: 0 0 .5em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.siteWrap { max-width: 1160px; margin: 0 auto; padding: 0 16px 60px; }

/* 頂欄 */
.topBar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px; background: var(--fcSurface);
  border-radius: var(--fcRadius); box-shadow: var(--fcShadowSoft);
  position: sticky; top: 10px; z-index: 40; margin: 14px 0;
}
.brandMark {
  display: flex; align-items: center; gap: 9px;
  font-weight: 900; font-size: 1.2rem; color: var(--fcSecondary);
}
.brandMark span {
  width: 30px; height: 30px; border-radius: var(--fcRadiusSm);
  background: var(--fcPrimary); color: #fff;
  display: grid; place-items: center; font-size: .95rem;
}
.topSearch {
  flex: 1; min-width: 0;
  border: 1px solid var(--fcLine); border-radius: var(--fcRadiusPill);
  padding: 9px 16px; background: var(--fcSurfaceAlt); font: inherit; font-size: .9rem;
}
.topActions { display: flex; align-items: center; gap: 10px; }
.avatarRing {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--fcPrimary), var(--fcAccent));
  padding: 2px; display: grid; place-items: center; color: #fff; font-weight: 800;
}
.avatarRing i { background: var(--fcPanel); width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-style: normal; }

/* 封面橫幅＋應援旗 */
.coverBanner {
  position: relative; border-radius: var(--fcRadiusLg); overflow: hidden;
  background: linear-gradient(120deg, var(--fcPanel), #2b3566);
  color: #fff; box-shadow: var(--fcShadow); margin-bottom: 14px;
}
.cheerFlag { height: 10px; background: var(--fcFlag); }
.coverBody { padding: 30px 28px 26px; position: relative; }
.coverBody h1 { color: #fff; margin-bottom: 6px; }
.coverBody p { color: rgba(255,255,255,.82); margin: 0; max-width: 560px; }
.coverStats { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.coverStats b { font-size: 1.5rem; color: var(--fcAccent); display: block; }
.coverStats small { color: rgba(255,255,255,.72); }

/* 膠囊 tab 導覽 */
.tabNav {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px;
  background: var(--fcSurface); border-radius: var(--fcRadiusPill);
  box-shadow: var(--fcShadowSoft); margin-bottom: 20px; -webkit-overflow-scrolling: touch;
}
.tabLink {
  flex: 0 0 auto; padding: 9px 18px; border-radius: var(--fcRadiusPill);
  color: var(--fcTextMuted); font-weight: 700; font-size: .9rem; white-space: nowrap;
}
.tabLink.on { background: var(--fcPrimary); color: #fff; box-shadow: var(--fcShadowHover); }

/* 麵包屑 */
.crumbTrail { font-size: .82rem; color: var(--fcTextMuted); margin: 0 4px 16px; }
.crumbTrail a { color: var(--fcTextMuted); }
.crumbTrail span { color: var(--fcPrimary); margin: 0 6px; }

/* 主佈局 */
.layoutGrid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.mainCol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sideCol { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; align-self: start; }

/* 卡片基底 */
.cardBox {
  background: var(--fcSurface); border-radius: var(--fcRadius);
  box-shadow: var(--fcShadow); padding: 20px;
}
.cardTitle {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--fcSecondary); margin-bottom: 14px; font-size: 1.05rem;
}
.cardTitle::before { content: ""; width: 6px; height: 18px; border-radius: 4px; background: var(--fcPrimary); }

/* 工具表單卡 */
.toolForm { background: var(--fcSurface); border-radius: var(--fcRadius); box-shadow: var(--fcShadow); padding: 22px; }
.formRow { margin-bottom: 14px; }
.formLabel { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 6px; color: var(--fcSecondary); }
.selectBox, .textField {
  width: 100%; padding: 11px 14px; font: inherit; font-size: .92rem;
  border: 1px solid var(--fcLine); border-radius: var(--fcRadiusSm);
  background: var(--fcSurfaceAlt); color: var(--fcText);
}
.selectBox:focus, .textField:focus { outline: none; border-color: var(--fcPrimary); box-shadow: 0 0 0 3px var(--fcPrimarySoft); }
.radioSet { display: flex; gap: 10px; flex-wrap: wrap; }
.radioSet label {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border: 1px solid var(--fcLine); border-radius: var(--fcRadiusPill);
  font-size: .85rem; cursor: pointer; background: var(--fcSurfaceAlt);
}
.radioSet input { accent-color: var(--fcPrimary); }
.formBtns { display: flex; gap: 10px; margin-top: 6px; }
.btnPrimary {
  flex: 1; padding: 12px 18px; border: none; border-radius: var(--fcRadiusPill);
  background: var(--fcPrimary); color: var(--fcBtnText); font: inherit; font-weight: 800; cursor: pointer;
  box-shadow: var(--fcShadowHover);
}
.btnPrimary:hover { background: var(--fcPrimaryDeep); }
.btnDemo {
  padding: 12px 18px; border: 1px solid var(--fcPrimary); border-radius: var(--fcRadiusPill);
  background: var(--fcPrimarySoft); color: var(--fcPrimaryDeep); font: inherit; font-weight: 800; cursor: pointer;
}

/* 結果貼文卡 */
.postCard { background: var(--fcSurface); border-radius: var(--fcRadius); box-shadow: var(--fcShadow); padding: 20px; }
.postHead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.postAvatar {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--fcPrimary), var(--fcAccent));
  color: #fff; display: grid; place-items: center; font-weight: 800;
}
.postWho { flex: 1; min-width: 0; }
.postName { font-weight: 800; color: var(--fcSecondary); }
.postMeta { font-size: .78rem; color: var(--fcTextMuted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolTag {
  background: var(--fcSecondarySoft); color: var(--fcSecondary);
  padding: 2px 10px; border-radius: var(--fcRadiusPill); font-weight: 700; font-size: .74rem;
}
.recordNo {
  font-family: ui-monospace, "SFMono-Regular", monospace; font-size: .72rem;
  color: var(--fcTextMuted); background: var(--fcSurfaceAlt);
  padding: 2px 8px; border-radius: 6px; border: 1px dashed var(--fcLine);
}
.postText { margin-bottom: 14px; }
.resultCard {
  background: var(--fcAccentSoft); border: 1px solid var(--fcAccent);
  border-radius: var(--fcRadiusSm); padding: 14px 16px; margin-bottom: 14px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.resultCard b { color: var(--fcSecondary); }
.resultCard .rNum { font-size: 1.4rem; font-weight: 900; color: var(--fcPrimaryDeep); }
.starRow { color: var(--fcStar); letter-spacing: 3px; font-size: 1.05rem; margin-bottom: 12px; }
.starRow small { color: var(--fcTextMuted); letter-spacing: normal; margin-left: 6px; font-size: .78rem; }
.reactBar { display: flex; gap: 8px; border-top: 1px solid var(--fcLine); padding-top: 12px; }
.reactBtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; border: none; border-radius: var(--fcRadiusSm); background: var(--fcSurfaceAlt);
  color: var(--fcTextMuted); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer;
}
.reactBtn:hover { background: var(--fcPrimarySoft); color: var(--fcPrimaryDeep); }

/* 平台數據統計 */
.statStrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.statBox {
  background: var(--fcSurfaceAlt); border-radius: var(--fcRadiusSm);
  padding: 16px 12px; text-align: center; border: 1px solid var(--fcLine);
}
.statNum { font-size: 1.7rem; font-weight: 900; color: var(--fcPrimary); }
.statLabel { font-size: .76rem; color: var(--fcTextMuted); }

/* 熱門排行 */
.rankList { display: flex; flex-direction: column; gap: 10px; }
.rankRow { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--fcRadiusSm); }
.rankRow:hover { background: var(--fcSurfaceAlt); }
.rankBadge {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 900; font-size: .85rem;
  background: var(--fcSecondarySoft); color: var(--fcSecondary);
}
.rankRow:nth-child(1) .rankBadge { background: var(--fcPrimary); color: #fff; }
.rankRow:nth-child(2) .rankBadge { background: var(--fcAccent); color: var(--fcPanel); }
.rankRow:nth-child(3) .rankBadge { background: var(--fcPanel); color: #fff; }
.rankName { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; }
.rankHot { color: var(--fcPrimary); font-weight: 800; font-size: .82rem; }

/* 文章卡 */
.articleGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.articleCard { background: var(--fcSurface); border-radius: var(--fcRadius); box-shadow: var(--fcShadow); overflow: hidden; }
.articleCard:hover { box-shadow: var(--fcShadowHover); transform: translateY(-3px); transition: .2s; }
.articleThumb { height: 130px; background: linear-gradient(135deg, var(--fcPrimary), var(--fcPanel)); position: relative; }
.articleThumb.altTone { background: linear-gradient(135deg, var(--fcAccent), var(--fcPrimary)); }
.articleThumb.altTone2 { background: linear-gradient(135deg, var(--fcPanel), var(--fcAccent)); }
.articleThumb span {
  position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.9);
  color: var(--fcPanel); font-weight: 800; font-size: .72rem; padding: 3px 10px; border-radius: var(--fcRadiusPill);
}
.articleInfo { padding: 14px 16px; }
.articleInfo h3 { font-size: 1rem; margin-bottom: 6px; }
.articleInfo p { font-size: .84rem; color: var(--fcTextMuted); margin: 0; }

/* 文章內文排版 */
.articleBody { background: var(--fcSurface); border-radius: var(--fcRadius); box-shadow: var(--fcShadow); padding: 26px; }
.articleBody h2 { margin-top: 1.2em; }
.articleBody h3 { color: var(--fcPrimaryDeep); }
.articleBody table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .88rem; }
.articleBody th { background: var(--fcPanel); color: #fff; padding: 10px; text-align: left; }
.articleBody td { padding: 10px; border-bottom: 1px solid var(--fcLine); }
.articleBody tr:nth-child(even) td { background: var(--fcSurfaceAlt); }
.articleBody blockquote {
  margin: 1.2em 0; padding: 14px 18px; border-left: 4px solid var(--fcPrimary);
  background: var(--fcPrimarySoft); border-radius: 0 var(--fcRadiusSm) var(--fcRadiusSm) 0; color: var(--fcSecondary);
}
.faqBox { margin-top: 1.2em; }
.faqBox details {
  border: 1px solid var(--fcLine); border-radius: var(--fcRadiusSm);
  padding: 12px 16px; margin-bottom: 10px; background: var(--fcSurfaceAlt);
}
.faqBox summary { font-weight: 800; color: var(--fcSecondary); cursor: pointer; }
.faqBox details[open] summary { color: var(--fcPrimary); margin-bottom: 8px; }

/* 工具牆 */
.toolWall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.toolChip {
  background: var(--fcSurface); border-radius: var(--fcRadius); box-shadow: var(--fcShadowSoft);
  padding: 18px 16px; text-align: center; border: 1px solid var(--fcLine);
}
.toolChip:hover { box-shadow: var(--fcShadowHover); border-color: var(--fcPrimary); }
.toolChip i {
  width: 48px; height: 48px; border-radius: var(--fcRadiusSm); margin: 0 auto 10px;
  display: grid; place-items: center; font-style: normal; font-size: 1.3rem; color: #fff;
  background: linear-gradient(135deg, var(--fcPrimary), var(--fcAccent));
}
.toolChip b { display: block; color: var(--fcSecondary); font-size: .92rem; }
.toolChip small { color: var(--fcTextMuted); font-size: .76rem; }

/* 16:9 影片容器 */
.videoFrame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--fcRadius); overflow: hidden;
  background: linear-gradient(135deg, var(--fcSecondary), var(--fcPrimaryDeep)); box-shadow: var(--fcShadow);
}
.videoFrame .playBtn {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: var(--fcShadowHover);
}
.videoFrame .playBtn::before { content: ""; border-left: 20px solid var(--fcPrimary); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.videoFrame .vLabel { position: absolute; left: 14px; bottom: 12px; color: #fff; font-weight: 800; font-size: .85rem; text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* 圖片網格 2×2 */
.imgGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.imgCell { aspect-ratio: 4 / 3; border-radius: var(--fcRadiusSm); background: var(--fcSecondarySoft); position: relative; overflow: hidden; }
.imgCell:nth-child(1) { background: linear-gradient(135deg, var(--fcPrimary), var(--fcAccent)); }
.imgCell:nth-child(2) { background: linear-gradient(135deg, var(--fcPanel), var(--fcPrimary)); }
.imgCell:nth-child(3) { background: linear-gradient(135deg, var(--fcAccent), var(--fcPanel)); }
.imgCell:nth-child(4) { background: linear-gradient(135deg, var(--fcPrimaryDeep), var(--fcPanel)); }

/* 分頁 */
.pageNav { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.pageBtn {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--fcRadiusPill);
  border: 1px solid var(--fcLine); background: var(--fcSurface); color: var(--fcTextMuted);
  font: inherit; font-weight: 700; cursor: pointer; display: grid; place-items: center;
}
.pageBtn.on, .pageBtn:hover { background: var(--fcPrimary); color: #fff; border-color: var(--fcPrimary); }

/* footer */
.siteFoot {
  margin-top: 40px; background: var(--fcPanel); color: rgba(255,255,255,.8);
  border-radius: var(--fcRadiusLg); padding: 30px 28px 22px;
}
.siteFoot .cheerFlag { border-radius: 4px; margin-bottom: 20px; }
.footGrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.footGrid h4 { color: #fff; font-size: .95rem; }
.footGrid a { color: rgba(255,255,255,.72); display: block; font-size: .84rem; padding: 3px 0; }
.footGrid a:hover { color: var(--fcAccent); }
.footBottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 20px; padding-top: 16px; font-size: .78rem; text-align: center; }

/* 響應式 */
@media (max-width: 900px) {
  .layoutGrid { grid-template-columns: 1fr; }
  .sideCol { position: static; }
  .articleGrid { grid-template-columns: 1fr 1fr; }
  .toolWall { grid-template-columns: 1fr 1fr; }
  .footGrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .topSearch { display: none; }
  .articleGrid, .toolWall, .footGrid, .statStrip { grid-template-columns: 1fr; }
  .coverBody { padding: 22px 18px; }
  .siteWrap { padding: 0 12px 40px; }
}

/* v2 visual direction: glossy fan community */
body { background-image: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--fcPrimary) 13%, transparent), transparent 30%), radial-gradient(circle at 95% 18%, color-mix(in srgb, var(--fcAccent) 11%, transparent), transparent 26%); }
.topbar { position:sticky; top:0; z-index:70; backdrop-filter:blur(18px) saturate(150%); background:color-mix(in srgb, var(--fcSurface) 86%, transparent); box-shadow:0 12px 36px rgba(37,27,86,.08); }
.siteWrap { max-width: 1360px; }
.coverCard { border-radius:24px; box-shadow:0 24px 55px rgba(34,33,90,.2); overflow:hidden; }
.coverCard::before { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 48%,rgba(255,255,255,.12)); pointer-events:none; }
.cardBox,.postCard { border-color:color-mix(in srgb,var(--fcPrimary) 11%,var(--fcLine)); box-shadow:0 12px 30px rgba(45,35,102,.08); transition:transform .2s ease,box-shadow .2s ease; }
.articleCard:hover,.toolItem:hover { transform:translateY(-4px); box-shadow:0 18px 38px rgba(45,35,102,.13); }
.btnPrimary { box-shadow:0 10px 24px color-mix(in srgb,var(--fcPrimary) 28%,transparent); }

/* ================= 廣告版位（AD-*）——原生預留、無素材自動塌陷 =================
   class 字根 sponsorSpot（camelCase）；贊助標示字樣「應援夥伴」。
   模板版位預設帶 hidden，loader 有素材才展開；preview 拿掉 hidden 顯示占位示意。 */
[hidden] { display: none !important; }

.sponsorSpot { position: relative; display: block; margin: 0 0 20px; }
.sponsorSpotTag {
  display: inline-block; margin-bottom: 8px;
  font-size: .66rem; font-weight: 800; letter-spacing: .05em;
  color: var(--fcPrimaryDeep); background: var(--fcPrimarySoft);
  border: 1px solid color-mix(in srgb, var(--fcPrimary) 30%, transparent);
  padding: 2px 10px; border-radius: var(--fcRadiusPill);
}
/* 占位示意框（橫幅／側欄類版位） */
.sponsorSpotBody {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; padding: 16px;
  border: 1.5px dashed color-mix(in srgb, var(--fcPrimary) 38%, var(--fcLine));
  border-radius: var(--fcRadius);
  background: color-mix(in srgb, var(--fcPrimary) 4%, var(--fcSurface));
  color: var(--fcTextMuted);
}
.sponsorSpotPh { font-size: .8rem; font-weight: 700; }
.sponsorSpotPh b { display: block; font-size: .92rem; color: var(--fcPrimary); letter-spacing: .04em; }
.sponsorSpotTop .sponsorSpotBody, .sponsorSpotEnd .sponsorSpotBody { min-height: 90px; }
.sponsorSpotSideA .sponsorSpotBody { min-height: 250px; }
.sponsorSpotSideB .sponsorSpotBody { min-height: 380px; }

/* 原生贊助（feed／result）：沿用 postCard 皮膚＋左緣色條＋標示 */
.sponsorSpotNative { border-left: 3px solid var(--fcPrimary); }
.sponsorSpotHint {
  display: inline-block; margin-top: 10px;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  color: var(--fcTextMuted); background: var(--fcSurfaceAlt);
  border: 1px dashed var(--fcLine); padding: 2px 9px; border-radius: var(--fcRadiusPill);
}
.sponsorSpotCta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; padding: 11px 14px; border-radius: var(--fcRadiusSm);
  background: var(--fcAccentSoft); border: 1px solid var(--fcAccent);
  color: var(--fcSecondary); font-weight: 800; font-size: .88rem;
}
/* 文章內原生（第 2 個 h2 前） */
.sponsorSpotArticle {
  margin: 1.4em 0; padding: 14px 16px; border-radius: var(--fcRadiusSm);
  border: 1px solid var(--fcLine); border-left: 3px solid var(--fcPrimary);
  background: color-mix(in srgb, var(--fcPrimary) 5%, var(--fcSurface));
}
.sponsorSpotLead { margin: 6px 0 0; font-size: .9rem; color: var(--fcText); }

/* 行動 sticky（≤768px、高 ≤56px、× 可關，checkbox hack 免 JS） */
.sponsorSpotSticky { display: none; }
.sponsorSpotClose {
  flex: 0 0 auto; width: 30px; height: 30px; margin-left: auto;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--fcLine); border-radius: 50%;
  background: var(--fcSurfaceAlt); color: var(--fcTextMuted); font-size: 1.15rem; line-height: 1;
}
@media (max-width: 768px) {
  /* 坐落於共用底部 tab（≤899px 佔位 72px）正上方；z-index 高於 shell 浮層，避免與底部工具列/模式鈕互疊破版 */
  .sponsorSpotSticky {
    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(--fcSurface); border: 1px solid var(--fcLine);
    border-radius: var(--fcRadius); box-shadow: var(--fcShadowHover);
  }
  .sponsorSpotSticky .sponsorSpotTag { margin: 0; }
  .sponsorSpotSticky .sponsorSpotPh { flex: 1; min-width: 0; text-align: left; font-size: .74rem; }
  .sponsorSpotSticky .sponsorSpotPh b { display: inline; margin-right: 6px; }
  .sponsorSpotChk:checked ~ .sponsorSpotSticky { display: none; }
}

/* ================= 手機廣告強化（≤768px 生效，桌機完全不變） =================
   側欄回流／result 大 CTA／sticky 迷你 CTA 條／插頁（預設關＋測試鈕）／CTA 全面加大。
   全部承接既有語意變數（fc*）與 sponsorSpot 皮膚，雙模式自動跟隨；桌機零改動。 */

/* 側欄回流卡：桌機不出現（side 版位仍在側欄），≤768 才於 feed 內顯示 */
.sponsorSpotReflow { display: none; }
/* 整卡可點的伸展連結：桌機不存在，≤768 覆蓋整張原生卡 */
.sponsorSpotStretch { display: none; }
/* 迷你 CTA 條子元素預設隱藏，僅 ≤768 sticky 內啟用 */
.sponsorSpotStickyIc { display: none; }

/* 插頁（AD-INTERSTITIAL，預設 hidden；由測試鈕／正式站 loader 控制） */
.sponsorSpotIntr {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: color-mix(in srgb, #05060f 72%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.sponsorSpotIntrCard {
  position: relative; width: 100%; max-width: 340px; text-align: center;
  background: var(--fcSurface); color: var(--fcText);
  border: 1px solid var(--fcLine); border-radius: var(--fcRadiusLg);
  box-shadow: var(--fcShadowHover); padding: 20px 18px 18px;
}
.sponsorSpotIntrImg { height: 148px; border-radius: var(--fcRadius); margin-bottom: 14px; background: linear-gradient(135deg, var(--fcPrimary), var(--fcAccent)); }
.sponsorSpotIntrCard .sponsorSpotTag { margin-bottom: 10px; }
.sponsorSpotIntrTitle { font-weight: 800; color: var(--fcSecondary); font-size: 1.15rem; margin: 0 0 6px; }
.sponsorSpotIntrText { color: var(--fcTextMuted); font-size: .9rem; margin: 0 0 16px; }
.sponsorSpotIntrCta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; font-size: 15px; font-weight: 800; text-decoration: none;
  border-radius: var(--fcRadiusPill); background: var(--fcPrimary); color: var(--fcBtnText);
}
.sponsorSpotIntrSkip {
  position: absolute; left: 14px; top: 12px; cursor: pointer; font-size: .72rem; font-weight: 700;
  color: var(--fcTextMuted); background: var(--fcSurfaceAlt);
  border: 1px solid var(--fcLine); border-radius: var(--fcRadiusPill); padding: 3px 10px;
}
.sponsorSpotIntrX {
  position: absolute; right: 12px; top: 10px; cursor: pointer; width: 30px; height: 30px;
  display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  color: var(--fcTextMuted); background: var(--fcSurfaceAlt);
  border: 1px solid var(--fcLine); border-radius: 50%;
}
/* 插頁測試鈕（示意用）：桌機完全不出現 */
.sponsorSpotIntrDemo { display: none; }

@media (max-width: 768px) {
  /* 1) 側欄回流：桌機 side 版位手機收起，改由 feed 內原生卡承接庫存 */
  .sponsorSpotSideA, .sponsorSpotSideB { display: none; }
  .sponsorSpotReflow { display: block; }

  /* 2) AD-RESULT 大 CTA：全寬、≥48px、字 ≥15px */
  .sponsorSpotCta { width: 100%; min-height: 48px; font-size: 15px; }

  /* 5) 原生卡整卡可點（result／feed／回流）＋ CTA 全面加大 */
  .sponsorSpotNative { position: relative; }
  .sponsorSpotStretch { display: block; position: absolute; inset: 0; z-index: 1; }
  .sponsorSpotNative .sponsorSpotCta { position: relative; z-index: 2; }

  /* 3) AD-STICKY 迷你 CTA 條：圖示＋文案＋CTA 鈕＋×（沿用固定底距 84px 與 z-index 1300） */
  .sponsorSpotSticky { height: auto; min-height: 56px; padding: 8px 8px 8px 10px; }
  .sponsorSpotStickyIc { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--fcPrimarySoft); font-size: 1rem; }
  .sponsorSpotStickyMsg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .sponsorSpotStickyMsg .sponsorSpotTag { margin: 0; align-self: flex-start; }
  .sponsorSpotStickyTxt { font-size: .8rem; font-weight: 700; color: var(--fcText); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sponsorSpotStickyGo {
    flex: 0 0 auto; display: grid; place-items: center; min-height: 40px; padding: 0 14px; text-decoration: none;
    border-radius: var(--fcRadiusPill); background: var(--fcPrimary); color: var(--fcBtnText); font-weight: 800; font-size: 15px;
  }

  /* 4) 插頁測試鈕：固定左上、不擋內容、僅示意 */
  .sponsorSpotIntrDemo {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    position: fixed; left: 8px; top: 72px; z-index: 1250;
    padding: 7px 12px; min-height: 34px; font-size: .74rem; font-weight: 800;
    color: var(--fcBtnText); background: var(--fcPrimary);
    border: none; border-radius: var(--fcRadiusPill); box-shadow: var(--fcShadow);
  }
}