@charset "UTF-8";
/* ============================================================================
   都市蟲住民 — 對外前台樣式（2026/09/22 視覺改造：科展三折海報）
   ----------------------------------------------------------------------------
   整個前台是一塊攤開的校內科展板：白色珍珠板是底，內容是貼上去的粉彩紙面板、
   剪貼的標題字、麥克筆箭頭、膠帶貼角的紙片。深度只靠紙的薄影，沒有漸層。

   規則（改之前先看）：
   - CSP 是強制模式：樣式一律在這個檔案，無行內 style、無 web font（只有系統字型）。
     背景圖用 data: URI 的 SVG；內嵌 SVG 的顏色寫在屬性上。
   - 全站無 sticky／fixed（準則 2.4.11）。
   - 舊的 token 名稱（--green、--sky、--amber…）全部保留成別名，/me 的頁面與
     _Bug.cshtml 都靠它們；新名稱只增不換。
   - 對外頁面專屬的規則掛在 main.home / main.public 底下，碰不到 /me。
   - 共用元件（.btn .input .box .notice .badge .table-scroll…）只改表面，
     盒模型跟改版前一樣，/me 的版面才不會跑掉。
   - 每一對顏色的對比由 tests\Contrast-Ledger.mjs 驗算並寫進下方的表，
     改色票之後重跑它，不要手算。

   無障礙依據：網站無障礙規範（2026/05 新版，對標 WCAG 2.2）AA
   ============================================================================ */

/* CONTRAST-LEDGER:BEGIN */
/* 對比帳（node tests\Contrast-Ledger.mjs --write-header，2026-09-22）
   用途                   前景                        背景                          對比   門檻
   正文                     --marker #1a1a1a           --board #ffffff              17.40  ≥ 4.5
   次要文字                   --pencil #5a5a5a           --board #ffffff              6.90   ≥ 4.5
   黃紙上的正文                 --marker #1a1a1a           --paper-yellow #ffd23f       12.05  ≥ 4.5
   黃紙上的次要文字               --ink-on-yellow #4a3c0a    --paper-yellow #ffd23f       7.49   ≥ 4.5
   藍紙上的正文                 --marker #1a1a1a           --paper-blue #bfdcf5         12.24  ≥ 4.5
   綠紙上的正文                 --marker #1a1a1a           --paper-green #cdeab0        13.25  ≥ 4.5
   淺紅紙上的錯誤                #7a1c21                    --paper-red-lt #fde3dc       8.53   ≥ 4.5
   淺紅紙上的正文                --marker #1a1a1a           --paper-red-lt #fde3dc       14.25  ≥ 4.5
   淺黃紙上的正文                --marker #1a1a1a           --amber-bg #fff3c4           15.64  ≥ 4.5
   內文連結                   --paper-blue-dk #1c58a6    --board #ffffff              7.01   ≥ 4.5
   連結在黃紙上                 --paper-blue-dk #1c58a6    --paper-yellow #ffd23f       4.85   ≥ 4.5
   主要按鈕                   #ffffff                    --red-dk #b83218             5.99   ≥ 4.5
   頁尾文字                   #ffffff                    --paper-blue-dk #1c58a6      7.01   ≥ 4.5
   頁尾版權                   #e3eefb                    --paper-blue-dk #1c58a6      5.97   ≥ 4.5
   頁尾連結 hover             --paper-yellow #ffd23f     --paper-blue-dk #1c58a6      4.85   ≥ 4.5
   必填／錯誤紅字                --danger #b02a37           --board #ffffff              6.50   ≥ 4.5
   受理中標籤                  --marker #1a1a1a           --paper-green #cdeab0        13.25  ≥ 4.5
   非收件標籤                  --ink-on-yellow #4a3c0a    --paper-yellow #ffd23f       7.49   ≥ 4.5
   輸入框邊                   --rule-dk #6b6b6b          --board #ffffff              5.33   ≥ 3
   焦點框在白                  --focus #1c58a6            --board #ffffff              7.01   ≥ 3
   焦點框在黃紙                 --focus #1c58a6            --paper-yellow #ffd23f       4.85   ≥ 3
   焦點框在藍紙                 --focus #1c58a6            --paper-blue #bfdcf5         4.93   ≥ 3
   焦點框在綠紙                 --focus #1c58a6            --paper-green #cdeab0        5.34   ≥ 3
   紅圈編號線                  --paper-red #e0452a        --board #ffffff              4.16   ≥ 3
   綠標籤邊                   --paper-green-dk #2e7d32   --paper-green #cdeab0        3.90   ≥ 3
   白字在綠色紙                 #ffffff                    --paper-green-dk #2e7d32     5.13   ≥ 4.5
   白字在深綠                  #ffffff                    --green-dk #1b5e20           7.87   ≥ 4.5
*/
/* CONTRAST-LEDGER:END */

