/* 為愛前行 — 共用視覺
 *
 * 色票正本是 PARC/DESIGN.md（源頭是官網 themes/custom/afl/css/custom.css）。
 * 這裡只抄，不自創顏色。要改色請先改 DESIGN.md。
 *
 * 兩個對官網的刻意偏離（理由都是可讀性，不是品味）：
 *
 * 1. 文字一律用 --ink 而不是官網原色 --rose。#EA5E6A 落在淡粉底上只有
 *    2.9:1，對 55 歲以上的讀者太邊緣。
 * 2. --rose-deep 從 #D9455A 再壓深到 #C13D50。舊值當「線與環」是夠的
 *    （3:1），但程式裡它同時也是連結色與主按鈕底色，那兩個位置要 4.5:1
 *    而舊值只有 4.24。壓深之後兩個方向都過：當文字落在白／淡粉上是
 *    5.18 / 4.87 / 4.54，白字落在它上面是 5.18。
 *
 * 尺標（下面 :root 的 --t / --sp / --r 三組）是這份檔案的重點：字級、間距、
 * 圓角各只有一套。要調鬆緊就調代幣，不要在個別規則裡寫死 px —— 之前
 * 22 種字級、6 種圓角就是那樣長出來的。
 */

:root {
  /* ── 色 ─────────────────────────────────────────────────────── */
  --pink-050: #FEF6F7;
  --pink-100: #FDECEE;
  --pink-200: #FADCE0;
  --pink-300: #F6C6CC;
  --rose:      #EA5E6A;   /* 官網原色。只用於填色塊與圖形，永不承載文字 */
  --rose-deep: #C13D50;   /* 線、環、連結、主行動。兩個方向都 ≥4.5:1 */
  --rose-press:#A23343;   /* 主行動按下／滑過 */
  --ink:       #7A2733;   /* 所有標題與強調字，落在淡粉上 9.1:1 */
  --body:      #47606B;   /* 白底上的內文，6.7:1 */
  --muted:     #81666C;   /* 次要說明。白／淡粉／粉 100 上分別 5.18/4.87/4.54 */
  --white:     #ffffff;
  --gradient:  linear-gradient(100.76deg, #EA5E6A 47.27%, #F38C5B 87.91%);

  /* ── 字級 ───────────────────────────────────────────────────
     用 rem 不用 px：讀者若把瀏覽器預設字級調大（55 歲以上真的有人調），
     整站跟著放大。1rem = 瀏覽器預設（通常 16px），註解是預設值下的實際 px。 */
  --t1: 0.75rem;    /* 12 — 後台的 meta：表頭、pill、極小註記 */
  --t2: 0.875rem;   /* 14 — 後台的介面文字（公開頁不用這一階）*/
  --t3: 0.9375rem;  /* 15 — 公開頁的次要文字：說明、徽章、頁尾 */
  --t4: 1.0625rem;  /* 17 — 內文基準 */
  --t5: 1.1875rem;  /* 19 — 導言、卡片標題、主按鈕 */
  --t6: 1.375rem;   /* 22 — 段落標題、後台 h2 */
  --t7: 1.6875rem;  /* 27 — 後台主標 */
  --t8: 2.0625rem;  /* 33 — 公開頁主標 */
  --fs-base: var(--t4);

  --lh:       1.85;   /* 內文。中文長段落要這麼鬆才好讀 */
  --lh-ui:    1.45;   /* 按鈕、標籤、徽章、表格 —— 控制項不該跟著長文鬆 */
  --lh-tight: 1.25;   /* 大標題 */
  --fw-med:  600;
  --fw-bold: 700;

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

  /* ── 圓角 ───────────────────────────────────────────────────── */
  --r1: 10px;    /* 小控制項 */
  --r2: 14px;    /* 輸入框、圖片、訊息塊 */
  --r3: 20px;    /* 主要卡片 */
  --rp: 999px;   /* 膠囊 */

  --shadow:      0 1px 2px rgba(122, 39, 51, .04), 0 4px 16px rgba(122, 39, 51, .06);
  --shadow-lift: 0 2px 4px rgba(122, 39, 51, .06), 0 10px 26px rgba(122, 39, 51, .10);
  --ring:        3px solid rgba(193, 61, 80, .42);

  /* 拉丁字型排在中文字型前面：這樣數字、Email、時間會用系統的拉丁字面，
     中日韓字與全形標點才落到 PingFang TC / Noto Sans TC。不排的話
     Windows 上連數字都會用微軟正黑體的拉丁字面，辨識度掉一階。
     不載任何 webfont —— 主要讀者在 4G，而 iOS/Android 本來就已經有好字。 */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--pink-050);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rose-deep); }

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

