fix add assets/並更新全站引用

2026-05-14 09:20:10 +08:00
parent a6525fdf44
commit c278df23e1
107 changed files with 1726 additions and 1720 deletions
@@ -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` 不帶視覺**，**禁止**再只改基底就套兩種金句。
@@ -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`**。）
@@ -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` 後行為一致。

 ---

@@ -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) {
@@ -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;
+    }
+}
@@ -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%;
@@ -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;
+    }
+}
@@ -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();
+})();
@@ -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();
+    });
+})();
@@ -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">
@@ -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);
+})();
@@ -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>
@@ -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`，僅影響籌備中連結的提示，與新頁是否開放無關。）
@@ -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>
@@ -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">
@@ -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>
--- a/Show More
+++ b/Show More