fix 調整資料夾結構

2026-05-14 09:01:08 +08:00
parent 9c4cf91a50
commit d1584bb6c0
26 changed files with 671 additions and 586 deletions
@@ -4,17 +4,17 @@

 本文依 **`git diff`** 對照 **`HEAD`** 整理，方便逐項核對；不含未在本 diff 出現之檔案或臆測內容。

-**涉及檔案（5）**：`albums.html`、`index.css`、`index.html`、`portal-nav.js`、`style.css`  
+**涉及檔案（5）**：`albums/albums.html`、`index.css`、`index.html`、`portal-nav.js`、`style.css`  
 **統計**：以 `git diff --stat` 為準（以下內容對應該批變更初版筆記）。

 ---

-## 1. `albums.html`
+## 1. `albums/albums.html`

 ### 目的

 - 年表區塊（「啟動新篇章」「輝煌全盛期」）每一資料列：**點列上非連結區域**時，於新分頁開對應 **Spotify 專輯**。
- 列內既有 `<a>`（本站 `lyrics.html`、`concert.html`、`albums.html#classic`）維持原行為。
+- 列內既有 `<a>`（本站 `extra/lyrics.html`、`concert/concert.html`、`albums/albums.html#classic`）維持原行為。

 ### 標記與無障礙

@@ -68,14 +68,14 @@

 1. `<article class="story-node">` 追加 modifier：`story-node--ebook-ssg2`。
 2. 在該篇 `<p>…</p>` 之後新增：
-   - `<a href="totoga2.html#ebook" class="timeline-ebook-cta">`
+   - `<a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">`
   - Font Awesome：`fa-solid fa-hand-pointer`（`aria-hidden="true"`）
   - 文案：「點這裡翻開《六六歌2》紀實電子書」

 ### 相依性（請檢查）

 - 頁面須已載入 Font Awesome（與現有 `<link>` 一致），否則圖示不顯示。
- `totoga2.html` 須存在；`totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。
+- `extra/totoga2.html` 須存在；`extra/totoga2.js` 會辨識網址列 `#ebook` 並切換至電子書模式。

 ---

@@ -122,8 +122,8 @@

 ## 建議檢查步驟（逐項勾選）

-1. **`albums.html`**：每列空白處／封面／年份點擊 → 新分頁 Spotify 正確專輯；點列內本站連結 → 仍進本站、不開 Spotify。
-2. **`albums.html`**：鍵盤 Tab 聚焦列後 Enter／空白 → 開 Spotify；聚焦在 `<a>` 上時 Enter → 遵循連結。
+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` 後行為一致。
@@ -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="../style.css">
+    <link rel="stylesheet" href="../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="../tablet.css">
 </head>

 <body>
@@ -35,7 +35,7 @@
        <section id="new" class="archive-block">
            <h2 class="section-title">啟動新篇章</h2>
            <p>回歸後的數位單曲與專輯，是現在進行式的聲紋紀錄；耳機調大聲一格，就能把「新篇章」接住。</p>
-            <p><a href="lyrics.html">聽見歌詞細節（2016 代表曲目）</a></p>
+            <p><a href="../extra/lyrics.html">聽見歌詞細節（2016 代表曲目）</a></p>
            <table class="archive-discography">
                <thead>
                    <tr>
@@ -50,31 +50,31 @@
                        data-spotify-url="https://open.spotify.com/album/1Dijv8G0wnCN8PzFZoC8bN"
                        aria-label="在 Spotify 開啟：THREE WORDS（2016 數位單曲）">
                        <td class="album-cover-cell">
-                            <img src="./img/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
+                            <img src="../img/albums/2016.jpg" width="76" height="76" alt="2016 數位單曲 封面">
                        </td>
                        <td>2016</td>
-                        <td><a href="lyrics.html">數位單曲</a></td>
-                        <td><a href="lyrics.html">Three Words (三個詞)</a></td>
+                        <td><a href="../extra/lyrics.html">數位單曲</a></td>
+                        <td><a href="../extra/lyrics.html">Three Words (三個詞)</a></td>
                    </tr>
                    <tr class="archive-row-spotify" tabindex="0"
                        data-spotify-url="https://open.spotify.com/album/5f2LzIFxljQF4FH7w3rXcQ"
                        aria-label="在 Spotify 開啟：ANOTHER LIGHT">
                        <td class="album-cover-cell">
-                            <img src="./img/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
+                            <img src="../img/albums/2017.jpg" width="76" height="76" alt="2017 ANOTHER LIGHT 封面">
                        </td>
                        <td>2017</td>
-                        <td><a href="concert.html#stage-now">ANOTHER LIGHT</a></td>
-                        <td><a href="concert.html#stage-now">Something Special / Smile</a></td>
+                        <td><a href="../concert/concert.html#stage-now">ANOTHER LIGHT</a></td>
+                        <td><a href="../concert/concert.html#stage-now">Something Special / Smile</a></td>
                    </tr>
                    <tr class="archive-row-spotify" tabindex="0"
                        data-spotify-url="https://open.spotify.com/album/7vqIRL00YfTtuO0sSAK3Uv"
                        aria-label="在 Spotify 開啟：ALL FOR YOU">
                        <td class="album-cover-cell">
-                            <img src="./img/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
+                            <img src="../img/albums/2020.jpg" width="76" height="76" alt="2020 ALL FOR YOU 封面">
                        </td>
                        <td>2020</td>
-                        <td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
-                        <td><a href="concert.html#stage-now">ALL FOR YOU</a></td>
+                        <td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
+                        <td><a href="../concert/concert.html#stage-now">ALL FOR YOU</a></td>
                    </tr>
                </tbody>
            </table>
@@ -126,8 +126,8 @@
        </a>
    </footer>

-    <script src="particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../particles.js"></script>
+    <script src="../portal-nav.js"></script>
    <script>
        (function () {
            document.querySelectorAll('tr.archive-row-spotify[data-spotify-url]').forEach(function (row) {
@@ -12,7 +12,7 @@ body {
    width: 100%;
    height: 100vh;
    min-height: 100dvh;
-    background-image: url('img/header.jpg');
+    background-image: url('../img/header.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 108%;
@@ -6,9 +6,9 @@
    <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="../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="../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="img/concert/2016.jpg" alt="">
+                <img src="../img/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="img/concert/2017.jpg" alt="">
+                <img src="../img/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="img/concert/2018.jpg" alt="">
+            <img src="../img/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="img/concert/2020.jpg" alt="">
+            <img src="../img/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="../portal-nav.js"></script>
 </body>

 </html>
@@ -6,11 +6,11 @@

 ## 1. 必做：把頁面掛進導覽 HTML

-在 **`PORTAL_NAV_INNER_HTML`**（約第 123 行起）裡加入連結：
+在 **`buildPortalNavInnerHTML`**（`portal-nav.js`）裡維護連結：

 - 依資訊架構放在對應的 **`<li>`** 底下；需要子選單時用 **`portal-submenu`**。
- `href` 使用與其他頁一致的**相對路徑**（例如 `newpage.html`、`index.html#section`）。
- Logo 列不要動：`<a class="logo" href="index.html">…</a>`。
+- `href` 使用**站根相對路徑**（腳本會依當前頁深度加上前綴 `rp`）：例如 `` `${rp}jiwon/jiwon.html` ``、`` `${rp}index.html#section` ``。
+- Logo 列：`` `${rp}index.html` `` 與 `` `${rp}img/logov.svg` ``。

 新增或調整完後，所有帶 **`data-portal-nav`** 的 `<nav class="portal-nav">` 都會在載入腳本時被注入同一份 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="../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="../tablet.css">

 </head>
 <body>