.wrap { max-width: 720px; margin: 0 auto; padding: 0 var(--sp4); }
.wrap-wide { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp4); }

/* ── 頁首：一條微彎的地平線，血緣來自官網背景的手繪環線 ────────── */
.site-head {
  background: var(--pink-100);
  padding: var(--sp5) 0 0;
  position: relative;
}
.site-head .brand {
  display: inline-flex; align-items: center; gap: var(--sp3);
  font-size: var(--t3); font-weight: var(--fw-bold); line-height: var(--lh-ui);
  color: var(--ink); text-decoration: none; letter-spacing: .01em;
}
.site-head .brand .mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient); flex: none;
}
.horizon { display: block; width: 100%; height: 26px; margin-top: var(--sp4); }

/* ── 卡片 ──────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--pink-200);
  border-radius: var(--r3);
  padding: var(--sp6) var(--sp5);
  box-shadow: var(--shadow);
  margin-bottom: var(--sp5);
}
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }

/* ── 字 ───────────────────────────────────────────────────────── */
h1 {
  font-size: var(--t8); line-height: var(--lh-tight); letter-spacing: -.012em;
  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(--sp3); color: var(--ink); }
h3 { font-size: var(--t5); line-height: 1.5; margin: var(--sp5) 0 var(--sp2); color: var(--ink); }
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; }

/* ── 活動資訊列 ────────────────────────────────────────────────── */
.facts { list-style: none; margin: var(--sp5) 0; padding: 0; font-variant-numeric: tabular-nums; }
.facts li {
  display: flex; gap: var(--sp3); align-items: baseline;
  padding: var(--sp3) 0; border-bottom: 1px solid var(--pink-200);
  color: var(--body); line-height: 1.6;
}
.facts li:last-child { border-bottom: 0; }
.facts .k {
  flex: none; width: 4.5em; color: var(--ink);
  font-weight: var(--fw-med); font-size: var(--t3);
}
.facts .v { flex: 1; min-width: 0; word-break: break-word; }

/* ── 狀態徽章 ──────────────────────────────────────────────────
   「報名中」刻意不做成滿版強色：整頁只留一顆高對比的行動鈕，徽章跟它
   搶注意力反而讓人找不到要按哪。已結束／已取消才需要跳出來擋人。 */
.badge {
  display: inline-block; padding: 3px var(--sp3); border-radius: var(--rp);
  font-size: var(--t3); font-weight: var(--fw-med); line-height: var(--lh-ui);
  background: var(--pink-100); color: var(--ink); border: 1.5px solid transparent;
}
.badge.open      { background: var(--white); color: var(--rose-deep); border-color: var(--rose-deep); }
.badge.full      { background: var(--pink-300); color: var(--ink); }
.badge.closed,
.badge.done      { background: #e6e9ea; color: #4d5d64; }
.badge.cancelled { background: #3d3d3d; color: #fff; }

/* ── 表單 ──────────────────────────────────────────────────────── */
.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(--rose-deep); 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）。舊的列舉式選擇器兩種都漏掉，所以樣板裡才要一個一個
   補 style="width:100%" —— 後台曾經有 31 個那種 inline style。 */
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(--white);
  border: 1.5px solid var(--pink-300);
  border-radius: var(--r2);
  padding: var(--sp3) var(--sp4);
  min-height: 52px;                 /* 手指點得到 */
}
textarea { min-height: 110px; resize: vertical; line-height: var(--lh); }
input:focus, select:focus, textarea:focus {
  outline: var(--ring);
  outline-offset: 1px;
  border-color: var(--rose-deep);
}
/* 唯讀欄位（修改報名頁的姓名）要一眼看得出點不動，否則使用者會一直
   戳它，然後以為系統壞了。虛線邊框 + 灰底 = 「這是給你看的，不是給你填的」。 */
input:disabled, select:disabled, textarea:disabled {
  background: var(--pink-050);
  border-style: dashed;
  color: var(--body);
  cursor: not-allowed;
}

/* 長表單的進度列。慈濟那份有八段、39 題，捲到一半會想知道「還有多長」。
   釘在畫面上緣，只有在表單真的捲進畫面時才顯形 —— 一進頁面就跳出來的話，
   它會蓋住活動標題，而那才是這一頁最重要的東西。 */
.fprog {
  position: sticky; top: 0; z-index: 20;
  margin: 0 calc(var(--sp4) * -1) var(--sp4);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--pink-200); border-top: 0;
  border-radius: 0 0 var(--r2) var(--r2);
  box-shadow: var(--shadow);
  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(--pink-200); }
