/* 滾滾球實驗室 QK Rolling Lab（原橙良實驗室）— 樣式
   配色：深色為主 ＋ QK 品牌四色 500 亮階配深字（設計系統「對比雙軌」的無障礙款）
   一律走變數，不在元件裡寫死色值。 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root {
  /* 品牌色（來自 qkstudio-brand-kit tokens） */
  --c-ocean-500: #1DA1DB;
  --c-ocean-400: #45B5E5;
  --c-ocean-700: #126E99;
  --c-orange-500: #F5A33B;
  --c-orange-700: #B87317;
  --c-orange-800: #935B12; /* 淺色主題的強調文字：orange-700 在白底只有 3.8:1，800 有 5.6:1 */
  --c-yellow-500: #FBC530;
  --c-sky-500: #82C9F0;
  --c-green-500: #7AC83E;
  /* 淺色主題的卡片用色階淡階（品牌色階內取值，不自創色） */
  --c-ocean-100: #D3EEFA;
  --c-ocean-200: #A8DDF5;
  --c-orange-200: #FADCA8;
  --c-yellow-300: #FDDD85;
  --c-sky-300: #B4DFF7;
  --c-ink: #1C1C1C;
  --c-white: #FFFFFF;

  /* 深色主題（預設） */
  --bg: #161616; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --bg-2: #1F1F1F; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --surface: #232323; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --line: #333333; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --line-2: #4A4A4A; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --text: #FFFFFF; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --text-2: #B7B7B7; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --text-3: #8A8A8A; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --accent: var(--c-yellow-500);
  /* 議題雲的八個字色（營運長 2026-09-07：「這些都可以用啊，只是有些需要調淡一點」——
     他把 BIS 的色階、語意色、流程狀態色、插畫色都指出來授權使用）。
     🔴 兩個主題各取「讀得到的那個版本」，同一個色相不同深淺：
        深色主題取 300 階與插畫色（＝他說的「調淡」），量到 3.96–13.67:1；
        淺色主題取 600–700 階與語意色的深版，量到 3.38–5.36:1。
     字級最小 20px、粗體＝WCAG 的「大字」，門檻是 3:1（不是 4.5:1）。
     ⚠️ BIS 原本寫語意色與流程狀態色「只用於狀態標示，不挪作他用」——
     在議題雲用是營運長 2026-09-07 當面授權的，不是我自己放寬。 */
  /* 前六個就是營運長看過說「很好啊」的那一組，原封不動；
     後四個是他要「再補上」的紫、亮藍、黑、灰（「不是換掉」）。
     兩個主題用同一組——他看過對比數字後選擇這個外觀（淺底上部分色偏淡）。 */
  --詞色-1: var(--c-yellow-500);   /* 淡黃 #FBC530 */
  --詞色-2: var(--c-sky-500);      /* 天空藍 #82C9F0 */
  --詞色-3: #F0938A;               /* qk-allow: BIS illus-coral 粉紅 */
  --詞色-4: #7AC83E;               /* qk-allow: BIS illus-green 綠 */
  --詞色-5: var(--c-orange-500);   /* 橘 #F5A33B */
  --詞色-6: var(--c-ocean-400);    /* 海藍 #45B5E5 */
  --詞色-7: #A142F4;               /* qk-allow: BIS 流程狀態色 revising 紫 */
  --詞色-8: #4285F4;               /* qk-allow: BIS 流程狀態色 review 亮藍 */
  --詞色-9: var(--text);           /* 黑（深色主題自動變白） */
  --詞色-10: var(--text-2);        /* 灰 */
  --link: var(--c-ocean-400);
  --on-brand: var(--c-ink);

  /* 字階（9 級） */
  --f-1: 11px; --f-2: 12px; --f-3: 13px; --f-4: 14px; --f-5: 16px;
  --f-6: 20px; --f-7: 26px; --f-8: 34px; --f-9: 46px;

  /* 間距與圓角 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --文寬: 600px; /* 內文段、導言、計劃副標共用的最大行寬 */
  --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-pill: 999px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .28);
  --maxw: 1180px;
}

:root[data-theme="light"] {
  --bg: #F7F9FC; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 gray-50（淺色整頁淺灰底） */
  --bg-2: #EEF2F6; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 gray-100 */
  --surface: #FFFFFF; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 gray-0（卡片白，襯在淺灰底上） */
  --line: #E8EAED; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --line-2: #D5D9DE; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --text: #1C1C1C; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --text-2: #4A4D52; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --text-3: #6B6B6B; /* qk-allow: 主題語意 token 的定義處，值來自品牌灰階 */
  --accent: var(--c-orange-800);
  --link: var(--c-ocean-700);
  /* 議題雲刻意**不**在淺色主題換色：營運長 2026-09-07 看過對比數字
     （淡黃 1.52／天空藍 1.72／粉紅 2.15／綠 1.96:1）之後說「剛剛的顏色比較好」，
     並要求「再補上」而不是換掉。深階那一版試過，他說「邊的超怪」。
     黑與灰用主題文字色，所以兩個主題都讀得到。 */
  --shadow: 0 6px 24px rgba(28, 28, 28, .10);
}

/* 淺色主題：整片高彩度色塊在白底上太搶，改用同色系的淡階 */
:root[data-theme="light"] .卡-1 { background: var(--c-ocean-200); }
:root[data-theme="light"] .卡-2 { background: var(--c-orange-200); }
:root[data-theme="light"] .卡-3 { background: var(--c-sky-300); }
:root[data-theme="light"] .卡-4 { background: var(--c-yellow-300); }
:root[data-theme="light"] .卡-5 { background: var(--c-ocean-100); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 元件多半用 flex/grid，會蓋掉 hidden 的預設 display，這裡壓回來 */
[hidden] { display: none !important; }

html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: var(--f-4);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 黏底頁尾：內容不夠長的頁面（關於、政策、聯絡）頁尾要貼在視窗底部，
     不要停在半空中、下面留一大片空白（營運長 2026-09-08 在「關於」抓到）。
     main 撐開剩下的高度，頁尾自然被推到最後。
     ⚠️ 用 100dvh 不用 100vh：手機瀏覽器的網址列會伸縮，vh 會多出一截捲動。 */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* 🔴 min-height: 0 一定要有：flex 子項的預設 min-height 是 auto，
   內容很長的頁面會被撐爆版面（跟 grid 要寫 minmax(0,1fr) 是同一個坑，雷區 28）。 */
body > main { flex: 1 0 auto; min-height: 0; }
body > .頁尾 { flex: 0 0 auto; }

a { color: var(--link); }
img { max-width: 100%; display: block; }

/* 鍵盤操作看得見焦點 */
:focus-visible {
  outline: 3px solid var(--c-ocean-400);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* 跳到主要內容 */
.跳過 {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-yellow-500); color: var(--c-ink);
  padding: var(--s-2) var(--s-4); border-radius: 0 0 var(--r-1) 0; z-index: 100;
}
.跳過:focus { left: 0; }

.僅螢幕報讀 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.版心 { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
main > .版心 { padding-top: var(--s-6); padding-bottom: var(--s-7); }
main > .版心 > h1 + p { margin-top: var(--s-4); color: var(--text-2); }
main > .主視覺 { padding-bottom: var(--s-6); }

/* ── 工具列（中文 ｜ 主題）────────────── */
.工具列 { }
.工具列 .內 {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s-2) var(--s-5);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1);
}
.工具鈕 {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: none; border: 0; color: var(--text-2);
  font: inherit; font-size: var(--f-2); cursor: pointer;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-1);
}
.工具鈕:hover { color: var(--text); }
.工具鈕[aria-pressed="true"] { color: var(--accent); }
/* 語言鈕原本靠一個寫死的 aria-pressed="true" 才是橘的。那個屬性是錯的（永遠 true）已經拿掉，
   但顏色是既有外觀、營運長沒有要求改，所以在這裡直接指名補回來。 */
#語言鈕 { color: var(--accent); }
#語言鈕:hover { color: var(--accent); }
.工具鈕 svg { width: 17px; height: 17px; }
.工具分隔 { color: var(--line-2); margin: 0 var(--s-1); }

/* ── 頁首 ──────────────────────────────── */
.頁首 .內 {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
}
.標記 { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--text); }
.標記 img { width: 44px; height: 25px; }
/* 🔴 站名要墨黑。外層 .標記 span 是 --text-2（#4A4D52 灰），<b> 會繼承它——
   量到站名其實是灰的，不是黑的（營運長 2026-09-08：「同時幫我弄黑色」）。
   這裡明確指定 --text（#1C1C1C），不要靠繼承。 */
.標記 b { font-size: var(--f-5); font-weight: 600; letter-spacing: -.2px; color: var(--text); }
.標記 span { font-size: var(--f-3); color: var(--text-2); }
.導覽 { display: flex; gap: var(--s-5); margin-left: var(--s-5); }
.導覽 a { color: var(--text-2); text-decoration: none; font-size: var(--f-3); }
.導覽 a:hover, .導覽 a[aria-current="page"] { color: var(--text); }
.頁首 .右 { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

.鈕 {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font: inherit; font-size: var(--f-3); font-weight: 500;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.鈕-主 { background: var(--c-orange-500); color: var(--on-brand); }
.鈕-次 { background: transparent; color: var(--text); border-color: var(--line-2); }
.鈕-藍 { background: var(--c-ocean-500); color: var(--on-brand); }
.鈕:disabled { opacity: .5; cursor: not-allowed; }
.鈕-小 { font-size: var(--f-2); padding: var(--s-1) var(--s-3); }

/* ── 首頁 ──────────────────────────────── */
.主視覺 { padding: var(--s-7) var(--s-5) var(--s-6); }
.主視覺 .格 { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-6); align-items: end; }
@media (max-width: 900px) { .主視覺 .格 { grid-template-columns: 1fr; gap: var(--s-4); } }
.眉標 {
  font-size: var(--f-1); letter-spacing: .16em; font-weight: 500;
  color: var(--accent); margin-bottom: var(--s-4);
}
h1 { font-size: var(--f-9); font-weight: 900; line-height: 1.16; letter-spacing: -1px; }
.主視覺 .說明 { color: var(--text-2); max-width: 46ch; }
.數據 { display: flex; gap: var(--s-6); margin-top: var(--s-5); flex-wrap: wrap; }
.數據 b { display: block; font-size: var(--f-8); font-weight: 600; }
.數據 span { font-size: var(--f-2); color: var(--text-2); }

.篩選 { display: flex; gap: var(--s-2); flex-wrap: wrap; margin: var(--s-5) 0; }
.籤 {
  font: inherit; font-size: var(--f-2); padding: var(--s-1) var(--s-4);
  border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: transparent; color: var(--text-2); cursor: pointer;
}
.籤[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

.卡片列 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  grid-auto-rows: 1fr; /* 每一排同高，不因某張摘要多一行就長短不齊 */
  padding-bottom: var(--s-7);
}
/* 只有一兩張時也維持三欄的寬度，不要撐成大方塊 */
.卡片列 > .卡 { min-height: 190px; }
.卡 {
  position: relative;
  border-radius: var(--r-3); padding: var(--s-5); min-height: 180px;
  display: flex; flex-direction: column; text-decoration: none; color: var(--on-brand);
  background: var(--surface);
}
/* 整張卡可點：標題連結的 ::after 蓋滿卡片；卡上其他連結（系列 badge）抬到上層才點得到 */
.卡連結 { color: inherit; text-decoration: none; }
.卡連結::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.卡連結:focus-visible { outline: none; }
.卡:has(.卡連結:focus-visible) { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; }
.卡 a.系列籤 { position: relative; z-index: 1; }
.卡 a.系列籤:hover { border-color: rgba(28, 28, 28, .8); color: var(--c-ink); }
.卡-1 { background: var(--c-ocean-500); }
.卡-2 { background: var(--c-orange-500); }
.卡-3 { background: var(--c-sky-500); }
.卡-4 { background: var(--c-yellow-500); }
.卡-5 { background: var(--c-green-500); }
.卡-AI { background: var(--c-yellow-500); }
.卡 h3, .卡 h2 { font-size: var(--f-6); font-weight: 700; line-height: 1.35; margin-top: var(--s-2); }
.卡 p { font-size: var(--f-3); line-height: 1.65; margin-top: var(--s-1); color: rgba(28, 28, 28, .9);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.線稿 { margin-top: var(--s-2); }
.線稿 svg { height: 44px; width: auto; }
.卡 .底 {
  margin-top: auto; padding-top: var(--s-3);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--f-3); font-weight: 500;
}
/* 預設在頁面底色上（深色頁）；放進彩色卡時由 .卡 .狀 覆蓋成深字淺底 */
.狀 {
  display: inline-block; align-self: flex-start;
  font-size: var(--f-1); font-weight: 500;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2);
}
.卡 .狀 { background: rgba(28, 28, 28, .14); color: var(--on-brand); border-color: transparent; }
.箭 {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-ink); color: var(--c-white);
  display: grid; place-items: center; flex: none;
}
.箭 svg { width: 14px; height: 14px; }

.編號 {
  font-family: "Poppins", sans-serif; font-size: var(--f-2); letter-spacing: .08em;
  color: var(--text-3); display: block;
}
.卡 .編號 { color: rgba(28, 28, 28, .9); margin-bottom: var(--s-1); }

/* ── 計劃頁 ────────────────────────────── */
/* 計劃首屏：封面與標題左右並排 */
.計劃首屏 {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7);
  align-items: center; padding: var(--s-6) 0 var(--s-7);
}
/* 桌機：文字在左、封面在右；手機單欄時封面回到最上面 */
.計劃首屏 .首屏圖 { order: 2; }
.計劃首屏 .首屏圖 img { width: auto; max-width: 100%; max-height: 460px; height: auto; display: block; margin: 0 auto; border-radius: var(--r-3); }
@media (max-width: 800px) {
  .計劃首屏 { grid-template-columns: 1fr; gap: var(--s-5); }
  .計劃首屏 .首屏圖 { order: 0; }
}

.計劃頭 { padding: 0; }
.計劃頭 h1 { font-size: var(--f-9); line-height: 1.2; }
.計劃頭 .摘 { color: var(--text-2); margin-top: var(--s-4); max-width: 44ch; font-size: var(--f-5); line-height: 1.7; }
.計劃頭 h1 { margin-top: var(--s-3); }
.試用列 { margin: 0 0 var(--s-6); }
.計劃封面 { border-radius: var(--r-3); overflow: hidden; margin-bottom: var(--s-6); background: var(--bg-2); }
.計劃封面 img { max-height: 70vh; width: auto; margin: 0 auto; }
/* 內文可以編排：文字限寬好讀，圖與分欄用整個版心 */
.內文 { max-width: none; }
.內文 > * + * { margin-top: var(--s-5); }
/* 章節標題前維持一般段距（加上自己的 padding-top 共 40px）；只有整段圖文並排之間多留一點 */
.內文 > * + .分欄 { margin-top: var(--s-7); }
.內文 > .節標 + * { margin-top: var(--s-3); }
.內文 p { color: var(--text-2); }
.內文 .段 { max-width: var(--文寬); }
.內文 img { border-radius: var(--r-2); }
.內文 figure img { max-height: 420px; width: auto; margin: 0 auto; }
.內文 figure { text-align: center; }
/* 小圖（例如合作單位標誌）：靠左、限高，不佔整個版面 */
.內文 figure.圖-小 { text-align: right; }
.內文 figure.圖-小 img { max-height: 72px; margin: 0 0 0 auto; }

.節標 {
  font-size: var(--f-6); font-weight: 700; color: var(--text); line-height: 1.4;
  padding-top: var(--s-4);
}
.節標 span { color: var(--text-3); font-weight: 500; font-size: var(--f-4); }

.條列 { padding-left: 1.2em; color: var(--text-2); }  /* 條列不限寬：一條一句的場次紀錄折成兩行反而難讀 */
.條列 li { margin-top: var(--s-1); line-height: 1.7; }
.條列 li::marker { color: var(--text-3); }

.分欄 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
.分欄.圖在右 .圖側 { order: 2; }
.分欄 .圖側 img { border-radius: var(--r-2); width: auto; max-width: 100%; max-height: 420px; height: auto; display: block; margin: 0 auto; }
.分欄 .文側 .節標 { padding-top: 0; margin-bottom: var(--s-4); }
.分欄 .文側 h3 { font-size: var(--f-5); margin-bottom: var(--s-3); color: var(--text); }
.分欄 .文側 p + p { margin-top: var(--s-3); }
@media (max-width: 800px) {
  .分欄 { grid-template-columns: 1fr; gap: var(--s-4); }
  .分欄.圖在右 .圖側 { order: 0; }
}
.內文 figcaption { font-size: var(--f-2); color: var(--text-3); margin-top: var(--s-2); }
.內文 .影片 { position: relative; padding-top: 56.25%; border-radius: var(--r-2); overflow: hidden; }
.內文 .影片 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.區塊 { padding: 0; margin-top: var(--s-6); }
.區塊 + .區塊 { margin-top: var(--s-5); }
.區塊 h2 { font-size: var(--f-6); margin-bottom: var(--s-4); }
.人員 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-4); }
.人 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); }
.人 b { display: block; font-size: var(--f-4); }
.人 span { font-size: var(--f-2); color: var(--text-2); }
.社群 { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.社群 a { display: grid; place-items: center; min-width: 24px; min-height: 24px; color: var(--text); }
.社群 svg { width: 16px; height: 16px; }

.授權 { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; font-size: var(--f-3); color: var(--text-2); }
.授權徽章 { display: flex; gap: var(--s-2); color: var(--text); margin-bottom: var(--s-3); }
.授權徽章 svg { width: 34px; height: 34px; }
.授權區 .授權名 { font-size: var(--f-4); color: var(--text); font-weight: 500; }
.授權區 .授權註 { font-size: var(--f-3); color: var(--text-2); margin-top: var(--s-1); max-width: 68ch; }
.版權註 { font-size: var(--f-2); color: var(--text-3); margin-top: var(--s-7); }
.授權 .牌 {
  border: 1px solid var(--text); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-4); color: var(--text);
  font-size: var(--f-3); letter-spacing: .02em;
}

.嵌入 { position: relative; padding-top: 62%; border-radius: var(--r-2); overflow: hidden; background: var(--bg-2); }
.嵌入 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.嵌入說明 { font-size: var(--f-2); color: var(--text-3); margin-top: var(--s-2); }

/* 圖組（並排）*/
.圖組 { display: grid; gap: var(--s-4); }
.圖組.欄2 { grid-template-columns: repeat(2, 1fr); }
.圖組.欄3 { grid-template-columns: repeat(3, 1fr); }
.圖組.欄4 { grid-template-columns: repeat(4, 1fr); }
.圖組 img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r-2); }
/* 首頁品牌段：彈珠台舞台（幾何色塊）＋三句概念文；燒杯可點重播 */
.滾球框 { position: relative; }
.滾球段 .滾球台 { display: block; width: 100%; height: auto; border-radius: var(--r-3); }
/* 從燒杯掉下來的那顆球：固定定位、沿 offset-path 走；燒杯可點重播 */
.滾球空中 { position: fixed; z-index: 5; border-radius: 50%; background: var(--c-orange-500); pointer-events: none; offset-rotate: 0deg; }
.首插.可點 { cursor: pointer; }
.滾球文 { max-width: var(--文寬); margin-top: var(--s-6); display: grid; gap: var(--s-3); color: var(--text-2); line-height: 1.8; }
/* 兩欄圖組每張圖較寬，高度上限跟著放大 */
.圖組.欄2 img { max-height: 400px; }
/* 工具統計區塊：大數字＋各類別橫條（單一色相、只在資料端圓角、數字直接標在條尾） */
.統計 { display: grid; gap: var(--s-5); max-width: var(--文寬); }
.統計-數 { display: flex; align-items: baseline; gap: var(--s-3); }
.統計-大 { font-family: "Poppins", sans-serif; font-size: var(--f-9); line-height: 1; font-weight: 600; color: var(--text); }
.統計-標 { font-size: var(--f-4); color: var(--text-2); }
.統計-表 { width: 100%; border-collapse: collapse; }
.統計-表 tr + tr th, .統計-表 tr + tr td { padding-top: var(--s-2); }
.統計-表 th { text-align: left; font-weight: 400; color: var(--text-2); font-size: var(--f-3); white-space: nowrap; padding-right: var(--s-4); width: 1%; }
.統計-軌 { width: 100%; }
.統計-條 { display: block; height: 10px; min-width: 4px; border-radius: 0 4px 4px 0; background: var(--c-sky-500); }
.統計-值 { text-align: right; padding-left: var(--s-3); font-family: "Poppins", sans-serif; font-size: var(--f-3); color: var(--text); width: 1%; }
@media (max-width: 800px) { .圖組.欄3, .圖組.欄4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .圖組 { grid-template-columns: 1fr; } }

