/* 為愛前行 — 共用視覺「玻璃泡泡」
 *
 * 2026-09-09 改版（Francis 從三個方向裡選了這一個，另兩個是「官網同款」與
 * 「申請表」）。整套世界一句話：內容是不透明的白卡，控制項是浮起的玻璃，
 * 一頁只有一顆有色的泡泡。
 *
 * ── 方向契約 ────────────────────────────────────────────────────────
 * THESIS: 內容是不透明的白卡，控制項是浮起的玻璃；一頁只有一顆有色的泡泡。
 *   拒絕「整頁毛玻璃」—— 玻璃是可以按的東西才有的材質，讀的東西一律實白。
 * OWN-WORLD: 白底＋四角一點官網玫瑰／橘暈（中心洗到白，oklab 內插）；白色 28px
 *   圓角卡；墨字 #212121；Liquid Glass 控制項（半透明白＋blur 22px＋上緣 1px 高光
 *   ＋.5px 環）；玫瑰→橘的有色泡泡只給主要動作；iOS 分組清單（日期是左邊一格、
 *   分隔線從文字左緣起）；分段控制當篩選。後台走同一套 Apple 語彙；2026-09-18 起後台不包卡——殼是一片浮起的玻璃側欄，
 *   內容直接站在暈裡，段落靠字級與髮絲線（見 public/admin.html 檔頭）。
 * STORY: 讀者覺得這是手機裡熟悉的那種畫面，一格一格點下去，最後按那顆會發亮的。
 * FIRST VIEWPORT: 透明頁首（人形＋名字）→ 標題站在暈裡 → 一張白卡三組數字
 *   → 狀態標籤＋玻璃「填寫報名表」泡泡 → 白卡放說明。
 * FORM: IMPECCABLE'S PICK（我自己排序第一的候選：iOS 分組清單＋玻璃）；
 *   seed 03129ea2。答答 2026-09-07 的 mock 與 09-09 的後台是同一家族。
 * FINISH: unreviewed and undocumented is unfinished; this build ends with the finish
 *   review, the verdict, DESIGN.md, and every shipping raster carrying its provenance.
 * ────────────────────────────────────────────────────────────────────
 *
 *   ・底是白的，四角各一團官網色的暈（oklab 內插，farthest-side 讓中心洗到白）
 *   ・「卡」是不透明的白紙，28px 圓角，深度只有一圈 1px 與一層很淡的落影
 *   ・玻璃只給控制項：分頁、按鈕、搜尋框、報到碼框。半透明白＋backdrop-filter，
 *     上緣一道 1px 白高光（那是 Liquid Glass 的厚度），外圍 .5px 深環
 *   ・一頁只有一顆有色的泡泡（--tint-bg 漸層），其餘按鈕是無色玻璃
 *   ・狀態是淡玫瑰底的膠囊標籤，不是滿版強色
 *   ・prefers-reduced-transparency 時所有玻璃退成實白（檔尾）
 *
 * 色票正本仍是官網（themes/custom/afl/css/custom.css 的 #EA5E6A）。
 * 這裡沿用官網色系，不自創色相。
 *
 * 三個對官網的刻意偏離（理由都是可讀性，不是品味）：
 * 1. 文字一律用 --ink #212121（官網的內文色），不用 --rose：#EA5E6A 落在白上只有 3.4:1。
 * 2. 需要玫瑰色的字（必填星、狀態標籤、連結強調）用 --lit #C13D50：
 *    落在白上 5.2:1、落在淡玫瑰 --pink-050 上 4.6:1，兩個方向都過 4.5。
 * 3. 漸層泡泡的橘端從官網的 #F38C5B 壓深到 #D96A33：白字落在原色上只有 2.9:1，
 *    壓深後 3.5:1（主鈕是 19px/600，大字門檻 3:1）。玫瑰端 #DC4552 是 4.2:1。
 *
 * 尺標（--t / --sp / --r 三組）是這份檔案的重點：字級、間距、圓角各只有一套。
 * 要調鬆緊就調代幣，不要在個別規則裡寫死 px。
 */