.fprog-bar i { display: block; height: 100%; width: 0; background: var(--rose-deep); }
.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; }
@media (prefers-reduced-motion: reduce) {
  .fprog { transition: none; transform: none; }
}

/* 縣市→鄉鎮市區。窄畫面時上下疊，不要把兩個下拉擠成看不清楚的一排。 */
.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(--pink-050); border: 1.5px solid var(--pink-200);
  border-radius: var(--r2); padding: var(--sp4) var(--sp5); margin: var(--sp5) 0; }
.finfo strong { display: block; color: var(--ink); font-size: var(--t5); }
.finfo > .pre { margin: var(--sp2) 0 0; color: var(--body); }

/* 單選／多選：整塊可點，不是只有那個小圓點 */
.choice {
  display: flex; align-items: flex-start; gap: var(--sp3);
  padding: var(--sp3) var(--sp4); margin-bottom: var(--sp2);
  border: 1.5px solid var(--pink-200); border-radius: var(--r2);
  background: var(--white); cursor: pointer; line-height: var(--lh-ui);
}
.choice:hover { border-color: var(--pink-300); }
.choice input { margin: 3px 0 0; width: 21px; height: 21px; flex: none; accent-color: var(--rose-deep); }
.choice.on { border-color: var(--rose-deep); background: var(--pink-050); }

/* 量表：一排圓，點得到 */
.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);
  border: 1.5px solid var(--pink-300); background: #fff;
  font-weight: var(--fw-med); color: var(--ink); line-height: var(--lh-ui);
}
.scale input:checked + .dot { background: var(--rose-deep); color: #fff; border-color: var(--rose-deep); }
.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); }

/* ── 按鈕 ──────────────────────────────────────────────────────
   19px/700 不是隨手挑的：白字落在 --rose-deep 上是 5.18:1，而 19px 粗體
   同時跨過 WCAG「大字」門檻（18.66px 粗體），兩個標準都有餘裕。 */
