From c278df23e1a71fb17dbc33fdce0e4e0239e1ef35 Mon Sep 17 00:00:00 2001
From: jekkinoopy <jekkinoopy@gmail.com>
Date: Thu, 14 May 2026 09:20:10 +0800
Subject: [PATCH] =?UTF-8?q?fix=20add=20assets/=E4=B8=A6=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=85=A8=E7=AB=99=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .cursor/rules/ai-change-boundaries.mdc        |    4 +-
 .cursor/rules/user-scope-and-nav.mdc          |    6 +-
 CHANGESET-review.md                           |   20 +-
 albums/albums.html                            |   16 +-
 {concert => assets/css}/concert.css           | 1140 ++++++++---------
 index.css => assets/css/index.css             |  750 +++++------
 {extra => assets/css}/lyrics.css              |    0
 style.css => assets/css/style.css             |    4 +-
 tablet.css => assets/css/tablet.css           |  436 +++----
 {images => assets/images}/1650509638027.jpg   |  Bin
 .../images}/201801231634594057.jpg            |  Bin
 .../2023_webdesign_水晶男孩推廣部規劃s.png    |  Bin
 .../2023_電子書_無限挑戰六六歌2_final跨頁.pdf |  Bin
 {images => assets/images}/230515113027.svg    |    0
 ...1783556105020524_6795654717822205952_o.jpg |  Bin
 {images => assets/images}/Eun Ji Won.jpeg     |  Bin
 {images => assets/images}/G1fanmeeting.png    |  Bin
 {images => assets/images}/G1fanmeetingb.png   |  Bin
 {images => assets/images}/SECHSKIES_LOGO.jpg  |  Bin
 {images => assets/images}/albums/1997.jpg     |  Bin
 {images => assets/images}/albums/1998.jpg     |  Bin
 {images => assets/images}/albums/1999.jpg     |  Bin
 {images => assets/images}/albums/2016.jpg     |  Bin
 {images => assets/images}/albums/2017.jpg     |  Bin
 {images => assets/images}/albums/20172.jpg    |  Bin
 {images => assets/images}/albums/2020.jpg     |  Bin
 {images => assets/images}/concert/2016.jpg    |  Bin
 {images => assets/images}/concert/2017.jpg    |  Bin
 {images => assets/images}/concert/2018.jpg    |  Bin
 {images => assets/images}/concert/2020.jpg    |  Bin
 {images => assets/images}/header.jpg          |  Bin
 {images => assets/images}/header.png          |  Bin
 {images => assets/images}/logo.png            |  Bin
 {images => assets/images}/logov.svg           |    0
 .../images}/map/jiyong_taiwan01s.jpg          |  Bin
 .../images}/map/jiyong_taiwan02.jpg           |  Bin
 .../images}/map/jiyong_taiwan03 s.jpg         |  Bin
 ...Return of Superman2018.07.08] 00-03-22.png |  Bin
 ...Return of Superman2018.07.08] 00-03-23.png |  Bin
 {images => assets/images}/map/ko/DSC_0174.NEF |  Bin
 {images => assets/images}/map/ko/IMG_0784.jpg |  Bin
 .../images}/member/1595330620293.jpg          |  Bin
 .../4c0e013b341e85622979475bc230719b.jpg      |  Bin
 .../images}/member/92599-502183.jpg           |  Bin
 .../kpoplover082006___Bsc2U5lhXuK___.jpg      |  Bin
 .../member/noona7273___Bt7EZHRAGgs___.jpg     |  Bin
 .../member/seven7lai_1___BuRBxcPAIsP___.jpg   |  Bin
 {images => assets/images}/minister/.gitkeep   |    0
 .../images}/mission-balloon-sea.png           |  Bin
 .../images}/old/1533313685-1024x714.jpg       |  Bin
 ...51ddd46a0179bafcccb900d976241-1024x683.jpg |  Bin
 .../71bzyibKBTL._UL1500_-1-e1533296470805.jpg |  Bin
 .../images}/old/DYP9ArjVwAEzxs5.jpg           |  Bin
 .../images}/old/ShowBizhoony-1s.png           |  Bin
 .../images}/old/cropped-logo.1s.png           |  Bin
 .../images}/old/cropped-threeword009-1.png    |  Bin
 .../images}/old/cropped-threeword009.png      |  Bin
 ...f2a36fbab2934e7d7ed1fafdd8ada-1024x640.png |  Bin
 .../images}/old/jiwon070-690x966.jpg          |  Bin
 .../images}/old/logo1titles-1024x107.png      |  Bin
 .../images}/old/logo1titles-280x280 (1).jpg   |  Bin
 {images => assets/images}/old/sayugi4_2s.png  |  Bin
 {images => assets/images}/old/sli02.png       |  Bin
 ...v2-5d26d728fc6bff0e9b65b5af9f6fda01_hd.jpg |  Bin
 ...v2-6f0acce9d2eb817ea9087937da757bf2_hd.jpg |  Bin
 {images => assets/images}/s黃色海洋.gif       |  Bin
 {images => assets/images}/totoga2/toto1.png   |  Bin
 {images => assets/images}/totoga2/xyJDQ8m.png |  Bin
 {images => assets/images}/志源生日.jpg        |  Bin
 .../180317/IMG_20180317_174202_764.jpg        |  Bin
 .../180317/IMG_20180318_181301_902.jpg        |  Bin
 .../180317/IMG_20180318_181301_904.jpg        |  Bin
 .../180317/IMG_20180318_181301_907.jpg        |  Bin
 .../180317/IMG_20180318_224531_021.jpg        |  Bin
 .../新增資料夾/2018_Banner_0807金在德生日.jpg |  Bin
 .../新增資料夾/2018_Banner_0808感恩父親節.jpg |  Bin
 ...0155982258293173_5685874579155714048_o.jpg |  Bin
 .../新增資料夾/IMG_20160804_133430.jpg        |  Bin
 .../新增資料夾/IMG_20160807_172033.jpg        |  Bin
 .../新增資料夾/IMG_20160912_002312.jpg        |  Bin
 .../新增資料夾/IMG_20161217_131702.jpg        |  Bin
 .../新增資料夾/IMG_20161217_131740.jpg        |  Bin
 .../新增資料夾/IMG_20170109_212529.jpg        |  Bin
 .../新增資料夾/IMG_20170124_131851.jpg        |  Bin
 .../新增資料夾/IMG_20170124_132642.jpg        |  Bin
 .../新增資料夾/IMG_20170125_195630.jpg        |  Bin
 .../新增資料夾/IMG_20180204_123437_709.jpg    |  Bin
 .../無限挑戰六六歌2_final跨頁降分割-1.PDF     |  Bin
 .../無限挑戰六六歌2_final跨頁降分割-2.PDF     |  Bin
 .../images}/水晶男孩推廣部FB.jpg              |  Bin
 {images => assets/images}/黃色海洋.gif        |  Bin
 {map => assets/js}/map.js                     |  608 ++++-----
 particles.js => assets/js/particles.js        |  116 +-
 portal-nav.js => assets/js/portal-nav.js      |    4 +-
 {extra => assets/js}/totoga2.js               |  194 +--
 concert/concert.html                          |   16 +-
 docs/portal-nav-rules.md                      |   28 +-
 extra/grok.html                               |    6 +-
 extra/lyrics.html                             |    6 +-
 extra/minister.html                           |   22 +-
 extra/minister_ge.html                        |   10 +-
 extra/site-guide.html                         |   10 +-
 extra/sunghoon.html                           |    8 +-
 extra/totoga2.html                            |   10 +-
 index.html                                    |   16 +-
 map/map.html                                  |    8 +-
 variety/variety.html                          |    8 +-
 107 files changed, 1726 insertions(+), 1720 deletions(-)
 rename {concert => assets/css}/concert.css (95%)
 rename index.css => assets/css/index.css (96%)
 rename {extra => assets/css}/lyrics.css (100%)
 rename style.css => assets/css/style.css (99%)
 rename tablet.css => assets/css/tablet.css (94%)
 rename {images => assets/images}/1650509638027.jpg (100%)
 rename {images => assets/images}/201801231634594057.jpg (100%)
 rename {images => assets/images}/2023_webdesign_水晶男孩推廣部規劃s.png (100%)
 rename {images => assets/images}/2023_電子書_無限挑戰六六歌2_final跨頁.pdf (100%)
 rename {images => assets/images}/230515113027.svg (100%)
 rename {images => assets/images}/32260718_1783556105020524_6795654717822205952_o.jpg (100%)
 rename {images => assets/images}/Eun Ji Won.jpeg (100%)
 rename {images => assets/images}/G1fanmeeting.png (100%)
 rename {images => assets/images}/G1fanmeetingb.png (100%)
 rename {images => assets/images}/SECHSKIES_LOGO.jpg (100%)
 rename {images => assets/images}/albums/1997.jpg (100%)
 rename {images => assets/images}/albums/1998.jpg (100%)
 rename {images => assets/images}/albums/1999.jpg (100%)
 rename {images => assets/images}/albums/2016.jpg (100%)
 rename {images => assets/images}/albums/2017.jpg (100%)
 rename {images => assets/images}/albums/20172.jpg (100%)
 rename {images => assets/images}/albums/2020.jpg (100%)
 rename {images => assets/images}/concert/2016.jpg (100%)
 rename {images => assets/images}/concert/2017.jpg (100%)
 rename {images => assets/images}/concert/2018.jpg (100%)
 rename {images => assets/images}/concert/2020.jpg (100%)
 rename {images => assets/images}/header.jpg (100%)
 rename {images => assets/images}/header.png (100%)
 rename {images => assets/images}/logo.png (100%)
 rename {images => assets/images}/logov.svg (100%)
 rename {images => assets/images}/map/jiyong_taiwan01s.jpg (100%)
 rename {images => assets/images}/map/jiyong_taiwan02.jpg (100%)
 rename {images => assets/images}/map/jiyong_taiwan03 s.jpg (100%)
 rename {images => assets/images}/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-22.png (100%)
 rename {images => assets/images}/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-23.png (100%)
 rename {images => assets/images}/map/ko/DSC_0174.NEF (100%)
 rename {images => assets/images}/map/ko/IMG_0784.jpg (100%)
 rename {images => assets/images}/member/1595330620293.jpg (100%)
 rename {images => assets/images}/member/4c0e013b341e85622979475bc230719b.jpg (100%)
 rename {images => assets/images}/member/92599-502183.jpg (100%)
 rename {images => assets/images}/member/kpoplover082006___Bsc2U5lhXuK___.jpg (100%)
 rename {images => assets/images}/member/noona7273___Bt7EZHRAGgs___.jpg (100%)
 rename {images => assets/images}/member/seven7lai_1___BuRBxcPAIsP___.jpg (100%)
 rename {images => assets/images}/minister/.gitkeep (100%)
 rename {images => assets/images}/mission-balloon-sea.png (100%)
 rename {images => assets/images}/old/1533313685-1024x714.jpg (100%)
 rename {images => assets/images}/old/41151ddd46a0179bafcccb900d976241-1024x683.jpg (100%)
 rename {images => assets/images}/old/71bzyibKBTL._UL1500_-1-e1533296470805.jpg (100%)
 rename {images => assets/images}/old/DYP9ArjVwAEzxs5.jpg (100%)
 rename {images => assets/images}/old/ShowBizhoony-1s.png (100%)
 rename {images => assets/images}/old/cropped-logo.1s.png (100%)
 rename {images => assets/images}/old/cropped-threeword009-1.png (100%)
 rename {images => assets/images}/old/cropped-threeword009.png (100%)
 rename {images => assets/images}/old/e386ed100b3f2a36fbab2934e7d7ed1fafdd8ada-1024x640.png (100%)
 rename {images => assets/images}/old/jiwon070-690x966.jpg (100%)
 rename {images => assets/images}/old/logo1titles-1024x107.png (100%)
 rename {images => assets/images}/old/logo1titles-280x280 (1).jpg (100%)
 rename {images => assets/images}/old/sayugi4_2s.png (100%)
 rename {images => assets/images}/old/sli02.png (100%)
 rename {images => assets/images}/old/v2-5d26d728fc6bff0e9b65b5af9f6fda01_hd.jpg (100%)
 rename {images => assets/images}/old/v2-6f0acce9d2eb817ea9087937da757bf2_hd.jpg (100%)
 rename {images => assets/images}/s黃色海洋.gif (100%)
 rename {images => assets/images}/totoga2/toto1.png (100%)
 rename {images => assets/images}/totoga2/xyJDQ8m.png (100%)
 rename {images => assets/images}/志源生日.jpg (100%)
 rename {images => assets/images}/新增資料夾/180317/IMG_20180317_174202_764.jpg (100%)
 rename {images => assets/images}/新增資料夾/180317/IMG_20180318_181301_902.jpg (100%)
 rename {images => assets/images}/新增資料夾/180317/IMG_20180318_181301_904.jpg (100%)
 rename {images => assets/images}/新增資料夾/180317/IMG_20180318_181301_907.jpg (100%)
 rename {images => assets/images}/新增資料夾/180317/IMG_20180318_224531_021.jpg (100%)
 rename {images => assets/images}/新增資料夾/2018_Banner_0807金在德生日.jpg (100%)
 rename {images => assets/images}/新增資料夾/2018_Banner_0808感恩父親節.jpg (100%)
 rename {images => assets/images}/新增資料夾/37175247_10155982258293173_5685874579155714048_o.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20160804_133430.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20160807_172033.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20160912_002312.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20161217_131702.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20161217_131740.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20170109_212529.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20170124_131851.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20170124_132642.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20170125_195630.jpg (100%)
 rename {images => assets/images}/新增資料夾/IMG_20180204_123437_709.jpg (100%)
 rename {images => assets/images}/新增資料夾/無限挑戰六六歌2_final跨頁降分割-1.PDF (100%)
 rename {images => assets/images}/新增資料夾/無限挑戰六六歌2_final跨頁降分割-2.PDF (100%)
 rename {images => assets/images}/水晶男孩推廣部FB.jpg (100%)
 rename {images => assets/images}/黃色海洋.gif (100%)
 rename {map => assets/js}/map.js (97%)
 rename particles.js => assets/js/particles.js (96%)
 rename portal-nav.js => assets/js/portal-nav.js (98%)
 rename {extra => assets/js}/totoga2.js (97%)

diff --git a/.cursor/rules/ai-change-boundaries.mdc b/.cursor/rules/ai-change-boundaries.mdc
index 394e56b..edb2039 100644
--- a/.cursor/rules/ai-change-boundaries.mdc
+++ b/.cursor/rules/ai-change-boundaries.mdc
@@ -7,10 +7,10 @@ alwaysApply: true
 
 ## 預設只做「被點名」的範圍
 
-- 使用者若只提某頁（例如 **`minister_ge.html`**）、某區塊、某句文案：**只改該處**，不順手改 `index.html`、`minister.html`、`portal-nav.js`、`style.css` 全站區、或 **`index.css`** 裡與首頁共用的規則。
+- 使用者若只提某頁（例如 **`minister_ge.html`**）、某區塊、某句文案：**只改該處**，不順手改 `index.html`、`minister.html`、`assets/js/portal-nav.js`、`assets/css/style.css` 全站區、或 **`assets/css/index.css`** 裡與首頁共用的規則。
 - **未寫到的檔案＝不開、不刪、不重構**；需要動到時，先用**一句話**說明「為何必須動」並等使用者確認，或改在回覆裡列出將被波及的檔案請使用者選是否要做。
 
-## 共用樣式（`style.css`、全站 class）
+## 共用樣式（`assets/css/style.css`、全站 class）
 
 - **禁止**因為某一頁要對齊視覺，就擅自改掉全站 class（例如 `.slogan-quote`、`.mark_b`、`section` 預設）在**其他頁**的呈現。
 - **金句已分流**：覺醒稿用 **`slogan-quote slogan-quote--awakening`**（副標語彙：雙線＋中置小字），首頁使命稿用 **`slogan-quote slogan-quote--mission`**（獨立奶油卡）；基底 **`.slogan-quote` 不帶視覺**，**禁止**再只改基底就套兩種金句。
diff --git a/.cursor/rules/user-scope-and-nav.mdc b/.cursor/rules/user-scope-and-nav.mdc
index c2ebb2b..3d2081e 100644
--- a/.cursor/rules/user-scope-and-nav.mdc
+++ b/.cursor/rules/user-scope-and-nav.mdc
@@ -9,7 +9,7 @@ alwaysApply: true
 
 - **不得**在未被使用者**明確要求**的情況下：把導覽連結從「籌備中／尚無開放」改成可點、更換 `href` 成真實頁面、從 `COMING_SOON_PAGES` 移除、或把錨點加入 `INDEX_NAV_OPEN_HASHES`。
 - **不得**因為「內容已搬到某頁」就自行推論「導覽也應該開放」——導覽是否開放**只聽使用者口述**。