:root {
  /* ── 色 ─────────────────────────────────────────────────────── */
  --rose:      #EA5E6A;   /* 官網原色。只用於填色塊與光暈，永不承載文字 */
  --rose-2:    #F38C5B;   /* 官網漸層的另一端，同樣不承載文字 */
  --lit:       #C13D50;   /* 承載文字的玫瑰：必填星、狀態標籤、焦點環、強調連結 */
  --lit-press: #A23343;
  --ink-press: #000;
  --rose-deep: var(--lit);      /* 舊名，後台還在用 */
  --rose-press:var(--lit-press);
  --ink:       #212121;   /* 標題與強調字（官網的內文色），落在白上 15.9:1 */
  --body:      #424242;   /* 內文，10.1:1 */
  --muted:     #616161;   /* 次要說明。落在白上 6.2:1、輸入框 hover 的 #EEEEEE 上 5.3:1、
                             手機頁尾最紅的暈 (251,233,234) 上 5.3:1 —— 三個都量過。
                             舊值 #6E6E6E 在後兩處是 4.4 / 4.2，不到 4.5 */
  --paper:     #F5F5F7;   /* 工作介面的底（後台）。公開頁的底是白的 */
  --white:     #ffffff;
  --line:      rgba(0, 0, 0, .10);   /* 分隔線 */
  --line-2:    rgba(0, 0, 0, .06);   /* 更輕的分隔線：卡片內部 */
  --rib:       var(--line);          /* 舊名，後台還在用 */
  --ring-1:    rgba(0, 0, 0, .08);   /* 1px 的「有一張紙在這裡」 */
  --fill:      rgba(0, 0, 0, .045);  /* 內嵌的淺凹槽：輸入框、選項組 */
  --fill-2:    rgba(0, 0, 0, .065);  /* 同上，深一階 */
  --pink-050:  #FDEEF0;   /* 淡玫瑰：狀態標籤與選中的底 */
  --pink-100:  #FBDDE0;
  --pink-200:  #F5C3C8;
  --pink-300:  #E8969E;

  /* Liquid Glass：半透明白＋模糊＋上緣一道白高光＋外圍 .5px 深環。
     高光是厚度，深環是「它浮在別的東西上面」—— 少任何一個都會塌回貼紙。 */
  --glass-bg:   rgba(255, 255, 255, .5);
  --glass-blur: blur(22px) saturate(1.5);
  --glass-sh:   inset 0 0 0 1px rgba(255,255,255,.85), inset 0 1.5px 0 #fff,
                0 0 0 .5px rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.09);
  --glass-sh-sm:inset 0 0 0 1px rgba(255,255,255,.85), inset 0 1.5px 0 #fff,
                0 0 0 .5px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.07);
  /* 唯一有色的那顆泡泡 */
  --tint-bg:   linear-gradient(135deg, #DC4552, #D96A33);
  /* 後台那顆：字是 14px，要過 4.5:1，兩端都壓深（#C13D50 上白字 5.2、#B8462E 5.3）。
     公開頁的 --tint-bg 是給 19px/600 大字用的（橘端 3.5:1 只夠大字門檻）。 */
  --tint-bg-ui: linear-gradient(135deg, #C13D50, #B8462E);
  --tint-sh:   inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.06),
               0 8px 24px rgba(0,0,0,.14);
  --gradient:  var(--tint-bg);        /* 舊名，後台的長條圖還在用 */

  /* 卡的深度：一圈 1px ＋一層很淡的落影。玻璃有高光，紙沒有。 */
  --card-sh:     0 0 0 1px rgba(0,0,0,.05), 0 6px 24px rgba(0,0,0,.06);
  --shadow:      var(--card-sh);      /* 舊名 */
  --shadow-lift: 0 0 0 1px rgba(0,0,0,.05), 0 14px 40px rgba(0,0,0,.13);
  --shadow-glow: var(--tint-sh);      /* 舊名 */
  --washi:       rgba(255, 255, 255, .72);   /* 舊名：後台的玻璃面 */
  --washi-2:     rgba(255, 255, 255, .9);

  /* 語意色：只有四組，公開頁與後台共用。狀態的顏色不是品牌色，所以不走玫瑰。 */
  --ok-bg:   #EAF5EE; --ok-fg:   #1A6239;
  --warn-bg: #FCF3E4; --warn-fg: #6E4B14;
  --bad-bg:  #FBEBEB; --bad-fg:  #8F202C;
  --off-bg:  #ECEFF0; --off-fg:  #4D5D64;

  /* ── 字級 ───────────────────────────────────────────────────
     用 rem 不用 px：讀者若把瀏覽器預設字級調大（55 歲以上真的有人調），
     整站跟著放大。1rem = 瀏覽器預設（通常 16px），註解是預設值下的實際 px。 */
  --t1: 0.75rem;    /* 12 — 後台的 meta：表頭、pill、極小註記 */
  --t2: 0.875rem;   /* 14 — 後台的介面文字、公開頁的標籤 */
  --t3: 0.9375rem;  /* 15 — 公開頁的次要文字：說明、meta、頁尾 */
  --t4: 1.0625rem;  /* 17 — 內文基準 */
  --t5: 1.1875rem;  /* 19 — 導言、清單標題、主按鈕 */
  --t6: 1.375rem;   /* 22 — 卡片標題、大數字 */
  --t7: 1.6875rem;  /* 27 — 後台主標 */
  --t8: 2.125rem;   /* 34 — 公開頁主標 */
  --t9: clamp(1.9rem, 3.4vw, 2.125rem);   /* 活動頁標題：跟著視窗長，上限同 --t8 */
  --fs-base: var(--t4);

  --lh:       1.75;   /* 內文 */
  --lh-ui:    1.45;   /* 按鈕、標籤、表格 —— 控制項不該跟著長文鬆 */
  --lh-tight: 1.2;    /* 大標題 */
  --fw-med:  600;     /* 「強調」*/
  --fw-bold: 700;     /* 標題 */

  /* ── 間距（4 的倍數）────────────────────────────────────────── */
  --sp1: 4px;  --sp2: 8px;  --sp3: 12px; --sp4: 16px;
  --sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 64px; --sp9: 96px;

  /* ── 圓角 ───────────────────────────────────────────────────── */
  --r0: 8px;     /* 小印、行內代碼、極小控制 */
  --r1: 14px;    /* 輸入框 */
  --r2: 18px;    /* 圖片、訊息塊、選項組 */
  --r3: 28px;    /* 卡（後台縮到 20px，見 admin.html）*/
  --rp: 999px;   /* 膠囊：所有控制項 */

  /* 元件的固有尺寸（不是間距節奏，但一樣只有一套） */
  --ic:   20px;    /* 圖示 */
  --h-ta: 130px;   /* 長文字欄位的起始高度 */

  --ease: cubic-bezier(.32, .72, 0, 1);   /* Apple 的那條：出得快、收得穩 */
  --ring: 3px solid var(--lit);

  /* 拉丁字型排在中文字型前面：這樣數字、Email、時間會用系統的拉丁字面，
     中日韓字與全形標點才落到 PingFang TC / Noto Sans TC。
     不載任何 webfont —— 主要讀者在 4G，而 iOS/Android 本來就已經有好字。 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  /* 代碼與資料（CSV、代換標記）。不當「科技感」的戲服用。 */
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--body);
  background-color: var(--white);
  /* 四角各一團官網色的暈。farthest-side 讓半徑等於到最遠邊的距離，
     中心整個洗到白 —— 內容永遠落在白上，暈只在頁面的四個角落。 */
  background-image:
    radial-gradient(farthest-side at 0 0,       rgba(234,94,106,.26), rgba(234,94,106,0)),
    radial-gradient(farthest-side at 100% 0,    rgba(243,140,91,.26), rgba(243,140,91,0)),
    radial-gradient(farthest-side at 100% 100%, rgba(234,94,106,.18), rgba(234,94,106,0)),
    radial-gradient(farthest-side at 0 100%,    rgba(243,140,91,.16), rgba(243,140,91,0));
  background-repeat: no-repeat;
  background-size: 820px 620px, 820px 620px, 820px 620px, 820px 620px;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  /* 短頁面（404、登入）也要撐滿視窗：不然下面兩角的暈停在內容底部，
     再往下是一片純白，畫面被切出一條界線。 */
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;     /* 中文標點的比例間距，長段落不會有洞 */
  accent-color: var(--lit);
  caret-color: var(--lit);
}
/* 內插法要寫在位置之後、不加逗號：radial-gradient(… at 0 0 in oklab, …)。
   寫成 radial-gradient(in oklab, …) 是非法的，整條 background-image 會靜靜
   變成 none（2026-09-03 在上一版用取樣抓到的）。所以 oklab 版另外寫在
   @supports 裡，不支援的瀏覽器留在上面那條 sRGB 版。 */