/* 輪播 */
.輪播 { position: relative; }
.輪播 .視窗 { overflow: hidden; border-radius: var(--r-2); background: var(--bg-2); }
.輪播 .軌道 { display: flex; transition: transform .35s ease; }
/* 一格＝模糊底圖＋原圖。原圖維持 contain（截圖不能裁），底圖負責把露出來的邊補成同一張圖的顏色 */
.輪播 .軌道 .輪播格 { flex: 0 0 100%; position: relative; overflow: hidden; }
.輪播 .軌道 .輪播底 {
  position: absolute; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  /* 放大一點再模糊，邊緣才不會透出底下的灰 */
  transform: scale(1.15); filter: blur(28px); opacity: .9;
}
.輪播 .軌道 img { position: relative; width: 100%; max-height: 460px; object-fit: contain; display: block; }
.輪播鈕 {
  position: absolute; top: 45%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2);
  font: inherit; font-size: var(--f-6); line-height: 1; display: grid; place-items: center;
}
.輪播鈕.左 { left: var(--s-3); }
.輪播鈕.右 { right: var(--s-3); }
.圓點列 { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-3); }
.圓點 {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--line-2); border: 0;
}
.圓點[aria-current="true"] { background: var(--text); }

/* 特色卡 */
.特色組 { display: grid; gap: var(--s-4); }
.特色組.欄2 { grid-template-columns: repeat(2, 1fr); }
.特色組.欄3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .特色組.欄2, .特色組.欄3 { grid-template-columns: 1fr; } }
.特色卡 {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: var(--s-5);
}
.特色卡 h3 { font-size: var(--f-5); margin-bottom: var(--s-2); }
.特色卡 p { color: var(--text-2); font-size: var(--f-3); }

/* 製作團隊：角色｜姓名，一行一項 */
.製作團隊 .團隊列 {
  font-size: var(--f-4); color: var(--text); line-height: 2;
  display: flex; align-items: baseline; gap: 0; flex-wrap: wrap;
}
.製作團隊 .職 { color: var(--text); font-weight: 700; }
/* 分隔線用 1px 細線，不用全形「｜」——那個字自帶左右空白，看起來空得太開 */
.製作團隊 .分 { display: inline-block; width: 1px; height: .85em; overflow: hidden; color: transparent; background: var(--line-2); margin: 0 var(--s-2); vertical-align: -.08em; }
.製作團隊 .名 { color: var(--text-2); font-weight: 400; }
.製作團隊 .團隊說明 {
  font-size: var(--f-3); color: var(--text-2);
  margin: var(--s-2) 0 var(--s-4); max-width: 68ch;
}
.製作團隊 .社群 { margin-left: var(--s-3); display: inline-flex; gap: var(--s-2); }

/* 人物卡（內文用的人物區塊）*/
.人物組 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-7); }
@media (max-width: 800px) { .人物組 { grid-template-columns: 1fr; } }
.人物卡 { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-4); align-items: start; }
.人物卡 .頭像 { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.人物卡 b { display: block; font-size: var(--f-4); }
.人物卡 span { display: block; font-size: var(--f-3); color: var(--text-2); margin-top: var(--s-1); }
.人物卡 p { font-size: var(--f-3); color: var(--text-2); margin-top: var(--s-3); }
.人物卡 .社群 { margin-top: var(--s-3); }

/* 圖片上疊說明框 */
.疊圖 { position: relative; }
.疊圖 img { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--r-2); }
.疊圖 .說明框 {
  position: absolute; max-width: 320px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-2); padding: var(--s-4); box-shadow: var(--shadow);
}
.疊圖 .說明框 b { display: block; margin-bottom: var(--s-2); }
.疊圖 .說明框 p { font-size: var(--f-3); color: var(--text-2); }
.疊圖.位置-右上 .說明框 { top: var(--s-5); right: var(--s-5); }
.疊圖.位置-左上 .說明框 { top: var(--s-5); left: var(--s-5); }
.疊圖.位置-右下 .說明框 { bottom: var(--s-5); right: var(--s-5); }
.疊圖.位置-左下 .說明框 { bottom: var(--s-5); left: var(--s-5); }
@media (max-width: 700px) {
  .疊圖 .說明框 { position: static; max-width: none; margin-top: var(--s-3); box-shadow: none; }
}

/* 首頁的 AI 分享區 */
.首頁AI { padding-bottom: var(--s-8); }
.首頁AI .區頭 { display: flex; align-items: baseline; gap: var(--s-4); }
.首頁AI .看全部 { margin-left: auto; font-size: var(--f-3); color: var(--link); text-decoration: none; }
.首頁AI .區說明 { color: var(--text-2); font-size: var(--f-3); margin-top: var(--s-2); max-width: 68ch; }

/* ── AI 分享 ─────────────────────────── */
.分享列 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
@media (max-width: 800px) { .分享列 { grid-template-columns: 1fr; } }
.分享卡 {
  display: block; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: var(--s-5);
}
.分享卡:hover { border-color: var(--line-2); }
.分享卡 h3, .分享卡 h2 { font-size: var(--f-5); margin-top: var(--s-2); }
.分享卡 p { font-size: var(--f-3); color: var(--text-2); margin-top: var(--s-2); }
.類型籤 {
  display: inline-block; font-family: "Poppins", sans-serif; font-size: var(--f-1);
  letter-spacing: .08em; color: var(--accent);
}
.授權籤 { display: inline-block; margin-top: var(--s-3); font-size: var(--f-2); color: var(--text-3); }

/* 複製鈕放在內容框外、下方右側；內容框限高，在框內捲動 */
.複製角 {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end;
  margin-top: var(--s-3);
}
.複製提示 { font-size: var(--f-2); color: var(--text-2); }
.內容框 {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: var(--s-5);
  font-size: var(--f-3); line-height: 1.9; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
  font-family: inherit;
  max-height: 360px; overflow: auto;
}

/* ── 表單 ──────────────────────────────── */
/* 聯絡頁導言：與標題、表單都拉開 */
.導言 { font-size: var(--f-5); line-height: 1.7; color: var(--text-2); max-width: var(--文寬); margin: var(--s-4) 0 var(--s-7); }
.表單 { max-width: 620px; }
.欄 { margin-bottom: var(--s-4); }
.欄 label { display: block; font-size: var(--f-3); font-weight: 500; margin-bottom: var(--s-1); }
.欄 .必 { color: var(--c-orange-500); }
.欄 input, .欄 textarea, .欄 select {
  width: 100%; font: inherit; font-size: var(--f-4);
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  /* 內距 8 不是 12：後台一個欄位原本要吃 77px 高（標籤 21＋間隔 8＋輸入框 48），
     一張人員卡疊四五個欄位就把版面撐出一大片空白（營運長 2026-09-05）。
     收成 8 之後輸入框 40px 高，桌面點擊仍然夠大。 */
  padding: var(--s-2) var(--s-3);
}
.欄 textarea { min-height: 150px; resize: vertical; }
.欄 .錯 { color: var(--c-orange-500); font-size: var(--f-2); margin-top: var(--s-1); }
.欄 .選 { color: var(--text-3); font-weight: 400; }
.欄 .欄註 { font-size: var(--f-2); color: var(--text-3); margin-top: var(--s-2); line-height: 1.6; }
.蜜罐 { position: absolute; left: -9999px; }

.提示 {
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  /* 上下 12、左右 24（營運長 2026-09-08：「聯絡我們的這段，可以框扁一點嗎」）。
     這個框裡只有一行字，四邊都給 24 會變成一個又高又空的盒子。
     🔴 左右維持 24：那是他 09-05 訂的「字不要黏著卡片邊」的標準，不能一起收掉。 */
  background: var(--bg-2); padding: var(--s-3) var(--s-5);
  font-size: var(--f-3); color: var(--text-2); margin-bottom: var(--s-5);
}
.提示 strong { color: var(--text); }

/* ── Cookie 同意 ───────────────────────── */
.同意 {
  position: fixed; inset: auto var(--s-4) var(--s-4) var(--s-4); z-index: 60;
  max-width: 640px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--shadow);
}
.同意 h2 { font-size: var(--f-5); margin-bottom: var(--s-2); }
.同意 p { font-size: var(--f-3); color: var(--text-2); }
.同意 .選項 { display: flex; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-4) 0; }
/* label.勾：寫成 label.勾 才蓋得過同權重、位置更前的 .欄 label{display:block} */
label.勾 { display: flex; align-items: center; gap: var(--s-2); font-size: var(--f-3); margin: 0; cursor: pointer; }
/* 自繪勾選框：勾勾用幾何 SVG 畫，選中一律藍底白勾，深淺主題都一樣 */
.勾 input[type=checkbox] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; padding: 0; margin: 0; flex-shrink: 0; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--surface);
  transition: background-color .15s, border-color .15s;
}
.勾 input[type=checkbox]:checked {
  background-color: var(--c-ocean-500); border-color: var(--c-ocean-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px 13px;
}
.勾 input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
.勾:has(input:disabled) { cursor: not-allowed; }
.同意 .鈕列 { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ── 對話框（不用瀏覽器原生 alert / confirm）── */
.罩 {
  position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .55);
  display: grid; place-items: center; padding: var(--s-4);
}
.對話 {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-3); padding: var(--s-5); max-width: 460px; width: 100%;
  box-shadow: var(--shadow);
}
.對話 h2 { font-size: var(--f-5); margin-bottom: var(--s-2); }
.對話 p { font-size: var(--f-3); color: var(--text-2); }
.對話 .鈕列 { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); }
.表單 .鈕列 { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
/* 新版提示列：貼在最上方，不蓋住內容 */
.更新列 { display: flex; align-items: center; justify-content: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-2) var(--s-4); background: var(--c-yellow-500); color: var(--on-brand); font-size: var(--f-3); }
/* 清單編輯器：一項一列，右側是那一項自己的動作 */
.清單編-列表 { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.清單編-列表 li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--surface); }
.清單編-列表 li + li { border-top: 1px solid var(--line); }
.清單編-列表 .清單編-空 { color: var(--text-3); font-size: var(--f-3); }
.清單編-新增 { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.清單編-新增 input { flex: 1; }
.鈕-小 { padding: var(--s-1) var(--s-3); font-size: var(--f-2); }
.鈕-警 { border-color: var(--c-orange-500); color: var(--c-orange-700); }
[data-theme="light"] .鈕-警 { color: var(--c-orange-700); }

/* ── 後台 ──────────────────────────────── */
.後台格 { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-6); padding: var(--s-6) 0; }
.側欄 { display: flex; flex-direction: column; gap: var(--s-1); }
.側欄 button {
  font: inherit; font-size: var(--f-3); text-align: left; cursor: pointer;
  background: none; border: 0; color: var(--text-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-1);
}
.側欄 button[aria-current="true"] { background: var(--bg-2); color: var(--text); }
.表 { width: 100%; border-collapse: collapse; font-size: var(--f-3); }
.表 th, .表 td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.表 th { color: var(--text-2); font-weight: 500; font-size: var(--f-2); }
.捲 { overflow-x: auto; }

/* ── 後台編輯器 ────────────────────────── */
.編輯列 { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--s-5); }
.編輯列 .右靠 { margin-left: auto; display: flex; gap: var(--s-2); }
.欄組 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 700px) { .欄組 { grid-template-columns: 1fr; } }
.區塊卡 {
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  padding: var(--s-5); margin-bottom: var(--s-3); background: var(--bg-2);
}
.區塊卡 .頭 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.區塊卡 .頭 b { font-size: var(--f-3); font-weight: 500; }
.區塊卡 .頭 .右靠 { margin-left: auto; display: flex; gap: var(--s-1); }
.圖鈕 {
  width: 30px; height: 30px; border-radius: var(--r-1); cursor: pointer;
  background: transparent; border: 1px solid var(--line-2); color: var(--text-2);
  display: grid; place-items: center; font: inherit; font-size: var(--f-2);
}
.圖鈕:hover { color: var(--text); border-color: var(--text-3); }
.圖預覽 { max-width: 240px; border-radius: var(--r-1); margin-top: var(--s-2); }
.加區塊 { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.人列 { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: var(--s-5); margin-bottom: var(--s-2); background: var(--bg-2); }
.人列 .三欄 { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-2); align-items: end; }
@media (max-width: 700px) { .人列 .三欄 { grid-template-columns: 1fr; } }
.連結列 { display: grid; grid-template-columns: 160px 1fr auto; gap: var(--s-2); margin-top: var(--s-2); align-items: end; }
.人列 .三欄 { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-2); align-items: end; }
/* 刪除鈕與旁邊的輸入框同高、同底線：.欄 有 margin-bottom，這裡補同樣的距離 */
.人列 .三欄 > .圖鈕, .連結列 > .圖鈕 { margin-bottom: var(--s-5); height: 46px; width: 46px; border-radius: var(--r-2); }
.圖鈕 svg { width: 14px; height: 14px; display: block; }
.圖列 { display: grid; grid-template-columns: 96px 1fr auto auto; gap: var(--s-3); align-items: end; padding: var(--s-2) 0; }
.圖列 .圖預覽.小 { width: 96px; height: 64px; object-fit: cover; margin: 0 0 var(--s-5); }
.圖列 > .圖鈕 { margin-bottom: var(--s-5); height: 46px; width: 46px; border-radius: var(--r-2); }
@media (max-width: 700px) { .圖列 { grid-template-columns: 1fr 1fr; } }
.輪播.單張 .輪播鈕, .輪播.單張 .圓點列 { display: none; }
.輪播鈕 svg { display: block; }
@media (max-width: 700px) { .連結列 { grid-template-columns: 1fr; } }
/* 存檔列：黏在視窗底、靠右。不畫分隔線——底色本身就把它跟內容分開了 */
.存檔列 {
  position: sticky; bottom: 0; background: var(--bg);
  padding: var(--s-4) 0; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
  justify-content: flex-end; z-index: 5;
}
.存檔列 .狀態文字 { font-size: var(--f-3); color: var(--text-2); margin-right: auto; }

/* ── 後台共用：頁首列與分頁 ─────────────── */
/* 每一頁都用同一個頁首：標題在左，動作鈕一律在右上（新增、編輯都在這裡） */
.頁首列 { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.頁首列 h2 { font-size: var(--f-5); }
.頁首動作 { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
/* 分頁列：左邊總筆數、中間換頁與跳頁、右邊每頁幾筆 */
.分頁列 {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-4); font-size: var(--f-2); color: var(--text-2);
}
.分頁控 { display: flex; align-items: center; gap: var(--s-2); }
.分頁每頁 { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.分頁每頁 select { width: auto; padding: var(--s-1) var(--s-3); font-size: var(--f-2); }
.分頁列 .頁碼 { width: 64px; padding: var(--s-1) var(--s-2); font-size: var(--f-2); text-align: center; }

/* 選一項對話框：狀態這種可枚舉的值用點的，不讓人自己打字 */
.選項列 { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
/* 九宮格排法：三個一排，位置本身就說明它代表哪一邊（拼貼那一格的對齊在用） */
.選項列-九宮 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 240px; }
.選項鈕 {
  font: inherit; font-size: var(--f-3); cursor: pointer; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text);
}
.選項鈕:hover { border-color: var(--text-3); }
.選項鈕.選中 { background: var(--c-orange-500); border-color: var(--c-orange-500); color: var(--on-brand); }

/* 標籤挑選：既有的標籤點一下就加，不用自己記有哪些、也不用打逗號 */
.標籤選 { display: grid; gap: var(--s-3); }
.標籤列 { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; min-height: 32px; }
.標籤 {
  font: inherit; font-size: var(--f-2); cursor: pointer; padding: var(--s-1) var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text-2);
}
.標籤:hover { border-color: var(--text-3); color: var(--text); }
.標籤.選中 { background: var(--c-orange-500); border-color: var(--c-orange-500); color: var(--on-brand); }
.標籤新增 { display: flex; gap: var(--s-2); }
.標籤新增 input { flex: 1; }