:root {
  /* --- 這個世界的材料 --- */
  --board:           #ffffff;   /* 珍珠板 */
  --marker:          #1a1a1a;   /* 黑麥克筆：所有正文與線條 */
  --pencil:          #5a5a5a;   /* 鉛筆灰：次要文字，只放白紙上 */
  --paper-yellow:    #ffd23f;   /* 向日葵黃粉彩紙（配 --marker 或 --ink-on-yellow） */
  --ink-on-yellow:   #4a3c0a;   /* 黃紙上的次要文字：不用灰，用同色系的深色 */
  --paper-blue:      #bfdcf5;   /* 淺藍粉彩紙（放正文） */
  --paper-blue-dk:   #1c58a6;   /* 藍色紙／藍原子筆：連結、焦點框、頁尾 */
  --paper-green:     #cdeab0;   /* 淺綠粉彩紙 */
  --paper-green-dk:  #2e7d32;   /* 綠色紙：受理中、成功 */
  --paper-red:       #e0452a;   /* 紅麥克筆：箭頭、編號圈（不承載文字） */
  --red-dk:          #b83218;   /* 紅色紙：主要動作，白字 */
  --paper-red-lt:    #fde3dc;   /* 淺紅粉彩紙：錯誤 */
  --tape:            rgba(255, 236, 160, .82);
  --rule:            #d9d9d4;   /* 鉛筆淡線：表格格線、分隔 */
  --rule-dk:         #6b6b6b;   /* 輸入框邊：對白 5.2:1 */

  /* --- 舊名稱的別名（/me 與 _Bug.cshtml 用；不要拿掉） --- */
  --bg:        var(--board);
  --surface:   #ffffff;
  --ink:       var(--marker);
  --ink-2:     var(--pencil);
  --green:     var(--paper-green-dk);
  --green-dk:  #1b5e20;
  --green-bg:  var(--paper-green);
  --sky:       var(--paper-blue-dk);
  --sky-bg:    var(--paper-blue);
  --amber:     var(--ink-on-yellow);
  --amber-bg:  #fff3c4;
  --amber-hi:  var(--paper-yellow);
  --plum:      var(--red-dk);
  --plum-bg:   var(--paper-red-lt);
  --line:      var(--rule);
  --line-dk:   var(--rule-dk);
  --danger:    #b02a37;         /* 對白 6.5:1 */
  --focus:     var(--paper-blue-dk);

  /* 紙的影子：小偏移＋輕模糊，像一張紙貼在板上 */
  --shadow:    1px 2px 3px rgba(0, 0, 0, .16), 0 0 1px rgba(0, 0, 0, .08);
  --shadow-lg: 3px 7px 12px rgba(0, 0, 0, .18), 0 0 1px rgba(0, 0, 0, .08);
  --stripe:    var(--paper-yellow);   /* 已不用；留著給舊規則 */

  --sans: "Microsoft JhengHei", "微軟正黑體", "PingFang TC",
          "Noto Sans TC", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Noto Sans Mono", monospace;

  /* 畫出來的圖示（麥克筆線條），不用字元或 emoji */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%231a1a1a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-bang:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v10' stroke='%231a1a1a' stroke-width='3.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='19.5' r='2' fill='%231a1a1a'/%3E%3C/svg%3E");
  --arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M4 18C20 8 36 24 54 15' fill='none' stroke='%23e0452a' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M44 6l11 8-9 11' fill='none' stroke='%23e0452a' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-down:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64'%3E%3Cpath d='M14 4c10 16-6 32 3 50' fill='none' stroke='%23e0452a' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M8 44l9 11 9-10' fill='none' stroke='%23e0452a' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================================
   02 基底
   ============================================================================ */

/* 沒有這一行，height:100% 的元素會把 padding 加在外面撐出父層（實際看到過） */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--board);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;            /* 18px */
  line-height: 1.7;
  letter-spacing: 0.02em;
  accent-color: var(--red-dk);
  caret-color: var(--paper-blue-dk);
}

/* 瀏覽器自己畫的東西也要是這個世界的：反白像用螢光筆畫過 */
::selection { background: var(--paper-yellow); color: var(--marker); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- 跳至主要內容（兼作 accesskey C 定位點） --- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -6rem;                     /* 要比自身總高度大，否則會露出一小截 */
  z-index: 10;
  padding: .75rem 1.25rem;
  min-height: 2.75rem;
  background: var(--paper-yellow);
  color: var(--marker);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--marker);
  border-top: 0;
  transition: top .15s ease-out;
}
.skip-link:focus { top: 0; }

/* accesskey Z 定位點：聚焦前不佔版面，聚焦後可見 */
.anchor-z { position: absolute; left: -9999px; min-width: 1.5rem; min-height: 1.5rem; }
.anchor-z:focus {
  position: static; left: auto; display: inline-block;
  padding: 0 .25rem; font-weight: 700; letter-spacing: .1em;
}

/* ============================================================================
   03 紙片：這個世界的基本材料
   .paper  一張貼在板上的紙（白／黃／藍／綠／紅）
   .taped  兩角貼膠帶
   .tilt-l / .tilt-r  微微歪一點，像手貼的
   ============================================================================ */

.paper {
  position: relative;
  background: var(--surface);
  color: var(--marker);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.paper-yellow { background: var(--paper-yellow); }
.paper-blue   { background: var(--paper-blue); }
.paper-green  { background: var(--paper-green); }
.paper-red    { background: var(--paper-red-lt); }

.taped::before, .taped::after {
  content: "";
  position: absolute;
  top: -.55rem;
  width: 3.25rem;
  height: 1.125rem;
  background: var(--tape);
  border-left: 1px dashed rgba(0, 0, 0, .12);
  border-right: 1px dashed rgba(0, 0, 0, .12);
  pointer-events: none;
}
.taped::before { left: 1rem; transform: rotate(-6deg); }
.taped::after  { right: 1rem; transform: rotate(5deg); }
.taped-one::after { display: none; }
.taped-one::before { left: 50%; transform: translateX(-50%) rotate(-3deg); }

.tilt-l { transform: rotate(-1.2deg); }
.tilt-r { transform: rotate(1deg); }

/* 貼紙標籤：一小張色紙上寫字，用在 legend、狀態、分類 */
.label-tag {
  display: inline-block;
  padding: .125rem .75rem;
  background: var(--paper-yellow);
  color: var(--marker);
  font-weight: 700;
  font-size: 1rem;
  border-radius: 2px;
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}

/* 紅麥克筆編號圈 */
.no-circle {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 4px solid var(--paper-red);
  border-radius: 50%;
  color: var(--marker);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  background: var(--surface);
}

/* ============================================================================
   04 版型外殼：頁首、頁尾
   頁首刻意用 static 而非 sticky/fixed：固定頁首會遮住鍵盤操作時的焦點元素，
   違反準則 2.4.11。
   ============================================================================ */

.site-header {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: 1rem 1.5rem .875rem;
  background: var(--board);
  border-bottom: 4px solid var(--marker);   /* 板子上緣一道麥克筆線 */
}
.site-header .brand { margin: 0; font-size: 1.375rem; font-weight: 700; }
/* 站名是貼在板子左上角的一張黃紙標籤 */
.site-header .brand a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .125rem .875rem .125rem .625rem;
  color: var(--marker);
  text-decoration: none;
  background: var(--paper-yellow);
  box-shadow: var(--shadow);
  border-radius: 2px;
  transform: rotate(-2deg);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1), box-shadow .18s ease-out;
}
.site-header .brand a:hover { transform: rotate(0) translateY(-2px); box-shadow: var(--shadow-lg); }
.site-header .brand a .bug { width: 2.125rem; height: 2.125rem; }

.site-header nav ul {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .375rem .625rem;
  margin: 0; padding: 0;
}
/* 導覽是一排白紙小卡，麥克筆框 */
.site-header nav a,
.site-header nav .who,
.site-header nav .btn-link {
  display: inline-block;
  min-height: 2.75rem;
  line-height: 2.5rem;
  padding: 0 .875rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--marker);
  background: var(--surface);
  border: 2px solid var(--marker);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2, .9, .3, 1), box-shadow .15s ease-out, background .15s ease-out;
}
.site-header nav a:hover,
.site-header nav .btn-link:hover { background: var(--paper-yellow); transform: translateY(-2px); box-shadow: var(--shadow); }
.site-header nav .who { font-weight: 400; color: var(--pencil); border-color: var(--rule); cursor: default; }