@supports (background: linear-gradient(in oklab, red, blue)) {
  body {
    background-image:
      radial-gradient(farthest-side at 0 0 in oklab,       rgba(234,94,106,.26), rgba(234,94,106,0)),
      radial-gradient(farthest-side at 100% 0 in oklab,    rgba(243,140,91,.26), rgba(243,140,91,0)),
      radial-gradient(farthest-side at 100% 100% in oklab, rgba(234,94,106,.18), rgba(234,94,106,0)),
      radial-gradient(farthest-side at 0 100% in oklab,    rgba(243,140,91,.16), rgba(243,140,91,0));
  }
}
::selection { background: var(--pink-100); color: var(--ink); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* 鍵盤使用者要看得到自己在哪。滑鼠點擊不會觸發 :focus-visible。 */
:focus-visible { outline: var(--ring); outline-offset: 3px; border-radius: var(--r1); }

.wrap { max-width: 800px; margin: 0 auto; padding: 0 var(--sp5); }
.wrap-wide { max-width: 1240px; margin: 0 auto; padding: 0 var(--sp5); }

/* 玻璃：所有可以按的東西共用這一層材質。 */
.btn, .btn-quiet, .ev-tabs, .codebox, .linkbtn.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sh);
}

/* ── 頁首：透明，只有人形與名字 ───────────────────────────────── */
.site-head { padding: var(--sp5) 0 var(--sp2); }
.site-head .brand {
  display: inline-flex; align-items: center; gap: var(--sp3); min-height: 52px;
  font-size: var(--t5); font-weight: var(--fw-bold); line-height: var(--lh-ui);
  color: var(--ink); text-decoration: none; letter-spacing: .02em; white-space: nowrap;
}
/* 品牌：官網的兩個人形（public/logo.png，從官網高解析截圖去背）。 */
.site-head .brand .logo { display: block; height: 40px; width: auto; flex: none; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp4); }
/* 右邊三顆小玻璃。內容是白卡、控制項是玻璃 —— 導覽是控制項。 */
.head-nav { display: flex; gap: var(--sp2); }
.head-nav a {
  display: inline-flex; align-items: center; gap: var(--sp1);
  min-height: 52px; padding: 0 var(--sp4); border-radius: var(--rp);
  text-decoration: none; color: var(--ink); font-size: var(--t2); font-weight: var(--fw-med);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sh-sm);
  transition: transform .12s var(--ease);
}
.head-nav a:active { transform: scale(.97); }

/* ── 卡：不透明的白紙 ──────────────────────────────────────────
   28px 圓角，一圈 1px，一層很淡的落影。沒有材質、沒有光暈 ——
   要讀的東西一律是實白，玻璃只給控制項。 */
.card {
  position: relative;
  background: var(--white);
  border: 0;
  border-radius: var(--r3);
  padding: var(--sp6);
  box-shadow: var(--card-sh);
  margin-bottom: var(--sp5);
}
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }

/* ── 字 ───────────────────────────────────────────────────────── */
/* pretty 不是 balance：中文沒有詞界，balance 會為了讓每行等長，在「台北慈｜濟」
   這種地方斷開。pretty 只管最後一行不要落單。 */
h1, h2, h3 { text-wrap: pretty; }
p { text-wrap: pretty; }
h1 {
  font-size: var(--t8); line-height: var(--lh-tight); letter-spacing: -.01em;
  margin: 0 0 var(--sp3); color: var(--ink); font-weight: var(--fw-bold);
}
h2 { font-size: var(--t6); line-height: 1.4; margin: var(--sp6) 0 var(--sp4); color: var(--ink); font-weight: var(--fw-bold); }
h3 { font-size: var(--t5); line-height: 1.5; margin: var(--sp5) 0 var(--sp2); color: var(--ink); font-weight: var(--fw-med); }
p  { margin: 0 0 var(--sp3); color: var(--body); }
.lede { font-size: var(--t5); line-height: 1.7; color: var(--body); }
.muted { color: var(--muted); font-size: var(--t3); }
.tnum { font-variant-numeric: tabular-nums; }
.pre  { white-space: pre-wrap; }