@@ -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="../style.css">
    <link rel="stylesheet" href="lyrics.css">
-    <link rel="stylesheet" href="tablet.css">
+    <link rel="stylesheet" href="../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="../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="../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="img/minister/image_3c1739.jpg" alt="手作鴨鴨置物籃" width="1040" height="780" loading="lazy">
+                    <img src="../img/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="img/minister/image_3c13d7.jpg" alt="手繪應援板與勾針作品" width="1040" height="780" loading="lazy">
+                    <img src="../img/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="img/minister/image_3bb254.jpg" alt="台灣小黃手幅" width="1040" height="780" loading="lazy">
+                    <img src="../img/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="img/minister/image_3bab17.jpg" alt="手繪聖誕卡片" width="1040" height="780" loading="lazy">
+                    <img src="../img/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="img/minister/image_3ba74f.jpg" alt="新年紅包活動" width="1040" height="780" loading="lazy">
+                    <img src="../img/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="img/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
-                    <img src="img/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3baed1.jpg" alt="鋼筆墨水與玻璃杯" width="1040" height="780" loading="lazy">
+                    <img src="../img/minister/image_3c2299.jpg" alt="手寫記錄初心" width="1040" height="780" loading="lazy">
                </figure>
            </article>

@@ -113,7 +113,7 @@
        </section>

        <p class="minister-back">
-            <a href="index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
+            <a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
        </p>
    </main>

@@ -124,8 +124,8 @@
        </a>
    </footer>

-    <script src="particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../particles.js"></script>
+    <script src="../portal-nav.js"></script>
 </body>

 </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="../style.css">
+    <link rel="stylesheet" href="../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="../tablet.css">
 </head>

 <body class="home-page minister-page">
@@ -225,7 +225,7 @@
        </section>

        <div class="landing-actions">
-            <a href="index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
+            <a href="../index.html#mission" class="btn">回到首頁 · 成立的初衷</a>
        </div>
    </div>

@@ -236,8 +236,8 @@
        </a>
    </footer>

-    <script src="particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../particles.js"></script>
+    <script src="../portal-nav.js"></script>
 </body>

 </html>