/* ── 頁尾 ──────────────────────────────── */
.頁尾 { margin-top: var(--s-8); padding: var(--s-6) 0; }
.頁尾 .內 { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.頁尾 img { height: 18px; width: auto; } /* 寬版：CIS 線稿標誌 ＋ 原文字（QK STUDIO 橙良創意） */
.頁尾 .頁尾標 { display: inline-flex; }
.頁尾 .連 { display: flex; gap: 0; flex-wrap: wrap; align-items: center; }
/* 用全形直線分隔，跟官網頁尾一致 */
.頁尾 .連 a + a::before {
  content: '｜'; color: var(--line-2); margin: 0 var(--s-1);
}
.頁尾 a { color: var(--text-2); text-decoration: none; font-size: var(--f-3); }
.頁尾 a:hover { color: var(--text); }
.頁尾 .版 { margin-left: auto; font-size: var(--f-2); color: var(--text-3); }
.後台入口 { color: var(--text-3); text-decoration: none; margin-left: var(--s-3); }
.後台入口:hover { color: var(--text-2); }

/* ── 響應式 ────────────────────────────── */
@media (max-width: 900px) {
  .卡片列 { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0, 1fr) 不能寫成 1fr：grid item 的 min-width 預設是 auto，
     後台那幾張寬表格（計劃／聯絡訊息／稽核／封存）會把這一欄撐超過視窗寬，
     變成整頁橫向捲動；.捲 的 overflow-x 也就白做了 */
  .後台格 { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: var(--f-8); }
}
@media (max-width: 620px) {
  :root { --f-9: 32px; --f-8: 26px; }
  .卡片列 { grid-template-columns: 1fr; }
  .標記 img { width: 38px; height: 22px; }
  .工具列 .內 { flex-wrap: wrap; row-gap: var(--s-1); }
  .導覽 { display: none; }
  .導覽.開 {
    display: flex; flex-direction: column; gap: var(--s-3);
    position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s-4) var(--s-5);
    margin-left: 0;
  }
  .頁首 { position: relative; }
  .頁尾 .版 { margin-left: 0; }
}
@media (min-width: 621px) { .選單鈕, .僅手機 { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── 計劃頁四種版型（2026-09-02 第二版）──────────── */
.計劃頁 .副標 { font-size: var(--f-6); font-weight: 500; color: var(--text-2); margin-top: var(--s-2); line-height: 1.5; max-width: var(--文寬); }
.計劃頁 .導言 { margin: var(--s-6) 0 var(--s-4); }
.榮譽 { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.榮譽 span { border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-size: var(--f-2); color: var(--text-2); }
.資訊列 { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-3); margin: var(--s-5) 0 0; font-size: var(--f-3); }
.資訊列 dt { color: var(--text-3); }
.資訊列 dd { margin: 0; color: var(--text-2); }
.資訊列 a { color: var(--link); }
.行動列 { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }
.贊助標 { font-family: "Poppins", sans-serif; font-size: var(--f-2); letter-spacing: .08em; color: var(--text-3); margin-top: var(--s-4); }
.贊助列 { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: center; margin-top: var(--s-3); color: var(--text-2); line-height: 1.9; }
/* 40px 只夠放「只有圖記」的標誌；含字的橫式標誌（QK STUDIO 橙良創意那種）在 40px 完全看不清楚。
   改成 56px 並給寬度上限，很寬的標誌不會把整列吃掉（營運長 2026-09-05：為什麼這麼小）。 */
/* 2026-09-06 再放大：56px 他還是覺得小。
   🔴 max-width 才是真正的限制：很寬的標誌（含字的橫式）會先撞到寬度上限，
   高度就被壓下去——只調 height 沒有用，兩個要一起放。 */
/* 🔴 真正決定大小的是 max-width，不是 height：
   高度 72px 只有「不太寬的標誌」碰得到；很寬的橫式標誌會先撞到寬度上限，
   高度就被 contain 壓下來。所以要調大小是調這個值。
   230px：QK 那張是 12.7:1 的細長文字標，230/12.7 ≈ 18px 高，字面約 16px，
   跟旁邊的名字（14px）差不多大——營運長 2026-09-08：「太大了，希望可以跟其他名字差不多大」。
   ⚠️ 只影響比 3:1 更寬的標誌；一般接近方形的標誌照舊由 height 72px 決定，沒有變小。
   ⚠️ 素材要先裁掉留白再上傳，不然是留白在吃高度（見 匯入.gs 的 執行_換贊助標誌）。 */
.贊助列 img { height: 72px; width: auto; max-width: 230px; object-fit: contain; }
/* 標誌在左、名稱在右，同一行——要跟上面的合作單位／指導單位排法一致
   （那些是 .單位名單，名稱就是一行文字）。
   🔴 2026-09-05 我第一版做成上下堆疊，跟同一頁其他名單完全不同調，營運長當場退回。
   加東西之前要先看隔壁那幾段現在長什麼樣，不要自己決定一種新排法。 */
.贊助項 { display: inline-flex; align-items: center; gap: var(--s-2); }
.贊助名 { color: inherit; }
.贊助列 a { color: var(--link); text-decoration: none; }

/* 大圖在上 */
.版型-hero .首屏-大圖 { margin-top: var(--s-5); }
.版型-hero .首屏-大圖 img { width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r-3); display: block; }
.版型-hero .首屏-下 { display: grid; grid-template-columns: 1fr auto; gap: var(--s-7); align-items: start; padding: var(--s-6) 0 var(--s-4); }
.版型-hero .首屏-下 .資訊列 { margin-top: var(--s-3); min-width: 220px; }
@media (max-width: 800px) { .版型-hero .首屏-下 { grid-template-columns: 1fr; gap: var(--s-4); } }

/* 海報式：品牌色底、置中大標 */
.海報 { margin-top: var(--s-5); border-radius: var(--r-3); padding: var(--s-8) var(--s-6); text-align: center; color: var(--on-brand); }
.海報 .編號 { color: rgba(28, 28, 28, .9); }
.海報 h1 { color: inherit; }
.海報 .副標 { color: rgba(28, 28, 28, .9); }
.海報 .榮譽 { justify-content: center; }
.海報 .榮譽 span { border-color: rgba(28, 28, 28, .35); color: inherit; }
.海報 .資訊列 { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) 0; }
.海報 .資訊列 dt { display: inline; color: rgba(28, 28, 28, .6); margin-right: var(--s-2); }
.海報 .資訊列 dd { display: inline; color: inherit; margin-right: var(--s-6); }
.海報 .資訊列 dd:last-child { margin-right: 0; }
.海報 .資訊列 a { color: inherit; text-decoration: none; }
/* 手機沒空間排成一行：回到「標籤｜值」兩欄格，標籤與值一定同一列 */
@media (max-width: 800px) {
  .海報 .資訊列 { display: grid; grid-template-columns: max-content 1fr; justify-content: center; text-align: left; gap: var(--s-2) var(--s-3); }
  .海報 .資訊列 dt, .海報 .資訊列 dd { display: block; margin-right: 0; }
}
.海報 .行動列 { justify-content: center; }
.海報 .鈕-主 { background: var(--c-ink); color: var(--c-white); }
.海報 .鈕-次 { color: inherit; border-color: rgba(28, 28, 28, .4); }
.海報.色-1 { background: var(--c-ocean-500); } .海報.色-2 { background: var(--c-orange-500); }
.海報.色-3 { background: var(--c-sky-500); } .海報.色-4 { background: var(--c-yellow-500); } .海報.色-5 { background: var(--c-green-500); }
.海報圖 { margin-top: var(--s-5); }
.海報圖 img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--r-3); display: block; }

/* 側欄資訊：左欄固定、右欄長文 */
.側版-頭 { padding: var(--s-6) 0 0; }
.側版-圖 { margin-top: var(--s-5); }
/* 側欄封面：原本 max-height:none，直式或方形的圖會撐到近千 px 高。改成跟其他版型一樣有上限，
   要裁切還是要完整顯示由該篇的「封面顯示方式」決定（見 .封面-填滿／.封面-完整）。 */
.側版-圖 img { width: 100%; max-height: 460px; border-radius: var(--r-3); display: block; }
.側版-圖 { margin-top: var(--s-5); }
.側版-頭 { padding-top: var(--s-6); }
.側版 { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); margin-top: var(--s-6); align-items: start; }
.側資訊 { position: sticky; top: var(--s-5); display: grid; gap: var(--s-4); }
.側資訊 .資訊列 { margin: 0; }
.側資訊 .行動列 { margin: 0; }
.側資訊 .行動列 .鈕 { width: 100%; }
.側資訊 .區塊 { margin-top: var(--s-3); }
.側版-主 .導言 { margin-top: 0; }
@media (max-width: 900px) { .側版 { grid-template-columns: 1fr; } .側資訊 { position: static; } }

/* ── Google AdSense 版位：沒填發布商 ID 不畫；未同意廣告時 hidden；沒有廣告可投時整塊收起，不留空框 ── */
.廣告版位 { margin-top: var(--s-6); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); padding: var(--s-5); display: grid; gap: var(--s-2); }
.廣告版位 .廣告標 { font-size: var(--f-1); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.廣告版位 ins { display: block; min-height: 90px; }
.廣告版位-直 ins { min-height: 250px; }
.側資訊 .廣告版位 { margin-top: 0; }
.廣告版位:has(ins[data-ad-status="unfilled"]) { display: none; }
.廣告版位-自家 a { display: block; }
.廣告版位-自家 img { display: block; width: 100%; height: auto; border-radius: var(--r-1); }
.廣告版位-直.廣告版位-自家 img { max-height: 420px; object-fit: contain; }
.提示 ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.提示 li + li { margin-top: var(--s-1); }

.預覽提示 { text-align: center; padding: var(--s-2) var(--s-4); background: var(--c-yellow-500); color: var(--on-brand); font-size: var(--f-3); }

/* ── 編輯器第二版：左表單、右側固定「插入區塊＋預覽」 ── */
.編輯格 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-6); align-items: start; }
.編輯側 { position: sticky; top: var(--s-4); display: grid; gap: var(--s-4); max-height: calc(100vh - var(--s-6)); }
.區塊選單, .預覽框 { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); padding: var(--s-5); }
.選單標 { font-size: var(--f-3); font-weight: 600; margin-bottom: var(--s-1); }
.區塊選單 .加區塊 { margin-top: var(--s-2); }
.預覽框 { display: grid; gap: var(--s-3); min-height: 0; }
.預覽頭 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.預覽視窗 { overflow: auto; max-height: 56vh; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--bg); }
.預覽內 { width: 1180px; transform: scale(.22); transform-origin: 0 0; pointer-events: auto; }
.預覽內 .計劃頁 { padding: var(--s-4) 0 var(--s-6); }
.預覽內 [data-區塊索引] { cursor: pointer; outline: 3px solid transparent; outline-offset: 6px; transition: outline-color .15s; }
.預覽內 .預覽-選中 { outline-color: var(--c-orange-500); }
.預覽內 a { pointer-events: none; }
.區塊卡.選中 { border-color: var(--c-orange-500); box-shadow: 0 0 0 1px var(--c-orange-500); }
.區塊卡 { cursor: default; }
.欄組.三 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .編輯格 { grid-template-columns: 1fr; } .編輯側 { position: static; max-height: none; } .預覽視窗 { max-height: 60vh; } }
@media (max-width: 700px) { .欄組.三 { grid-template-columns: 1fr; } }

/* 版型選擇卡：不露原生 radio，有圖示、名稱與說明 */
.版型選 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-5); }
.版型卡 { font: inherit; text-align: left; cursor: pointer; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-2); padding: var(--s-3); display: grid; gap: var(--s-2); }
.版型卡 b { font-size: var(--f-3); }
.版型卡 small { font-size: var(--f-2); color: var(--text-2); line-height: 1.5; }
.版型卡.選中 { border-color: var(--c-orange-500); box-shadow: 0 0 0 1px var(--c-orange-500); }
.版型圖 { display: block; height: 56px; border-radius: var(--r-1); background: var(--bg-2); position: relative; overflow: hidden; }
.版型圖::before, .版型圖::after { content: ""; position: absolute; background: var(--line-2); border-radius: 3px; }
.版型圖-hero::before { left: 8px; right: 8px; top: 6px; height: 24px; }
.版型圖-hero::after { left: 8px; width: 40%; top: 36px; height: 8px; }
.版型圖-split::before { left: 8px; width: 40%; top: 14px; height: 8px; }
.版型圖-split::after { right: 8px; width: 42%; top: 6px; height: 44px; }
.版型圖-poster::before { left: 8px; right: 8px; top: 6px; height: 44px; background: var(--c-orange-500); opacity: .7; }
.版型圖-poster::after { left: 30%; right: 30%; top: 22px; height: 10px; background: var(--c-ink); }
.版型圖-sidebar::before { left: 8px; right: 8px; top: 6px; height: 22px; }
.版型圖-sidebar::after { left: 8px; width: 24%; top: 34px; height: 16px; }
/* AI 專用：左邊短短的說明、右邊一整條 Prompt 框（跟 split 的右邊是圖不一樣，要看得出差別） */
.版型圖-ai::before { left: 8px; width: 36%; top: 12px; height: 8px; }
.版型圖-ai::after { right: 8px; width: 44%; top: 6px; bottom: 6px; background: transparent; border: 1px solid var(--line); }
@media (max-width: 800px) { .版型選 { grid-template-columns: repeat(2, 1fr); } }
/* 落版範例：線稿 SVG，顏色全走 token；新增第一步用大卡，表單內選了哪個版型就在下方放大顯示 */
.版型選-大 { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.版型選-大 .版型卡 { padding: var(--s-4); gap: var(--s-3); }
.版型範例 { background: var(--bg-2); border-radius: var(--r-1); overflow: hidden; }
.版型範例 svg { display: block; width: 100%; height: auto; }
.範-圖 { fill: var(--line-2); }
.範-文 { fill: var(--text-3); }
.範-標 { fill: var(--text); }
.範-鈕 { fill: var(--c-orange-500); }
.範-鈕淡 { fill: rgba(28, 28, 28, .25); }
.範-色 { fill: var(--c-orange-500); }
.範-墨 { fill: var(--c-ink); }
.範-框 { fill: none; stroke: var(--line-2); stroke-width: 1; }
.範-字 { fill: var(--text-2); font-size: 8.5px; font-family: inherit; }
.範-字墨 { fill: rgba(28, 28, 28, .9); }
.版型範例區 { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: var(--s-4); align-items: center; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); padding: var(--s-3); margin-bottom: var(--s-5); }
.版型範例說 b { display: block; font-size: var(--f-4); margin-bottom: var(--s-1); }
.版型範例說 p { font-size: var(--f-3); color: var(--text-2); line-height: 1.6; }
@media (max-width: 700px) { .版型選-大 { grid-template-columns: 1fr; } .版型範例區 { grid-template-columns: 1fr; } }
.人列 .三欄.欄數3 { grid-template-columns: 1fr 1fr auto; }
.人列 .三欄.欄數1 { grid-template-columns: 1fr; }
.人列 .三欄 + .三欄 { margin-top: var(--s-2); }
.人列 .三欄.欄數2 { grid-template-columns: 1fr auto; }

/* 系列 badge：卡片右上與內頁標題上方；膠囊、四邊框、不用單邊色條 */
.卡頂 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-1); }
.卡 .卡頂 .編號 { margin-bottom: 0; }
.系列籤 { display: inline-block; font-size: var(--f-1); letter-spacing: .04em; padding: 2px var(--s-2); border-radius: var(--r-pill); border: 1px solid rgba(28, 28, 28, .35); color: rgba(28, 28, 28, .92); text-decoration: none; white-space: nowrap; }
.計劃頁 .計劃頭 .系列籤 { border-color: var(--line-2); color: var(--text-2); margin-bottom: var(--s-3); }
.計劃頁 .計劃頭 a.系列籤:hover { color: var(--text); border-color: var(--text-3); }
.海報 .系列籤 { border-color: rgba(28, 28, 28, .35); color: rgba(28, 28, 28, .92); }
.計劃頁 .卡片列 { padding-bottom: 0; }

/* ═══ 工作區 A：編輯器與後台（2026-09-02 第三輪）═══ */
/* [A-起] */
/* 所屬系列：下拉與「新增系列」同一列，展開的建立表單一列最多兩個輸入欄 */
.系列列 { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.系列列 select { flex: 1; min-width: 0; }
.新系列 { margin-top: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.新系列 .欄 { margin-bottom: var(--s-3); }
.新系列 .鈕列 { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.新系列 .錯 { color: var(--c-orange-500); font-size: var(--f-2); margin-top: var(--s-2); }
/* AI 分享表單：內容框要夠高才貼得下整段 prompt */
.分享表單 { max-width: 820px; }
.分享表單 .分享內容 { min-height: 260px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
/* 兩種版型的選取卡：手機一欄 */
.版型選.版型選-二 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .版型選.版型選-二 { grid-template-columns: 1fr; } }
/* 後台表格：窄螢幕改成在 .捲 內橫向捲動，不要逐字換行 */
.捲 .表 { min-width: 560px; }
/* [A-終] */

/* ═══ 工作區 B：公開頁、首頁 landing、計劃列表頁（2026-09-02 第三輪）═══ */
/* [B-起] */

/* ── 品牌色色塊（拼貼、精選、做法卡、CTA 共用）────────── */
.色塊 {
  display: flex; flex-direction: column; gap: var(--s-2);
  border-radius: var(--r-3); padding: var(--s-4) var(--s-5);
  background: var(--c-orange-500); color: var(--on-brand);
}
.色塊.色-1 { background: var(--c-ocean-500); }
.色塊.色-2 { background: var(--c-orange-500); }
.色塊.色-3 { background: var(--c-sky-500); }
.色塊.色-4 { background: var(--c-yellow-500); }
.色塊.色-5 { background: var(--c-green-500); }
/* 淺色主題沿用卡片的做法：高彩度整片在白底上太搶，換同色系淡階（文字仍是深墨） */
:root[data-theme="light"] .色塊.色-1 { background: var(--c-ocean-200); }
:root[data-theme="light"] .色塊.色-2 { background: var(--c-orange-200); }
:root[data-theme="light"] .色塊.色-3 { background: var(--c-sky-300); }
:root[data-theme="light"] .色塊.色-4 { background: var(--c-yellow-300); }
:root[data-theme="light"] .色塊.色-5 { background: var(--c-ocean-100); }
.色塊 .線稿 { color: inherit; margin-top: 0; }
.色塊 .塊句 { margin-top: auto; font-size: var(--f-3); font-weight: 600; color: inherit; }
.色塊 h2, .色塊 h3, .色塊 p { color: inherit; }
.色塊 .鈕-主 { background: var(--c-ink); color: var(--c-white); }
.色塊 a { color: inherit; }

/* ── 首頁 landing：段落骨架 ────────────────── */
main > .首段 { padding-top: var(--s-8); padding-bottom: 0; }
main > .首段:last-child { padding-bottom: var(--s-8); }
.段標 { font-size: var(--f-7); font-weight: 700; line-height: 1.3; letter-spacing: -.4px; }

/* Hero：左文字、右拼貼 */
.主視覺 .格 { align-items: center; }
.首文 .說明 { margin-top: var(--s-4); }
.首鈕列 { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }
.首拼貼 {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, 46px); gap: var(--s-3);
}
.首拼貼 .拼塊 { min-height: 0; overflow: hidden; }
.首拼貼 .拼位-1 { grid-column: 1; grid-row: 1 / 4; }
.首拼貼 .拼位-2 { grid-column: 2; grid-row: 1 / 3; }
.首拼貼 .拼位-3 { grid-column: 2; grid-row: 3 / 6; }
.首拼貼 .拼位-4 { grid-column: 1; grid-row: 4 / 6; }
/* 塊數不足時把版面填滿，不留半格空洞 */
.首拼貼[data-塊數="3"] .拼位-1 { grid-row: 1 / 6; }
.首拼貼[data-塊數="2"] .拼位-1 { grid-row: 1 / 6; }
.首拼貼[data-塊數="2"] .拼位-2 { grid-row: 1 / 6; }
.首拼貼[data-塊數="1"] .拼位-1 { grid-column: 1 / -1; grid-row: 1 / 6; }
.首拼貼 .色塊 { padding: var(--s-3) var(--s-4); }
.首拼貼 .線稿 svg { height: 26px; }
.首拼貼 .塊句 {
  font-size: var(--f-2); line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.拼圖 { border-radius: var(--r-3); overflow: hidden; background: var(--bg-2); }
.拼圖 img { width: 100%; height: 100%; object-fit: cover; }

/* 精選計劃：一列一篇，左圖右文與右圖左文交替 */
.精選列 { display: grid; gap: var(--s-7); margin-top: var(--s-5); }
.精選項 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6); align-items: center;
}
.精選項 .精選圖 { border-radius: var(--r-3); overflow: hidden; aspect-ratio: 16 / 9; }
.精選項 .精選圖 img { width: 100%; height: 100%; object-fit: cover; }
.精選項.圖在右 .精選圖 { order: 2; }
.精選文 h3, .精選文 h2 { font-size: var(--f-7); font-weight: 700; line-height: 1.3; margin-top: var(--s-2); }
.精選摘 { color: var(--text-2); margin-top: var(--s-3); max-width: 46ch; }
.精選註 { color: var(--text-3); font-size: var(--f-3); margin-top: var(--s-2); }
.更多 {
  display: inline-block; margin-top: var(--s-4);
  font-size: var(--f-3); font-weight: 500; color: var(--link); text-decoration: none;
}
.更多:hover { text-decoration: none; }

/* 我們怎麼做實驗：四個品牌色各一塊 */
.做法組 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.做法卡 { min-height: 210px; }
.做法卡 h3 { font-size: var(--f-5); font-weight: 700; margin-top: var(--s-3); }
.做法卡 p { font-size: var(--f-3); line-height: 1.6; }

/* 首頁 AI 分享：橫排三張 */
.分享列-三 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 一起做過的夥伴／計劃頁合作單位：一行排開的名單 */
/* 名單之間已經有頓號在分隔，就不要再用 flex 的 gap——那個 gap 會加在頓號「兩側」，
   看起來像三個沒關係的東西各站一邊。走正常的行內文字流，換行也交給瀏覽器。 */
.單位名單 {
  margin-top: var(--s-4); color: var(--text-2); line-height: 1.9;
}
.單位名單 a { color: var(--link); text-decoration: none; }
.單位名單 a:hover { text-decoration: none; }

/* CTA */
.首CTA {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; padding: var(--s-7) var(--s-6);
}
.首CTA h2 { font-size: var(--f-7); font-weight: 700; line-height: 1.3; }

/* 所有計劃列表頁 */
.計劃列表 .卡片列 { margin-top: var(--s-5); }

/* ── 計劃頁：標題最上一列（編號＋系列 badge）────────── */
.頭頂 { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3); margin-bottom: var(--s-2); }
.頭頂:empty { display: none; }
.頭頂 .系列籤 { margin-left: auto; }
/* 參與範圍 badge（標題左上）：四邊淡框膠囊，跟系列籤同一套尺寸；公開不顯示 */
.範圍籤 { display: inline-block; font-size: var(--f-1); letter-spacing: .04em; padding: 2px var(--s-2); border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.海報 .範圍籤 { border-color: rgba(28, 28, 28, .35); color: rgba(28, 28, 28, .92); }
.計劃頁 .計劃頭 .頭頂 .編號 { margin-bottom: 0; }
.計劃頁 .計劃頭 .頭頂 .系列籤 { margin-bottom: 0; }

/* 海報式：badge 釘在海報右上角；榮譽、資訊列、行動鈕在第一張圖下方 */
.海報 { position: relative; }
.海報 .頭頂 { justify-content: center; }
.海報 .頭頂 .系列籤 { position: absolute; top: var(--s-5); right: var(--s-5); }
.海報下 { margin-top: var(--s-6); }
.海報下 .榮譽 { margin-bottom: 0; }
.海報下 .資訊列 { margin-top: var(--s-4); }

/* 文左圖右：右側封面＋色塊拼貼 */
.首屏拼 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.首屏拼 .拼圖 { grid-column: 1 / -1; }
.首屏拼 .拼圖 img { width: 100%; height: 280px; max-height: none; object-fit: cover; }
.首屏拼 .色塊 { grid-column: 1 / 2; min-height: 132px; }
.首屏拼-無圖 .色塊:first-child { grid-column: 1 / -1; min-height: 200px; }

/* ── AI 分享單篇：split 版型 ────────────────── */
.分享格 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6); align-items: start; margin-top: var(--s-5);
}
.分享右 { position: sticky; top: var(--s-5); }
.分享格 .區塊:first-child { margin-top: 0; }
.分享底 .授權徽章 { display: inline-flex; margin-bottom: 0; margin-right: var(--s-2); vertical-align: -.55em; }
.分享底 .授權徽章 svg { width: 24px; height: 24px; }