/* ── 活動頁的頭：標題站在暈裡，三組數字是一張白卡 ───────────────── */
.hero { padding: var(--sp5) 0 var(--sp6); }
.hero h1 { font-size: var(--t9); max-width: 30ch; }
.hero .lede { margin-top: var(--sp3); max-width: 42ch; }
.hero .cover-img { margin: 0 0 var(--sp5); }
/* 三組數字：日、時、地。全部加 .hero 前綴 —— 列表的日期是另一個東西。 */
.hero .when {
  margin-top: var(--sp5);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp4) var(--sp5);
  padding: var(--sp5) var(--sp6);
  background: var(--white); border-radius: var(--r3); box-shadow: var(--card-sh);
  font-variant-numeric: tabular-nums;
}
.hero .when b { display: block; font-size: var(--t6); font-weight: var(--fw-bold); color: var(--ink); line-height: 1.25; }
.hero .when span { display: block; font-size: var(--t2); color: var(--muted); margin-top: var(--sp1); }
/* 地點常常很長（「線上（會議連結將寄送給完成報名者）」），退一階、允許換行 */
.hero .when .place b { font-size: var(--t5); line-height: 1.35; }
/* 狀態與「填寫報名表」：在卡外面，泡泡才浮得起來 */
.hero .tags { margin-top: var(--sp5); }

/* ── 活動資訊列 ────────────────────────────────────────────────── */
.facts { list-style: none; margin: 0 0 var(--sp4); padding: 0; font-variant-numeric: tabular-nums; }
.facts li {
  display: grid; grid-template-columns: 6em 1fr; gap: var(--sp3);
  padding: var(--sp3) 0; border-bottom: 1px solid var(--line-2);
  color: var(--body); line-height: 1.6;
}
.facts li:last-child { border-bottom: 0; }
.facts .k { color: var(--muted); font-size: var(--t3); padding-top: 2px; }   /* 2px 是光學對齊：小字的基線要落在旁邊 17px 內文的基線上 */
.facts .v { min-width: 0; word-break: break-word; }

/* ── 狀態：一顆淡玫瑰的膠囊 ─────────────────────────────────────
   不做滿版強色徽章 —— 整頁只留一顆有色的泡泡，徽章跟它搶注意力
   反而讓人找不到要按哪。已取消是例外：那是要跳出來擋人的。 */
.badge {
  display: inline-flex; align-items: center;
  font-size: var(--t2); font-weight: var(--fw-med); line-height: var(--lh-ui);
  padding: var(--sp1) var(--sp3); border-radius: var(--rp);
  background: var(--pink-050); color: var(--lit); white-space: nowrap;
}
.badge.full, .badge.closed, .badge.done { background: var(--fill); color: var(--muted); }
.badge.cancelled { background: var(--ink); color: #fff; }
/* 地區、類型、名額提示：不是狀態，沒有底 */
.badge-plain { background: transparent; color: var(--muted); font-weight: 400; padding-left: var(--sp1); padding-right: var(--sp1); }

/* ── 表單 ──────────────────────────────────────────────────────── */
.field { margin: 0 0 var(--sp5); }
.field > label.lbl {
  display: block; font-weight: var(--fw-med); color: var(--ink);
  margin-bottom: var(--sp2); font-size: var(--t4); line-height: var(--lh-ui);
}
.req { color: var(--lit); margin-left: 3px; }
.help { font-size: var(--t3); line-height: 1.6; color: var(--muted); margin: 0 0 var(--sp2); }
/* 用排除法而不是列舉 type：後台有 datetime-local，也有很多 <input> 根本沒寫
   type（預設就是 text）。 */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=range])),
select, textarea {
  width: 100%;
  font: inherit;
  line-height: var(--lh-ui);
  color: var(--ink);
  background: var(--fill);
  border: 0;
  border-radius: var(--r1);
  padding: var(--sp3) var(--sp4);
  min-height: 56px;                 /* 手指點得到 */
  box-shadow: none;
  transition: box-shadow .2s, background .2s;
}
input:where(:not([type=checkbox]):not([type=radio]):not([type=file])):hover, select:hover, textarea:hover { background-color: var(--fill-2); }
::placeholder { color: var(--muted); opacity: 1; }
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp4) center; background-size: var(--ic);
  padding-right: calc(var(--sp4) * 2 + var(--ic));
}
textarea { min-height: var(--h-ta); resize: vertical; line-height: var(--lh); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background-color: var(--white);
  box-shadow: 0 0 0 3px rgba(193,61,80,.38), 0 0 0 .5px rgba(0,0,0,.1);
}
/* 唯讀欄位（修改報名頁的姓名）要一眼看得出點不動。虛線 = 「這是給你看的」。 */
input:disabled, select:disabled, textarea:disabled {
  background: transparent;
  border: 1px dashed var(--pink-300);
  color: var(--body);
  cursor: not-allowed;
}

/* 長表單的進度列。釘在畫面上緣，只有在表單真的捲進畫面時才顯形。 */
.fprog {
  position: sticky; top: 0; z-index: 20;
  margin: 0 calc(var(--sp5) * -1) var(--sp4);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  border-radius: 0 0 var(--r2) var(--r2);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.07);
  overflow: hidden;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.fprog.on { opacity: 1; transform: none; }
.fprog-bar { height: 3px; background: var(--line); }
.fprog-bar i { display: block; height: 100%; width: 0; background: var(--lit); }
.fprog-txt {
  display: flex; justify-content: center; gap: 0;
  padding: var(--sp2) var(--sp4);
  font-size: var(--t3); color: var(--body); line-height: var(--lh-ui);
}
.fprog-txt .now { font-weight: var(--fw-med); color: var(--ink); }
.fprog-txt .cnt { color: var(--muted); white-space: nowrap; }

/* 縣市→鄉鎮市區。窄畫面時上下疊。 */
.nested { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp3); }
.nested select { width: 100%; }
@media (max-width: 480px) { .nested { grid-template-columns: 1fr; } }

/* 說明文字（type = info）：一塊要人讀進去的話。一格淺凹槽，不是卡中卡 ——
   它跟旁邊的輸入框同一個材質，只是沒有東西可以填。 */