@@ -1,218 +1,221 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-
-<head>
-    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
-</head>
-
-<body class="site-guide-page">
-    <header class="map-archive-header">
-        <div class="header-inner">
-            <h1 class="main-title">全站導覽</h1>
-            <div class="subtitle-wrap">
-                <span class="sub-title">SITE MAP · 頁面索引</span>
-            </div>
-        </div>
-    </header>
-
-    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
-
-    <canvas id="particles"></canvas>
-
-    <main class="content-container site-guide-main">
-        <p class="site-guide-lead">
-            以下為本專案目前所有 HTML 頁面：每張卡片含<span class="mark_b">連結</span>、瀏覽器分頁上的<span class="mark_b">標題</span>（<code>&lt;title&gt;</code>）、以及主要<span class="mark_b">區塊／錨點</span>，方便你開發或簡報時一鍵跳轉。
-            <span class="mark_b">此頁未放入全站導覽列</span>，僅供你自行書籤或輸入網址（例如 <code>site-guide.html</code>）開啟。
-        </p>
-
-        <section class="site-guide-group" aria-labelledby="sg-home">
-            <h2 class="section-title" id="sg-home">首頁與入口</h2>
-            <div class="site-guide-grid">
-                <article class="site-guide-card">
-                    <h3><a href="index.html">index.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>SECHSKIES - 水晶男孩傳奇介紹</cite></p>
-                    <p class="site-guide-note">主視覺與導覽列；內文以區塊錨點分段。</p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="index.html#origin">#origin</a> — 淪陷瞬間（Hero，與導覽一致）</li>
-                        <li><a href="index.html#start">#start</a> — 好奇的開端</li>
-                        <li><a href="index.html#mission">#mission</a> — 成立的初衷</li>
-                        <li><a href="index.html#timeline">#timeline</a> — 跨時空軌跡</li>
-                        <li><a href="index.html#story">#story</a> — 傳奇的轉折</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="grok.html">grok.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩 SECHSKIES | 永恆的六顆水晶</cite></p>
-                    <p class="site-guide-note">單頁多區塊版型（實驗／簡報用）。</p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="grok.html#story">#story</a></li>
-                        <li><a href="grok.html#members">#members</a></li>
-                        <li><a href="grok.html#discography">#discography</a></li>
-                        <li><a href="grok.html#now">#now</a></li>
-                    </ul>
-                </article>
-            </div>
-        </section>
-
-        <section class="site-guide-group site-guide-group--ssg2" aria-labelledby="sg-ssg2">
-            <h2 class="section-title" id="sg-ssg2">無限挑戰 · 六六歌 2</h2>
-            <div class="site-guide-grid">
-                <article class="site-guide-card site-guide-card--totoga2">
-                    <h3><a href="totoga2.html">totoga2.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite></p>
-                    <p class="site-guide-note">單一入口：影片三集、FlipHTML5 電子書、傳奇的轉折時間軸、紀實長文八章（可切網漫／分頁）。</p>
-
-                    <div class="site-guide-totoga2-panel">
-                        <p class="site-guide-kicker">怎麼開</p>
-                        <ul class="site-guide-modes site-guide-modes--totoga2">
-                            <li><a href="totoga2.html">影片模式</a> — 預設開啟（三集 Bilibili）。</li>
-                            <li><a href="totoga2.html#ebook">電子書模式</a> — 進頁即切到 FlipHTML5 全螢幕。</li>
-                            <li><a href="totoga2.html#challenge">紀實長文</a> — 自「無限挑戰」章進入；亦可從下方任一章捷徑直達。</li>
-                        </ul>
-                    </div>
-
-                    <div class="site-guide-totoga2-panel">
-                        <p class="site-guide-kicker">長文章節捷徑</p>
-                        <nav class="site-guide-chapter-nav" aria-label="totoga2 紀實長文章節">
-                            <a href="totoga2.html#challenge">無限挑戰</a>
-                            <a href="totoga2.html#ssg2">六六歌第二季</a>
-                            <a href="totoga2.html#sechskies-profile">水晶男孩</a>
-                            <a href="totoga2.html#gather">召集</a>
-                            <a href="totoga2.html#negotiate">正式交涉</a>
-                            <a href="totoga2.html#variables">變數</a>
-                            <a href="totoga2.html#surprise">驚喜</a>
-                            <a href="totoga2.html#final-stage">登場</a>
-                        </nav>
-                    </div>
-
-                    <p class="site-guide-fine-print">舊檔 <code>ssg2-ebook.html</code>、<code>chronicle.html</code> 已併入 <a href="totoga2.html">totoga2 整合頁</a>。</p>
-                </article>
-            </div>
-        </section>
-
-        <section class="site-guide-group" aria-labelledby="sg-members">
-            <h2 class="section-title" id="sg-members">成員與紀實</h2>
-            <div class="site-guide-grid">
-                <article class="site-guide-card">
-                    <h3><a href="jiwon.html">jiwon.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
-                        <li><a href="jiwon.html#stage">#stage</a> — 隊長的氣場</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="sunghoon.html">sunghoon.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="sunghoon.html#truth">#truth</a></li>
-                        <li><a href="sunghoon.html#voice">#voice</a></li>
-                    </ul>
-                </article>
-            </div>
-        </section>
-
-        <section class="site-guide-group" aria-labelledby="sg-minister">
-            <h2 class="section-title" id="sg-minister">推廣部 · 視覺進化論</h2>
-            <div class="site-guide-grid">
-                <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>img/minister/</code>（與頁面內檔名一致）。</p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="minister.html#intro">#intro</a> — 跨越時空的開端</li>
-                        <li><a href="minister.html#slant">#slant</a> — 斜槓精神</li>
-                        <li><a href="minister.html#journey">#journey</a> — 成長時間軸</li>
-                        <li><a href="minister.html#journey-2016">#journey-2016</a> — 2016</li>
-                        <li><a href="minister.html#journey-2017">#journey-2017</a> — 2017</li>
-                        <li><a href="minister.html#journey-now">#journey-now</a> — 2018 至今</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="minister_ge.html">minister_ge.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</cite></p>
-                    <p class="site-guide-note">供 Gemini 等工具改稿用的<span class="mark_b">備份頁</span>；頂欄未開放，請由此索引或書籤開啟。</p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="minister_ge.html#intro">#intro</a> — 品牌起源</li>
-                        <li><a href="minister_ge.html#identity">#identity</a> — 斜槓精神</li>
-                        <li><a href="minister_ge.html#evolution">#evolution</a> — 進化里程</li>
-                        <li><a href="minister_ge.html#journey">#journey</a> — 推廣部進化史</li>
-                        <li><a href="minister_ge.html#training">#training</a> — 訓練營</li>
-                        <li><a href="minister_ge.html#tech-stack">#tech-stack</a> — 技術實力</li>
-                    </ul>
-                </article>
-            </div>
-        </section>
-
-        <section class="site-guide-group" aria-labelledby="sg-media">
-            <h2 class="section-title" id="sg-media">現場 · 典藏 · 地圖 · 歌詞</h2>
-            <div class="site-guide-grid">
-                <article class="site-guide-card">
-                    <h3><a href="concert.html">concert.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>SECHSKIES Concert Archive</cite></p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="concert.html#stage-now">#stage-now</a> — 永恆的重逢</li>
-                        <li><a href="concert.html#stage-past">#stage-past</a> — 燦爛的最初</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="albums.html">albums.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜黃色留聲機</cite></p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="albums.html#new">#new</a> — 啟動新篇章</li>
-                        <li><a href="albums.html#classic">#classic</a> — 輝煌全盛期</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="map.html">map.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>SECHSKIES 台灣行程地圖</cite></p>
-                    <h4>區塊錨點</h4>
-                    <ul>
-                        <li><a href="map.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
-                        <li><a href="map.html#global">#global</a> — 海外遠征</li>
-                    </ul>
-                </article>
-
-                <article class="site-guide-card">
-                    <h3><a href="lyrics.html">lyrics.html</a></h3>
-                    <p class="site-guide-meta">標題列：<cite>세 단어 (THREE WORDS) — SECHSKIES</cite></p>
-                    <p class="site-guide-note"><code>&lt;html lang="ko"&gt;</code>；歌詞＋YouTube 嵌入單頁。</p>
-                    <h4>結構</h4>
-                    <ul>
-                        <li><code>.lyrics-layout</code> — 主標＋表格雙欄</li>
-                    </ul>
-                </article>
-            </div>
-        </section>
-    </main>
-
-    <footer>
-        <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
-        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
-            Design by <span class="mark_b">Jekkinoopy Studio</span>
-        </a>
-    </footer>
-
-    <script src="particles.js"></script>
-    <script src="portal-nav.js"></script>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="../tablet.css">
+</head>
+
+<body class="site-guide-page">
+    <header class="map-archive-header">
+        <div class="header-inner">
+            <h1 class="main-title">全站導覽</h1>
+            <div class="subtitle-wrap">
+                <span class="sub-title">SITE MAP · 頁面索引</span>
+            </div>
+        </div>
+    </header>
+
+    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
+
+    <canvas id="particles"></canvas>
+
+    <main class="content-container site-guide-main">
+        <p class="site-guide-lead">
+            以下為本專案目前所有 HTML 頁面：每張卡片含<span class="mark_b">連結</span>、瀏覽器分頁上的<span
+                class="mark_b">標題</span>（<code>&lt;title&gt;</code>）、以及主要<span
+                class="mark_b">區塊／錨點</span>，方便你開發或簡報時一鍵跳轉。
+            <span class="mark_b">此頁未放入全站導覽列</span>，僅供你自行書籤或輸入網址（例如 <code>extra/site-guide.html</code>）開啟。
+        </p>
+
+        <section class="site-guide-group" aria-labelledby="sg-home">
+            <h2 class="section-title" id="sg-home">首頁與入口</h2>
+            <div class="site-guide-grid">
+                <article class="site-guide-card">
+                    <h3><a href="../index.html">index.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>SECHSKIES - 水晶男孩傳奇介紹</cite></p>
+                    <p class="site-guide-note">主視覺與導覽列；內文以區塊錨點分段。</p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="../index.html#origin">#origin</a> — 淪陷瞬間（Hero，與導覽一致）</li>
+                        <li><a href="../index.html#start">#start</a> — 好奇的開端</li>
+                        <li><a href="../index.html#mission">#mission</a> — 成立的初衷</li>
+                        <li><a href="../index.html#timeline">#timeline</a> — 跨時空軌跡</li>
+                        <li><a href="../index.html#story">#story</a> — 傳奇的轉折</li>
+                    </ul>
+                </article>
+
+                <article class="site-guide-card">
+                    <h3><a href="grok.html">grok.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩 SECHSKIES | 永恆的六顆水晶</cite></p>
+                    <p class="site-guide-note">單頁多區塊版型（實驗／簡報用）。</p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="grok.html#story">#story</a></li>
+                        <li><a href="grok.html#members">#members</a></li>
+                        <li><a href="grok.html#discography">#discography</a></li>
+                        <li><a href="grok.html#now">#now</a></li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+
+        <section class="site-guide-group site-guide-group--ssg2" aria-labelledby="sg-ssg2">
+            <h2 class="section-title" id="sg-ssg2">無限挑戰 · 六六歌 2</h2>
+            <div class="site-guide-grid">
+                <article class="site-guide-card site-guide-card--totoga2">
+                    <h3><a href="totoga2.html">totoga2.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</cite></p>
+                    <p class="site-guide-note">單一入口：影片三集、FlipHTML5 電子書、傳奇的轉折時間軸、紀實長文八章（可切網漫／分頁）。</p>
+
+                    <div class="site-guide-totoga2-panel">
+                        <p class="site-guide-kicker">怎麼開</p>
+                        <ul class="site-guide-modes site-guide-modes--totoga2">
+                            <li><a href="totoga2.html">影片模式</a> — 預設開啟（三集 Bilibili）。</li>
+                            <li><a href="totoga2.html#ebook">電子書模式</a> — 進頁即切到 FlipHTML5 全螢幕。</li>
+                            <li><a href="totoga2.html#challenge">紀實長文</a> — 自「無限挑戰」章進入；亦可從下方任一章捷徑直達。</li>
+                        </ul>
+                    </div>
+
+                    <div class="site-guide-totoga2-panel">
+                        <p class="site-guide-kicker">長文章節捷徑</p>
+                        <nav class="site-guide-chapter-nav" aria-label="totoga2 紀實長文章節">
+                            <a href="totoga2.html#challenge">無限挑戰</a>
+                            <a href="totoga2.html#ssg2">六六歌第二季</a>
+                            <a href="totoga2.html#sechskies-profile">水晶男孩</a>
+                            <a href="totoga2.html#gather">召集</a>
+                            <a href="totoga2.html#negotiate">正式交涉</a>
+                            <a href="totoga2.html#variables">變數</a>
+                            <a href="totoga2.html#surprise">驚喜</a>
+                            <a href="totoga2.html#final-stage">登場</a>
+                        </nav>
+                    </div>
+
+                    <p class="site-guide-fine-print">舊檔 <code>ssg2-ebook.html</code>、<code>chronicle.html</code> 已併入 <a
+                            href="totoga2.html">totoga2 整合頁</a>。</p>
+                </article>
+            </div>
+        </section>
+
+        <section class="site-guide-group" aria-labelledby="sg-members">
+            <h2 class="section-title" id="sg-members">成員與紀實</h2>
+            <div class="site-guide-grid">
+                <article class="site-guide-card">
+                    <h3><a href="../jiwon/jiwon.html">jiwon/jiwon.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜瘋子與天才</cite></p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="../jiwon/jiwon.html#variety">#variety</a> — 瘋狂出演中</li>
+                        <li><a href="../jiwon/jiwon.html#stage">#stage</a> — 隊長的氣場</li>
+                    </ul>
+                </article>
+
+                <article class="site-guide-card">
+                    <h3><a href="sunghoon.html">sunghoon.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="sunghoon.html#truth">#truth</a></li>
+                        <li><a href="sunghoon.html#voice">#voice</a></li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+
+        <section class="site-guide-group" aria-labelledby="sg-minister">
+            <h2 class="section-title" id="sg-minister">推廣部 · 視覺進化論</h2>
+            <div class="site-guide-grid">
+                <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>img/minister/</code>（與頁面內檔名一致）。</p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="minister.html#intro">#intro</a> — 跨越時空的開端</li>
+                        <li><a href="minister.html#slant">#slant</a> — 斜槓精神</li>
+                        <li><a href="minister.html#journey">#journey</a> — 成長時間軸</li>
+                        <li><a href="minister.html#journey-2016">#journey-2016</a> — 2016</li>
+                        <li><a href="minister.html#journey-2017">#journey-2017</a> — 2017</li>
+                        <li><a href="minister.html#journey-now">#journey-now</a> — 2018 至今</li>
+                    </ul>
+                </article>
+
+                <article class="site-guide-card">
+                    <h3><a href="minister_ge.html">minister_ge.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩推廣部｜視覺進化論：認真魔人的進化之路</cite></p>
+                    <p class="site-guide-note">供 Gemini 等工具改稿用的<span class="mark_b">備份頁</span>；頂欄未開放，請由此索引或書籤開啟。</p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="minister_ge.html#intro">#intro</a> — 品牌起源</li>
+                        <li><a href="minister_ge.html#identity">#identity</a> — 斜槓精神</li>
+                        <li><a href="minister_ge.html#evolution">#evolution</a> — 進化里程</li>
+                        <li><a href="minister_ge.html#journey">#journey</a> — 推廣部進化史</li>
+                        <li><a href="minister_ge.html#training">#training</a> — 訓練營</li>
+                        <li><a href="minister_ge.html#tech-stack">#tech-stack</a> — 技術實力</li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+
+        <section class="site-guide-group" aria-labelledby="sg-media">
+            <h2 class="section-title" id="sg-media">現場 · 典藏 · 地圖 · 歌詞</h2>
+            <div class="site-guide-grid">
+                <article class="site-guide-card">
+                    <h3><a href="../concert/concert.html">concert/concert.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>SECHSKIES Concert Archive</cite></p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="../concert/concert.html#stage-now">#stage-now</a> — 永恆的重逢</li>
+                        <li><a href="../concert/concert.html#stage-past">#stage-past</a> — 燦爛的最初</li>
+                    </ul>
+                </article>
+
+                <article class="site-guide-card">
+                    <h3><a href="../albums/albums.html">albums/albums.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>水晶男孩｜黃色留聲機</cite></p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="../albums/albums.html#new">#new</a> — 啟動新篇章</li>
+                        <li><a href="../albums/albums.html#classic">#classic</a> — 輝煌全盛期</li>
+                    </ul>
+                </article>
+
+                <article class="site-guide-card">
+                    <h3><a href="../map/map.html">map/map.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>SECHSKIES 台灣行程地圖</cite></p>
+                    <h4>區塊錨點</h4>
+                    <ul>
+                        <li><a href="../map/map.html#taipei">#taipei</a> — 台北聖地（主版面）</li>
+                        <li><a href="../map/map.html#global">#global</a> — 海外遠征</li>
+                    </ul>
+                </article>
+
+                <article class="site-guide-card">
+                    <h3><a href="lyrics.html">lyrics.html</a></h3>
+                    <p class="site-guide-meta">標題列：<cite>세 단어 (THREE WORDS) — SECHSKIES</cite></p>
+                    <p class="site-guide-note"><code>&lt;html lang="ko"&gt;</code>；歌詞＋YouTube 嵌入單頁。</p>
+                    <h4>結構</h4>
+                    <ul>
+                        <li><code>.lyrics-layout</code> — 主標＋表格雙欄</li>
+                    </ul>
+                </article>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
+        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
+            Design by <span class="mark_b">Jekkinoopy Studio</span>
+        </a>
+    </footer>
+
+    <script src="../particles.js"></script>
+    <script src="../portal-nav.js"></script>
+</body>
+
+</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="../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="../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="../portal-nav.js"></script>
+    <script src="../particles.js"></script>
 </body>

 </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="../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="../tablet.css">
 </head>

 <body class="ebook-ssg2-page totoga2-page">