/* --- 頁尾：板子下緣一條藍色紙 --- */
.site-footer {
  flex: none;
  position: relative;
  margin-top: 3.5rem;
  padding: 3rem 1.25rem 1.75rem;
  background: var(--paper-blue-dk);
  color: #ffffff;
  text-align: center;
  font-size: 1.0625rem;
  border-top: 4px solid var(--marker);
}
.site-footer p { margin: 0 0 .5rem; }
.site-footer .copyright { margin: 1rem 0 0; font-size: .9375rem; color: #e3eefb; }
.site-footer a {
  display: inline-block;
  min-height: 1.75rem;
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 2px;
}
.site-footer a:hover { color: var(--paper-yellow); }
.site-footer a:focus-visible { outline-color: #ffffff; }
.site-footer .policy-links { margin-top: 1rem; }
.site-footer .policy-links a { margin: 0 .625rem; }

/* 頁尾上緣一排貼在板上的小蟲剪貼，純裝飾 */
.footer-bugs {
  position: absolute; left: 0; right: 0; top: -1.75rem;
  display: flex; justify-content: center; gap: .875rem;
}
.footer-bugs .bug {
  width: 3.25rem; height: 3.25rem;
  padding: .3rem;
  background: var(--surface);
  border-radius: 2px;
  box-shadow: var(--shadow);
}
.footer-bugs .bug:nth-child(odd)  { transform: rotate(-6deg); }
.footer-bugs .bug:nth-child(even) { transform: rotate(5deg) translateY(.15rem); }

.bug { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }

/* ============================================================================
   05 內容頁的排版（main.page；/me 也用這一套）
   ============================================================================ */

main.page {
  flex: 1 0 auto;
  display: block;
  text-align: left;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  background: none;
}
/* 頁面標題是貼在板上的一張黃紙 */
main.page h1 {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: .15em .6em .2em;
  font-size: clamp(1.75rem, 4.5vw, 2.625rem);
  line-height: 1.25;
  background: var(--paper-yellow);
  color: var(--marker);
  box-shadow: var(--shadow);
  border-radius: 2px;
  transform: rotate(-1deg);
}
main.page h1 .dim { font-size: .6em; font-weight: 400; color: var(--ink-on-yellow); }
/* 段落標題：麥克筆畫的紅底線 */
main.page h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.75rem);
  margin: 2.75rem 0 .75rem;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--paper-red);
  text-decoration-thickness: .2em;
  text-underline-offset: .22em;
  text-decoration-skip-ink: none;
}
main.page h3 { font-size: 1.1875rem; margin: 1.75rem 0 .5rem; }
main.page p { margin: .875rem 0; }
main.page ul, main.page ol { margin: .875rem 0; padding-left: 1.5rem; }
main.page li { margin: .3rem 0; }

/* 內文裡的一般連結：藍原子筆，粗底線；有 class 的（按鈕等）不受影響 */
main.page a:not([class]) {
  color: var(--paper-blue-dk);
  font-weight: 700;
  text-underline-offset: .2em;
  text-decoration-thickness: 2px;
}
main.page a:not([class]):hover { color: var(--marker); text-decoration-color: var(--paper-red); }

.lead  { font-size: 1.1875rem; color: var(--pencil); max-width: 40rem; }
.dim   { color: var(--pencil); font-size: 1rem; }
.muted { color: var(--pencil); }
.mono  { font-family: var(--mono); }

.breadcrumb {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: .25rem .5rem;
  margin: 0 0 1.25rem; padding: 0;
  font-size: 1rem;
  color: var(--pencil);
}
.breadcrumb li + li::before { content: "／"; margin-right: .5rem; }
.breadcrumb a { display: inline-block; min-height: 1.5rem; padding: .1rem 0; color: var(--paper-blue-dk); font-weight: 700; }

/* ============================================================================
   06 共用元件（/me 也用：只改表面，不改盒模型）
   ============================================================================ */

/* --- 卡片＝一張貼在板上的白紙 --- */
.box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem 1.625rem;
  margin: 1.25rem 0;
  box-shadow: var(--shadow);
}
.box > :first-child { margin-top: 0; }
.box > :last-child  { margin-bottom: 0; }

/* --- 表單：fieldset 是一張紙，legend 是貼上去的標籤 --- */
fieldset.box { margin: 2rem 0; padding-top: 1.75rem; }
fieldset.box legend {
  font-weight: 700;
  font-size: 1.125rem;
  padding: .2rem 1rem;
  background: var(--paper-yellow);
  color: var(--marker);
  border-radius: 2px;
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}
fieldset.box legend .req, fieldset.box legend .dim { color: var(--ink-on-yellow); }

.field { margin: 0 0 1.25rem; }
.field label { display: block; font-weight: 700; margin-bottom: .375rem; }
.field .req { color: var(--danger); font-weight: 400; font-size: 1rem; }
.field .help { display: block; margin-top: .375rem; font-size: 1rem; color: var(--pencil); }

.input {
  width: 100%;
  max-width: 30rem;
  min-height: 3rem;
  padding: .625rem .875rem;
  font: inherit;
  color: var(--marker);
  background: var(--surface);
  border: 2px solid var(--rule-dk);
  border-radius: 4px;
}
.input::placeholder { color: var(--pencil); }
.input:focus-visible { border-color: var(--focus); }
textarea.input { max-width: 38rem; line-height: 1.6; }
.input-narrow { max-width: 16rem; }

/* 核取方塊：目標尺寸 ≥ 24×24px（準則 2.5.8） */
.check { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1rem; }
.check input[type="checkbox"], .check input[type="radio"] {
  flex: none; width: 1.625rem; height: 1.625rem; margin: .125rem 0 0;
}
.check label { font-weight: 400; margin: 0; }

/* --- 按鈕＝剪下來的一張紙，按下去會掀起來 --- */
.btn {
  display: inline-block;
  min-height: 3rem;
  padding: .625rem 1.5rem;
  font: inherit;
  font-weight: 700;
  color: var(--marker);
  background: var(--surface);
  border: 2px solid var(--marker);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .15s cubic-bezier(.2, .9, .3, 1), box-shadow .15s ease-out, background .15s ease-out;
}
.btn:hover { background: var(--paper-yellow); transform: translateY(-2px) rotate(-.6deg); box-shadow: var(--shadow-lg); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow); }