.finfo {
  background: var(--fill); border-radius: var(--r2);
  padding: var(--sp4) var(--sp5); margin: var(--sp5) 0;
  font-size: var(--t3); line-height: 1.7;
}
.finfo strong { display: block; color: var(--ink); font-size: var(--t4); font-weight: var(--fw-med); margin-bottom: var(--sp1); }
.finfo > .pre { margin: 0; color: var(--body); }

/* 單選／多選：一組內嵌的分組清單（iOS 的長相）。連續的 .choice 併成一塊
   淺凹槽，分隔線從文字左緣起；選中的那格底色轉淡玫瑰。
   :first-of-type 在這裡沒用 —— 同一個 .field 裡的第一個 <label> 是題目
   本身（.lbl），所以用「前面／後面有沒有另一個 .choice」來判斷頭尾。 */
.choice {
  position: relative;
  display: flex; align-items: center; gap: var(--sp3);
  min-height: 56px; padding: var(--sp3) var(--sp4);
  border: 0; background: var(--fill);
  cursor: pointer; line-height: var(--lh-ui); color: var(--ink);
  transition: background .15s;
}
.choice:not(.choice + .choice):not(.fold-notice + .choice) { border-radius: var(--r2) var(--r2) 0 0; }
.choice:not(:has(+ .choice))   { border-radius: 0 0 var(--r2) var(--r2); }
.choice:not(.choice + .choice):not(.fold-notice + .choice):not(:has(+ .choice)) { border-radius: var(--r2); }
.choice + .choice::before {
  content: ""; position: absolute; left: calc(var(--sp4) + 21px + var(--sp3)); right: 0; top: 0;
  height: 1px; background: var(--line);
}
.choice:hover { background: var(--fill-2); }
.choice input { margin: 0; width: 21px; height: 21px; flex: none; accent-color: var(--lit); }
.choice.on { background: var(--pink-050); }
.choice.on + .choice::before, .choice:has(+ .choice.on)::before { background: transparent; }