@@ -179,7 +179,7 @@
    </div>

    <p class="ebook-back-link content-container">
-        <a href="index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
+        <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
        <a href="#ebook" class="btn">同頁 · 電子書全螢幕</a>
    </p>

@@ -190,8 +190,8 @@
        </a>
    </footer>

-    <script src="particles.js"></script>
-    <script src="portal-nav.js"></script>
+    <script src="../particles.js"></script>
+    <script src="../portal-nav.js"></script>
    <script src="totoga2.js"></script>
 </body>

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="../tablet.css">
+</head>
+
+<body class="chronicle-page">
+    <header class="map-archive-header">
+        <div class="header-inner">
+            <h1 class="main-title">瘋子與天才</h1>
+            <div class="subtitle-wrap">
+                <span class="sub-title">EUN JI-WON × VARIETY GRAVITY</span>
+            </div>
+        </div>
+    </header>
+
+    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
+
+    <canvas id="particles"></canvas>
+
+    <main class="content-container variety-page-main chronicle-reader">
+        <section id="variety" class="variety-block">
+            <h2 class="section-title">瘋狂出演中</h2>
+            <p class="intro-text">鏡頭一開就跑偏、台詞唸不完，卻總能把段子的節奏剪成「非他不可」——這是最容易被路人一眼看見的瘋勁，也是綜藝剪輯願意一路卡特寫給他的理由。</p>
+            <p class="intro-text">卸妝後的聊天、運動場上的暴走、對成員毫不修飾的吐槽；那些看起來像日常，其實比劇本更誇張。此區之後會補上節目清單、名場面與入坑路線，先把舞台留好。</p>
+        </section>
+        <section id="stage" class="variety-block">
+            <h2 class="section-title">隊長的氣場</h2>
+            <p class="intro-text">同樣一句話，由他說出口就變成節奏點；同樣混亂的場面，他一站出來觀眾會先笑、再安靜聽。那不是威嚴口號，而是多年在台上台下磨出來的「控場直覺」。</p>
+            <p class="intro-text">此區預留給談話、音樂、與團體互動裡的隊長切片——讓新粉先用氣場認人，再慢慢讀懂他背後的堅持。</p>
+        </section>
+    </main>
+
+    <footer>
+        <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
+        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
+            Design by <span class="mark_b">Jekkinoopy Studio</span>
+        </a>
+    </footer>
+
+    <script src="../portal-nav.js"></script>
+    <script src="../particles.js"></script>
+</body>
+
+</html>
@@ -90,7 +90,7 @@
    padding-bottom: 0;
 }

