@font-face{
  font-family:'jf-openhuninn';
  src:url('https://cdn.jsdelivr.net/gh/justfont/open-huninn-font/font/jf-openhuninn-2.1.ttf') format('truetype');
  font-weight:400 700;font-display:swap;
}

/* ===== 深色（預設） ===== */
:root,:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0f13; --surface:#151a21; --surface-2:#1c222b; --ink:#e9edf3; --muted:#98a2af; --line:#242c36;
  --accent:#e5402c; --accent-2:#ff6a58; --accent-ink:#fff; --ring:rgba(229,64,44,.32);
  --topbar:rgba(15,19,25,.72); --shadow:0 22px 50px rgba(0,0,0,.4);
  --den-low:#3a4048; --den-high:#e5402c; --empty:#2a2f36;
  --legend-fg:#b6bfca;
}
/* ===== 淺色 ===== */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f1f3f6; --ink:#1a1f27; --muted:#667085; --line:#e7eaef;
  --accent:#e5402c; --accent-2:#e5402c; --accent-ink:#fff; --ring:rgba(229,64,44,.22);
  --topbar:rgba(255,255,255,.8); --shadow:0 20px 45px rgba(38,50,70,.1);
  --den-low:#e2e6ec; --den-high:#e5402c; --empty:#e9edf1;
  --legend-fg:#4b5563;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
  font-family:'jf-openhuninn',"Microsoft JhengHei",-apple-system,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-underline-offset:2px}
button{font:inherit}
/* 深淺切換：從主題鈕圓形擴散 */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:.5s cubic-bezier(.3,0,.2,1) both vt-reveal}
@keyframes vt-reveal{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,0))}to{clip-path:circle(var(--vt-r,160vmax) at var(--vt-x,50%) var(--vt-y,0))}}
.wrap{width:min(1120px,100%);margin:0 auto;padding:18px 16px 8px}

/* ===== 頁首 ===== */
.topbar{display:flex;align-items:center;gap:10px;padding:16px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.mast{display:flex;align-items:center;gap:12px;min-width:0}
.cam{width:34px;height:34px;flex-shrink:0;color:var(--accent)}
.cam svg{width:100%;height:100%;display:block}
.mastwrap{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.mast-name{font-size:19px;font-weight:800;letter-spacing:.6px}
.tagline{font-size:11.5px;color:var(--muted);letter-spacing:.3px}
.headctl{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}
.iconbtn{position:relative;width:38px;height:38px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;
  background:var(--surface-2);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .2s,background .2s,transform .12s}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn:active{transform:scale(.9)}
#sharebtn svg{width:18px;height:18px;display:block}
.themebtn .ic{position:absolute;inset:0;margin:auto;width:19px;height:19px;fill:currentColor;
  transition:opacity .28s ease,transform .42s cubic-bezier(.5,-.3,.4,1.35)}
:root[data-theme="dark"] .ic-sun{opacity:1;transform:rotate(0)}
:root[data-theme="dark"] .ic-moon{opacity:0;transform:rotate(-55deg) scale(.55)}
:root[data-theme="light"] .ic-sun{opacity:0;transform:rotate(55deg) scale(.55)}
:root[data-theme="light"] .ic-moon{opacity:1;transform:rotate(0)}
.sharemenu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;min-width:152px;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:2px}
.sharemenu[hidden]{display:none}
.sharemenu button{border:0;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;
  text-align:left;padding:8px 12px;border-radius:8px;cursor:pointer}
.sharemenu button:hover{background:var(--surface-2);color:var(--accent)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);z-index:60;
  background:var(--ink);color:var(--surface);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:999px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== 諷刺標語 ===== */
.hero-sub{margin:14px 2px 0;font-size:clamp(14px,2.4vw,16.5px);color:var(--muted);line-height:1.7;max-width:44em;text-wrap:pretty}
.hero-sub b{color:var(--accent);font-weight:700}
.hero-sub .nb{white-space:nowrap}

/* ===== 大計數器 ===== */
.counters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 6px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 16px;text-align:center;box-shadow:var(--shadow)}
.metric .num{font-size:clamp(30px,6vw,46px);font-weight:800;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:.5px}
.metric .num .unit{font-size:.42em;font-weight:700;color:var(--ink);margin-left:.25em;letter-spacing:0}
.metric .cap{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}
.metric .cap b{color:var(--ink);font-weight:700}
.yeartabs{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.ytab{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;
  padding:6px 16px;border-radius:999px;cursor:pointer;font-variant-numeric:tabular-nums;
  transition:border-color .15s,color .15s,background .15s,transform .1s}
.ytab:hover{border-color:var(--accent);color:var(--ink)}
.ytab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 2px 10px var(--ring)}
.ytab:active{transform:scale(.95)}
.ytab.is-partial::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.55;margin-left:6px;vertical-align:middle}
.ytab-panel[hidden]{display:none}
.panel-note{font-size:12.5px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;margin:0 0 10px}
.sect-note{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0 0;padding-top:9px;border-top:1px dashed var(--line)}
.fine-note{text-align:center;font-size:13px;color:var(--muted);margin:8px 0 0}
.sechead{display:flex;align-items:center;justify-content:space-between;gap:12px 14px;flex-wrap:wrap}
.sechead h2{margin:0}
.opencta{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none;
  padding:9px 17px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;font-size:14px;
  border:1px solid var(--accent);transition:transform .1s,filter .15s}
