/* ═══════════════════════════════════════════════════════════════
   順發公益網 csr.sunfar.tw — 共用樣式
   視覺代幣沿用 love.sunfar.tw 電視牆（順發標準色 Pantone 2728C / 305C / 1585C）。
   品牌站只有淺色一種主題，所有顏色都明確指定。
   頁面專屬樣式放 static/css/<page>.css，只能用這裡的代幣，不重定義。
   ═══════════════════════════════════════════════════════════════ */
:root{
  --blue:#0032F0;        /* 主藍：品牌條、標題數字、主按鈕 */
  --blue-ink:#123A9E;    /* 深藍：hover、深一階 */
  --blue-deep:#06236E;   /* 即時看板與重點敘事區的深藍底 */
  --blue-tint:#E9EEFF;   /* 藍色淡底：chip、標記 */
  --sky:#69D2FF;         /* 天藍：裝飾方塊、次要強調 */
  --sky-tint:#E4F6FF;
  --orange:#FF7D19;      /* 橘：只給「正在發生」— 即時、行動、新增 */
  --orange-ink:#C25400;  /* 橘色小字用這個才夠對比 */
  --orange-tint:#FFF1E6;
  --page:#EDF1F8;        /* 頁面底 */
  --card:#FFFFFF;
  --ink:#1C2B4E;         /* 正文與標題：藍黑 */
  --ink-dim:#53627F;     /* 說明、日期、註解；確保淺底上的閱讀對比 */
  --line:#E3E9F3;
  --shadow:0 6px 24px rgba(20,45,110,.08);
  --shadow-lg:0 18px 48px rgba(20,45,110,.16);
  --r:12px; --r-sm:10px; --r-pill:999px;
  --wrap:1200px;
  --font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  /* 字級階梯（手機→桌機用 clamp 過渡）*/
  --fs-display:clamp(34px,6vw,56px);
  --fs-h1:clamp(30px,4.5vw,46px);
  --fs-h2:clamp(24px,3.2vw,32px);
  --fs-h3:clamp(18px,2vw,20px);
  --fs-body:clamp(16px,1.1vw,17px);
  --fs-small:14px; --fs-xs:12.5px;
  --sec-y:clamp(32px,4.5vw,56px);   /* 區段上下留白（2026-09-03 收緊：原 44–88px） */
  --topbar-h:64px;       /* 品牌條高度：手機 64、桌機 96（下方 sticky／錨點位移都引用它） */
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font); font-size:var(--fs-body); line-height:1.75;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
img,picture{ max-width:100%; }
picture{ display:block; }
picture img{ display:block; width:100%; height:auto; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:4px; }
h1,h2,h3,h4{ margin:0; line-height:1.25; text-wrap:balance; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding-left:1.25em; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:8px; top:-48px; background:var(--card); color:var(--blue); padding:8px 14px; border-radius:var(--r-sm); z-index:99; font-weight:700; }
.skip:focus{ top:8px; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.wrap-wide{ max-width:1320px; }
@media (min-width:768px){ .wrap{ padding:0 32px; } }

/* ── 品牌條（header）：與電視牆頂部同一語法 ── */
.topbar{ background:var(--blue); color:#fff; position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(0,20,90,.25); }
.topbar-in{ display:flex; align-items:center; gap:16px; min-height:var(--topbar-h); }
.brand{ display:flex; align-items:center; gap:14px; color:#fff; flex:0 0 auto; }
.brand:hover{ text-decoration:none; }
.brand-logo{ height:32px; width:auto; display:block; }
.brand-cap{ display:none; font-size:13px; line-height:1.35; color:rgba(255,255,255,.9); padding-left:16px; border-left:1px solid rgba(255,255,255,.35); }
.brand-cap b{ display:block; font-size:15px; font-weight:900; }
@media (min-width:1100px){ .brand-cap{ display:block; } }
.nav{ display:none; }
.nav-link{ color:#fff; font-weight:700; font-size:15px; padding:8px 12px; border-radius:var(--r-pill); white-space:nowrap; transition:background .15s, color .15s; }
.nav-link:hover{ text-decoration:none; background:rgba(255,255,255,.16); }   /* 滑過：整格亮起 */
.nav-link.on{ background:#fff; color:var(--blue); }                           /* 所在頁：整格白底藍字 */
.nav-link.on:hover{ background:#fff; }
.nav-link:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.nav-link.accent{ padding:8px 12px; background:var(--orange); border:0; border-radius:var(--r-pill); box-shadow:0 5px 14px rgba(0,20,90,.18); }
.nav-link.accent:hover{ background:#E96700; border:0; }
.nav-link.planned{ opacity:.62; cursor:default; }
.nav-link.planned small{ display:inline-block; margin-left:5px; font-size:10px; font-weight:700; letter-spacing:.06em; background:rgba(255,255,255,.16); border-radius:var(--r-pill); padding:1px 6px; vertical-align:middle; }
.nav-toggle{ margin-left:auto; width:44px; height:44px; border:0; background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); }
.nav-toggle-bars{ position:relative; width:22px; height:2px; background:#fff; display:block; transition:background .2s; }
.nav-toggle-bars::before,.nav-toggle-bars::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; transition:transform .25s; }
.nav-toggle-bars::before{ top:-7px; } .nav-toggle-bars::after{ top:7px; }
.nav-open .nav-toggle-bars{ background:transparent; }
.nav-open .nav-toggle-bars::before{ transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle-bars::after{ transform:translateY(-7px) rotate(-45deg); }
.promise{ display:none; align-items:center; gap:10px; margin-left:auto; font-size:12px; line-height:1.3; }
.promise img{ height:40px; width:auto; }
.promise b{ display:block; color:var(--orange); font-size:13px; font-weight:900; }
.promise span{ color:rgba(255,255,255,.9); }
/* 手機：選單從品牌條下方展開 */
@media (max-width:899px){
  .nav-open .nav{ display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%; background:var(--blue-ink); padding:8px 20px 16px; gap:2px; box-shadow:0 12px 30px rgba(0,20,90,.35); }
  .nav-open .nav-link{ padding:12px 14px; border-radius:var(--r-sm); font-size:16px; }
  .nav-open .nav-link.on{ background:#fff; color:var(--blue); }
  .nav-open .nav-link:hover{ background:rgba(255,255,255,.12); }
  .nav-open .nav-link.accent{ margin-top:8px; padding:12px 16px; text-align:center; border-bottom:0; color:#fff; }
}
@media (min-width:900px){
  :root{ --topbar-h:92px; }
  .topbar-in{ gap:20px; }
  .brand{ gap:16px; }
  .brand-logo{ height:38px; }
  .nav{ display:flex; gap:6px; margin:0 auto; }
  .nav-link{ font-size:16px; padding:10px 14px; }
  .nav-link.accent{ padding:10px 14px; }
  .nav-toggle{ display:none; }
  .promise{ display:flex; margin-left:0; gap:12px; font-size:13px; }
  .promise img{ height:48px; }
  .promise b{ font-size:14px; white-space:nowrap; }
}
@media (min-width:1200px){
  :root{ --topbar-h:96px; }
  .topbar-in{ gap:24px; }
  .brand{ gap:18px; }
  .brand-logo{ height:42px; }
  .nav{ gap:8px; }
  .nav-link{ font-size:17px; padding:10px 16px; }
  .nav-link.accent{ padding:10px 16px; }
  .promise img{ height:54px; }
  .promise b{ font-size:15px; }
}

/* ── 區段 ── */
.sec{ padding:var(--sec-y) 0; position:relative; }
.sec.tone-alt{ background:var(--card); }
.sec.tone-blue{ background:var(--blue); color:#fff; }
.sec.tone-blue .sec-title,.sec.tone-blue .eyebrow{ color:#fff; }
.sec.tone-blue .sec-sub{ color:rgba(255,255,255,.85); }
.sec-head{ margin-bottom:clamp(18px,2.5vw,28px); max-width:62ch; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.22em; color:var(--blue); text-transform:uppercase; margin:0 0 8px; }
.eyebrow.org{ color:var(--orange-ink); }
.sec-title{ font-size:var(--fs-h2); font-weight:900; }
.sec-title b,.sec-title strong{ color:var(--blue); font-weight:900; }
.sec-sub{ margin-top:8px; color:var(--ink-dim); font-size:var(--fs-small); line-height:1.75; }
.prose{ max-width:66ch; }
.prose p{ margin:0 0 1em; }
.prose p:last-child{ margin-bottom:0; }
.prose h3{ font-size:var(--fs-h3); font-weight:700; margin:1.6em 0 .5em; }
.prose blockquote{ margin:1.2em 0; padding:14px 20px; border-left:4px solid var(--sky); background:var(--card); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--ink); }
.prose ul,.prose ol{ margin:.6em 0 1em; }
.prose li{ margin:.3em 0; }
.lede{ font-size:clamp(17px,1.4vw,20px); line-height:1.8; max-width:60ch; }

/* ── 卡片 / 格線 ── */
.card{ background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); }
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:1fr 1fr; }
@media (min-width:640px){ .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ── 按鈕 / 標籤 / 提示 ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:var(--r-pill); padding:12px 22px; font-weight:900; font-size:15px; line-height:1; border:2px solid transparent; transition:transform .15s, box-shadow .15s, background .15s; }
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-pri{ background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(0,50,240,.25); }
.btn-pri:hover{ background:var(--blue-ink); }
.btn-sec{ background:var(--card); color:var(--blue); border-color:var(--blue); }
.btn-sec:hover{ background:var(--blue-tint); }
.btn-org{ background:var(--orange); color:#fff; box-shadow:0 8px 20px rgba(255,125,25,.28); }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.tag{ display:inline-block; font-size:var(--fs-xs); font-weight:700; border-radius:var(--r-pill); padding:4px 11px; line-height:1.4; letter-spacing:.04em; }
.tag-blue{ background:var(--blue-tint); color:var(--blue); }
.tag-org{ background:var(--orange-tint); color:var(--orange-ink); }
.tag-sky{ background:var(--sky-tint); color:var(--blue-ink); }
.hint{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; margin-left:6px; border-radius:50%; border:1.5px solid #B9C6DC; color:#8494B2; font-size:11px; font-weight:700; line-height:1; vertical-align:middle; cursor:help; }

/* ── KPI 數字卡（與電視牆同款）── */
.kpi{ position:relative; background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.kpi-ic{ height:44px; margin-bottom:6px; }
.kpi-ic img,.kpi-ic picture img{ height:44px; width:auto; }
.kpi-label{ font-size:var(--fs-small); font-weight:700; color:var(--blue); display:flex; align-items:center; }
.kpi-num{ font-size:clamp(28px,3.2vw,40px); font-weight:900; line-height:1.1; color:var(--blue); letter-spacing:-.01em; overflow-wrap:anywhere; }
.kpi-num small{ font-size:.5em; font-weight:900; margin:0 .06em 0 .1em; letter-spacing:.02em; }
.kpi-sub{ font-size:var(--fs-xs); color:var(--ink-dim); margin-top:2px; }
.kpi-live{ background:var(--orange); color:#fff; }
.kpi-live .kpi-label,.kpi-live .kpi-num{ color:#fff; }
.kpi-live .kpi-sub{ color:rgba(255,255,255,.92); }
.kpi-live .hint{ border-color:rgba(255,255,255,.7); color:#fff; }
.kpi-pulse{ position:absolute; right:16px; top:16px; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.35); animation:kpulse 1.8s ease-in-out infinite; }
@keyframes kpulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(255,255,255,.35); } 50%{ box-shadow:0 0 0 8px rgba(255,255,255,.15); } }
.kpi-num.updated{ animation:kpop .6s ease; }
@keyframes kpop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.05); } 100%{ transform:scale(1); } }

/* ── 散落方塊：品牌背牆的裝飾語彙，低調鋪在留白處 ── */
.deco{ position:absolute; border-radius:2px; pointer-events:none; z-index:0; width:12px; height:12px; }
.deco-sky{ background:var(--sky); } .deco-org{ background:var(--orange); } .deco-blu{ background:var(--blue); }

/* ── 頁尾 ── */
.footer{ background:var(--card); border-top:1px solid var(--line); }
.slogan-bar{ background:var(--blue); color:#fff; padding:18px 0; text-align:center; }
.slogan{ font-size:clamp(17px,2.2vw,22px); font-weight:900; letter-spacing:.08em; }
.slogan em{ font-style:normal; color:var(--orange); }
.footer-in{ display:grid; gap:28px; padding:40px 20px; }
@media (min-width:768px){ .footer-in{ grid-template-columns:1.4fr 1fr 1fr; padding:48px 32px; } }
.footer-brand img{ height:56px; width:auto; }
.footer-brand p{ margin-top:14px; color:var(--ink-dim); font-size:var(--fs-small); max-width:40ch; }
.footer-col h3{ font-size:var(--fs-small); font-weight:900; letter-spacing:.12em; color:var(--blue); margin-bottom:10px; }
.footer-col p{ font-size:var(--fs-small); line-height:1.9; color:var(--ink); }
.footer-copy{ border-top:1px solid var(--line); padding:16px 20px; font-size:var(--fs-xs); color:var(--ink-dim); }

/* ── 動態節制 ── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}