-- 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `portal-nav.js` 的開放狀態與連結目標。
+- 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `assets/js/portal-nav.js` 的開放狀態與連結目標。
 
 ## 「傳奇的轉折」導覽（特別記牢）
 
@@ -18,11 +18,11 @@ alwaysApply: true
 
 ## 實作前自檢
 
-- 若變更會影響 `portal-nav.js`（`PORTAL_NAV_INNER_HTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`）：**對照使用者原句**，確認每一項連結的開／關都有被明確交代。
+- 若變更會影響 `assets/js/portal-nav.js`（`buildPortalNavInnerHTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`）：**對照使用者原句**，確認每一項連結的開／關都有被明確交代。
 
 ## 名詞對齊（避免做錯檔）
 
-- **頂部橫列導覽（常稱 navbar）**：`portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`，每一頁頂端黑底那一條。**備份稿／未公開頁**除非使用者**明講要上這條**，否則不要寫進 `PORTAL_NAV_INNER_HTML`。
+- **頂部橫列導覽（常稱 navbar）**：`assets/js/portal-nav.js` 注入的 `<nav class="portal-nav" data-portal-nav>`，每一頁頂端黑底那一條。**備份稿／未公開頁**除非使用者**明講要上這條**，否則不要寫進 `buildPortalNavInnerHTML` 模板。
 - **全站頁面索引**：`site-guide.html`（自行開網址），用來列檔案與錨點；**不影響**頂欄是否出現該連結。使用者說「留在全站導覽」常指保留在 **site-guide** 或站內說明，**不等於**要掛進頂欄。
 
 （變更哪些檔、可否動共用 CSS：見 **`ai-change-boundaries.mdc`**。）
diff --git a/CHANGESET-review.md b/CHANGESET-review.md
index f363b2b..c0ab16d 100644
--- a/CHANGESET-review.md
+++ b/CHANGESET-review.md
@@ -1,10 +1,10 @@
 # 變更檢查清單（工作區 vs `HEAD`）
 
-> **說明：** 此為對話當初「第一批」完整筆記存檔（五檔：`albums`（原 `archive`）／`index.css`／`index.html`／`style.css`／`portal-nav`）。**目前工作區是否仍為下列每一項，請以 `git diff` 與實際檔案為準**，本文不作為程式真值來源。
+> **說明：** 此為對話當初「第一批」完整筆記存檔（五檔：`albums`（原 `archive`）／`assets/css/index.css`／`index.html`／`assets/css/style.css`／`assets/js/portal-nav`）。**目前工作區是否仍為下列每一項，請以 `git diff` 與實際檔案為準**，本文不作為程式真值來源。
 
 本文依 **`git diff`** 對照 **`HEAD`** 整理，方便逐項核對；不含未在本 diff 出現之檔案或臆測內容。
 
-**涉及檔案（5）**：`albums/albums.html`、`index.css`、`index.html`、`portal-nav.js`、`style.css`  
+**涉及檔案（5）**：`albums/albums.html`、`assets/css/index.css`、`index.html`、`assets/js/portal-nav.js`、`assets/css/style.css`  
 **統計**：以 `git diff --stat` 為準（以下內容對應該批變更初版筆記）。
 
 ---
@@ -38,7 +38,7 @@
 | 輝煌全盛期 | 1998 Road Fighter | `https://open.spotify.com/album/08TW1bmGzSg172Db8C2Bde` |
 | 輝煌全盛期 | 1999 Com' Back | `https://open.spotify.com/album/3XWtqLXDZycu7Q0BGofhiq` |
 
-### 內嵌腳本（`</body>` 前，`portal-nav.js` 之後）
+### 內嵌腳本（`</body>` 前，`assets/js/portal-nav.js` 之後）
 
 - `querySelectorAll('tr.archive-row-spotify[data-spotify-url]')` 綁定：
   - **click**：若 `e.target.closest('a')` 則不處理；否則 `window.open(url, '_blank', 'noopener,noreferrer')`
@@ -46,7 +46,7 @@
 
 ---
 
-## 2. `index.css`
+## 2. `assets/css/index.css`
 
 ### 新增選擇器（僅作用於 `.archive-discography` 內）
 
@@ -75,11 +75,11 @@
 ### 相依性（請檢查）
 
 - 頁面須已載入 Font Awesome（與現有 `<link>` 一致），否則圖示不顯示。
-- `extra/totoga2.html` 須存在；`extra/totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
+- `extra/totoga2.html` 須存在；`assets/js/totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
 
 ---
 
-## 4. `style.css`
+## 4. `assets/css/style.css`
 
 ### 區塊註解
 
@@ -101,7 +101,7 @@
 
 ---
 
-## 5. `portal-nav.js`
+## 5. `assets/js/portal-nav.js`
 
 ### 目的
 
@@ -124,9 +124,9 @@
 
 1. **`albums/albums.html`**：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。
 2. **`albums/albums.html`**：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在 `<a>` 上時 Enter → 遵循連結。
-3. **`index.html` + `style.css`**：2016 卡片外觀與 CTA 按鈕、`hover`、`focus-visible`、縮減動態偏好設定下手勢動畫關閉。
-4. **`portal-nav.js`**：全站注入後選單無「消失的真相」；改 `true` 後該項回來。
-5. **跨頁**：任意頁載入 `portal-nav.js` 後行為一致。
+3. **`index.html` + `assets/css/style.css`**：2016 卡片外觀與 CTA 按鈕、`hover`、`focus-visible`、縮減動態偏好設定下手勢動畫關閉。
+4. **`assets/js/portal-nav.js`**：全站注入後選單無「消失的真相」；改 `true` 後該項回來。
+5. **跨頁**：任意頁載入 `assets/js/portal-nav.js` 後行為一致。
 
 ---
 
diff --git a/albums/albums.html b/albums/albums.html
index 512e477..cc62136 100644
--- a/albums/albums.html
+++ b/albums/albums.html
@@ -5,10 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩｜黃色留聲機</title>
-    <link rel="stylesheet" href="../style.css">
-    <link rel="stylesheet" href="../index.css">
+    <link rel="stylesheet" href="../assets/css/style.css">
+    <link rel="stylesheet" href="../assets/css/index.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body>
@@ -50,7 +50,7 @@
                         data-spotify-url="https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN"
                         aria-label="在 Spotify 開啟：THREE WORDS（2016 數位單曲）">
                         <td class="album-cover-cell">
-                            <img src="../images/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
+                            <img src="../assets/images/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
                         </td>
                         <td>2016</td>
                         <td><a href="../extra/lyrics.html">數位單曲</a></td>
@@ -60,7 +60,7 @@
                         data-spotify-url="https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ"
                         aria-label="在 Spotify 開啟：ANOTHER LIGHT">
                         <td class="album-cover-cell">
-                            <img src="../images/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
+                            <img src="../assets/images/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
                         </td>
                         <td>2017</td>
                         <td><a href="../concert/concert.html#stage-now">ANOTHER LIGHT</a></td>
@@ -70,7 +70,7 @@
                         data-spotify-url="https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv"
                         aria-label="在 Spotify 開啟：ALL FOR YOU">
                         <td class="album-cover-cell">
-                            <img src="../images/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
+                            <img src="../assets/images/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
                         </td>
                         <td>2020</td>
                         <td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
@@ -126,8 +126,8 @@
         </a>
     </footer>
 
