/* ============================================================
   migrant.taiwan1996.com — 共用設計系統「海島自然」
   頁面外框（nav / header / card / button）走深 teal→海藍 + 島綠，
   圖表語意色（存量藍 / 流量橘）保留不動。
   ============================================================ */
:root{
  /* 海島自然 palette */
  --sea-900:#0b4f5e; --sea-800:#0d5f70; --sea-700:#0e7490; --sea-600:#0891b2;
  --island:#15803d; --island-soft:#1f9d52;
  --bg:#faf8f4; --surface:#ffffff; --surface-2:#f4f1ea;
  --ink:#182f2e; --muted:#5c6b6a; --line:#e7e3da;
  --shadow:0 1px 2px rgba(11,79,94,.04), 0 6px 18px rgba(11,79,94,.06);
  --shadow-hi:0 4px 10px rgba(11,79,94,.08), 0 14px 34px rgba(11,79,94,.10);
  /* 圖表語意色（勿改語意） */
  --stock:#1f6fb2; --flow:#c2660f; --dpp:#4d9221; --kmt:#2166ac; --ml:#7b3294;
  --warn-bg:#fff8e6; --warn-line:#f0e0a8; --warn-ink:#8a6d00;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink); background:var(--bg); line-height:1.7;
  font-family:"PingFang TC","Noto Sans TC",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--sea-700);}

/* ---------- 導覽列 ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:11px 22px;
  background:linear-gradient(104deg,var(--sea-900) 0%,var(--sea-700) 62%,var(--island) 165%);
  color:#eafcff; box-shadow:0 2px 14px rgba(11,79,94,.22);
}
.site-nav .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; }
.brand-mark{ width:26px; height:32px; flex:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.25)); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mark{ transform:translateY(-1px) rotate(-4deg) scale(1.05); }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-txt b{ font-size:15.5px; letter-spacing:.02em; font-weight:800; }
.brand-txt em{ font-style:normal; font-size:11px; color:#aee6ef; letter-spacing:.03em; }
.nav-links{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav-links a{
  position:relative; color:#d5f2f6; text-decoration:none; font-size:14px;
  padding:7px 13px; border-radius:8px; transition:color .2s, background .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  background:#fff; border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.10); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a.active{ color:#fff; font-weight:700; background:rgba(255,255,255,.16); }
.nav-links a.active::after{ transform:scaleX(1); background:#a7f3c6; }

/* ---------- 頁首橫幅 ---------- */
.hero{
  padding:22px 22px 18px; color:#fff;
  background:linear-gradient(120deg,var(--sea-900),var(--sea-700));
  position:relative; overflow:hidden;
}
.hero::after{ /* 淡島形水印 */
  content:""; position:absolute; right:-10px; top:-30px; width:220px; height:260px;
  background:radial-gradient(closest-side,rgba(167,243,198,.16),transparent 70%);
  pointer-events:none;
}
.hero h1{ font-size:20px; margin:0 0 5px; letter-spacing:.01em; }
.hero .sub{ color:#c7ecef; font-size:13px; max-width:760px; }
.hero .sub b{ color:#fff; }

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px; box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.card.lift:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hi); }

/* ---------- 分段按鈕 / select ---------- */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface); }
.seg button{ border:0; background:transparent; padding:7px 14px; cursor:pointer; font-size:13px; color:var(--muted); transition:background .2s,color .2s; }
.seg button:hover{ background:var(--surface-2); }
.seg button.on{ background:linear-gradient(120deg,var(--sea-800),var(--sea-600)); color:#fff; font-weight:600; }
select{
  width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink); font-size:13px; transition:border-color .2s, box-shadow .2s;
}
select:focus{ outline:none; border-color:var(--sea-600); box-shadow:0 0 0 3px rgba(8,145,178,.15); }

/* ---------- badge / caveat ---------- */
.badge{ display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:6px; color:#fff; }
.badge.stock{ background:var(--stock); } .badge.flow{ background:var(--flow); }
.badge.ok{ background:var(--island); } .badge.miss{ background:#c23b3b; }
.caveat{
  margin-top:10px; font-size:12.5px; line-height:1.55;
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:9px; padding:9px 11px;
}
.caveat b{ color:var(--warn-ink); }

/* ---------- 提示框 ---------- */
.tip{
  position:fixed; pointer-events:none; z-index:80;
  background:var(--sea-900); color:#fff; font-size:12px; padding:7px 10px; border-radius:8px;
  opacity:0; transition:opacity .12s; max-width:240px; line-height:1.45;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.tip .v{ font-weight:800; }

/* ---------- 通用小工具 ---------- */
.sub{ color:var(--muted); font-size:13px; }
.sub a{ color:var(--sea-700); text-decoration:none; }
.muted{ color:var(--muted); }
footer{ color:var(--muted); font-size:11.5px; }
.foot-meta{ margin-top:9px; padding-top:9px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.foot-meta a{ color:var(--sea-700); text-decoration:none; font-weight:600; }
.foot-meta a:hover{ text-decoration:underline; }
svg{ width:100%; height:auto; display:block; }
.axis text{ font-size:11px; fill:var(--muted); } .axis line,.axis path{ stroke:#dcd7cc; }

/* ---------- 進場動畫（細膩克制） ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
.reveal{ opacity:0; animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal.d1{ animation-delay:.06s; } .reveal.d2{ animation-delay:.14s; }
.reveal.d3{ animation-delay:.22s; } .reveal.d4{ animation-delay:.30s; } .reveal.d5{ animation-delay:.38s; }

/* 圖表描繪動畫（由 JS 加 class 觸發亦可，這裡提供 CSS 基礎） */
.draw-line{ stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000); animation:draw 1.1s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.grow-bar{ transform:scaleX(0); transform-origin:left; animation:grow .8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes grow{ to{ transform:scaleX(1); } }
path.county{ transition:fill .45s ease, stroke-width .15s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; }
  .draw-line{ stroke-dashoffset:0; } .grow-bar{ transform:none; }
}