/* ── 響應式 ────────────────────────────── */
@media (max-width: 1024px) {
  .分享列-三 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .分享格 { grid-template-columns: 1fr; gap: var(--s-5); }
  .分享右 { position: static; }
}
@media (max-width: 800px) {
  .精選項 { grid-template-columns: 1fr; gap: var(--s-4); }
  .精選項.圖在右 .精選圖 { order: 0; }
  .做法組 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .分享列-三 { grid-template-columns: 1fr; }
  .首屏拼 .拼圖 img { height: 220px; }
}
@media (max-width: 620px) {
  main > .首段 { padding-top: var(--s-7); }
  .做法組 { grid-template-columns: 1fr; }
  .做法卡 { min-height: 0; }
  .首CTA { padding: var(--s-6) var(--s-5); }
  .首拼貼 { grid-template-rows: repeat(5, 38px); gap: var(--s-2); }
  .首拼貼 .色塊 { padding: var(--s-2) var(--s-3); }
  .首屏拼 { gap: var(--s-2); }
  .首屏拼 .拼圖 img { height: 190px; }
  .首屏拼 .色塊 { min-height: 108px; grid-column: 1 / -1; }
  .海報 .頭頂 .系列籤 { top: var(--s-4); right: var(--s-4); }
  .精選文 h3, .精選文 h2, .首CTA h2, .段標 { font-size: var(--f-6); }
}
/* 專案圖牆：四格封面、不放字、整格可點 */
.圖牆 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.圖牆-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.圖牆-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.圖牆-1 { grid-template-columns: 1fr; }
.圖牆格 { display: block; border-radius: var(--r-3); overflow: hidden; background: var(--surface); aspect-ratio: 4 / 3; }
.圖牆格 img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 官網標語：整塊連到官網 */
.官網標語 { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding: var(--s-6) 0; color: var(--text); text-decoration: none; }
.官網標語 .標語 { font-family: "Poppins", sans-serif; font-weight: 300; font-size: clamp(28px, 4vw, 46px); /* qk-allow: 顯示字級，隨視窗縮放（同 hero 標語處理） */ line-height: 1.25; letter-spacing: -.01em; color: var(--text); }
.官網標語 .標語 em { font-style: italic; font-weight: 600; color: var(--c-yellow-500); }
.官網標語 .插畫 { width: 160px; height: 128px; }
/* 品牌插畫點綴 */
.插畫 { display: block; }
.插畫 svg { width: 100%; height: 100%; display: block; }
.拼塊.色塊 { position: relative; }
.拼塊.色塊 .插畫 { position: absolute; right: 10px; bottom: 10px; width: 60px; height: 48px; pointer-events: none; }
.拼塊.色塊 .塊句 { padding-right: 64px; }
@media (max-width: 800px) {
  .圖牆, .圖牆-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .官網標語 { grid-template-columns: 1fr; padding: var(--s-5) 0; }
  .官網標語 .插畫 { width: 120px; height: 96px; justify-self: end; }
}
/* 段落尺度：像一般網頁「滑一下就到下一段」——Hero 撐滿第一屏，其餘段落以視窗高度的比例留白 */
main > .主視覺 { min-height: calc(100dvh - 128px); display: flex; align-items: center; padding-top: var(--s-6); padding-bottom: var(--s-8); }
main > .主視覺 .格 { width: 100%; gap: var(--s-8); }
.首拼貼 { grid-template-rows: repeat(5, 72px); }
main > .首段 { padding-top: clamp(96px, 14vh, 160px); }
.精選列 { gap: clamp(80px, 12vh, 136px); }
.精選項 { align-items: center; }
.精選項 .精選圖 { aspect-ratio: 3 / 2; }
.精選文 h3, .精選文 h2 { font-size: var(--f-8); }
.官網標語 { padding: clamp(56px, 10vh, 112px) 0; }
main > .首段:last-child { padding-bottom: clamp(96px, 14vh, 160px); }
@media (max-width: 800px) {
  main > .主視覺 { min-height: 0; display: block; padding-bottom: var(--s-7); }
  .首拼貼 { grid-template-rows: repeat(5, 46px); }
  main > .首段 { padding-top: var(--s-8); }
  .精選列 { gap: var(--s-8); }
  .精選文 h3, .精選文 h2 { font-size: var(--f-6); }
  .官網標語 { padding: var(--s-7) 0; }
  main > .首段:last-child { padding-bottom: var(--s-8); }
}
.首頁AI .段標.置中 { text-align: center; }
.首頁AI .分享列-三 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; gap: var(--s-5); margin-top: var(--s-6); }
.首頁AI .更多列 { text-align: center; margin-top: var(--s-6); }
@media (max-width: 800px) { .首頁AI .分享列-三 { grid-template-columns: 1fr; } }
/* 海報式在淺色主題改同色系淡階（與 .色塊 一致），字仍為深墨 */
:root[data-theme="light"] .海報.色-1 { background: var(--c-ocean-200); }
:root[data-theme="light"] .海報.色-2 { background: var(--c-orange-200); }
:root[data-theme="light"] .海報.色-3 { background: var(--c-sky-300); }
:root[data-theme="light"] .海報.色-4 { background: var(--c-yellow-300); }
:root[data-theme="light"] .海報.色-5 { background: var(--c-ocean-100); }
/* 段落再放大（營運長：全部都要加大區段）；只有標語到頁尾的距離收短 */
main > .首段 { padding-top: clamp(128px, 20vh, 224px); }
.精選列 { gap: clamp(128px, 20vh, 224px); }
.精選項 { gap: var(--s-8); }
.精選項 .精選圖 { aspect-ratio: 4 / 3; }
.精選文 p { font-size: var(--f-5); line-height: 1.7; }
.首頁AI .分享列-三 { margin-top: var(--s-7); }
.官網標語 { padding: clamp(96px, 16vh, 176px) 0 var(--s-6); }
main > .首段:last-child { padding-bottom: var(--s-6); }
@media (max-width: 800px) {
  main > .首段 { padding-top: var(--s-8); }
  .精選列 { gap: var(--s-8); }
  .精選項 { gap: var(--s-5); }
  .官網標語 { padding: var(--s-8) 0 var(--s-5); }
  main > .首段:last-child { padding-bottom: var(--s-5); }
}
.段首 { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.段標-大 { font-size: var(--f-9); line-height: 1.15; letter-spacing: -1px; }
.段副 { font-size: var(--f-5); line-height: 1.7; color: var(--text-2); max-width: 44ch; text-wrap: balance; }
.首頁AI .分享列-三 { margin-top: 0; }
@media (max-width: 800px) { .段標-大 { font-size: var(--f-7); } .段副 { font-size: var(--f-4); } .首頁AI .分享列-三 { margin-top: var(--s-6); } }
/* 頁首一列：桌機把「中文｜主題」工具列疊到標誌那一列的右側；手機維持兩列 */
@media (min-width: 621px) {
  /* 工具列留在正常文件流（高度 0、內容溢出疊在頁首那一列上），所以新版提示列出現時會一起往下推；
     整條不吃點擊，只有按鈕本身可點，才不會蓋住下面的東西 */
  .工具列 { position: relative; z-index: 5; height: 0; overflow: visible; pointer-events: none; }
  .工具列 .內 { padding-top: var(--s-2); padding-bottom: var(--s-2); min-height: calc(42px + var(--s-2) * 2); box-sizing: border-box; pointer-events: none; }
  .工具列 .內 > * { pointer-events: auto; }
  .頁首 .內 { padding-right: 360px; }
  main > .主視覺 { min-height: calc(100dvh - 80px); }
}
/* 每個區段都像 Hero 一樣佔滿一屏、內容垂直置中（桌機）；標語段例外，貼近頁尾 */
@media (min-width: 801px) {
  /* 圖牆、AI 標題、AI 卡片：依內容高度，上下各留一段呼吸；只有精選項目才佔一屏 */
  main > .首段 { min-height: 0; display: block; padding-top: clamp(72px, 10vh, 112px); padding-bottom: clamp(72px, 10vh, 112px); }
  main > .首段:has(.分享列-三) { padding-top: var(--s-6); }
  main > .首段:has(.圖牆) { padding-top: clamp(120px, 17vh, 184px); padding-bottom: clamp(120px, 17vh, 184px); }
  .精選列 { gap: 0; }
  .精選項 { min-height: clamp(520px, 78dvh, 720px); align-items: center; }
  main > .首段:has(.精選列) { display: block; min-height: 0; padding-top: 0; padding-bottom: 0; }
  /* 標語段：上下留白相等，標語本身不再另加內距 */
  main > .首段:has(.官網標語) { min-height: 0; padding-top: clamp(96px, 14vh, 160px); padding-bottom: clamp(96px, 14vh, 160px); }
  main > .首段:has(.官網標語) .官網標語 { padding: 0; display: flex; justify-content: center; align-items: center; gap: var(--s-8); }
}
/* 精選的「了解更多」改成線稿箭頭圓鈕 */
.更多-箭 { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--link); margin-top: var(--s-3); transition: transform .15s; }
.更多-箭 svg { display: block; width: 22px; height: 16px; }
.更多-箭:hover, .更多-箭:focus-visible { text-decoration: none; transform: translateX(4px); }
a.拼塊 { display: block; color: inherit; text-decoration: none; }
a.拼塊.色塊 { display: flex; }
/* 文章型頁面（關於、三份政策）：標題貼近內文、段落有呼吸、清單不出血 */
.版心 > .區塊 > h2:not(.節標) { margin-bottom: var(--s-2); }
.政策 h1 { margin-bottom: var(--s-5); }
.政策 h2.區塊 { margin-top: var(--s-5); margin-bottom: var(--s-2); font-size: var(--f-6); }
/* text-wrap: pretty 已拿掉，原因見檔案後段「內容裡的換行是有意義的」那一段（Safari 會把每一行都縮短）。
   關於與三份政策也是中文長段落，同一個毛病，一起拿掉。 */
.政策 p, .政策 .條列 { color: var(--text-2); line-height: 1.8; max-width: none; }
.政策 p + p { margin-top: var(--s-3); }
.政策 .條列 { margin-top: var(--s-2); padding-left: 1.4em; }
.政策 .鈕列 { margin-top: var(--s-5); }
.政策 .更新註 { margin-top: var(--s-7); margin-bottom: 0; }
/* 全站連結不加底線（含 hover）；圖片一律圓角 */
a, a:hover { text-decoration: none; }
main img { border-radius: var(--r-2); }
.首屏拼 .拼圖 img { width: 100%; height: auto; max-height: none; object-fit: cover; }
/* 精選項整塊可點：文字顏色照原樣，hover 時箭頭前進、圖片微放大 */
a.精選項 { color: inherit; text-decoration: none; }
a.精選項 .精選圖 { overflow: hidden; border-radius: var(--r-3); }
a.精選項:hover .更多-箭, a.精選項:focus-visible .更多-箭 { transform: translateX(4px); }
a.精選項:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 6px; border-radius: var(--r-3); }
/* [B-終] */
/* 頂欄（工具列＋頁首＋新版提示列）固定在最上面；高度由程式量進 --頂欄高，side sticky 與錨點捲動據此避開 */
.頂欄 { position: sticky; top: 0; z-index: 70; background: var(--bg); }
.頂欄.頂欄-捲 { box-shadow: 0 1px 0 var(--line); }
html { scroll-padding-top: calc(var(--頂欄高, 80px) + var(--s-3)); }
.側資訊, .分享右 { top: calc(var(--頂欄高, 80px) + var(--s-5)); }
.編輯側 { top: calc(var(--頂欄高, 80px) + var(--s-4)); max-height: calc(100vh - var(--頂欄高, 80px) - var(--s-6)); }
/* 計劃頁的內容圖都可以點開放大（營運長 2026-09-08）。
   zoom-in 就是放大鏡游標，不另外畫一顆圖示疊在圖上——那會擋住圖本身。
   手機沒有游標，但點得到；鍵盤可以 Tab 到、Enter 打開（img 有 role=button）。 */
/* 授權方案的中文全名：接在符號與代號底下的一行小字 */
.授權全名 { margin-top: var(--s-1); }

img.可放大 { cursor: zoom-in; }
img.可放大:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; }