-    <script src="../particles.js"></script>
-    <script src="../portal-nav.js"></script>
+    <script src="../assets/js/particles.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
     <script>
         (function () {
             document.querySelectorAll('tr.archive-row-spotify[data-spotify-url]').forEach(function (row) {
diff --git a/concert/concert.css b/assets/css/concert.css
similarity index 95%
rename from concert/concert.css
rename to assets/css/concert.css
index 8762bb4..a5a9ed8 100644
--- a/concert/concert.css
+++ b/assets/css/concert.css
@@ -1,571 +1,571 @@
-body {
-    background-color: var(--);
-}
-
-.concert-page {
-    background-color: var(--deep-black);
-    margin: 0;
-    padding: 0;
-}
-
-.concert-archive-header {
-    width: 100%;
-    height: 100vh;
-    min-height: 100dvh;
-    background-image: url('../images/header.jpg');
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 108%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 0 20px;
-    overflow: hidden;
-    position: relative;
-}
-
-.main-title {
-    font-size: 3.5rem;
-    font-weight: 900;
-    color: var(--yellow);
-    margin: 0;
-    letter-spacing: 8px;
-    text-transform: uppercase;
-    text-shadow: 0 0 30px rgba(255, 221, 0, 0.75);
-}
-
-.subtitle-wrap {
-    margin-top: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.subtitle-wrap::before,
-.subtitle-wrap::after {
-    content: "";
-    flex: 1;
-    height: 3px;
-    background-color: #ffcc00;
-    /* 水晶黃 */
-    max-width: 60px;
-}
-
-.sub-title {
-    font-size: 1rem;
-    color: #d4d4d4;
-    letter-spacing: 6px;
-    margin: 0 25px;
-}
-
-body {
-    background-color: #fcfaf2;
-    /* 溫潤米白背景 */
-    margin: 0;
-    padding: 50px 0;
-    font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
-}
-
-/* CSS 效果 */
-
-/* 1. 搜尋區塊容器：負責置中 */
-.search-section {
-    width: 100%;
-    /* 撐滿寬度 */
-    display: flex;
-    /* 使用 Flexbox 佈局 */
-    justify-content: center;
-    /* 水平置中 */
-    margin: 40px 0;
-    /* 上下留白，讓視覺不擁擠 */
-}
-
-/* 2. 搜尋輸入框本體 */
-.search-input {
-    width: 80%;
-    /* 行動裝置下佔 80% */
-    max-width: 400px;
-    /* 電腦版最大寬度 */
-    padding: 12px 25px;
-    /* 內縮，讓文字不貼邊 */
-    border: 2px solid #ddd;
-    /* 預設淺灰邊框 */
-    border-radius: 30px;
-    /* 膠囊造型圓角 */
-    font-size: 1rem;
-    outline: none;
-    /* 重要！移除瀏覽器預設的藍色外框 */
-    transition: all 0.3s ease;
-    /* 讓接下來的 focus 變化變平滑 */
-    background-color: #fff;
-    color: #333;
-}
-
-/* 3. 練習重點：:focus (當滑鼠點擊準備打字時) */
-.search-input:focus {
-    border-color: #ffcc00;
-    /* 變成代表色：水晶黃 */
-    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.25);
-    /* 增加黃色柔和發光 */
-    width: 85%;
-    /* 點擊時微幅變長，增加回饋感 */
-    transform: translateY(-2px);
-    /* 輕微往上浮動 */
-}
-
-/* 4. 練習重點：:hover (滑鼠只是滑過去，還沒點擊) */
-.search-input:hover {
-    border-color: #bbb;
-    /* 邊框顏色稍微加深 */
-}
-
-.search-input {
-    width: 200px;
-    margin: 0 auto;
-    padding: 8px 15px;
-    border: 2px solid #eee;
-    border-radius: 20px;
-    transition: all 0.4s ease;
-    /* 平滑過渡 */
-    outline: none;
-}
-
-/* 當滑鼠點擊輸入框時 */
-.search-input:focus {
-    width: 300px;
-    /* 輸入框變長 */
-    border-color: #ffcc00;
-    /* 變成水晶黃 */
-    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
-    /* 淡淡的發光感 */
-    background-color: #fff;
-}
-
-.concert-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-/* 第一層：演唱會卡片外殼 */
-.con-1,
-.con-2,
-.con-3,
-.con-4,
-#yellownote-stage {
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    border-radius: 16px;
-    padding: 50px 100px;
-    margin-bottom: 50px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    border: 1px solid rgba(0, 0, 0, 0.02);
-    position: relative;
-    /* 關鍵：拿掉 overflow: hidden，改用子元素控制裁切 */
-    overflow: hidden;
-}
-
-img {
-    width: 50%;
-    margin: 0 auto;
-    align-items: center;
-}
-
-/* 重逢區：大卡垂直堆疊，錨點落在區塊頂端 */
-#stage-now {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-}
-
-#yellownote-stage .yellownote-tagline {
-    margin: -1.5rem auto 1.75rem;
-    padding: 0 1rem;
-    text-align: center;
-    font-size: clamp(0.9rem, 1.8vw, 1rem);
-    font-weight: 650;
-    color: #555;
-    letter-spacing: 0.04em;
-}
-
-/* 右上角緞帶：改用獨立 div 或確保不被裁切 */
-[data-tour]::after {
-    content: attr(data-tour);
-    position: absolute;
-    width: 200px;
-    text-align: center;
-    top: 30px;
-    right: -40px;
-    background: #eee;
-    color: #999;
-    font-size: 0.8rem;
-    padding: 10px 0;
-    transform: rotate(45deg);
-    z-index: 1;
-    /* 如果擔心緞帶超出卡片太醜，可將此設為透明或微調位置 */
-}
-
-.title {
-    display: block;
-    font-size: 1.5rem;
-    font-weight: 900;
-    margin: 50px;
-    text-align: center;
-    color: #333;
-}
-
-/* 燦爛的最初：小節標（對齊隔壁「一張大卡＋多個場次列」） */
-#stage-past .stage-past-era {
-    margin-top: 2.25rem;
-}
-
-#stage-past .stage-past-era:first-of-type {
-    margin-top: 0;
-}
-
-#stage-past .tour-era-heading {
-    display: block;
-    margin: 0 0 0.5rem;
-    padding: 0 1rem;
-    font-size: clamp(1rem, 2vw, 1.12rem);
-    font-weight: 800;
-    text-align: center;
-    color: #333;
-}
-
-#stage-past .tour-era-meta {
-    opacity: 0.9;
-    font-size: 0.92rem;
-    margin: 0 0 0.85rem;
-    padding: 0 1rem;
-    text-align: center;
-    color: #555;
-}
-
-/* 第二層：地點區塊 (通用選擇器) — con-X-X，不加左側直線（版面乾淨） */
-[class*="con-"][class*="-"] {
-    padding: 10px 0 30px 20px;
-    margin: 15px 0 15px 10px;
-    position: relative;
-    background: linear-gradient(to right, #fffdf5, #fff);
-    border-radius: 4px;
-    counter-reset: track-counter;
-}
-
-/* 第三層：曲目 */
-[class*="con-"]>div div {
-    padding-left: 35px;
-    font-size: 0.9rem;
-    color: #777;
-    margin: 5px 0;
-    /* 關鍵：拿掉因為 class 包含 "con-" 而被誤加的左邊線 */
-    border-left: none !important;
-    position: relative;
-}
-
-/* 針對曲目前方的圖示進行替換 */
-[class*="con-"]>div div::before {
-    /* 1. 使用 Font Awesome 的音樂符號 Unicode (f001 是音樂符號) */
-    content: "\f001";
-
-    /* 2. 指定字體系列與粗細 (這是顯示圖示的關鍵) */
-    font-family: "Font Awesome 6 Free";
-    font-weight: 900;
-
-    /* 3. 顏色與大小微調 */
-    color: #ffcc00;
-    /* 使用你的水晶黃 */
-    font-size: 0.8rem;
-
-    /* 4. 位置修正：取代原本的 margin-left */
-    display: inline-block;
-    width: 25px;
-    /* 固定寬度讓文字對齊 */
-    margin-right: 5px;
-    /* 圖示與歌名間距 */
-    text-align: center;
-
-    /* 如果你堅持要保留原本的 30px 偏移，可以加在這裡 */
-    margin-left: 30px;
-}
-
-/* 修改：確保計數器能抓到這些 div */
-[class*="con-"]>div div::after {
-    counter-increment: track-counter;
-    content: " #" counter(track-counter);
-    font-size: 0.7rem;
-    color: #ccc;
-    margin-left: 5px;
-    vertical-align: super;
-}
-
-
-/* 1. 針對 track-list 容器本身：關閉符號與計數 */
-.track-list::before,
-.track-list::after {
-    display: none !important;
-    content: none !important;
-    counter-increment: none !important;
-}
-
-/* 2. 針對 track-list 容器本身：拿掉縮排與邊框 */
-.track-list {
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-}
-
-/* 3. 確保真正的曲目 (track-item) 正常顯示 */
-.track-item {
-    display: block;
-    white-space: nowrap;
-    /* 強制不換行 */
-    overflow: hidden;
-    /* 隱藏超出部分 */
-    text-overflow: ellipsis;
-    /* 超出部分顯示 ... */
-    max-width: 85%;
-    /* 留空間給右邊的序號 */
-    position: relative;
-    padding-left: 35px;
-    /* 這裡留給 🎵 圖標 */
-}
-
-/* 進階：滑鼠移上去顯示完整文字 */
-.track-item:hover {
-    overflow: visible;
-    white-space: normal;
-    background: #fff;
-    z-index: 10;
-    position: relative;
-}
-
-/* 地點圖示 */
-.location::before {
-    /* 1. 使用 Unicode 編碼代替貼圖 */
-    content: "\f3c5";
-
-    /* 2. 指定字體系列 (重要！沒寫會變亂碼) */
-    font-family: "Font Awesome 6 Free";
-
-    /* 3. 指定字體粗細 (Solid 圖標通常需要 900) */
-    font-weight: 900;
-
-    /* 4. 原有的樣式調整 */
-    margin-right: 8px;
-    /* 這裡改用 margin-right 讓圖示在文字左邊 */
-    margin-left: 0;
-    /* 清除原本可能有的 margin-left */
-    color: #ffcc00;
-    /* 讓圖示顏色跟你的水晶黃對齊 */
-    font-size: 1.1rem;
-    display: inline-block;
-    margin-left: 30px;
-}
-
-/* --- 日期蓋章：全自動定位 --- */
-/* 使用屬性選擇器，確保 con-1-1, 1-3, 2-1 都能顯示 */
-.attended::before,
-.attended::after {
-    position: absolute;
-    left: -20px;
-    /* 壓在黃線上 */
-    width: 45px;
-    text-align: center;
-    background-color: #ffcc00;
-    color: #333;
-    font-size: 9px;
-    font-weight: bold;
-    padding: 2px 4px;
-    border-radius: 4px;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
-    z-index: 100;
-    border: 2px solid #fff;
-    /* 增加白邊避免被背景吃掉 */
-}
-
-/* 第一個日期 */
-.attended::before {
-    content: attr(data-date1);
-    top: 5px;
-    transform: rotate(-12deg);
-}
-
-/* 第二個日期 (如果有) */
-.attended::after {
-    content: attr(data-date2);
-    top: 28px;
-    transform: rotate(8deg);
-    background-color: #fceea7;
-}
-
-/* 如果沒有第二個日期，就隱藏框框 */
-.attended:not([data-date2])::after {
-    display: none;
-}
-
-/* 針對單日參加 (只有 data-date 沒有序號) 的特殊處理 */
-.attended[data-date]::before {
-    content: attr(data-date);
-}
-
-/* 1. 隱藏 checkbox 本身 */
-.expand-trigger {
-    display: none;
-}
-
-/* 2. 預設隱藏第 2 個之後的 track-item */
-.track-list .track-item:nth-child(n+3) {
-    display: none;
-    opacity: 0;
-    transition: opacity 0.5s ease;
-
-}
-
-/* 3. 當 Checkbox 被選中時，顯示所有曲目 */
-.expand-trigger:checked+.track-list .track-item:nth-child(n+6) {
-    display: block;
-    opacity: 1;
-}
-
-/* 4. 設計「展開/收合」按鈕樣式 */
-.expand-btn {
-    display: inline-block;
-    margin-top: 10px;
-    margin-left: 35px;
-    padding: 5px 15px;
-    background-color: #f5f5f5;
-    color: #999;
-    font-size: 0.8rem;
-    border-radius: 20px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-/* 5. 利用偽元素設定按鈕文字內容 */
-.expand-btn::before {
-    content: "↓ 展開完整曲目";
-}
-
-.expand-trigger:checked~.expand-btn::before {
-    content: "↑ 收合曲目";
-}
-
-/* 懸停效果 */
-.expand-btn:hover {
-    background-color: #ffcc00;
-    color: #333;
-}
-
-/* --- 2020 ACCESS：與其餘大卡同層級（title → img → con-X-1）；::after＝緞帶，CANCELED 水印用 ::before --- */
-
-.con-4.con-access-denied[data-tour="ACCESS"] {
-    overflow: visible;
-}
-
-.con-4[data-tour="ACCESS"]::after {
-    background: #4a4a4a;
-    color: #fff;
-    z-index: 5;
-}
-
-.con-4.con-access-denied {
-    filter: grayscale(80%);
-    opacity: 0.7;
-    position: relative;
-}
-
-.con-access-denied .location::before {
-    color: #999 !important;
-}
-
-.con-access-denied .canceled::before,
-.con-access-denied .canceled::after {
-    position: absolute;
-    left: -20px;
-    width: 45px;
-    text-align: center;
-    font-size: 9px;
-    font-weight: bold;
-    padding: 2px 4px;
-    border-radius: 4px;
-    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
-    z-index: 100;
-    border: 2px solid #fff;
-    background-color: #999 !important;
-    color: #fff !important;
-    text-decoration: line-through;
-    transform: rotate(0deg);
-}
-
-.con-access-denied .canceled::before {
-    content: attr(data-date1);
-    top: 5px;
-}
-
-.con-access-denied .canceled::after {
-    content: attr(data-date2);
-    top: 28px;
-}
-
-.con-access-denied .canceled:not([data-date2])::after {
-    display: none;
-}
-
-.con-access-denied .denied-text {
-    font-family: "Courier New", Courier, monospace;
-    color: #cc0000 !important;
-    font-size: 0.85rem;
-    font-style: italic;
-    padding-left: 35px;
-}
-
-.con-access-denied .track-item.denied-text {
-    white-space: normal;
-    max-width: 100%;
-    overflow: visible;
-}
-
-.con-access-denied .track-item.denied-text::before {
-    content: "\f071" !important;
-    font-family: "Font Awesome 6 Free" !important;
-    font-weight: 900 !important;
-    color: #cc0000 !important;
-    font-size: 0.8rem !important;
-    font-style: normal !important;
-    display: inline-block;
-    width: 25px;
-    margin-right: 5px;
-    text-align: center;
-    margin-left: 30px;
-}
-
-.con-access-denied .track-item.denied-text::after {
-    content: none !important;
-    display: none !important;
-}
-
-.con-access-denied .track-list .track-item {
-    display: block !important;
-    opacity: 1 !important;
-}
-
-.con-4.con-access-denied[data-tour="ACCESS"]::before {
-    content: "CANCELED";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(-15deg);
-    font-size: clamp(2rem, 10vw, 4.5rem);
-    font-weight: 900;
-    color: rgba(204, 0, 0, 0.1);
-    border: 8px solid rgba(204, 0, 0, 0.1);
-    padding: 10px 30px;
-    letter-spacing: 10px;
-    pointer-events: none;
-    z-index: 2;
-    white-space: nowrap;
+body {
+    background-color: var(--);
+}
+
+.concert-page {
+    background-color: var(--deep-black);
+    margin: 0;
+    padding: 0;
+}
+
+.concert-archive-header {
+    width: 100%;
+    height: 100vh;
+    min-height: 100dvh;
+    background-image: url('../images/header.jpg');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 108%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 0 20px;
+    overflow: hidden;
+    position: relative;
+}
+
+.main-title {
+    font-size: 3.5rem;
+    font-weight: 900;
+    color: var(--yellow);
+    margin: 0;
+    letter-spacing: 8px;
+    text-transform: uppercase;
+    text-shadow: 0 0 30px rgba(255, 221, 0, 0.75);
+}
+
+.subtitle-wrap {
+    margin-top: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.subtitle-wrap::before,
+.subtitle-wrap::after {
+    content: "";
+    flex: 1;
+    height: 3px;
+    background-color: #ffcc00;
+    /* 水晶黃 */
+    max-width: 60px;
+}
+
+.sub-title {
+    font-size: 1rem;
+    color: #d4d4d4;
+    letter-spacing: 6px;
+    margin: 0 25px;
+}
+
+body {
+    background-color: #fcfaf2;
+    /* 溫潤米白背景 */
+    margin: 0;
+    padding: 50px 0;
+    font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
+}
+
+/* CSS 效果 */
+
+/* 1. 搜尋區塊容器：負責置中 */
+.search-section {
+    width: 100%;
+    /* 撐滿寬度 */
+    display: flex;
+    /* 使用 Flexbox 佈局 */
+    justify-content: center;
+    /* 水平置中 */
+    margin: 40px 0;
+    /* 上下留白，讓視覺不擁擠 */
+}
+
+/* 2. 搜尋輸入框本體 */
+.search-input {
+    width: 80%;
+    /* 行動裝置下佔 80% */
+    max-width: 400px;
+    /* 電腦版最大寬度 */
+    padding: 12px 25px;
+    /* 內縮，讓文字不貼邊 */
+    border: 2px solid #ddd;
+    /* 預設淺灰邊框 */
+    border-radius: 30px;
+    /* 膠囊造型圓角 */
+    font-size: 1rem;
+    outline: none;
+    /* 重要！移除瀏覽器預設的藍色外框 */
+    transition: all 0.3s ease;
+    /* 讓接下來的 focus 變化變平滑 */
+    background-color: #fff;
+    color: #333;
+}
+
+/* 3. 練習重點：:focus (當滑鼠點擊準備打字時) */
+.search-input:focus {
+    border-color: #ffcc00;
+    /* 變成代表色：水晶黃 */
+    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.25);
+    /* 增加黃色柔和發光 */
+    width: 85%;
+    /* 點擊時微幅變長，增加回饋感 */
+    transform: translateY(-2px);
+    /* 輕微往上浮動 */
+}
+
+/* 4. 練習重點：:hover (滑鼠只是滑過去，還沒點擊) */
+.search-input:hover {
+    border-color: #bbb;
+    /* 邊框顏色稍微加深 */
+}
+
+.search-input {
+    width: 200px;
+    margin: 0 auto;
+    padding: 8px 15px;
+    border: 2px solid #eee;
+    border-radius: 20px;
+    transition: all 0.4s ease;
+    /* 平滑過渡 */
+    outline: none;
+}
+
+/* 當滑鼠點擊輸入框時 */
+.search-input:focus {
+    width: 300px;
+    /* 輸入框變長 */
+    border-color: #ffcc00;
+    /* 變成水晶黃 */
+    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
+    /* 淡淡的發光感 */
+    background-color: #fff;
+}
+
+.concert-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* 第一層：演唱會卡片外殼 */
+.con-1,
+.con-2,
+.con-3,
+.con-4,
+#yellownote-stage {
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    border-radius: 16px;
+    padding: 50px 100px;
+    margin-bottom: 50px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.02);
+    position: relative;
+    /* 關鍵：拿掉 overflow: hidden，改用子元素控制裁切 */
+    overflow: hidden;
+}
+
+img {
+    width: 50%;
+    margin: 0 auto;
+    align-items: center;
+}
+
+/* 重逢區：大卡垂直堆疊，錨點落在區塊頂端 */
+#stage-now {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+#yellownote-stage .yellownote-tagline {
+    margin: -1.5rem auto 1.75rem;
+    padding: 0 1rem;
+    text-align: center;
+    font-size: clamp(0.9rem, 1.8vw, 1rem);
+    font-weight: 650;
+    color: #555;
+    letter-spacing: 0.04em;
+}
+
+/* 右上角緞帶：改用獨立 div 或確保不被裁切 */
+[data-tour]::after {
+    content: attr(data-tour);
+    position: absolute;
+    width: 200px;
+    text-align: center;
+    top: 30px;
+    right: -40px;
+    background: #eee;
+    color: #999;
+    font-size: 0.8rem;
+    padding: 10px 0;
+    transform: rotate(45deg);
+    z-index: 1;
+    /* 如果擔心緞帶超出卡片太醜，可將此設為透明或微調位置 */
+}
+
+.title {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 900;
+    margin: 50px;
+    text-align: center;
+    color: #333;
+}
+
+/* 燦爛的最初：小節標（對齊隔壁「一張大卡＋多個場次列」） */
+#stage-past .stage-past-era {
+    margin-top: 2.25rem;
+}
+
+#stage-past .stage-past-era:first-of-type {
+    margin-top: 0;
+}
+
+#stage-past .tour-era-heading {
+    display: block;
+    margin: 0 0 0.5rem;
+    padding: 0 1rem;
+    font-size: clamp(1rem, 2vw, 1.12rem);
+    font-weight: 800;
+    text-align: center;
+    color: #333;
+}
+
+#stage-past .tour-era-meta {
+    opacity: 0.9;
+    font-size: 0.92rem;
+    margin: 0 0 0.85rem;
+    padding: 0 1rem;
+    text-align: center;
+    color: #555;
+}
+
+/* 第二層：地點區塊 (通用選擇器) — con-X-X，不加左側直線（版面乾淨） */
+[class*="con-"][class*="-"] {
+    padding: 10px 0 30px 20px;
+    margin: 15px 0 15px 10px;
+    position: relative;
+    background: linear-gradient(to right, #fffdf5, #fff);
+    border-radius: 4px;
+    counter-reset: track-counter;
+}
+
+/* 第三層：曲目 */
+[class*="con-"]>div div {
+    padding-left: 35px;
+    font-size: 0.9rem;
+    color: #777;
+    margin: 5px 0;
+    /* 關鍵：拿掉因為 class 包含 "con-" 而被誤加的左邊線 */
+    border-left: none !important;
+    position: relative;
+}
+
+/* 針對曲目前方的圖示進行替換 */
+[class*="con-"]>div div::before {
+    /* 1. 使用 Font Awesome 的音樂符號 Unicode (f001 是音樂符號) */
+    content: "\f001";
+
+    /* 2. 指定字體系列與粗細 (這是顯示圖示的關鍵) */
+    font-family: "Font Awesome 6 Free";
+    font-weight: 900;
+
+    /* 3. 顏色與大小微調 */
+    color: #ffcc00;
+    /* 使用你的水晶黃 */
+    font-size: 0.8rem;
+
+    /* 4. 位置修正：取代原本的 margin-left */
+    display: inline-block;
+    width: 25px;
+    /* 固定寬度讓文字對齊 */
+    margin-right: 5px;
+    /* 圖示與歌名間距 */
+    text-align: center;
+
+    /* 如果你堅持要保留原本的 30px 偏移，可以加在這裡 */
+    margin-left: 30px;
+}
+
+/* 修改：確保計數器能抓到這些 div */
+[class*="con-"]>div div::after {
+    counter-increment: track-counter;
+    content: " #" counter(track-counter);
+    font-size: 0.7rem;
+    color: #ccc;
+    margin-left: 5px;
+    vertical-align: super;
+}
+
+
+/* 1. 針對 track-list 容器本身：關閉符號與計數 */
+.track-list::before,
+.track-list::after {
+    display: none !important;
+    content: none !important;
+    counter-increment: none !important;
+}
+
+/* 2. 針對 track-list 容器本身：拿掉縮排與邊框 */
+.track-list {
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+}
+
+/* 3. 確保真正的曲目 (track-item) 正常顯示 */
+.track-item {
+    display: block;
+    white-space: nowrap;
+    /* 強制不換行 */
+    overflow: hidden;
+    /* 隱藏超出部分 */
+    text-overflow: ellipsis;
+    /* 超出部分顯示 ... */
+    max-width: 85%;
+    /* 留空間給右邊的序號 */
+    position: relative;
+    padding-left: 35px;
+    /* 這裡留給 🎵 圖標 */
+}
+
+/* 進階：滑鼠移上去顯示完整文字 */
+.track-item:hover {
+    overflow: visible;
+    white-space: normal;
+    background: #fff;
+    z-index: 10;
+    position: relative;
+}
+
+/* 地點圖示 */
+.location::before {
+    /* 1. 使用 Unicode 編碼代替貼圖 */
+    content: "\f3c5";
+
+    /* 2. 指定字體系列 (重要！沒寫會變亂碼) */
+    font-family: "Font Awesome 6 Free";
+
+    /* 3. 指定字體粗細 (Solid 圖標通常需要 900) */
+    font-weight: 900;
+
+    /* 4. 原有的樣式調整 */
+    margin-right: 8px;
+    /* 這裡改用 margin-right 讓圖示在文字左邊 */
+    margin-left: 0;
+    /* 清除原本可能有的 margin-left */
+    color: #ffcc00;
+    /* 讓圖示顏色跟你的水晶黃對齊 */
+    font-size: 1.1rem;
+    display: inline-block;
+    margin-left: 30px;
+}
+
+/* --- 日期蓋章：全自動定位 --- */
+/* 使用屬性選擇器，確保 con-1-1, 1-3, 2-1 都能顯示 */
+.attended::before,
+.attended::after {
+    position: absolute;
+    left: -20px;
+    /* 壓在黃線上 */
+    width: 45px;
+    text-align: center;
+    background-color: #ffcc00;
+    color: #333;
+    font-size: 9px;
+    font-weight: bold;
+    padding: 2px 4px;
+    border-radius: 4px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    border: 2px solid #fff;
+    /* 增加白邊避免被背景吃掉 */
+}
+
+/* 第一個日期 */
+.attended::before {
+    content: attr(data-date1);
+    top: 5px;
+    transform: rotate(-12deg);
+}
+
+/* 第二個日期 (如果有) */
+.attended::after {
+    content: attr(data-date2);
+    top: 28px;
+    transform: rotate(8deg);
+    background-color: #fceea7;
+}
+
+/* 如果沒有第二個日期，就隱藏框框 */
+.attended:not([data-date2])::after {
+    display: none;
+}
+
+/* 針對單日參加 (只有 data-date 沒有序號) 的特殊處理 */
+.attended[data-date]::before {
+    content: attr(data-date);
+}
+
+/* 1. 隱藏 checkbox 本身 */
+.expand-trigger {
+    display: none;
+}
+
+/* 2. 預設隱藏第 2 個之後的 track-item */
+.track-list .track-item:nth-child(n+3) {
+    display: none;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+
+}
+
+/* 3. 當 Checkbox 被選中時，顯示所有曲目 */
+.expand-trigger:checked+.track-list .track-item:nth-child(n+6) {
+    display: block;
+    opacity: 1;
+}
+
+/* 4. 設計「展開/收合」按鈕樣式 */
+.expand-btn {
+    display: inline-block;
+    margin-top: 10px;
+    margin-left: 35px;
+    padding: 5px 15px;
+    background-color: #f5f5f5;
+    color: #999;
+    font-size: 0.8rem;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+/* 5. 利用偽元素設定按鈕文字內容 */
+.expand-btn::before {
+    content: "↓ 展開完整曲目";
+}
+
+.expand-trigger:checked~.expand-btn::before {
+    content: "↑ 收合曲目";
+}
+
+/* 懸停效果 */
+.expand-btn:hover {
+    background-color: #ffcc00;
+    color: #333;
+}
+
+/* --- 2020 ACCESS：與其餘大卡同層級（title → img → con-X-1）；::after＝緞帶，CANCELED 水印用 ::before --- */
+
+.con-4.con-access-denied[data-tour="ACCESS"] {
+    overflow: visible;
+}
+
+.con-4[data-tour="ACCESS"]::after {
+    background: #4a4a4a;
+    color: #fff;
+    z-index: 5;
+}
+
+.con-4.con-access-denied {
+    filter: grayscale(80%);
+    opacity: 0.7;
+    position: relative;
+}
+
+.con-access-denied .location::before {
+    color: #999 !important;
+}
+
+.con-access-denied .canceled::before,
+.con-access-denied .canceled::after {
+    position: absolute;
+    left: -20px;
+    width: 45px;
+    text-align: center;
+    font-size: 9px;
+    font-weight: bold;
+    padding: 2px 4px;
+    border-radius: 4px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    border: 2px solid #fff;
+    background-color: #999 !important;
+    color: #fff !important;
+    text-decoration: line-through;
+    transform: rotate(0deg);
+}
+
+.con-access-denied .canceled::before {
+    content: attr(data-date1);
+    top: 5px;
+}
+
+.con-access-denied .canceled::after {
+    content: attr(data-date2);
+    top: 28px;
+}
+
+.con-access-denied .canceled:not([data-date2])::after {
+    display: none;
+}
+
+.con-access-denied .denied-text {
+    font-family: "Courier New", Courier, monospace;
+    color: #cc0000 !important;
+    font-size: 0.85rem;
+    font-style: italic;
+    padding-left: 35px;
+}
+
+.con-access-denied .track-item.denied-text {
+    white-space: normal;
+    max-width: 100%;
+    overflow: visible;
+}
+
+.con-access-denied .track-item.denied-text::before {
+    content: "\f071" !important;
+    font-family: "Font Awesome 6 Free" !important;
+    font-weight: 900 !important;
+    color: #cc0000 !important;
+    font-size: 0.8rem !important;
+    font-style: normal !important;
+    display: inline-block;
+    width: 25px;
+    margin-right: 5px;
+    text-align: center;
+    margin-left: 30px;
+}
+
+.con-access-denied .track-item.denied-text::after {
+    content: none !important;
+    display: none !important;
+}
+
+.con-access-denied .track-list .track-item {
+    display: block !important;
+    opacity: 1 !important;
+}
+
+.con-4.con-access-denied[data-tour="ACCESS"]::before {
+    content: "CANCELED";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-15deg);
+    font-size: clamp(2rem, 10vw, 4.5rem);
+    font-weight: 900;
+    color: rgba(204, 0, 0, 0.1);
+    border: 8px solid rgba(204, 0, 0, 0.1);
+    padding: 10px 30px;
+    letter-spacing: 10px;
+    pointer-events: none;
+    z-index: 2;
+    white-space: nowrap;
 }
\ No newline at end of file
diff --git a/index.css b/assets/css/index.css
similarity index 96%
rename from index.css
rename to assets/css/index.css
index 680d97a..2659c13 100644
--- a/index.css
+++ b/assets/css/index.css
@@ -1,375 +1,375 @@
-.story-timeline {
-    position: relative;
-    max-width: 1000px;
-    margin: 50px auto;
-    padding: 20px 0;
-}
-
-/* 中央貫穿軸線 */
-.story-timeline::after {
-    content: '';
-    position: absolute;
-    width: 6px;
-    background-color: var(--primary);
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    margin-left: -3px;
-    border-radius: 10px;
-}
-
-.timeline-box {
-    padding: 10px 40px;
-    position: relative;
-    width: 50%;
-    box-sizing: border-box;
-}
-
-
-/* 圓形節點 */
-.timeline-box::after {
-    content: '\f3a5';
-    font-family: "Font Awesome 6 Free" !important;
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    right: -20px;
-    top: 15px;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #FFD700;
-    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
-}
-
-
-
-/* 左右交錯控制 */
-.left {
-    left: 0;
-    text-align: right;
-}
-
-.right {
-    left: 50%;
-    text-align: left;
-}
-
-
-/* 日期標籤（膠囊型） */
-.date-tag {
-    display: inline-block;
-    padding: 8px 20px;
-    background: var(--accent);
-    color: var(--text);
-    border-radius: 50px;
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.content h3 {
-    color: var(--primary);
-    margin: 10px 0;
-}
-
-.content p {
-    color: var(--text-muted);
-    line-height: 1.6;
-}
-
-#stage .stage-teaser {
-    margin-bottom: 1.75rem;
-    padding-bottom: 1.25rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-}
-
-#stage .stage-teaser:last-of-type {
-    border-bottom: 0;
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-
-/* albums/albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
-section.archive-block p {
-    color: #4a4a4a;
-    line-height: 1.7;
-    margin: 0 0 0.75rem;
-}
-
-section.archive-block p:last-child {
-    margin-bottom: 0;
-}
-
-/* albums/albums.html：精選作品表（含封面欄） */
-.archive-discography {
-    width: 100%;
-    margin-top: 1.25rem;
-}
-
-.archive-discography .album-cover-cell {
-    width: 96px;
-    vertical-align: middle;
-    text-align: center;
-    padding: 10px 8px;
-}
-
-.archive-discography .album-cover-cell img {
-    width: 76px;
-    height: 76px;
-    object-fit: cover;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 204, 0, 0.28);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
-    display: block;
-    margin: 0 auto;
-    background: #fff;
-}
-
-.archive-discography tbody tr.archive-row-spotify {
-    cursor: pointer;
-}
-
-.archive-discography tbody tr.archive-row-spotify:hover td {
-    background-color: rgba(255, 204, 0, 0.06);
-}
-
-.archive-discography tbody tr.archive-row-spotify:focus-visible {
-    outline: 2px solid rgba(255, 204, 0, 0.65);
-    outline-offset: -2px;
-}
-
-.landing-intro {
-    text-align: center;
-    padding: 28px 0 48px;
-}
-
-.landing-actions .btn {
-    margin: 8px 6px;
-}
-
-.archive-intro-lead {
-    text-align: center;
-    margin-top: 8px;
-}
-
-/* ---------- 首頁 home-page：閱讀寬度與字級（弱化對 vw 的依賴） ---------- */
-
-/* 用 px 鎖上限，避免 72rem 隨根字級／無障礙字級變大（例如實測出 ~1390px） */
-.home-page .container {
-    max-width: min(1200px, calc(100% - 2rem));
-    width: 100%;
-    margin-inline: auto;
-    padding: 2.5rem 1.25rem;
-    box-sizing: border-box;
-}
-
-.home-page #start .intro-text,
-.home-page .container>section .intro-text {
-    max-width: 42rem;
-    margin-inline: auto;
-}
-
-.home-page #start .intro-text p.intro-text,
-.home-page #start .core-description,
-.home-page #start .call-to-action,
-.home-page .container>section .intro-text>p.intro-text,
-.home-page .container>section .intro-text .core-description,
-.home-page .container>section .intro-text .call-to-action {
-    font-size: 1.0625rem;
-    line-height: 1.75;
-    color: #4a4a4a;
-    margin: 0 0 1.125rem;
-}
-
-.home-page #start .intro-text p:last-child {
-    margin-bottom: 0;
-}
-
-/* 與首頁同欄寬：區塊內列表（minister_ge 等） */
-.home-page .container>section .intro-text ul {
-    margin: 0.5rem 0 0;
-    padding-left: 1.2rem;
-    color: #4a4a4a;
-    line-height: 1.75;
-    font-size: 1.0625rem;
-}
-
-.home-page .container>section .intro-text ul li {
-    margin-bottom: 0.75rem;
-}
-
-.home-page .container>section .intro-text ul li:last-child {
-    margin-bottom: 0;
-}
-
-/* 頂部一句話（深色底上，與舊 minister-hero-lead 同角色） */
-.home-page .landing-intro {
-    color: #ececec;
-    max-width: 48rem;
-    margin-inline: auto;
-}
-
-.home-page .landing-intro p {
-    font-size: 1.1rem;
-    line-height: 1.65;
-    margin: 0;
-}
-
-.home-page .landing-intro .mark_b {
-    color: var(--light-yellow);
-}
-
-.home-page #intro .intro-text .slogan-quote--awakening + .core-description {
-    margin-top: 1rem;
-}
-
-/* 頁尾 CTA 區（首頁 landing-actions 延伸） */
-.home-page .container>.landing-actions {
-    text-align: center;
-    margin-top: 0.5rem;
-    margin-bottom: 2rem;
-}
-
-/* minister_ge · 推廣部進化史：年份僅在軸標 data-era；卡內 h3 僅螢幕閱讀器可見 */
-.home-page #journey .journey-year-sr {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
-
-/* 推廣部進化史：副標白票。2016 僅用你提供的三個數值；年分黃票不改（沿用 style.css 的 ::after） */
-.home-page #journey .merged-storyline .story-node:has(.journey-sublabel) {
-    padding-top: 42px;
-}
-
-/* 疊序（僅此區）：軸點鑽石 < 副標白票 < 年分黃標（標題在上） */
-.home-page #journey .merged-storyline .story-node::before {
-    z-index: 2;
-}
-
-.home-page #journey .merged-storyline .story-node::after {
-    z-index: 6;
-}
-
-.home-page #journey .merged-storyline .story-node .journey-sublabel {
-    position: absolute;
-    z-index: 3;
-    margin: 0;
-    padding: 4px 10px;
-    border-radius: 8px;
-    font-size: 0.68rem;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    line-height: 1.25;
-    color: #2a2a2a;
-    text-align: center;
-    background: linear-gradient(180deg, #fffef6 0%, #fff3d6 100%);
-    border: 2px solid #fff;
-    box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.12);
-    max-width: 8rem;
-    box-sizing: border-box;
-}
-
-/* 2016 基準（奇，靠軸角在右上）：你給的 right / top / 角 */
-.home-page #journey .merged-storyline .story-node:nth-of-type(odd):has(.journey-sublabel) .journey-sublabel {
-    right: 45px;
-    top: -8px;
-    transform: rotate(-10deg);
-    transform-origin: center center;
-}
-
-/* 2017 鏡像（偶，靠軸角在左上）：角度 +10°；left 依實機微調 */
-.home-page #journey .merged-storyline .story-node:nth-of-type(even):has(.journey-sublabel) .journey-sublabel {
-    left: 40px;
-    top: 2px;
-    transform: rotate(10deg);
-    transform-origin: center center;
-}
-
-.home-page #journey .merged-storyline .story-node .journey-sublabel + .journey-month {
-    margin-top: 0.5rem;
-}
-
-.home-page #journey .merged-storyline .story-node .journey-month {
-    margin: 0.75rem 0 0.3rem;
-    padding: 0.32rem 0.7rem 0.32rem 0;
-    border-right: 3px solid var(--primary);
-    border-left: 0;
-    font-size: 0.82rem;
-    font-weight: 800;
-    letter-spacing: 0.1em;
-    color: #6b5210;
-    line-height: 1.35;
-    background: linear-gradient(270deg, rgba(255, 204, 0, 0.14) 0%, transparent 100%);
-}
-
-.home-page #journey .merged-storyline .story-node .journey-month + p {
-    margin-top: 0;
-    margin-bottom: 0.35rem;
-}
-
-.home-page #journey .merged-storyline .story-node .journey-milestone {
-    margin: 1rem 0 0.35rem;
-    padding-top: 0.5rem;
-    border-top: 1px dashed rgba(255, 204, 0, 0.45);
-    font-size: 0.78rem;
-    font-weight: 800;
-    letter-spacing: 0.14em;
-    color: #8a6910;
-}
-
-.home-page #journey .merged-storyline .story-node .journey-milestone + p {
-    margin-top: 0;
-}
-
-.home-page #story > p.intro-text {
-    max-width: 44rem;
-    margin-inline: auto;
-    margin-bottom: 1.25rem;
-    font-size: 1.0625rem;
-    line-height: 1.75;
-    color: #4a4a4a;
-}
-
-@media (max-width: 900px) {
-
-    /* 主軸在左：僅微調副標橫向；年分仍用全站 merged-storyline 規則 */
-    .home-page #journey .merged-storyline .story-node:nth-of-type(odd):has(.journey-sublabel) .journey-sublabel {
-        left: 48px;
-        right: auto;
-        top: -8px;
-        transform: rotate(-10deg);
-    }
-
-    .home-page #journey .merged-storyline .story-node:nth-of-type(even):has(.journey-sublabel) .journey-sublabel {
-        left: 58px;
-        right: auto;
-        top: 2px;
-        transform: rotate(10deg);
-    }
-}
-
-@media (max-width: 640px) {
-
-    .home-page .container {
-        padding: 1.75rem 1rem;
-    }
-
-    .home-page #start .intro-text p.intro-text,
-    .home-page #start .core-description,
-    .home-page #start .call-to-action,
-    .home-page .container>section .intro-text>p.intro-text,
-    .home-page .container>section .intro-text .core-description,
-    .home-page .container>section .intro-text .call-to-action,
-    .home-page .container>section .intro-text ul,
-    .home-page #story > p.intro-text {
-        font-size: 1rem;
-    }
-}
+.story-timeline {
+    position: relative;
+    max-width: 1000px;
+    margin: 50px auto;
+    padding: 20px 0;
+}
+
+/* 中央貫穿軸線 */
+.story-timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: var(--primary);
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+    border-radius: 10px;
+}
+
+.timeline-box {
+    padding: 10px 40px;
+    position: relative;
+    width: 50%;
+    box-sizing: border-box;
+}
+
+
+/* 圓形節點 */
+.timeline-box::after {
+    content: '\f3a5';
+    font-family: "Font Awesome 6 Free" !important;
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    right: -20px;
+    top: 15px;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #FFD700;
+    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+}
+
+
+
+/* 左右交錯控制 */
+.left {
+    left: 0;
+    text-align: right;
+}
+
+.right {
+    left: 50%;
+    text-align: left;
+}
+
+
+/* 日期標籤（膠囊型） */
+.date-tag {
+    display: inline-block;
+    padding: 8px 20px;
+    background: var(--accent);
+    color: var(--text);
+    border-radius: 50px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.content h3 {
+    color: var(--primary);
+    margin: 10px 0;
+}
+
+.content p {
+    color: var(--text-muted);
+    line-height: 1.6;
+}
+
+#stage .stage-teaser {
+    margin-bottom: 1.75rem;
+    padding-bottom: 1.25rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+#stage .stage-teaser:last-of-type {
+    border-bottom: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+/* albums/albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
+section.archive-block p {
+    color: #4a4a4a;
+    line-height: 1.7;
+    margin: 0 0 0.75rem;
+}
+
+section.archive-block p:last-child {
+    margin-bottom: 0;
+}
+
+/* albums/albums.html：精選作品表（含封面欄） */
+.archive-discography {
+    width: 100%;
+    margin-top: 1.25rem;
+}
+
+.archive-discography .album-cover-cell {
+    width: 96px;
+    vertical-align: middle;
+    text-align: center;
+    padding: 10px 8px;
+}
+
+.archive-discography .album-cover-cell img {
+    width: 76px;
+    height: 76px;
+    object-fit: cover;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 204, 0, 0.28);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+    display: block;
+    margin: 0 auto;
+    background: #fff;
+}
+
+.archive-discography tbody tr.archive-row-spotify {
+    cursor: pointer;
+}
+
+.archive-discography tbody tr.archive-row-spotify:hover td {
+    background-color: rgba(255, 204, 0, 0.06);
+}
+
+.archive-discography tbody tr.archive-row-spotify:focus-visible {
+    outline: 2px solid rgba(255, 204, 0, 0.65);
+    outline-offset: -2px;
+}
+
+.landing-intro {
+    text-align: center;
+    padding: 28px 0 48px;
+}
+
+.landing-actions .btn {
+    margin: 8px 6px;
+}
+
+.archive-intro-lead {
+    text-align: center;
+    margin-top: 8px;
+}
+
+/* ---------- 首頁 home-page：閱讀寬度與字級（弱化對 vw 的依賴） ---------- */
+
+/* 用 px 鎖上限，避免 72rem 隨根字級／無障礙字級變大（例如實測出 ~1390px） */
+.home-page .container {
+    max-width: min(1200px, calc(100% - 2rem));
+    width: 100%;
+    margin-inline: auto;
+    padding: 2.5rem 1.25rem;
+    box-sizing: border-box;
+}
+
+.home-page #start .intro-text,
+.home-page .container>section .intro-text {
+    max-width: 42rem;
+    margin-inline: auto;
+}
+
+.home-page #start .intro-text p.intro-text,
+.home-page #start .core-description,
+.home-page #start .call-to-action,
+.home-page .container>section .intro-text>p.intro-text,
+.home-page .container>section .intro-text .core-description,
+.home-page .container>section .intro-text .call-to-action {
+    font-size: 1.0625rem;
+    line-height: 1.75;
+    color: #4a4a4a;
+    margin: 0 0 1.125rem;
+}
+
+.home-page #start .intro-text p:last-child {
+    margin-bottom: 0;
+}
+
+/* 與首頁同欄寬：區塊內列表（minister_ge 等） */
+.home-page .container>section .intro-text ul {
+    margin: 0.5rem 0 0;
+    padding-left: 1.2rem;
+    color: #4a4a4a;
+    line-height: 1.75;
+    font-size: 1.0625rem;
+}
+
+.home-page .container>section .intro-text ul li {
+    margin-bottom: 0.75rem;
+}
+
+.home-page .container>section .intro-text ul li:last-child {
+    margin-bottom: 0;
+}
+
+/* 頂部一句話（深色底上，與舊 minister-hero-lead 同角色） */
+.home-page .landing-intro {
+    color: #ececec;
+    max-width: 48rem;
+    margin-inline: auto;
+}
+
+.home-page .landing-intro p {
+    font-size: 1.1rem;
+    line-height: 1.65;
+    margin: 0;
+}
+
+.home-page .landing-intro .mark_b {
+    color: var(--light-yellow);
+}
+
+.home-page #intro .intro-text .slogan-quote--awakening + .core-description {
+    margin-top: 1rem;
+}
+
+/* 頁尾 CTA 區（首頁 landing-actions 延伸） */
+.home-page .container>.landing-actions {
+    text-align: center;
+    margin-top: 0.5rem;
+    margin-bottom: 2rem;
+}
+
+/* minister_ge · 推廣部進化史：年份僅在軸標 data-era；卡內 h3 僅螢幕閱讀器可見 */
+.home-page #journey .journey-year-sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* 推廣部進化史：副標白票。2016 僅用你提供的三個數值；年分黃票不改（沿用 style.css 的 ::after） */
+.home-page #journey .merged-storyline .story-node:has(.journey-sublabel) {
+    padding-top: 42px;
+}
+
+/* 疊序（僅此區）：軸點鑽石 < 副標白票 < 年分黃標（標題在上） */
+.home-page #journey .merged-storyline .story-node::before {
+    z-index: 2;
+}
+
+.home-page #journey .merged-storyline .story-node::after {
+    z-index: 6;
+}
+
+.home-page #journey .merged-storyline .story-node .journey-sublabel {
+    position: absolute;
+    z-index: 3;
+    margin: 0;
+    padding: 4px 10px;
+    border-radius: 8px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    line-height: 1.25;
+    color: #2a2a2a;
+    text-align: center;
+    background: linear-gradient(180deg, #fffef6 0%, #fff3d6 100%);
+    border: 2px solid #fff;
+    box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.12);
+    max-width: 8rem;
+    box-sizing: border-box;
+}
+
+/* 2016 基準（奇，靠軸角在右上）：你給的 right / top / 角 */
+.home-page #journey .merged-storyline .story-node:nth-of-type(odd):has(.journey-sublabel) .journey-sublabel {
+    right: 45px;
+    top: -8px;
+    transform: rotate(-10deg);
+    transform-origin: center center;
+}
+
+/* 2017 鏡像（偶，靠軸角在左上）：角度 +10°；left 依實機微調 */
+.home-page #journey .merged-storyline .story-node:nth-of-type(even):has(.journey-sublabel) .journey-sublabel {
+    left: 40px;
+    top: 2px;
+    transform: rotate(10deg);
+    transform-origin: center center;
+}
+
+.home-page #journey .merged-storyline .story-node .journey-sublabel + .journey-month {
+    margin-top: 0.5rem;
+}
+
+.home-page #journey .merged-storyline .story-node .journey-month {
+    margin: 0.75rem 0 0.3rem;
+    padding: 0.32rem 0.7rem 0.32rem 0;
+    border-right: 3px solid var(--primary);
+    border-left: 0;
+    font-size: 0.82rem;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    color: #6b5210;
+    line-height: 1.35;
+    background: linear-gradient(270deg, rgba(255, 204, 0, 0.14) 0%, transparent 100%);
+}
+
+.home-page #journey .merged-storyline .story-node .journey-month + p {
+    margin-top: 0;
+    margin-bottom: 0.35rem;
+}
+
+.home-page #journey .merged-storyline .story-node .journey-milestone {
+    margin: 1rem 0 0.35rem;
+    padding-top: 0.5rem;
+    border-top: 1px dashed rgba(255, 204, 0, 0.45);
+    font-size: 0.78rem;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    color: #8a6910;
+}
+
+.home-page #journey .merged-storyline .story-node .journey-milestone + p {
+    margin-top: 0;
+}
+
+.home-page #story > p.intro-text {
+    max-width: 44rem;
+    margin-inline: auto;
+    margin-bottom: 1.25rem;
+    font-size: 1.0625rem;
+    line-height: 1.75;
+    color: #4a4a4a;
+}
+
+@media (max-width: 900px) {
+
+    /* 主軸在左：僅微調副標橫向；年分仍用全站 merged-storyline 規則 */
+    .home-page #journey .merged-storyline .story-node:nth-of-type(odd):has(.journey-sublabel) .journey-sublabel {
+        left: 48px;
+        right: auto;
+        top: -8px;
+        transform: rotate(-10deg);
+    }
+
+    .home-page #journey .merged-storyline .story-node:nth-of-type(even):has(.journey-sublabel) .journey-sublabel {
+        left: 58px;
+        right: auto;
+        top: 2px;
+        transform: rotate(10deg);
+    }
+}
+
+@media (max-width: 640px) {
+
+    .home-page .container {
+        padding: 1.75rem 1rem;
+    }
+
+    .home-page #start .intro-text p.intro-text,
+    .home-page #start .core-description,
+    .home-page #start .call-to-action,
+    .home-page .container>section .intro-text>p.intro-text,
+    .home-page .container>section .intro-text .core-description,
+    .home-page .container>section .intro-text .call-to-action,
+    .home-page .container>section .intro-text ul,
+    .home-page #story > p.intro-text {
+        font-size: 1rem;
+    }
+}
diff --git a/extra/lyrics.css b/assets/css/lyrics.css
similarity index 100%
rename from extra/lyrics.css
rename to assets/css/lyrics.css
diff --git a/style.css b/assets/css/style.css
similarity index 99%
rename from style.css
rename to assets/css/style.css
index e22e9e8..5ed43ee 100644
--- a/style.css
+++ b/assets/css/style.css
@@ -48,7 +48,7 @@ header {
     width: 100%;
     height: 100vh;
     min-height: 100dvh;
-    background-image: url('images/header.jpg');
+    background-image: url('../images/header.jpg');
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 108%;
@@ -1084,7 +1084,7 @@ footer a .mark_b {
     width: 100%;
     height: 100vh;
     min-height: 100dvh;
-    background-image: url('images/header.jpg');
+    background-image: url('../images/header.jpg');
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 108%;
diff --git a/tablet.css b/assets/css/tablet.css
similarity index 94%
rename from tablet.css
rename to assets/css/tablet.css
index 3e78420..c73d251 100644
--- a/tablet.css
+++ b/assets/css/tablet.css
@@ -1,218 +1,218 @@
-/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */
-
-@media (max-width: 1180px) {
-
-    html:has(body.map-page) {
-        scroll-padding-top: clamp(52px, 12vw, 76px);
-    }
-
-    nav,
-    .portal-nav {
-        padding-left: clamp(14px, 2vw + 10px, 32px) !important;
-        padding-right: clamp(14px, 2vw + 10px, 32px) !important;
-        row-gap: 12px;
-        flex-wrap: wrap;
-        align-items: flex-start;
-    }
-
-    .map-page .portal-nav {
-        padding-left: clamp(14px, 2vw + 10px, 32px) !important;
-        padding-right: clamp(14px, 2vw + 10px, 32px) !important;
-    }
-
-    .portal-nav .logo {
-        width: min(240px, 38vw);
-        max-width: 100%;
-        flex-shrink: 0;
-    }
-
-    .portal-nav>ul {
-        flex-wrap: wrap;
-        gap: clamp(12px, 2vw, 18px);
-        justify-content: flex-end;
-        min-width: 0;
-        flex: 1 1 280px;
-    }
-
-    .portal-nav>ul>li>a {
-        min-height: 44px;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    nav ul {
-        gap: clamp(12px, 2vw, 20px);
-    }
-
-    header {
-        background-size: cover;
-        background-position: center center;
-    }
-
-    .hero h1 {
-        font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
-    }
-
-    .hero p {
-        font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
-    }
-
-    .container,
-    .content-container {
-        padding-left: clamp(14px, 1.5vw + 10px, 22px);
-        padding-right: clamp(14px, 1.5vw + 10px, 22px);
-    }
-
-    .home-page .container {
-        padding-left: clamp(14px, 1.5vw + 10px, 22px);
-        padding-right: clamp(14px, 1.5vw + 10px, 22px);
-    }
-
-    section {
-        padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
-    }
-
-    .story-grid {
-        gap: clamp(18px, 4vw, 28px);
-        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
-    }
-
-    .card {
-        padding: clamp(18px, 4vw, 26px);
-    }
-
-    table {
-        font-size: 0.92rem;
-    }
-
-    table th,
-    table td {
-        padding: clamp(10px, 2vw, 14px);
-    }
-
-    /* 首頁／跨時空軌跡：鑽石主軸在平板改左側縱線（對齊舊 ≤900px 邏輯） */
-    .merged-storyline::before {
-        left: 18px;
-        transform: none;
-    }
-
-    .merged-storyline .story-node {
-        width: calc(100% - 44px);
-        margin-left: 44px;
-        margin-right: 0;
-    }
-
-    .merged-storyline .story-node:nth-of-type(odd),
-    .merged-storyline .story-node:nth-of-type(even) {
-        margin-left: 44px;
-        margin-right: 0;
-    }
-
-    .merged-storyline .story-node::before {
-        left: -39px;
-        right: auto;
-    }
-
-    .merged-storyline .story-node::after {
-        left: 14px;
-        right: auto;
-        transform: rotate(-8deg);
-    }
-
-    /* 紀實長卷／pillar 段落 */
-    .chronicle-reader,
-    .chronicle-pager {
-        max-width: min(920px, 100%);
-    }
-
-    .variety-block {
-        padding: clamp(18px, 4vw, 22px);
-    }
-
-    .map-archive-header .main-title,
-    .concert-archive-header .main-title {
-        letter-spacing: clamp(3px, 1vw, 6px);
-    }
-
-    .map-layout {
-        grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
-        gap: clamp(16px, 3vw, 22px);
-    }
-
-    .map-my-maps-frame {
-        height: min(52vh, 520px);
-        min-height: 360px;
-    }
-
-    .map-embed-all {
-        gap: 12px;
-    }
-
-    /* 重逢區兩張演唱會大卡之間留白 */
-    #stage-now {
-        gap: clamp(36px, 5vw, 50px);
-    }
-
-    /* 演唱會卡片內距 */
-    .con-1,
-    .con-2,
-    .con-3,
-    .con-4,
-    #yellownote-stage {
-        padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
-    }
-
-    .title {
-        margin: clamp(24px, 5vw, 40px) !important;
-        font-size: clamp(1.15rem, 2.8vw, 1.45rem);
-    }
-
-    .concert-container {
-        padding-left: clamp(12px, 3vw, 20px);
-        padding-right: clamp(12px, 3vw, 20px);
-    }
-
-    .search-input:focus {
-        max-width: 100%;
-    }
-
-    .concert-page .search-input:focus {
-        width: min(100%, 440px);
-    }
-
-    .concert-page img[src*="images/concert/"] {
-        width: min(560px, 88%);
-        max-width: 100%;
-    }
-
-    /* 歌詞頁 */
-    body.lyrics-page {
-        margin: clamp(24px, 5vw, 56px) !important;
-        box-sizing: border-box;
-        overflow-x: hidden;
-    }
-
-    html:has(body.lyrics-page) {
-        font-size: 118.75% !important;
-    }
-
-    body.lyrics-page .lyrics-main-table {
-        border-spacing: clamp(12px, 3vw, 24px) !important;
-        max-width: 100%;
-    }
-
-    body.lyrics-page .main-left {
-        width: 100% !important;
-        display: block;
-        box-sizing: border-box;
-    }
-
-    body.lyrics-page .lyrics-main-table p {
-        font-size: 1.2rem !important;
-        max-width: none;
-    }
-
-    body.lyrics-page h1 {
-        font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
-    }
-}
+/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */
+
+@media (max-width: 1180px) {
+
+    html:has(body.map-page) {
+        scroll-padding-top: clamp(52px, 12vw, 76px);
+    }
+
+    nav,
+    .portal-nav {
+        padding-left: clamp(14px, 2vw + 10px, 32px) !important;
+        padding-right: clamp(14px, 2vw + 10px, 32px) !important;
+        row-gap: 12px;
+        flex-wrap: wrap;
+        align-items: flex-start;
+    }
+
+    .map-page .portal-nav {
+        padding-left: clamp(14px, 2vw + 10px, 32px) !important;
+        padding-right: clamp(14px, 2vw + 10px, 32px) !important;
+    }
+
+    .portal-nav .logo {
+        width: min(240px, 38vw);
+        max-width: 100%;
+        flex-shrink: 0;
+    }
+
+    .portal-nav>ul {
+        flex-wrap: wrap;
+        gap: clamp(12px, 2vw, 18px);
+        justify-content: flex-end;
+        min-width: 0;
+        flex: 1 1 280px;
+    }
+
+    .portal-nav>ul>li>a {
+        min-height: 44px;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    nav ul {
+        gap: clamp(12px, 2vw, 20px);
+    }
+
+    header {
+        background-size: cover;
+        background-position: center center;
+    }
+
+    .hero h1 {
+        font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
+    }
+
+    .hero p {
+        font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
+    }
+
+    .container,
+    .content-container {
+        padding-left: clamp(14px, 1.5vw + 10px, 22px);
+        padding-right: clamp(14px, 1.5vw + 10px, 22px);
+    }
+
+    .home-page .container {
+        padding-left: clamp(14px, 1.5vw + 10px, 22px);
+        padding-right: clamp(14px, 1.5vw + 10px, 22px);
+    }
+
+    section {
+        padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
+    }
+
+    .story-grid {
+        gap: clamp(18px, 4vw, 28px);
+        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
+    }
+
+    .card {
+        padding: clamp(18px, 4vw, 26px);
+    }
+
+    table {
+        font-size: 0.92rem;
+    }
+
+    table th,
+    table td {
+        padding: clamp(10px, 2vw, 14px);
+    }
+
+    /* 首頁／跨時空軌跡：鑽石主軸在平板改左側縱線（對齊舊 ≤900px 邏輯） */
+    .merged-storyline::before {
+        left: 18px;
+        transform: none;
+    }
+
+    .merged-storyline .story-node {
+        width: calc(100% - 44px);
+        margin-left: 44px;
+        margin-right: 0;
+    }
+
+    .merged-storyline .story-node:nth-of-type(odd),
+    .merged-storyline .story-node:nth-of-type(even) {
+        margin-left: 44px;
+        margin-right: 0;
+    }
+
+    .merged-storyline .story-node::before {
+        left: -39px;
+        right: auto;
+    }
+
+    .merged-storyline .story-node::after {
+        left: 14px;
+        right: auto;
+        transform: rotate(-8deg);
+    }
+
+    /* 紀實長卷／pillar 段落 */
+    .chronicle-reader,
+    .chronicle-pager {
+        max-width: min(920px, 100%);
+    }
+
+    .variety-block {
+        padding: clamp(18px, 4vw, 22px);
+    }
+
+    .map-archive-header .main-title,
+    .concert-archive-header .main-title {
+        letter-spacing: clamp(3px, 1vw, 6px);
+    }
+
+    .map-layout {
+        grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
+        gap: clamp(16px, 3vw, 22px);
+    }
+
+    .map-my-maps-frame {
+        height: min(52vh, 520px);
+        min-height: 360px;
+    }
+
+    .map-embed-all {
+        gap: 12px;
+    }
+
+    /* 重逢區兩張演唱會大卡之間留白 */
+    #stage-now {
+        gap: clamp(36px, 5vw, 50px);
+    }
+
+    /* 演唱會卡片內距 */
+    .con-1,
+    .con-2,
+    .con-3,
+    .con-4,
+    #yellownote-stage {
+        padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
+    }
+
+    .title {
+        margin: clamp(24px, 5vw, 40px) !important;
+        font-size: clamp(1.15rem, 2.8vw, 1.45rem);
+    }
+
+    .concert-container {
+        padding-left: clamp(12px, 3vw, 20px);
+        padding-right: clamp(12px, 3vw, 20px);
+    }
+
+    .search-input:focus {
+        max-width: 100%;
+    }
+
+    .concert-page .search-input:focus {
+        width: min(100%, 440px);
+    }
+
+    .concert-page img[src*="assets/images/concert/"] {
+        width: min(560px, 88%);
+        max-width: 100%;
+    }
+
+    /* 歌詞頁 */
+    body.lyrics-page {
+        margin: clamp(24px, 5vw, 56px) !important;
+        box-sizing: border-box;
+        overflow-x: hidden;
+    }
+
+    html:has(body.lyrics-page) {
+        font-size: 118.75% !important;
+    }
+
+    body.lyrics-page .lyrics-main-table {
+        border-spacing: clamp(12px, 3vw, 24px) !important;
+        max-width: 100%;
+    }
+
+    body.lyrics-page .main-left {
+        width: 100% !important;
+        display: block;
+        box-sizing: border-box;
+    }
+
+    body.lyrics-page .lyrics-main-table p {
+        font-size: 1.2rem !important;
+        max-width: none;
+    }
+
+    body.lyrics-page h1 {
+        font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
+    }
+}
diff --git a/images/1650509638027.jpg b/assets/images/1650509638027.jpg
similarity index 100%
rename from images/1650509638027.jpg
rename to assets/images/1650509638027.jpg
diff --git a/images/201801231634594057.jpg b/assets/images/201801231634594057.jpg
similarity index 100%
rename from images/201801231634594057.jpg
rename to assets/images/201801231634594057.jpg
diff --git a/images/2023_webdesign_水晶男孩推廣部規劃s.png b/assets/images/2023_webdesign_水晶男孩推廣部規劃s.png
similarity index 100%
rename from images/2023_webdesign_水晶男孩推廣部規劃s.png
rename to assets/images/2023_webdesign_水晶男孩推廣部規劃s.png
diff --git a/images/2023_電子書_無限挑戰六六歌2_final跨頁.pdf b/assets/images/2023_電子書_無限挑戰六六歌2_final跨頁.pdf
similarity index 100%
rename from images/2023_電子書_無限挑戰六六歌2_final跨頁.pdf
rename to assets/images/2023_電子書_無限挑戰六六歌2_final跨頁.pdf
diff --git a/images/230515113027.svg b/assets/images/230515113027.svg
similarity index 100%
rename from images/230515113027.svg
rename to assets/images/230515113027.svg
diff --git a/images/32260718_1783556105020524_6795654717822205952_o.jpg b/assets/images/32260718_1783556105020524_6795654717822205952_o.jpg
similarity index 100%
rename from images/32260718_1783556105020524_6795654717822205952_o.jpg
rename to assets/images/32260718_1783556105020524_6795654717822205952_o.jpg
diff --git a/images/Eun Ji Won.jpeg b/assets/images/Eun Ji Won.jpeg
similarity index 100%
rename from images/Eun Ji Won.jpeg
rename to assets/images/Eun Ji Won.jpeg
diff --git a/images/G1fanmeeting.png b/assets/images/G1fanmeeting.png
similarity index 100%
rename from images/G1fanmeeting.png
rename to assets/images/G1fanmeeting.png
diff --git a/images/G1fanmeetingb.png b/assets/images/G1fanmeetingb.png
similarity index 100%
rename from images/G1fanmeetingb.png
rename to assets/images/G1fanmeetingb.png
diff --git a/images/SECHSKIES_LOGO.jpg b/assets/images/SECHSKIES_LOGO.jpg
similarity index 100%
rename from images/SECHSKIES_LOGO.jpg
rename to assets/images/SECHSKIES_LOGO.jpg
diff --git a/images/albums/1997.jpg b/assets/images/albums/1997.jpg
similarity index 100%
rename from images/albums/1997.jpg
rename to assets/images/albums/1997.jpg
diff --git a/images/albums/1998.jpg b/assets/images/albums/1998.jpg
similarity index 100%
rename from images/albums/1998.jpg
rename to assets/images/albums/1998.jpg
diff --git a/images/albums/1999.jpg b/assets/images/albums/1999.jpg
similarity index 100%
rename from images/albums/1999.jpg
rename to assets/images/albums/1999.jpg
diff --git a/images/albums/2016.jpg b/assets/images/albums/2016.jpg
similarity index 100%
rename from images/albums/2016.jpg
rename to assets/images/albums/2016.jpg
diff --git a/images/albums/2017.jpg b/assets/images/albums/2017.jpg
similarity index 100%
rename from images/albums/2017.jpg
rename to assets/images/albums/2017.jpg
diff --git a/images/albums/20172.jpg b/assets/images/albums/20172.jpg
similarity index 100%
rename from images/albums/20172.jpg
rename to assets/images/albums/20172.jpg
diff --git a/images/albums/2020.jpg b/assets/images/albums/2020.jpg
similarity index 100%
rename from images/albums/2020.jpg
rename to assets/images/albums/2020.jpg
diff --git a/images/concert/2016.jpg b/assets/images/concert/2016.jpg
similarity index 100%
rename from images/concert/2016.jpg
rename to assets/images/concert/2016.jpg
diff --git a/images/concert/2017.jpg b/assets/images/concert/2017.jpg
similarity index 100%
rename from images/concert/2017.jpg
rename to assets/images/concert/2017.jpg
diff --git a/images/concert/2018.jpg b/assets/images/concert/2018.jpg
similarity index 100%
rename from images/concert/2018.jpg
rename to assets/images/concert/2018.jpg
diff --git a/images/concert/2020.jpg b/assets/images/concert/2020.jpg
similarity index 100%
rename from images/concert/2020.jpg
rename to assets/images/concert/2020.jpg
diff --git a/images/header.jpg b/assets/images/header.jpg
similarity index 100%
rename from images/header.jpg
rename to assets/images/header.jpg
diff --git a/images/header.png b/assets/images/header.png
similarity index 100%
rename from images/header.png
rename to assets/images/header.png
diff --git a/images/logo.png b/assets/images/logo.png
similarity index 100%
rename from images/logo.png
rename to assets/images/logo.png
diff --git a/images/logov.svg b/assets/images/logov.svg
similarity index 100%
rename from images/logov.svg
rename to assets/images/logov.svg
diff --git a/images/map/jiyong_taiwan01s.jpg b/assets/images/map/jiyong_taiwan01s.jpg
similarity index 100%
rename from images/map/jiyong_taiwan01s.jpg
rename to assets/images/map/jiyong_taiwan01s.jpg
diff --git a/images/map/jiyong_taiwan02.jpg b/assets/images/map/jiyong_taiwan02.jpg
similarity index 100%
rename from images/map/jiyong_taiwan02.jpg
rename to assets/images/map/jiyong_taiwan02.jpg
diff --git a/images/map/jiyong_taiwan03 s.jpg b/assets/images/map/jiyong_taiwan03 s.jpg
similarity index 100%
rename from images/map/jiyong_taiwan03 s.jpg
rename to assets/images/map/jiyong_taiwan03 s.jpg
diff --git a/images/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-22.png b/assets/images/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-22.png
similarity index 100%
rename from images/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-22.png
rename to assets/images/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-22.png
diff --git a/images/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-23.png b/assets/images/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-23.png
similarity index 100%
rename from images/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-23.png
rename to assets/images/map/ko/DAD! STOP IT!! Jiyong surprises Seungjae with a scary mask [The Return of Superman2018.07.08] 00-03-23.png
diff --git a/images/map/ko/DSC_0174.NEF b/assets/images/map/ko/DSC_0174.NEF
similarity index 100%
rename from images/map/ko/DSC_0174.NEF
rename to assets/images/map/ko/DSC_0174.NEF
diff --git a/images/map/ko/IMG_0784.jpg b/assets/images/map/ko/IMG_0784.jpg
similarity index 100%
rename from images/map/ko/IMG_0784.jpg
rename to assets/images/map/ko/IMG_0784.jpg
diff --git a/images/member/1595330620293.jpg b/assets/images/member/1595330620293.jpg
similarity index 100%
rename from images/member/1595330620293.jpg
rename to assets/images/member/1595330620293.jpg
diff --git a/images/member/4c0e013b341e85622979475bc230719b.jpg b/assets/images/member/4c0e013b341e85622979475bc230719b.jpg
similarity index 100%
rename from images/member/4c0e013b341e85622979475bc230719b.jpg
rename to assets/images/member/4c0e013b341e85622979475bc230719b.jpg
diff --git a/images/member/92599-502183.jpg b/assets/images/member/92599-502183.jpg
similarity index 100%
rename from images/member/92599-502183.jpg
rename to assets/images/member/92599-502183.jpg
diff --git a/images/member/kpoplover082006___Bsc2U5lhXuK___.jpg b/assets/images/member/kpoplover082006___Bsc2U5lhXuK___.jpg
similarity index 100%
rename from images/member/kpoplover082006___Bsc2U5lhXuK___.jpg
rename to assets/images/member/kpoplover082006___Bsc2U5lhXuK___.jpg
diff --git a/images/member/noona7273___Bt7EZHRAGgs___.jpg b/assets/images/member/noona7273___Bt7EZHRAGgs___.jpg
similarity index 100%
rename from images/member/noona7273___Bt7EZHRAGgs___.jpg
rename to assets/images/member/noona7273___Bt7EZHRAGgs___.jpg
diff --git a/images/member/seven7lai_1___BuRBxcPAIsP___.jpg b/assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg
similarity index 100%
rename from images/member/seven7lai_1___BuRBxcPAIsP___.jpg
rename to assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg
diff --git a/images/minister/.gitkeep b/assets/images/minister/.gitkeep
similarity index 100%
rename from images/minister/.gitkeep
rename to assets/images/minister/.gitkeep
diff --git a/images/mission-balloon-sea.png b/assets/images/mission-balloon-sea.png
similarity index 100%
rename from images/mission-balloon-sea.png
rename to assets/images/mission-balloon-sea.png
diff --git a/images/old/1533313685-1024x714.jpg b/assets/images/old/1533313685-1024x714.jpg
similarity index 100%
rename from images/old/1533313685-1024x714.jpg
rename to assets/images/old/1533313685-1024x714.jpg
diff --git a/images/old/41151ddd46a0179bafcccb900d976241-1024x683.jpg b/assets/images/old/41151ddd46a0179bafcccb900d976241-1024x683.jpg
similarity index 100%
rename from images/old/41151ddd46a0179bafcccb900d976241-1024x683.jpg
rename to assets/images/old/41151ddd46a0179bafcccb900d976241-1024x683.jpg
diff --git a/images/old/71bzyibKBTL._UL1500_-1-e1533296470805.jpg b/assets/images/old/71bzyibKBTL._UL1500_-1-e1533296470805.jpg
similarity index 100%
rename from images/old/71bzyibKBTL._UL1500_-1-e1533296470805.jpg
rename to assets/images/old/71bzyibKBTL._UL1500_-1-e1533296470805.jpg
diff --git a/images/old/DYP9ArjVwAEzxs5.jpg b/assets/images/old/DYP9ArjVwAEzxs5.jpg
similarity index 100%
rename from images/old/DYP9ArjVwAEzxs5.jpg
rename to assets/images/old/DYP9ArjVwAEzxs5.jpg
diff --git a/images/old/ShowBizhoony-1s.png b/assets/images/old/ShowBizhoony-1s.png
similarity index 100%
rename from images/old/ShowBizhoony-1s.png
rename to assets/images/old/ShowBizhoony-1s.png
diff --git a/images/old/cropped-logo.1s.png b/assets/images/old/cropped-logo.1s.png
similarity index 100%
rename from images/old/cropped-logo.1s.png
rename to assets/images/old/cropped-logo.1s.png
diff --git a/images/old/cropped-threeword009-1.png b/assets/images/old/cropped-threeword009-1.png
similarity index 100%
rename from images/old/cropped-threeword009-1.png
rename to assets/images/old/cropped-threeword009-1.png
diff --git a/images/old/cropped-threeword009.png b/assets/images/old/cropped-threeword009.png
similarity index 100%
rename from images/old/cropped-threeword009.png
rename to assets/images/old/cropped-threeword009.png
diff --git a/images/old/e386ed100b3f2a36fbab2934e7d7ed1fafdd8ada-1024x640.png b/assets/images/old/e386ed100b3f2a36fbab2934e7d7ed1fafdd8ada-1024x640.png
similarity index 100%
rename from images/old/e386ed100b3f2a36fbab2934e7d7ed1fafdd8ada-1024x640.png
rename to assets/images/old/e386ed100b3f2a36fbab2934e7d7ed1fafdd8ada-1024x640.png
diff --git a/images/old/jiwon070-690x966.jpg b/assets/images/old/jiwon070-690x966.jpg
similarity index 100%
rename from images/old/jiwon070-690x966.jpg
rename to assets/images/old/jiwon070-690x966.jpg
diff --git a/images/old/logo1titles-1024x107.png b/assets/images/old/logo1titles-1024x107.png
similarity index 100%
rename from images/old/logo1titles-1024x107.png
rename to assets/images/old/logo1titles-1024x107.png
diff --git a/images/old/logo1titles-280x280 (1).jpg b/assets/images/old/logo1titles-280x280 (1).jpg
similarity index 100%
rename from images/old/logo1titles-280x280 (1).jpg
rename to assets/images/old/logo1titles-280x280 (1).jpg
diff --git a/images/old/sayugi4_2s.png b/assets/images/old/sayugi4_2s.png
similarity index 100%
rename from images/old/sayugi4_2s.png
rename to assets/images/old/sayugi4_2s.png
diff --git a/images/old/sli02.png b/assets/images/old/sli02.png
similarity index 100%
rename from images/old/sli02.png
rename to assets/images/old/sli02.png
diff --git a/images/old/v2-5d26d728fc6bff0e9b65b5af9f6fda01_hd.jpg b/assets/images/old/v2-5d26d728fc6bff0e9b65b5af9f6fda01_hd.jpg
similarity index 100%
rename from images/old/v2-5d26d728fc6bff0e9b65b5af9f6fda01_hd.jpg
rename to assets/images/old/v2-5d26d728fc6bff0e9b65b5af9f6fda01_hd.jpg
diff --git a/images/old/v2-6f0acce9d2eb817ea9087937da757bf2_hd.jpg b/assets/images/old/v2-6f0acce9d2eb817ea9087937da757bf2_hd.jpg
similarity index 100%
rename from images/old/v2-6f0acce9d2eb817ea9087937da757bf2_hd.jpg
rename to assets/images/old/v2-6f0acce9d2eb817ea9087937da757bf2_hd.jpg
diff --git a/images/s黃色海洋.gif b/assets/images/s黃色海洋.gif
similarity index 100%
rename from images/s黃色海洋.gif
rename to assets/images/s黃色海洋.gif
diff --git a/images/totoga2/toto1.png b/assets/images/totoga2/toto1.png
similarity index 100%
rename from images/totoga2/toto1.png
rename to assets/images/totoga2/toto1.png
diff --git a/images/totoga2/xyJDQ8m.png b/assets/images/totoga2/xyJDQ8m.png
similarity index 100%
rename from images/totoga2/xyJDQ8m.png
rename to assets/images/totoga2/xyJDQ8m.png
diff --git a/images/志源生日.jpg b/assets/images/志源生日.jpg
similarity index 100%
rename from images/志源生日.jpg
rename to assets/images/志源生日.jpg
diff --git a/images/新增資料夾/180317/IMG_20180317_174202_764.jpg b/assets/images/新增資料夾/180317/IMG_20180317_174202_764.jpg
similarity index 100%
rename from images/新增資料夾/180317/IMG_20180317_174202_764.jpg
rename to assets/images/新增資料夾/180317/IMG_20180317_174202_764.jpg
diff --git a/images/新增資料夾/180317/IMG_20180318_181301_902.jpg b/assets/images/新增資料夾/180317/IMG_20180318_181301_902.jpg
similarity index 100%
rename from images/新增資料夾/180317/IMG_20180318_181301_902.jpg
rename to assets/images/新增資料夾/180317/IMG_20180318_181301_902.jpg
diff --git a/images/新增資料夾/180317/IMG_20180318_181301_904.jpg b/assets/images/新增資料夾/180317/IMG_20180318_181301_904.jpg
similarity index 100%
rename from images/新增資料夾/180317/IMG_20180318_181301_904.jpg
rename to assets/images/新增資料夾/180317/IMG_20180318_181301_904.jpg
diff --git a/images/新增資料夾/180317/IMG_20180318_181301_907.jpg b/assets/images/新增資料夾/180317/IMG_20180318_181301_907.jpg
similarity index 100%
rename from images/新增資料夾/180317/IMG_20180318_181301_907.jpg
rename to assets/images/新增資料夾/180317/IMG_20180318_181301_907.jpg
diff --git a/images/新增資料夾/180317/IMG_20180318_224531_021.jpg b/assets/images/新增資料夾/180317/IMG_20180318_224531_021.jpg
similarity index 100%
rename from images/新增資料夾/180317/IMG_20180318_224531_021.jpg
rename to assets/images/新增資料夾/180317/IMG_20180318_224531_021.jpg
diff --git a/images/新增資料夾/2018_Banner_0807金在德生日.jpg b/assets/images/新增資料夾/2018_Banner_0807金在德生日.jpg
similarity index 100%
rename from images/新增資料夾/2018_Banner_0807金在德生日.jpg
rename to assets/images/新增資料夾/2018_Banner_0807金在德生日.jpg
diff --git a/images/新增資料夾/2018_Banner_0808感恩父親節.jpg b/assets/images/新增資料夾/2018_Banner_0808感恩父親節.jpg
similarity index 100%
rename from images/新增資料夾/2018_Banner_0808感恩父親節.jpg
rename to assets/images/新增資料夾/2018_Banner_0808感恩父親節.jpg
diff --git a/images/新增資料夾/37175247_10155982258293173_5685874579155714048_o.jpg b/assets/images/新增資料夾/37175247_10155982258293173_5685874579155714048_o.jpg
similarity index 100%
rename from images/新增資料夾/37175247_10155982258293173_5685874579155714048_o.jpg
rename to assets/images/新增資料夾/37175247_10155982258293173_5685874579155714048_o.jpg
diff --git a/images/新增資料夾/IMG_20160804_133430.jpg b/assets/images/新增資料夾/IMG_20160804_133430.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20160804_133430.jpg
rename to assets/images/新增資料夾/IMG_20160804_133430.jpg
diff --git a/images/新增資料夾/IMG_20160807_172033.jpg b/assets/images/新增資料夾/IMG_20160807_172033.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20160807_172033.jpg
rename to assets/images/新增資料夾/IMG_20160807_172033.jpg
diff --git a/images/新增資料夾/IMG_20160912_002312.jpg b/assets/images/新增資料夾/IMG_20160912_002312.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20160912_002312.jpg
rename to assets/images/新增資料夾/IMG_20160912_002312.jpg
diff --git a/images/新增資料夾/IMG_20161217_131702.jpg b/assets/images/新增資料夾/IMG_20161217_131702.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20161217_131702.jpg
rename to assets/images/新增資料夾/IMG_20161217_131702.jpg
diff --git a/images/新增資料夾/IMG_20161217_131740.jpg b/assets/images/新增資料夾/IMG_20161217_131740.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20161217_131740.jpg
rename to assets/images/新增資料夾/IMG_20161217_131740.jpg
diff --git a/images/新增資料夾/IMG_20170109_212529.jpg b/assets/images/新增資料夾/IMG_20170109_212529.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20170109_212529.jpg
rename to assets/images/新增資料夾/IMG_20170109_212529.jpg
diff --git a/images/新增資料夾/IMG_20170124_131851.jpg b/assets/images/新增資料夾/IMG_20170124_131851.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20170124_131851.jpg
rename to assets/images/新增資料夾/IMG_20170124_131851.jpg
diff --git a/images/新增資料夾/IMG_20170124_132642.jpg b/assets/images/新增資料夾/IMG_20170124_132642.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20170124_132642.jpg
rename to assets/images/新增資料夾/IMG_20170124_132642.jpg
diff --git a/images/新增資料夾/IMG_20170125_195630.jpg b/assets/images/新增資料夾/IMG_20170125_195630.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20170125_195630.jpg
rename to assets/images/新增資料夾/IMG_20170125_195630.jpg
diff --git a/images/新增資料夾/IMG_20180204_123437_709.jpg b/assets/images/新增資料夾/IMG_20180204_123437_709.jpg
similarity index 100%
rename from images/新增資料夾/IMG_20180204_123437_709.jpg
rename to assets/images/新增資料夾/IMG_20180204_123437_709.jpg
diff --git a/images/新增資料夾/無限挑戰六六歌2_final跨頁降分割-1.PDF b/assets/images/新增資料夾/無限挑戰六六歌2_final跨頁降分割-1.PDF
similarity index 100%
rename from images/新增資料夾/無限挑戰六六歌2_final跨頁降分割-1.PDF
rename to assets/images/新增資料夾/無限挑戰六六歌2_final跨頁降分割-1.PDF
diff --git a/images/新增資料夾/無限挑戰六六歌2_final跨頁降分割-2.PDF b/assets/images/新增資料夾/無限挑戰六六歌2_final跨頁降分割-2.PDF
similarity index 100%
rename from images/新增資料夾/無限挑戰六六歌2_final跨頁降分割-2.PDF
rename to assets/images/新增資料夾/無限挑戰六六歌2_final跨頁降分割-2.PDF
diff --git a/images/水晶男孩推廣部FB.jpg b/assets/images/水晶男孩推廣部FB.jpg
similarity index 100%
rename from images/水晶男孩推廣部FB.jpg
rename to assets/images/水晶男孩推廣部FB.jpg
diff --git a/images/黃色海洋.gif b/assets/images/黃色海洋.gif
similarity index 100%
rename from images/黃色海洋.gif
rename to assets/images/黃色海洋.gif
diff --git a/map/map.js b/assets/js/map.js
similarity index 97%
rename from map/map.js
rename to assets/js/map.js
index 333f4b1..3d5d02a 100644
--- a/map/map.js
+++ b/assets/js/map.js
@@ -1,304 +1,304 @@
-(() => {
-    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 = "all";
-    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 = { ko: 0, eun: 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.insertBefore(group, detailPanel);
-        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 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 = "all";
+    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 = { ko: 0, eun: 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.insertBefore(group, detailPanel);
+        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();
+})();
diff --git a/particles.js b/assets/js/particles.js
similarity index 96%
rename from particles.js
rename to assets/js/particles.js
index a4504a0..9638ee1 100644
--- a/particles.js
+++ b/assets/js/particles.js
@@ -1,58 +1,58 @@
-(() => {
-    const canvas = document.getElementById("particles");
-    if (!canvas) return;
-
-    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 canvas = document.getElementById("particles");
+    if (!canvas) return;
+
+    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();
+    });
+})();
diff --git a/portal-nav.js b/assets/js/portal-nav.js
similarity index 98%
rename from portal-nav.js
rename to assets/js/portal-nav.js
index b4826ea..927d09d 100644
--- a/portal-nav.js
+++ b/assets/js/portal-nav.js
@@ -121,7 +121,7 @@
 
     /**
      * 站根與 `portal-nav.js` 同層；依腳本路徑與當前頁路徑計算回到站根的相對前綴（如 `../`）。
-     * 子資料夾內頁面之導覽連結必須帶此前綴，否則 `./images`、`index.html` 會錯層。
+     * 子資料夾內頁面之導覽連結必須帶此前綴，否則 `./assets/images`、`index.html` 會錯層。
      */
     function portalNavRootPrefix() {
         const el =
@@ -150,7 +150,7 @@
     /** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面 */
     function buildPortalNavInnerHTML(rp) {
         return `
-<a class="logo" href="${rp}index.html"><img src="${rp}images/logov.svg" alt="SECHSKIES Logo"></a>
+<a class="logo" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
 <ul>
     <li><a href="${rp}index.html#origin">淪陷瞬間</a>
         <ul class="portal-submenu">
diff --git a/extra/totoga2.js b/assets/js/totoga2.js
similarity index 97%
rename from extra/totoga2.js
rename to assets/js/totoga2.js
index 2f3981d..a9281f6 100644
--- a/extra/totoga2.js
+++ b/assets/js/totoga2.js
@@ -1,97 +1,97 @@
-(() => {
-    const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]"));
-    const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
-
-    function setHubPanel(name) {
-        hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
-        hubPanels.forEach((panel) => {
-            panel.hidden = panel.dataset.totogaPanel !== name;
-        });
-    }
-
-    hubButtons.forEach((btn) => {
-        btn.addEventListener("click", () => setHubPanel(btn.dataset.totogaHub));
-    });
-
-    const reader = document.getElementById("totoga2-reader");
-    if (!reader) return;
-
-    const chapters = Array.from(reader.querySelectorAll(".chronicle-chapter"));
-    const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
-    const pager = document.getElementById("totoga2-pager");
-    const prevBtn = document.getElementById("totoga2-prev");
-    const nextBtn = document.getElementById("totoga2-next");
-    const indicator = document.getElementById("totoga2-chapter-indicator");
-    if (!pager || !prevBtn || !nextBtn || !indicator) return;
-
-    let currentIndex = 0;
-
-    function updatePagedView() {
-        chapters.forEach((chapter, index) => {
-            chapter.style.display = index === currentIndex ? "" : "none";
-            chapter.classList.toggle("active", index === currentIndex);
-        });
-        indicator.textContent = `${currentIndex + 1} / ${chapters.length}`;
-        prevBtn.disabled = currentIndex === 0;
-        nextBtn.disabled = currentIndex === chapters.length - 1;
-    }
-
-    function setReaderMode(mode) {
-        reader.dataset.mode = mode;
-        modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
-        if (mode === "paged") {
-            pager.hidden = false;
-            updatePagedView();
-        } else {
-            pager.hidden = true;
-            chapters.forEach((chapter) => {
-                chapter.style.display = "";
-                chapter.classList.remove("active");
-            });
-        }
-    }
-
-    modeButtons.forEach((button) => {
-        button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
-    });
-
-    prevBtn.addEventListener("click", () => {
-        if (currentIndex > 0) {
-            currentIndex -= 1;
-            updatePagedView();
-        }
-    });
-
-    nextBtn.addEventListener("click", () => {
-        if (currentIndex < chapters.length - 1) {
-            currentIndex += 1;
-            updatePagedView();
-        }
-    });
-
-    const initialHub =
-        hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
-        hubButtons[0]?.dataset.totogaHub ||
-        "video";
-    setHubPanel(initialHub);
-    setReaderMode("scroll");
-
-    function applyLocationHashNavigation() {
-        const hash = (location.hash || "").slice(1);
-        if (hash === "ebook") {
-            setHubPanel("ebook");
-            return;
-        }
-        if (hash && document.getElementById(hash)) {
-            setHubPanel("reader");
-            setReaderMode("scroll");
-            pager.hidden = true;
-            requestAnimationFrame(() => {
-                document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
-            });
-        }
-    }
-
-    applyLocationHashNavigation();
-    window.addEventListener("hashchange", applyLocationHashNavigation);
-})();
+(() => {
+    const hubButtons = Array.from(document.querySelectorAll("[data-totoga-hub]"));
+    const hubPanels = Array.from(document.querySelectorAll("[data-totoga-panel]"));
+
+    function setHubPanel(name) {
+        hubButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaHub === name));
+        hubPanels.forEach((panel) => {
+            panel.hidden = panel.dataset.totogaPanel !== name;
+        });
+    }
+
+    hubButtons.forEach((btn) => {
+        btn.addEventListener("click", () => setHubPanel(btn.dataset.totogaHub));
+    });
+
+    const reader = document.getElementById("totoga2-reader");
+    if (!reader) return;
+
+    const chapters = Array.from(reader.querySelectorAll(".chronicle-chapter"));
+    const modeButtons = Array.from(document.querySelectorAll("[data-totoga-reader-mode]"));
+    const pager = document.getElementById("totoga2-pager");
+    const prevBtn = document.getElementById("totoga2-prev");
+    const nextBtn = document.getElementById("totoga2-next");
+    const indicator = document.getElementById("totoga2-chapter-indicator");
+    if (!pager || !prevBtn || !nextBtn || !indicator) return;
+
+    let currentIndex = 0;
+
+    function updatePagedView() {
+        chapters.forEach((chapter, index) => {
+            chapter.style.display = index === currentIndex ? "" : "none";
+            chapter.classList.toggle("active", index === currentIndex);
+        });
+        indicator.textContent = `${currentIndex + 1} / ${chapters.length}`;
+        prevBtn.disabled = currentIndex === 0;
+        nextBtn.disabled = currentIndex === chapters.length - 1;
+    }
+
+    function setReaderMode(mode) {
+        reader.dataset.mode = mode;
+        modeButtons.forEach((btn) => btn.classList.toggle("active", btn.dataset.totogaReaderMode === mode));
+        if (mode === "paged") {
+            pager.hidden = false;
+            updatePagedView();
+        } else {
+            pager.hidden = true;
+            chapters.forEach((chapter) => {
+                chapter.style.display = "";
+                chapter.classList.remove("active");
+            });
+        }
+    }
+
+    modeButtons.forEach((button) => {
+        button.addEventListener("click", () => setReaderMode(button.dataset.totogaReaderMode));
+    });
+
+    prevBtn.addEventListener("click", () => {
+        if (currentIndex > 0) {
+            currentIndex -= 1;
+            updatePagedView();
+        }
+    });
+
+    nextBtn.addEventListener("click", () => {
+        if (currentIndex < chapters.length - 1) {
+            currentIndex += 1;
+            updatePagedView();
+        }
+    });
+
+    const initialHub =
+        hubButtons.find((b) => b.classList.contains("active"))?.dataset.totogaHub ||
+        hubButtons[0]?.dataset.totogaHub ||
+        "video";
+    setHubPanel(initialHub);
+    setReaderMode("scroll");
+
+    function applyLocationHashNavigation() {
+        const hash = (location.hash || "").slice(1);
+        if (hash === "ebook") {
+            setHubPanel("ebook");
+            return;
+        }
+        if (hash && document.getElementById(hash)) {
+            setHubPanel("reader");
+            setReaderMode("scroll");
+            pager.hidden = true;
+            requestAnimationFrame(() => {
+                document.getElementById(hash)?.scrollIntoView({ behavior: "smooth", block: "start" });
+            });
+        }
+    }
+
+    applyLocationHashNavigation();
+    window.addEventListener("hashchange", applyLocationHashNavigation);
+})();
diff --git a/concert/concert.html b/concert/concert.html
index 736a465..8856fa3 100644
--- a/concert/concert.html
+++ b/concert/concert.html
@@ -5,10 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SECHSKIES Concert Archive</title>
-    <link rel="stylesheet" href="concert.css">
-    <link rel="stylesheet" href="../style.css">
+    <link rel="stylesheet" href="../assets/css/concert.css">
+    <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="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="concert-page">
@@ -33,7 +33,7 @@
 
             <div class="con-1" data-tour=" YELLOW NOTE">
                 <span class="title">2016&nbsp;&nbsp;|&nbsp;&nbsp;YELLOW NOTE&nbsp;&nbsp;首場回歸演唱會</span>
-                <img src="../images/concert/2016.jpg" alt="">
+                <img src="../assets/images/concert/2016.jpg" alt="">
                 <div class="con-yk-1 attended" data-date1="09.10">
                     <span class="location">首爾 | 首爾奧林匹克體操競技場</span>
                     <input type="checkbox" id="expand-yk-1" class="expand-trigger">
@@ -160,7 +160,7 @@
 
             <div class="con-2" data-tour="20TH ANNIV.">
                 <span class="title">2017-2018&nbsp;&nbsp;|&nbsp;&nbsp;20TH ANNIVERSARY</span>
-                <img src="../images/concert/2017.jpg" alt="">
+                <img src="../assets/images/concert/2017.jpg" alt="">
 
                 <div class="con-2-1">
                     <span class="location">首爾：高尺天空巨蛋</span>
@@ -352,7 +352,7 @@
         <!-- 演唱會 03 -->
         <div class="con-3" data-tour="NOW・HERE・AGAIN.">
             <span class="title">2018&nbsp;&nbsp;|&nbsp;&nbsp;NOW・HERE・AGAIN</span>
-            <img src="../images/concert/2018.jpg" alt="">
+            <img src="../assets/images/concert/2018.jpg" alt="">
             <div class="con-3-1 attended" data-date1="10.13" data-date2="10.14">
                 <span class="location">首爾：首爾奧林匹克體操競技場</span>
                 <input type="checkbox" id="expand-con-3-1" class="expand-trigger">
@@ -389,7 +389,7 @@
         <!-- 演唱會 04：與 con-2／con-3 同結構 — title → img → con-4-1；ACCESS 樣式用 con-access-denied；CANCELED 水印為 ::before（::after 保留給 data-tour 緞帶） -->
         <div class="con-4 con-access-denied" data-tour="ACCESS">
             <span class="title">2020&nbsp;&nbsp;|&nbsp;&nbsp;CONCERT [ACCESS]</span>
-            <img src="../images/concert/2020.jpg" alt="">
+            <img src="../assets/images/concert/2020.jpg" alt="">
 
             <div class="con-4-1 canceled" data-date1="03.06" data-date2="03.08">
                 <span class="location">首爾：慶熙大學 平和殿堂</span>
@@ -631,7 +631,7 @@
         init();
         animate();
     </script>
-    <script src="../portal-nav.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/docs/portal-nav-rules.md b/docs/portal-nav-rules.md
index f93e7c6..967e75a 100644
--- a/docs/portal-nav-rules.md
+++ b/docs/portal-nav-rules.md
@@ -1,16 +1,16 @@
-# 全站導覽列規則（`portal-nav.js`）
+# 全站導覽列規則（`assets/js/portal-nav.js`）
 
-之後**每新增一個要上線、可點的 HTML 頁面**，請一併完成導覽更新；規則都集中在 **`portal-nav.js`**。
+之後**每新增一個要上線、可點的 HTML 頁面**，請一併完成導覽更新；規則都集中在 **`assets/js/portal-nav.js`**。
 
 ---
 
 ## 1. 必做：把頁面掛進導覽 HTML
 
-在 **`buildPortalNavInnerHTML`**（`portal-nav.js`）裡維護連結：
+在 **`buildPortalNavInnerHTML`**（`assets/js/portal-nav.js`）裡維護連結：
 
 - 依資訊架構放在對應的 **`<li>`** 底下；需要子選單時用 **`portal-submenu`**。
 - `href` 使用**站根相對路徑**（腳本會依當前頁深度加上前綴 `rp`）：例如 `` `${rp}variety/variety.html` ``、`` `${rp}index.html#section` ``。
-- Logo 列：`` `${rp}index.html` `` 與 `` `${rp}images/logov.svg` ``。
+- Logo 列：`` `${rp}index.html` `` 與 `` `${rp}assets/images/logov.svg` ``。
 
 新增或調整完後，所有帶 **`data-portal-nav`** 的 `<nav class="portal-nav">` 都會在載入腳本時被注入同一份 HTML。
 
@@ -27,10 +27,10 @@
 
 | 需求 | 做法 |
 |------|------|
-| 新頁要**正式開放** | 寫進 `PORTAL_NAV_INNER_HTML`，並**確認檔名不在** `COMING_SOON_PAGES`。若曾暫時關閉，記得從 Set **刪除**該檔名。 |
+| 新頁要**正式開放** | 寫進 `buildPortalNavInnerHTML`（`assets/js/portal-nav.js`），並**確認檔名不在** `COMING_SOON_PAGES`。若曾暫時關閉，記得從 Set **刪除**該檔名。 |
 | 新頁先**占位、不開放** | 可選擇：仍寫進導覽，但把檔名**加進** `COMING_SOON_PAGES`；或暫時不要放進導覽。 |
 
-（目前 Set 內含哪些檔，以 `portal-nav.js` 為準；例如 `totoga2.html` 若已開放，就不應出現在 Set 裡。）
+（目前 Set 內含哪些檔，以 `assets/js/portal-nav.js` 為準；例如 `totoga2.html` 若已開放，就不應出現在 Set 裡。）
 
 ---
 
@@ -54,16 +54,22 @@
 - 在 `</body>` 前載入（順序可與現有頁一致）：
 
   ```html
-  <script src="portal-nav.js"></script>
+  <script src="assets/js/portal-nav.js"></script>
   ```
 
-- 若該頁有 **`particles.js`**／共用樣式，比照其他內頁一併引入即可。
+  內頁（例如 `extra/`、`variety/` 下）請用相對站根深度，例如：
+
+  ```html
+  <script src="../assets/js/portal-nav.js"></script>
+  ```
+
+- 若該頁有 **`assets/js/particles.js`**／共用樣式（`assets/css/style.css` 等），比照其他內頁一併引入即可。
 
 ---
 
 ## 5. 刻意不進導覽的頁面
 
-若某頁只給自己用（例如站內索引、草稿），**不要**寫進 `PORTAL_NAV_INNER_HTML` 即可；不必改 `COMING_SOON_PAGES`。
+若某頁只給自己用（例如站內索引、草稿），**不要**寫進 `buildPortalNavInnerHTML` 即可；不必改 `COMING_SOON_PAGES`。
 
 ---
 
@@ -86,7 +92,7 @@
 
 | 檔案 | 用途 |
 |------|------|
-| `portal-nav.js` | `PORTAL_NAV_INNER_HTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`、籌備中邏輯 |
-| `style.css` | `.portal-nav`、子選單、`.nav-current` 等樣式 |
+| `assets/js/portal-nav.js` | `buildPortalNavInnerHTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`、籌備中邏輯 |
+| `assets/css/style.css` | `.portal-nav`、子選單、`.nav-current` 等樣式 |
 
 （導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。）
diff --git a/extra/grok.html b/extra/grok.html
index 420d0ee..490d85e 100644
--- a/extra/grok.html
+++ b/extra/grok.html
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩 SECHSKIES | 永恆的六顆水晶</title>
         
-    <link rel="stylesheet" href="../style.css">
+    <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="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 
 </head>
 <body>
@@ -47,7 +47,7 @@
         <h2>六位永恆成員</h2>
         <div class="members-grid">
             <div class="member">
-                <img src="../images/Eun Ji Won.jpeg" alt="殷志源">
+                <img src="../assets/images/Eun Ji Won.jpeg" alt="殷志源">
                 <h3>殷志源 (Eun Ji Won)</h3>
                 <p>Leader • Rap • Black Kies</p>
             </div>
diff --git a/extra/lyrics.html b/extra/lyrics.html
index 63b5a7f..30d58ac 100644
--- a/extra/lyrics.html
+++ b/extra/lyrics.html
@@ -9,9 +9,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="../style.css">
-    <link rel="stylesheet" href="lyrics.css">
-    <link rel="stylesheet" href="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/style.css">
+    <link rel="stylesheet" href="../assets/css/lyrics.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="lyrics-page">
diff --git a/extra/minister.html b/extra/minister.html
index 03251eb..48cf294 100644
--- a/extra/minister.html
+++ b/extra/minister.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩推廣部｜視覺進化論</title>
-    <link rel="stylesheet" href="../style.css">
+    <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="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="chronicle-page minister-page">
@@ -60,25 +60,25 @@
                 <p class="minister-month">07 月｜手作初試</p>
                 <p>開始學習勾針，為金在德製作第一個鴨鴨置物籃，這是從旁觀者轉為實踐者的第一步。</p>
                 <figure class="minister-photo">
-                    <img src="../images/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
+                    <img src="../assets/images/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
                 </figure>
 
                 <p class="minister-month">08 月｜螢幕後的參與</p>
                 <p>以「水晶廢人字幕組」粉絲身分，用手繪應援板與勾針作品參與應援影片籌備。</p>
                 <figure class="minister-photo">
-                    <img src="../images/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
+                    <img src="../assets/images/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
                 </figure>
 
                 <p class="minister-month">09 月｜孤注一擲的現場</p>
                 <p>在經濟窘迫、甚至需要借錢籌措旅費的情況下，飛往首爾參加首場演唱會。在那裡，我握著導師設計的台灣小黃手幅，第一次感受到設計與才華帶來的震撼。</p>
                 <figure class="minister-photo">
-                    <img src="../images/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
+                    <img src="../assets/images/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
                 </figure>
 
                 <p class="minister-month">12 月｜溫暖的饋贈</p>
                 <p>在「#水晶文具社」聚會中，收到了同好精緻的手繪聖誕卡片。看著別人的創作，我更加確信自己也想成為能用作品傳遞能量的人。</p>
                 <figure class="minister-photo">
-                    <img src="../images/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
+                    <img src="../assets/images/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
                 </figure>
             </article>
 
@@ -87,7 +87,7 @@
                 <p class="minister-month">01 月｜職人精神的啟發</p>
                 <p>參與資管組 D 大的新年紅包活動。其書法與刻印結合的質感，深深影響了我對美感的標準。</p>
                 <figure class="minister-photo">
-                    <img src="../images/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
+                    <img src="../assets/images/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
                 </figure>
 
                 <p class="minister-month">02 月｜身體記憶的熱血</p>
@@ -96,8 +96,8 @@
                 <p class="minister-month">04 月｜筆尖的沈澱</p>
                 <p>跟著文具社走遍全台咖啡廳，在鋼筆墨水與玻璃杯的陪伴下，用手寫記錄初心。</p>
                 <figure class="minister-photo minister-photo--dual">
-                    <img src="../images/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
-                    <img src="../images/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
+                    <img src="../assets/images/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
+                    <img src="../assets/images/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
                 </figure>
             </article>
 
@@ -124,8 +124,8 @@
         </a>
     </footer>
 
-    <script src="../particles.js"></script>
-    <script src="../portal-nav.js"></script>
+    <script src="../assets/js/particles.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
 </body>
 
 </html>
diff --git a/extra/minister_ge.html b/extra/minister_ge.html
index 138f4fc..9490e3a 100644
--- a/extra/minister_ge.html
+++ b/extra/minister_ge.html
@@ -5,10 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</title>
-    <link rel="stylesheet" href="../style.css">
-    <link rel="stylesheet" href="../index.css">
+    <link rel="stylesheet" href="../assets/css/style.css">
+    <link rel="stylesheet" href="../assets/css/index.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="home-page minister-page">
@@ -236,8 +236,8 @@
         </a>
     </footer>
 
-    <script src="../particles.js"></script>
-    <script src="../portal-nav.js"></script>
+    <script src="../assets/js/particles.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/extra/site-guide.html b/extra/site-guide.html
index 96db576..25e2504 100644
--- a/extra/site-guide.html
+++ b/extra/site-guide.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩｜全站導覽</title>
-    <link rel="stylesheet" href="../style.css">
+    <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="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="site-guide-page">
@@ -132,7 +132,7 @@
                 <article class="site-guide-card">
                     <h3><a href="minister.html">minister.html</a></h3>
                     <p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論</cite></p>
-                    <p class="site-guide-note">頂欄未開放；僅由此全站導覽索引或書籤開啟。圖檔請放 <code>images/minister/</code>（與頁面內檔名一致）。</p>
+                    <p class="site-guide-note">頂欄未開放；僅由此全站導覽索引或書籤開啟。圖檔請放 <code>assets/images/minister/</code>（與頁面內檔名一致）。</p>
                     <h4>區塊錨點</h4>
                     <ul>
                         <li><a href="minister.html#intro">#intro</a> — 跨越時空的開端</li>
@@ -214,8 +214,8 @@
         </a>
     </footer>
 
-    <script src="../particles.js"></script>
-    <script src="../portal-nav.js"></script>
+    <script src="../assets/js/particles.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/extra/sunghoon.html b/extra/sunghoon.html
index a7fe9dc..4b6bf0a 100644
--- a/extra/sunghoon.html
+++ b/extra/sunghoon.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩｜消失的真相</title>
-    <link rel="stylesheet" href="../style.css">
+    <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="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="chronicle-page">
@@ -44,8 +44,8 @@
         </a>
     </footer>
 
-    <script src="../portal-nav.js"></script>
-    <script src="../particles.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
+    <script src="../assets/js/particles.js"></script>
 </body>
 
 </html>
diff --git a/extra/totoga2.html b/extra/totoga2.html
index 6e9fe5f..0a9297f 100644
--- a/extra/totoga2.html
+++ b/extra/totoga2.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</title>
-    <link rel="stylesheet" href="../style.css">
+    <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="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="ebook-ssg2-page totoga2-page">
@@ -190,9 +190,9 @@
         </a>
     </footer>
 
-    <script src="../particles.js"></script>
-    <script src="../portal-nav.js"></script>
-    <script src="totoga2.js"></script>
+    <script src="../assets/js/particles.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
+    <script src="../assets/js/totoga2.js"></script>
 </body>
 
 </html>
diff --git a/index.html b/index.html
index 33a02b0..ef4c2f1 100644
--- a/index.html
+++ b/index.html
@@ -5,10 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SECHSKIES - 水晶男孩傳奇介紹</title>
-    <link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="assets/css/style.css">
+    <link rel="stylesheet" href="assets/css/index.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="assets/css/tablet.css">
 
 </head>
 
@@ -48,7 +48,7 @@
                 <div class="mission-row mission-row--intro">
                     <div class="mission-row__visual">
                         <div class="logo-wrapper">
-                            <img src="./images/logo.png" alt="SECHSKIES Logo Concept">
+                            <img src="./assets/images/logo.png" alt="SECHSKIES Logo Concept">
                             <span class="caption">
                                 <span class="arrow-icon" aria-hidden="true">↑</span>
                                 設計語彙：六角、黃海與初心
@@ -84,8 +84,8 @@
                     <div class="mission-row__visual">
                         <div class="mission-moment-wrap">
                             <div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
-                                <!-- 若改為 GIF 動圖，將底下 src 換成 ./images/mission-balloon-sea.gif 即可 -->
-                                <img src="./images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
+                                <!-- 若改為 GIF 動圖，將底下 src 換成 ./assets/images/mission-balloon-sea.gif 即可 -->
+                                <img src="./assets/images/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
                             </div>
                             <span class="caption">
                                 <span class="arrow-icon" aria-hidden="true">↑</span>
@@ -187,8 +187,8 @@
         </a>
     </footer>
 
-    <script src="particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="assets/js/particles.js"></script>
+    <script src="assets/js/portal-nav.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/map/map.html b/map/map.html
index 57d6fe3..2a0d1a5 100644
--- a/map/map.html
+++ b/map/map.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SECHSKIES 台灣行程地圖</title>
-    <link rel="stylesheet" href="../style.css">
+    <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="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="map-page">
@@ -507,8 +507,8 @@
     </a>
 </footer>
 
-<script src="map.js"></script>
-<script src="../portal-nav.js"></script>
+<script src="../assets/js/map.js"></script>
+<script src="../assets/js/portal-nav.js"></script>
 
 </body>
 
diff --git a/variety/variety.html b/variety/variety.html
index a99623b..4aada57 100644
--- a/variety/variety.html
+++ b/variety/variety.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>水晶男孩｜瘋子與天才</title>
-    <link rel="stylesheet" href="../style.css">
+    <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="../tablet.css">
+    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>
 
 <body class="chronicle-page">
@@ -44,8 +44,8 @@
         </a>
     </footer>
 
-    <script src="../portal-nav.js"></script>
-    <script src="../particles.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
+    <script src="../assets/js/particles.js"></script>
 </body>
 
 </html>