.btn {
  display: inline-block; font: inherit; font-weight: var(--fw-bold); font-size: var(--t5);
  padding: var(--sp4) var(--sp6); border-radius: var(--rp); border: 0; cursor: pointer;
  background: var(--rose-deep); color: #fff; text-decoration: none;
  text-align: center; line-height: var(--lh-ui);
}
.btn:hover { background: var(--rose-press); }
.btn:disabled { background: var(--pink-300); color: #fff; cursor: not-allowed; }
.btn-block { display: block; width: 100%; }
.btn-quiet {
  background: transparent; color: var(--rose-deep);
  border: 1.5px solid var(--pink-300); font-weight: var(--fw-med); font-size: var(--t4);
  padding: var(--sp3) var(--sp5);
}
.btn-quiet:hover { background: var(--pink-100); }

/* ── 訊息 ──────────────────────────────────────────────────────── */
.msg {
  border-radius: var(--r2); padding: var(--sp4); margin: 0 0 var(--sp5);
  font-size: var(--t3); line-height: 1.7;
}
.msg-error { background: #fdecec; border: 1.5px solid #f0b4b4; color: #8f202c; }
.msg-ok    { background: #eaf6ef; border: 1.5px solid #aeddc0; color: #1a6239; }
.msg-note  { background: var(--pink-100); border: 1.5px solid var(--pink-300); 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); letter-spacing: .02em;
}
.previewbar span { font-weight: 400; opacity: .78; }

/* ── 段落標題 ──────────────────────────────────────────────────
   一條橫線把表單切成幾段。39 題的表單靠這個才讀得成「五段」而不是
   「三十九列」，所以線要橫著跨滿，不能只是左邊一根短槓。 */
.fgroup {
  margin: var(--sp7) 0 var(--sp5);
  padding-top: var(--sp5);
  border-top: 1.5px solid var(--pink-200);
}
.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: var(--pink-050); border: 1.5px solid var(--pink-200);
  border-radius: var(--r2); padding: var(--sp4); margin: var(--sp6) 0 var(--sp5);
}
.consent .notice {
  max-height: 200px; overflow-y: auto; font-size: var(--t3);
  color: var(--body); line-height: 1.75; white-space: pre-wrap;
  padding-right: var(--sp2); margin-bottom: var(--sp3);
}

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

/* ── 頁尾 ──────────────────────────────────────────────────────── */
.site-foot {
  margin-top: var(--sp8); padding: var(--sp6) 0 var(--sp7);
  border-top: 1px solid var(--pink-200);
  font-size: var(--t3); line-height: 1.9; color: var(--muted); text-align: center;
}
.site-foot a { color: var(--muted); }

/* ── 活動列表 ──────────────────────────────────────────────────── */
.ev-list { list-style: none; margin: 0 0 var(--sp6); padding: 0; }
.ev-item {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--pink-200); border-radius: var(--r3);
  padding: var(--sp5); margin-bottom: var(--sp4); box-shadow: var(--shadow);
  transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.ev-item:hover { border-color: var(--pink-300); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.ev-item .when {
  font-size: var(--t3); color: var(--rose-deep); font-weight: var(--fw-bold);
  line-height: var(--lh-ui); font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.ev-item .t {
  font-size: var(--t5); font-weight: var(--fw-bold); line-height: 1.45;
  margin: var(--sp1) 0 var(--sp2); color: var(--ink);
}
.ev-item .where { font-size: var(--t3); color: var(--muted); line-height: var(--lh-ui); }
/* 摘要壓成兩行：列表要能一眼掃完，不是一眼讀完 */
.ev-item .sum {
  font-size: var(--t3); color: var(--body); line-height: 1.65; margin: var(--sp2) 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ev-item .tags { margin-top: var(--sp3); display: flex; gap: var(--sp2); flex-wrap: wrap; }
/* 已結束的場次留著給人查，但不該跟「還能報名」的長得一樣重 */
.ev-item.past { background: transparent; box-shadow: none; border-color: var(--pink-200); }
.ev-item.past .t { color: var(--body); font-weight: var(--fw-med); }
.ev-item.past:hover { background: #fff; transform: none; box-shadow: var(--shadow); }

/* ── 頁面零件 ──────────────────────────────────────────────────
   這一段全部是為了把樣板裡的 inline style 收回來。以前 render.mjs 有
   40 個 style="…"，尺標改了也帶不動它們。 */
.page { padding-top: var(--sp6); }

/* 主標下面那句話 */
.sub { margin: calc(var(--sp2) * -1) 0 var(--sp5); }

.cover-img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r2); margin-bottom: var(--sp5);
}

/* 一排徽章 */
.tags { display: flex; gap: var(--sp2); 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 { font-size: var(--t3); margin: 0 0 var(--sp2); }

/* ── 報到憑證 ────────────────────────────────────────────────
   報到碼才是真正的主角：QR 掃不到的時候（現場光線、螢幕反光、長輩的
   舊手機）唸得出來的六碼就是備援，所以它要大到隔一張桌子也看得清楚。 */
.qr {
  display: inline-block; padding: var(--sp3);
  background: #fff; border: 1px solid var(--pink-200); border-radius: var(--r2);
}
.qr svg { display: block; }
.codebox {
  display: inline-flex; align-items: baseline; gap: var(--sp3);
  margin: var(--sp3) 0 0; padding: var(--sp2) var(--sp5);
  background: var(--pink-050); border-radius: var(--rp);
}
.codebox-k { font-size: var(--t3); color: var(--muted); font-weight: var(--fw-med); }
.code-sm { font-size: var(--t5); letter-spacing: .12em; font-variant-numeric: tabular-nums; }

/* 圓是這個品牌的原生幾何（見 DESIGN.md「圓的家族」）*/
.mark-lg {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--gradient); 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); }

@media (max-width: 560px) {
  .card { padding: var(--sp5) var(--sp4); }
  .ev-item { padding: var(--sp4); }
  h1 { font-size: var(--t7); }
  h2, .fgroup h2 { font-size: var(--t5); }
  .facts .k { width: 4em; }
  .facts li { gap: var(--sp2); }
  .btn { padding: var(--sp4) var(--sp5); }
}

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