/* 量表：一排會亮的圓 */
.scale { display: flex; gap: var(--sp2); flex-wrap: wrap; align-items: center; }
.scale label { flex: 1 1 52px; min-width: 52px; text-align: center; cursor: pointer; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale .dot {
  display: block; padding: var(--sp3) 0; border-radius: var(--rp);
  background: var(--fill);
  font-weight: var(--fw-med); color: var(--ink); line-height: var(--lh-ui);
  transition: background .15s, color .15s;
}
.scale input:checked + .dot { background: var(--tint-bg); color: #fff; box-shadow: var(--tint-sh); }
.scale input:focus-visible + .dot { outline: var(--ring); outline-offset: 2px; }
.scale-ends { display: flex; justify-content: space-between; font-size: var(--t3); color: var(--muted); margin-top: var(--sp2); }

/* ── 按鈕：整頁只有一顆有色的泡泡 ──────────────────────────────
   .btn 本身是無色玻璃；.btn-block（送出）與 .btn-cal 換成漸層。
   白字落在漸層上：玫瑰端 4.2:1、橘端 3.5:1，按鈕字是 19px/600（大字門檻 3:1）。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp2);
  font: inherit; font-weight: var(--fw-med); font-size: var(--t5);
  padding: var(--sp3) var(--sp6); border-radius: var(--rp); border: 0; cursor: pointer;
  color: var(--ink); text-decoration: none; text-align: center; line-height: var(--lh-ui);
  letter-spacing: .02em; min-height: 56px;
  transition: transform .12s var(--ease), box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { background: var(--fill-2); color: var(--muted); box-shadow: none; cursor: not-allowed; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 送出：那顆有色的 */
.btn-block {
  display: flex; width: 100%; margin-top: var(--sp6); min-height: 64px;
  background: var(--tint-bg); color: #fff; box-shadow: var(--tint-sh);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn-block:disabled { background: var(--fill-2); color: var(--muted); box-shadow: none; }
/* 安靜的按鈕：無色玻璃，小一號 */
.btn-quiet { font-size: var(--t4); padding: var(--sp3) var(--sp5); min-height: 52px; box-shadow: var(--glass-sh-sm); }
.btn-sm { font-size: var(--t3); padding: var(--sp2) var(--sp4); min-height: 52px; }

/* ── 訊息 ──────────────────────────────────────────────────────── */
.msg {
  border-radius: var(--r2); padding: var(--sp4) var(--sp5); margin: 0 0 var(--sp5);
  font-size: var(--t3); line-height: 1.7; border: 0;
}
.msg-error { background: var(--bad-bg); color: var(--bad-fg); }
.msg-ok    { background: var(--ok-bg); color: var(--ok-fg); }
.msg-note  { background: var(--fill); color: var(--ink); }
.msg ul { margin: var(--sp2) 0 0; padding-left: var(--sp5); }
.msg > :last-child { margin-bottom: 0; }

/* 後台預覽時貼在最上面那條。民眾看到的頁面永遠不會有它。 */
.previewbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: var(--sp1) var(--sp4); align-items: baseline;
  margin: calc(var(--sp2) * -1) 0 var(--sp5); padding: var(--sp3) var(--sp4);
  border-radius: 0 0 var(--r2) var(--r2);
  background: var(--ink); color: #fff;
  font-size: var(--t3); font-weight: var(--fw-med); line-height: var(--lh-ui);
}
.previewbar span { font-weight: 400; opacity: .78; }

/* ── 段落標題：一條線把表單分節 ───────────────────────────────── */
.fgroup {
  margin: var(--sp7) 0 var(--sp5);
  padding-top: var(--sp5);
  border-top: 1px solid var(--line-2);
}
.fgroup:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fgroup h2 { margin: 0; font-size: var(--t6); line-height: 1.4; }
.fgroup .help { margin: var(--sp2) 0 0; }

/* ── 個資同意 ──────────────────────────────────────────────────
   在報名表那張卡上，用一條線分出來 —— 不另開一張卡（卡中卡）。 */
.consent {
  background: transparent; box-shadow: none; border-radius: 0;
  border-top: 1px solid var(--line-2);
  padding: var(--sp6) 0 0; margin: var(--sp7) 0 var(--sp5);
}
/* 告知事項。四個地方共用（報名表、/privacy 的兩段、訂閱頁），所以樣式掛在
 * .notice 本身。
 *
 * 2026-09-10：前三處預設收起（.fold-notice，見下），只有訂閱頁那一份仍然攤開
 * —— 那一頁存在的理由就是把條款攤開來問一次。
 * 刻意仍然不設 max-height：收起來的是「要不要現在讀」，不是「只給你 200px 讀」。
 * 展開之後全文一次到底，捲動框永遠不會回來。 */
.notice { font-size: var(--t3); color: var(--body); line-height: 1.8; }
.notice p { margin: 0 0 var(--sp3); }
.notice p.nt-h { margin: var(--sp5) 0 var(--sp1); color: var(--ink); font-weight: var(--fw-med); }
.notice p.nt-h:first-child { margin-top: 0; }
.notice p.nt-in { text-indent: 2em; }
.consent .notice { margin-bottom: var(--sp4); }
.consent .choice { min-height: 56px; }   /* 跟 .fold-notice > summary 同高：它們是同一塊的上下兩格 */

/* 收起來的告知事項。外面留【…告知事項】那一行，右邊一個 chevron；點開才是全文。
   材質跟 .finfo 同一塊淺凹槽 —— 它跟表單裡「要讀的那一段」是同一種東西。
   2026-09-10 Francis 決定：慈濟線上場的告知是 1053 字，在 390 寬的手機上
   佔掉整張報名表的 49%，而多數人不會讀完就勾。全文仍在同一頁、一個點擊之內。 */
.fold-notice { background: var(--fill); border-radius: var(--r2); margin: 0 0 var(--sp4); }
.fold-notice > summary {
  display: flex; align-items: center; gap: var(--sp3);
  min-height: 56px; padding: var(--sp3) var(--sp4);
  cursor: pointer; list-style: none;
  font-size: var(--t4); font-weight: var(--fw-med); color: var(--ink); line-height: var(--lh-ui);
}
.fold-notice > summary::-webkit-details-marker { display: none; }   /* Safari 的三角形 */
.fold-notice > summary::after {
  content: ""; width: var(--ic); height: var(--ic); flex: none; margin-left: auto;
  background: no-repeat center / var(--ic) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .2s var(--ease);
}
.fold-notice[open] > summary::after { transform: rotate(180deg); }
.fold-notice[open] > summary { box-shadow: inset 0 -1px 0 var(--line); }
/* margin 歸零：.consent .notice 的 margin-bottom 會從 <details> 折疊出去，
   在展開狀態變成全文與勾選框之間一道 16px 的白縫（.fold-notice 沒有 padding-bottom
   也不是 BFC，擋不住它）。 */
.fold-notice > .notice { padding: var(--sp4); margin: 0; }
.fold-notice > .notice > :last-child { margin-bottom: 0; }
/* 告知那一格與「我已閱讀」那一格是同一組：併成一塊，中間一條線。
   分開兩塊圓角會讓人以為勾的是別的東西。 */
.consent .fold-notice { margin-bottom: 0; border-radius: var(--r2) var(--r2) 0 0; }
.consent .fold-notice + .choice::before {
  content: ""; position: absolute; left: var(--sp4); right: 0; top: 0;
  height: 1px; background: var(--line);
}
/* 勾選框的字是 <strong>（700），上面那格的標題是 600 —— 併成一塊就要同一階 */
.consent .fold-notice + .choice strong { font-weight: var(--fw-med); }
/* 列印時一律攤開：紙上沒有「點開」這件事 */
@media print { .fold-notice > .notice { display: block !important; } }

/* ── 報到碼 ────────────────────────────────────────────────────── */
.code {
  display: inline-block; font-size: var(--t6); font-weight: var(--fw-bold);
  letter-spacing: .14em; color: var(--ink); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* ── 頁尾 ──────────────────────────────────────────────────────── */
.site-foot {
  margin-top: var(--sp8); padding: 0 0 var(--sp7);
  font-size: var(--t3); line-height: 2; color: var(--muted); text-align: center;
}
.site-foot a { color: var(--body); }

/* ── 活動目錄：iOS 分組清單 ─────────────────────────────────────
   2026-09-08 Francis 從三個方向（下一場／月曆／時程表）裡選了時程表；
   這一版把時程表換成 iOS 的分組清單：整份是一張白卡，日期是左邊一格，
   分隔線從文字左緣起，一格一格點下去。篩選是一顆分段控制。
   每一列自己排三欄（--ev-cols），不用 subgrid：舊 iOS 沒有 subgrid，而
   三欄裡第一欄定寬、最後一欄靠右，列與列之間本來就對得齊。 */
.ev-tabs {
  position: relative; display: inline-flex; gap: 2px; padding: var(--sp1);
  border-radius: var(--rp); margin: 0 0 var(--sp5);
  max-width: 100%; overflow: auto; scrollbar-width: none;
}
.ev-tabs::-webkit-scrollbar { display: none; }
.ev-tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--sp1);
  min-height: 52px; padding: 0 var(--sp4); border-radius: var(--rp);
  text-decoration: none; color: var(--body);
  font-size: var(--t3); font-weight: var(--fw-med); white-space: nowrap;
  transition: color .2s;
}
.ev-tab:hover { color: var(--ink); }
.ev-tab small { font-size: var(--t1); color: var(--muted); font-weight: 400; }
/* 沒有 JS 時選中的那一格自己是白滑塊 */
.ev-tab.on { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06); }
.ev-tab.on small { color: var(--body); }
/* 有 JS 時滑塊是一顆會滑動的白泡泡（.ev-lit），選中的格子自己不畫底 */
.ev-tabs.js .ev-tab.on { background: transparent; box-shadow: none; }
.ev-lit {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0;
  border-radius: var(--rp); background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.06);
  pointer-events: none;
  transition: transform .36s var(--ease), width .36s var(--ease), height .36s var(--ease);
}
.ev-lit.still { transition: none; }