/* 圖組：每張圖是按鈕，點了開燈箱 */
.圖組鈕 { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-2); overflow: hidden; }
.圖組鈕:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 3px; }
.圖組鈕 img { display: block; }
/* 燈箱：整幅置中，按鈕貼視窗邊，計數在底部 */
.鎖捲 { overflow: hidden; }
.罩.燈箱 { background: rgba(0, 0, 0, .88); padding: var(--s-6); cursor: zoom-out; }
.燈箱圖 { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; }
.燈箱圖 img { max-width: min(100%, 1400px); max-height: calc(100dvh - var(--s-8) * 2); width: auto; height: auto; object-fit: contain; border-radius: var(--r-2); cursor: default; }
.燈箱 .輪播鈕 { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; cursor: pointer; background: none; border: 0; color: var(--c-white); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.燈箱 .輪播鈕 svg { width: 28px; height: 28px; }
.燈箱 .輪播鈕:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; border-radius: var(--r-1); }
.燈箱 .輪播鈕.左 { left: var(--s-4); }
.燈箱 .輪播鈕.右 { right: var(--s-4); }
.燈箱 .燈箱關 { top: var(--s-4); right: var(--s-4); transform: none; }
.燈箱計 { position: fixed; left: 0; right: 0; bottom: var(--s-4); text-align: center; color: var(--c-white); font-size: var(--f-3); margin: 0; }
@media (max-width: 620px) {
  .罩.燈箱 { padding: var(--s-4); }
  .燈箱 .輪播鈕.左 { left: var(--s-2); } .燈箱 .輪播鈕.右 { right: var(--s-2); }
}
/* 區塊副標：緊貼標題，內容再接在下面 */
.內文 .節副 { color: var(--text-2); font-size: var(--f-4); }
.內文 > .節標 + .節副 { margin-top: var(--s-1); }
.內文 > .節副 + * { margin-top: var(--s-3); }
/* 頁底名單區（計劃團隊／合作／贊助／感謝）：標題小一級、緊貼名單，區與區靠近 */
.尾區 h2.節標 { font-size: var(--f-5); font-weight: 600; padding-top: 0; margin-bottom: var(--s-1); }
.尾區 .贊助列, .尾區 .單位名單 { margin-top: var(--s-1); }
.尾區 + .尾區 { margin-top: var(--s-4); }
/* 區段空白處放插畫：段首左右各一幅，只在桌機有空間時出現 */
.段首-插畫 { position: relative; }
.段插 { position: absolute; top: 50%; transform: translateY(-50%); width: 150px; height: 120px; pointer-events: none; }
.段插-左 { left: 0; }
.段插-右 { right: 0; }
@media (max-width: 1000px) { .段插 { display: none; } }
/* 卡片：系列 badge 固定右上、標題固定位置（有沒有編號都一樣）；箭頭改水平線稿、不加圓 */
.卡 .卡頂 { justify-content: flex-end; min-height: 26px; }
.卡 .卡頂 .編號 { margin-right: auto; }
.卡 .底 { justify-content: flex-end; }
.箭 { width: auto; height: auto; border-radius: 0; background: none; color: inherit; }
.箭 svg { width: 32px; height: 24px; }
/* 精選項右下角插畫 */
.精選插 { width: 120px; height: 96px; margin-left: auto; margin-top: var(--s-4); pointer-events: none; }
@media (max-width: 800px) { .精選插 { width: 84px; height: 68px; } }
/* 頁底名單第一節跟內容拉開 */
.尾區-首 { margin-top: var(--s-8); }
/* 計劃團隊列：社群圖示跟文字同一列置中，不再往上飄；列與列等距 */
.製作團隊 .團隊列 { align-items: center; }
.製作團隊 .社群 { margin-top: 0; align-self: center; }
.製作團隊 .社群 a { min-height: 0; }
/* 圖牆左右箭頭：純線稿，桌機放在圖牆兩側，手機疊在圖上 */
.圖牆輪 { position: relative; }
.圖牆鈕 { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0; }
.圖牆鈕 svg { width: 24px; height: 24px; }
.圖牆鈕.左 { left: -48px; } .圖牆鈕.右 { right: -48px; }
.圖牆鈕:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; border-radius: var(--r-1); }
@media (max-width: 1300px) { .圖牆鈕.左 { left: var(--s-2); } .圖牆鈕.右 { right: var(--s-2); } .圖牆鈕 { color: var(--c-white); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } }
/* 內文裡的連結區塊是按鈕，不限寬 */
.內文 .連結段 { max-width: none; }
/* 首頁 AI 卡固定三格：沒內容的格子只留框 */
.分享卡-空 { min-height: 180px; }
/* 最後一段（標語）撐滿一屏，捲到底時上一段不會露出來；標語在這一屏正中、上下留白相同 */
@media (min-width: 801px) {
  main > .首段:has(.官網標語) { box-sizing: border-box; min-height: calc(100dvh - var(--頂欄高, 74px) - var(--頁尾高, 85px) - var(--s-8)); display: grid; align-content: center; padding-top: clamp(72px, 10vh, 112px); padding-bottom: clamp(72px, 10vh, 112px); }
}
/* 行動呼籲：頁面最底、置中 */
.呼籲 { text-align: center; margin-top: var(--s-8); display: grid; justify-items: center; gap: var(--s-3); }
.呼籲 h2.節標 { padding-top: 0; }
.呼籲 p { color: var(--text-2); max-width: 60ch; line-height: 1.8; }
.即時數 { font-weight: 600; color: var(--text); }
/* 頁首與工具列同高，左右垂直對齊 */
@media (min-width: 621px) { .頁首 .內 { min-height: calc(42px + var(--s-2) * 2); padding-top: var(--s-2); padding-bottom: var(--s-2); } }
/* Hero 左欄底下的實驗器材插畫 */
.首鈕列 { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.首插 { width: 132px; height: 106px; margin-left: auto; align-self: center; transform: rotate(-8deg); transform-origin: 50% 80%; }
@media (max-width: 800px) { .首插 { display: none; } }
/* 廣告版位示意框 */
.廣告版位-示意 .示意框 { min-height: 90px; display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-2); background: var(--c-yellow-300); color: var(--c-ink); }
.廣告版位-示意 .示意框 .插畫 { width: 96px; height: 76px; flex: none; }
.廣告版位-示意 .示意文 { display: grid; gap: var(--s-1); justify-items: start; }
.廣告版位-示意 .示意文 b { font-size: var(--f-4); }
.廣告版位-示意 .示意文 p { font-size: var(--f-3); color: rgba(28, 28, 28, .8); }
.廣告版位-示意 .示意文 .鈕 { margin-top: var(--s-1); }
.廣告版位-直.廣告版位-示意 .示意框 { min-height: 250px; flex-direction: column; align-items: flex-start; justify-content: center; }
@media (max-width: 620px) { .廣告版位-示意 .示意框 { flex-direction: column; align-items: flex-start; } }
/* 文左圖右版型：跟首頁一樣每個區段撐開一點，圖文並排各自佔到接近一屏，段與段拉開 */
@media (min-width: 801px) {
  /* 首屏不靠滿屏置中（上下留白會隨視窗變、且版心上緣多 32px 不對稱），改成上下都用跟區塊一樣的段距 */
  .版型-split .計劃首屏 { min-height: 0; padding-top: calc(clamp(160px, 20vh, 240px) - var(--s-6)); padding-bottom: clamp(160px, 20vh, 240px); }
  /* 圖文並排段不用最小高度置中（內容多少會讓留白忽大忽小），改用一致的段距 */
  .版型-split .內文 > .分欄 { min-height: 0; }
  .版型-split .內文 > * + .分欄,
  .版型-split .內文 > .分欄 + *,
  .版型-split .內文 > .分欄 + .分欄 { margin-top: clamp(160px, 20vh, 240px); }
}
/* 檔案輸入：原生按鈕藏起來，用設計系統按鈕；鍵盤聚焦時按鈕描邊 */
.視覺隱藏 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.檔案鈕 { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.檔案鈕 label.鈕 { position: relative; cursor: pointer; margin: 0; display: inline-flex; }
/* .欄 input 的寬高與內距權重比 .視覺隱藏 高，這裡用更高權重把檔案輸入真的藏起來 */
.欄 .檔案鈕 input.視覺隱藏, .檔案鈕 input.視覺隱藏 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; opacity: 0; }
.檔案鈕 label.鈕:has(input:focus-visible) { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; }
.檔案鈕 .檔名 { font-size: var(--f-2); color: var(--text-2); }
.欄 .檔案鈕 label.鈕 { display: inline-flex; }
/* AI 應用計劃說明段落編輯器：一段一張卡 */
.說明編 { display: grid; gap: var(--s-3); }
.說明編 + .鈕列 { margin-top: var(--s-3); }
/* 列表頁搜尋與篩選 */
.篩選列 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0 var(--s-6); }
.搜尋欄 { font: inherit; font-size: var(--f-3); padding: var(--s-2) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--text); min-width: 220px; }
.搜尋欄:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; }
.篩籤組 { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.篩籤 { font: inherit; font-size: var(--f-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line-2); background: none; color: var(--text-2); cursor: pointer; min-height: 32px; }
.篩籤:hover { color: var(--text); border-color: var(--text-3); }
.篩籤[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.篩籤:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; }
.空結果 { color: var(--text-2); }
@media (max-width: 620px) { .搜尋欄 { width: 100%; } }
/* 首頁廣告段：夾在精選與圖牆之間，上下多留白 */
.首頁廣告段 { padding-top: var(--s-6); padding-bottom: 0; }
.首頁廣告段 .廣告版位 { margin-top: 0; }
/* 限時動態圖對話框 */
.鈕列-緊 { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.對話-動態 { max-width: 420px; }
.動態畫布 { display: block; width: 100%; max-width: 270px; height: auto; margin: var(--s-4) auto 0; border-radius: var(--r-2); border: 1px solid var(--line); }
/* 首頁：Hero 撐滿第一屏；精選項每一項同高，項與項的距離才會一致 */
@media (min-width: 801px) {
  main > .主視覺 { min-height: calc(100dvh - var(--頂欄高, 58px)); }
}
/* 編輯器：中文欄位底下的 English 收合欄 */
.英折 { margin-top: 2px; text-align: right; }
.英折 > summary { cursor: pointer; font-size: var(--f-1); color: var(--text-3); letter-spacing: .04em; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.英折 > summary::-webkit-details-marker { display: none; }
/* 箭頭拿掉（營運長 2026-09-05）；展開與否看底下有沒有輸入框就知道 */
.英折 > input, .英折 > textarea { margin-top: var(--s-1); text-align: left; }
/* 時間軸（橫向插畫式）：亮藍橫線從頭開始、尾端單邊箭頭與線同一支點；節點不畫點、只有一段與線同粗的短黃線上下交替 */
.時間軸 { list-style: none; padding: 0; margin: 0; position: relative; min-height: 380px; }
.時間軸::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--c-sky-500); }
.時間軸::after { content: ''; position: absolute; right: 0; top: 50%; width: 28px; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--c-sky-500); transform-origin: right center; transform: rotate(40deg); }
.時間軸 li { position: absolute; top: 0; bottom: 0; width: 300px; transform: translateX(-50%); }
.時間軸 li.首 { transform: none; }
/* 節點不畫點：只有一段不碰到線的短黃線 */
.時間軸 .軸點 { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.時間軸 li.首 .軸點 { left: 2px; }
.時間軸 .軸點::before { content: ''; position: absolute; left: -3px; width: 6px; height: 18px; background: var(--c-yellow-500); border-radius: 3px; }
.時間軸 li.上 .軸點::before { bottom: 12px; }
.時間軸 li.下 .軸點::before { top: 12px; }
.時間軸 .軸文 { position: absolute; left: 0; right: 0; text-align: center; }
.時間軸 li.首 .軸文 { text-align: left; }
.時間軸 li.上 .軸文 { bottom: calc(50% + 42px); }
.時間軸 li.下 .軸文 { top: calc(50% + 42px); }
.時間軸 .軸日 { display: block; font-family: "Poppins", sans-serif; font-size: var(--f-3); color: var(--c-ocean-700); letter-spacing: .04em; margin-bottom: var(--s-1); }
:root:not([data-theme="light"]) .時間軸 .軸日 { color: var(--c-sky-500); }
.時間軸 .軸文 b { display: block; font-size: var(--f-4); color: var(--text); margin-bottom: var(--s-1); }
.時間軸 .軸文 p { color: var(--text-2); line-height: 1.6; font-size: var(--f-3); }
@media (max-width: 720px) {
  .時間軸 { min-height: 0; padding-left: 28px; }
  .時間軸::before { left: 8px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; margin: 0; }
  .時間軸::after { display: none; }
  .時間軸 li, .時間軸 li.首 { position: static; width: auto; transform: none; padding: 0 0 var(--s-5); left: auto !important; }
  .時間軸 .軸點, .時間軸 li.首 .軸點 { display: none; }
  .時間軸 .軸文, .時間軸 li.上 .軸文, .時間軸 li.下 .軸文, .時間軸 li.首 .軸文 { position: static; text-align: left; }
  .時間軸 li { position: relative; }
  .時間軸 li::before { content: ''; position: absolute; left: -24px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-sky-500); }
}
/* 圖牆區段：夾在廣告與 AI 段之間，上下留白再拉大 */
@media (min-width: 801px) { main > .首段:has(.圖牆) { padding-top: clamp(160px, 22vh, 240px); padding-bottom: clamp(160px, 22vh, 240px); } }

/* ═══ 後台與編輯器：側欄收窄、插入區塊收密、預覽吃滿剩下的高度（2026-09-04）═══ */
/* 側欄窄一點，編輯區就寬一點。
   ★ 一定要包在 min-width: 901px 裡：上面 @media (max-width:900px) 有一條
   「.後台格 { grid-template-columns: 1fr }」讓手機收成單欄，同權重、這一條在後面，
   不包 media 就會把它蓋掉——手機因此變成 150px 側欄＋168px 內容欄，
   裡面所有卡片被壓扁、字全部黏在邊上（2026-09-05 量出來才發現）。 */
@media (min-width: 901px) {
  .後台格 { grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-5); }
}
@media (max-width: 900px) {
  .後台格 { gap: var(--s-5); }
}
/* Staff 標題與身分列靠近 */
main > .版心 > h1 + p.後台身分 { margin-top: var(--s-1); color: var(--text-2); font-size: var(--f-3); }
/* 插入區塊：說明小一級、按鈕排密，讓下面的預覽往上來 */
.區塊選單 { padding: var(--s-5); }
.區塊選單 .選單標 { margin-bottom: 0; }
.區塊選單 .授權註 { font-size: var(--f-2); color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.區塊選單 .加區塊 { gap: var(--s-1); margin-top: var(--s-2); }
.區塊選單 .加區塊 .鈕 { padding: 3px var(--s-3); font-size: var(--f-1); }
/* 預覽：側欄整支撐滿視窗高度，預覽視窗吃掉剩下的全部，不再只有 56vh 被切一半；
   底部要扣掉黏在視窗底的存檔列，否則面板下緣會被那條蓋掉（看起來像斷掉） */
.編輯格 { --存檔列高: 72px; }
.編輯側 { height: calc(100vh - var(--頂欄高, 80px) - var(--存檔列高) - var(--s-5)); grid-template-rows: auto minmax(0, 1fr); }
.預覽框 { min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.預覽視窗 { max-height: none; height: 100%; min-height: 160px; padding: var(--s-2); }
/* transform: scale 不會縮版面高度，框內會多出一大段空白捲動區；zoom 會，才是真的「縮小顯示」。
   縮到 .2 才容得下四邊的留白（1180×.2＝236px，框內約 266px）。 */
@supports (zoom: 0.5) {
  .預覽內 { transform: none; zoom: .2; width: 1180px; }
}
@media (max-width: 1100px) {
  .編輯側 { height: auto; grid-template-rows: none; }
  .預覽視窗 { height: auto; max-height: 60vh; }
}
/* 圖組每一列少了「有認得出來的人」那一欄 */
.圖列 { grid-template-columns: 96px minmax(0, 1fr) auto; }
/* 後台表格排密一點：列高由 12px 內距收成 8px，一頁看得到更多列；每格內容在該列垂直置中 */
.表 th, .表 td { padding: var(--s-2) var(--s-3); vertical-align: middle; }
.表 td .鈕列-緊 { justify-content: flex-end; }
/* 下載類動作（宣傳圖…）跟編輯類分色，之後其他下載沿用同一個樣式 */
.鈕-下載 { color: var(--link); border-color: var(--link); background: transparent; }
.鈕-下載:hover { background: var(--bg-2); }
/* 計劃頁標題上方那一列：編號在最左，badge 接著排，全部靠左不分散 */
.頭頂 .系列籤 { margin-left: 0; }
/* 計劃頁還沒有封面時，右邊用一塊灰色把位子留著（跟封面同大小、同圓角） */
.首屏拼 .拼空 { grid-column: 1 / -1; min-height: 280px; border-radius: var(--r-3); background: var(--bg-2); border: 1px solid var(--line); }
@media (max-width: 800px) { .首屏拼 .拼空 { min-height: 200px; } }

/* ═══ 永續目標標籤（自己畫的，不是聯合國官方圖示）═══
   色相沿用 17 個目標的官方色，彩度壓到 .5 以下、明度拉到 .64（跟品牌 500 階放深字時的手感一致）。
   qk-allow: 這 17 個是對應外部目標的語意色，不是介面用色，集中在這裡定義。 */
:root {
  /* 明度 .76：放深字要看得清楚（營運長：原本 .64 太深） */
  --sdg-1: #DFA5AC; --sdg-2: #DCCAA8; --sdg-3: #B7D3B0; --sdg-4: #DEA5AC; --sdg-5: #E0AAA3; --sdg-6: #A6D3DE;
  --sdg-7: #E0D2A3; --sdg-8: #DDA7B7; --sdg-9: #E0B6A3; --sdg-10: #E0A3BD; --sdg-11: #E0C5A3; --sdg-12: #D8C8AB;
  --sdg-13: #B6CEB8; --sdg-14: #A3CDE0; --sdg-15: #B8D9AB; --sdg-16: #A3CCE0; --sdg-17: #ABC5D9;
}
.永續段 { margin-top: var(--s-7); display: grid; justify-items: start; gap: var(--s-3); }
.永續段 h2.永續標 { font-size: var(--f-5); font-weight: 600; padding-top: 0; margin: 0; color: var(--text); }
.永續列 { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s-2); }
.sdg { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-2); min-height: 40px; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2); border-radius: var(--r-1); color: var(--c-ink); background: var(--line-2); text-decoration: none; transition: transform .15s; }
a.sdg:hover, a.sdg:focus-visible { transform: translateY(-2px); }
a.sdg:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; }
.sdg b { font-family: "Poppins", sans-serif; font-weight: 600; font-size: var(--f-6); line-height: 1; }
.sdg span { font-size: var(--f-1); line-height: 1.25; max-width: 7em; }
.sdg-1 { background: var(--sdg-1); } .sdg-2 { background: var(--sdg-2); } .sdg-3 { background: var(--sdg-3); } .sdg-4 { background: var(--sdg-4); }
.sdg-5 { background: var(--sdg-5); } .sdg-6 { background: var(--sdg-6); } .sdg-7 { background: var(--sdg-7); } .sdg-8 { background: var(--sdg-8); }
.sdg-9 { background: var(--sdg-9); } .sdg-10 { background: var(--sdg-10); } .sdg-11 { background: var(--sdg-11); } .sdg-12 { background: var(--sdg-12); }
.sdg-13 { background: var(--sdg-13); } .sdg-14 { background: var(--sdg-14); } .sdg-15 { background: var(--sdg-15); } .sdg-16 { background: var(--sdg-16); } .sdg-17 { background: var(--sdg-17); }
/* 編輯器：17 個勾選排成格 */
.永續勾組 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
@media (max-width: 700px) { .永續勾組 { grid-template-columns: 1fr; } }

/* 只有名字的名單（例如作品創作者）用頓號連排，不要一行一個 */
.製作團隊 .名單連排 { display: block; line-height: 1.9; max-width: 68ch; }
.製作團隊 .名單連排 .名 { color: var(--text-2); }

/* 計劃頁最底下的換頁箭頭：左右各一個線稿箭頭，去哪一篇隨機 */
.換頁 { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-6); }
.換頁箭 { display: inline-grid; gap: var(--s-2); min-height: 44px; align-content: center; color: var(--text-2); transition: transform .15s, color .15s; max-width: 46%; }
.換頁名 { font-size: var(--f-4); line-height: 1.4; }
/* 文字靠齊箭頭的「尾端」（沒有斜線的那一頭），另一頭留空間給斜線 */
.換頁箭.右 { text-align: left; }
.換頁箭.右 .換頁名 { padding-right: 24px; }
.換頁箭.左 { text-align: right; }
.換頁箭.左 .換頁名 { padding-left: 24px; }
/* 線跟著名字一樣寬；尾端只留上面那一槓，跟時間軸的箭頭同一套畫法 */
.換頁線 { position: relative; display: block; width: 100%; height: 2px; border-radius: 1px; background: currentColor; }
.換頁線::after {
  content: ''; position: absolute; top: 0; width: 14px; height: 2px;
  border-radius: 1px; background: currentColor;
}
.換頁箭.右 .換頁線::after { right: 0; transform-origin: right center; transform: rotate(40deg); }
.換頁箭.左 .換頁線::after { left: 0; transform-origin: left center; transform: rotate(-40deg); }
.換頁箭:hover { color: var(--text); }
.換頁箭.左:hover { transform: translateX(-4px); }
.換頁箭.右:hover { transform: translateX(4px); }
.換頁箭:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 4px; border-radius: var(--r-1); }

/* 精選項底下的大波浪色帶：只有「卡片線稿圖形＝波浪」的那一篇會畫。
   形狀用遮罩、顏色走 token，深淺主題都是同一片淺藍。 */
.精選-波 { position: relative; }
.精選-波::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; margin-left: -50vw; width: 100vw;
  bottom: calc(var(--s-8) * -1); height: 440px;   /* 夠高才會整片墊到照片後面 */
  background: var(--c-sky-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20420'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20200c90-60%20170-70%20260-30s140%2080%20240%2070%20140-90%20240-110%20160%2060%20260%2090%20150-10%20240-50%20140-30%20200-5V420H0z'%20fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20420'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%20200c90-60%20170-70%20260-30s140%2080%20240%2070%20140-90%20240-110%20160%2060%20260%2090%20150-10%20240-50%20140-30%20200-5V420H0z'%20fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
@media (max-width: 800px) { .精選-波::after { height: 260px; bottom: calc(var(--s-6) * -1); } }

/* Hero 按鈕列：燒杯插畫比按鈕高一倍，留在流內會把整列撐高、看起來離內文很遠。
   改成絕對定位掛在列的右端，列高就只剩按鈕本身。 */
.首鈕列 { position: relative; margin-top: var(--s-4); }
.首插 { position: absolute; right: 0; top: 50%; margin: 0; transform: translateY(-50%) rotate(-8deg); transform-origin: 50% 80%; }

/* 圖片形狀＝弧形：四個角各自不同的橢圓半徑，切出像水池的有機輪廓。
   同一頁連續好幾張的話輪流換一種，不會每張都長一樣（變體由出現順序決定，不必人選）。 */
main img.圖-弧 { border-radius: 62% 38% 46% 54% / 46% 56% 44% 54%; }
main img.圖-弧.變2 { border-radius: 38% 62% 55% 45% / 56% 42% 58% 44%; }
main img.圖-弧.變3 { border-radius: 52% 48% 36% 64% / 63% 38% 62% 37%; }
main img.圖-弧.變4 { border-radius: 45% 55% 63% 37% / 37% 61% 39% 63%; }
main img.圖-弧.變5 { border-radius: 60% 40% 40% 60% / 52% 55% 45% 48%; }
/* 精選圖外框本來是圓角＋裁切，裡面放弧形圖時要讓外框退開，否則弧形會被方角裁掉 */
a.精選項 .精選圖:has(img.圖-弧) { border-radius: 0; overflow: visible; }

/* 時間軸：每個節點的日期／標題／說明都靠左，區塊左緣對齊自己的黃色短線（原本除了第一個都是置中） */
.時間軸 li { transform: none; }
.時間軸 .軸點 { left: 2px; }
.時間軸 .軸文 { text-align: left; }

/* 手機版時間軸：直式的軸線本來就是一條，節點再畫一段橫線只會多出一堆線，改成圓點 */
@media (max-width: 720px) {
  .時間軸 { padding-left: 46px; }
  /* 藍線從「第一個黃點的中心」開始，不是從 ul 的最上緣（營運長 2026-09-08：
     「第一個黃色點請從頭開始，不要露出一點藍色」）。
     點是 top:4px、高 12px → 中心在 10px；線從 10px 起，上半被點蓋住，看起來就是點在線頭。
     ⚠️ 10 是從下面那條 li::before 的 top/height 推出來的，不是量畫面湊的；改點的大小要一起改。 */
  .時間軸::before { top: 10px; }
  /* 第一個節點被 .時間軸 li.首{position:static} 蓋成靜態，標記就會跑去對齊整條軸而不是自己那一列 */
  .時間軸 li.首 { position: relative; }
  /* 藍線在 8..14px（中心 11），點要壓在線上：li 左緣在 padding-left 46px 處，
     所以 left = 11 - 6 - 46 = -41px。top 對齊日期那一行的視覺中心。 */
  .時間軸 li::before {
    left: -41px; top: 4px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--c-yellow-500);
  }
}

/* ═══ 後台「首頁」分頁：用落版指定每個區段放什麼（2026-09-04）═══ */
.落版 { display: grid; gap: var(--s-4); }
.落版段 { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); padding: var(--s-5); display: grid; gap: var(--s-3); }
.落版段 h3 { font-size: var(--f-4); font-weight: 600; }
.落版段 .授權註 { font-size: var(--f-2); color: var(--text-3); line-height: 1.5; }
.落版hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-5); align-items: center; margin-top: var(--s-2); }
/* 落版上放的是「真的文字」，不是灰色示意條了——
   舊的示意條樣式（固定 height、背景色、固定寬度）會把文字壓在色塊裡、把按鈕字擠成一團，已移除。 */
