diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..090799c
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(python3 -c ' *)"
+    ]
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6f3a291..155422b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5503
 }
\ No newline at end of file
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..b7c7913
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,98 @@
+# 水晶男孩推廣部 — AI 工作上下文
+
+> 這個檔案讓 AI 在任何裝置（家／學校）都能快速恢復上下文。
+> **每次對話做了重要決定，請叫我更新這裡，然後 git commit。**
+
+---
+
+## 專案簡介
+
+水晶男孩（Sechs Kies）推廣粉絲網站。靜態 HTML + PHP + 原生 CSS/JS，無框架。
+站主（Noopy）2016 年入坑，藝廊式創作風格。
+
+---
+
+## 規範速查（詳細見 `developer-rules/rules/`）
+
+| 規範 | 檔案 |
+|------|------|
+| 改檔行為守則（必問再改） | `agent-must-ask.md` |
+| 變更邊界（只改被點名的） | `ai-change-boundaries.md` |
+| CSS 顏色 Token | `color-tokens.md` |
+| 版面視覺預設 | `design-defaults.md` |
+| Git commit 規範 | `git-commit-required.md` |
+| 導覽邏輯（portal-nav） | `portal-nav-rules.md` |
+| 文案語調 | `site-voice.md` |
+
+**最重要的三條：**
+1. 沒說「執行」→ 不改檔
+2. 只改被點名的那一頁／區塊
+3. 改完必附 commit 指令（禁止在 sandbox 跑 git）
+
+---
+
+## 架構重點
+
+- **全站導覽**：`assets/js/portal-nav.js`（`COMING_SOON_PAGES` 控制開放）
+- **全站 CSS**：`assets/css/style.css`（定義所有 color token）
+- **首頁**：`index.html`
+- **站主索引**（自用）：`extra/site-guide.html`（`data-portal-nav-all-open`，不對外）
+- **內頁 header class**：`inner-page-header`（禁改回舊名）
+
+### variety/ 頁面
+
+| 檔案 | 頁面標題 | 說明 |
+|------|----------|------|
+| `variety/bangxiao.html` | 世紀級寶藏 / 爆笑養老院 | 甜蜜負擔計量器；六人卡片選取 + jQuery 計算；CTA → `totoga2/ebook.html` |
+| `variety/variety-shows.html` | 全員發瘋 | 綜藝節目存檔表；tabs + 搜尋；已對齊 albums.html 扁平結構 |
+| `variety/NJTW/NJTW5.html` | 新西遊記5 | 各自暴走專頁 |
+
+---
+
+## portal-nav 操作守則（血淚版）
+
+> 每次新增或修改導覽，必須先讀這裡再動手。
+
+1. **先查 `extra/site-guide.html` 確認層級**，再動 `portal-nav.js`。  
+   site-guide 的 depth 數字 = nav 的層級：depth-1 是第一層 `<li>`，depth-2 是子選單項目，depth-3 是 subgroup 裡的巢狀項目。
+
+2. **`COMING_SOON_PAGES` 只放檔名**（不含路徑）。  
+   `normalizePageKey` 只取 href 最後一段，所以 `variety/bangxiao.html` → 比對 `bangxiao.html`。
+
+3. **直接連結不需要 subgroup**。  
+   子選單內只要 `<li><a>` 就夠；`portal-nav__subgroup` 只在該項目還有巢狀子項目時才用（例如「傳奇的轉折」有時間軸、電子書等四項）。
+
+4. **site-guide.html 要同步更新**，否則站主索引頁會顯示舊名稱。
+
+5. **commit 前網站不會更新**。本地端強制重整用 `Ctrl+Shift+R`；GitHub Pages 需 `git push` 後等約 1 分鐘。
+
+---
+
+## 目前工作狀態
+
+<!-- 每次對話結束後更新這個區塊 -->
+
+**最後更新：** 2026-07-28
+
+**進行中：**
+- 推廣部內容管理系統第一階段：已建立 PHP/PDO/MySQL 後臺骨架，待在 XAMPP 匯入 schema 後進行瀏覽器整合測試
+
+**待確認：**
+- developer-rules 健檢尚未執行
+
+**已完成：**
+- 建立 AGENTS.md 跨裝置上下文檔案
+- 新增 `variety/bangxiao.html`（世紀級寶藏 / 爆笑養老院，甜蜜負擔計量器）
+- `variety/variety-shows.html` 重構：移除多層包裝，對齊 albums.html 扁平結構
+- portal-nav 新增世紀級寶藏，正確放入淪陷瞬間子選單
+- `extra/site-guide.html` 同步更新：全員發瘋 → 世紀級寶藏
+- 新增 `admin/` 推廣部後臺第一階段：登入、控制台、管理者帳號、通用 CRUD、媒體上傳及公開狀態總覽
+
+---
+
+## 如何使用這個檔案
+
+換裝置後，告訴 AI：
+> 「請先讀 AGENTS.md，再讀 developer-rules/rules/ 裡的所有規範，然後繼續 [任務]。」
+
+## Imported Claude Cowork project instructions
diff --git a/SECHSKIES_2026_Calendar_Notion_Export.md b/SECHSKIES_2026_Calendar_Notion_Export.md
new file mode 100644
index 0000000..7ea90b1
--- /dev/null
+++ b/SECHSKIES_2026_Calendar_Notion_Export.md
@@ -0,0 +1,71 @@
+# 💛 SECHSKIES 2026 水晶男孩專屬萬年曆 & 專案對話總覽 (Notion 格式)
+
+> **專案說明**：本頁面為水晶男孩（SECHSKIES）推廣網站後端課程「萬年曆」專案統整檔，適合直接複製並貼上至 Notion 頁面。
+
+---
+
+## 📌 2026 水晶男孩專屬萬年曆事件表 (1 ~ 12 月)
+
+| 月份 | 日期 | 分類 | 紀念日名稱 | 描述 / 現場圖片與連結 |
+| :--- | :--- | :--- | :--- | :--- |
+| **1 月** | 01/21 - 01/22 | 🎤 演唱會 | Yellow Note Final 首爾演唱會 | 2017 首爾終場演唱會 (`assets/images/concert/2017.jpg`) |
+| **2 月** | 02/22 | 🎂 生日 | **姜成勳 生日** | 1980.02.22 Main Vocal (👉 [查看姜成勳介紹](member/member.html#poster-ksh)) |
+| **3 月** | 03/06 - 03/08 | 🎤 演唱會 | ACCESS 首爾演唱會 | 2020 SECHSKIES Concert [ACCESS] (`assets/images/concert/2020.jpg`) |
+| | 03/23 | 🌟 出道 | J-Walk 組合出道日 | 2002.03.23 金在德與張水院發行首張專輯《Suddenly》 |
+| **4 月** | 04/14 | 🌟 重逢 | 無限挑戰六六歌2 上岩黃海重逢日 | 2016.04.14 上岩游擊演唱會16年後重逢 (`assets/images/totoga2/toto1.png`) |
+| | 04/15 | 🌟 出道 | **SECHSKIES 團體出道紀念日** | 1997.04.15 水晶男孩正式出道，傳奇盛世起點！ |
+| **5 月** | 05/18 | 🌟 紀念 | 水晶男孩告別宣佈日 | 2000.05.18 告別紀念 |
+| | 05/24 | 🌟 出道 | 姜成勳 Solo 出道日 | 2001.05.24 首張專輯《In Connection》 |
+| **6 月** | 06/08 | 🎂 生日 | **殷志源 生日** | 1978.06.08 Leader · Rap · Dance (👉 [查看殷志源介紹](member/member.html#poster-ejw)) |
+| **7 月** | 07/01 | 🎂 生日 | **高志溶 生日** | 1980.07.01 Vocal (👉 [查看高志溶介紹](member/member.html#poster-kjy)) |
+| | 07/13 | 🎂 生日 | **李宰鎮 生日** | 1979.07.13 Rap · Dance (👉 [查看李宰鎮介紹](member/member.html#poster-ljj)) |
+| | 07/16 | 🎂 生日 | **張水院 生日** | 1980.07.16 Vocal (👉 [查看張水院介紹](member/member.html#poster-jsw)) |
+| **8 月** | 08/07 | 🎂 生日 | **金在德 生日** | 1979.08.07 Rap · Dance (👉 [查看金在德介紹](member/member.html#poster-kjd)) |
+| **9 月** | 09/10 - 09/11 | 🎤 演唱會 | Yellow Note 演唱會 (二安日) | 2016 黃海 6 分鐘喊聲喚回二安舞台 (`assets/images/concert/2016.jpg`) |
+| | 09/23 | 🎤 演唱會 | 20 週年高尺巨蛋演唱會 | 2017 20th Anniversary Concert (`assets/images/concert/2017.jpg`) |
+| **10 月** | 10/01 | 🎤 演唱會 | BOF 釜山演唱會 | 2016 60台遊覽車 6000人黃海盛況 (`assets/images/mission-balloon-sea.png`) |
+| | 10/07 | 🌟 回歸 | 《三個詞 Three Words》發行日 | 2016.10.07 回歸單曲音源發行日 |
+| | 10/13 - 10/14 | 🎤 演唱會 | YELLOFANTASY 22週年演唱會 | 2018 SECHSKIES 2018 CONCERT (`assets/images/concert/2018.jpg`) |
+| | 10/27 | 🌟 出道 | 殷志源 Solo 出道日 | 2000.10.27 單曲《A-Ha》/《G Pop》 |
+| **11 月** | 11/19 | 🌟 出道 | 李宰鎮 Solo 出道日 | 2001.11.19 首張專輯《S.Double.J》 |
+
+---
+
+## 🎂 全員 6 位成員生日官方權威對照表
+
+- 💛 **殷志源 (EUN JI WON)**：1978 年 6 月 8 日 (06/08)
+- 💛 **李宰鎮 (LEE JAE JIN)**：1979 年 7 月 13 日 (07/13)
+- 💛 **金在德 (KIM JAE DUC)**：1979 年 8 月 7 日 (08/07) *(Namuwiki 查證正名)*
+- 💛 **姜成勳 (KANG SUNG HOON)**：1980 年 2 月 22 日 (02/22)
+- 💛 **高志溶 (KO JI YONG)**：1980 年 7 月 1 日 (07/01)
+- 💛 **張水院 (JANG SU WON)**：1980 年 7 月 16 日 (07/16)
+
+---
+
+## 🔗 萬年曆點擊跳轉對照連結
+
+在 `calendar2026.html` 萬年曆頁面中，點擊成員圖片可直接跳轉至成員介紹頁：
+
+1. **殷志源** ➔ `member/member.html#poster-ejw`
+2. **李宰鎮** ➔ `member/member.html#poster-ljj`
+3. **金在德** ➔ `member/member.html#poster-kjd`
+4. **姜成勳** ➔ `member/member.html#poster-ksh`
+5. **高志溶** ➔ `member/member.html#poster-kjy`
+6. **張水院** ➔ `member/member.html#poster-jsw`
+
+---
+
+## 🛠️ 本次對話修改與建立檔案
+
+- `calendar2026.html`：萬年曆主頁面（含網格計算、篩選標籤、Modal 與圖片連結）
+- `assets/css/calendar.css`：萬年曆專用 CSS 樣式
+- `member/member.html`：修正白水晶姜成勳與高志溶肖像圖檔錯置問題
+
+---
+
+## 💻 Git Commit 指令紀錄
+
+```bash
+git add calendar2026.html assets/css/calendar.css member/member.html
+git commit -m "feat: 完成 2026 水晶專屬萬年曆，更正金在德生日與六顆水晶成員照片"
+```
diff --git a/SECHSKIES_Calendar2026_Design_Notes.md b/SECHSKIES_Calendar2026_Design_Notes.md
new file mode 100644
index 0000000..e501271
--- /dev/null
+++ b/SECHSKIES_Calendar2026_Design_Notes.md
@@ -0,0 +1,133 @@
+# 水晶萬年曆 2026 — 設計決策與改版重點
+
+> 來源：Cursor 對話串整理（可直接貼 Notion）  
+> 範圍：`calendar2026.html`、`assets/css/calendar.css`  
+> 日期：2026-07
+
+---
+
+## 一、站主設計偏好（從公開頁歸納）
+
+對照已公開頁（首頁、bangxiao、variety-shows、ebook、NJTW5）讀到的設計感：
+
+| 面向 | 偏好 |
+|------|------|
+| 色調 | 頁面黑底，內容落在奶油色 section；金 `#ffcc00` 當點綴／底線，不當整片 UI 底色 |
+| 氣氛 | 偶像粉絲紀念冊、藝廊策展，不是生產力工具／SaaS 儀表板 |
+| 版型 | 單欄敘事、扁平區塊；卡片只在「要互動」時出現 |
+| 元件 | 金色實心膠囊按鈕、淺底 tabs；陰影溫柔；glow 只用在重點字 |
+| 文案感 | 溫柔策展、具體回憶，不堆 emoji 狀態列 |
+
+### 萬年曆初期違和點
+
+- 深色玻璃卡片、霓虹色事件點（紅／綠／橘 glow）
+- 篩選 chip＋emoji（🎂🌟🎤）
+- 側欄內嵌捲軸
+- 整體偏「AI 日曆 dashboard」，與全站暖紙面藝廊感不符
+
+---
+
+## 二、改版原則（站主明確指示）
+
+### ✅ 可以做
+
+- **只改設計感（換皮）**：顏色、字級、陰影、圓角、照片呈現
+- 對齊全站暖紙面 section 視覺
+- 用 color token，避免硬寫霓虹色
+
+### ❌ 不可以做
+
+- **不要擅自改版型**（例：雙欄改單欄）
+- 沒說「執行」前不應改檔（本次站主後來說直接做）
+- 只改被點名的頁／區塊
+
+> 站主原話重點：  
+> 「我只覺擬改設計，沒有叫你動版型」
+
+---
+
+## 三、已落地的視覺調整
+
+### 整體皮
+
+- 深色玻璃卡 → 暖色 `section` 卡（`--color-surface` / `--color-surface-soft`）
+- 控制列與篩選：淺底膠囊＋金色 active
+- 日期格、週末色、today／selected：低調暖色系
+- 事件點統一品牌金，拿掉多色霓虹
+- Modal 改暖紙底
+
+### 版型（維持原狀）
+
+- `calendar-layout` **維持雙欄**（`1fr 380px`）
+- 手機 `max-width: 900px` 才改單欄
+
+---
+
+## 四、成員／演唱會照片規則（重點）
+
+### 站主意圖
+
+- **要曬成員美照**，不是小頭像＋蛋糕 icon
+- 成員名字要清楚可見
+- 不要一堆 🎂 之類花字
+- 右側生日卡可上下排（圖上、字下）
+
+### 裁切規則（A4）
+
+| 規則 | 說明 |
+|------|------|
+| 外框比例 | **A4 直式**（`aspect-ratio: 210 / 297`） |
+| 填滿方式 | `object-fit: cover`（**不留黑邊**） |
+| 縮放原則 | 以 A4 為裁切框，放大縮小盡量保留原圖主體 |
+| 對焦 | `object-position: center 28%`（優先臉／上半身） |
+
+> 站主原話重點：  
+> 「以 A4 尺寸為裁切尺寸，放大縮小盡量保持原本的圖」  
+> 「怎麼有留黑」→ 禁止用 `contain` 造成黑邊
+
+### 適用範圍（必須一致）
+
+- ✅ 右側生日卡
+- ✅ 右側演唱會卡
+- ✅ Modal 演唱會圖
+- ❌ 不可只改生日、漏掉演唱會
+
+### 右側生日卡版型
+
+- **上下排**：照片在上、名字／英文／日期在下
+- 照片用 A4 比例大圖卡（海報感）
+- 標題顯示成員名，不顯示「生日快樂🎂」
+
+---
+
+## 五、文案／顯示清理
+
+- 篩選按鈕拿掉 emoji（成員生日／出道重逢／演唱會）
+- 事件標題顯示時清掉 `🎂🌟🎤`
+- 生日卡拿掉蛋糕 icon
+- Modal 生日標題改成員名
+
+---
+
+## 六、待確認／可選下一步
+
+- [ ] 不同成員圖各自對焦點微調（例：`center 20%` / `center 35%`）
+- [ ] 相紙邊框／海報感細節
+- [ ] 字級層級、卡片密度再微調
+- [ ] 是否要把月曆格內生日照再放大
+
+---
+
+## 七、相關檔案
+
+| 檔案 | 用途 |
+|------|------|
+| `calendar2026.html` | 萬年曆頁面與 JS 邏輯 |
+| `assets/css/calendar.css` | 萬年曆專用樣式（本次主要改動） |
+| `assets/css/style.css` | 全站 color token |
+
+---
+
+## 八、一句話結論
+
+> 萬年曆只換皮、不換版型；右側生日／演唱會照以 **A4 裁切框＋cover 填滿** 曬海報，不留黑邊、不堆蛋糕 emoji，成員名字要清楚。
diff --git a/SECHSKIES_Crystal_Dance_Survey_Notion_Export.md b/SECHSKIES_Crystal_Dance_Survey_Notion_Export.md
new file mode 100644
index 0000000..74d2b85
--- /dev/null
+++ b/SECHSKIES_Crystal_Dance_Survey_Notion_Export.md
@@ -0,0 +1,170 @@
+# 水晶熱舞社頁面改版對話紀錄
+
+> 來源：`yellow-note/crystal-dance-survey.html` 改版討論  
+> 日期：2026-07-09  
+> 用途：可貼上 Notion 的整理稿
+
+---
+
+## 一、任務目標
+
+把 **水晶熱舞社** 頁（`yellow-note/crystal-dance-survey.html`）從「自創黃框、多層卡片、閱讀擁擠」改成：
+
+1. **對齊首頁／全站簡約風格**（黑底 + 白卡片 + 品牌黃）
+2. **多套用全站 CSS**（`style.css` 的 `section`、`.section-title`、`.card` 語彙）
+3. **熱舞社相關內容不刪**（可改外觀與排版）
+4. **Bootstrap class 必須保留**（作業要求）
+5. **表單區參考「見面會應援調查表」的 summer-form 邊框排版**，顏色仍用全站黃色 token
+
+---
+
+## 二、核心原則（這次定下來的）
+
+| 原則 | 說明 |
+|------|------|
+| 內容優先 | 跟熱舞社相關的資訊不要刪；外觀排版可以改 |
+| 只改被點名的頁 | 主要動 `crystal-dance-survey.html` |
+| Bootstrap 保留 | `row` / `col` / `form-control` / `form-select` / `btn-check` / `ratio` 等 class 留下 |
+| 顏色不動 | 用全站 `--color-brand` 系列，不改成參考圖的藍 |
+| 美感對齊 | 參考 index 簡約乾淨 + 參考圖的留白與分階段框線 |
+
+---
+
+## 三、舊版問題診斷
+
+### 為什麼「怎麼看都不順眼」
+
+1. **雙重／三重卡片**  
+   全站 `section` 本身已是圓角白卡片，頁內又加 `video-card`、`song-card`、`form-panel` → 盒子套盒子。
+
+2. **約 400 行 inline CSS 重做設計系統**  
+   全站已有 `.card`、`.section-title`，卻自創多套黃框樣式。
+
+3. **`info-card` 深色漸層突兀**  
+   跟全站暖白、輕盈感相反。
+
+4. **導覽太吵**  
+   五顆黃色 pill 按鈕搶眼；首頁錨點是低調文字列。
+
+5. **UX 問題（後續回饋）**  
+   - 表單左右分欄難讀  
+   - 標題跟內容距離太近  
+   - 主影片寬度沒跟下方三支影片左右對齊  
+   - 文字擠在一起、閱讀節奏差
+
+---
+
+## 四、結構重組（6 區 → 3 區）
+
+### 備份
+
+```
+yellow-note/crystal-dance-survey.backup-2026-07-09.html
+```
+
+（本地備份；改動前版本）
+
+### 新架構
+
+| 新區塊 | ID | 合併來源 | 合併理由 |
+|--------|-----|----------|----------|
+| ① 認識水晶熱舞社 | `#about` | Hero + 熱舞社介紹 | 都在回答「這是什麼」 |
+| ② 從 20TH 到 30TH | `#from-20th-to-30th` | 20TH 影片回顧 + 30TH 應援募集敘事 | 同一條時間軸：過去記憶 → 未來募集 |
+| ③ 30TH 應援募集表單 | `#form-30th` | 表單區獨立 | Bootstrap 表單作業清楚；敘事講完才行動 |
+
+### 移除
+
+- 整個 **經典舞曲區**（`#song-archive` 四張 song-card）
+- 歌曲資訊不丟：表單「想練的歌曲」`<select>` 仍保留 Couple / Com' Back / Road Fighter / Pom Saeng Pom Sa / 其他
+
+---
+
+## 五、視覺與版型決策
+
+### 對齊全站
+
+- 骨架：`inner-page-header` → `portal-nav` → `particles` → `container` → `section`
+- 大區塊靠全站 `section` 白卡片浮在星空底上
+- 避免 section 內再套一層 `.card`（影片／表單尤甚）
+
+### 影片區
+
+- 主影片與下方三支延伸影片包在同一 `video-grid`
+- **主影片寬度與下方三欄左右切齊**（拿掉主影片單獨 `max-width: 720px` 置中）
+
+### 間距與閱讀
+
+- `.section-title` 與內文拉開（約 `2rem`）
+- 段落行高約 `1.9`、段間距加大
+- 子標題（延伸閱讀、30TH）上方留白加大，避免貼住上一段
+
+---
+
+## 六、表單：summer-form 風格
+
+參考「見面會應援調查表」的**排版結構**，**顏色維持全站黃**：
+
+### 結構
+
+1. **填寫須知**（淡黃底邊框盒）
+2. **第一階段｜參與者基本資料**（暱稱、Email、練舞年數、可參與日期）
+3. **第二階段｜30TH 參與意向**（20TH 經驗、參與內容複選）
+4. **第三階段｜應援內容與祝福**（歌曲、上傳、留言）
+5. **底部按鈕**（重新填寫 / 送出並排）
+
+### 排版特徵
+
+- 階段標題在邊框盒**上方**、左對齊
+- 每階段獨立 `summer-form__stage-body`（圓角細邊框）
+- label 在上、輸入在下（單欄垂直流）
+- 不用表單左右分欄
+- Bootstrap class 全保留
+
+### Class 命名（頁面專用）
+
+- `.summer-form`
+- `.summer-form__stage`
+- `.summer-form__stage-title`
+- `.summer-form__stage-body`
+- `.summer-form__stage-body--notice`
+- `.summer-form__option-row`
+- `.summer-form__actions`
+
+---
+
+## 七、必須保留的 Bootstrap class（作業）
+
+```html
+row / col-* / g-*
+form-label / form-control / form-select / form-text
+btn-check / btn
+ratio / ratio-16x9
+d-flex / flex-wrap / gap-* / mt-*
+```
+
+---
+
+## 八、Git 狀態（對話當時）
+
+- Commit：`a977e78`  
+  `refactor: 水晶熱舞社頁面重組為三區並對齊全站簡約風格`
+- 已 push 至 `origin/main`（後續還有本地再改：間距、影片對齊、summer-form）
+- 後續的 summer-form／間距微調若尚未再 commit，需另開 commit
+
+---
+
+## 九、給下次改這頁的檢查清單
+
+- [ ] 熱舞社敘事、20TH 影片、30TH 募集說明、表單欄位是否都在
+- [ ] 是否又出現「section 外套 + 內層黃框」雙重卡片
+- [ ] 主影片是否與下方三支左右對齊
+- [ ] 表單是否單欄分階段（summer-form），沒有左右表單／須知分欄
+- [ ] 標題與內文、區塊與區塊是否有足夠留白
+- [ ] Bootstrap 必要 class 是否還在
+- [ ] 顏色是否仍用 `--color-brand` 系列（沒偷換成藍色）
+
+---
+
+## 十、一句話總結
+
+> **讓 Bootstrap 負責格線與表單元件，讓 `style.css` 負責全站美感；頁面專用 CSS 只補缺口。內容依敘事合三區，表單用 summer-form 分階段邊框，顏色不動。**
diff --git a/admin/admins.php b/admin/admins.php
new file mode 100644
index 0000000..324713f
--- /dev/null
+++ b/admin/admins.php
@@ -0,0 +1,35 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+require_login();
+$error = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    verify_csrf();
+    $action = (string) ($_POST['action'] ?? 'create');
+    if ($action === 'create') {
+        $username = trim((string) ($_POST['username'] ?? ''));
+        $name = trim((string) ($_POST['display_name'] ?? ''));
+        $password = (string) ($_POST['password'] ?? '');
+        if (!preg_match('/^[A-Za-z0-9_.-]{4,50}$/', $username) || mb_strlen($name) < 2 || strlen($password) < 10) {
+            $error = '請確認帳號、名稱與至少 10 字元的密碼。';
+        } else {
+            try {
+                $stmt = db()->prepare('INSERT INTO admin_users (username, password_hash, display_name, email) VALUES (?, ?, ?, ?)');
+                $stmt->execute([$username, password_hash($password, PASSWORD_DEFAULT), $name, trim((string) ($_POST['email'] ?? '')) ?: null]);
+                audit('create', 'admin_users', (int) db()->lastInsertId());
+                flash('success', '管理者已新增。'); redirect('admins.php');
+            } catch (PDOException $e) { $error = '帳號已存在或資料格式不正確。'; }
+        }
+    } elseif ($action === 'toggle') {
+        $id = (int) ($_POST['id'] ?? 0);
+        if ($id === (int) $_SESSION['admin_id']) $error = '不能停用目前登入的帳號。';
+        else { db()->prepare('UPDATE admin_users SET is_active = 1 - is_active WHERE id = ?')->execute([$id]); audit('toggle', 'admin_users', $id); flash('success', '帳號狀態已更新。'); redirect('admins.php'); }
+    }
+}
+$users = db()->query('SELECT id, username, display_name, email, is_active, last_login_at, created_at FROM admin_users ORDER BY id')->fetchAll();
+render_header('管理者帳號', 'admins');
+?>
+<?php if ($error): ?><div class="notice notice--error"><?= h($error) ?></div><?php endif; ?>
+<section class="panel"><div class="panel__head"><div><h2>新增管理者</h2><p>密碼使用不可逆雜湊儲存</p></div></div><form class="inline-form" method="post"><input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>"><input type="hidden" name="action" value="create"><label>登入帳號<input name="username" required></label><label>顯示名稱<input name="display_name" required></label><label>電子信箱<input name="email" type="email"></label><label>密碼<input name="password" type="password" minlength="10" required></label><button class="button button--primary" type="submit">新增帳號</button></form></section>
+<section class="panel"><div class="panel__head"><div><h2>帳號清單</h2><p>停用帳號後將無法登入</p></div></div><div class="table-wrap"><table><thead><tr><th>帳號</th><th>顯示名稱</th><th>信箱</th><th>最後登入</th><th>狀態</th><th>操作</th></tr></thead><tbody><?php foreach ($users as $user): ?><tr><td><?= h($user['username']) ?></td><td><?= h($user['display_name']) ?></td><td><?= h($user['email']) ?></td><td><?= h($user['last_login_at'] ?? '尚未登入') ?></td><td><span class="status status--<?= $user['is_active'] ? 'published' : 'archived' ?>"><?= $user['is_active'] ? '啟用' : '停用' ?></span></td><td><form method="post" data-confirm="確定變更此管理者狀態？"><input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>"><input type="hidden" name="action" value="toggle"><input type="hidden" name="id" value="<?= (int) $user['id'] ?>"><button class="table-button" type="submit" <?= (int) $user['id'] === (int) $_SESSION['admin_id'] ? 'disabled' : '' ?>><?= $user['is_active'] ? '停用' : '啟用' ?></button></form></td></tr><?php endforeach; ?></tbody></table></div></section>
+<?php render_footer();
diff --git a/admin/assets/admin.css b/admin/assets/admin.css
new file mode 100644
index 0000000..55dd974
--- /dev/null
+++ b/admin/assets/admin.css
@@ -0,0 +1,141 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
+
+:root {
+    --color-brand: #ffcc00;
+    --color-brand-light: #fceea7;
+    --color-brand-dark: #4e492b;
+    --color-bg: #0a0a0a;
+    --color-bg-raised: #1a1a1a;
+    --color-bg-alt: #fcfaf2;
+    --color-surface: #fffdf7;
+    --color-surface-soft: #fff9e8;
+    --color-text: #333333;
+    --color-text-dark: #1a1a1a;
+    --color-text-muted: #4d4d4d;
+    --color-text-inverse: #f4f4f4;
+}
+
+* { box-sizing: border-box; }
+html { min-height: 100%; background: var(--color-bg); }
+body { margin: 0; min-height: 100vh; font-family: 'Noto Sans TC', system-ui, sans-serif; color: var(--color-text); background: var(--color-bg-alt); }
+a { color: inherit; }
+button, input, select, textarea { font: inherit; }
+button, .button { min-height: 42px; }
+
+.admin-topbar { position: sticky; z-index: 20; top: 0; min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: var(--color-text-inverse); background: var(--color-bg); border-bottom: 1px solid rgba(255, 204, 0, .3); }
+.admin-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; letter-spacing: .06em; }
+.admin-brand i { color: var(--color-brand); }
+.admin-brand small { padding-left: 10px; color: var(--color-brand-light); border-left: 1px solid rgba(255, 255, 255, .25); font-weight: 500; }
+.admin-topbar__actions { display: flex; align-items: center; gap: 18px; font-size: .9rem; }
+.admin-topbar__actions a { color: var(--color-brand-light); text-decoration: none; }
+
+.admin-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - 68px); }
+.admin-sidebar { padding: 24px 16px; color: var(--color-text-inverse); background: var(--color-bg-raised); }
+.admin-sidebar nav { position: sticky; top: 92px; }
+.admin-sidebar p { margin: 24px 12px 8px; color: var(--color-brand-light); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
+.admin-sidebar a { display: flex; align-items: center; gap: 11px; min-height: 43px; margin: 3px 0; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--color-text-inverse); }
+.admin-sidebar a:hover { background: rgba(255, 255, 255, .08); }
+.admin-sidebar a.active { color: var(--color-text-dark); background: var(--color-brand); font-weight: 800; }
+.admin-sidebar i { width: 20px; text-align: center; }
+
+.admin-main { width: 100%; max-width: 1540px; padding: clamp(24px, 4vw, 48px); overflow: hidden; }
+.sidebar-toggle { display: none; border: 0; color: var(--color-text-inverse); background: var(--color-bg); border-radius: 8px; }
+.page-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
+.page-heading h1 { margin: 3px 0 0; color: var(--color-text-dark); font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.2; }
+.eyebrow { margin: 0; color: var(--color-brand-dark); font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
+
+.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
+.stat-card { position: relative; min-height: 148px; padding: 24px; overflow: hidden; border: 1px solid rgba(78, 73, 43, .2); border-radius: 16px; background: var(--color-surface); box-shadow: 0 12px 28px rgba(10, 10, 10, .06); }
+.stat-card span { display: block; color: var(--color-text-muted); font-size: .9rem; }
+.stat-card strong { display: block; margin-top: 8px; color: var(--color-text-dark); font-size: 2.35rem; }
+.stat-card i { position: absolute; right: 20px; bottom: 12px; color: rgba(78, 73, 43, .16); font-size: 3.6rem; }
+
+.panel { margin-bottom: 24px; padding: 0; border: 1px solid rgba(78, 73, 43, .2); border-radius: 16px; background: var(--color-surface); box-shadow: 0 12px 28px rgba(10, 10, 10, .05); overflow: hidden; }
+.panel__head { display: flex; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid rgba(78, 73, 43, .14); }
+.panel__head h2 { margin: 0; color: var(--color-text-dark); font-size: 1.1rem; }
+.panel__head p { margin: 4px 0 0; color: var(--color-text-muted); font-size: .86rem; }
+.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 20px; }
+.module-grid a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; min-height: 62px; padding: 12px 15px; border: 1px solid rgba(78, 73, 43, .16); border-radius: 10px; text-decoration: none; background: var(--color-surface-soft); }
+.module-grid a:hover { border-color: var(--color-brand); }
+.module-grid i { color: var(--color-brand-dark); font-size: 1.2rem; }
+.module-grid strong { color: var(--color-text-dark); font-size: 1.15rem; }
+
+.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
+.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.search { position: relative; }
+.search i { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: var(--color-text-muted); }
+.search input { padding-left: 38px; }
+input, select, textarea { width: 100%; padding: 10px 12px; color: var(--color-text); background: var(--color-surface); border: 1px solid rgba(78, 73, 43, .38); border-radius: 8px; }
+input:focus, select:focus, textarea:focus { outline: 3px solid rgba(255, 204, 0, .3); border-color: var(--color-brand-dark); }
+.filters input { width: min(320px, 70vw); }
+.filters select { width: auto; min-width: 135px; }
+.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border: 1px solid rgba(78, 73, 43, .35); border-radius: 8px; color: var(--color-text-dark); background: var(--color-surface); text-decoration: none; cursor: pointer; white-space: nowrap; }
+.button--primary { color: var(--color-text-dark); background: var(--color-brand); border-color: var(--color-brand); font-weight: 800; }
+.button:hover { filter: brightness(.97); }
+
+.table-wrap { width: 100%; overflow-x: auto; }
+table { width: 100%; border-collapse: collapse; white-space: nowrap; }
+th, td { padding: 14px 16px; border-bottom: 1px solid rgba(78, 73, 43, .13); text-align: left; font-size: .88rem; }
+th { color: var(--color-brand-dark); background: var(--color-surface-soft); font-size: .77rem; letter-spacing: .04em; }
+tbody tr:hover { background: rgba(255, 204, 0, .06); }
+.actions { display: flex; align-items: center; gap: 12px; }
+.actions a, .actions button, .table-button { padding: 0; border: 0; color: var(--color-brand-dark); background: transparent; cursor: pointer; text-decoration: underline; }
+.actions button { color: var(--color-brand-dark); font-weight: 700; }
+.table-button:disabled { color: var(--color-text-muted); cursor: not-allowed; }
+.empty { padding: 42px; text-align: center; color: var(--color-text-muted); }
+.status { display: inline-flex; align-items: center; justify-content: center; min-width: 66px; padding: 4px 9px; border-radius: 999px; font-size: .75rem; font-weight: 800; }
+.status--published, .status--available { color: var(--color-brand-dark); background: var(--color-brand-light); }
+.status--coming_soon { color: var(--color-brand-dark); background: var(--color-brand-light); }
+.status--draft { color: var(--color-text-muted); background: rgba(77, 77, 77, .12); }
+.status--archived { color: var(--color-text-muted); background: rgba(77, 77, 77, .12); }
+.pagination { display: flex; justify-content: center; gap: 7px; padding: 18px; }
+.pagination a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(78, 73, 43, .25); border-radius: 7px; text-decoration: none; }
+.pagination a.active { color: var(--color-text-dark); background: var(--color-brand); border-color: var(--color-brand); font-weight: 800; }
+
+.notice { margin-bottom: 20px; padding: 14px 17px; border-radius: 9px; border: 1px solid rgba(78, 73, 43, .25); background: var(--color-surface); }
+.notice--success { color: var(--color-brand-dark); border-color: rgba(78, 73, 43, .3); background: var(--color-brand-light); }
+.notice--error { color: var(--color-text-dark); border-color: rgba(78, 73, 43, .4); background: var(--color-surface-soft); }
+.notice--warning { color: var(--color-brand-dark); background: var(--color-brand-light); }
+
+.editor { padding: clamp(20px, 4vw, 34px); }
+.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
+.field { display: flex; flex-direction: column; gap: 7px; color: var(--color-text-muted); font-size: .87rem; font-weight: 700; }
+.field--wide { grid-column: 1 / -1; }
+.field small { font-weight: 400; overflow-wrap: anywhere; }
+.check { display: flex; align-items: center; min-height: 43px; gap: 8px; }
+.check input { width: auto; }
+.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(78, 73, 43, .14); }
+.inline-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 14px; padding: 22px; }
+.inline-form label { display: flex; flex-direction: column; gap: 6px; color: var(--color-text-muted); font-size: .82rem; font-weight: 700; }
+
+.auth-page { display: grid; place-items: center; padding: 24px; color: var(--color-text-inverse); background: var(--color-bg); background-image: radial-gradient(circle at 20% 10%, rgba(255, 204, 0, .16), transparent 32%), radial-gradient(circle at 80% 90%, rgba(252, 238, 167, .1), transparent 34%); }
+.auth-card { width: min(460px, 100%); padding: clamp(28px, 6vw, 48px); border: 1px solid rgba(255, 204, 0, .35); border-radius: 20px; background: var(--color-bg-raised); box-shadow: 0 26px 80px rgba(0, 0, 0, .45); }
+.auth-card h1 { margin: 7px 0 10px; color: var(--color-text-inverse); text-align: center; }
+.auth-card > p { color: var(--color-brand-light); text-align: center; }
+.auth-card .eyebrow { color: var(--color-brand); }
+.auth-gem { color: var(--color-brand); font-size: 2.5rem; text-align: center; }
+.auth-card form { display: flex; flex-direction: column; gap: 17px; margin-top: 28px; }
+.auth-card label { display: flex; flex-direction: column; gap: 7px; color: var(--color-text-inverse); font-size: .9rem; }
+.auth-card input { color: var(--color-text-inverse); background: var(--color-bg); border-color: rgba(255, 204, 0, .36); }
+.auth-card .text-link { color: var(--color-brand-light); text-align: center; font-size: .86rem; }
+
+@media (max-width: 1100px) {
+    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 760px) {
+    .admin-topbar { padding-inline: 16px; }
+    .admin-brand small, .admin-topbar__actions span { display: none; }
+    .admin-shell { display: block; }
+    .admin-sidebar { position: fixed; z-index: 30; inset: 68px auto 0 0; width: min(290px, 86vw); transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto; }
+    .admin-sidebar.is-open { transform: translateX(0); }
+    .admin-main { padding: 20px 16px 36px; }
+    .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; margin-bottom: 18px; }
+    .toolbar { align-items: stretch; flex-direction: column; }
+    .filters { display: grid; grid-template-columns: 1fr; }
+    .filters input, .filters select { width: 100%; }
+    .stat-grid, .module-grid, .form-grid, .inline-form { grid-template-columns: 1fr; }
+    .field--wide { grid-column: auto; }
+}
diff --git a/admin/assets/admin.js b/admin/assets/admin.js
new file mode 100644
index 0000000..f25cf98
--- /dev/null
+++ b/admin/assets/admin.js
@@ -0,0 +1,9 @@
+document.querySelector('[data-sidebar-toggle]')?.addEventListener('click', function () {
+    document.querySelector('#admin-sidebar')?.classList.toggle('is-open');
+});
+
+document.querySelectorAll('form[data-confirm]').forEach(function (form) {
+    form.addEventListener('submit', function (event) {
+        if (!window.confirm(form.dataset.confirm || '確定執行？')) event.preventDefault();
+    });
+});
diff --git a/admin/bootstrap.php b/admin/bootstrap.php
new file mode 100644
index 0000000..68be30c
--- /dev/null
+++ b/admin/bootstrap.php
@@ -0,0 +1,241 @@
+<?php
+declare(strict_types=1);
+
+session_start();
+$config = require __DIR__ . '/config.php';
+
+function db(): PDO
+{
+    static $pdo;
+    global $config;
+    if ($pdo instanceof PDO) {
+        return $pdo;
+    }
+    $db = $config['db'];
+    $dsn = "mysql:host={$db['host']};port={$db['port']};dbname={$db['name']};charset=utf8mb4";
+    $pdo = new PDO($dsn, $db['user'], $db['pass'], [
+        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
+        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
+        PDO::ATTR_EMULATE_PREPARES => false,
+    ]);
+    return $pdo;
+}
+
+function h(?string $value): string
+{
+    return htmlspecialchars($value ?? '', ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
+}
+
+function redirect(string $path): never
+{
+    header('Location: ' . $path);
+    exit;
+}
+
+function csrf_token(): string
+{
+    if (empty($_SESSION['csrf'])) {
+        $_SESSION['csrf'] = bin2hex(random_bytes(32));
+    }
+    return $_SESSION['csrf'];
+}
+
+function verify_csrf(): void
+{
+    $token = (string) ($_POST['csrf'] ?? '');
+    if (!hash_equals((string) ($_SESSION['csrf'] ?? ''), $token)) {
+        http_response_code(419);
+        exit('表單已過期，請返回後重新操作。');
+    }
+}
+
+function require_login(): void
+{
+    if (empty($_SESSION['admin_id'])) {
+        redirect('login.php');
+    }
+}
+
+function flash(string $type, string $message): void
+{
+    $_SESSION['flash'] = ['type' => $type, 'message' => $message];
+}
+
+function take_flash(): ?array
+{
+    $flash = $_SESSION['flash'] ?? null;
+    unset($_SESSION['flash']);
+    return is_array($flash) ? $flash : null;
+}
+
+function modules(): array
+{
+    return [
+        'albums' => [
+            'label' => '專輯管理', 'icon' => 'disc', 'table' => 'albums', 'order' => 'release_date DESC, id DESC',
+            'fields' => [
+                'title' => ['label' => '專輯名稱', 'type' => 'text', 'required' => true],
+                'title_ko' => ['label' => '韓文／英文名稱', 'type' => 'text'],
+                'release_date' => ['label' => '發行日期', 'type' => 'date'],
+                'era' => ['label' => '時期', 'type' => 'select', 'options' => ['classic' => '輝煌全盛期', 'reunion' => '啟動新篇章']],
+                'cover_media_id' => ['label' => '封面媒體編號', 'type' => 'number'],
+                'summary' => ['label' => '專輯簡介', 'type' => 'textarea'],
+                'sort_order' => ['label' => '排序', 'type' => 'number', 'default' => '0'],
+                'status' => ['label' => '公開狀態', 'type' => 'status', 'required' => true],
+            ],
+            'list' => ['title', 'release_date', 'era', 'status', 'updated_at'],
+        ],
+        'songs' => [
+            'label' => '歌曲管理', 'icon' => 'music-note-list', 'table' => 'songs', 'order' => 'album_id, track_no, id',
+            'fields' => [
+                'album_id' => ['label' => '所屬專輯', 'type' => 'relation', 'table' => 'albums', 'required' => true],
+                'track_no' => ['label' => '曲序', 'type' => 'number'],
+                'title' => ['label' => '歌名', 'type' => 'text', 'required' => true],
+                'title_ko' => ['label' => '韓文歌名', 'type' => 'text'],
+                'lyrics_url' => ['label' => '歌詞頁連結', 'type' => 'url'],
+                'video_url' => ['label' => '影片連結', 'type' => 'url'],
+                'is_title_track' => ['label' => '主打歌', 'type' => 'checkbox'],
+                'status' => ['label' => '公開狀態', 'type' => 'status', 'required' => true],
+            ],
+            'list' => ['title', 'album_id', 'track_no', 'is_title_track', 'status', 'updated_at'],
+        ],
+        'concerts' => [
+            'label' => '演唱會管理', 'icon' => 'ticket-perforated', 'table' => 'concert_events', 'order' => 'event_date DESC, id DESC',
+            'fields' => [
+                'tour_name' => ['label' => '巡演／活動名稱', 'type' => 'text', 'required' => true],
+                'event_date' => ['label' => '演出日期', 'type' => 'date', 'required' => true],
+                'country' => ['label' => '國家', 'type' => 'text'],
+                'city' => ['label' => '城市', 'type' => 'text'],
+                'venue' => ['label' => '場館', 'type' => 'text'],
+                'member_names' => ['label' => '演出成員', 'type' => 'text'],
+                'poster_media_id' => ['label' => '海報媒體編號', 'type' => 'number'],
+                'source_url' => ['label' => '資料來源', 'type' => 'url'],
+                'notes' => ['label' => '備註', 'type' => 'textarea'],
+                'status' => ['label' => '公開狀態', 'type' => 'status', 'required' => true],
+            ],
+            'list' => ['tour_name', 'event_date', 'city', 'venue', 'status', 'updated_at'],
+        ],
+        'variety' => [
+            'label' => '綜藝節目管理', 'icon' => 'tv', 'table' => 'variety_shows', 'order' => 'air_start DESC, id DESC',
+            'fields' => [
+                'title' => ['label' => '節目名稱', 'type' => 'text', 'required' => true],
+                'series_name' => ['label' => '系列／單元', 'type' => 'text'],
+                'platform' => ['label' => '播出平台', 'type' => 'text'],
+                'air_start' => ['label' => '開始日期', 'type' => 'date'],
+                'air_end' => ['label' => '結束日期', 'type' => 'date'],
+                'member_names' => ['label' => '參與成員', 'type' => 'text'],
+                'episode_info' => ['label' => '集數', 'type' => 'text'],
+                'video_url' => ['label' => '影片連結', 'type' => 'url'],
+                'summary' => ['label' => '節目簡介', 'type' => 'textarea'],
+                'tags' => ['label' => '標籤', 'type' => 'text'],
+                'status' => ['label' => '公開狀態', 'type' => 'status', 'required' => true],
+            ],
+            'list' => ['title', 'platform', 'air_start', 'member_names', 'status', 'updated_at'],
+        ],
+        'locations' => [
+            'label' => 'Yellow Note', 'icon' => 'geo-alt', 'table' => 'locations', 'order' => 'visit_date DESC, sort_order, id',
+            'fields' => [
+                'title' => ['label' => '地點名稱', 'type' => 'text', 'required' => true],
+                'visit_date' => ['label' => '行程日期', 'type' => 'date'],
+                'day_label' => ['label' => '日次', 'type' => 'text'],
+                'address' => ['label' => '地址', 'type' => 'text'],
+                'latitude' => ['label' => '緯度', 'type' => 'number', 'step' => 'any'],
+                'longitude' => ['label' => '經度', 'type' => 'number', 'step' => 'any'],
+                'member_names' => ['label' => '參與成員', 'type' => 'text'],
+                'description' => ['label' => '行程說明', 'type' => 'textarea'],
+                'quote_text' => ['label' => '引言', 'type' => 'textarea'],
+                'tags' => ['label' => '標籤', 'type' => 'text'],
+                'media_id' => ['label' => '圖片媒體編號', 'type' => 'number'],
+                'source_url' => ['label' => '來源連結', 'type' => 'url'],
+                'sort_order' => ['label' => '排序', 'type' => 'number', 'default' => '0'],
+                'status' => ['label' => '公開狀態', 'type' => 'status', 'required' => true],
+            ],
+            'list' => ['title', 'visit_date', 'member_names', 'tags', 'status', 'updated_at'],
+        ],
+        'media' => [
+            'label' => '媒體庫', 'icon' => 'images', 'table' => 'media_assets', 'order' => 'id DESC',
+            'fields' => [
+                'display_name' => ['label' => '管理名稱', 'type' => 'text', 'required' => true],
+                'file_path' => ['label' => '檔案', 'type' => 'file'],
+                'media_type' => ['label' => '類型', 'type' => 'select', 'default' => 'image', 'options' => ['image' => '圖片', 'video' => '影片', 'pdf' => 'PDF', 'other' => '其他']],
+                'alt_text' => ['label' => '替代文字', 'type' => 'text'],
+                'source_note' => ['label' => '來源／授權註記', 'type' => 'textarea'],
+                'category' => ['label' => '分類', 'type' => 'text'],
+                'status' => ['label' => '使用狀態', 'type' => 'select', 'default' => 'draft', 'options' => ['available' => '可使用', 'draft' => '待整理', 'archived' => '封存']],
+            ],
+            'list' => ['display_name', 'media_type', 'category', 'file_path', 'status', 'updated_at'],
+        ],
+    ];
+}
+
+function module_config(string $key): array
+{
+    $all = modules();
+    if (!isset($all[$key])) {
+        http_response_code(404);
+        exit('找不到管理模組。');
+    }
+    return $all[$key];
+}
+
+function status_label(string $status): string
+{
+    return ['draft' => '草稿', 'coming_soon' => '籌備中', 'published' => '公開', 'archived' => '封存', 'available' => '可使用'][$status] ?? $status;
+}
+
+function audit(string $action, string $entityType, ?int $entityId, array $details = []): void
+{
+    $stmt = db()->prepare('INSERT INTO audit_logs (admin_user_id, action_name, entity_type, entity_id, details_json, ip_address) VALUES (?, ?, ?, ?, ?, ?)');
+    $stmt->execute([$_SESSION['admin_id'] ?? null, $action, $entityType, $entityId, json_encode($details, JSON_UNESCAPED_UNICODE), $_SERVER['REMOTE_ADDR'] ?? null]);
+}
+
+function render_header(string $title, string $active = ''): void
+{
+    global $config;
+    $flash = take_flash();
+    $mods = modules();
+    ?>
+<!doctype html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><?= h($title) ?>｜<?= h($config['site_name']) ?> Admin</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" href="assets/admin.css">
+</head>
+<body>
+<header class="admin-topbar">
+    <a class="admin-brand" href="index.php"><i class="bi bi-gem"></i><span>水晶男孩推廣部</span><small>Admin</small></a>
+    <div class="admin-topbar__actions"><span><?= h($_SESSION['admin_name'] ?? '') ?></span><a href="../index.html" target="_blank" rel="noopener">查看前臺</a><a href="logout.php">登出</a></div>
+</header>
+<div class="admin-shell">
+    <aside class="admin-sidebar" id="admin-sidebar">
+        <nav aria-label="後臺管理選單">
+            <a class="<?= $active === 'dashboard' ? 'active' : '' ?>" href="index.php"><i class="bi bi-speedometer2"></i>控制台</a>
+            <p>內容資料</p>
+            <?php foreach ($mods as $key => $mod): ?>
+                <a class="<?= $active === $key ? 'active' : '' ?>" href="records.php?module=<?= h($key) ?>"><i class="bi bi-<?= h($mod['icon']) ?>"></i><?= h($mod['label']) ?></a>
+            <?php endforeach; ?>
+            <p>系統</p>
+            <a class="<?= $active === 'publishing' ? 'active' : '' ?>" href="publishing.php"><i class="bi bi-eye"></i>公開狀態</a>
+            <a class="<?= $active === 'admins' ? 'active' : '' ?>" href="admins.php"><i class="bi bi-shield-lock"></i>管理者帳號</a>
+        </nav>
+    </aside>
+    <main class="admin-main">
+        <button class="sidebar-toggle" type="button" data-sidebar-toggle aria-label="開啟管理選單"><i class="bi bi-list"></i></button>
+        <?php if ($flash): ?><div class="notice notice--<?= h($flash['type']) ?>"><?= h($flash['message']) ?></div><?php endif; ?>
+        <div class="page-heading"><div><p class="eyebrow">CONTENT MANAGEMENT</p><h1><?= h($title) ?></h1></div></div>
+    <?php
+}
+
+function render_footer(): void
+{
+    ?>
+    </main>
+</div>
+<script src="assets/admin.js"></script>
+</body>
+</html>
+    <?php
+}
diff --git a/admin/config.php b/admin/config.php
new file mode 100644
index 0000000..f24e1ea
--- /dev/null
+++ b/admin/config.php
@@ -0,0 +1,16 @@
+<?php
+declare(strict_types=1);
+
+return [
+    'site_name' => '水晶男孩推廣部',
+    'db' => [
+        'host' => getenv('SECHSKIES_DB_HOST') ?: '127.0.0.1',
+        'port' => getenv('SECHSKIES_DB_PORT') ?: '3306',
+        'name' => getenv('SECHSKIES_DB_NAME') ?: 'sechskies_cms',
+        'user' => getenv('SECHSKIES_DB_USER') ?: 'root',
+        'pass' => getenv('SECHSKIES_DB_PASS') ?: '',
+    ],
+    'upload_dir' => dirname(__DIR__) . '/assets/uploads',
+    'upload_url' => '../assets/uploads',
+    'max_upload_bytes' => 8 * 1024 * 1024,
+];
diff --git a/admin/database/schema.sql b/admin/database/schema.sql
new file mode 100644
index 0000000..432f90b
--- /dev/null
+++ b/admin/database/schema.sql
@@ -0,0 +1,128 @@
+CREATE DATABASE IF NOT EXISTS sechskies_cms CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+USE sechskies_cms;
+
+CREATE TABLE IF NOT EXISTS admin_users (
+    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(50) NOT NULL UNIQUE,
+    password_hash VARCHAR(255) NOT NULL,
+    display_name VARCHAR(80) NOT NULL,
+    email VARCHAR(190) NULL,
+    is_active TINYINT(1) NOT NULL DEFAULT 1,
+    last_login_at DATETIME NULL,
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS media_assets (
+    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    display_name VARCHAR(160) NOT NULL,
+    original_name VARCHAR(255) NULL,
+    file_path VARCHAR(500) NOT NULL,
+    media_type ENUM('image','video','pdf','other') NOT NULL DEFAULT 'image',
+    mime_type VARCHAR(100) NULL,
+    file_size INT UNSIGNED NULL,
+    alt_text VARCHAR(255) NULL,
+    source_note TEXT NULL,
+    category VARCHAR(80) NULL,
+    status ENUM('available','draft','archived') NOT NULL DEFAULT 'draft',
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS albums (
+    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    title VARCHAR(120) NOT NULL,
+    title_ko VARCHAR(160) NULL,
+    release_date DATE NULL,
+    era ENUM('classic','reunion') NULL,
+    cover_media_id INT UNSIGNED NULL,
+    summary TEXT NULL,
+    sort_order INT NOT NULL DEFAULT 0,
+    status ENUM('draft','coming_soon','published','archived') NOT NULL DEFAULT 'draft',
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    CONSTRAINT fk_albums_cover FOREIGN KEY (cover_media_id) REFERENCES media_assets(id) ON DELETE SET NULL
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS songs (
+    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    album_id INT UNSIGNED NOT NULL,
+    track_no SMALLINT UNSIGNED NULL,
+    title VARCHAR(160) NOT NULL,
+    title_ko VARCHAR(160) NULL,
+    lyrics_url VARCHAR(500) NULL,
+    video_url VARCHAR(500) NULL,
+    is_title_track TINYINT(1) NOT NULL DEFAULT 0,
+    status ENUM('draft','coming_soon','published','archived') NOT NULL DEFAULT 'draft',
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    CONSTRAINT fk_songs_album FOREIGN KEY (album_id) REFERENCES albums(id) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS concert_events (
+    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    tour_name VARCHAR(180) NOT NULL,
+    event_date DATE NOT NULL,
+    country VARCHAR(80) NULL,
+    city VARCHAR(80) NULL,
+    venue VARCHAR(180) NULL,
+    member_names VARCHAR(255) NULL,
+    poster_media_id INT UNSIGNED NULL,
+    source_url VARCHAR(500) NULL,
+    notes TEXT NULL,
+    status ENUM('draft','coming_soon','published','archived') NOT NULL DEFAULT 'draft',
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    CONSTRAINT fk_concert_poster FOREIGN KEY (poster_media_id) REFERENCES media_assets(id) ON DELETE SET NULL
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS variety_shows (
+    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    title VARCHAR(180) NOT NULL,
+    series_name VARCHAR(180) NULL,
+    platform VARCHAR(100) NULL,
+    air_start DATE NULL,
+    air_end DATE NULL,
+    member_names VARCHAR(255) NULL,
+    episode_info VARCHAR(100) NULL,
+    video_url VARCHAR(500) NULL,
+    summary TEXT NULL,
+    tags VARCHAR(255) NULL,
+    status ENUM('draft','coming_soon','published','archived') NOT NULL DEFAULT 'draft',
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS locations (
+    id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    title VARCHAR(180) NOT NULL,
+    visit_date DATE NULL,
+    day_label VARCHAR(40) NULL,
+    address VARCHAR(255) NULL,
+    latitude DECIMAL(10,7) NULL,
+    longitude DECIMAL(10,7) NULL,
+    member_names VARCHAR(255) NULL,
+    description TEXT NULL,
+    quote_text TEXT NULL,
+    tags VARCHAR(255) NULL,
+    media_id INT UNSIGNED NULL,
+    source_url VARCHAR(500) NULL,
+    sort_order INT NOT NULL DEFAULT 0,
+    status ENUM('draft','coming_soon','published','archived') NOT NULL DEFAULT 'draft',
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+    CONSTRAINT fk_location_media FOREIGN KEY (media_id) REFERENCES media_assets(id) ON DELETE SET NULL
+) ENGINE=InnoDB;
+
+CREATE TABLE IF NOT EXISTS audit_logs (
+    id BIGINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+    admin_user_id INT UNSIGNED NULL,
+    action_name VARCHAR(40) NOT NULL,
+    entity_type VARCHAR(80) NOT NULL,
+    entity_id INT UNSIGNED NULL,
+    details_json JSON NULL,
+    ip_address VARCHAR(45) NULL,
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    INDEX idx_audit_entity (entity_type, entity_id),
+    CONSTRAINT fk_audit_admin FOREIGN KEY (admin_user_id) REFERENCES admin_users(id) ON DELETE SET NULL
+) ENGINE=InnoDB;
diff --git a/admin/index.php b/admin/index.php
new file mode 100644
index 0000000..3088b3c
--- /dev/null
+++ b/admin/index.php
@@ -0,0 +1,34 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+require_login();
+
+$stats = [];
+foreach (modules() as $key => $module) {
+    $stats[$key] = (int) db()->query('SELECT COUNT(*) FROM `' . $module['table'] . '`')->fetchColumn();
+}
+$published = 0;
+$comingSoon = 0;
+foreach (modules() as $key => $module) {
+    if ($key === 'media') continue;
+    $published += (int) db()->query("SELECT COUNT(*) FROM `{$module['table']}` WHERE status = 'published'")->fetchColumn();
+    $comingSoon += (int) db()->query("SELECT COUNT(*) FROM `{$module['table']}` WHERE status = 'coming_soon'")->fetchColumn();
+}
+$recent = db()->query('SELECT a.*, u.display_name FROM audit_logs a LEFT JOIN admin_users u ON u.id = a.admin_user_id ORDER BY a.id DESC LIMIT 8')->fetchAll();
+render_header('控制台', 'dashboard');
+?>
+<section class="stat-grid">
+    <article class="stat-card"><span>已公開內容</span><strong><?= $published ?></strong><i class="bi bi-broadcast"></i></article>
+    <article class="stat-card"><span>籌備中內容</span><strong><?= $comingSoon ?></strong><i class="bi bi-hourglass-split"></i></article>
+    <article class="stat-card"><span>媒體素材</span><strong><?= $stats['media'] ?></strong><i class="bi bi-images"></i></article>
+    <article class="stat-card"><span>全部內容</span><strong><?= array_sum($stats) ?></strong><i class="bi bi-archive"></i></article>
+</section>
+<section class="panel"><div class="panel__head"><div><h2>內容概況</h2><p>依本站真正的資料分類統計</p></div></div><div class="module-grid">
+<?php foreach (modules() as $key => $module): ?><a href="records.php?module=<?= h($key) ?>"><i class="bi bi-<?= h($module['icon']) ?>"></i><span><?= h($module['label']) ?></span><strong><?= $stats[$key] ?></strong></a><?php endforeach; ?>
+</div></section>
+<section class="panel"><div class="panel__head"><div><h2>最近管理紀錄</h2><p>保留新增、修改、刪除與登入軌跡</p></div></div>
+<div class="table-wrap"><table><thead><tr><th>時間</th><th>管理者</th><th>動作</th><th>資料類型</th><th>編號</th></tr></thead><tbody>
+<?php foreach ($recent as $row): ?><tr><td><?= h($row['created_at']) ?></td><td><?= h($row['display_name'] ?? '系統') ?></td><td><?= h($row['action_name']) ?></td><td><?= h($row['entity_type']) ?></td><td><?= h((string) $row['entity_id']) ?></td></tr><?php endforeach; ?>
+<?php if (!$recent): ?><tr><td colspan="5" class="empty">目前尚無管理紀錄。</td></tr><?php endif; ?>
+</tbody></table></div></section>
+<?php render_footer();
diff --git a/admin/login.php b/admin/login.php
new file mode 100644
index 0000000..c044d8b
--- /dev/null
+++ b/admin/login.php
@@ -0,0 +1,28 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+if (!empty($_SESSION['admin_id'])) redirect('index.php');
+$error = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    verify_csrf();
+    try {
+        $stmt = db()->prepare('SELECT * FROM admin_users WHERE username = ? AND is_active = 1 LIMIT 1');
+        $stmt->execute([trim((string) ($_POST['username'] ?? ''))]);
+        $user = $stmt->fetch();
+        if ($user && password_verify((string) ($_POST['password'] ?? ''), $user['password_hash'])) {
+            session_regenerate_id(true);
+            $_SESSION['admin_id'] = (int) $user['id'];
+            $_SESSION['admin_name'] = $user['display_name'];
+            db()->prepare('UPDATE admin_users SET last_login_at = NOW() WHERE id = ?')->execute([$user['id']]);
+            audit('login', 'admin_users', (int) $user['id']);
+            redirect('index.php');
+        }
+        $error = '帳號或密碼輸入錯誤。';
+    } catch (Throwable $e) {
+        $error = '資料庫尚未完成設定，請先執行初始化。';
+    }
+}
+?>
+<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>管理登入｜水晶男孩推廣部</title><link rel="stylesheet" href="assets/admin.css"></head>
+<body class="auth-page"><main class="auth-card"><div class="auth-gem">◆</div><p class="eyebrow">SECHSKIES ARCHIVE</p><h1>推廣部管理登入</h1><p>把散落的記憶，好好收進同一片黃色海洋。</p><?php if (isset($_GET['setup'])): ?><div class="notice notice--success">管理者建立完成，請登入。</div><?php endif; ?><?php if ($error): ?><div class="notice notice--error"><?= h($error) ?></div><?php endif; ?>
+<form method="post"><input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>"><label>管理者帳號<input name="username" required autocomplete="username" autofocus></label><label>密碼<input name="password" type="password" required autocomplete="current-password"></label><button class="button button--primary" type="submit">登入後臺</button><a class="text-link" href="setup.php">第一次使用？初始化系統</a></form></main></body></html>
diff --git a/admin/logout.php b/admin/logout.php
new file mode 100644
index 0000000..79d9978
--- /dev/null
+++ b/admin/logout.php
@@ -0,0 +1,7 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+if (!empty($_SESSION['admin_id'])) audit('logout', 'admin_users', (int) $_SESSION['admin_id']);
+$_SESSION = [];
+session_destroy();
+redirect('login.php');
diff --git a/admin/publishing.php b/admin/publishing.php
new file mode 100644
index 0000000..f1fac62
--- /dev/null
+++ b/admin/publishing.php
@@ -0,0 +1,16 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+require_login();
+$rows = [];
+foreach (modules() as $key => $module) {
+    if ($key === 'media') continue;
+    $counts = ['draft' => 0, 'coming_soon' => 0, 'published' => 0, 'archived' => 0];
+    foreach (db()->query("SELECT status, COUNT(*) total FROM `{$module['table']}` GROUP BY status")->fetchAll() as $row) $counts[$row['status']] = (int) $row['total'];
+    $rows[] = ['key' => $key, 'label' => $module['label'], 'counts' => $counts];
+}
+render_header('公開狀態', 'publishing');
+?>
+<div class="notice notice--warning"><strong>公開狀態不會直接改寫 portal-nav.js。</strong> 第一階段先管理內容狀態；正式同步頂欄前仍須依本站規則逐頁確認。</div>
+<section class="panel"><div class="panel__head"><div><h2>各模組發布概況</h2><p>公開前先完成資料與來源檢查</p></div></div><div class="table-wrap"><table><thead><tr><th>內容模組</th><th>草稿</th><th>籌備中</th><th>公開</th><th>封存</th><th>管理</th></tr></thead><tbody><?php foreach ($rows as $row): ?><tr><td><?= h($row['label']) ?></td><td><?= $row['counts']['draft'] ?></td><td><?= $row['counts']['coming_soon'] ?></td><td><?= $row['counts']['published'] ?></td><td><?= $row['counts']['archived'] ?></td><td><a href="records.php?module=<?= h($row['key']) ?>">查看資料</a></td></tr><?php endforeach; ?></tbody></table></div></section>
+<?php render_footer();
diff --git a/admin/record-delete.php b/admin/record-delete.php
new file mode 100644
index 0000000..8daf873
--- /dev/null
+++ b/admin/record-delete.php
@@ -0,0 +1,14 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+require_login();
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') { http_response_code(405); exit; }
+verify_csrf();
+$key = (string) ($_POST['module'] ?? '');
+$module = module_config($key);
+$id = (int) ($_POST['id'] ?? 0);
+$stmt = db()->prepare('DELETE FROM `' . $module['table'] . '` WHERE id = ?');
+$stmt->execute([$id]);
+audit('delete', $module['table'], $id);
+flash('success', '資料已刪除。');
+redirect('records.php?module=' . urlencode($key));
diff --git a/admin/record-form.php b/admin/record-form.php
new file mode 100644
index 0000000..19b82f0
--- /dev/null
+++ b/admin/record-form.php
@@ -0,0 +1,82 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+require_login();
+
+$key = (string) ($_GET['module'] ?? $_POST['module'] ?? '');
+$module = module_config($key);
+$id = (int) ($_GET['id'] ?? $_POST['id'] ?? 0);
+$record = [];
+if ($id) {
+    $stmt = db()->prepare('SELECT * FROM `' . $module['table'] . '` WHERE id = ?');
+    $stmt->execute([$id]);
+    $record = $stmt->fetch() ?: [];
+    if (!$record) { http_response_code(404); exit('資料不存在。'); }
+}
+$error = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    verify_csrf();
+    $data = [];
+    foreach ($module['fields'] as $name => $field) {
+        if ($field['type'] === 'file') continue;
+        $value = $field['type'] === 'checkbox' ? (isset($_POST[$name]) ? 1 : 0) : trim((string) ($_POST[$name] ?? ''));
+        if (!empty($field['required']) && $value === '') $error = '請完成所有必填欄位。';
+        $data[$name] = $value === '' ? null : $value;
+    }
+    if ($key === 'media' && isset($_FILES['file_path']) && $_FILES['file_path']['error'] !== UPLOAD_ERR_NO_FILE) {
+        $file = $_FILES['file_path'];
+        $allowed = ['image/jpeg' => 'jpg', 'image/png' => 'png', 'image/gif' => 'gif', 'image/webp' => 'webp', 'application/pdf' => 'pdf', 'video/mp4' => 'mp4'];
+        $mime = (new finfo(FILEINFO_MIME_TYPE))->file($file['tmp_name']);
+        if ($file['error'] !== UPLOAD_ERR_OK || $file['size'] > $config['max_upload_bytes'] || !isset($allowed[$mime])) {
+            $error = '檔案格式不支援或超過 8 MB。';
+        } else {
+            if (!is_dir($config['upload_dir'])) mkdir($config['upload_dir'], 0755, true);
+            $safeName = bin2hex(random_bytes(12)) . '.' . $allowed[$mime];
+            if (!move_uploaded_file($file['tmp_name'], $config['upload_dir'] . '/' . $safeName)) {
+                $error = '檔案儲存失敗。';
+            } else {
+                $data['file_path'] = $config['upload_url'] . '/' . $safeName;
+                $data['original_name'] = $file['name'];
+                $data['mime_type'] = $mime;
+                $data['file_size'] = $file['size'];
+            }
+        }
+    } elseif ($key === 'media' && $id) {
+        $data['file_path'] = $record['file_path'];
+    } elseif ($key === 'media') {
+        $error = '新增媒體時必須選擇檔案。';
+    }
+    if ($error === '') {
+        if ($id) {
+            $sets = [];
+            foreach ($data as $name => $_) $sets[] = "`$name` = ?";
+            $stmt = db()->prepare('UPDATE `' . $module['table'] . '` SET ' . implode(', ', $sets) . ' WHERE id = ?');
+            $stmt->execute([...array_values($data), $id]);
+            audit('update', $module['table'], $id, $data);
+            flash('success', '資料已更新。');
+        } else {
+            $names = array_keys($data);
+            $stmt = db()->prepare('INSERT INTO `' . $module['table'] . '` (`' . implode('`,`', $names) . '`) VALUES (' . implode(',', array_fill(0, count($names), '?')) . ')');
+            $stmt->execute(array_values($data));
+            $id = (int) db()->lastInsertId();
+            audit('create', $module['table'], $id, $data);
+            flash('success', '資料已新增。');
+        }
+        redirect('records.php?module=' . urlencode($key));
+    }
+    $record = array_merge($record, $data);
+}
+render_header(($id ? '編輯' : '新增') . $module['label'], $key);
+?>
+<?php if ($error): ?><div class="notice notice--error"><?= h($error) ?></div><?php endif; ?>
+<form class="panel editor" method="post" enctype="multipart/form-data"><input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>"><input type="hidden" name="module" value="<?= h($key) ?>"><input type="hidden" name="id" value="<?= $id ?>"><div class="form-grid">
+<?php foreach ($module['fields'] as $name => $field): $value = $record[$name] ?? ($field['default'] ?? ''); ?><label class="field <?= $field['type'] === 'textarea' ? 'field--wide' : '' ?>"><span><?= h($field['label']) ?><?= !empty($field['required']) ? ' *' : '' ?></span>
+<?php if ($field['type'] === 'textarea'): ?><textarea name="<?= h($name) ?>" rows="6" <?= !empty($field['required']) ? 'required' : '' ?>><?= h((string) $value) ?></textarea>
+<?php elseif ($field['type'] === 'select'): ?><select name="<?= h($name) ?>" <?= !empty($field['required']) ? 'required' : '' ?>><option value="">請選擇</option><?php foreach ($field['options'] as $optionValue => $optionLabel): ?><option value="<?= h($optionValue) ?>" <?= (string) $value === (string) $optionValue ? 'selected' : '' ?>><?= h($optionLabel) ?></option><?php endforeach; ?></select>
+<?php elseif ($field['type'] === 'status'): ?><select name="<?= h($name) ?>" required><?php foreach (['draft' => '草稿', 'coming_soon' => '籌備中', 'published' => '公開', 'archived' => '封存'] as $optionValue => $optionLabel): ?><option value="<?= $optionValue ?>" <?= (string) ($value ?: 'draft') === $optionValue ? 'selected' : '' ?>><?= $optionLabel ?></option><?php endforeach; ?></select>
+<?php elseif ($field['type'] === 'relation'): ?><select name="<?= h($name) ?>" required><option value="">請選擇</option><?php foreach (db()->query("SELECT id, title FROM `{$field['table']}` ORDER BY title")->fetchAll() as $option): ?><option value="<?= (int) $option['id'] ?>" <?= (string) $value === (string) $option['id'] ? 'selected' : '' ?>><?= h($option['title']) ?></option><?php endforeach; ?></select>
+<?php elseif ($field['type'] === 'checkbox'): ?><span class="check"><input type="checkbox" name="<?= h($name) ?>" value="1" <?= $value ? 'checked' : '' ?>> 是</span>
+<?php elseif ($field['type'] === 'file'): ?><?php if ($value): ?><small>目前檔案：<?= h((string) $value) ?></small><?php endif; ?><input type="file" name="<?= h($name) ?>" accept="image/*,video/mp4,application/pdf" <?= !$id ? 'required' : '' ?>>
+<?php else: ?><input type="<?= h($field['type']) ?>" name="<?= h($name) ?>" value="<?= h((string) $value) ?>" <?= isset($field['step']) ? 'step="' . h($field['step']) . '"' : '' ?> <?= !empty($field['required']) ? 'required' : '' ?>><?php endif; ?></label><?php endforeach; ?></div>
+<div class="form-actions"><a class="button" href="records.php?module=<?= h($key) ?>">取消</a><button class="button button--primary" type="submit"><?= $id ? '儲存修改' : '建立資料' ?></button></div></form>
+<?php render_footer();
diff --git a/admin/records.php b/admin/records.php
new file mode 100644
index 0000000..bd0bcea
--- /dev/null
+++ b/admin/records.php
@@ -0,0 +1,54 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+require_login();
+
+$key = (string) ($_GET['module'] ?? '');
+$module = module_config($key);
+$page = max(1, (int) ($_GET['page'] ?? 1));
+$perPage = 12;
+$query = trim((string) ($_GET['q'] ?? ''));
+$status = trim((string) ($_GET['status'] ?? ''));
+$where = [];
+$params = [];
+if ($query !== '') {
+    $searchable = [];
+    foreach ($module['fields'] as $name => $field) {
+        if (in_array($field['type'], ['text', 'textarea', 'url'], true)) $searchable[] = "`$name` LIKE ?";
+    }
+    if ($searchable) {
+        $where[] = '(' . implode(' OR ', $searchable) . ')';
+        foreach ($searchable as $_) $params[] = '%' . $query . '%';
+    }
+}
+if ($status !== '' && isset($module['fields']['status'])) {
+    $where[] = '`status` = ?';
+    $params[] = $status;
+}
+$whereSql = $where ? ' WHERE ' . implode(' AND ', $where) : '';
+$countStmt = db()->prepare('SELECT COUNT(*) FROM `' . $module['table'] . '`' . $whereSql);
+$countStmt->execute($params);
+$total = (int) $countStmt->fetchColumn();
+$pages = max(1, (int) ceil($total / $perPage));
+$page = min($page, $pages);
+$offset = ($page - 1) * $perPage;
+$stmt = db()->prepare('SELECT * FROM `' . $module['table'] . '`' . $whereSql . ' ORDER BY ' . $module['order'] . " LIMIT $perPage OFFSET $offset");
+$stmt->execute($params);
+$rows = $stmt->fetchAll();
+
+$relations = [];
+foreach ($module['fields'] as $name => $field) {
+    if ($field['type'] === 'relation') {
+        $relations[$name] = [];
+        foreach (db()->query("SELECT id, title FROM `{$field['table']}`")->fetchAll() as $rel) $relations[$name][$rel['id']] = $rel['title'];
+    }
+}
+
+render_header($module['label'], $key);
+?>
+<div class="toolbar"><form class="filters" method="get"><input type="hidden" name="module" value="<?= h($key) ?>"><label class="search"><i class="bi bi-search"></i><input name="q" value="<?= h($query) ?>" placeholder="搜尋本區資料"></label><?php if (isset($module['fields']['status'])): ?><select name="status"><option value="">全部狀態</option><?php foreach (['draft' => '草稿', 'coming_soon' => '籌備中', 'published' => '公開', 'archived' => '封存', 'available' => '可使用'] as $value => $label): ?><option value="<?= $value ?>" <?= $status === $value ? 'selected' : '' ?>><?= $label ?></option><?php endforeach; ?></select><?php endif; ?><button class="button" type="submit">篩選</button></form><a class="button button--primary" href="record-form.php?module=<?= h($key) ?>"><i class="bi bi-plus-lg"></i>新增資料</a></div>
+<section class="panel"><div class="panel__head"><div><h2><?= h($module['label']) ?>清單</h2><p>共 <?= $total ?> 筆；每頁 <?= $perPage ?> 筆</p></div></div><div class="table-wrap"><table><thead><tr><th>編號</th><?php foreach ($module['list'] as $field): ?><th><?= h($module['fields'][$field]['label'] ?? $field) ?></th><?php endforeach; ?><th>操作</th></tr></thead><tbody>
+<?php foreach ($rows as $row): ?><tr><td>#<?= (int) $row['id'] ?></td><?php foreach ($module['list'] as $field): ?><td><?php $value = $row[$field] ?? ''; if ($field === 'status'): ?><span class="status status--<?= h($value) ?>"><?= h(status_label($value)) ?></span><?php elseif (isset($relations[$field])): ?><?= h($relations[$field][$value] ?? ('#' . $value)) ?><?php elseif (($module['fields'][$field]['type'] ?? '') === 'checkbox'): ?><?= $value ? '是' : '否' ?><?php else: ?><?= h(mb_strimwidth((string) $value, 0, 42, '…', 'UTF-8')) ?><?php endif; ?></td><?php endforeach; ?><td class="actions"><a href="record-form.php?module=<?= h($key) ?>&id=<?= (int) $row['id'] ?>">編輯</a><form method="post" action="record-delete.php" data-confirm="確定刪除這筆資料？此動作無法復原。"><input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>"><input type="hidden" name="module" value="<?= h($key) ?>"><input type="hidden" name="id" value="<?= (int) $row['id'] ?>"><button type="submit">刪除</button></form></td></tr><?php endforeach; ?>
+<?php if (!$rows): ?><tr><td colspan="<?= count($module['list']) + 2 ?>" class="empty">找不到符合條件的資料。</td></tr><?php endif; ?></tbody></table></div>
+<?php if ($pages > 1): ?><nav class="pagination" aria-label="資料分頁"><?php for ($i = 1; $i <= $pages; $i++): ?><a class="<?= $i === $page ? 'active' : '' ?>" href="?module=<?= h($key) ?>&q=<?= urlencode($query) ?>&status=<?= urlencode($status) ?>&page=<?= $i ?>"><?= $i ?></a><?php endfor; ?></nav><?php endif; ?></section>
+<?php render_footer();
diff --git a/admin/setup.php b/admin/setup.php
new file mode 100644
index 0000000..c00ac3b
--- /dev/null
+++ b/admin/setup.php
@@ -0,0 +1,36 @@
+<?php
+declare(strict_types=1);
+require __DIR__ . '/bootstrap.php';
+
+$error = '';
+try {
+    $count = (int) db()->query('SELECT COUNT(*) FROM admin_users')->fetchColumn();
+    if ($count > 0) {
+        redirect('login.php');
+    }
+} catch (Throwable $e) {
+    $error = '尚未建立資料表。請先在 phpMyAdmin 匯入 admin/database/schema.sql。';
+}
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && $error === '') {
+    verify_csrf();
+    $username = trim((string) ($_POST['username'] ?? ''));
+    $displayName = trim((string) ($_POST['display_name'] ?? ''));
+    $email = trim((string) ($_POST['email'] ?? ''));
+    $password = (string) ($_POST['password'] ?? '');
+    if (!preg_match('/^[A-Za-z0-9_.-]{4,50}$/', $username)) {
+        $error = '帳號須為 4–50 個英數字或 ._-。';
+    } elseif (mb_strlen($displayName) < 2) {
+        $error = '請填寫管理者顯示名稱。';
+    } elseif (strlen($password) < 10) {
+        $error = '密碼至少需要 10 個字元。';
+    } else {
+        $stmt = db()->prepare('INSERT INTO admin_users (username, password_hash, display_name, email) VALUES (?, ?, ?, ?)');
+        $stmt->execute([$username, password_hash($password, PASSWORD_DEFAULT), $displayName, $email ?: null]);
+        redirect('login.php?setup=1');
+    }
+}
+?>
+<!doctype html><html lang="zh-Hant"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>初始化後臺</title><link rel="stylesheet" href="assets/admin.css"></head>
+<body class="auth-page"><main class="auth-card"><p class="eyebrow">FIRST-TIME SETUP</p><h1>建立第一位管理者</h1><p>水晶男孩推廣部內容管理系統</p><?php if ($error): ?><div class="notice notice--error"><?= h($error) ?></div><?php endif; ?>
+<form method="post"><input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>"><label>登入帳號<input name="username" required autocomplete="username"></label><label>顯示名稱<input name="display_name" required></label><label>電子信箱<input name="email" type="email"></label><label>登入密碼<input name="password" type="password" required minlength="10" autocomplete="new-password"></label><button class="button button--primary" type="submit">建立管理者</button></form></main></body></html>
diff --git a/assets/css/calendar.css b/assets/css/calendar.css
new file mode 100644
index 0000000..0d8dfbe
--- /dev/null
+++ b/assets/css/calendar.css
@@ -0,0 +1,611 @@
+/* ==========================================
+   水晶男孩 2026 萬年曆專用樣式 (calendar.css)
+   對齊全站暖紙面 section 視覺
+   ========================================== */
+
+:root {
+    --cal-grid-gap: 8px;
+    --cal-border-soft: rgba(255, 204, 0, 0.18);
+    --cal-border-strong: rgba(255, 204, 0, 0.28);
+    --cal-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
+}
+
+.calendar-page-container {
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 30px 20px 60px;
+}
+
+/* 控制面板 */
+.calendar-controls {
+    background: var(--color-surface-soft);
+    border: 1px solid var(--cal-border-soft);
+    border-radius: 18px;
+    padding: 22px;
+    margin-bottom: 22px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    box-shadow: var(--cal-panel-shadow);
+}
+
+.calendar-select-group {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.calendar-select {
+    background: #fffef9;
+    color: var(--color-text-dark);
+    border: 1px solid rgba(255, 204, 0, 0.38);
+    border-radius: 999px;
+    padding: 9px 14px;
+    font-size: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.calendar-select:hover,
+.calendar-select:focus {
+    border-color: var(--color-brand);
+    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.2);
+}
+
+.calendar-btn {
+    background: var(--color-brand);
+    color: #1a1a1a;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    padding: 8px 16px;
+    font-weight: 700;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: transform 0.2s ease, background-color 0.2s ease;
+}
+
+.calendar-btn:hover {
+    background: #ffe066;
+    transform: translateY(-1px);
+}
+
+/* 分類標籤按鈕列 */
+.calendar-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+.filter-chip {
+    background: #fffdf6;
+    color: var(--color-text-dark);
+    border: 1px solid rgba(255, 204, 0, 0.38);
+    border-radius: 999px;
+    padding: 7px 15px;
+    font-size: 0.9rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.filter-chip.active,
+.filter-chip:hover {
+    background: var(--color-brand);
+    color: #1a1a1a;
+    border-color: var(--color-brand);
+}
+
+/* 萬年曆主要區塊：維持原雙欄版型 */
+.calendar-layout {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    gap: 22px;
+    align-items: start;
+}
+
+@media (max-width: 900px) {
+    .calendar-layout {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* 日曆卡片區 */
+.calendar-card {
+    background: var(--color-surface);
+    border: 1px solid var(--cal-border-soft);
+    border-radius: 18px;
+    padding: 24px;
+    box-shadow: var(--cal-panel-shadow);
+}
+
+.calendar-header-title {
+    text-align: center;
+    font-size: 1.52rem;
+    color: var(--color-text-dark);
+    margin-bottom: 18px;
+    font-weight: 900;
+    letter-spacing: 0.04em;
+}
+
+/* 星期標頭 */
+.calendar-weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+    font-weight: 700;
+    color: var(--color-brand-dark);
+    padding-bottom: 11px;
+    border-bottom: 1px solid rgba(255, 204, 0, 0.22);
+    margin-bottom: 11px;
+}
+
+.calendar-weekday {
+    padding: 6px 0;
+}
+
+.calendar-weekday.weekend {
+    color: #9b5e47;
+}
+
+/* 日期網格 */
+.calendar-days-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--cal-grid-gap);
+}
+
+.day-cell {
+    aspect-ratio: 1;
+    min-height: 68px;
+    background: #fffefb;
+    border: 1px solid rgba(255, 204, 0, 0.12);
+    border-radius: 10px;
+    padding: 7px;
+    position: relative;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: all 0.18s ease;
+}
+
+.day-cell:hover {
+    background: var(--color-brand-light);
+    border-color: var(--cal-border-strong);
+    transform: translateY(-1px);
+}
+
+.day-cell.other-month {
+    opacity: 0.4;
+    cursor: default;
+}
+
+.day-cell.other-month:hover {
+    transform: none;
+    border-color: rgba(255, 204, 0, 0.12);
+    background: #fffefb;
+}
+
+.day-cell.today {
+    border: 2px solid var(--color-brand);
+    box-shadow: inset 0 0 0 1px rgba(255, 204, 0, 0.16);
+}
+
+.day-cell.selected {
+    background: #fff4c7;
+    border-color: var(--color-brand);
+}
+
+.day-num {
+    font-size: 0.94rem;
+    font-weight: 700;
+    color: var(--color-text-dark);
+}
+
+.day-cell.weekend .day-num {
+    color: #8a4e40;
+}
+
+/* 事件標記改為低調金色點 */
+.day-events {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    margin-top: 4px;
+}
+
+.day-birthday-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+    margin-top: 2px;
+    text-decoration: none;
+}
+
+.event-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-brand);
+    box-shadow: none;
+}
+
+.event-dot.birthday,
+.event-dot.debut,
+.event-dot.concert {
+    background: var(--color-brand);
+}
+
+/* 生日頭像縮圖小標籤 */
+.day-avatar-badge {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    border: 2px solid var(--color-brand);
+    object-fit: cover;
+    margin: 0;
+    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
+}
+
+.day-member-name {
+    font-size: 0.68rem;
+    font-weight: 700;
+    color: var(--color-text-dark);
+    line-height: 1;
+    letter-spacing: 0.01em;
+}
+
+/* 演唱會微縮標籤 */
+.day-concert-badge {
+    width: 26px;
+    height: 26px;
+    border-radius: 4px;
+    border: 1px solid var(--color-brand);
+    object-fit: cover;
+    margin: 2px auto 0;
+}
+
+/* 當月紀念日清單 */
+.events-sidebar {
+    background: var(--color-surface);
+    border: 1px solid var(--cal-border-soft);
+    border-radius: 18px;
+    padding: 24px;
+    box-shadow: var(--cal-panel-shadow);
+}
+
+.sidebar-title {
+    font-size: 1.25rem;
+    color: var(--color-text-dark);
+    margin-bottom: 18px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 204, 0, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.sidebar-title i {
+    color: var(--color-brand);
+}
+
+.events-list {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.events-empty {
+    color: var(--color-text-muted);
+    text-align: center;
+    padding: 28px 0;
+}
+
+/* 個別事件卡片 */
+.event-card {
+    background: var(--color-surface-soft);
+    border: 1px solid rgba(255, 204, 0, 0.16);
+    border-left: 4px solid var(--color-brand);
+    border-radius: 10px;
+    padding: 14px 16px;
+    transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.event-card:hover {
+    transform: translateX(2px);
+    border-color: rgba(255, 204, 0, 0.32);
+}
+
+.event-card.type-birthday,
+.event-card.type-debut,
+.event-card.type-concert {
+    border-left-color: var(--color-brand);
+}
+
+.event-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+}
+
+.event-date-badge {
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--color-brand-dark);
+    background: rgba(255, 204, 0, 0.2);
+    padding: 3px 9px;
+    border-radius: 999px;
+}
+
+.event-title {
+    font-size: 1.02rem;
+    font-weight: 800;
+    color: var(--color-text-dark);
+    margin-bottom: 4px;
+}
+
+.event-desc {
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+    line-height: 1.48;
+}
+
+.event-media-img {
+    width: 100%;
+    max-height: 150px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin-top: 8px;
+    border: 1px solid rgba(255, 204, 0, 0.24);
+}
+
+/* 生日卡片呈現 */
+.birthday-featured-card {
+    background: var(--color-surface-soft);
+    border: 1px solid rgba(255, 204, 0, 0.22);
+    border-radius: 12px;
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+    text-align: center;
+}
+
+.birthday-photo-wrap {
+    width: 100%;
+    max-width: 280px;
+    aspect-ratio: 210 / 297;
+    border-radius: 12px;
+    border: 2px solid var(--color-brand);
+    overflow: hidden;
+    flex-shrink: 0;
+    background: #111;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+}
+
+.birthday-photo-wrap img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center 28%;
+}
+
+.birthday-info {
+    width: 100%;
+}
+
+.birthday-info h4 {
+    font-size: 1.3rem;
+    color: var(--color-text-dark);
+    margin: 0 0 2px;
+    line-height: 1.15;
+}
+
+.birthday-info h4 a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.birthday-info .en-name {
+    font-size: 0.82rem;
+    color: var(--color-brand-dark);
+    letter-spacing: 0.05em;
+    margin-bottom: 7px;
+}
+
+.birthday-info .bday-date {
+    font-size: 0.92rem;
+    color: var(--color-text-muted);
+    font-weight: 700;
+}
+
+/* 演唱會卡片呈現 */
+.concert-featured-card {
+    background: var(--color-surface-soft);
+    border: 1px solid rgba(255, 204, 0, 0.22);
+    border-radius: 12px;
+    padding: 14px;
+    margin-bottom: 8px;
+}
+
+.concert-featured-card img {
+    width: 100%;
+    max-width: 280px;
+    aspect-ratio: 210 / 297;
+    height: auto;
+    object-fit: cover;
+    object-position: center 28%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 8px;
+    margin-bottom: 10px;
+    border: 1px solid rgba(255, 204, 0, 0.24);
+}
+
+/* Modal 彈窗 */
+.calendar-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.calendar-modal-backdrop.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.calendar-modal-content {
+    background: var(--color-surface);
+    border: 1px solid var(--cal-border-strong);
+    border-radius: 16px;
+    padding: 24px;
+    max-width: 480px;
+    width: 90%;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+    position: relative;
+    text-align: center;
+}
+
+.modal-close-btn {
+    position: absolute;
+    top: 14px;
+    right: 18px;
+    background: none;
+    border: none;
+    color: #7d7464;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+.modal-close-btn:hover {
+    color: var(--color-text-dark);
+}
+
+.modal-photo {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    border: 3px solid var(--color-brand);
+    object-fit: cover;
+    margin: 0 auto 16px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+.modal-date-title {
+    color: var(--color-brand-dark);
+    margin-bottom: 14px;
+}
+
+.modal-member-name {
+    color: var(--color-text-dark);
+    font-size: 1.32rem;
+    margin-bottom: 4px;
+}
+
+.modal-member-name a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.modal-member-meta {
+    color: var(--color-brand-dark);
+    font-size: 0.9rem;
+    margin-bottom: 10px;
+}
+
+.modal-desc {
+    color: var(--color-text-muted);
+    font-size: 0.92rem;
+    line-height: 1.5;
+    margin-bottom: 12px;
+}
+
+.modal-member-link {
+    text-decoration: none;
+    display: inline-block;
+    font-size: 0.9rem;
+}
+
+.modal-event-box {
+    background: rgba(255, 204, 0, 0.1);
+    border-radius: 8px;
+    padding: 12px;
+    margin-bottom: 10px;
+    text-align: left;
+}
+
+.modal-event-title {
+    color: var(--color-brand-dark);
+    margin-bottom: 4px;
+}
+
+.modal-concert-photo {
+    width: 100%;
+    max-width: 320px;
+    aspect-ratio: 210 / 297;
+    max-height: none;
+    object-fit: cover;
+    object-position: center 28%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 204, 0, 0.28);
+    margin-bottom: 14px;
+}
+
+@media (max-width: 900px) {
+    .calendar-page-container {
+        padding: 24px 14px 50px;
+    }
+
+    .calendar-controls,
+    .calendar-card,
+    .events-sidebar {
+        padding: 16px;
+    }
+
+    .calendar-header-title {
+        font-size: 1.33rem;
+    }
+
+    .day-cell {
+        min-height: 56px;
+    }
+
+    .day-avatar-badge {
+        width: 30px;
+        height: 30px;
+    }
+
+    .day-member-name {
+        font-size: 0.62rem;
+    }
+
+    .birthday-photo-wrap {
+        max-width: 100%;
+    }
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 588ce28..984ca28 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -2256,6 +2256,45 @@ header.inner-page-header .sub-title {
     padding: 4px 20px;
 }
 
+/* 地區切換（台灣／海外）：比成員 tab 高一階，用深底色跟它區隔 */
+.region-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin: 18px auto 0;
+    max-width: 1100px;
+    padding: 4px 20px;
+}
+
+.region-tab-btn {
+    border: 1px solid var(--color-bg-raised);
+    background: var(--color-bg-raised);
+    color: #f4f4f4;
+    border-radius: 999px;
+    padding: 8px 20px;
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.region-tab-btn:hover,
+.region-tab-btn.active {
+    background: var(--color-brand);
+    color: #2f2f2f;
+    border-color: var(--color-brand);
+}
+
+.region-empty-state {
+    text-align: center;
+    color: #8b7423;
+    font-size: 0.95rem;
+    padding: 40px 20px;
+}
+
 #itinerary-search {
     display: block;
     max-width: 1100px;
@@ -2328,6 +2367,16 @@ header.inner-page-header .sub-title {
     gap: 16px;
 }
 
+.map-embed-empty {
+    text-align: center;
+    color: #8b7423;
+    font-size: 0.88rem;
+    padding: 24px 16px;
+    background: #fffef8;
+    border: 1px dashed #e4dbb8;
+    border-radius: 10px;
+}
+
 .map-embed-label {
     margin: 0 0 8px;
     font-size: 0.88rem;
@@ -2450,6 +2499,7 @@ header.inner-page-header .sub-title {
 .photo-frame {
     width: 118px;
     flex: 0 0 118px;
+    position: relative;
 }
 
 .photo-frame img {
@@ -2459,6 +2509,21 @@ header.inner-page-header .sub-title {
     border-radius: 8px;
 }
 
+/* 圖片授權標示：僅供合規（CC BY / CC BY-SA 需姓名標示），刻意做得很小、低對比，不搶視覺 */
+.photo-credit {
+    position: absolute;
+    right: 4px;
+    bottom: 3px;
+    font-size: 0.5rem;
+    line-height: 1;
+    color: rgba(255, 255, 255, 0.7);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
+    letter-spacing: 0.01em;
+    pointer-events: none;
+    user-select: none;
+    white-space: nowrap;
+}
+
 .card-content .date {
     display: inline-block;
     font-size: 0.72rem;
@@ -2495,6 +2560,10 @@ header.inner-page-header .sub-title {
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
 }
 
+.detail-photo {
+    position: relative;
+}
+
 .detail-photo img {
     width: 100%;
     max-height: 300px;
@@ -2502,6 +2571,12 @@ header.inner-page-header .sub-title {
     display: block;
 }
 
+.detail-photo .photo-credit {
+    font-size: 0.62rem;
+    right: 8px;
+    bottom: 6px;
+}
+
 .detail-content {
     padding: 16px;
 }
diff --git a/assets/js/map.js b/assets/js/map.js
index 718cec4..37659a0 100644
--- a/assets/js/map.js
+++ b/assets/js/map.js
@@ -1,304 +1,404 @@
-(() => {
-    const canvas = document.getElementById("particles");
-    if (canvas) {
-        const ctx = canvas.getContext("2d");
-        let particles = [];
-
-        function resizeCanvas() {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-        }
-
-        class Particle {
-            constructor() {
-                this.x = Math.random() * canvas.width;
-                this.y = Math.random() * canvas.height;
-                this.size = Math.random() * 4 + 1;
-                this.speedX = Math.random() * 0.5 - 0.25;
-                this.speedY = Math.random() * 0.5 + 0.2;
-            }
-            update() {
-                this.x += this.speedX;
-                this.y += this.speedY;
-                if (this.y > canvas.height) this.y = 0;
-            }
-            draw() {
-                ctx.fillStyle = "#FFDD00";
-                ctx.globalAlpha = 0.6;
-                ctx.beginPath();
-                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-                ctx.fill();
-            }
-        }
-
-        function initParticles() {
-            particles = [];
-            for (let i = 0; i < 80; i += 1) {
-                particles.push(new Particle());
-            }
-        }
-
-        function animateParticles() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            for (const particle of particles) {
-                particle.update();
-                particle.draw();
-            }
-            requestAnimationFrame(animateParticles);
-        }
-
-        resizeCanvas();
-        initParticles();
-        animateParticles();
-        window.addEventListener("resize", () => {
-            resizeCanvas();
-            initParticles();
-        });
-    }
-
-    const tabs = Array.from(document.querySelectorAll(".tab-btn"));
-    const cards = Array.from(document.querySelectorAll(".polaroid-card"));
-    const searchInput = document.getElementById("itinerary-search");
-    const itineraryList = document.querySelector(".itinerary-list");
-    const detailPanel = document.getElementById("detail-panel");
-    const detailDate = document.getElementById("detail-date");
-    const detailTitle = document.getElementById("detail-title");
-    const detailDesc = document.getElementById("detail-desc");
-    const detailQuote = document.getElementById("detail-quote");
-    const detailTag = document.getElementById("detail-tag");
-    const detailLink = document.getElementById("detail-link");
-    const detailImage = document.getElementById("detail-image");
-    const memberMapFrame = document.getElementById("member-map");
-    const mapEmbedSingle = document.getElementById("map-embed-single");
-    const mapEmbedAll = document.getElementById("map-embed-all");
-    const openMapLink = document.getElementById("open-map-link");
-    const openMapLinksDual = document.getElementById("open-map-links-dual");
-    const openMapLinkKo = document.getElementById("open-map-link-ko");
-    const openMapLinkEun = document.getElementById("open-map-link-eun");
-    const dayGroups = new Map();
-
-    let currentMember = "eun";
-    let currentKeyword = "";
-    const memberMaps = {
-        eun: {
-            embed: "https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F",
-            open: "https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI"
-        },
-        ko: {
-            embed: "https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F",
-            open: "https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw"
-        }
-    };
-    const memberTripPrefix = {
-        ko: "高高父子遊台灣",
-        eun: "殷空少搭飛機去台灣高雄"
-    };
-    const memberSortOrder = { eun: 0, ko: 1 };
-
-    function normalizeMember(member) {
-        if (member === "kogo") return "ko";
-        return member;
-    }
-
-    function getMemberLabel(member) {
-        const normalized = normalizeMember(member);
-        if (normalized === "eun") return "殷志源";
-        if (normalized === "ko") return "高志溶";
-        return "未分類";
-    }
-
-    function getDayToken(rawDate) {
-        const match = String(rawDate || "").match(/Day\s*(\d+)/i);
-        if (!match) return String(rawDate || "未分類");
-        return "Day " + match[1];
-    }
-
-    function getGroupLabel(card) {
-        const date = getDayToken(card.dataset.date || "未分類");
-        const normalized = normalizeMember(card.dataset.member || "");
-        const prefix = memberTripPrefix[normalized] || getMemberLabel(normalized);
-        return prefix + "_" + date;
-    }
-
-    function setDualMapVisible(isAll) {
-        if (mapEmbedSingle && mapEmbedAll) {
-            mapEmbedSingle.hidden = isAll ? true : false;
-            mapEmbedAll.hidden = isAll ? false : true;
-            mapEmbedAll.setAttribute("aria-hidden", isAll ? "false" : "true");
-        }
-        if (openMapLink && openMapLinksDual) {
-            openMapLink.hidden = isAll ? true : false;
-            openMapLinksDual.hidden = isAll ? false : true;
-        }
-    }
-
-    function updateMapByMember(member) {
-        const normalized = normalizeMember(member);
-        if (normalized === "all") {
-            setDualMapVisible(true);
-            if (openMapLinkKo) openMapLinkKo.href = memberMaps.ko.open;
-            if (openMapLinkEun) openMapLinkEun.href = memberMaps.eun.open;
-            return;
-        }
-        setDualMapVisible(false);
-        const mapConfig = memberMaps[normalized];
-        if (!mapConfig || !memberMapFrame) return;
-        memberMapFrame.src = mapConfig.embed;
-        if (openMapLink) openMapLink.href = mapConfig.open;
-    }
-
-    function getCardSearchText(card) {
-        return [
-            card.dataset.date || "",
-            card.dataset.title || "",
-            card.dataset.desc || "",
-            card.dataset.tag || "",
-        ].join(" ").toLowerCase();
-    }
-
-    function createDayGroup(dayLabel) {
-        const group = document.createElement("section");
-        group.className = "day-group";
-        group.dataset.day = dayLabel;
-
-        const toggle = document.createElement("button");
-        toggle.type = "button";
-        toggle.className = "day-toggle";
-        toggle.setAttribute("aria-expanded", "false");
-        toggle.innerHTML = "<span>" + dayLabel + "</span><i class='fa-solid fa-chevron-down'></i>";
-
-        const body = document.createElement("div");
-        body.className = "day-cards";
-        body.style.display = "none";
-
-        group.appendChild(toggle);
-        group.appendChild(body);
-        itineraryList.appendChild(group);
-        dayGroups.set(dayLabel, { group, toggle, body });
-        return dayGroups.get(dayLabel);
-    }
-
-    function setDayExpanded(dayGroup, shouldExpand) {
-        dayGroup.toggle.setAttribute("aria-expanded", shouldExpand ? "true" : "false");
-        dayGroup.body.style.display = shouldExpand ? "grid" : "none";
-        dayGroup.group.classList.toggle("expanded", shouldExpand);
-    }
-
-    function initializeDayGroups() {
-        const sortedCards = [...cards].sort((a, b) => {
-            const memberA = normalizeMember(a.dataset.member || "");
-            const memberB = normalizeMember(b.dataset.member || "");
-            const memberDiff = (memberSortOrder[memberA] ?? 99) - (memberSortOrder[memberB] ?? 99);
-            if (memberDiff !== 0) return memberDiff;
-
-            const dayA = Number((getDayToken(a.dataset.date).match(/\d+/) || [999])[0]);
-            const dayB = Number((getDayToken(b.dataset.date).match(/\d+/) || [999])[0]);
-            return dayA - dayB;
-        });
-
-        sortedCards.forEach((card) => {
-            const dayLabel = getGroupLabel(card);
-            const dayGroup = dayGroups.get(dayLabel) || createDayGroup(dayLabel);
-            dayGroup.body.appendChild(card);
-        });
-    }
-
-    function updateDayGroupVisibility() {
-        dayGroups.forEach(({ group, body, toggle }) => {
-            const visibleCards = Array.from(body.querySelectorAll(".polaroid-card")).filter((card) => card.style.display !== "none");
-            group.style.display = visibleCards.length ? "" : "none";
-            if (!visibleCards.length) {
-                setDayExpanded({ group, toggle, body }, false);
-            }
-        });
-    }
-
-    function ensureExpandedForCard(card) {
-        const dayGroup = dayGroups.get(getGroupLabel(card));
-        if (!dayGroup) return;
-        setDayExpanded(dayGroup, true);
-    }
-
-    function setActiveCard(card, options = {}) {
-        const { expandDay = true } = options;
-        cards.forEach((item) => item.classList.remove("active"));
-        card.classList.add("active");
-        if (expandDay) {
-            ensureExpandedForCard(card);
-        }
-        const mapKey = currentMember === "all" ? "all" : currentMember;
-        updateMapByMember(mapKey);
-
-        detailDate.textContent = card.dataset.date || "";
-        detailTitle.textContent = card.dataset.title || "";
-        detailDesc.textContent = card.dataset.desc || "";
-        detailQuote.textContent = "「" + (card.dataset.quote || "") + "」";
-        detailTag.textContent = card.dataset.tag || "";
-        detailLink.href = card.dataset.link || "#";
-        detailImage.src = card.querySelector("img").src;
-        detailImage.alt = "節目截圖 - " + (card.dataset.title || "行程地點");
-    }
-
-    function applyFilter() {
-        let firstVisible = null;
-        cards.forEach((card) => {
-            const cardMember = normalizeMember(card.dataset.member || "");
-            const matchedMember = currentMember === "all" || cardMember === currentMember;
-            const matchedKeyword = !currentKeyword || getCardSearchText(card).includes(currentKeyword);
-            const matched = matchedMember && matchedKeyword;
-            card.style.display = matched ? "" : "none";
-            if (matched && !firstVisible) firstVisible = card;
-        });
-        updateDayGroupVisibility();
-        const activeVisibleCard = cards.find((card) => card.classList.contains("active") && card.style.display !== "none");
-        const fallbackCard = activeVisibleCard || firstVisible;
-        if (fallbackCard) {
-            setActiveCard(fallbackCard, { expandDay: false });
-        } else {
-            updateMapByMember(currentMember === "all" ? "all" : currentMember);
-        }
-    }
-
-    tabs.forEach((tab) => {
-        tab.addEventListener("click", () => {
-            tabs.forEach((item) => {
-                item.classList.remove("active");
-                item.setAttribute("aria-pressed", "false");
-            });
-            tab.classList.add("active");
-            tab.setAttribute("aria-pressed", "true");
-            currentMember = normalizeMember(tab.dataset.member || "all");
-            applyFilter();
-        });
-    });
-
-    if (searchInput) {
-        searchInput.addEventListener("input", (event) => {
-            currentKeyword = event.target.value.trim().toLowerCase();
-            applyFilter();
-        });
-    }
-
-    itineraryList.addEventListener("click", (event) => {
-        const toggle = event.target.closest(".day-toggle");
-        if (!toggle) return;
-        const group = toggle.closest(".day-group");
-        if (!group) return;
-        const dayGroup = dayGroups.get(group.dataset.day);
-        if (!dayGroup) return;
-        const isExpanded = dayGroup.toggle.getAttribute("aria-expanded") === "true";
-        setDayExpanded(dayGroup, !isExpanded);
-    });
-
-    cards.forEach((card) => {
-        card.addEventListener("click", () => {
-            setActiveCard(card, { expandDay: true });
-            if (window.innerWidth < 920) {
-                detailPanel.scrollIntoView({ behavior: "smooth", block: "start" });
-            }
-        });
-    });
-
-    initializeDayGroups();
-    applyFilter();
-})();
+(() => {
+    const canvas = document.getElementById("particles");
+    if (canvas) {
+        const ctx = canvas.getContext("2d");
+        let particles = [];
+
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+
+        class Particle {
+            constructor() {
+                this.x = Math.random() * canvas.width;
+                this.y = Math.random() * canvas.height;
+                this.size = Math.random() * 4 + 1;
+                this.speedX = Math.random() * 0.5 - 0.25;
+                this.speedY = Math.random() * 0.5 + 0.2;
+            }
+            update() {
+                this.x += this.speedX;
+                this.y += this.speedY;
+                if (this.y > canvas.height) this.y = 0;
+            }
+            draw() {
+                ctx.fillStyle = "#FFDD00";
+                ctx.globalAlpha = 0.6;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+
+        function initParticles() {
+            particles = [];
+            for (let i = 0; i < 80; i += 1) {
+                particles.push(new Particle());
+            }
+        }
+
+        function animateParticles() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            for (const particle of particles) {
+                particle.update();
+                particle.draw();
+            }
+            requestAnimationFrame(animateParticles);
+        }
+
+        resizeCanvas();
+        initParticles();
+        animateParticles();
+        window.addEventListener("resize", () => {
+            resizeCanvas();
+            initParticles();
+        });
+    }
+
+    const searchInput = document.getElementById("itinerary-search");
+
+    /**
+     * 每個 .region-panel（例如 #taipei、#global）都是獨立的地區區塊，各自的
+     * member-tabs／地圖／地點卡片互不影響。新增行程時只要在對應 .region-panel
+     * 裡加一顆 .tab-btn（帶 data-trip-name / data-map-embed / data-map-open，
+     * 沒有地圖就不要寫 data-map-embed），以及對應的 .polaroid-card，不需要動這支
+     * 檔案。「全部行程」的地圖會依當時有設定地圖的 tab 自動組出來；完全沒有
+     * 設定地圖的行程，地圖區塊會自動收起來，只留卡片列表。
+     */
+    function initRegionController(panel) {
+        const tabs = Array.from(panel.querySelectorAll(":scope > .member-tabs .tab-btn"));
+        const cards = Array.from(panel.querySelectorAll(".polaroid-card"));
+        const itineraryList = panel.querySelector(".itinerary-list");
+        const detailPanel = panel.querySelector(".detail-panel");
+        const detailImage = panel.querySelector(".detail-photo img");
+        const detailDate = panel.querySelector(".detail-content .date");
+        const detailTitle = panel.querySelector(".detail-content h3");
+        const detailDesc = panel.querySelector(".detail-content p");
+        const detailQuote = panel.querySelector(".detail-content blockquote");
+        const detailTag = panel.querySelector(".detail-content .tag");
+        const detailLink = panel.querySelector(".detail-content .detail-link");
+
+        const mapSticky = panel.querySelector(".map-sticky");
+        const mapEmbedSingle = mapSticky ? mapSticky.querySelector(".map-embed-single") : null;
+        const memberMapFrame = mapEmbedSingle ? mapEmbedSingle.querySelector(".map-my-maps-frame") : null;
+        const mapEmbedEmpty = mapSticky ? mapSticky.querySelector(".map-embed-empty") : null;
+        const mapEmbedAll = mapSticky ? mapSticky.querySelector(".map-embed-all") : null;
+        const openMapLink = mapSticky ? mapSticky.querySelector(".map-link") : null;
+        const openMapLinksDual = mapSticky ? mapSticky.querySelector(".map-links-dual") : null;
+
+        const dayGroups = new Map();
+
+        /* 舊資料裡卡片用 data-member="kogo"，tab 用 data-member="ko"；新地區請直接讓兩邊字串一致，不需要這個對照 */
+        function normalizeMember(member) {
+            if (member === "kogo") return "ko";
+            return member;
+        }
+
+        const tripConfig = {};
+        tabs.forEach((tab) => {
+            const member = normalizeMember(tab.dataset.member || "");
+            if (!member || member === "all") return;
+            tripConfig[member] = {
+                tripName: tab.dataset.tripName || tab.textContent.trim(),
+                memberLabel: tab.dataset.memberLabel || tab.textContent.trim(),
+                sortOrder: Number.isFinite(Number(tab.dataset.sortOrder)) ? Number(tab.dataset.sortOrder) : 99,
+                mapEmbed: tab.dataset.mapEmbed || "",
+                mapOpen: tab.dataset.mapOpen || "",
+            };
+        });
+
+        const initialTab = tabs.find((tab) => tab.classList.contains("active")) || tabs[0];
+        let currentMember = initialTab ? normalizeMember(initialTab.dataset.member || "all") : "all";
+        let currentKeyword = "";
+
+        function getMemberLabel(member) {
+            return (tripConfig[member] && tripConfig[member].memberLabel) || "未分類";
+        }
+
+        function getDayToken(rawDate) {
+            const match = String(rawDate || "").match(/Day\s*(\d+)/i);
+            if (!match) return String(rawDate || "未分類");
+            return "Day " + match[1];
+        }
+
+        function getGroupLabel(card) {
+            const date = getDayToken(card.dataset.date || "未分類");
+            const member = normalizeMember(card.dataset.member || "");
+            const prefix = (tripConfig[member] && tripConfig[member].tripName) || getMemberLabel(member);
+            return prefix + "_" + date;
+        }
+
+        function tripsWithMaps() {
+            return Object.keys(tripConfig)
+                .filter((member) => tripConfig[member].mapEmbed)
+                .sort((a, b) => tripConfig[a].sortOrder - tripConfig[b].sortOrder);
+        }
+
+        function buildMapPairs(members) {
+            if (!mapEmbedAll) return;
+            mapEmbedAll.innerHTML = "";
+            members.forEach((member) => {
+                const trip = tripConfig[member];
+                const pair = document.createElement("div");
+                pair.className = "map-embed-pair";
+
+                const label = document.createElement("p");
+                label.className = "map-embed-label";
+                label.textContent = trip.tripName;
+
+                const iframe = document.createElement("iframe");
+                iframe.className = "map-my-maps-frame";
+                iframe.loading = "lazy";
+                iframe.referrerPolicy = "no-referrer-when-downgrade";
+                iframe.title = trip.tripName + " 踩點地圖";
+                iframe.src = trip.mapEmbed;
+
+                pair.appendChild(label);
+                pair.appendChild(iframe);
+                mapEmbedAll.appendChild(pair);
+            });
+        }
+
+        function buildOpenLinksDual(members) {
+            if (!openMapLinksDual) return;
+            openMapLinksDual.innerHTML = "";
+            members.forEach((member) => {
+                const trip = tripConfig[member];
+                if (!trip.mapOpen) return;
+                const a = document.createElement("a");
+                a.className = "map-link";
+                a.target = "_blank";
+                a.href = trip.mapOpen;
+                a.textContent = "開啟「" + trip.tripName + "」My Maps";
+                openMapLinksDual.appendChild(a);
+            });
+        }
+
+        function updateMapByMember(member) {
+            if (!mapSticky) return;
+            if (!Object.keys(tripConfig).length) {
+                mapSticky.hidden = true;
+                return;
+            }
+            mapSticky.hidden = false;
+
+            if (member === "all") {
+                const withMaps = tripsWithMaps();
+                if (mapEmbedSingle) mapEmbedSingle.hidden = true;
+                if (openMapLink) openMapLink.hidden = true;
+                if (mapEmbedAll) {
+                    buildMapPairs(withMaps);
+                    mapEmbedAll.hidden = withMaps.length === 0;
+                }
+                if (openMapLinksDual) {
+                    buildOpenLinksDual(withMaps);
+                    openMapLinksDual.hidden = withMaps.length === 0;
+                }
+                if (mapEmbedEmpty) mapEmbedEmpty.hidden = withMaps.length > 0;
+                return;
+            }
+
+            const trip = tripConfig[member];
+            const hasMap = !!(trip && trip.mapEmbed);
+            if (mapEmbedAll) mapEmbedAll.hidden = true;
+            if (openMapLinksDual) openMapLinksDual.hidden = true;
+            if (mapEmbedSingle) mapEmbedSingle.hidden = !hasMap;
+            if (memberMapFrame && hasMap) memberMapFrame.src = trip.mapEmbed;
+            if (openMapLink) {
+                openMapLink.hidden = !hasMap;
+                if (hasMap) openMapLink.href = trip.mapOpen || "#";
+            }
+            if (mapEmbedEmpty) mapEmbedEmpty.hidden = hasMap;
+        }
+
+        function getCardSearchText(card) {
+            return [
+                card.dataset.date || "",
+                card.dataset.title || "",
+                card.dataset.desc || "",
+                card.dataset.tag || "",
+            ].join(" ").toLowerCase();
+        }
+
+        function createDayGroup(dayLabel) {
+            const group = document.createElement("section");
+            group.className = "day-group";
+            group.dataset.day = dayLabel;
+
+            const toggle = document.createElement("button");
+            toggle.type = "button";
+            toggle.className = "day-toggle";
+            toggle.setAttribute("aria-expanded", "false");
+            toggle.innerHTML = "<span>" + dayLabel + "</span><i class='fa-solid fa-chevron-down'></i>";
+
+            const body = document.createElement("div");
+            body.className = "day-cards";
+            body.style.display = "none";
+
+            group.appendChild(toggle);
+            group.appendChild(body);
+            itineraryList.appendChild(group);
+            dayGroups.set(dayLabel, { group, toggle, body });
+            return dayGroups.get(dayLabel);
+        }
+
+        function setDayExpanded(dayGroup, shouldExpand) {
+            dayGroup.toggle.setAttribute("aria-expanded", shouldExpand ? "true" : "false");
+            dayGroup.body.style.display = shouldExpand ? "grid" : "none";
+            dayGroup.group.classList.toggle("expanded", shouldExpand);
+        }
+
+        function initializeDayGroups() {
+            if (!itineraryList || !cards.length) return;
+            const sortedCards = [...cards].sort((a, b) => {
+                const memberA = normalizeMember(a.dataset.member || "");
+                const memberB = normalizeMember(b.dataset.member || "");
+                const sortA = (tripConfig[memberA] && tripConfig[memberA].sortOrder) ?? 99;
+                const sortB = (tripConfig[memberB] && tripConfig[memberB].sortOrder) ?? 99;
+                if (sortA !== sortB) return sortA - sortB;
+
+                const dayA = Number((getDayToken(a.dataset.date).match(/\d+/) || [999])[0]);
+                const dayB = Number((getDayToken(b.dataset.date).match(/\d+/) || [999])[0]);
+                return dayA - dayB;
+            });
+
+            sortedCards.forEach((card) => {
+                const dayLabel = getGroupLabel(card);
+                const dayGroup = dayGroups.get(dayLabel) || createDayGroup(dayLabel);
+                dayGroup.body.appendChild(card);
+            });
+        }
+
+        function updateDayGroupVisibility() {
+            dayGroups.forEach(({ group, body, toggle }) => {
+                const visibleCards = Array.from(body.querySelectorAll(".polaroid-card")).filter((card) => card.style.display !== "none");
+                group.style.display = visibleCards.length ? "" : "none";
+                if (!visibleCards.length) {
+                    setDayExpanded({ group, toggle, body }, false);
+                }
+            });
+        }
+
+        function ensureExpandedForCard(card) {
+            const dayGroup = dayGroups.get(getGroupLabel(card));
+            if (!dayGroup) return;
+            setDayExpanded(dayGroup, true);
+        }
+
+        function setActiveCard(card, options = {}) {
+            const { expandDay = true } = options;
+            cards.forEach((item) => item.classList.remove("active"));
+            card.classList.add("active");
+            if (expandDay) {
+                ensureExpandedForCard(card);
+            }
+            updateMapByMember(currentMember === "all" ? "all" : currentMember);
+
+            if (!detailPanel) return;
+            if (detailDate) detailDate.textContent = card.dataset.date || "";
+            if (detailTitle) detailTitle.textContent = card.dataset.title || "";
+            if (detailDesc) detailDesc.textContent = card.dataset.desc || "";
+            if (detailQuote) detailQuote.textContent = "「" + (card.dataset.quote || "") + "」";
+            if (detailTag) detailTag.textContent = card.dataset.tag || "";
+            if (detailLink) detailLink.href = card.dataset.link || "#";
+            const cardImg = card.querySelector("img");
+            if (detailImage && cardImg) {
+                detailImage.src = cardImg.src;
+                detailImage.alt = "節目截圖 - " + (card.dataset.title || "行程地點");
+            }
+        }
+
+        function applyFilter() {
+            let firstVisible = null;
+            cards.forEach((card) => {
+                const cardMember = normalizeMember(card.dataset.member || "");
+                const matchedMember = currentMember === "all" || cardMember === currentMember;
+                const matchedKeyword = !currentKeyword || getCardSearchText(card).includes(currentKeyword);
+                const matched = matchedMember && matchedKeyword;
+                card.style.display = matched ? "" : "none";
+                if (matched && !firstVisible) firstVisible = card;
+            });
+            updateDayGroupVisibility();
+            const activeVisibleCard = cards.find((card) => card.classList.contains("active") && card.style.display !== "none");
+            const fallbackCard = activeVisibleCard || firstVisible;
+            if (fallbackCard) {
+                setActiveCard(fallbackCard, { expandDay: false });
+            } else {
+                updateMapByMember(currentMember === "all" ? "all" : currentMember);
+            }
+        }
+
+        tabs.forEach((tab) => {
+            tab.addEventListener("click", () => {
+                tabs.forEach((item) => {
+                    item.classList.remove("active");
+                    item.setAttribute("aria-pressed", "false");
+                });
+                tab.classList.add("active");
+                tab.setAttribute("aria-pressed", "true");
+                currentMember = normalizeMember(tab.dataset.member || "all");
+                applyFilter();
+            });
+        });
+
+        if (itineraryList) {
+            itineraryList.addEventListener("click", (event) => {
+                const toggle = event.target.closest(".day-toggle");
+                if (!toggle) return;
+                const group = toggle.closest(".day-group");
+                if (!group) return;
+                const dayGroup = dayGroups.get(group.dataset.day);
+                if (!dayGroup) return;
+                const isExpanded = dayGroup.toggle.getAttribute("aria-expanded") === "true";
+                setDayExpanded(dayGroup, !isExpanded);
+            });
+        }
+
+        cards.forEach((card) => {
+            card.addEventListener("click", () => {
+                setActiveCard(card, { expandDay: true });
+                if (window.innerWidth < 920 && detailPanel) {
+                    detailPanel.scrollIntoView({ behavior: "smooth", block: "start" });
+                }
+            });
+        });
+
+        initializeDayGroups();
+        applyFilter();
+
+        return {
+            setKeyword(keyword) {
+                currentKeyword = keyword;
+                applyFilter();
+            },
+        };
+    }
+
+    const regionPanels = Array.from(document.querySelectorAll(".region-panel"));
+    const controllers = regionPanels.map((panel) => initRegionController(panel));
+
+    if (searchInput) {
+        searchInput.addEventListener("input", (event) => {
+            const keyword = event.target.value.trim().toLowerCase();
+            controllers.forEach((controller) => controller.setKeyword(keyword));
+        });
+    }
+
+    const regionTabs = Array.from(document.querySelectorAll("[data-region-tabs] .region-tab-btn"));
+    if (regionTabs.length && regionPanels.length) {
+        regionTabs.forEach((tab) => {
+            tab.addEventListener("click", () => {
+                const region = tab.dataset.region;
+                regionPanels.forEach((panel) => {
+                    panel.hidden = panel.dataset.regionPanel !== region;
+                });
+                regionTabs.forEach((item) => {
+                    const isActive = item === tab;
+                    item.classList.toggle("active", isActive);
+                    item.setAttribute("aria-pressed", isActive ? "true" : "false");
+                });
+            });
+        });
+    }
+})();
diff --git a/calendar2026.html b/calendar2026.html
new file mode 100644
index 0000000..c163103
--- /dev/null
+++ b/calendar2026.html
@@ -0,0 +1,460 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>水晶萬年曆 2026 — SECHSKIES SPECIAL CALENDAR</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="stylesheet" href="assets/css/calendar.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="assets/css/tablet.css">
+</head>
+
+<body class="calendar-page">
+    <header class="inner-page-header">
+        <div class="header-inner site-header-inner">
+            <h1 class="main-title">水晶萬年曆</h1>
+            <div class="subtitle-wrap">
+                <span class="sub-title">2026 SECHSKIES SPECIAL CALENDAR</span>
+            </div>
+        </div>
+    </header>
+
+    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
+
+    <canvas id="particles"></canvas>
+
+    <main class="calendar-page-container">
+        <!-- 上方控制控制面板 -->
+        <section class="calendar-controls" aria-label="萬年曆控制選項">
+            <div class="calendar-select-group">
+                <button type="button" class="calendar-btn" id="prev-month-btn">
+                    <i class="fa-solid fa-chevron-left" aria-hidden="true"></i> 上個月
+                </button>
+                <select id="year-select" class="calendar-select" aria-label="選擇年份">
+                    <option value="2025">2025 年</option>
+                    <option value="2026" selected>2026 年</option>
+                    <option value="2027">2027 年</option>
+                </select>
+                <select id="month-select" class="calendar-select" aria-label="選擇月份">
+                    <option value="1">1 月</option>
+                    <option value="2">2 月</option>
+                    <option value="3">3 月</option>
+                    <option value="4">4 月</option>
+                    <option value="5">5 月</option>
+                    <option value="6">6 月</option>
+                    <option value="7">7 月</option>
+                    <option value="8">8 月</option>
+                    <option value="9">9 月</option>
+                    <option value="10">10 月</option>
+                    <option value="11">11 月</option>
+                    <option value="12">12 月</option>
+                </select>
+                <button type="button" class="calendar-btn" id="next-month-btn">
+                    下個月 <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+                </button>
+            </div>
+
+            <!-- 分類篩選標籤 -->
+            <div class="calendar-filters" role="group" aria-label="紀念日分類篩選">
+                <button type="button" class="filter-chip active" data-category="all">全部紀念日</button>
+                <button type="button" class="filter-chip" data-category="birthday">成員生日</button>
+                <button type="button" class="filter-chip" data-category="debut">出道 / 重逢</button>
+                <button type="button" class="filter-chip" data-category="concert">演唱會 / 見面會</button>
+            </div>
+        </section>
+
+        <!-- 萬年曆主要版面 (雙欄結構) -->
+        <div class="calendar-layout">
+            <!-- 左欄：動態日曆網格卡片 -->
+            <section class="calendar-card">
+                <h2 class="calendar-header-title" id="calendar-month-year-display">2026 年 8 月</h2>
+
+                <div class="calendar-weekdays">
+                    <div class="calendar-weekday weekend">日</div>
+                    <div class="calendar-weekday">一</div>
+                    <div class="calendar-weekday">二</div>
+                    <div class="calendar-weekday">三</div>
+                    <div class="calendar-weekday">四</div>
+                    <div class="calendar-weekday">五</div>
+                    <div class="calendar-weekday weekend">六</div>
+                </div>
+
+                <div class="calendar-days-grid" id="calendar-days-grid">
+                    <!-- JS 動態生成日期網格 -->
+                </div>
+            </section>
+
+            <!-- 右欄：當月水晶紀念日明細清單 -->
+            <aside class="events-sidebar">
+                <h3 class="sidebar-title">
+                    <span id="sidebar-month-text">8 月專屬紀念日</span>
+                    <i class="fa-solid fa-star" aria-hidden="true"></i>
+                </h3>
+
+                <div class="events-list" id="events-list">
+                    <!-- JS 動態生成事件列表與成員生日/演唱會照片卡片 -->
+                </div>
+            </aside>
+        </div>
+    </main>
+
+    <!-- 點擊日期的 Modal 彈窗 -->
+    <div class="calendar-modal-backdrop" id="event-modal">
+        <div class="calendar-modal-content">
+            <button type="button" class="modal-close-btn" id="modal-close" aria-label="關閉視窗">&times;</button>
+            <div id="modal-body-content">
+                <!-- 動態注入內容 -->
+            </div>
+        </div>
+    </div>
+
+    <footer>
+        <p>SECHSKIES Fanpage &copy; 2026 — 2026 水晶男孩專屬萬年曆</p>
+        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
+            Design by <span class="mark_b">Jekkinoopy Studio</span>
+        </a>
+    </footer>
+
+    <!-- 全站 JavaScript 資源 -->
+    <script src="assets/js/portal-nav.js"></script>
+    <script src="assets/js/particles.js"></script>
+
+    <!-- 萬年曆核心邏輯 -->
+    <script>
+        // 水晶男孩專屬紀念日數據集 (含成員介紹頁連結錨點)
+        const sechskiesEvents = [
+            // 1月
+            {
+                month: 1, day: 21, endDay: 22, type: 'concert', title: 'Yellow Note Final 首爾演唱會 🎤',
+                photo: 'assets/images/concert/2017.jpg', desc: '2017 年首爾終場演唱會紀念'
+            },
+            // 2月
+            {
+                month: 2, day: 22, type: 'birthday', title: '姜成勳 生日 🎂', memberName: '姜成勳', enName: 'KANG SUNG HOON', role: 'Main Vocal',
+                photo: 'assets/images/member/kpoplover082006___Bsc2U5lhXuK___.jpg', desc: '1980.02.22 主唱姜成勳生日', memberUrl: 'member/member.html#poster-ksh'
+            },
+            // 3月
+            {
+                month: 3, day: 6, endDay: 8, type: 'concert', title: 'ACCESS 演唱會紀念 🎤',
+                photo: 'assets/images/concert/2020.jpg', desc: '2020 SECHSKIES Concert [ACCESS]'
+            },
+            { month: 3, day: 23, type: 'debut', title: 'J-Walk 組合出道日 🌟', desc: '2002.03.23 金在德與張水院發行首張專輯《Suddenly》' },
+            // 4月
+            {
+                month: 4, day: 14, type: 'concert', title: '六六歌2 上岩黃海重逢日 🌟',
+                photo: 'assets/images/totoga2/toto1.png', desc: '2016.04.14 無限挑戰六六歌2 上岩游擊演唱會16年後重逢'
+            },
+            { month: 4, day: 15, type: 'debut', title: 'SECHSKIES 團體出道紀念日 🌟', desc: '1997.04.15 水晶男孩正式出道，傳奇盛世起點！' },
+            // 5月
+            { month: 5, day: 18, type: 'debut', title: '水晶男孩告別宣佈日', desc: '2000.05.18 告別紀念' },
+            { month: 5, day: 24, type: 'debut', title: '姜成勳 Solo 出道日 🌟', desc: '2001.05.24 首張專輯《In Connection》' },
+            // 6月
+            {
+                month: 6, day: 8, type: 'birthday', title: '殷志源 生日 🎂', memberName: '殷志源', enName: 'EUN JI WON', role: 'Leader · Rap · Dance',
+                photo: 'assets/images/Eun Ji Won.jpeg', desc: '1978.06.08 水晶男孩隊長殷志源生日', memberUrl: 'member/member.html#poster-ejw'
+            },
+            // 7月
+            {
+                month: 7, day: 1, type: 'birthday', title: '高志溶 生日 🎂', memberName: '高志溶', enName: 'KO JI YONG', role: 'Vocal',
+                photo: 'assets/images/member/92599-502183.jpg', desc: '1980.07.01 高志溶生日', memberUrl: 'member/member.html#poster-kjy'
+            },
+            {
+                month: 7, day: 13, type: 'birthday', title: '李宰鎮 生日 🎂', memberName: '李宰鎮', enName: 'LEE JAE JIN', role: 'Rap · Dance',
+                photo: 'assets/images/member/1595330620293.jpg', desc: '1979.07.13 李宰鎮生日', memberUrl: 'member/member.html#poster-ljj'
+            },
+            {
+                month: 7, day: 16, type: 'birthday', title: '張水院 生日 🎂', memberName: '張水院', enName: 'JANG SU WON', role: 'Vocal',
+                photo: 'assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg', desc: '1980.07.16 張水院生日', memberUrl: 'member/member.html#poster-jsw'
+            },
+            // 8月
+            {
+                month: 8, day: 7, type: 'birthday', title: '金在德 生日 🎂', memberName: '金在德', enName: 'KIM JAE DUC', role: 'Rap · Dance',
+                photo: 'assets/images/member/4c0e013b341e85622979475bc230719b.jpg', desc: '1979.08.07 天使笑顏與舞蹈機器金在德生日', memberUrl: 'member/member.html#poster-kjd'
+            },
+            // 9月
+            {
+                month: 9, day: 10, endDay: 11, type: 'concert', title: 'Yellow Note 演唱會 (二安日) 🎤',
+                photo: 'assets/images/concert/2016.jpg', desc: '2016 黃海 6 分鐘喊聲喚回大爺們重返舞台'
+            },
+            {
+                month: 9, day: 23, type: 'concert', title: '20 週年高尺巨蛋演唱會 🎤',
+                photo: 'assets/images/concert/2017.jpg', desc: '2017 20th Anniversary Concert 高尺天空巨蛋'
+            },
+            // 10月
+            {
+                month: 10, day: 1, type: 'concert', title: 'BOF 釜山演唱會 🎤',
+                photo: 'assets/images/mission-balloon-sea.png', desc: '2016 60台遊覽車 6000人黃海盛況「黑幫黃」傳奇'
+            },
+            { month: 10, day: 7, type: 'debut', title: '《三個詞 Three Words》發行日 🌟', desc: '2016.10.07 回歸單曲音源發行日' },
+            {
+                month: 10, day: 13, endDay: 14, type: 'concert', title: 'YELLOFANTASY 22週年演唱會 🎤',
+                photo: 'assets/images/concert/2018.jpg', desc: '2018 SECHSKIES 2018 CONCERT – YELLOFANTASY'
+            },
+            { month: 10, day: 27, type: 'debut', title: '殷志源 Solo 出道日 🌟', desc: '2000.10.27 單曲《A-Ha》/《G Pop》' },
+            // 11月
+            { month: 11, day: 19, type: 'debut', title: '李宰鎮 Solo 出道日 🌟', desc: '2001.11.19 首張專輯《S.Double.J》' }
+        ];
+
+        // 狀態變數
+        let currentYear = 2026;
+        let currentMonth = 8; // 預設 8月
+        let activeCategory = 'all';
+
+        // DOM 元素
+        const yearSelect = document.getElementById('year-select');
+        const monthSelect = document.getElementById('month-select');
+        const prevBtn = document.getElementById('prev-month-btn');
+        const nextBtn = document.getElementById('next-month-btn');
+        const daysGrid = document.getElementById('calendar-days-grid');
+        const monthYearDisplay = document.getElementById('calendar-month-year-display');
+        const eventsList = document.getElementById('events-list');
+        const sidebarMonthText = document.getElementById('sidebar-month-text');
+
+        const eventModal = document.getElementById('event-modal');
+        const modalClose = document.getElementById('modal-close');
+        const modalBody = document.getElementById('modal-body-content');
+
+        function cleanEventTitle(title) {
+            return String(title || '').replace(/[🎂🌟🎤]/g, '').trim();
+        }
+
+        // 初始化
+        function initCalendar() {
+            yearSelect.value = currentYear;
+            monthSelect.value = currentMonth;
+            renderCalendar(currentYear, currentMonth);
+
+            // 事件監聽
+            yearSelect.addEventListener('change', (e) => {
+                currentYear = parseInt(e.target.value);
+                renderCalendar(currentYear, currentMonth);
+            });
+
+            monthSelect.addEventListener('change', (e) => {
+                currentMonth = parseInt(e.target.value);
+                renderCalendar(currentYear, currentMonth);
+            });
+
+            prevBtn.addEventListener('click', () => {
+                currentMonth--;
+                if (currentMonth < 1) {
+                    currentMonth = 12;
+                    currentYear--;
+                }
+                yearSelect.value = currentYear;
+                monthSelect.value = currentMonth;
+                renderCalendar(currentYear, currentMonth);
+            });
+
+            nextBtn.addEventListener('click', () => {
+                currentMonth++;
+                if (currentMonth > 12) {
+                    currentMonth = 1;
+                    currentYear++;
+                }
+                yearSelect.value = currentYear;
+                monthSelect.value = currentMonth;
+                renderCalendar(currentYear, currentMonth);
+            });
+
+            // 分類標籤篩選
+            document.querySelectorAll('.filter-chip').forEach(chip => {
+                chip.addEventListener('click', (e) => {
+                    document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
+                    e.target.classList.add('active');
+                    activeCategory = e.target.getAttribute('data-category');
+                    renderCalendar(currentYear, currentMonth);
+                });
+            });
+
+            // Modal 關閉
+            modalClose.addEventListener('click', () => {
+                eventModal.classList.remove('active');
+            });
+            eventModal.addEventListener('click', (e) => {
+                if (e.target === eventModal) eventModal.classList.remove('active');
+            });
+        }
+
+        // 渲染日曆
+        function renderCalendar(year, month) {
+            monthYearDisplay.textContent = `${year} 年 ${month} 月`;
+            sidebarMonthText.textContent = `${month} 月水晶紀念日`;
+            daysGrid.innerHTML = '';
+
+            // 1. 計算該月第一天是星期幾 & 總天數
+            const firstDayIndex = new Date(year, month - 1, 1).getDay(); // 0 = 星期日
+            const totalDays = new Date(year, month, 0).getDate();
+            const prevMonthTotalDays = new Date(year, month - 1, 0).getDate();
+
+            // 取得當月屬於水晶的事件
+            const monthEvents = sechskiesEvents.filter(ev => ev.month === month && (activeCategory === 'all' || ev.type === activeCategory));
+
+            // 2. 渲染上個月填補空格
+            for (let i = firstDayIndex - 1; i >= 0; i--) {
+                const dayCell = document.createElement('div');
+                dayCell.className = 'day-cell other-month';
+                dayCell.innerHTML = `<span class="day-num">${prevMonthTotalDays - i}</span>`;
+                daysGrid.appendChild(dayCell);
+            }
+
+            // 3. 渲染當月每一天
+            for (let day = 1; day <= totalDays; day++) {
+                const dayCell = document.createElement('div');
+                dayCell.className = 'day-cell';
+                const dayOfWeek = new Date(year, month - 1, day).getDay();
+                if (dayOfWeek === 0 || dayOfWeek === 6) {
+                    dayCell.classList.add('weekend');
+                }
+
+                // 檢查是否有水晶事件
+                const matchedEvents = monthEvents.filter(ev => {
+                    if (ev.endDay) {
+                        return day >= ev.day && day <= ev.endDay;
+                    }
+                    return ev.day === day;
+                });
+
+                let dayContent = `<span class="day-num">${day}</span>`;
+
+                if (matchedEvents.length > 0) {
+                    // 有生日事件時顯示頭像
+                    const bdayEvent = matchedEvents.find(ev => ev.type === 'birthday');
+                    const concertEvent = matchedEvents.find(ev => ev.type === 'concert' && ev.photo);
+
+                    if (bdayEvent && bdayEvent.photo) {
+                        const linkUrl = bdayEvent.memberUrl || 'member/member.html';
+                        dayContent += `<a href="${linkUrl}" class="day-birthday-link" onclick="event.stopPropagation();" title="點擊查看 ${bdayEvent.memberName} 詳細介紹"><img src="${bdayEvent.photo}" alt="${bdayEvent.memberName}" class="day-avatar-badge"><span class="day-member-name">${bdayEvent.memberName}</span></a>`;
+                    } else if (concertEvent && concertEvent.photo) {
+                        dayContent += `<img src="${concertEvent.photo}" alt="${concertEvent.title}" class="day-concert-badge" title="${concertEvent.title}">`;
+                    } else {
+                        // 一般事件點點
+                        dayContent += '<div class="day-events">';
+                        matchedEvents.forEach(ev => {
+                            dayContent += `<span class="event-dot ${ev.type}" title="${ev.title}"></span>`;
+                        });
+                        dayContent += '</div>';
+                    }
+
+                    // 點擊格點觸發 Modal (若非點擊在直接連結上)
+                    dayCell.addEventListener('click', () => {
+                        showDayModal(year, month, day, matchedEvents);
+                    });
+                }
+
+                dayCell.innerHTML = dayContent;
+                daysGrid.appendChild(dayCell);
+            }
+
+            // 4. 渲染下個月填補空格
+            const totalRendered = firstDayIndex + totalDays;
+            const remainingGrid = (totalRendered % 7 === 0) ? 0 : 7 - (totalRendered % 7);
+            for (let i = 1; i <= remainingGrid; i++) {
+                const dayCell = document.createElement('div');
+                dayCell.className = 'day-cell other-month';
+                dayCell.innerHTML = `<span class="day-num">${i}</span>`;
+                daysGrid.appendChild(dayCell);
+            }
+
+            // 5. 渲染右側事件列表
+            renderSidebarEvents(monthEvents);
+        }
+
+        // 渲染右欄當月事件明細
+        function renderSidebarEvents(events) {
+            eventsList.innerHTML = '';
+            if (events.length === 0) {
+                eventsList.innerHTML = '<p class="events-empty">本月無符合條件之水晶紀念日</p>';
+                return;
+            }
+
+            events.forEach(ev => {
+                if (ev.type === 'birthday' && ev.photo) {
+                    // 生日精美照片卡片 (點圖片連成員介紹頁面)
+                    const linkUrl = ev.memberUrl || 'member/member.html';
+                    const bdayCard = document.createElement('div');
+                    bdayCard.className = 'birthday-featured-card';
+                    bdayCard.innerHTML = `
+                        <a href="${linkUrl}" class="birthday-photo-wrap" title="點擊前往 ${ev.memberName} 個人介紹頁面">
+                            <img src="${ev.photo}" alt="${ev.memberName}">
+                        </a>
+                        <div class="birthday-info">
+                            <h4><a href="${linkUrl}" title="前往成員介紹">${ev.memberName}</a></h4>
+                            <div class="en-name">${ev.enName} • ${ev.role}</div>
+                            <div class="bday-date">${ev.month} 月 ${ev.day} 日</div>
+                        </div>
+                    `;
+                    eventsList.appendChild(bdayCard);
+                } else if (ev.type === 'concert' && ev.photo) {
+                    // 演唱會帶圖卡片
+                    const dateStr = ev.endDay ? `${ev.month}/${ev.day} ~ ${ev.month}/${ev.endDay}` : `${ev.month}/${ev.day}`;
+                    const concertCard = document.createElement('div');
+                    concertCard.className = 'concert-featured-card';
+                    concertCard.innerHTML = `
+                        <img src="${ev.photo}" alt="${ev.title}">
+                        <div class="event-card-header">
+                            <span class="event-date-badge">${dateStr}</span>
+                        </div>
+                        <div class="event-title">${cleanEventTitle(ev.title)}</div>
+                        <div class="event-desc">${ev.desc}</div>
+                    `;
+                    eventsList.appendChild(concertCard);
+                } else {
+                    // 一般事件卡片
+                    const dateStr = ev.endDay ? `${ev.month}/${ev.day} ~ ${ev.month}/${ev.endDay}` : `${ev.month}/${ev.day}`;
+                    const card = document.createElement('div');
+                    card.className = `event-card type-${ev.type}`;
+                    card.innerHTML = `
+                        <div class="event-card-header">
+                            <span class="event-date-badge">${dateStr}</span>
+                        </div>
+                        <div class="event-title">${cleanEventTitle(ev.title)}</div>
+                        <div class="event-desc">${ev.desc}</div>
+                    `;
+                    eventsList.appendChild(card);
+                }
+            });
+        }
+
+        // 顯示 Modal 詳情
+        function showDayModal(year, month, day, events) {
+            let html = `<h3 class="modal-date-title">${year} 年 ${month} 月 ${day} 日</h3>`;
+            events.forEach(ev => {
+                if (ev.type === 'birthday' && ev.photo) {
+                    const linkUrl = ev.memberUrl || 'member/member.html';
+                    html += `
+                        <a href="${linkUrl}" title="點擊前往 ${ev.memberName} 個人介紹頁面">
+                            <img src="${ev.photo}" alt="${ev.memberName}" class="modal-photo">
+                        </a>
+                        <h4 class="modal-member-name"><a href="${linkUrl}">${ev.memberName}</a></h4>
+                        <p class="modal-member-meta">${ev.enName} (${ev.role})</p>
+                        <p class="modal-desc">${ev.desc}</p>
+                        <a href="${linkUrl}" class="calendar-btn modal-member-link">前往 ${ev.memberName} 專屬頁面 <i class="fa-solid fa-arrow-right"></i></a>
+                    `;
+                } else if (ev.type === 'concert' && ev.photo) {
+                    html += `
+                        <img src="${ev.photo}" alt="${ev.title}" class="modal-concert-photo">
+                        <h4 class="modal-event-title">${cleanEventTitle(ev.title)}</h4>
+                        <p class="modal-desc">${ev.desc}</p>
+                    `;
+                } else {
+                    html += `
+                        <div class="modal-event-box">
+                            <h4 class="modal-event-title">${cleanEventTitle(ev.title)}</h4>
+                            <p class="modal-desc">${ev.desc}</p>
+                        </div>
+                    `;
+                }
+            });
+            modalBody.innerHTML = html;
+            eventModal.classList.add('active');
+        }
+
+        // 頁面載入完成後執行 init
+        document.addEventListener('DOMContentLoaded', initCalendar);
+    </script>
+</body>
+
+</html>
diff --git a/member/member.html b/member/member.html
index a27f09d..c98d1ae 100644
--- a/member/member.html
+++ b/member/member.html
@@ -99,7 +99,7 @@
                     <div class="member-poster__wanted">WHITE</div>
                     <div class="member-poster__sheet">
                         <div class="member-poster__photo">
-                            <img src="../assets/images/member/92599-502183.jpg" alt="姜成勳肖像" width="280" height="340" loading="lazy">
+                            <img src="../assets/images/member/kpoplover082006___Bsc2U5lhXuK___.jpg" alt="姜成勳肖像" width="280" height="340" loading="lazy">
                         </div>
                         <p class="member-poster__role">Main Vocal</p>
                         <h2 class="member-poster__name" id="poster-ksh">姜成勳</h2>
@@ -114,7 +114,7 @@
                     <div class="member-poster__wanted">WHITE</div>
                     <div class="member-poster__sheet">
                         <div class="member-poster__photo">
-                            <img src="../assets/images/member/noona7273___Bt7EZHRAGgs___.jpg" alt="高志溶肖像" width="280" height="340" loading="lazy">
+                            <img src="../assets/images/member/92599-502183.jpg" alt="高志溶肖像" width="280" height="340" loading="lazy">
                         </div>
                         <p class="member-poster__role">Vocal</p>
                         <h2 class="member-poster__name" id="poster-kjy">高志溶</h2>
diff --git a/yellow-note/map.html b/yellow-note/map.html
index 54926bb..ad34fbf 100644
--- a/yellow-note/map.html
+++ b/yellow-note/map.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SECHSKIES 台灣行程地圖</title>
+    <title>SECHSKIES 節目景點地圖</title>
     <link rel="stylesheet" href="../assets/css/style.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <link rel="stylesheet" href="../assets/css/tablet.css">
@@ -13,7 +13,7 @@
         body.map-page .map-embed-all[hidden],
         body.map-page .map-embed-single[hidden],
         body.map-page .map-links-dual[hidden],
-        body.map-page #open-map-link[hidden] {
+        body.map-page .map-link[hidden] {
             display: none !important;
         }
 
@@ -29,19 +29,18 @@
  否則會變成瀏覽器的「片段模式」，樣式常常吃不到或跑版。 -->
 <header class="inner-page-header">
     <div class="header-inner site-header-inner">
-        <h1 class="main-title">台灣行程列表</h1>
+        <h1 class="main-title">節目景點列表</h1>
         <div class="subtitle-wrap">
-            <span class="sub-title">SECHSKIES TAIWAN ARCHIVE</span>
+            <span class="sub-title">SECHSKIES LOCATION ARCHIVE</span>
         </div>
     </div>
 </header>
 
 <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
 
-<div class="member-tabs" aria-label="成員篩選">
-    <button class="tab-btn active" data-member="eun" aria-pressed="true">殷空少搭飛機去台灣高雄</button>
-    <button class="tab-btn" data-member="ko" aria-pressed="false">高高父子遊台灣</button>
-    <button class="tab-btn" data-member="all" aria-pressed="false">全部行程</button>
+<div class="region-tabs" aria-label="地區篩選" data-region-tabs>
+    <button class="region-tab-btn active" data-region="taipei" aria-pressed="true">台灣行程</button>
+    <button class="region-tab-btn" data-region="global" aria-pressed="false">海外行程</button>
 </div>
 
 <canvas id="particles"></canvas>
@@ -49,53 +48,50 @@
 <input id="itinerary-search" type="search" aria-label="行程搜尋"
     placeholder="搜尋地點、描述、標籤（例如：九份、夜市、Day 2）">
 
-<main id="taipei" class="content-container map-layout">
-    <!-- 備註：Google My Maps 嵌入。預設殷志源單圖；「全部行程」並排兩張（殷志源在上／左）。
-     右側列表為敘事與導覽；地圖與標籤在 map.js 的 memberMaps 設定。 -->
-    <section class="map-sticky">
-        <h2 class="map-title">水晶男孩台灣行程地圖</h2>
-        <div class="map-embed-single" id="map-embed-single">
-            <iframe id="member-map" class="map-my-maps-frame" title="SECHSKIES 踩點地圖（單一行程）" loading="lazy"
-                referrerpolicy="no-referrer-when-downgrade"
-                src="https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F">
-            </iframe>
+<main class="content-container">
+    <!-- 備註：每個 .region-panel 是獨立地區區塊，member-tabs 上的 data-map-embed／data-map-open
+     是該行程的 Google My Maps（可留空＝該行程沒有地圖，只顯示卡片）。新增行程只要加一顆 tab 按鈕，
+     不需要改 map.js。「全部行程」的地圖會依目前分頁裡「有設定地圖」的 tab 動態組出來。 -->
+
+    <section id="taipei" class="region-panel" data-region-panel="taipei">
+        <div class="member-tabs" aria-label="成員篩選" data-member-tabs>
+            <button class="tab-btn active" data-member="eun" aria-pressed="true"
+                data-trip-name="殷空少搭飛機去台灣高雄" data-member-label="殷志源" data-sort-order="0"
+                data-map-embed="https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&amp;ehbc=2E312F"
+                data-map-open="https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI">殷空少搭飛機去台灣高雄</button>
+            <button class="tab-btn" data-member="ko" aria-pressed="false"
+                data-trip-name="高高父子遊台灣" data-member-label="高志溶" data-sort-order="1"
+                data-map-embed="https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&amp;hl=zh-TW&amp;ehbc=2E312F"
+                data-map-open="https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw">高高父子遊台灣</button>
+            <button class="tab-btn" data-member="all" aria-pressed="false">全部行程</button>
         </div>
-        <div class="map-embed-all" id="map-embed-all" hidden>
-            <div class="map-embed-pair">
-                <p class="map-embed-label">殷空少搭飛機去台灣高雄</p>
-                <iframe id="member-map-eun" class="map-my-maps-frame" title="殷志源高雄行程 踩點地圖" loading="lazy"
+
+        <div class="map-layout">
+        <section class="map-sticky" data-map-sticky>
+            <h2 class="map-title">水晶男孩台灣行程地圖</h2>
+            <div class="map-embed-single" id="map-embed-single">
+                <iframe id="member-map" class="map-my-maps-frame" title="SECHSKIES 踩點地圖（單一行程）" loading="lazy"
                     referrerpolicy="no-referrer-when-downgrade"
                     src="https://www.google.com/maps/d/embed?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI&ehbc=2E312F">
                 </iframe>
             </div>
-            <div class="map-embed-pair">
-                <p class="map-embed-label">高高父子遊台灣</p>
-                <iframe id="member-map-ko" class="map-my-maps-frame" title="高高父子遊台灣 踩點地圖" loading="lazy"
-                    referrerpolicy="no-referrer-when-downgrade"
-                    src="https://www.google.com/maps/d/embed?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw&hl=zh-TW&ehbc=2E312F">
-                </iframe>
+            <p class="map-embed-empty" data-map-embed-empty hidden>這個行程目前沒有設定地圖，只有下方的地點卡片。</p>
+            <div class="map-embed-all" id="map-embed-all" hidden></div>
+            <div class="map-links-wrap">
+                <a id="open-map-link" class="map-link" target="_blank"
+                    href="https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI">
+                    在 Google My Maps 開啟完整地圖
+                </a>
+                <div id="open-map-links-dual" class="map-links-dual" hidden></div>
             </div>
-        </div>
-        <div class="map-links-wrap">
-            <a id="open-map-link" class="map-link" target="_blank"
-                href="https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI">
-                在 Google My Maps 開啟完整地圖
-            </a>
-            <div id="open-map-links-dual" class="map-links-dual" hidden>
-                <a id="open-map-link-eun" class="map-link" target="_blank"
-                    href="https://www.google.com/maps/d/u/0/viewer?mid=1VGZ76SPPjm3NWCBQe-hkm08oe5WPRJI">開啟「殷空少搭飛機去台灣高雄」My Maps</a>
-                <a id="open-map-link-ko" class="map-link" target="_blank"
-                    href="https://www.google.com/maps/d/u/0/viewer?mid=1xpAsSoO8gNmMiW4x2sfkndISFTtjMQDw">開啟「高高父子遊台灣」My Maps</a>
-            </div>
-        </div>
-    </section>
+        </section>
 
     <section class="itinerary-list">
         <!-- 備註：每張卡的 data-* 是「細節面板的資料來源」。
          你只要改 data-date/title/desc/quote/tag/link 和圖片，就會同步更新上方介紹。 -->
         <article class="detail-panel" id="detail-panel" aria-live="polite">
             <div class="detail-photo">
-                <img id="detail-image" src="https://picsum.photos/seed/day1-airport/900/520" alt="行程節目截圖">
+                <img id="detail-image" src="https://images.pexels.com/photos/31504986/pexels-photo-31504986.jpeg" alt="臺灣桃園國際機場停機坪與客機">
             </div>
             <div class="detail-content">
                 <span id="detail-date" class="date">Day 1</span>
@@ -112,7 +108,7 @@
             data-quote="高雄，我們來了。" data-tag="#殷志源 #Day1 #出發"
             data-link="https://maps.google.com/?q=仁川國際機場">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/eun-khh-day1-1/640/420" alt="殷志源高雄行程節目截圖-仁川國際機場">
+                <img src="https://images.pexels.com/photos/32211619/pexels-photo-32211619.jpeg" alt="仁川國際機場明亮現代化航廈">
             </div>
             <div class="card-content">
                 <span class="date">殷志源 Day 1</span>
@@ -125,7 +121,7 @@
             data-desc="抵達高雄，正式開始在地行程。"
             data-quote="落地就是旅行模式開啟。" data-tag="#殷志源 #Day1 #高雄"
             data-link="https://maps.google.com/?q=高雄國際機場">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day1-2/640/420" alt="殷志源高雄行程節目截圖-高雄國際機場"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d7/Outside_of_KHH_Terminal.jpg" alt="高雄國際機場航廈外觀" title="圖片來源：Wikimedia Commons，© ABOVE THE SKY，CC BY-SA 4.0"><span class="photo-credit">© ABOVE THE SKY</span></div>
             <div class="card-content"><span class="date">殷志源 Day 1</span><h3>高雄國際機場</h3><p class="description">殷志源高雄行程第二站。</p><div class="tag">#殷志源 #Day1</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 1" data-title="星巴克小港國際站門市"
@@ -160,28 +156,28 @@
             data-desc="高雄經典景點，白天景色與步行路線都很適合取景。"
             data-quote="每一步都有風景可以拍。" data-tag="#殷志源 #Day2 #景點"
             data-link="https://maps.google.com/?q=蓮池潭">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day2-2/640/420" alt="殷志源高雄行程節目截圖-蓮池潭"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b3/Lotus_Lake%2C_Kaohsiung%2C_panorama%2C_Dec_06.jpg" alt="蓮池潭與春秋閣全景" title="圖片來源：Wikimedia Commons，© Sengkang，CC BY-SA 3.0"><span class="photo-credit">© Sengkang</span></div>
             <div class="card-content"><span class="date">殷志源 Day 2</span><h3>蓮池潭</h3><p class="description">殷志源高雄行程 Day 2 第二站。</p><div class="tag">#殷志源 #Day2</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 2" data-title="龍虎塔"
             data-desc="蓮池潭代表地標，適合搭配導覽與拍照段落。"
             data-quote="高雄的經典場景之一。" data-tag="#殷志源 #Day2 #地標"
             data-link="https://maps.google.com/?q=龍虎塔">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day2-3/640/420" alt="殷志源高雄行程節目截圖-龍虎塔"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Dragon_and_Tiger_Pagodas.jpg" alt="蓮池潭龍虎塔與九曲橋" title="圖片來源：Wikimedia Commons，© Selvamsathish，CC BY-SA 4.0"><span class="photo-credit">© Selvamsathish</span></div>
             <div class="card-content"><span class="date">殷志源 Day 2</span><h3>龍虎塔</h3><p class="description">殷志源高雄行程 Day 2 第三站。</p><div class="tag">#殷志源 #Day2</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 2" data-title="輕軌高雄展覽館站(新光碼頭)"
             data-desc="港區路線轉乘點，串接後續海線行程。"
             data-quote="搭上輕軌，城市風景一路展開。" data-tag="#殷志源 #Day2 #輕軌"
             data-link="https://maps.google.com/?q=輕軌高雄展覽館站(新光碼頭)">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day2-4/640/420" alt="殷志源高雄行程節目截圖-輕軌高雄展覽館站"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/1/1c/Kaohsiung_LRT_C8_Station.jpg" alt="高雄輕軌車站與列車" title="圖片來源：Wikimedia Commons，© Tze Chiang Hao，CC BY-SA 4.0"><span class="photo-credit">© Tze Chiang Hao</span></div>
             <div class="card-content"><span class="date">殷志源 Day 2</span><h3>輕軌高雄展覽館站(新光碼頭)</h3><p class="description">殷志源高雄行程 Day 2 第四站。</p><div class="tag">#殷志源 #Day2</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 2" data-title="捷運哈瑪星站(輕軌哈瑪星站)"
             data-desc="山海交界的人氣轉運點，步行動線完整。"
             data-quote="到了哈瑪星，海港味就很濃。" data-tag="#殷志源 #Day2 #捷運"
             data-link="https://maps.google.com/?q=捷運哈瑪星站">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day2-5/640/420" alt="殷志源高雄行程節目截圖-捷運哈瑪星站"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Hamasen%2C_Kaohsiung_2011-04-24.jpg" alt="哈瑪星港區歷史街景" title="圖片來源：Wikimedia Commons，© Yi Chen，CC BY 2.0"><span class="photo-credit">© Yi Chen</span></div>
             <div class="card-content"><span class="date">殷志源 Day 2</span><h3>捷運哈瑪星站(輕軌哈瑪星站)</h3><p class="description">殷志源高雄行程 Day 2 第五站。</p><div class="tag">#殷志源 #Day2</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 2" data-title="仁武烤鴨"
@@ -202,14 +198,14 @@
             data-desc="前往旗津的重要交通節點。"
             data-quote="坐上渡輪，旅程感直接拉滿。" data-tag="#殷志源 #Day2 #輪渡"
             data-link="https://maps.google.com/?q=鼓山輪渡站">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day2-8/640/420" alt="殷志源高雄行程節目截圖-鼓山輪渡站"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Gushan_Ferry_Station-20250403.jpg" alt="鼓山輪渡站站體" title="圖片來源：Wikimedia Commons，© Allervous，CC BY-SA 4.0"><span class="photo-credit">© Allervous</span></div>
             <div class="card-content"><span class="date">殷志源 Day 2</span><h3>鼓山輪渡站</h3><p class="description">殷志源高雄行程 Day 2 第八站。</p><div class="tag">#殷志源 #Day2</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 2" data-title="旗津輪渡站"
             data-desc="抵達旗津，展開海岸線路段。"
             data-quote="到了旗津，風都不一樣。" data-tag="#殷志源 #Day2 #旗津"
             data-link="https://maps.google.com/?q=旗津輪渡站">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day2-9/640/420" alt="殷志源高雄行程節目截圖-旗津輪渡站"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/%E6%97%97%E6%B4%A5%E8%BC%AA%E6%B8%A1%E7%AB%99%E5%BB%BA%E7%AF%89%E5%A4%96%E8%A7%80.jpg" alt="旗津輪渡站建築外觀" title="圖片來源：Wikimedia Commons，© Yu-Cian Wu，CC BY-SA 4.0"><span class="photo-credit">© Yu-Cian Wu</span></div>
             <div class="card-content"><span class="date">殷志源 Day 2</span><h3>旗津輪渡站</h3><p class="description">殷志源高雄行程 Day 2 第九站。</p><div class="tag">#殷志源 #Day2</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 2" data-title="樂騎腳踏車、電動車、遊園車（旗津）"
@@ -223,14 +219,14 @@
             data-desc="旗津拍照地標之一。"
             data-quote="彩虹教堂是旗津必拍清單。" data-tag="#殷志源 #Day2 #旗津"
             data-link="https://maps.google.com/?q=旗津彩虹教堂">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day2-11/640/420" alt="殷志源高雄行程節目截圖-旗津彩虹教堂"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/3/37/%E3%80%90%E9%AB%98%E9%9B%84%E6%99%AF%E9%BB%9E%E3%80%91%E6%97%97%E6%B4%A5%E5%BD%A9%E8%99%B9%E6%95%99%E5%A0%82_%2831505226685%29.jpg" alt="旗津彩虹教堂繽紛拱門" title="圖片來源：Wikimedia Commons，© fullfen666，CC BY-SA 2.0"><span class="photo-credit">© fullfen666</span></div>
             <div class="card-content"><span class="date">殷志源 Day 2</span><h3>旗津彩虹教堂</h3><p class="description">殷志源高雄行程 Day 2 第十一站。</p><div class="tag">#殷志源 #Day2</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 2" data-title="旗津貝殼館"
             data-desc="旗津主題展點，補足海線內容。"
             data-quote="一站一站把海線故事拼起來。" data-tag="#殷志源 #Day2 #旗津"
             data-link="https://maps.google.com/?q=旗津貝殼館">
-            <div class="photo-frame"><img src="https://picsum.photos/seed/eun-khh-day2-12/640/420" alt="殷志源高雄行程節目截圖-旗津貝殼館"></div>
+            <div class="photo-frame"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Cijin_Shell_Museum.JPG" alt="旗津貝殼館外觀" title="圖片來源：Wikimedia Commons，© SSR2000，CC BY-SA 3.0"><span class="photo-credit">© SSR2000</span></div>
             <div class="card-content"><span class="date">殷志源 Day 2</span><h3>旗津貝殼館</h3><p class="description">殷志源高雄行程 Day 2 第十二站。</p><div class="tag">#殷志源 #Day2</div></div>
         </article>
         <article class="polaroid-card" data-member="eun" data-date="殷志源 Day 2" data-title="海忠寶活海產店"
@@ -246,7 +242,7 @@
             data-quote="旅程從落地那一刻就開始了。" data-tag="#高高父子遊台灣 #Day1 #機場"
             data-link="https://maps.google.com/?q=臺灣桃園國際機場">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day1-airport/640/420" alt="高高父子遊台灣節目截圖-臺灣桃園國際機場">
+                <img src="https://images.pexels.com/photos/31504986/pexels-photo-31504986.jpeg" alt="臺灣桃園國際機場停機坪與客機">
             </div>
             <div class="card-content">
                 <span class="date">高志溶 Day 1</span>
@@ -261,7 +257,7 @@
             data-quote="從這裡開始感受台北節奏。" data-tag="#高高父子遊台灣 #Day1 #西門"
             data-link="https://maps.google.com/?q=捷運西門站">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day1-ximen-mrt/640/420" alt="高高父子遊台灣節目截圖-捷運西門站">
+                <img src="https://images.pexels.com/photos/32222711/pexels-photo-32222711.jpeg" alt="西門町街景">
             </div>
             <div class="card-content">
                 <span class="date">Day 1</span>
@@ -306,7 +302,7 @@
             data-quote="台灣夜市是不能錯過的必修行程。" data-tag="#高高父子遊台灣 #Day1 #夜市"
             data-link="https://maps.google.com/?q=士林夜市">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day1-nightmarket/640/420" alt="高高父子遊台灣節目截圖-士林夜市">
+                <img src="https://images.pexels.com/photos/35558289/pexels-photo-35558289.jpeg" alt="士林夜市夜間街景">
             </div>
             <div class="card-content">
                 <span class="date">Day 1</span>
@@ -351,7 +347,8 @@
             data-quote="第二天從白天的城市日常開始。" data-tag="#高高父子遊台灣 #Day2 #校園"
             data-link="https://maps.google.com/?q=臺灣師範大學">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day2-ntnu/640/420" alt="高高父子遊台灣節目截圖-臺灣師範大學">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/b/b0/202407_Main_gate_of_NTNU_Main_Campus.jpg" alt="臺灣師範大學校門" title="圖片來源：Wikimedia Commons，© Jonashtand，CC BY-SA 4.0">
+                <span class="photo-credit">© Jonashtand</span>
             </div>
             <div class="card-content">
                 <span class="date">Day 2</span>
@@ -381,7 +378,7 @@
             data-quote="九份是會讓人想慢慢走慢慢看的地方。" data-tag="#高高父子遊台灣 #Day2 #九份"
             data-link="https://maps.google.com/?q=九份老街">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day2-jiufen/640/420" alt="高高父子遊台灣節目截圖-九份老街">
+                <img src="https://images.pexels.com/photos/37975552/pexels-photo-37975552.jpeg" alt="九份老街紅燈籠夜景">
             </div>
             <div class="card-content">
                 <span class="date">Day 2</span>
@@ -426,7 +423,8 @@
             data-quote="第三天就用溫泉感把節奏放慢。" data-tag="#高高父子遊台灣 #Day3 #北投"
             data-link="https://maps.google.com/?q=北投公園露天溫泉">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day3-hotspring/640/420" alt="高高父子遊台灣節目截圖-北投公園露天溫泉">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/d/da/Hot_river_%283823489104%29.jpg" alt="北投溫泉公園地熱溪流" title="圖片來源：Wikimedia Commons，© Caitriana Nicholson，CC BY-SA 2.0">
+                <span class="photo-credit">© Caitriana Nicholson</span>
             </div>
             <div class="card-content">
                 <span class="date">Day 3</span>
@@ -441,7 +439,8 @@
             data-quote="在橋上看風景，旅程也會變慢。" data-tag="#高高父子遊台灣 #Day3"
             data-link="https://maps.google.com/?q=靜安吊橋">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day3-bridge/640/420" alt="高高父子遊台灣節目截圖-靜安吊橋">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Jing%27an_Suspension_Bridge_New_Taipei_%E9%9D%9C%E5%AE%89%E6%A9%8B_%282025%29_-_img_08.jpg" alt="靜安吊橋" title="圖片來源：Wikimedia Commons，© Chainwit.，CC BY 4.0">
+                <span class="photo-credit">© Chainwit.</span>
             </div>
             <div class="card-content">
                 <span class="date">Day 3</span>
@@ -456,7 +455,7 @@
             data-quote="十分的氛圍，跟平溪線一樣有故事感。" data-tag="#高高父子遊台灣 #Day3 #十分"
             data-link="https://maps.google.com/?q=十分老街">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day3-shifen/640/420" alt="高高父子遊台灣節目截圖-十分老街">
+                <img src="https://images.pexels.com/photos/30131488/pexels-photo-30131488.jpeg" alt="十分老街火車穿越街道">
             </div>
             <div class="card-content">
                 <span class="date">Day 3</span>
@@ -501,7 +500,8 @@
             data-quote="把願望寫上天燈，這趟旅程就有了句點。" data-tag="#高高父子遊台灣 #Day3 #天燈"
             data-link="https://maps.google.com/?q=胡家天燈">
             <div class="photo-frame">
-                <img src="https://picsum.photos/seed/day3-sky-lantern/640/420" alt="高高父子遊台灣節目截圖-胡家天燈">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/5/50/20250707_lantern2.jpg" alt="十分天燈夜間施放" title="圖片來源：Wikimedia Commons，© Wombatjpw，CC0">
+                <span class="photo-credit">© Wombatjpw</span>
             </div>
             <div class="card-content">
                 <span class="date">Day 3</span>
@@ -510,10 +510,39 @@
                 <div class="tag">#高高父子遊台灣 #Day3</div>
             </div>
         </article>
+        </section>
+        </div>
+    </section>
+
+    <section id="global" class="region-panel" data-region-panel="global" hidden>
+        <div class="member-tabs" aria-label="成員篩選" data-member-tabs>
+            <button class="tab-btn active" data-member="all" aria-pressed="true">全部行程</button>
+        </div>
+
+        <div class="map-layout">
+        <section class="map-sticky" data-map-sticky hidden>
+            <h2 class="map-title">海外行程地圖</h2>
+            <div class="map-embed-single" id="map-embed-single-global">
+                <iframe id="member-map-global" class="map-my-maps-frame" title="SECHSKIES 踩點地圖（單一行程）" loading="lazy"
+                    referrerpolicy="no-referrer-when-downgrade" src="about:blank"></iframe>
+            </div>
+            <p class="map-embed-empty" data-map-embed-empty hidden>這個行程目前沒有設定地圖，只有下方的地點卡片。</p>
+            <div class="map-embed-all" id="map-embed-all-global" hidden></div>
+            <div class="map-links-wrap">
+                <a class="map-link" target="_blank" href="#" hidden>在 Google My Maps 開啟完整地圖</a>
+                <div class="map-links-dual" hidden></div>
+            </div>
+        </section>
+
+        <section class="itinerary-list">
+            <p class="region-empty-state" data-region-empty>
+                海外行程整理中，之後會陸續補上節目裡出現過的國家與地點。
+            </p>
+        </section>
+        </div>
     </section>
 </main>
 <footer>
-    <div id="global"></div>
     <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
     <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
         Design by <span class="mark_b">Jekkinoopy Studio</span>