/* 整份清單是一張白卡 */
.ev-tt {
  --ev-cols: 64px 1fr auto 20px;
  background: var(--white); border-radius: var(--r3); box-shadow: var(--card-sh);
  padding: var(--sp2) 0; margin: 0 0 var(--sp6);
}
/* 月份：卡內的一行小字。條件下沒有場次時跟列一樣摺起來。 */
.ev-sep {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .36s var(--ease), opacity .24s, visibility 0s;
}
.ev-sep > span {
  display: block; min-height: 0; overflow: hidden;
  font-size: var(--t2); font-weight: var(--fw-med); letter-spacing: .04em; color: var(--muted);
  padding: var(--sp5) var(--sp5) var(--sp2);
}
.ev-sep.first > span { padding-top: var(--sp3); }
/* 一列：外層 .ev-rw 是會伸縮的格子（1fr → 0fr），內層 .ev-tr 是列本身。
   上下內距放在格子裡、不放在列上 —— 列要能真的縮到 0。 */
.ev-rw {
  display: grid; grid-template-rows: 1fr; position: relative;
  transition: grid-template-rows .36s var(--ease), opacity .24s, visibility 0s;
}
/* 分隔線從文字左緣起（日期格 64px ＋ 左右內距）。第一列不畫。 */
.ev-rw::after {
  content: ""; position: absolute; left: calc(var(--sp5) + 64px + var(--sp4)); right: 0; top: 0;
  height: 1px; background: var(--line); pointer-events: none;
}
.ev-sep + .ev-rw::after, .ev-rw:first-child::after { display: none; }
/* 摺起來：高度收到 0、淡出，然後才 visibility hidden（鍵盤與讀屏都跳過它）。出比進快。 */
.ev-rw.off, .ev-sep.off {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden; pointer-events: none;
  transition-duration: .26s, .18s, 0s; transition-delay: 0s, 0s, .26s;
}
.ev-rw.off::after { display: none; }
.ev-tr {
  display: grid; grid-template-columns: var(--ev-cols); gap: 0 var(--sp4);
  align-items: center; min-height: 0; overflow: hidden;
  padding: var(--sp3) var(--sp5); text-decoration: none; color: var(--ink);
  transition: background .15s;
}
.ev-tr:hover { background: rgba(0,0,0,.025); }
/* 右緣的 chevron：分組清單靠它說「這一格點得進去」。自繪 SVG，同一套筆畫。 */
.ev-tr::after {
  content: ""; width: 20px; height: 20px; flex: none; opacity: .32;
  background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* 日期：左邊一格淡玫瑰，大數字是日、小字是月 */
.ev-td.d {
  width: 64px; height: 64px; border-radius: var(--r2); background: var(--pink-050);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.ev-td.d b { font-size: var(--t7); font-weight: var(--fw-bold); color: var(--lit); letter-spacing: -.02em; }
.ev-td.d small { font-size: var(--t1); color: var(--body); margin-top: var(--sp1); white-space: nowrap; }
.ev-td.t { min-width: 0; }
.ev-td.t .title { font-size: var(--t5); font-weight: var(--fw-med); color: var(--ink); line-height: 1.4; }
.ev-td.t .meta {
  display: flex; flex-wrap: wrap; gap: 0 var(--sp3);
  font-size: var(--t3); color: var(--muted); line-height: var(--lh-ui); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ev-td.t .meta .hm { color: var(--body); }
.ev-td.s { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp1); }
/* 已結束的場次留著給人查，但日期格是灰的、字是淡的 */
.ev-tr.past .ev-td.d { background: var(--fill-2); }
.ev-tr.past .ev-td.d b { color: var(--muted); }
.ev-tr.past .title { font-weight: var(--fw-med); color: var(--body); }
.ev-rw.empty > div { min-height: 0; overflow: hidden; }
.ev-rw.empty p { margin: 0; padding: var(--sp5); color: var(--muted); font-size: var(--t3); }

/* ── 頁面零件 ──────────────────────────────────────────────────── */
.page { padding-top: var(--sp6); }
/* 主標下面那句話 */
.sub { margin: calc(var(--sp1) * -1) 0 var(--sp5); }
.cover-img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r3); margin-bottom: var(--sp5); box-shadow: var(--card-sh);
}
/* 一排標籤，右邊是那顆連到報名表的泡泡 */
.tags { display: flex; gap: var(--sp2) var(--sp3); flex-wrap: wrap; align-items: center; margin: var(--sp3) 0 0; }
.card > .tags:first-child { margin-top: 0; margin-bottom: var(--sp3); }
/* 後台打進來的活動說明。當純文字處理，只保留換行。 */
.prose { color: var(--body); }
.backlink {
  display: inline-flex; align-items: center; min-height: 52px;
  font-size: var(--t3); color: var(--lit); font-weight: var(--fw-med); text-decoration: none;
}
.backlink:hover { text-decoration: underline; }

/* ── 報到憑證 ────────────────────────────────────────────────
   報到碼才是真正的主角：QR 掃不到的時候，唸得出來的六碼就是備援。 */