-/* albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
+/* albums/albums.html：.archive-block 已改為 <section>，沿用 style.css 的 section 卡片版型 */
 section.archive-block p {
    color: #4a4a4a;
    line-height: 1.7;
@@ -101,7 +101,7 @@ section.archive-block p:last-child {
    margin-bottom: 0;
 }

-/* albums.html：精選作品表（含封面欄） */
+/* albums/albums.html：精選作品表（含封面欄） */
 .archive-discography {
    width: 100%;
    margin-top: 1.25rem;
@@ -123,7 +123,7 @@
                <article class="story-node story-node--ebook-ssg2" data-era="2016">
                    <h3>傳奇回歸：重逢的感動合體</h3>
                    <p>透過《無限挑戰》「六六歌2」跨越16年再次重聚，引起全韓黃色氣球海再現。</p>
-                    <a href="totoga2.html#ebook" class="timeline-ebook-cta">
+                    <a href="extra/totoga2.html#ebook" class="timeline-ebook-cta">
                        <i class="fa-solid fa-hand-pointer" aria-hidden="true"></i>
                        <span>點這裡翻開《六六歌2》紀實電子書</span>
                    </a>
@@ -148,33 +148,33 @@
            </div>
            <p class="intro-text">
                像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，請開
-                <a href="totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
+                <a href="extra/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
            </p>
            <div class="story-ebook-cta">
-                <a href="totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
-                <a href="totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
+                <a href="extra/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
+                <a href="extra/totoga2.html" class="btn story-ebook-btn">六六歌2 整合專區</a>
            </div>

            <div class="merged-storyline">
                <article id="special" class="story-node" data-era="六六歌">
                    <h3>六六歌實錄</h3>
                    <p>把懸念、試探與哭點縫在同一條時間軸上；很多人第一次真正把「水晶男孩」打進搜尋框，就是從這種瘋狂的剪輯節奏開始。</p>
-                    <p><a href="totoga2.html#ssg2">對照這一段幕後敘事</a></p>
+                    <p><a href="extra/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
                </article>
                <article id="negotiate" class="story-node" data-era="交涉">
                    <h3>命運的交涉</h3>
                    <p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
-                    <p><a href="totoga2.html#negotiate">讀交涉與對話肌理</a></p>
+                    <p><a href="extra/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
                </article>
                <article id="complete" class="story-node" data-era="歸位">
                    <h3>拼圖的歸位</h3>
                    <p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
-                    <p><a href="totoga2.html#gather">從「召集」段開始補這條線</a></p>
+                    <p><a href="extra/totoga2.html#gather">從「召集」段開始補這條線</a></p>
                </article>
                <article id="past" class="story-node" data-era="最初">
                    <h3>巔峰與雨天</h3>
                    <p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
-                    <p><a href="totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
+                    <p><a href="extra/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
                </article>
            </div>
        </section>
@@ -1,51 +1,51 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-
-<head>
-    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-    <link rel="stylesheet" href="tablet.css">
-</head>
-
-<body class="chronicle-page">
-    <header class="map-archive-header">
-        <div class="header-inner">
-            <h1 class="main-title">瘋子與天才</h1>
-            <div class="subtitle-wrap">
-                <span class="sub-title">EUN JI-WON × VARIETY GRAVITY</span>
-            </div>
-        </div>
-    </header>
-
-    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
-
-    <canvas id="particles"></canvas>
-
-    <main class="content-container variety-page-main chronicle-reader">
-        <section id="variety" class="variety-block">
-            <h2 class="section-title">瘋狂出演中</h2>
-            <p class="intro-text">鏡頭一開就跑偏、台詞唸不完，卻總能把段子的節奏剪成「非他不可」——這是最容易被路人一眼看見的瘋勁，也是綜藝剪輯願意一路卡特寫給他的理由。</p>
-            <p class="intro-text">卸妝後的聊天、運動場上的暴走、對成員毫不修飾的吐槽；那些看起來像日常，其實比劇本更誇張。此區之後會補上節目清單、名場面與入坑路線，先把舞台留好。</p>
-        </section>
-        <section id="stage" class="variety-block">
-            <h2 class="section-title">隊長的氣場</h2>
-            <p class="intro-text">同樣一句話，由他說出口就變成節奏點；同樣混亂的場面，他一站出來觀眾會先笑、再安靜聽。那不是威嚴口號，而是多年在台上台下磨出來的「控場直覺」。</p>
-            <p class="intro-text">此區預留給談話、音樂、與團體互動裡的隊長切片——讓新粉先用氣場認人，再慢慢讀懂他背後的堅持。</p>
-        </section>
-    </main>
-
-    <footer>
-        <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
-        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
-            Design by <span class="mark_b">Jekkinoopy Studio</span>
-        </a>
-    </footer>
-
-    <script src="portal-nav.js"></script>
-    <script src="particles.js"></script>
-</body>
-
-</html>
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="../tablet.css">
+</head>
+
+<body class="chronicle-page">
+    <header class="map-archive-header">
+        <div class="header-inner">
+            <h1 class="main-title">瘋子與天才</h1>
+            <div class="subtitle-wrap">
+                <span class="sub-title">EUN JI-WON × VARIETY GRAVITY</span>
+            </div>
+        </div>
+    </header>
+
+    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
+
+    <canvas id="particles"></canvas>
+
+    <main class="content-container variety-page-main chronicle-reader">
+        <section id="variety" class="variety-block">
+            <h2 class="section-title">瘋狂出演中</h2>
+            <p class="intro-text">鏡頭一開就跑偏、台詞唸不完，卻總能把段子的節奏剪成「非他不可」——這是最容易被路人一眼看見的瘋勁，也是綜藝剪輯願意一路卡特寫給他的理由。</p>
+            <p class="intro-text">卸妝後的聊天、運動場上的暴走、對成員毫不修飾的吐槽；那些看起來像日常，其實比劇本更誇張。此區之後會補上節目清單、名場面與入坑路線，先把舞台留好。</p>
+        </section>
+        <section id="stage" class="variety-block">
+            <h2 class="section-title">隊長的氣場</h2>
+            <p class="intro-text">同樣一句話，由他說出口就變成節奏點；同樣混亂的場面，他一站出來觀眾會先笑、再安靜聽。那不是威嚴口號，而是多年在台上台下磨出來的「控場直覺」。</p>
+            <p class="intro-text">此區預留給談話、音樂、與團體互動裡的隊長切片——讓新粉先用氣場認人，再慢慢讀懂他背後的堅持。</p>
+        </section>
+    </main>
+
+    <footer>
+        <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
+        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank">
+            Design by <span class="mark_b">Jekkinoopy Studio</span>
+        </a>
+    </footer>
+
+    <script src="../portal-nav.js"></script>
+    <script src="../particles.js"></script>
+</body>
+
+</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="../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="../tablet.css">
 </head>

 <body class="map-page">
@@ -508,7 +508,7 @@
 </footer>

 <script src="map.js"></script>
-<script src="portal-nav.js"></script>
+<script src="../portal-nav.js"></script>

 </body>

@@ -1,240 +1,271 @@
-(() => {
-    /**
-     * ── 導覽「尚未開放」連結 ─────────────────────────────────────────
-     * ① 整個檔案先關：COMING_SOON_PAGES（目前已含志源頁／演唱會／典藏／地圖／視覺進化論等）。
-     * ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
-     * ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
-     *    浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
-     * 要調整詞句：改 NAV_SOON_PHRASES 即可。
-     */
-    const NAV_SOON_PHRASES = ["奇蹟醞釀中", // 頁面準備中，呼應黃色奇蹟的誕生
-        "感動載入中", // 資料讀取中，連結入坑時的悸動
-        "初心校準中", // 結構調整中，呼應 LOGO 的六人設計核心
-        "黃海漫延中", // 視覺填充中，發想自黃色海洋填滿漆黑的過程
-        "傳奇編排中", // 內容整理中，記錄 1999 年榮譽與歷史軌跡
-        "夢想航行中", // 未來規劃中，期待水晶男孩的下一個十年
-    ];
-
-    function pickSoonPhrase() {
-        return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
-    }
-
-    /** 每次互動重抽，讀者沿導覽滑動時會交錯看到不同字樣 */
-    function rollSoonLabel(link) {
-        const p = pickSoonPhrase();
-        link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
-        link.setAttribute("title", p);
-    }
-
-    const COMING_SOON_PAGES = new Set([
-        "jiwon.html",
-        "concert.html",
-        "albums.html",
-        "map.html",
-        "minister.html",
-        "minister_ge.html",
-    ]);
-
-    /** 目前先開：淪陷瞬間 #origin + 子選單三項 #start / #mission / #timeline */
-    const INDEX_NAV_OPEN_HASHES = new Set(["#origin", "#start", "#mission", "#timeline"]);
-
-    function normalizePageKey(href) {
-        if (!href || href === "#") return "";
-        const core = href.split("#")[0].split("?")[0];
-        const parts = core.split("/").filter(Boolean);
-        const last = parts.length ? parts[parts.length - 1] : "";
-        return last.toLowerCase();
-    }
-
-    /** 比照原邏輯：取 href 前半與網址列檔名比對 */
-    function hrefMatchesCurrentPage(href, currentPage) {
-        if (!href || href === "#") return false;
-        const [filePart] = href.split("#");
-        const base = filePart.split("/").pop();
-        return base === currentPage;
-    }
-
-    /** 取得 #fragment（含 #）；若無錨點則回傳空字串 */
-    function anchorFromHref(href) {
-        const i = href.indexOf("#");
-        if (i < 0) return "";
-        return href.slice(i).split("?")[0];
-    }
-
-    function markLinkComingSoon(link, originalHref) {
-        const visibleTitle = link.textContent.trim();
-        link.setAttribute("data-coming-soon", "true");
-        link.setAttribute("aria-disabled", "true");
-        link.setAttribute("aria-label", `${visibleTitle}，尚無開放`);
-
-        const onSoonInteract = () => rollSoonLabel(link);
-        link.addEventListener("pointerenter", onSoonInteract);
-        link.addEventListener("focus", onSoonInteract);
-        link.addEventListener("touchstart", onSoonInteract, { passive: true });
-
-        if (!link.dataset.originalHref) {
-            link.dataset.originalHref = originalHref;
-        }
-
-        link.setAttribute("href", "#");
-    }
-
-    function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
-        if (pageKeysSoon.has(pageKey)) {
-            return true;
-        }
-        if (pageKey === "index.html") {
-            const frag = anchorFromHref(href);
-            return !INDEX_NAV_OPEN_HASHES.has(frag);
-        }
-        return false;
-    }
-
-    /** 將籌備中規則套用至單一導覽列 */
-    function applyComingSoonToNav(nav) {
-        const pageKeysSoon = new Set(
-            [...COMING_SOON_PAGES].map((p) => normalizePageKey(String(p))).filter(Boolean),
-        );
-
-        nav.querySelectorAll('a[href]').forEach((link) => {
-            if (link.classList.contains("logo")) return;
-
-            const href = link.getAttribute("href");
-            if (!href || href === "#") return;
-
-            const pageKey = normalizePageKey(href);
-            if (!pageKey) return;
-
-            if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
-
-            markLinkComingSoon(link, href);
-        });
-
-        nav.querySelectorAll(":scope > ul > li").forEach((li) => {
-            const trigger = li.querySelector(":scope > a[href]");
-            if (!trigger || trigger.classList.contains("logo")) return;
-            if (trigger.getAttribute("data-coming-soon") === "true") {
-                li.classList.add("coming-soon");
-            }
-        });
-    }
-
-    /** 全站導覽 HTML — 僅修改此字串即可同步所有頁面 */
-    const PORTAL_NAV_INNER_HTML = `
-<a class="logo" href="index.html"><img src="./img/logov.svg" alt="SECHSKIES Logo"></a>
-<ul>
-    <li><a href="index.html#origin">淪陷瞬間</a>
-        <ul class="portal-submenu">
-            <li><a href="index.html#start">好奇的開端</a></li>
-            <li><a href="index.html#mission">成立的初衷</a></li>
-            <li><a href="index.html#timeline">跨時空軌跡</a></li>
-            <li><a href="index.html#story">傳奇的轉折</a></li>
-        </ul>
-    </li>
-    <li><a href="jiwon.html">瘋子與天才</a>
-        <ul class="portal-submenu">
-            <li><a href="jiwon.html#variety">瘋狂出演中</a></li>
-            <li><a href="jiwon.html#stage">隊長的氣場</a></li>
-        </ul>
-    </li>
-    <li><a href="concert.html">現場的震撼</a>
-        <ul class="portal-submenu">
-            <li><a href="concert.html#stage-now">永恆的重逢</a></li>
-            <li><a href="concert.html#stage-past">燦爛的最初</a></li>
-        </ul>
-    </li>
-    <li><a href="albums.html">黃色留聲機</a>
-        <ul class="portal-submenu">
-            <li><a href="albums.html#new">啟動新篇章</a></li>
-            <li><a href="albums.html#classic">輝煌全盛期</a></li>
-        </ul>
-    </li>
-    <li><a href="map.html">聖地巡禮</a>
-        <ul class="portal-submenu">
-            <li><a href="map.html#taipei">台北聖地</a></li>
-            <li><a href="map.html#global">海外遠征</a></li>
-        </ul>
-    </li>
-</ul>
-`.trim();
-
-    document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
-        nav.innerHTML = PORTAL_NAV_INNER_HTML;
-        applyComingSoonToNav(nav);
-    });
-
-    const navs = Array.from(document.querySelectorAll(".portal-nav"));
-    if (!navs.length) return;
-
-    const currentPage = window.location.pathname.split("/").pop() || "index.html";
-
-    navs.forEach((nav) => {
-        const items = Array.from(nav.querySelectorAll("li"));
-        const soonLinks = Array.from(nav.querySelectorAll('a[data-coming-soon="true"]'));
-
-        const blockNavigation = (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-        };
-        soonLinks.forEach((link) => {
-            link.addEventListener("click", blockNavigation);
-            link.addEventListener("auxclick", blockNavigation);
-        });
-
-        items.forEach((item) => {
-            const trigger = item.querySelector(":scope > a");
-            const submenu = item.querySelector(":scope > .portal-submenu");
-            if (!trigger || !submenu) return;
-
-            let closeTimer = null;
-
-            const openItem = () => {
-                if (closeTimer) window.clearTimeout(closeTimer);
-                items.forEach((other) => {
-                    if (other !== item) other.classList.remove("open");
-                });
-                item.classList.add("open");
-            };
-
-            const scheduleClose = () => {
-                closeTimer = window.setTimeout(() => item.classList.remove("open"), 180);
-            };
-
-            item.addEventListener("mouseenter", openItem);
-            item.addEventListener("mouseleave", scheduleClose);
-            trigger.addEventListener("focus", openItem);
-
-            trigger.addEventListener("click", (event) => {
-                const isSoon = trigger.getAttribute("data-coming-soon") === "true";
-
-                if (window.innerWidth <= 1024) {
-                    event.preventDefault();
-                    if (!isSoon && !item.classList.contains("coming-soon")) {
-                        item.classList.toggle("open");
-                    }
-                    return;
-                }
-
-                if (isSoon) {
-                    event.preventDefault();
-                }
-            });
-        });
-
-        document.addEventListener("click", (event) => {
-            if (!nav.contains(event.target)) {
-                items.forEach((item) => item.classList.remove("open"));
-            }
-        });
-
-        const topLevelLinks = Array.from(nav.querySelectorAll(":scope > ul > li > a[href]"));
-        topLevelLinks.forEach((link) => {
-            const fallback = link.getAttribute("href");
-            const source = link.dataset.originalHref || fallback;
-            if (!source || source === "#") return;
-            if (hrefMatchesCurrentPage(source, currentPage)) {
-                link.classList.add("nav-current");
-            }
-        });
-    });
-})();
+(() => {
+    /**
+     * ── 導覽「尚未開放」連結 ─────────────────────────────────────────
+     * ① 整個檔案先關：COMING_SOON_PAGES（目前已含志源頁／演唱會／典藏／地圖／視覺進化論等）。
+     * ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
+     * ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
+     *    浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
+     * 要調整詞句：改 NAV_SOON_PHRASES 即可。
+     */
+    const NAV_SOON_PHRASES = ["奇蹟醞釀中", // 頁面準備中，呼應黃色奇蹟的誕生
+        "感動載入中", // 資料讀取中，連結入坑時的悸動
+        "初心校準中", // 結構調整中，呼應 LOGO 的六人設計核心
+        "黃海漫延中", // 視覺填充中，發想自黃色海洋填滿漆黑的過程
+        "傳奇編排中", // 內容整理中，記錄 1999 年榮譽與歷史軌跡
+        "夢想航行中", // 未來規劃中，期待水晶男孩的下一個十年
+    ];
+
+    function pickSoonPhrase() {
+        return NAV_SOON_PHRASES[Math.floor(Math.random() * NAV_SOON_PHRASES.length)];
+    }
+
+    /** 每次互動重抽，讀者沿導覽滑動時會交錯看到不同字樣 */
+    function rollSoonLabel(link) {
+        const p = pickSoonPhrase();
+        link.style.setProperty("--portal-nav-soon-msg", JSON.stringify(p));
+        link.setAttribute("title", p);
+    }
+
+    const COMING_SOON_PAGES = new Set([
+        "jiwon.html",
+        "concert.html",
+        "albums.html",
+        "map.html",
+        "minister.html",
+        "minister_ge.html",
+    ]);
+
+    /** 目前先開：淪陷瞬間 #origin + 子選單三項 #start / #mission / #timeline */
+    const INDEX_NAV_OPEN_HASHES = new Set(["#origin", "#start", "#mission", "#timeline"]);
+
+    function normalizePageKey(href) {
+        if (!href || href === "#") return "";
+        const core = href.split("#")[0].split("?")[0];
+        const parts = core.split("/").filter(Boolean);
+        const last = parts.length ? parts[parts.length - 1] : "";
+        return last.toLowerCase();
+    }
+
+    /** 比照原邏輯：取 href 前半與網址列檔名比對 */
+    function hrefMatchesCurrentPage(href, currentPage) {
+        if (!href || href === "#") return false;
+        const [filePart] = href.split("#");
+        const base = filePart.split("/").pop();
+        return base === currentPage;
+    }
+
+    /** 取得 #fragment（含 #）；若無錨點則回傳空字串 */
+    function anchorFromHref(href) {
+        const i = href.indexOf("#");
+        if (i < 0) return "";
+        return href.slice(i).split("?")[0];
+    }
+
+    function markLinkComingSoon(link, originalHref) {
+        const visibleTitle = link.textContent.trim();
+        link.setAttribute("data-coming-soon", "true");
+        link.setAttribute("aria-disabled", "true");
+        link.setAttribute("aria-label", `${visibleTitle}，尚無開放`);
+
+        const onSoonInteract = () => rollSoonLabel(link);
+        link.addEventListener("pointerenter", onSoonInteract);
+        link.addEventListener("focus", onSoonInteract);
+        link.addEventListener("touchstart", onSoonInteract, { passive: true });
+
+        if (!link.dataset.originalHref) {
+            link.dataset.originalHref = originalHref;
+        }
+
+        link.setAttribute("href", "#");
+    }
+
+    function linkShouldBeComingSoon(href, pageKey, pageKeysSoon) {
+        if (pageKeysSoon.has(pageKey)) {
+            return true;
+        }
+        if (pageKey === "index.html") {
+            const frag = anchorFromHref(href);
+            return !INDEX_NAV_OPEN_HASHES.has(frag);
+        }
+        return false;
+    }
+
+    /** 將籌備中規則套用至單一導覽列 */
+    function applyComingSoonToNav(nav) {
+        const pageKeysSoon = new Set(
+            [...COMING_SOON_PAGES].map((p) => normalizePageKey(String(p))).filter(Boolean),
+        );
+
+        nav.querySelectorAll('a[href]').forEach((link) => {
+            if (link.classList.contains("logo")) return;
+
+            const href = link.getAttribute("href");
+            if (!href || href === "#") return;
+
+            const pageKey = normalizePageKey(href);
+            if (!pageKey) return;
+
+            if (!linkShouldBeComingSoon(href, pageKey, pageKeysSoon)) return;
+
+            markLinkComingSoon(link, href);
+        });
+
+        nav.querySelectorAll(":scope > ul > li").forEach((li) => {
+            const trigger = li.querySelector(":scope > a[href]");
+            if (!trigger || trigger.classList.contains("logo")) return;
+            if (trigger.getAttribute("data-coming-soon") === "true") {
+                li.classList.add("coming-soon");
+            }
+        });
+    }
+
+    /**
+     * 站根與 `portal-nav.js` 同層；依腳本路徑與當前頁路徑計算回到站根的相對前綴（如 `../`）。
+     * 子資料夾內頁面之導覽連結必須帶此前綴，否則 `./img`、`index.html` 會錯層。
+     */
+    function portalNavRootPrefix() {
+        const el =
+            document.currentScript ||
+            Array.from(document.querySelectorAll("script[src*='portal-nav.js']")).find((s) => s.src);
+        if (!el?.src) return "./";
+        try {
+            const scriptPathname = new URL(el.src, window.location.href).pathname;
+            const scriptDirSegs = scriptPathname.split("/").filter(Boolean);
+            scriptDirSegs.pop();
+            const pageDirSegs = window.location.pathname.split("/").filter(Boolean);
+            pageDirSegs.pop();
+            let i = 0;
+            const a = scriptDirSegs;
+            const b = pageDirSegs;
+            while (i < a.length && i < b.length && a[i] === b[i]) {
+                i += 1;
+            }
+            const ups = b.length - i;
+            return ups > 0 ? "../".repeat(ups) : "./";
+        } catch {
+            return "./";
+        }
+    }
+
+    /** 全站導覽 HTML — `rp` 為站根相對前綴；僅修改此模板即可同步所有頁面 */
+    function buildPortalNavInnerHTML(rp) {
+        return `
+<a class="logo" href="${rp}index.html"><img src="${rp}img/logov.svg" alt="SECHSKIES Logo"></a>
+<ul>
+    <li><a href="${rp}index.html#origin">淪陷瞬間</a>
+        <ul class="portal-submenu">
+            <li><a href="${rp}index.html#start">好奇的開端</a></li>
+            <li><a href="${rp}index.html#mission">成立的初衷</a></li>
+            <li><a href="${rp}index.html#timeline">跨時空軌跡</a></li>
+            <li><a href="${rp}index.html#story">傳奇的轉折</a></li>
+        </ul>
+    </li>
+    <li><a href="${rp}jiwon/jiwon.html">瘋子與天才</a>
+        <ul class="portal-submenu">
+            <li><a href="${rp}jiwon/jiwon.html#variety">瘋狂出演中</a></li>
+            <li><a href="${rp}jiwon/jiwon.html#stage">隊長的氣場</a></li>
+        </ul>
+    </li>
+    <li><a href="${rp}concert/concert.html">現場的震撼</a>
+        <ul class="portal-submenu">
+            <li><a href="${rp}concert/concert.html#stage-now">永恆的重逢</a></li>
+            <li><a href="${rp}concert/concert.html#stage-past">燦爛的最初</a></li>
+        </ul>
+    </li>
+    <li><a href="${rp}albums/albums.html">黃色留聲機</a>
+        <ul class="portal-submenu">
+            <li><a href="${rp}albums/albums.html#new">啟動新篇章</a></li>
+            <li><a href="${rp}albums/albums.html#classic">輝煌全盛期</a></li>
+        </ul>
+    </li>
+    <li><a href="${rp}map/map.html">聖地巡禮</a>
+        <ul class="portal-submenu">
+            <li><a href="${rp}map/map.html#taipei">台北聖地</a></li>
+            <li><a href="${rp}map/map.html#global">海外遠征</a></li>
+        </ul>
+    </li>
+</ul>
+`.trim();
+    }
+
+    const rootPrefix = portalNavRootPrefix();
+    document.querySelectorAll("nav.portal-nav[data-portal-nav]").forEach((nav) => {
+        nav.innerHTML = buildPortalNavInnerHTML(rootPrefix);
+        applyComingSoonToNav(nav);
+    });
+
+    const navs = Array.from(document.querySelectorAll(".portal-nav"));
+    if (!navs.length) return;
+
+    const currentPage = window.location.pathname.split("/").pop() || "index.html";
+
+    navs.forEach((nav) => {
+        const items = Array.from(nav.querySelectorAll("li"));
+        const soonLinks = Array.from(nav.querySelectorAll('a[data-coming-soon="true"]'));
+
+        const blockNavigation = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        soonLinks.forEach((link) => {
+            link.addEventListener("click", blockNavigation);
+            link.addEventListener("auxclick", blockNavigation);
+        });
+
+        items.forEach((item) => {
+            const trigger = item.querySelector(":scope > a");
+            const submenu = item.querySelector(":scope > .portal-submenu");
+            if (!trigger || !submenu) return;
+
+            let closeTimer = null;
+
+            const openItem = () => {
+                if (closeTimer) window.clearTimeout(closeTimer);
+                items.forEach((other) => {
+                    if (other !== item) other.classList.remove("open");
+                });
+                item.classList.add("open");
+            };
+
+            const scheduleClose = () => {
+                closeTimer = window.setTimeout(() => item.classList.remove("open"), 180);
+            };
+
+            item.addEventListener("mouseenter", openItem);
+            item.addEventListener("mouseleave", scheduleClose);
+            trigger.addEventListener("focus", openItem);
+
+            trigger.addEventListener("click", (event) => {
+                const isSoon = trigger.getAttribute("data-coming-soon") === "true";
+
+                if (window.innerWidth <= 1024) {
+                    event.preventDefault();
+                    if (!isSoon && !item.classList.contains("coming-soon")) {
+                        item.classList.toggle("open");
+                    }
+                    return;
+                }
+
+                if (isSoon) {
+                    event.preventDefault();
+                }
+            });
+        });
+
+        document.addEventListener("click", (event) => {
+            if (!nav.contains(event.target)) {
+                items.forEach((item) => item.classList.remove("open"));
+            }
+        });
+
+        const topLevelLinks = Array.from(nav.querySelectorAll(":scope > ul > li > a[href]"));
+        topLevelLinks.forEach((link) => {
+            const fallback = link.getAttribute("href");
+            const source = link.dataset.originalHref || fallback;
+            if (!source || source === "#") return;
+            if (hrefMatchesCurrentPage(source, currentPage)) {
+                link.classList.add("nav-current");
+            }
+        });
+    });
+})();