.落版鈕列 { display: flex; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.落版拼貼 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 26px); gap: var(--s-2); }
.落版拼貼 > *:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.落版拼貼 > *:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.落版拼貼 > *:nth-child(3) { grid-column: 2; grid-row: 3 / 6; }
.落版拼貼 > *:nth-child(4) { grid-column: 1; grid-row: 4 / 6; }
.落版精選 { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.落版精選項 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: center; }
.落版精選項.圖在右 > .格位 { order: 2; }
.落版圖牆 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
.落版AI { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-2); }
.落版靜 { border: 1px dashed var(--line-2); border-radius: var(--r-1); padding: var(--s-3); text-align: center; font-size: var(--f-2); color: var(--text-3); }
/* 格位：空的是虛線框，選了就鋪封面 */
.格位 { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; min-height: 72px; padding: var(--s-2); font: inherit; cursor: pointer; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-1); overflow: hidden; }
.格位-空 { border-style: dashed; background: transparent; color: var(--text-3); }
.格位 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.格位 .格位加 { position: relative; z-index: 1; display: grid; place-items: center; }
.格位 .格位字 { position: relative; z-index: 1; font-size: var(--f-1); line-height: 1.35; text-align: center; max-width: 100%; }
.格位:not(.格位-空) .格位字 { background: rgba(28, 28, 28, .72); color: var(--c-white); padding: 2px 6px; border-radius: var(--r-1); }
.格位:hover { border-color: var(--c-orange-500); }
.格位:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; }
.落版圖牆 .格位, .落版AI .格位 { aspect-ratio: 4 / 3; min-height: 0; }
/* 精選一列一篇、圖佔半個版心，落版上照 4:3 會高得誇張，壓成扁的就好 */
.落版精選項 .格位 { aspect-ratio: 16 / 9; min-height: 0; max-height: 150px; }
.落版拼貼 .格位 { min-height: 0; height: 100%; }
@media (max-width: 800px) {
  .落版hero, .落版精選項 { grid-template-columns: 1fr; }
  .落版精選項.圖在右 > .格位 { order: 0; }
  .落版圖牆 { grid-template-columns: repeat(2, 1fr); }
}
/* 選內容對話框 */
.對話-選內容 { max-width: 560px; }
.選內容列 { display: grid; gap: var(--s-1); max-height: 50vh; overflow: auto; margin-top: var(--s-3); }
.選內容項 { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: center; text-align: left; font: inherit; color: var(--text); background: none; border: 1px solid transparent; border-radius: var(--r-1); padding: var(--s-2); cursor: pointer; }
.選內容項:hover { background: var(--bg-2); }
.選內容項.選中 { border-color: var(--c-orange-500); }
.選內容項 img, .選內容無圖 { width: 56px; height: 42px; object-fit: cover; border-radius: var(--r-1); background: var(--bg-2); display: block; }
.選內容項 b { display: block; font-size: var(--f-3); }
.選內容項 small { color: var(--text-3); font-size: var(--f-1); }

/* 大圖在上：封面壓短一點，標題不必捲一大段才看得到；頁首到封面的留白也收掉 */
.版型-hero .首屏-大圖 img { max-height: 420px; }
.版型-hero .首屏-大圖 { margin-top: 0; }
main > .版心.版型-hero { padding-top: var(--s-4); }
/* 右邊的資訊列跟左邊的編號那一列切齊起頭；標題到導言的空白也收掉一半 */
.版型-hero .首屏-下 .資訊列 { margin-top: 0; }
.版型-hero .首屏-下 { padding-bottom: 0; }
.版型-hero .導言 { margin-top: var(--s-5); }

/* ═══ 頁尾：左邊政策連結＋版權兩排，右邊標誌與 [Staff Only]（2026-09-04）═══ */
/* 標誌跟左邊那兩行垂直置中對齊（原本是 flex-end，標誌貼著第二行的底、看起來沒對齊）；
   兩行之間的行距收掉（營運長 2026-09-05：行距不要這麼大）。 */
.頁尾 .內 { justify-content: space-between; align-items: center; gap: var(--s-4) var(--s-5); }
.頁尾左 { display: grid; gap: var(--s-1); }
.頁尾右 { display: grid; justify-items: end; gap: var(--s-2); align-content: center; }
/* 標誌縮一點：原本 260px 比左邊那兩行還寬，重心整個偏右 */
.頁尾 #頁尾標誌 { width: 200px; height: auto; display: block; }
.頁尾 .版 { margin-left: 0; font-size: var(--f-1); }
/* 連結與版權都小一級、淡一階；分隔線原本是 line-2，在淺灰底幾乎看不到，改成跟文字同一階才看得出來 */
.頁尾 .連 a { font-size: var(--f-2); color: var(--text-3); }
.頁尾 .連 a:hover { color: var(--text-2); }
.頁尾 .連 a + a::before { color: var(--text-3); }
.頁尾 .後台入口 { margin-left: 0; font-size: var(--f-1); color: var(--text-3); }
.頁尾 .後台入口:hover { color: var(--text-2); }
@media (max-width: 620px) {
  .頁尾 .內 { align-items: flex-start; }
  .頁尾右 { justify-items: start; }
}

/* ═══ 後台編輯器：卡中卡、列距、列動作（2026-09-04）═══ */
/* 卡片裡還有卡片時，兩層一樣是 bg-2 就完全分不出來。裡面那層改用 surface，
   邊框深一階、內縮一點——層級靠底色與內縮講，不用再加一條線。 */
.區塊卡 .人列,
.區塊卡 .清單編-列表,
.區塊卡 .區塊卡 { background: var(--surface); border-color: var(--line-2); }
.區塊卡 .人列 { box-shadow: none; }

/* 名單一列：欄位之間的距離收緊。原本沿用整頁表單的 --s-5，一列就佔掉半個螢幕 */
.人列 { padding: var(--s-5); margin-bottom: var(--s-3); }
.人列 .欄 { margin-bottom: 0; }
.人列 .三欄 { gap: var(--s-3); align-items: end; }
.人列 .三欄 + .三欄 { margin-top: var(--s-3); }
.人列 > .連結列:first-of-type,
.人列 > div + .連結列 { margin-top: var(--s-3); }
.人列 .連結列 { gap: var(--s-3); align-items: end; }
.人列 .連結列 .欄 { margin-bottom: 0; }
.人列 > .鈕 { margin-top: var(--s-3); }

/* 每一列自己的標題與動作：第幾筆在左，上移／下移／移除在右上 */
.列頭 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.列頭 b { font-size: var(--f-2); font-weight: 500; color: var(--text-2); }
.列頭 .右靠 { margin-left: auto; display: flex; gap: var(--s-1); }
.圖列動作, .連結動作 { display: flex; gap: var(--s-1); align-items: center; }
/* 這兩處的按鈕跟旁邊的輸入框對齊；.欄 的下緣距離已經取消，不用再補 margin */
.人列 .三欄 > .圖鈕, .連結列 > .圖鈕, .圖列 > .圖鈕 { margin-bottom: 0; }
.圖列 .圖預覽.小 { margin: 0; }
.圖列 { align-items: center; }

/* 處理狀態：用既有的語意色，不自己配色 */
.狀態籤 {
  display: inline-block; white-space: nowrap;
  font-size: var(--f-1); padding: 2px var(--s-2); border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--text-2);
}
.狀態籤-1 { border-color: var(--c-orange-500); color: var(--c-orange-700); }
.狀態籤-4 { color: var(--text-3); }

/* 手機：頂欄到內容之間本來疊了工具列、頁首與版心三層的上下留白，收成一層。
   🔴 只收「頁面最上面那一段」——寫成 main > .版心 會蓋掉 main > .首段，
   把首頁每一段的區隔一起壓平（2026-09-04 就這樣把 AI 段黏到圖牆上）。 */
@media (max-width: 620px) {
  .工具列 .內 { padding-top: var(--s-1); padding-bottom: var(--s-1); }
  .頁首 .內 { padding-top: var(--s-2); padding-bottom: var(--s-2); }
  main > *:first-child { padding-top: var(--s-4); }
  main > .主視覺:first-child { padding-top: var(--s-3); }
}
/* 計劃頁首屏自己還有一段上內距；單欄堆疊之後（≤800）圖已經在最上面，那段留白就是多的。
   斷點跟 .計劃首屏 改單欄的那一條對齊，不要各用各的。 */
@media (max-width: 800px) {
  .計劃首屏 { padding-top: 0; }
}

/* 手機版計劃頁：頁首到第一張圖一律 24px（營運長 2026-09-05 指定）。
   改前是四個版型不一致——hero／split／poster 走上面 ≤620 的
   `main > *:first-child { padding-top: var(--s-4) }` ＝16px，
   sidebar 又多吃一段 `.側版-圖 { margin-top: var(--s-5) }` ＝40px。
   🔴 只改計劃頁，不要去動 `main > *:first-child` 那一條——那是全站每一頁共用的，
   改它會連計劃列表／關於／聯絡一起變（他問的只有計劃頁）。
   `main >` 兩層與 .計劃頁 一起寫，權重才蓋得過 1517 行那條 hero 專用的 s-4。 */
@media (max-width: 620px) {
  main > .版心.計劃頁 { padding-top: var(--s-5); }
  /* 單欄堆疊後封面已經在最上面，側欄版型那段 margin 就是多出來的第二段留白 */
  .計劃頁 .側版-圖:first-child { margin-top: 0; }
}

/* 每一列的動作鈕已經移到列頭，欄位就照欄位本身的需要分寬度，不用再留按鈕的那一格 */
.人列 .三欄.欄數1 { grid-template-columns: 1fr; }
.人列 .三欄.欄數2 { grid-template-columns: 1fr 1fr; }
.人列 .三欄.欄數3 { grid-template-columns: 120px 1fr 1fr; }
@media (max-width: 700px) {
  .人列 .三欄.欄數2, .人列 .三欄.欄數3 { grid-template-columns: 1fr; }
}
.圖列 { grid-template-columns: 96px minmax(0, 1fr) auto; }
@media (max-width: 700px) { .圖列 { grid-template-columns: 1fr; } }
.連結列 { grid-template-columns: 160px minmax(0, 1fr) auto; }

/* ═══ 後台「首頁」落版：自動遞補、可點編輯、預設鎖定（2026-09-04）═══ */
/* 沒指定的格子不留白，改成顯示首頁真正會自動挑的那一篇，加一個「自動」小標 */
.格位-自動 { border-style: dashed; }
.格位 .格位標 {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: var(--f-1); line-height: 1; padding: 3px 6px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2); border: 1px solid var(--line-2);
}
/* 落版上的文字與按鈕也是可以點開來改的，不是純示意 */
.落版文 { display: grid; gap: var(--s-2); align-content: start; }
.落版可點 {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: none; border: 1px dashed transparent; border-radius: var(--r-2);
  padding: var(--s-2); position: relative;
}
.落版可點:hover:not(:disabled) { border-color: var(--c-orange-500); background: var(--bg-2); }
.落版可點:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; }
.落版可點:disabled { cursor: default; }
.落版線 { display: block; width: auto; height: auto; background: none; border-radius: 0; }
.落版線-眉 { font-size: var(--f-1); letter-spacing: .1em; color: var(--accent); line-height: 1.4; }
.落版線-標 { font-size: var(--f-3); font-weight: 700; line-height: 1.4; color: var(--text); }
.落版線-說 { font-size: var(--f-1); color: var(--text-2); line-height: 1.6; }
.落版鈕 { font-size: var(--f-1); padding: 3px var(--s-3); white-space: nowrap; }
.落版鈕列.落版可點 { display: flex; gap: var(--s-2); align-items: center; }
.落版鈕 {
  display: inline-block; font-size: var(--f-2); padding: var(--s-1) var(--s-4);
  border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--text-2);
}
.落版鈕-主 { background: var(--c-orange-500); border-color: var(--c-orange-500); color: var(--on-brand); }
/* 鎖著的時候整塊淡一階，一眼看得出「現在不能改」 */
.落版-鎖 .格位, .落版-鎖 .落版可點 { opacity: .75; }
.對話-文案 { max-width: 560px; }
.對話-文案 .欄:last-of-type { margin-bottom: 0; }

/* 計劃頁標題區的三段（標題→副標→簡介）原本只隔 8px，三段字級又相近，看起來擠成一團 */
.計劃頁 .副標 { margin-top: var(--s-4); }
.計劃頁 .計劃頭 .摘 { margin-top: var(--s-5); }
.計劃頁 .導言, .版型-hero .導言 { margin-top: var(--s-5); }
/* 沒有導言的版型（摘要跟副標一樣時就不畫導言），內文會直接黏在副標下面，中間一點空白都沒有 */
.計劃頁 .內文 { margin-top: var(--s-6); }

/* 單位名單的頓號：跟名稱同一階但淡一點；不另外加 margin，全形頓號自己就帶右側空白 */
.單位名單 .頓 { color: var(--text-3); }

/* ═══ 封面在版位裡怎麼擺（2026-09-04）═══
   同一張封面會出現在卡片、首頁拼貼、圖牆與四種計劃版型，每個框的比例都不一樣。
   「填滿」＝鋪滿框、超出的裁掉，焦點決定保留哪一邊（照片適合）。
   「完整」＝整張看得到、一點都不裁（有文字或標誌的圖適合）。

   🔴 權重要跟得上：既有規則是 `.版型-hero .首屏-大圖 img` 這種「兩個 class ＋元素」，
   只寫 `.封面-完整` 會被蓋掉——會看到選了「完整」卻還是在裁切。所以下面每一條都連框一起指名。 */
.封面-填滿 { width: 100%; height: 100%; object-fit: cover; display: block; }
.封面-完整 { object-fit: contain; display: block; margin-inline: auto; }

/* 固定比例的版位（首頁拼貼、圖牆、精選）：完整顯示時整張塞進格子裡，不撐破也不裁掉 */
.首拼貼 img.封面-完整,
.圖牆格 img.封面-完整,
.精選圖 img.封面-完整 { width: 100%; height: 100%; object-fit: contain; }

/* 計劃頁的四種封面框：填滿時高度固定，完整時縮到放得下為止 */
.版型-hero .首屏-大圖 img.封面-填滿 { height: 420px; max-height: none; }
.海報圖 img.封面-填滿 { height: 520px; max-height: none; }
.側版-圖 img.封面-填滿 { height: 460px; max-height: none; }
.計劃首屏 .首屏圖 img.封面-填滿 { width: 100%; height: 100%; }
@media (min-width: 801px) { .版型-hero .首屏-大圖 img.封面-填滿 { height: 560px; } }

.版型-hero .首屏-大圖 img.封面-完整,
.海報圖 img.封面-完整,
.側版-圖 img.封面-完整,
.計劃首屏 .首屏圖 img.封面-完整 {
  width: auto; max-width: 100%; height: auto; max-height: 460px; object-fit: contain;
}

/* ═══ 刪除的紅色（2026-09-04）═══
   值取自設計系統母版 qkstudio-brand-kit/assets/web-ui/theme.css 的 danger 系列，
   不是這裡自己配的——本站原本的色票只有橘／海藍／黃／天藍／綠，沒有紅。 */