.qr {
  display: inline-block; padding: var(--sp4);
  background: #fff; border: 0; border-radius: var(--r2); box-shadow: var(--card-sh);
}
.qr svg { display: block; }
.codebox {
  display: inline-flex; align-items: baseline; gap: var(--sp3);
  margin: var(--sp3) 0 0; padding: var(--sp2) var(--sp5);
  border-radius: var(--rp);
  box-shadow: var(--glass-sh-sm);
}
.codebox-k { font-size: var(--t2); color: var(--body); font-weight: var(--fw-med); letter-spacing: .06em; }
.code-sm { font-size: var(--t5); font-weight: var(--fw-bold); letter-spacing: .12em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* 登入頁的大 logo */
.logo-lg { display: block; height: 72px; width: auto; margin: 0 auto var(--sp5); }
.login-card { max-width: 440px; margin: var(--sp7) auto; }
.h1-sm { font-size: var(--t6); }

/* ── 小工具（用來換掉散在樣板裡的 inline style）───────────────── */
.u-m0    { margin: 0 !important; }
.u-mt0   { margin-top: 0 !important; }
.u-mb0   { margin-bottom: 0 !important; }
.u-mt1   { margin-top: var(--sp1); }
.u-mt2   { margin-top: var(--sp2); }
.u-mt3   { margin-top: var(--sp3); }
.u-mt4   { margin-top: var(--sp4); }
.u-mt5   { margin-top: var(--sp5); }
.u-center{ text-align: center; }
.u-full  { width: 100%; }
.u-mb3   { margin-bottom: var(--sp3); }
.u-nowrap{ white-space: nowrap; }
.u-muted { color: var(--muted); }

/* ── 跳到主要內容 ─────────────────────────────────────────────── */
.skip {
  position: absolute; left: var(--sp4); top: calc(-1 * var(--sp8));
  z-index: 20; background: var(--white); color: var(--ink);
  padding: var(--sp3) var(--sp4); border-radius: var(--rp);
  font-size: var(--t3); font-weight: var(--fw-med); text-decoration: none;
  box-shadow: var(--shadow-lift);
}
.skip:focus { top: var(--sp3); }

/* ── 訂閱通知 ──────────────────────────────────────────────────── */
.sub-card { background: var(--white); }

/* 圖示：render.mjs 的 IC 那一套自繪 SVG。20px、stroke 2.1、吃 currentColor —— 
   它跟著旁邊那行字的顏色走，不自己帶色。 */
.ic { width: 20px; height: 20px; flex: none; vertical-align: -.22em; }
.backlink .ic { margin-right: var(--sp1); }
.backlink .ic:first-child { margin-right: var(--sp2); }
.head-nav .ic { width: 16px; height: 16px; opacity: .6; }
.tags .linkbtn .ic { margin-left: var(--sp1); }

/* 長得像連結的按鈕。 */
.linkbtn {
  font: inherit; font-size: inherit; color: var(--lit); font-weight: var(--fw-med);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: .18em;
}
/* 活動頁「填寫報名表」：一顆無色玻璃泡泡，站在暈上面 */
.tags .linkbtn {
  margin-left: auto; display: inline-flex; align-items: center;
  min-height: 52px; padding: 0 var(--sp5); border-radius: var(--rp);
  color: var(--ink); font-size: var(--t4); text-decoration: none;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sh-sm);
  transition: transform .12s var(--ease);
}
.tags .linkbtn:active { transform: scale(.97); }
.draftnote { font-size: var(--t3); line-height: 1.7; }
.bullets { margin: 0 0 var(--sp4); padding-left: var(--sp5); }
.bullets li { margin-bottom: var(--sp2); }
.foot-sep { margin: 0 var(--sp2); opacity: .6; }

@media (max-width: 640px) {
  /* 四角的暈跟著螢幕縮：820px 的暈鋪在 390 的畫面上會把整頁染成粉紅，
     白卡就浮不起來了。 */
  body { background-size: 420px 340px, 420px 340px, 420px 340px, 420px 340px; }
  .head-nav { display: none; }   /* 同樣三個連結頁尾都有，窄畫面不搶標題的位置 */
  .ev-tr { grid-template-columns: 56px 1fr 20px; grid-template-areas: "d t go" "d s go"; gap: 2px var(--sp3); padding: var(--sp3) var(--sp4); }
  .ev-tr::after { grid-area: go; align-self: center; }
  .ev-td.d { grid-area: d; width: 56px; height: 56px; align-self: start; }
  .ev-td.d b { font-size: var(--t6); }
  .ev-td.t { grid-area: t; }
  .ev-td.s { grid-area: s; flex-direction: row; align-items: center; gap: var(--sp3); margin-top: var(--sp1); }
  .ev-rw.empty p { padding: var(--sp4); }
  .ev-rw::after { left: calc(var(--sp4) + 56px + var(--sp3)); }
  .ev-sep > span { padding-left: var(--sp4); padding-right: var(--sp4); }
}

@media (max-width: 560px) {
  /* 卡的圓角在小螢幕縮一階。改的是代幣不是個別規則 —— 圓角仍然只有一套。 */
  :root { --r3: 22px; }
  .card { padding: var(--sp5) var(--sp4); }
  .consent { padding: var(--sp5) 0 0; }
  h1, .hero h1 { font-size: var(--t7); }
  .hero .when { grid-template-columns: 1fr 1fr; padding: var(--sp4) var(--sp5); }
  .hero .when b { font-size: var(--t5); white-space: nowrap; }
  .hero .when .place { grid-column: 1 / -1; }
  .hero .when .place b { font-size: var(--t4); white-space: normal; }
  .facts li { grid-template-columns: 4.6em 1fr; gap: var(--sp2); }
  .btn { padding: var(--sp3) var(--sp5); }
  .tags .linkbtn { margin-left: 0; }
}

/* 使用者把透明度關掉（iOS 的「降低透明度」、Windows 的「透明效果」）：
   玻璃全部退成實白。模糊本身在舊機器上也耗電，這一條同時是那條路。 */
@media (prefers-reduced-transparency: reduce) {
  .btn, .btn-quiet, .ev-tabs, .codebox, .tags .linkbtn, .head-nav a, .fprog {
    background: var(--white);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .btn-block { background: var(--tint-bg); }
}

/* 使用者關掉動畫就別動 */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}