@font-face{
  /* LINE Seed TW ExtraBold，SIL OFL（授權全文在 web/fonts/LINESeedTW-OFL.txt）。
     子集化版本，原檔 3.5MB → 217KB。子集由 tools/build-font.js 產生。 */
  font-family:"LINESeedTW";
  src:url("/fonts/LINESeedTW-Eb-subset.woff2") format("woff2");
  font-weight:700 900;font-style:normal;font-display:swap;
}
/* 三個前台頁面共用的版型：色票、頂欄、容器、頁尾。
 * 抽出來是因為 xvote/swap/comeback 的殼一模一樣——
 * 各自複製一份的話，之後改色或改頂欄要記得改三個地方，而漏掉的那個
 * 不會報錯，只會慢慢長得不一樣。 */
:root{
  --page:#F2F9FF;--surface:#FFFFFF;--surface-2:#EAF4FF;--surface-3:#DEEDFF;
  --ink:#111111;--ink-2:#3D3D3D;--ink-3:#5B6874;--ink-4:#5B6874;
  --line:#DEEDFF;--line-2:#C4DFFA;
  --blue:#16ACFF;--blue-pale:#DEEDFF;--blue-text:#0A6291;
  --blue-solid:#16ACFF;--pink-solid:#C2185B;--pink-text:#C2185B;
  --pink:#F63F7D;--pink-pale:#FFDEF7;
  --r:10px;--r-sm:6px;
  --f-sans:"Huninn","Noto Sans KR","Noto Sans TC",system-ui,-apple-system,sans-serif;
  --f-disp:"Huninn","Noto Sans KR","Noto Sans TC",system-ui,sans-serif;
  /* 標題用 LINE Seed 最粗；內文與置頂維持粉圓 */
  --f-head:"LINESeedTW","Huninn","Noto Sans TC",system-ui,sans-serif;
  --f-px:"Press Start 2P","M PLUS 1p",monospace;
  --f-num:"M PLUS 1p",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--page);scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--f-sans);
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- 頂欄：與首頁同一條藍帶 ---------- */
.topbar{position:sticky;top:0;z-index:41;background:var(--blue-solid);
  border-bottom:1px solid var(--blue-solid)}
.topbar-in{max-width:760px;margin:0 auto;padding:8px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand img{width:26px;height:26px;flex:0 0 auto}
.brand b{--a11y-exempt:"白字配 #16ACFF（對比 2.51）。使用者兩次指定要這支天藍配白字，知道數字之後仍然選它。與首頁同一個決定。";
  font-family:var(--f-num);font-weight:800;font-size:16px;letter-spacing:.02em;white-space:nowrap;color:#fff}
.back{--a11y-exempt:"白字配 #16ACFF（對比 2.51）。與首頁標題列同一個決定。";
  font-size:11.5px;color:#fff;text-decoration:none;white-space:nowrap;flex:0 0 auto;
  padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.55);opacity:.9}

.wrap{max-width:760px;margin:0 auto;padding:20px 16px 72px}
.px{font-family:var(--f-px);font-size:9px;letter-spacing:.06em;color:var(--blue-solid)}
h1{font-family:var(--f-head);font-size:21px;letter-spacing:.02em;margin:2px 0 4px}
.lede{margin:0 0 6px;font-size:13px;color:var(--ink-3);text-wrap:pretty}
.empty{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:26px 16px;text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.9}
.foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);line-height:1.9}
.foot a{color:var(--blue-text)}

@media (max-width:560px){
  .topbar-in{gap:8px;padding:8px 12px}
  .back{font-size:10px;padding:4px 8px}
  .wrap{padding:18px 14px 64px}
  h1{font-size:19px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}