:root {
  --c-danger: #DC3545;      /* qk-allow: 來自 DS 母版 --c-danger */
  --c-danger-600: #C42B3B;  /* qk-allow: 來自 DS 母版 --c-danger-600 */
  --c-danger-soft: #FBEBED; /* qk-allow: 來自 DS 母版 --c-danger-soft（淺色） */
}
:root:not([data-theme="light"]) { --c-danger-soft: #2E1A1D; /* qk-allow: DS 母版深色版 */ }
[data-theme="dark"] { --c-danger-soft: #2E1A1D; /* qk-allow: DS 母版深色版 */ }

/* 淡紅：平常不搶戲，但一眼看得出是破壞性動作 */
.鈕-刪 {
  background: var(--c-danger-soft);
  border-color: color-mix(in srgb, var(--c-danger) 32%, transparent);
  color: var(--c-danger-600);
}
:root:not([data-theme="light"]) .鈕-刪 { color: #F0959E; /* qk-allow: danger 在深色底要提亮才讀得到 */ }
[data-theme="dark"] .鈕-刪 { color: #F0959E; /* qk-allow: 同上 */ }
.鈕-刪:hover:not(:disabled) { border-color: var(--c-danger); }
/* 確認對話框裡的那一顆才是實心紅——真正會刪掉的是它 */
.鈕-刪實 { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-white); }
.鈕-刪實:hover:not(:disabled) { background: var(--c-danger-600); border-color: var(--c-danger-600); }

/* 落版每一段的段頭：左邊第幾段、右邊上下移 */
.落版段頭 { display: flex; align-items: center; gap: var(--s-2); }
.落版段頭 .右靠 { margin-left: auto; display: flex; gap: var(--s-1); align-items: center; }
.落版序 {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--bg-2); color: var(--text-2);
  font-size: var(--f-1); font-variant-numeric: tabular-nums;
}

/* 精選插畫貼在文字欄的外側角落：圖在左時插畫靠右、圖在右時插畫靠左，
   跟著那一列的鏡射走，才會落在「離封面比較遠」的那一角。 */
.精選項.圖在右 .精選插 { margin-left: 0; margin-right: auto; }

/* 頁面右下角的插畫：內文限寬 600px、欄寬有 1132px，右邊本來就空一塊，放這裡收尾。
   純裝飾（aria-hidden），手機單欄沒有那塊空白就不顯示。 */
/* 計劃頁右下角的插畫。
   🔴 原本是一般流的區塊（flex＋margin-top），自己佔掉 106＋32px，
   把後面的「系列計劃」整段往下推，中間留一大塊空白（營運長 2026-09-05 指出）。
   改成絕對定位貼在 .內文 的右下角：不佔高度，後面的區段直接接上來。
   不會壓到字——段落有 max-width: var(--文寬)=600px，而 .內文 是版心寬（1132px），
   右邊永遠留著 500px 以上的空白，插畫只有 132px。 */
/* 零高度的定位錨點：插畫的下緣就貼在這個錨點上，往上長，所以不佔任何垂直空間。
   節點放在尾段的最後、廣告版位之前（見 程式.js 的 尾段），
   所以插畫會落在整頁內容的最右下角、廣告之上——不是內文那一段的右下角。 */
.頁插位 { position: relative; height: 0; margin: 0; pointer-events: none; }
.頁插位 .頁插 { position: absolute; right: 0; bottom: 0; display: block; width: 132px; height: 106px; }
@media (max-width: 800px) { .頁插位 { display: none; } }

/* 團隊列的社群圖示：圖示外框本來就有 4px 內縮，再加 12px margin 看起來離名字太遠 */
.製作團隊 .社群 { margin-left: var(--s-1); }

/* 置中的短段落容易掉出「玩！」這種兩字孤行，交給瀏覽器平衡最後一行 */
/* 置中的短段落用 balance 不用 pretty：
   pretty 只會微調最後幾行，對中文幾乎沒作用——實測「小額抖內」那段三行是 497／468／100px，
   最後一行只剩「好玩！」掉在正中間（營運長講第二次了）。
   balance 會把每一行拉成差不多長，短段落正是它的用途。 */
.呼籲 p, .段副.置中, .精選摘 { text-wrap: balance; }

/* ═══ 內容裡的換行是有意義的（2026-09-05）═══
   渲染時已經用 split(/\n{2,}/) 把「空一行」拆成多個 <p>，
   但段落內的「單一換行」在 white-space: normal 下會被當成空白併掉——
   營運長在編輯器按一次 Enter 斷行，存檔後看到的是整段黏成一坨（資料其實好好的，是這裡沒畫出來）。
   pre-line 會保留單一換行、同時照常收合多餘空白，正是要的行為。
   只掛在「文字來自資料」的元素上：這些元素的內容都是 textContent 設進去的，
   不會有 HTML 縮排的空白被一起保留。 */
.內文 p, .內文 li, .內文 figcaption,
.分欄 .文側 p,
.計劃頁 .導言, .計劃頁 .摘, .計劃頁 .副標,
.分享頁 .摘, .分享頁 .導言 { white-space: pre-line; }

/* 🔴 這裡本來有 text-wrap: pretty（2026-09-05 為了修「。」單獨一行的孤字）。
   2026-09-08 拿掉：Safari 與 Chrome 的 pretty 是兩套演算法。
   Chrome 只微調最後幾行；Safari 是整段一起最佳化，中文窄欄下會把「每一行」都縮短——
   WebKit／iPhone 390 實測街階書店：五段的最短行 252／280／294／294／280，欄寬 342，
   拿掉之後是 336／322／336／336／336，**行數完全一樣**（4／6／4／4／6），只是把行填滿。
   營運長 2026-09-08 回報「手機版縮排突然全部排掉？亂縮？」就是這個。
   ⚠️ 要再處理孤字的話不要把 pretty 加回來，換別的做法（他看的是 iPhone）。
   ⚠️ .呼籲 p／.段副.置中／.精選摘 用的是 balance 不是 pretty，那幾條沒有這個問題，沒有動。 */

/* AI 應用計劃 split 版型：右欄的「Prompt」要跟左欄第一行內文一樣高（營運長 2026-09-05）。
   兩欄的容器上緣本來就對齊（實測都是 228），差別在字面上緣：
   右欄標題是 20px 拉丁字（字面上緣離盒頂 16px），左欄內文是 14px 中文字（離盒頂 1px），
   所以看起來右欄低了一截。把標題往上提 15px，讓兩欄第一行字看齊。
   只掛在 split 版型的右欄第一個標題上——.節標 全站都在用，不能整個動。 */
.分享版型-split .分享右 > .區塊:first-child > .節標 { margin-top: -15px; }

/* 同一件事，計劃的「左說明右 Prompt」版型（AI 應用計劃併進計劃之後用這個）。
   這裡右欄外面多包一層 .內文，選擇器不一樣，數字也不一樣：
   數字是量出來的（量字面、不是量盒子），不是照抄上面那條。
   🔴 **這個值跟「標題到導言」的間距綁在一起**：2026-09-08 把 版型-ai 的
   `.無副標 .導言` margin-top 從 24 收到 8（他說「標題跟第一段距離太遠」），
   左欄第一行就往上跑了 16px，這裡的 -22 立刻變成對不齊（量到差 16）。
   所以改成 -38。**動那個間距就要回來重量這個值**，兩處是同一件事的兩半。
   ⚠️ 包在 min-width 裡：≤900px 兩欄會變上下排，那時候往上提會壓到左欄的內容。 */
@media (min-width: 901px) {
  /* 2026-09-08 再往上 20px（-38 → -58）：兩欄第一行「字頂切齊」之後，
     營運長仍覺得「視覺上 prompt 那邊比較矮」。原因是右欄的視覺重量在**框**上，
     框頂比左欄第一行低了標題高度＋間距（約 32px），字頂對齊反而看起來偏低。
     🔴 這推翻了 09-07 訂的「兩欄第一行對齊」，是他 09-08 當面改的，不要又改回去。 */
  .版型-ai .分享右 > .內文 > .分享內容:first-child > .節標 { margin-top: -58px; }
}

/* ═══ 按鈕不要黏著上面的東西（2026-09-05 全面盤查）═══
   量了後台每一顆按鈕到最近的非按鈕元素的距離，抓出三類貼太緊的：
   1. 說明文字（.授權註／.尺寸提示）底下緊接著的按鈕或檔案鈕 —— 實測 0px，完全貼死
   2. 一列的動作圖鈕與下一個欄位的標籤 —— 實測 8～12px
   3. 空狀態說明底下的「新增」 —— 實測 0px
   同一組按鈕之間（上移／下移／移除、存檔列）本來就該靠在一起，不在這裡處理。 */
.授權註 + .鈕, .授權註 + label.鈕, .授權註 + .檔案鈕,
.尺寸提示 + .鈕, .尺寸提示 + label.鈕, .尺寸提示 + .檔案鈕 { margin-top: var(--s-3); }
/* 清單底下那顆「新增…」：清單可能是一堆列，也可能只是一句「還沒有任何項目。」，
   兩種情況都不該讓按鈕貼著上面（實測空清單時是 0px）。 */
.加項鈕 { margin-top: var(--s-3); }
/* 一列的頭（序號＋動作圖鈕）跟底下第一個欄位之間 */
.列頭 { margin-bottom: var(--s-4); }
/* 區塊卡的頭（型別名＋動作圖鈕）跟底下第一個欄位之間；圖鈕比文字高，8px 看起來就是貼著 */
.區塊卡 .頭 { margin-bottom: var(--s-4); }

/* ═══ 編輯模式（2026-09-05）═══
   頁尾的 [Staff Only] 已移除；管理員打 /edit 登入後整站進入編輯模式。 */
/* 頁首「贊助」右邊那兩個：純文字，跟關於／聯絡我們／贊助長得一樣、排在同一列。
   display: contents 讓這兩顆直接變成 .導覽 的 flex 子項，
   間距就跟其他導覽項一模一樣（不必自己再配一個 gap）。 */
.編輯鈕組 { display: contents; }
.編輯鈕組[hidden] { display: none; }
.編輯鈕 {
  font: inherit; font-size: var(--f-3);
  color: var(--text-2); background: none; border: 0; padding: 0;
  cursor: pointer;
}
.編輯鈕:hover { color: var(--text); }
.編輯鈕:focus-visible { outline: 3px solid var(--c-ocean-400); outline-offset: 2px; border-radius: var(--r-1); }
/* 計劃頁右下角的「編輯這一篇」：浮在畫面上，捲到哪都按得到。
   位置要避開頁尾與插畫，所以貼視窗不貼版心。 */
.編輯這篇 {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 90;
  box-shadow: 0 2px 12px rgba(28, 28, 28, .18);
}
@media (max-width: 620px) {
  .編輯這篇 { right: var(--s-4); bottom: var(--s-4); }
}

/* /edit 的登入頁：整頁蓋住，頁首頁尾與 Cookie 條都不要露出來。
   z-index 要壓過 Cookie 條（它也是 fixed）。 */
.鎖捲, .鎖捲 body { overflow: hidden; }
.登入頁 {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: grid; place-items: center;
  padding: var(--s-5);
}
.登入卡 {
  display: grid; justify-items: center; gap: var(--s-4);
  text-align: center; max-width: 380px; width: 100%;
}
.登入卡 h1 { font-size: var(--f-7); }
.登入標 { display: block; width: 56px; height: auto; }
.登入說明 { color: var(--text-2); font-size: var(--f-3); line-height: 1.7; text-wrap: balance; }
.登入鈕位 { min-height: 44px; display: grid; place-items: center; }
.登入回站 { color: var(--text-3); font-size: var(--f-2); text-decoration: none; }
.登入回站:hover { color: var(--text-2); }

/* 封面設成「完整」時的補底：外框撐滿原本 img 的位置，底層是同一張圖放大模糊，
   上層是 contain 的原圖。這樣露出來的邊是圖片自己的顏色，不是格子的白底。
   ⚠️ 這一層要吃掉原本掛在 img 上的尺寸規則，所以框自己撐滿、img 在框內填滿。 */
.封面框 { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
/* 有手機封面時，img 會被包在 <picture> 裡（見 封面節點_）。
   picture 預設是行內元素，包起來會把版位撐歪——讓它跟原本的 img 一樣佔滿。
   既有的 CSS 都是 `… img` 後代選擇器，所以 img 本身的規則照樣生效。 */
.首屏-大圖 picture, .精選圖 picture, .拼圖 picture, .封面框 picture,
.海報圖 picture, .側版-圖 picture, .圖牆 picture, .格位 picture {
  display: block; width: 100%; height: 100%;
}
/* 純色，不是模糊的漸層（營運長 2026-09-05）。顏色由 取邊緣色_() 取圖片四角後填進來；
   取不到或四角顏色不一致就維持透明，露出格子原本的底色。 */
.封面底 { position: absolute; inset: 0; }
.封面框 img.封面-在底上 {
  position: relative; width: 100%; height: 100%; display: block; margin: 0;
}
/* 桌機與手機各自的顯示方式與焦點（2026-09-07）。
   🔴 焦點走 CSS 變數（--桌機焦點／--手機焦點），不寫 inline objectPosition——
   inline 會贏過媒體查詢，那就是「選了手機焦點卻沒反應」的原因。
   ⚠️ 這一段要放在所有 .封面-填滿／.封面-完整 規則之後，權重才蓋得過去。 */
img.封面-填滿 { object-fit: cover; object-position: var(--桌機焦點, 50% 50%); }
img.封面-完整 { object-fit: contain; }
@media (max-width: 800px) {
  /* 🔴 這兩條要 !important：版位自己的規則權重更高（例如
     `.版型-hero .首屏-大圖 img { object-fit: cover }` 是 0,2,1，這裡是 0,1,1），
     不加就會被蓋掉——實測「手機選完整」量到的還是 cover（雷區 27 的同一種毛病）。
     用 !important 而不是把選擇器一路加長，是因為版位有七八個（首屏、海報、側版、
     精選、拼貼、圖牆、卡片…），逐個追會漏。 */
  img.手機封面-填滿 { object-fit: cover !important; object-position: var(--手機焦點, 50% 50%) !important; }
  img.手機封面-完整 { object-fit: contain !important; }
}
/* 有些版位是靠 img 自己的高度撐開的（首屏大圖、海報、側欄），框要接手那個高度 */
.版型-hero .首屏-大圖 .封面框 { height: 420px; }
@media (min-width: 801px) { .版型-hero .首屏-大圖 .封面框 { height: 560px; } }
.海報圖 .封面框 { height: 520px; }
.側版-圖 .封面框 { height: 460px; }

/* 編輯器裡「在列表與首頁上的樣子」：這一段設定的不是這一頁，是它出現在別的地方時的樣子。
   跟其他段落性質不同，用底色框起來明確隔開（營運長 2026-09-05）。
   不用分隔線——層級一律用底色與留白。 */
.編輯主 .區塊.他處區 {
  background: var(--bg-2);
  border-radius: var(--r-2);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
}
.編輯主 .區塊.他處區 > h2 { margin-top: 0; }

/* ═══ 編輯器間距（2026-09-05 第二輪）═══ */
/* 🔴「加社群連結」原本緊貼上面那一排欄位，實測 0px。
   它上面是一個沒有類名的 div，所以我第一版的按鈕掃描（只看 input/label/p 這些）整個沒量到它。 */
.人列 > .鈕, .人列 > div > .鈕 { margin-top: var(--s-4); }
/* 空清單的「還沒有任何項目。」跟標題、跟「新增」之間的行距收一點——整段太鬆（營運長 2026-09-05） */
.編輯主 .區塊 > h2 + .授權註 { margin-top: var(--s-1); }
.編輯主 .區塊 .授權註 { line-height: 1.6; margin-bottom: 0; }
.編輯主 .區塊 > h2 { margin-bottom: var(--s-2); }

/* ═══ 圖片上傳的狀態（2026-09-05）═══
   按下選檔之後要看得出「正在傳、傳完了、傳失敗」，不然圖默默換掉、人不知道成不成功。 */
.轉圈 {
  display: inline-block; width: 13px; height: 13px; margin-right: var(--s-2);
  border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%;
  vertical-align: -2px;
  animation: 轉 .7s linear infinite;
}
@keyframes 轉 { to { transform: rotate(360deg); } }
.檔名-忙 { color: var(--text-2); }
.檔名-好 { color: var(--text-2); }
.檔名-壞 { color: var(--c-orange-500); }
/* 上傳中把舊圖壓暗，換好了才恢復——中間那幾秒看到的是舊圖，不壓暗會以為已經換了 */
.圖預覽.上傳中 { opacity: .35; filter: grayscale(1); transition: opacity .2s; }
.檔案鈕 label.鈕[aria-disabled="true"] { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .轉圈 { animation-duration: 2s; } }

/* ── 欄位標籤底下的小字說明（2026-09-05）──────────────────────
   營運長：「通通不要用括弧，用小字在標題底下的那種說明」。
   標籤只留名字，（…）由 拆標籤_ 拆出來變成這一行。
   跟封面圖的尺寸建議（.尺寸提示）同一個樣式，全站說明文字長一樣。 */
.欄 .欄說明 { font-size: var(--f-2); color: var(--text-3); line-height: 1.5; margin: 0 0 var(--s-2); max-width: 68ch; }
/* 標籤原本的下緣留白由說明接手，免得標籤與說明之間開一個洞 */
.欄 label + .欄說明 { margin-top: calc(var(--s-1) * -1); }
/* 勾選框的說明要跟文字對齊，不是跟勾框對齊 */
.欄 label.勾 + .欄說明 { margin-top: 2px; }

/* ── 編輯表單對齊與收緊（2026-09-05，第二版）──────────────────
   第一版用「控件靠底對齊」，結果比較矮的那一欄整個被推到下面
   ——營運長看到的「掉下來」就是這個。這一版改成靠上對齊：
   同一列裡沒有小字說明的欄位，補一行說明的高度，兩邊的框自然齊平。 */

/* 1) 同一列的欄位一律靠上；不要用 flex 靠底 */
.欄組 > .欄 { display: block; }
/* 這一列有人有小字說明時，沒有說明的那一欄補上等高的空間。
   19 與 25 都是量出來的（一開始用算的寫 26，實測overshoot 7px）：
   說明那一塊實際佔 15px＋標籤原本的 4px。 */
.欄組:has(.欄說明) > .欄:not(:has(.欄說明)) > label { margin-bottom: 19px; }
/* 勾選欄自己就是標籤，上面沒有東西，會比隔壁的輸入框高一整個標籤列 */
.欄組 > .欄 > label.勾:first-child { margin-top: 25px; }

/* 2) English 那一行原本整整 24px 高，一張表單幾十個欄位就是幾百 px */
.英折 > summary { padding: 0; line-height: 1.2; font-size: var(--f-1); }

/* 3) 要縮的是「欄位與欄位之間」（營運長：區段不要縮，要縮的是欄位上下之間） */
.編輯主 .欄 { margin-bottom: var(--s-2); }
/* 名單卡、時間軸節點這種「卡中卡」彼此之間也收一階 */
.編輯主 .人列 + .人列, .編輯主 .區塊卡 + .區塊卡 { margin-top: var(--s-2); }

/* 4) 選圖鈕與縮圖左右並排，不要上下疊 */
.圖欄列 { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; }
.圖欄列 > .圖預覽 { margin-top: 0; max-height: 120px; width: auto; }

/* 5) 區塊卡標頭大一點、粗一點 */
.區塊卡 .頭 b { font-size: var(--f-5); font-weight: 700; }

/* 🔴 名單卡與時間軸節點用的是 .人列 .三欄，不是 .欄組——而且它設了 align-items: end，
   所以矮的那一欄（沒有小字說明的）整個被推到下面。營運長回報三次的「掉下來」是這個，
   我前兩次只改了 .欄組，量測也只掃 .欄組，所以自己量出來一直是 0px。
   同一套處理搬過來：靠上對齊 ＋ 沒有說明的補一行高度。 */
.人列 .三欄 { align-items: start; }
.人列 .三欄:has(.欄說明) > .欄:not(:has(.欄說明)) > label { margin-bottom: 19px; }
.人列 .三欄 > .欄 > label.勾:first-child { margin-top: 25px; }
/* 靠上之後，圖鈕（社群圖示那顆）要跟輸入框同一條線 */
.人列 .三欄 > .圖鈕 { margin-top: 25px; }

/* ── 區段收合（2026-09-05）─────────────────────────────
   營運長：所有的區段都可以收合，預設都收起來。
   收的是「視覺」不是「資料」——欄位還在 DOM 裡，收著存檔照樣存得到。 */
.編輯主 section.可收 > h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: var(--s-2); }
/* 收合指示：跟 DS 的幾何標記一致，用一條線／兩條線，不用三角形箭頭 */
.編輯主 section.可收 > h2::before {
  content: ''; flex: none; width: 12px; height: 12px; position: relative;
  background:
    linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 12px no-repeat;
  opacity: .45; transition: opacity .15s;
}
/* 展開時只留橫線（減號） */
.編輯主 section.可收:not(.收合) > h2::before {
  background: linear-gradient(currentColor, currentColor) center/12px 1.5px no-repeat;
}
.編輯主 section.可收 > h2:hover::before { opacity: .8; }
.編輯主 section.收合 > *:not(h2) { display: none; }
.編輯主 section.收合 { padding-bottom: var(--s-4); }

/* 收合狀態下的區段行距再收一階（營運長 2026-09-06：「行距再小一點」）。
   量出來：段間 24 ＋ h2 下 8 ＋ 段底 16 ＝ 每段吃掉 48px 的空白。 */
.編輯主 section.收合 { margin-top: var(--s-2); padding-bottom: 0; }
.編輯主 section.收合 > h2 { margin-bottom: 0; }

/* 宣傳圖：有色底、不要邊框（營運長 2026-09-06） */
.鈕-下載 { color: #fff; background: var(--link); border-color: transparent; }
.鈕-下載:hover { background: var(--link); filter: brightness(.92); }

/* 限時動態的底色小方格（營運長 2026-09-06：選單要有小方格顏色可以看） */
/* 限時動態圖：從這一篇上傳過的圖裡挑一張（營運長 2026-09-08）。
   跟底色那一排同一套互動（點的、看得到內容、選中有外框），只是格子裝的是縮圖。 */
.圖格列 { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.圖格 {
  width: 72px; height: 72px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  background: var(--bg-2); overflow: hidden;
}
.圖格 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.圖格-無 { display: grid; place-items: center; width: 100%; height: 100%; font-size: var(--f-2); color: var(--text-3); }
.圖格[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c-ink); }
/* 行數超過放得下的行數時，提示要看得出是警告——但用文字級的警告色，不是整塊變色 */
.提示-要注意 { color: var(--c-orange-700); }

.色格列 { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.色格 {
  width: 32px; height: 32px; border-radius: var(--r-1); cursor: pointer;
  border: 1px solid var(--line); padding: 0; outline-offset: 3px;
}
.色格[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c-ink); }
.色格:hover { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .色格:hover { transform: none; } }

/* 頁首站名放大到跟圖記一樣高（營運長 2026-09-06）。
   圖記 25px 高，中文字在 font-size N 時字面約略就是 N，所以 24px 對得起來。
   手機圖記 22px，字跟著降。 */
/* 🔴 這個位移我算錯過方向，害它越修越歪，經過如下：
   中文字墨在 em 盒裡偏上，24px 時字墨中心比圖記中心高 5px。
   我第一次量到 +2（以為偏下）就補 top:-2px，結果變成 -7、更飄。
   原因是那一次量測**沒有等字型載完**（沒 await document.fonts.ready），
   量到的是替代字型的 metric。量測時機錯 → 校正方向就反了。
   現在的 5px 是等 Poppins／Noto 載完之後量的，桌機與手機都驗過。
   line-height 不要動：設 25px 或 normal 量出來都一樣是 -5，改它沒有用。 */
.標記 b { font-size: 24px; }
@media (max-width: 620px) { .標記 b { font-size: 21px; } }

/* 編號與 badge 那一列跟標題的距離。走過兩輪：
   原本 .頭頂 下 8px ＋ h1 上 12px ＝ 盒子 20px（實測字面差約 16px）→ 營運長 2026-09-06 說太遠，改成 4px；
   4px 的字面差量出來是 0～-1px（badge 的膠囊下緣貼著標題的字），營運長 2026-09-07 說「太近了，稍微多一點」。
   現在 12px＝字面差約 8px，落在兩次要求的中間。**改這個值一定要重新量字面差，不要量盒子**
   （h1 的行盒上緣比字面高出一截，盒子看起來有間距、字其實貼著）。 */
.計劃頁 .計劃頭 .頭頂 { margin-bottom: var(--s-3); }
.計劃頁 .計劃頭 h1 { margin-top: 0; }

/* 沒有副標的那一篇，標題底下不要空一大塊（營運長 2026-09-07：「不然這樣超開」）。
   量出來：有副標是 標題→副標 13px、副標→導言 27px；沒副標是 標題→導言 44px 的純空白。
   導言的 margin-top 24px → 8px，字面差變約 28px，跟「有副標」那一段的節奏對得上。
   ⚠️ 只在 801px 以上：以下 .首屏-下 變單欄，資訊列會排在標題與導言之間，
   那時候縮的不是「標題到導言」而是「資訊列到導言」，會擠在一起。 */
/* AI 專用版型的 Prompt 框要高一點（營運長 2026-09-08：「prompt 的長度可以高一點」）。
   線上量到：左欄 874px、右欄只有 465px，框被 max-height: 360px 綁死，
   整段 prompt 只露出一小截，右邊卻空著一大片。
   🔴 用 dvh 而不是寫死 px：右欄是 sticky 的（會跟著捲動停在視窗裡），
      框應該吃「視窗放得下的高度」，不是「某一篇內容剛好多長」。
      100dvh 扣掉 sticky 的上邊距與底下複製鈕那一列。
   ⚠️ 只在兩欄成立的寬度才放大；≤900px 兩欄疊起來，維持 360px，
      不然手機上一個 prompt 框就佔掉整個畫面。 */
/* 這裡只留一個「不要比 360 矮」的底線；真正的高度由 調整Prompt框高_() 算完寫成 inline，
   因為框頂的位置每一篇都不一樣（取決於上面的標題與導言多長），CSS 算不出來。 */
@media (min-width: 901px) {
  .版型-ai .分享右 .內容框 { max-height: 360px; }
}
/* 「Prompt」這個標題原本**字底貼著框頂 0px**（量出來的），看起來像黏在框上
   （營運長 2026-09-08：「標題可以離框稍微高一點」）。
   ⚠️ 量的是字面到框頂，不是盒子——h2 的行盒下面本來就還有一截行距，
      看盒子會以為已經有間距了。 */
.版型-ai .分享右 .內容框 { margin-top: var(--s-3); }

@media (min-width: 801px) {
  /* AI 專用版型也吃這一條（營運長 2026-09-08：「標題跟第一段距離太遠」）。
     線上量到 版型-ai 沒有副標時，標題字底到第一段字頂是 46px；hero 早就收成 28px 了，
     當初那條只寫 .版型-hero，ai 版型是後來才有的，就沒被涵蓋到。
     ⚠️ 海報式／文左圖右／側欄仍然沒動——他只點名這兩個版型，有斷言守著。 */
  .版型-hero.無副標 .導言, .版型-ai.無副標 .導言 { margin-top: var(--s-2); }
}

/* 右側資訊列跟「標題」切齊（營運長 2026-09-06）。
   🔴 這裡不能用固定數字：標題上方有幾行 badge（獎項／參與範圍／系列／編號）會變，
   實測 mini-meet 要 0、issue-surfing 要 5、奈米香蕉盃擠成兩行要 46。
   我第一版寫死 23px，只有「編號一行」那種剛好對——所以改由 對齊資訊列_() 量了再設。
   這裡只留手機的重置（手機是上下排，不需要位移）。 */
@media (max-width: 900px) { .版型-hero .首屏-下 .資訊列 { margin-top: 0 !important; } }

/* 得獎紀錄：要跟參與範圍／系列 badge 分得出來——有顏色、有皇冠（營運長 2026-09-06）。
   淡黃底配 warning-700 文字：DS 寫明「淺底上的文字級警告要用 warning-700 才夠對比，
   warning-500 只做底色與圖形」。皇冠是幾何線稿，不是 emoji。 */
.榮譽 { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.榮譽 span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--f-2); line-height: 1.4; padding: 3px var(--s-3);
  border-radius: var(--r-pill); white-space: nowrap;
  background: #FEF7E0; color: #A16207; border: 1px solid #F5D98A;
}
.榮譽 span::before {
  content: ''; flex: none; width: 14px; height: 12px; background: currentColor;
  -webkit-mask: var(--皇冠) center/contain no-repeat; mask: var(--皇冠) center/contain no-repeat;
}
:root { --皇冠: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 19h22M3 19 1.5 6l7 4.5L14 3l5.5 7.5 7-4.5L25 19'/%3E%3C/svg%3E"); }
/* 海報版型底色較深，膠囊改成描邊淺色，維持同一個形狀語彙 */
.海報 .榮譽 span { background: rgba(255,255,255,.85); border-color: rgba(28,28,28,.25); color: #7A4A06; }

/* 🔴 「姓名・單位（職稱）」是一整串名字，三段必須同色同粗細。
   實際 DOM 是 <span 名>姓名</span><span 屬>・單位</span><span 銜>（職稱）</span>——
   .屬 與 .銜 是 .名 的**兄弟**不是子節點，而 CSS 只給了 .名 顏色，
   另外兩段就繼承外層的深色，看起來像「單位特別深」。
   （2026-09-05 改成這個格式時漏掉的；營運長 2026-09-06：我只說用點點分開，沒要你動顏色。） */
.製作團隊 .屬, .製作團隊 .銜 { color: var(--text-2); font-weight: 400; }

/* 行動呼籲那一段收成兩行（營運長 2026-09-06：兩行就好，不要三行）。
   量出來：整段文字單行要 1069px，所以兩行至少要 535px，原本 max-width 是 60ch＝504px
   —— 差一點點就被擠成三行。放到 600px，版心有 1132px 放得下。 */
.呼籲 p { max-width: 600px; }

/* 社群圖示跟名字同色（營運長 2026-09-06）。
   .社群 a 原本是 var(--text)（深色），名字是 var(--text-2)，同一列兩種深淺。
   只改團隊名單這一處——人物卡等其他地方他沒說，不動。 */
.製作團隊 .社群 a { color: var(--text-2); }

/* 條列可以關掉圓點（營運長 2026-09-06：沒讓我選卻自己冒出點點） */
.條列.條列-無點 { list-style: none; padding-left: 0; }


/* ── 議題關鍵字雲（2026-09-07）──────────────────
   字的大小＝被提到的次數（四級，取自 9 級字階的 f-4／f-5／f-6／f-7）。
   🔴 詞是 span 不是連結：雲是一張畫，不是導覽（營運長 2026-09-07 選「不能點」）。
   顏色四個一輪、不隨機；深淺主題各一組（見 :root 的 --詞色-*）。 */
/* 內文右邊那一片空白＝雲的位置（營運長 2026-09-07 圈給我看的地方）。
   內文的文字寬只有 --文寬（600px），右邊本來就空著；把議題雲搬進 .內文旁。
   ⚠️ 1024px 以下改成上下排：窄螢幕硬擠兩欄，兩邊都不能看。 */
.內文-有旁欄 {
  display: grid; grid-template-columns: minmax(0, var(--文寬)) minmax(0, 1fr);
  gap: var(--s-7); align-items: start;
}
/* 旁欄要跟左邊內容一樣高（align-self: stretch），雲才攤得滿那一片空白，
   按鈕也才有辦法沉到右下角（營運長 2026-09-07：「空白處這麼大，你不要擠在右上角。
   提議題的按鈕在右下角」）。 */
.內文旁 { min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
/* 兩欄本身不要上邊距：.內文 的通用規則會給每個直接子元素 24px，
   左右各吃一份就變成「右欄比左欄低一截」（量出來 24px）。欄距由 gap 決定。 */
.內文-有旁欄 > .內文主, .內文-有旁欄 > .內文旁 { margin-top: 0; }
.內文旁 > .議題段 { display: flex; flex-direction: column; flex: 1 1 auto; }
/* 雲吃掉旁欄剩下的高度；高度由 CSS 給、詞的位置由 排版議題雲_ 算 */
/* 🔴 min-height 不能設大（曾設 420）：旁欄與左欄同一個 grid 列，
   雲一旦比左邊內容高，整列就被撐高，左邊「討論過的議題」與「團隊成員」之間
   就多出一大塊空白（營運長 2026-09-07 抓到）。
   雲只「吃掉左欄給的高度」，不反過來撐它。 */
.內文旁 .議題雲 { flex: 1 1 auto; min-height: 200px; }
/* 桌機：鈕靠右下（09-07 他指定的位置），而且**用絕對定位、不進版面流**。
   🔴 不可以改成用 margin 把它往上挪：議題段是 flex column、雲是 flex:1 1 auto，
   動 margin 就會改到雲的高度 → ResizeObserver → 再排 → 再動 margin，整頁閃到不能看。
   上下位置由 排版議題雲_ 量完最後一行字之後寫 top。 */
.內文旁 .議題段 { position: relative; }
@media (min-width: 1025px) {
  .內文旁 .議題收 { position: absolute; right: 0; margin-top: 0; }
}
.內文旁 .議題收 { align-self: flex-end; }
/* 手機：兩欄收成單欄，鈕改成在雲下方置中（營運長 2026-09-08：「現在偏右了」）。
   靠右是為了貼齊右欄的邊；單欄之後沒有那個邊，靠右就變成莫名其妙地歪一邊。 */
@media (max-width: 1024px) {
  .內文旁 .議題收 { align-self: center; }
}
@media (max-width: 1024px) {
  .內文-有旁欄 { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

.議題段 { margin-top: var(--s-5); }
/* 在旁欄裡不要那個上邊距：欄與欄的距離由 .內文-有旁欄 的 gap 決定，
   多這 24px 會讓雲比左邊的內容低一截（量出來就是 24px）。 */
.內文旁 > .議題段:first-child { margin-top: 0; }
/* 雲是「絕對定位擺出來的」（排版在 排版議題雲_），不是 flex 的一排字。
   高度由程式算完寫進 style，所以這裡不要設 height。 */
/* 🔴 雲會撐滿旁欄，最後一行字底下常常空一段；「我也有議題！」那顆鈕是用負的 margin
   拉上去貼著最後一行字的（見 排版議題雲_），所以鈕會落在**雲的盒子裡面**。
   雲不讓開的話它會攔截點擊，鈕就按不到——2026-09-08 我推上去才被測試抓到。
   雲本來就是一張畫（詞不能點，營運長 2026-09-07 決定的），整塊不吃指標事件；
   只有詞自己吃，滑上去看得到「幾次」的 title。 */
.議題雲 { position: relative; pointer-events: none; }
.議題詞 { pointer-events: auto; }
/* 鈕要畫在雲上面，不然被雲的盒子蓋住 */
.議題收 { position: relative; z-index: 1; }
.議題雲-空 { position: static; }
.議題詞 {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-weight: 700; line-height: 1.2;
}
.議題雲-空 .議題詞 { position: static; }
/* 四級，最小 20px：粗體 20px 以上算 WCAG 的「大字」，對比門檻才是 3:1。
   16px 粗體不算大字（要 18.66px 以上），那一級會讓有顏色的字踩線。 */
.詞級-1 { font-size: 20px; }                     /* qk-allow: 9 級字階的 f-6／f-7／f-8／f-9；這裡要數值，排版要量得到 */
.詞級-2 { font-size: 26px; }                     /* qk-allow: 同上 */
.詞級-3 { font-size: 34px; }                     /* qk-allow: 同上 */
.詞級-4 { font-size: 46px; }                     /* qk-allow: 同上 */
.詞色-1 { color: var(--詞色-1); }
.詞色-2 { color: var(--詞色-2); }
.詞色-3 { color: var(--詞色-3); }
.詞色-4 { color: var(--詞色-4); }
.詞色-5 { color: var(--詞色-5); }
.詞色-6 { color: var(--詞色-6); }
.詞色-7 { color: var(--詞色-7); }
.詞色-8 { color: var(--詞色-8); }
.詞色-9 { color: var(--詞色-9); }
.詞色-10 { color: var(--詞色-10); }

.議題收 { margin-top: var(--s-3); }
.議題表單 {
  margin-top: var(--s-4); padding: var(--s-5);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2);
  max-width: 520px;
}
.議題表單 .提示 { margin-top: 0; }
.議題表單 .鈕列 { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-3); }

/* 後台的幾個數字：規模、轉譯比例、最近七天——用來決定下一場討論什麼 */
.議題數字 { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.議題數字格 {
  display: grid; gap: 2px; min-width: 104px;
  padding: var(--s-3) var(--s-4); background: var(--bg-2); border-radius: var(--r-1);
}
.議題數字格 b { font-size: var(--f-6); line-height: 1.2; }
.議題數字格 span { font-size: var(--f-2); color: var(--text-2); }

/* 後台前十名 */
.議題榜 { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.議題榜列 {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); background: var(--bg-2); border-radius: var(--r-1);
}
.議題榜序 { color: var(--text-3); font-size: var(--f-2); text-align: right; }
.議題榜數 { color: var(--text-2); font-size: var(--f-3); }

/* 拼貼那一格選「完整顯示」時方框要透明，去背的圖才不會被墊一塊灰底
   （營運長 2026-09-08：「方框不要留白，如果上傳去背的圖，方框可以是透明」）。
   .拼圖 平常的 background: var(--bg-2) 是「圖還沒載進來」時的底，
   選填滿時圖一定蓋滿整格，看不到；選完整時就會露出來，所以只在完整時關掉。
   ⚠️ 用 :has() 判斷裡面那張圖是不是完整顯示，不另外掛 class——
   裁切這件事已經由 封面圖片_ 決定並寫成 img 的 class 了，再掛第二個就是同一條規則寫兩處。 */
.拼圖:has(img.封面-完整) { background: none; }

/* 2026-09-08 曾把議題雲改成版心滿寬接在內容下面，營運長當場退回
   （「不是這樣！不能插入中間」），已還原成右欄。這裡不再需要那條規則。 */

/* 有議題雲的頁面：左欄＝內容＋團隊成員／合作單位…，右欄＝雲，右欄跨過整個左欄。
   （營運長 2026-09-08 畫的落版；重組在 程式.js 的 重組旁欄版面_。）
   這樣左欄下面不會再空一塊——原本團隊成員是 .內文 的兄弟，兩欄只包到內文為止。 */
/* DOM 順序刻意是「內容 → 雲 → 團隊成員」（見程式.js 的 重組旁欄版面_）：
   手機收成單欄時就是這個順序（他要雲排在團隊成員之前）。
   桌機再用明確的 grid 座標把團隊成員擺回左欄第二列，看起來仍然接在內容下面。 */
.旁欄版面 {
  display: grid; grid-template-columns: minmax(0, var(--文寬)) minmax(0, 1fr);
  column-gap: var(--s-7); row-gap: 0; align-items: start;
}
.旁欄版面-左 { min-width: 0; grid-column: 1; grid-row: 1; }
.旁欄版面-尾 { min-width: 0; grid-column: 1; grid-row: 2; }
/* 右欄整根拉齊左邊那兩列，雲才攤得滿、按鈕也才沉得到右下角 */
.旁欄版面 > .內文旁 { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
/* 進到左欄的第一個名單區照舊跟內文拉開（.尾區-首 原本是相對於 容 的） */
.旁欄版面-左 > .內文 { margin-top: 0; }
@media (max-width: 1024px) {
  /* 單欄：把桌機的座標解除，讓它照 DOM 順序排（內容 → 雲 → 團隊成員） */
  .旁欄版面 { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .旁欄版面-左, .旁欄版面-尾, .旁欄版面 > .內文旁 { grid-column: 1; grid-row: auto; }
}

/* 區塊卡裡把欄位分成幾群（例：議題雲的「頁面上」與「彈出視窗裡」）。
   同一張卡上兩組字出現在完全不同的地方，不標出來就會改錯（營運長 2026-09-08 就改錯了）。 */
.欄群標 {
  font-size: var(--f-3); font-weight: 600; color: var(--text-2);
  margin: var(--s-5) 0 var(--s-2);
}
.欄群標:first-child { margin-top: 0; }

/* ═══ 手機（iPhone）修正 2026-09-08 ═══════════════════════════════
   營運長 2026-09-08 在 iPhone 上回報的三件事，根因都在這一段。
   ⚠️ 驗這一段一定要用 WebKit（Safari 的引擎），Chrome 完全看不出來。 */

/* ① 一點輸入框整頁就被放大、東西衝出畫面，還要用兩指縮回來。
   根因不是版面：iOS Safari 對「字級小於 16px 的輸入框」會在聚焦時自動把整頁放大，
   而且放大之後不會自己縮回去。站上的輸入框是 --f-4（14px）、搜尋欄 13px、每頁筆數 12px，
   三個都在門檻以下，所以每打一次字就放大一次。
   16px 是 iOS 的門檻值，不是設計選的字級，所以直接寫數值。
   勾選框與選項鈕不吃這條（它們沒有文字、也不會觸發放大）。 */
/* 🔴 一定要用 :is() 把權重撐到 (0,2,1)：
   直接寫 `input, textarea, select` 的話，input 那一支是 (0,1,1) 蓋得過 `.欄 input`，
   但 `select`／`textarea` 只有 (0,0,1)，會輸給 `.分頁每頁 select`(12px)、`.欄 textarea`(14px)、
   `.搜尋欄`(13px)——那三個就繼續放大。第一版就是這樣，量後台才發現（雷區 10 的同一個形狀）。 */
@media (max-width: 800px) {
  :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px;   /* qk-allow: iOS 不放大的門檻值，不是字階 */
  }
}

/* ② 對話框上半段被卡掉看不到。
   罩是 position: fixed 置中，內容比可視範圍高的時候上下都溢出，上面那半捲不到。
   讓罩本身可捲、對話框最高不超過罩，超過就在對話框裡面捲。 */
.罩 { overflow-y: auto; }
.對話 { max-height: 100%; overflow-y: auto; }
/* 對話框裡不要再包框。原本是「白色對話框 → 灰色表單框 → 灰白色提示框」三層，
   營運長 2026-09-08：「不要兩種框顏色有白又有灰很奇怪」。
   而且那三層白吃掉 96px 高，正是手機上半段被擠出畫面的原因之一。
   對話框本身就是那個框，裡面攤平；對話框外的表單（聯絡我們）不受影響。 */
.對話 .議題表單 {
  margin-top: var(--s-3); padding: 0; max-width: none;
  background: none; border: 0; border-radius: 0;
}
/* 個資告知句在對話框裡改成小字，不再是一個搶眼的灰框。
   ⚠️ 這一句是組織個資規範第四條指定的固定告知句，**文字不得改寫、也不得拿掉**
   （營運長 2026-09-08 說「不要這句話」，已跟他說明不能移除）——
   這裡動的只有外觀：把框拿掉、字級收小，讓它不再是進到對話框第一眼最重的東西。 */
.對話 .提示 {
  border: 0; background: none; padding: 0;
  font-size: var(--f-2); color: var(--text-3); margin-bottom: var(--s-4);
}

/* ③ 按鈕被擠成圓形、字被拆成兩行。
   .議題表單 .鈕列 是 flex 且不換行，送出成功後左邊多出「收到了，謝謝你提出來」，
   兩顆按鈕就被壓到只剩 58px 寬、字換行變 60px 高——加上 --r-pill 的圓角，看起來就是兩個圓。
   按鈕不准被壓縮也不准換行；狀態文字塞不下時整條換到自己那一行（12em 是它的最小可讀寬度）。
   同一列裡「文字＋按鈕」的組合站上有三處，一起處理，不要只修議題那一個（雷區 29）。 */
.對話 .鈕列 button, .議題表單 .鈕列 button, .表單 .鈕列 button, .存檔列 button {
  flex: 0 0 auto; white-space: nowrap;
}
.議題表單 .鈕列 { flex-wrap: wrap; }
.議題表單 .鈕列 .狀態文字 { flex: 1 1 12em; min-width: 0; margin: 0; text-align: left; }