.btn-primary { color: #ffffff; background: var(--red-dk); border-color: var(--red-dk); }
.btn-primary:hover { background: var(--red-dk); color: #ffffff; filter: brightness(.92); }
/* 醒目但不搶主要動作：黃色紙＋黑麥克筆字（對比約 12:1）。目前用在活動頁的「看完整活動簡章」。 */
.btn-accent { color: var(--marker); background: var(--paper-yellow); border-color: var(--marker); }
.btn-accent:hover { background: var(--paper-yellow); color: var(--marker); filter: brightness(.95); }

/* 表格裡的操作鈕：小一號但仍 ≥ 24×24（準則 2.5.8） */
.btn-sm { min-height: 2.25rem; padding: .25rem .875rem; font-size: .9375rem; }
/* 刪除類：紅框不填滿，跟主要動作分得開；按下去前 site.js 會先問一聲 */
.btn-danger { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn-danger:hover { background: var(--paper-red-lt); color: var(--danger); }

.actions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; margin: 1.75rem 0; }

.btn-link {
  font: inherit; color: var(--marker); background: none; border: 0;
  padding: 0 .25rem; min-height: 2.75rem;
  text-decoration: underline; text-underline-offset: .25em; cursor: pointer;
}

/* --- 訊息＝貼在板上的便利貼；圖示是畫的，不是字元。
       一律有文字，不可只用顏色傳達狀態（準則 1.4.1）。 --- */
.notice {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1rem 3.25rem;
  background: var(--paper-green);
  color: var(--marker);
  border: 0;
  border-radius: 2px;
  box-shadow: var(--shadow);
  background-image: var(--icon-check);
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  background-position: 1.125rem 1.1rem;
}
.notice-warn { background-color: var(--paper-yellow); background-image: var(--icon-bang); }

.form-errors {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1rem 3.25rem;
  background: var(--paper-red-lt);
  color: #7a1c21;                 /* 對 --paper-red-lt 約 7:1 */
  border: 0;
  border-radius: 2px;
  box-shadow: var(--shadow);
  background-image: var(--icon-bang);
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  background-position: 1.125rem 1.1rem;
}
.form-errors ul { margin: 0; padding-left: 1.25rem; }

/* --- 狀態標籤＝小張色紙 --- */
.badge {
  display: inline-block;
  padding: .2rem .75rem;
  font-size: .9375rem;
  font-weight: 700;
  border-radius: 2px;
  background: var(--surface);
  color: var(--marker);
  border: 2px solid var(--marker);
  white-space: nowrap;
}
.badge-ok   { background: var(--paper-green); border-color: var(--paper-green-dk); color: var(--marker); }
.badge-warn { background: var(--paper-yellow); border-color: var(--ink-on-yellow); color: var(--ink-on-yellow); }

/* --- 表格＝貼在板上的一張表格紙 --- */
.table-scroll {
  overflow-x: auto;
  margin: 1.25rem 0;
  border-radius: 2px;
  box-shadow: var(--shadow);
  background: var(--surface);
}
table.data { border-collapse: collapse; width: 100%; background: var(--surface); }
table.data caption { text-align: left; font-size: 1rem; color: var(--pencil); padding: .625rem .875rem; caption-side: top; }
table.data th, table.data td {
  border: 1px solid var(--rule);
  padding: .75rem 1rem;
  text-align: left;
  vertical-align: top;
}
table.data th { background: var(--paper-yellow); color: var(--marker); font-weight: 700; }
table.data th[scope="row"] { width: 12rem; background: var(--amber-bg); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 排行榜上「你這一隊」那一列：底色只是輔助，文字裡另外寫了「（你這一隊）」 */
/* 螢光筆塗過一整列。不用左邊的粗色條 —— 那是要避開的版面習慣，
   而且「你這一隊」在文字裡也寫著，不是只靠顏色。 */
table.data tr.row-mine td { background: var(--amber-bg); }
table.data tr.row-mine td:first-child { font-weight: 700; }

/* 事實清單：一行一項，左標籤右內容（活動頁狀態卡、/me 隊伍卡） */
.facts { margin: 0; }
.facts > div {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem;
  padding: .5rem 0; border-top: 1px dashed var(--rule-dk);
}
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt { font-weight: 700; color: var(--pencil); font-size: 1rem; }
.facts dd { margin: 0; }
.facts-wide > div { grid-template-columns: 9rem minmax(0, 1fr); }

/* ============================================================================
   07 /me 專用（2026/09/16 第 2 段，逐字搬入；這一輪不重新設計）
   ============================================================================ */

td.actions { white-space: nowrap; }
td.actions form { display: inline-block; margin: 0 0 0 .375rem; }
td.actions .actions-bar { margin: 0; display: inline-flex; }

ul.plain { margin: .875rem 0; padding-left: 1.375rem; }
ul.plain li { margin: .35rem 0; }

/* 日期輸入框不必佔滿整行 */
.input-narrow-date { width: 13rem; }

/* 一張照片一張卡。縮圖給固定上限，避免直式照片把版面撐得很長。 */
.photo-card h3 { margin-top: 0; }
.photo-thumb {
  display: block;
  max-width: 100%;
  max-height: 18rem;
  width: auto;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
}

/* 某一屆工作區（/me/{code}/{edition}）的三個入口（2026/09/22）。
   一張白紙小卡：沒有彩色側邊條、沒有圓角上的彩色頂邊 —— 那兩樣是偵測器
   判定的 AI 版面特徵，這一區也不用。強調靠標題底下的紅麥克筆底線。 */
ul.work {
  list-style: none;
  margin: 1.5rem 0 2.5rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
ul.work > li { display: flex; }
.work-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  padding: 1.125rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule-dk);
  border-radius: 3px;
  box-shadow: var(--shadow);
  color: var(--marker);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.work-name {
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--paper-red);
  text-decoration-thickness: 3px;
  text-underline-offset: .3rem;
}
.work-note { color: var(--pencil); font-size: .9375rem; line-height: 1.6; }
.work-note strong { color: var(--danger); }

/* ============================================================================
   08 首頁（main.home）：攤開的三折板
   ============================================================================ */

main.home {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 2.5rem 1.25rem 4rem;
}
main.home .notice { width: 100%; max-width: 64rem; }

.board {
  width: 100%;
  max-width: 64rem;
  display: grid;
  gap: 1.25rem;
}

/* --- 剪貼的站名：一字一張色紙 --- */
.hero { text-align: center; margin: 0 0 .5rem; }
.hero h1 { margin: 0; font-weight: 700; line-height: 1.15; }
.hero .name { display: block; }
.hero .tiles { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .12em; }
.hero .tile {
  display: inline-block;
  padding: .04em .14em .08em;
  font-size: clamp(2.75rem, 8vw, 5.25rem);
  line-height: 1;
  color: var(--marker);
  background: var(--paper-yellow);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.hero .tile:nth-child(2) { background: var(--paper-blue);  transform: rotate(2.5deg) translateY(.06em); }
.hero .tile:nth-child(3) { background: var(--paper-green); transform: rotate(-2deg); }
.hero .tile:nth-child(4) { background: var(--paper-red-lt); transform: rotate(1.5deg) translateY(.05em); }
.hero .tile:nth-child(1) { transform: rotate(-3deg) translateY(.04em); }
.hero .tile:nth-child(5) { transform: rotate(2deg); }
.hero .sub {
  display: block;
  text-wrap: balance;
  margin-top: 1rem;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing: .12em;
  color: var(--marker);
}
/* 圖說：鉛筆字，貼在標題底下 */
.tagline {
  text-wrap: balance;
  margin: .625rem auto 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--pencil);
}

/* --- 三塊面板：左（藍）2 張、中（黃）1 張、右（綠）1 張。
       li 的順序由 HomeController 決定：研習、競賽、公民科學家、特展。 --- */
.menu {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
  grid-template-areas:
    "l1 c r"
    "l3 c r";
  gap: 1.25rem;
  align-items: stretch;
}
.menu li { margin: 0; min-width: 0; }
.menu li:nth-child(1) { grid-area: l1; }
.menu li:nth-child(2) { grid-area: c; }
.menu li:nth-child(3) { grid-area: l3; }
.menu li:nth-child(4) { grid-area: r; }

.menu .item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  height: 100%;
  padding: 2.25rem 1rem 1.75rem;
  background: var(--paper-blue);
  color: var(--marker);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.menu li:nth-child(1) .item { transform: rotate(-1.2deg); }
.menu li:nth-child(3) .item { transform: rotate(1deg); }
.menu li:nth-child(4) .item { background: var(--paper-green); transform: rotate(1.2deg); }
.menu li:nth-child(2) .item { background: var(--paper-yellow); padding: 2.75rem 1.5rem 2.25rem; gap: 1.25rem; font-size: clamp(1.75rem, 3.2vw, 2.375rem); }

/* 面板角落的膠帶 */
.menu .item::before, .menu .item::after {
  content: "";
  position: absolute;
  top: -.55rem;
  width: 3rem;
  height: 1.125rem;
  background: var(--tape);
  border-left: 1px dashed rgba(0, 0, 0, .12);
  border-right: 1px dashed rgba(0, 0, 0, .12);
  pointer-events: none;
}
.menu .item::before { left: .875rem; transform: rotate(-7deg); }
.menu .item::after  { right: .875rem; transform: rotate(6deg); }

/* 小面板上的剪貼圖：一張白紙上一個圖 */
.menu .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 5.25rem;
  height: 5.25rem;
  padding: .5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 2px;
  transform: rotate(3deg);
}
.menu .ico .bug, .menu .ico svg { width: 3.75rem; height: 3.75rem; }

/* 中間面板：六隻蟲的剪貼照片貼成一排 */
.parade {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: center;
  gap: .875rem 1rem;
  margin: 0 0 .25rem;
}
.parade span {
  display: inline-block;
  padding: .45rem .45rem .8rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.parade .bug { width: 4.75rem; height: 4.75rem; }
/* 其中兩張用一小段斜膠帶壓著角，其餘直接貼 —— 手貼的東西不會每張都一樣 */
.parade .p2::after, .parade .p5::after {
  content: "";
  position: absolute; top: -.4rem; left: -.6rem;
  width: 2.25rem; height: .85rem;
  background: var(--tape);
  border-left: 1px dashed rgba(0, 0, 0, .12);
  border-right: 1px dashed rgba(0, 0, 0, .12);
  transform: rotate(-38deg);
}
.parade .p2, .parade .p5 { position: relative; }
.parade .p1 { transform: rotate(-7deg) translateY(.3rem); }
.parade .p2 { transform: rotate(4deg); }
.parade .p3 { transform: rotate(-3deg) translateY(.5rem); }
.parade .p4 { transform: rotate(6deg) translateY(.15rem); }
.parade .p5 { transform: rotate(-5deg) translateY(.4rem); }
.parade .p6 { transform: rotate(7deg); }

/* 一支紅麥克筆箭頭從左上指向中間那格 */
.menu .arrow {
  position: absolute;
  left: -2.5rem;
  top: -3.25rem;   /* 箭頭要落在面板裡，不要停在膠帶上 */
  width: 11rem;
  height: 6rem;
  pointer-events: none;
  overflow: visible;
}
.menu .arrow path { stroke: var(--paper-red); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 可點的面板：滑過去像把紙掀起來 */
a.item {
  text-decoration: none;
  transition: transform .2s cubic-bezier(.2, .9, .3, 1), box-shadow .2s ease-out;
}
a.item:hover, a.item:focus-visible {
  transform: rotate(0) translateY(-4px);
  box-shadow: var(--shadow-lg);
}
a.item .cta {
  display: inline-block;
  margin-top: .25rem;
  padding: .375rem 1.125rem;
  font-size: 1.0625rem;
  background: var(--red-dk);
  color: #ffffff;
  border-radius: 4px;
  box-shadow: var(--shadow);
}

/* 準備中的項目：不可點，貼一張小便條說明（文字，不只顏色） */
.menu .soon {
  display: inline-block;
  margin-top: .5rem;
  padding: .125rem .75rem;
  font-size: .9375rem;
  font-weight: 700;
  background: var(--surface);
  color: var(--marker);
  border: 2px dashed var(--rule-dk);
  border-radius: 2px;
  transform: rotate(-2deg);
}
.menu .item > span:last-child { display: flex; flex-direction: column; align-items: center; gap: .25rem; }

/* --- 舊版網站入口：貼在板子下緣的一張小紙條 --- */
.legacy {
  width: 100%;
  max-width: 64rem;
  margin: 2.5rem 0 0;
  padding: 0;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--pencil);
}
.legacy > span {
  position: relative;
  display: inline-block;
  padding: .75rem 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 2px;
  transform: rotate(-.8deg);
}
.legacy a {
  display: inline-block;
  min-height: 2.75rem;
  padding: .375rem .25rem;
  color: var(--paper-blue-dk);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 2px;
}
.legacy a:hover { color: var(--marker); }

/* ============================================================================
   09 競賽清單（main.public-competitions）：一個競賽一張紙
   ============================================================================ */

main.public-competitions .box { margin: 2rem 0; padding: 1.75rem 1.75rem 1.5rem; border: 0; }
main.public-competitions .box::before, main.public-competitions .box::after {
  content: ""; position: absolute; top: -.55rem; width: 3rem; height: 1.125rem;
  background: var(--tape); border-left: 1px dashed rgba(0,0,0,.12); border-right: 1px dashed rgba(0,0,0,.12);
}
main.public-competitions .box::before { left: 1rem; transform: rotate(-6deg); }
main.public-competitions .box::after  { right: 1rem; transform: rotate(5deg); }
main.public-competitions .box:nth-child(odd)  { transform: rotate(-.6deg); }
main.public-competitions .box:nth-child(even) { transform: rotate(.5deg); }
main.page .box-title {
  margin: 0 0 .25rem; padding: 0;
  font-size: 1.375rem;
  text-decoration: none;
}
main.page .box-title a { color: var(--marker); text-decoration: underline; text-decoration-color: var(--paper-red); text-decoration-thickness: .18em; text-underline-offset: .2em; }
main.page .box-title a:hover { text-decoration-color: var(--marker); }

/* ============================================================================
   10 活動頁（main.public-activity）：紙上的活動說明
   ============================================================================ */

.act-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2.25rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}
.act-hero-main > :first-child { margin-top: 0; }
.act-hero-main h1 { margin-bottom: .75rem; }
.act-hero-main .lead { margin-top: .5rem; color: var(--marker); }
.act-hero-main .actions-bar { margin-bottom: 0; }
/* 「競賽活動 · 2026 年度」是貼在標題旁的一張小標籤，不是標題上方的眉標 */
.act-tag { margin: 0 0 .75rem; }
.act-tag .label-tag { background: var(--paper-blue); }

.act-what { font-size: 1.1875rem; max-width: 40rem; }
.act-what strong { background: var(--paper-yellow); padding: 0 .2em; }

/* 三個重點：每一項前面一張小標籤 */
.act-quick { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: grid; gap: .875rem; }
.act-quick li { margin: 0; padding: 0; }
.act-quick strong {
  display: inline-block;
  margin: 0 .5rem .25rem 0;
  padding: .05rem .625rem;
  background: var(--paper-blue);
  color: var(--marker);
  font-size: 1rem;
  border-radius: 2px;
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}

/* 本屆資訊：右邊用膠帶貼著的一張索引卡（橫線紙） */
.act-card {
  position: relative;
  padding: 1.375rem 1.25rem 1.25rem;
  background: var(--surface);
  background-image: repeating-linear-gradient(transparent 0 1.7rem, rgba(28, 88, 166, .14) 1.7rem calc(1.7rem + 1px));
  box-shadow: var(--shadow);
  border-radius: 2px;
  transform: rotate(1.5deg);
}
.act-card::before, .act-card::after {
  content: ""; position: absolute; top: -.55rem; width: 3rem; height: 1.125rem;
  background: var(--tape); border-left: 1px dashed rgba(0,0,0,.12); border-right: 1px dashed rgba(0,0,0,.12);
}
.act-card::before { left: 1rem; transform: rotate(-6deg); }
.act-card::after  { right: 1rem; transform: rotate(5deg); }
main.page .act-card-title {
  margin: 0 0 .75rem; padding: 0; text-decoration: none;
  font-size: 1.0625rem; color: var(--marker);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
/* 狀態卡比較窄，標籤與內容改成上下排 */
.act-card .facts > div { grid-template-columns: 1fr; gap: .125rem; border-top-color: transparent; }
.act-card .facts dt { font-size: .9375rem; }

/* 怎麼參加：三張色紙，中間紅麥克筆箭頭 */
.steps-grid {
  list-style: none; margin: 1.25rem 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem;
  counter-reset: step;
}
.steps-grid li {
  position: relative;
  margin: 0;
  padding: 1.25rem 1.25rem 1.125rem;
  background: var(--paper-yellow);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.steps-grid li:nth-child(1) { transform: rotate(-1deg); }
.steps-grid li:nth-child(2) { background: var(--paper-blue); transform: rotate(.8deg); }
.steps-grid li:nth-child(3) { background: var(--paper-green); transform: rotate(-.6deg); }
.steps-grid li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -2.25rem; top: 1.25rem;
  width: 2.25rem; height: 1.25rem;
  background: var(--arrow-right) no-repeat center / contain;
}
.steps-grid li > strong { display: block; margin: .625rem 0 .25rem; font-size: 1.1875rem; }
.steps-grid li > p { margin: 0; font-size: 1rem; color: var(--marker); }
.step-no {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 4px solid var(--paper-red); border-radius: 50%;
  background: var(--surface); color: var(--marker);
  font-weight: 700; font-size: 1.25rem; line-height: 1;
}

/* 兩種鏈：兩張白紙，左上角紅圈字母 */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; margin: 1.25rem 0 2rem; }
.track-card {
  position: relative;
  padding: 1.25rem 1.5rem 1.25rem 5.25rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 2px;
}
.track-card:nth-child(1) { transform: rotate(-.7deg); }
.track-card:nth-child(2) { transform: rotate(.6deg); }
.track-card h3 { margin: 0 0 .375rem; font-size: 1.25rem; }
.track-card p { margin: 0; color: var(--marker); }
.track-letter {
  position: absolute; left: 1.25rem; top: 1.25rem;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 4px solid var(--paper-red); border-radius: 50%;
  font-weight: 700; font-size: 1.375rem; line-height: 1;
  background: var(--surface); color: var(--marker);
}

table.points th[scope="row"] { width: 8rem; }
table.points td.num, table.points th.num { white-space: nowrap; }
/* 算式範例：一張黃便利貼 */
.example-box { background: var(--paper-yellow); border: 0; transform: rotate(-.5deg); }
.example-box .mono { font-size: 1.0625rem; }
.example-box .dim { color: var(--ink-on-yellow); }

/* 時間軸：一條麥克筆線，四個紅圈 */
.timeline {
  list-style: none; margin: 1.5rem 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
  position: relative;
}
.timeline::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: .625rem;
  height: 4px; background: var(--marker); border-radius: 2px;
}
.timeline li { position: relative; margin: 0; text-align: center; padding-top: 2.125rem; }
.timeline li::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--paper-red);
}
.timeline .tl-date { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.timeline .tl-name { display: block; font-size: 1rem; color: var(--pencil); }

/* 報名：貼著膠帶的一張紙 */
.enroll-box { border: 0; padding-top: 1.75rem; transform: rotate(-.4deg); }
.enroll-box::before, .enroll-box::after {
  content: ""; position: absolute; top: -.55rem; width: 3rem; height: 1.125rem;
  background: var(--tape); border-left: 1px dashed rgba(0,0,0,.12); border-right: 1px dashed rgba(0,0,0,.12);
}
.enroll-box::before { left: 1rem; transform: rotate(-6deg); }
.enroll-box::after  { right: 1rem; transform: rotate(5deg); }

/* 簡章的三張範例照片（2026/09/23）。白紙小卡、輕微歪斜、中間那張用一段膠帶壓角 ——
   與首頁那排剪貼照片同一種語言，不另開一套樣式。
   **這是內容圖不是裝飾圖**：有 figcaption，img 也一定要有描述畫面的 alt。
   （設計約定裡「內容頁不放蟲圖」講的是手繪 SVG —— 畫錯就是科學錯誤；
   簡章的實拍照片是館方自己的素材，沒有那個問題。） */
main.public-activity .eg-shots {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin: 1.25rem 0 1.75rem; padding: 0; list-style: none;
}
main.public-activity .eg-shots figure {
  margin: 0; padding: .5rem .5rem .75rem;
  background: var(--surface); box-shadow: var(--shadow); border-radius: 2px;
}
main.public-activity .eg-shots img { display: block; width: 100%; height: auto; }
main.public-activity .eg-shots figcaption {
  margin-top: .5rem; font-size: 1rem; line-height: 1.45; color: var(--pencil);
}
main.public-activity .eg-shots figure:nth-child(1) { transform: rotate(-1.2deg); }
main.public-activity .eg-shots figure:nth-child(2) { transform: rotate(.7deg); position: relative; }
main.public-activity .eg-shots figure:nth-child(3) { transform: rotate(-.5deg); }
main.public-activity .eg-shots figure:nth-child(2)::before {
  content: "";
  position: absolute; top: -.45rem; left: -.55rem;
  width: 2.5rem; height: .9rem;
  background: var(--tape);
  border-left: 1px dashed rgba(0, 0, 0, .12);
  border-right: 1px dashed rgba(0, 0, 0, .12);
  transform: rotate(-36deg);
}

/* 「報名」一節那句話裡的簡章連結（.rules-hint）墊到 24px 高：句中連結雖然有 WCAG 2.5.8 的
   行內例外，本站的標準仍是 24×24，設計審查截圖實際量到它只有 21px 高。 */
main.public-activity .rules-hint a { display: inline-block; padding: .25rem 0; }

/* 活動簡章頁（main.public-rules）：館方簡章的原文，是長文。
   main.page 寬 56rem，中文一行會超過 55 字，讀起來吃力 —— 段落與清單收在 44rem；
   範例照片那一列（.eg-shots）不受限，照舊用滿版面。 */
main.public-rules .doc > p,
main.public-rules .doc > ol,
main.public-rules .doc > ul { max-width: 44rem; }
main.public-rules .doc li { margin: .4rem 0; }
main.public-rules .doc + .actions-bar { margin-top: 2.5rem; }

/* 活動一覽（/activity）與研習頁（main.public-list，2026/09/24）
   使用者：研習頁「過度活潑、一眼看不出全局」。這兩頁刻意安靜 —— 一張表格紙，
   沒有轉動、膠帶、色紙標籤；表頭沿用 table.data 的黃色。只用既有 token。 */
/* 五欄的表在 56rem 會把「競賽活動」擠成兩行，這兩頁放寬；文字段落另外收在 44rem */
main.page.public-list { max-width: 72rem; }
main.public-list .lead { color: var(--marker); max-width: 44rem; }
main.public-list .act-table td:nth-child(2) { white-space: nowrap; }
main.public-list .act-filters ul { list-style: none; margin: 1.25rem 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
main.public-list .act-filters li { margin: 0; }
main.public-list .act-filters a {
  display: inline-block; min-height: 2.75rem; padding: .45rem 1.125rem;
  border: 2px solid var(--marker); border-radius: 4px;
  color: var(--marker); font-weight: 700; text-decoration: none; background: var(--surface);
}
main.public-list .act-filters a:hover { background: var(--amber-bg); }
main.public-list .act-filters a[aria-current="page"] { background: var(--paper-yellow); }
main.public-list .act-legend { font-size: 1rem; max-width: 44rem; }
main.public-list .act-legend a { display: inline-block; padding: .25rem 0; }   /* 句中連結墊到 24px 高 */
main.public-list .act-table th[scope="row"] { width: 10.5rem; background: var(--surface); font-variant-numeric: tabular-nums; }
main.public-list .act-table td { vertical-align: top; }
main.public-list .act-name strong { display: block; }
main.public-list .act-name a { display: inline-block; padding: .125rem 0; color: var(--paper-blue-dk); text-underline-offset: .2em; text-decoration-thickness: 2px; }
main.public-list .act-context,
main.public-list .act-hint { display: block; font-size: .9375rem; color: var(--pencil); margin-top: .25rem; }
main.public-list .act-how .btn { min-height: 2.75rem; padding: .4rem 1.25rem; }
main.public-list .act-how a:not(.btn) { display: inline-block; padding: .25rem 0; }   /* 「看本館官網公告」量到 22px 高 */
main.public-list .act-table .badge { white-space: normal; }
main.public-list tr.is-past th, main.public-list tr.is-past td { color: var(--pencil); }
/* 議程與「已結束」都收在 <details> 裡：沒有 JavaScript 也能開合，summary 墊到 24px 以上 */
main.public-list details > summary { cursor: pointer; padding: .25rem 0; font-weight: 700; color: var(--paper-blue-dk); }
main.public-list .act-agenda { margin-top: .5rem; }
main.public-list .act-agenda ol { margin: .375rem 0 0; padding-left: 1.25rem; font-size: 1rem; }
main.public-list .act-past { margin: 2rem 0 1rem; }
main.public-list .act-past > summary { font-size: 1.125rem; }
main.public-list .act-prose, main.public-list .act-prose + p { max-width: 44rem; }

/* ============================================================================
   11 帳號與報名（main.public-account）
   ============================================================================ */

main.public-account { max-width: 46rem; }
main.public-account fieldset.box:nth-of-type(odd)  { transform: rotate(-.4deg); }
main.public-account fieldset.box:nth-of-type(even) { transform: rotate(.35deg); }
main.public-account .lead { color: var(--marker); }

/* reCAPTCHA v3：徽章是 fixed 元素會蓋住焦點（準則 2.4.11），藏掉並改用文字聲明（Google 條款允許） */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { font-size: .875rem; color: var(--pencil); margin: 1rem 0 0; }

/* ============================================================================
   12 動態：一個編排過的時刻 —— 首頁的紙依序「貼上」，箭頭畫出來。
   其餘只有掀紙的 hover。prefers-reduced-motion 時全部靜止。
   ============================================================================ */

@keyframes paste-on {
  from { opacity: 0; transform: translateY(.75rem) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

main.home .hero  { animation: paste-on .6s cubic-bezier(.16, 1, .3, 1) both; }
main.home .menu li { animation: paste-on .6s cubic-bezier(.16, 1, .3, 1) both; }
main.home .menu li:nth-child(2) { animation-delay: .12s; }
main.home .menu li:nth-child(1) { animation-delay: .26s; }
main.home .menu li:nth-child(3) { animation-delay: .36s; }
main.home .menu li:nth-child(4) { animation-delay: .46s; }
main.home .legacy { animation: paste-on .6s .6s cubic-bezier(.16, 1, .3, 1) both; }
.menu .arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .7s .7s cubic-bezier(.16, 1, .3, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
  .menu .arrow path { stroke-dashoffset: 0; }
  a.item:hover, a.item:focus-visible, .btn:hover, .site-header .brand a:hover, .site-header nav a:hover,
  .work-card:hover, .work-card:focus-visible { transform: none; }
}

/* ============================================================================
   13 窄螢幕：三折板摺起來變一直條
   ============================================================================ */

@media (max-width: 52rem) {
  .menu {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "c c" "l1 l3" "r r";
    gap: 1.5rem 1rem;
  }
  /* 桌機那支斜箭頭在單欄版面沒有意義，改成一支朝下的，從標題指進黃色面板。
     它是 li 的 ::before（不在 <a> 裡），所以不影響連結的可及名稱。 */
  .menu .arrow { display: none; }
  .menu li:nth-child(2) { position: relative; padding-top: 3rem; }
  .menu li:nth-child(2)::before {
    content: "";
    position: absolute; left: 50%; top: .25rem; transform: translateX(-50%);
    width: 1.75rem; height: 2.5rem;
    background: var(--arrow-down) no-repeat center / contain;
  }
  .menu li:nth-child(4) .item { flex-direction: row; justify-content: center; gap: 1.25rem; padding: 1.5rem 1rem; }
  .act-hero { grid-template-columns: 1fr; gap: 1.75rem; }
  .act-card { transform: rotate(.6deg); }
  .steps-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .steps-grid li:not(:last-child)::after {
    right: auto; left: 50%; top: auto; bottom: -2.5rem; transform: translateX(-50%);
    width: 1.25rem; height: 2.5rem;
    background-image: var(--arrow-down);
  }
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline::before { left: .5rem; right: auto; top: .75rem; bottom: .75rem; width: 4px; height: auto; }
  .timeline li { text-align: left; padding: .375rem 0 .875rem 2.25rem; }
  .timeline li::before { left: 0; top: .5rem; transform: none; }
  /* 工作區的三個入口：52rem 以下一欄一張，卡片裡的字才不會被擠成兩三行 */
  ul.work { grid-template-columns: 1fr; gap: .875rem; }
}

@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  /* 主要動作自己一整行，次要的並排在下面：不然三顆會斷成 2＋1，最後一顆孤零零 */
  main.public .actions-bar { gap: .75rem; }
  main.public .actions-bar .btn { flex: 1 1 auto; text-align: center; }
  main.public .actions-bar .btn-primary,
  main.public .actions-bar .btn-accent { flex: 1 0 100%; }
  main.home { padding: 1.75rem 1rem 3rem; }
  main.page { padding: 1.75rem 1rem 3rem; }
  main.page h1 { transform: rotate(-.6deg); }
  .site-header { padding: .75rem 1rem .625rem; }
  .site-header .brand { font-size: 1.25rem; }
  .parade .bug { width: 2.75rem; height: 2.75rem; }
  .menu li:nth-child(2) .item { padding: 2rem 1rem 1.5rem; }
  .footer-bugs { gap: .5rem; }
  .footer-bugs .bug { width: 2.5rem; height: 2.5rem; }
  .facts > div, .facts-wide > div { grid-template-columns: 1fr; gap: .125rem; }
  .track-card { padding-left: 1.5rem; padding-top: 4.25rem; }
  main.public-activity .eg-shots { grid-template-columns: 1fr; gap: 1rem; }
  .parade { gap: .625rem .75rem; }
  .parade .bug { width: 3.5rem; height: 3.5rem; }
  .menu .ico { width: 4.25rem; height: 4.25rem; }
  .menu .ico .bug, .menu .ico svg { width: 3rem; height: 3rem; }
  .menu .item { padding: 1.75rem .75rem 1.5rem; font-size: 1.125rem; }

  /* 點數表：窄螢幕上三欄會把「怎麼給」擠成一字一行，改成一項一段。
     表頭用 visually-hidden 藏起來，輔具仍讀得到欄名；「最多可得」用 ::before 補回標籤。 */
  table.points thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.points, table.points caption, table.points tbody, table.points tr, table.points th, table.points td { display: block; }
  table.points tr { padding: .875rem 1rem 1rem; border-bottom: 2px dashed var(--rule); }
  table.points tr:last-child { border-bottom: 0; }
  table.points th[scope="row"], table.points td { width: auto; border: 0; padding: 0; background: none; }
  table.points th[scope="row"] { font-size: 1.125rem; margin-bottom: .25rem; }
  table.points td.num { text-align: left; white-space: normal; font-weight: 700; margin-top: .375rem; }
  table.points td.num::before { content: "最多可得："; font-weight: 400; color: var(--pencil); }

  /* 活動一覽：五欄在手機上擠不下，一列變成一段；欄名由 td 的 data-label 補回 */
  main.public-list .act-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  main.public-list .act-table, main.public-list .act-table caption, main.public-list .act-table tbody,
  main.public-list .act-table tr, main.public-list .act-table th, main.public-list .act-table td { display: block; }
  main.public-list .act-table tr { padding: 1rem 1rem 1.125rem; border-bottom: 2px dashed var(--rule); }
  main.public-list .act-table tr:last-child { border-bottom: 0; }
  main.public-list .act-table th[scope="row"], main.public-list .act-table td { width: auto; border: 0; padding: .125rem 0; background: none; }
  main.public-list .act-table th[scope="row"] { font-size: 1.125rem; margin-bottom: .25rem; }
  main.public-list .act-table td[data-label]::before { content: attr(data-label) "："; font-weight: 400; color: var(--pencil); }
  main.public-list .act-table td.act-name::before { content: none; }
  main.public-list .act-table td.act-how { margin-top: .5rem; }
  main.public-list .act-table td.act-how::before { content: none; }
}