.opencta:hover{transform:translateY(-1px);filter:brightness(1.08)}
.opencta .oc-ic{font-size:16px}
.opencta .oc-ar{font-size:17px}
.fine-note .est{display:inline-block;font-size:11px;font-weight:700;color:var(--accent);
  border:1px solid var(--ring);border-radius:999px;padding:1px 8px;margin-right:6px;vertical-align:1px}
.fine-note b{color:var(--ink);font-weight:800;font-size:1.15em}

/* ===== 區塊通用 ===== */
.section{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 18px;margin-top:16px;box-shadow:var(--shadow)}
.section > h2{margin:0 0 4px;font-size:clamp(17px,3vw,20px);font-weight:800;letter-spacing:.3px}
.section > .sub{margin:0 0 16px;font-size:13px;color:var(--muted)}

/* ===== 密度地圖 ===== */
.densemapwrap{display:flex;justify-content:center;margin-top:4px}
.densemap{width:min(300px,74%);height:auto;display:block}
.densemap path{stroke:var(--surface);stroke-width:.5;transition:filter .12s}
.densemap path:hover{filter:brightness(1.18)}
.denselegend{display:flex;align-items:center;gap:12px;max-width:520px;margin:20px auto 0}
.denselegend .dl-lab{font-size:12px;color:var(--legend-fg);white-space:nowrap;font-variant-numeric:tabular-nums}
.denselegend .scalebar{flex:1}
.scalebar{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--den-low),var(--den-high))}
.offrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:760px;margin:16px auto 0}
.offrow .chip{flex:1 1 230px}
.chip{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 13px}
.chip .sw{width:15px;height:15px;border-radius:5px;flex-shrink:0}
.chip .nm{font-weight:700;font-size:14px;white-space:nowrap}
.chip .vv{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.chip .vv b{color:var(--ink);font-weight:700}

/* ===== 最兇相機 Top10 ===== */
.toplist{display:flex;flex-direction:column;gap:8px}
.topcard{display:flex;align-items:center;gap:14px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px}
.topcard .rk{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.topcard:nth-child(1) .rk,.topcard:nth-child(2) .rk,.topcard:nth-child(3) .rk{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.topcard .info{min-width:0;flex:1}
.topcard .loc{display:inline-flex;align-items:baseline;gap:5px;font-weight:700;font-size:14.5px;line-height:1.35;word-break:break-word;color:var(--ink);text-decoration:none}
.topcard .loc .pin{flex-shrink:0;color:var(--accent);opacity:.85;transform:translateY(2px)}
.topcard .loc.approx .pin{color:var(--muted);opacity:.55}
.topcard .loc:hover{color:var(--accent)}
.topcard .loc:hover span{text-decoration:underline;text-underline-offset:2px}
.topcard .unit{font-size:11.5px;color:var(--muted);margin-top:2px;word-break:break-word}
.topcard .cnt{flex-shrink:0;text-align:right}
.topcard .cnt b{display:block;font-size:19px;font-weight:800;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.topcard .cnt span{font-size:11px;color:var(--muted)}

/* ===== 縣市密度排行（長條） ===== */
.barchart{width:100%;height:auto;display:block}
.barchart .lab{fill:var(--ink);font-size:9px;font-weight:700}
.barchart .val{fill:var(--muted);font-size:8.5px;font-weight:700;font-variant-numeric:tabular-nums}
.barchart .track{fill:var(--surface-2)}
.barchart .bar{fill:var(--accent)}

/* ===== 逐年趨勢 ===== */
.linechart{width:100%;height:auto;display:block}
.linechart .grid{stroke:var(--line);stroke-width:.6}
.linechart .axis{fill:var(--muted);font-size:8px;font-variant-numeric:tabular-nums}
.linechart .seg{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.linechart .seg.partial{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4;opacity:.85}
.linechart .dot{fill:var(--accent)}
.linechart .dot.partial{fill:var(--surface);stroke:var(--muted);stroke-width:1.8}
.linechart .ylab{fill:var(--ink);font-size:8.5px;font-weight:700;font-variant-numeric:tabular-nums}
.linechart .ptag{fill:var(--muted);font-size:7.5px;font-weight:700}
.trend-note{font-size:12px;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.trend-note i{display:inline-block;width:20px;height:0;border-top:2px dashed var(--muted);vertical-align:middle}

footer.dis{margin:20px auto 0;max-width:1120px;font-size:11px;color:var(--muted);text-align:center;line-height:1.7;padding:0 8px}

/* ===== 手機 ===== */
@media(max-width:720px){
  .wrap{padding:12px 12px 6px}
  .counters{grid-template-columns:1fr;gap:10px}
  .metric{padding:18px 16px}
  .metric .num{font-size:clamp(32px,10vw,42px)}
  .mapgrid{gap:16px}
  .mapside{min-width:0;width:100%}
  .topcard{gap:10px;padding:11px 12px}
  .topcard .loc{font-size:13.5px}
}