fix 六六歌模式規劃

2026-05-15 02:47:26 +08:00
parent 0e64e5d571
commit 2d1497c045
20 changed files with 263 additions and 179 deletions
@@ -20,7 +20,7 @@ alwaysApply: true

 1. **未經站主逐句同意**：不得從 `COMING_SOON_PAGES` **刪**檔名、不得擴充 `INDEX_NAV_OPEN_HASHES`、不得在 `buildPortalNavInnerHTML` **新增**可點項、不得把籌備中改成真 `href`、不得刪站主已同意列入頂欄的項。
 2. **「檔案在 repo」≠「可開放導覽」**；不得自行推論。
-3. **`extra/totoga2.html`（整合頁）**、**`variety/variety.html`**：站主**沒有明講對外開放**時，檔名**必須**留在 `COMING_SOON_PAGES`（訪客頂欄不可點進）。要開放時**只**能等站主說了再從 Set 移除。
+3. **`fallen/totoga2.html`（整合頁）**、**`variety/variety.html`**：站主**沒有明講對外開放**時，檔名**必須**留在 `COMING_SOON_PAGES`（訪客頂欄不可點進）。要開放時**只**能等站主說了再從 Set 移除。
 4. **「刪除／拿掉／不要了」**：若未寫明是**單一檔案**、**頂欄某一列**、**整段子選單**還是**整個資料夾**，**一律先問站主**，禁止自行擴大刪除範圍。
 5. **不確定**是否開放、連哪、是否例外：**先問站主再改**，不要猜。
 6. 站主說要刪的是 **`某頁#錨點`**（頁內區塊）時：先改該頁 DOM，再修死錨連結；**不要**只動導覽、也不要把「刪區塊」擴成刪頂欄整段。細節見 **`user-scope-and-nav.mdc`**（§ 頁面錨點刪除）。
@@ -93,7 +93,7 @@ alwaysApply: true
  <script src="assets/js/portal-nav.js"></script>
  ```

-  內頁（例如 `extra/`、`variety/` 下）請用相對站根深度，例如：
+  內頁（例如 `extra/`、`fallen/`、`member/`、`yellow-note/`、`variety/` 下）請用相對站根深度，例如：

  ```html
  <script src="../assets/js/portal-nav.js"></script>
@@ -133,6 +133,6 @@ alwaysApply: true
 | `.cursor/rules/user-scope-and-nav.mdc` | 意圖與導覽開放（與本規則搭配） |
 | `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍與共用 CSS 邊界 |
 | `docs/CHANGESET-review.md` | 歷次變更檢查清單筆記（非程式真值來源） |
-| `docs/sql/sql_plan.md` | SQL 練習／筆記 |
+| `docs/sql/` | SQL 練習／筆記（`sql_plan.md`、`.sql` 腳本與匯出） |

 （導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。）
@@ -25,9 +25,9 @@ alwaysApply: true
 - **不得**因為「內容已搬到某頁」就自行推論「導覽也應該開放」——導覽是否開放**只聽使用者口述**。
 - 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `assets/js/portal-nav.js` 的開放狀態與連結目標。

-## 「傳奇的轉折」與 `extra/totoga2.html`（特別記牢）
+## 「傳奇的轉折」與 `fallen/totoga2.html`（特別記牢）

- 頂欄模板裡「傳奇的轉折」連到 **`extra/totoga2.html`**（見 `buildPortalNavInnerHTML`）。
+- 頂欄模板裡「傳奇的轉折」連到 **`fallen/totoga2.html`**（見 `buildPortalNavInnerHTML`）。
 - 使用者**沒有明講對外開放整合頁**時：`totoga2.html` **必須**在 **`COMING_SOON_PAGES`** 裡 → 訪客頂欄該項為籌備中、**不可點進**。
 - **禁止**在未獲同意下：從 Set **移除** `totoga2.html`、或改成連到其他頁並當成已開放。
 - 首頁錨點另依 **`INDEX_NAV_OPEN_HASHES`**；與「傳奇的轉折／totoga2」分開判斷。
@@ -217,6 +217,11 @@ img {
    color: #333;
 }

+/* 暫隱：九十年代「燦爛的最初」整區；要對外顯示時刪除此規則即可 */
+#stage-past {
+    display: none !important;
+}
+
 /* 燦爛的最初：小節標（對齊隔壁「一張大卡＋多個場次列」） */
 #stage-past .stage-past-era {
    margin-top: 2.25rem;
@@ -2148,54 +2148,7 @@ body.ebook-ssg2-page .ebook-back-link {
    margin: 0 0 2.5rem;
 }

-/* totoga2.html — 六六歌2 整合（影片／電子書／長文＋網漫／分頁） */
-body.totoga2-page .map-archive-header .main-content-title {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.35rem;
-    margin-top: clamp(12px, 2.5vw, 22px);
-}
-
-body.totoga2-page .map-archive-header .highlight-text {
-    font-size: clamp(1.45rem, 4vw, 2.65rem);
-    font-weight: 800;
-    color: #fff;
-    letter-spacing: 0.1em;
-    line-height: 1.2;
-    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
-}
-
-body.totoga2-page .map-archive-header .eng-title {
-    font-size: clamp(0.72rem, 2vw, 0.95rem);
-    letter-spacing: 0.26em;
-    color: var(--yellow);
-    font-weight: 700;
-    text-transform: uppercase;
-}
-
-body.totoga2-page .map-archive-header .subtitle-wrap {
-    flex-direction: column;
-    gap: 0.4rem;
-    margin-top: clamp(14px, 2.5vw, 24px);
-}
-
-body.totoga2-page .map-archive-header .subtitle-wrap::before,
-body.totoga2-page .map-archive-header .subtitle-wrap::after {
-    display: none;
-}
-
-body.totoga2-page .map-archive-header .sub-title {
-    margin: 0;
-}
-
-body.totoga2-page .map-archive-header .event-date {
-    display: block;
-    font-size: 0.72rem;
-    letter-spacing: 0.22em;
-    color: #c8c8c8;
-    font-weight: 600;
-}
+/* totoga2 整合／複本頁：頂部結構與其他 map-archive-header 內頁一致（僅 main-title + subtitle-wrap） */

 body.totoga2-page .totoga2-hub-controls {
    max-width: 1200px;
@@ -2206,23 +2159,106 @@ body.totoga2-page .totoga2-hub-controls {
    flex-wrap: wrap;
 }

-body.totoga2-page .bilivideo-stack {
+body.totoga2-page.totoga2-video-copy-page .map-archive-header {
+    height: auto;
+    min-height: 0;
+    padding: clamp(1rem, 2.8vw, 1.75rem) 20px clamp(1.1rem, 3vw, 1.9rem);
+    background-size: cover;
+}
+
+body.totoga2-page.totoga2-video-copy-page .ebook-intro.section {
+    margin-bottom: 1.5rem;
+}
+
+body.totoga2-page.totoga2-video-copy-page .ebook-intro.section .bilivideo-tabs {
+    margin-top: 0.5rem;
+}
+
+body.totoga2-page.totoga2-video-copy-page {
+    overflow-x: hidden;
+}
+
+/* 節目影片複本：三集＝同一殼內分頁；非使用中 panel 不占版面（避免被 flex display 蓋掉 hidden） */
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs {
+    max-width: 960px;
+    margin: 0 auto;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
+    border-radius: 14px;
+    overflow: hidden;
+    border: 1px solid rgba(255, 204, 0, 0.38);
+    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
+    background: #070707;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0;
+    margin: 0;
+    padding: 0;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    border: none;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0;
+    cursor: pointer;
+    font: inherit;
+    font-weight: 700;
+    font-size: clamp(0.88rem, 2.1vw, 1rem);
+    text-align: center;
+    color: #e8e4dc;
+    background: #151515;
+    letter-spacing: 0.12em;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:last-child {
+    border-right: none;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:hover {
+    background: #1f1f1f;
+    color: #fff;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab:focus-visible {
+    outline: 2px solid #ffcc00;
+    outline-offset: -2px;
+    position: relative;
+    z-index: 1;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__tab--active {
+    background: linear-gradient(180deg, #ffe566 0%, #ffcc00 100%);
+    color: #1a1406;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__panels {
+    overflow: hidden;
+    background: #000;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__panel {
    display: flex;
    flex-direction: column;
-    gap: 2rem;
-    margin-bottom: 2rem;
+    align-items: stretch;
 }

-body.totoga2-page .bilivideo-block h3 {
-    margin: 0 0 0.5rem;
-    font-size: 1.1rem;
-    color: #2a2a2a;
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__panel[hidden] {
+    display: none !important;
 }

-body.totoga2-page .bilivideo-placeholder-note {
-    font-size: 0.88rem;
-    color: #666;
-    margin: 0 0 0.5rem;
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-frame {
+    margin: 0;
+    max-width: none;
+    width: 100%;
+    border-radius: 0;
+    border: none;
+    box-shadow: none;
 }

 body.totoga2-page .bilivideo-frame {
@@ -2293,7 +2329,7 @@ body.totoga2-page .ebook-back-link {
    gap: 12px;
 }

-/* extra/totoga2 copy.html — 複本改為三獨立頁後的總覽；子頁共用 .totoga2-split-crossnav */
+/* extra/totoga2 copy.html — 複本改為三獨立頁後的總覽；主檔 fallen/totoga2.html；子頁共用 .totoga2-split-crossnav */
 body.totoga2-page .totoga2-split-crossnav {
    margin-top: 0.75rem;
 }
@@ -2313,7 +2349,7 @@ body.totoga2-page .totoga2-copy-hub-anchor-hint {
    font-size: 0.95rem;
 }

-/* extra/member.html — 黑白水晶交錯格（2×4）與懸賞令海報 */
+/* member/member.html — 黑白水晶交錯格（2×4）與懸賞令海報 */
 body.member-crystal-page .member-crystal-main {
    padding: 1.75rem 14px 3rem;
    max-width: 1240px;
@@ -3,7 +3,7 @@
     * ── 導覽「尚未開放」連結 ─────────────────────────────────────────
     * 【兩個世界】① 僅 `extra/site-guide.html`：`<nav data-portal-nav data-portal-nav-all-open>` → 不套用籌備中，
     *    頂欄全可點；`main.site-guide-main` 內 `<a>` 腳本不改寫（站主自用索引）。② 其餘每一頁：一律套用籌備中。
-     * 【totoga2 整合頁】`totoga2.html` 在 COMING_SOON_PAGES 內＝訪客頂欄「傳奇的轉折」不可點進；站主沒明講開放不得從 Set 刪除。
+     * 【totoga2 整合頁】`fallen/totoga2.html`（檔名仍為 totoga2.html）在 COMING_SOON_PAGES 內＝訪客頂欄「傳奇的轉折」不可點進；站主沒明講開放不得從 Set 刪除。
     * 【硬規則】檔案在 repo ≠ 可開放；未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。
     * 文案 NAV_SOON_PHRASES：籌備中連結提示用。
     * 完整條文：`.cursor/rules/portal-nav-rules.mdc` + `user-scope-and-nav.mdc`
@@ -33,6 +33,7 @@
    const COMING_SOON_PAGES = new Set([
        "albums.html",
        "map.html",
+        "member.html",
        "minister.html",
        "minister_ge.html",
        "totoga2.html",
@@ -173,7 +174,7 @@
    <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span><span class="portal-nav__sub">六顆永恆的水晶 · 左右命運的傳奇</span></a>
        <ul class="portal-submenu">
            <li><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">初心與軌跡</span><span class="portal-nav__sub">我們現在：從好奇觀看到淪陷的起點</span></a></li>
-            <li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/totoga2.html"><span class="portal-nav__label">傳奇的轉折</span><span class="portal-nav__sub">六六歌2 紀實與重逢敘事主線</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}fallen/totoga2.html"><span class="portal-nav__label">傳奇的轉折</span><span class="portal-nav__sub">六六歌2 紀實與重逢敘事主線</span></a></li>
            <li class="portal-nav__subgroup">
                <span class="portal-nav__subgroup-head"><span class="portal-nav__label">全員發瘋</span><span class="portal-nav__sub">原來我是個正常人啊！團綜與失控現場</span></span>
                <ul class="portal-submenu-nested" aria-label="全員發瘋">
@@ -188,7 +189,7 @@
            </li>
        </ul>
    </li>
-    <li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/member.html"><span class="portal-nav__label">完整的六顆</span><span class="portal-nav__sub">六顆水晶 · 黑白分流</span></a></li>
+    <li><a target="_blank" rel="noopener noreferrer" href="${rp}member/member.html"><span class="portal-nav__label">完整的六顆</span><span class="portal-nav__sub">六顆水晶 · 黑白分流</span></a></li>
    <li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span><span class="portal-nav__sub">SECHSKIES CONCERT ARCHIVE</span></a>
        <ul class="portal-submenu">
            <li><a target="_blank" rel="noopener noreferrer" href="${rp}concert/concert.html"><span class="portal-nav__label">集結水晶</span><span class="portal-nav__sub">團體演唱會</span></a></li>
@@ -201,10 +202,10 @@
            <li><a target="_blank" rel="noopener noreferrer" href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span><span class="portal-nav__sub">1997–1999 年表</span></a></li>
        </ul>
    </li>
-    <li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html"><span class="portal-nav__label">Yellow Note</span><span class="portal-nav__sub">視覺進化論 · 聖地巡禮</span></a>
+    <li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">Yellow Note</span><span class="portal-nav__sub">視覺進化論 · 聖地巡禮</span></a>
        <ul class="portal-submenu">
-            <li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/minister.html"><span class="portal-nav__label">視覺進化論</span><span class="portal-nav__sub">FROM CURIOSITY TO FULL-STACK</span></a></li>
-            <li><a target="_blank" rel="noopener noreferrer" href="${rp}map/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">視覺進化論</span><span class="portal-nav__sub">FROM CURIOSITY TO FULL-STACK</span></a></li>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a></li>
        </ul>
    </li>
 </ul>
@@ -68,14 +68,14 @@

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

 ### 相依性（請檢查）

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

 ---

@@ -0,0 +1,29 @@
+# 站內資料夾與頂欄選單對照
+
+與 `assets/js/portal-nav.js` 的 `buildPortalNavInnerHTML` 一致；路徑變更時請同步改導覽與 `extra/site-guide.html`。
+
+| 頂欄主項／子項 | 路徑（站根相對） |
+|----------------|------------------|
+| 淪陷瞬間 · 初心與軌跡 | `index.html` |
+| 傳奇的轉折 | `fallen/totoga2.html` |
+| 全員發瘋 · 隊長帶弟弟 | `variety/variety.html`（錨點 `#variety`） |
+| 全員發瘋 · 各自暴走 · 新西遊記 | `variety/NJTW/NJTW5.html` |
+| 完整的六顆 | `member/member.html` |
+| 現場的震撼 | `concert/concert.html` |
+| 黃色留聲機 | `albums/albums.html` |
+| Yellow Note · 視覺進化論 | `yellow-note/minister.html` |
+| Yellow Note · 聖地巡禮 | `yellow-note/map.html` |
+
+## 根目錄樹（精簡）
+
+- `index.html` — 首頁（淪陷瞬間）
+- `fallen/` — 淪陷子線：六六歌2 整合長頁
+- `member/` — 成員介紹（六顆水晶）
+- `concert/`、`albums/` — 與選單同名主題
+- `yellow-note/` — Yellow Note（minister + map）
+- `variety/` — 綜藝與 NJTW 子頁
+- `extra/` — 未掛主欄之草稿、複本、全站索引 `site-guide.html` 等
+- `assets/` — 共用靜態資源
+- `docs/sql/` — SQL 練習、計畫（`sql_plan.md`）與 `.sql` 腳本／匯出
+
+`COMING_SOON_PAGES` 仍以**檔名**（如 `totoga2.html`、`map.html`）判斷，與上層資料夾名無關。
@@ -0,0 +1,8 @@
+# 筆記：`extra/totoga2-copy-video.html`（站主／編輯用，不對讀者顯示）
+
+對應檔案：`extra/totoga2-copy-video.html`。
+
+- 以下為 Bilibili 嵌入播放器（16：9）。請用上集／中集／下集分頁切換；若無法播放請至站內搜尋同一 BV 號。中集、下集可將 iframe 的 `bvid` 換成分集連結。
+- 中集、下集 iframe 使用 `data-src`，第一次切到該分頁時由頁內 script 寫入 `src`；改連結時請改 `data-src`（或已寫入後的 `src`）。
+- 目前中／下集預設與上集同一 BV，僅作占位；正式替換時改各分頁 iframe 的 `data-src` 即可。
+- 此頁 `body.totoga2-video-copy-page` 會覆寫 `.map-archive-header` 的整屏高度（`100vh`／`100dvh`），避免與導覽、影片疊加後出現整頁直向捲軸；其他全屏 banner 頁不受影響。
@@ -134,9 +134,9 @@
                            <td class="site-guide-nav-link-cell"><a href="totoga2-copy-timeline.html"><code>extra/totoga2-copy-timeline.html</code></a></td>
                        </tr>
                        <tr data-site-guide-depth="3">
-                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="totoga2.html">網頁版（TOTOGA2）</a></span></td>
+                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../fallen/totoga2.html">網頁版（TOTOGA2）</a></span></td>
                            <td class="site-guide-nav-desc">單頁整合：影片／電子書／長文模式切換與八章錨點。</td>
-                            <td class="site-guide-nav-link-cell"><a href="totoga2.html"><code>extra/totoga2.html</code></a></td>
+                            <td class="site-guide-nav-link-cell"><a href="../fallen/totoga2.html"><code>fallen/totoga2.html</code></a></td>
                        </tr>
                        <tr data-site-guide-depth="2">
                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><span class="site-guide-nav-nolink">全員發瘋</span></span></td>
@@ -159,9 +159,9 @@
                            <td class="site-guide-nav-link-cell"><a href="../variety/NJTW/NJTW5.html"><code>variety/NJTW/NJTW5.html</code></a></td>
                        </tr>
                        <tr data-site-guide-depth="1">
-                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="member.html">完整的六顆</a></span></td>
+                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../member/member.html">完整的六顆</a></span></td>
                            <td class="site-guide-nav-desc">黑／白水晶六人海報板、團名典故與成員靜態介紹。</td>
-                            <td class="site-guide-nav-link-cell"><a href="member.html"><code>extra/member.html</code></a></td>
+                            <td class="site-guide-nav-link-cell"><a href="../member/member.html"><code>member/member.html</code></a></td>
                        </tr>
                        <tr data-site-guide-depth="1">
                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../concert/concert.html">現場的震撼</a></span></td>
@@ -194,19 +194,19 @@
                            <td class="site-guide-nav-link-cell"><a href="../albums/albums.html#classic"><code>albums/albums.html#classic</code></a></td>
                        </tr>
                        <tr data-site-guide-depth="1">
-                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../map/map.html">Yellow Note</a></span></td>
+                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../yellow-note/map.html">Yellow Note</a></span></td>
                            <td class="site-guide-nav-desc">台灣行程表、成員行程篩選、搜尋與地圖主體。</td>
-                            <td class="site-guide-nav-link-cell"><a href="../map/map.html"><code>map/map.html</code></a></td>
+                            <td class="site-guide-nav-link-cell"><a href="../yellow-note/map.html"><code>yellow-note/map.html</code></a></td>
                        </tr>
                        <tr data-site-guide-depth="2">
-                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="minister.html">視覺進化論</a></span></td>
+                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../yellow-note/minister.html">視覺進化論</a></span></td>
                            <td class="site-guide-nav-desc">「從好奇到全端」自述與時間軸式章節段落。</td>
-                            <td class="site-guide-nav-link-cell"><a href="minister.html"><code>extra/minister.html</code></a></td>
+                            <td class="site-guide-nav-link-cell"><a href="../yellow-note/minister.html"><code>yellow-note/minister.html</code></a></td>
                        </tr>
                        <tr data-site-guide-depth="2">
-                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../map/map.html">聖地巡禮</a></span></td>
+                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="../yellow-note/map.html">聖地巡禮</a></span></td>
                            <td class="site-guide-nav-desc">台灣行程表、成員行程篩選、搜尋與地圖主體。</td>
-                            <td class="site-guide-nav-link-cell"><a href="../map/map.html"><code>map/map.html</code></a></td>
+                            <td class="site-guide-nav-link-cell"><a href="../yellow-note/map.html"><code>yellow-note/map.html</code></a></td>
                        </tr>
                    </tbody>
                </table>
@@ -218,7 +218,7 @@
                    <tbody>
                        <tr>
                            <th scope="row"><code>COMING_SOON_PAGES</code></th>
-                            <td><code>albums</code>、<code>map</code>、<code>minister</code>、<code>minister_ge</code>、<code>totoga2</code>、<code>variety</code> 檔名 → 一般頁改 <code>#</code></td>
+                            <td><code>albums</code>、<code>yellow-note/map</code>、<code>minister</code>、<code>minister_ge</code>、<code>totoga2</code>、<code>variety</code> 檔名 → 一般頁改 <code>#</code></td>
                        </tr>
                        <tr>
                            <th scope="row"><code>INDEX_NAV_OPEN_HASHES</code></th>
@@ -266,31 +266,31 @@
                            <td>平行單頁 · <code>totoga2-copy-timeline.html</code></td>
                        </tr>
                        <tr>
-                            <td><a href="totoga2.html">網頁版（TOTOGA2）</a></td>
-                            <td>整合長頁 · <code>totoga2.html</code></td>
+                            <td><a href="../fallen/totoga2.html">網頁版（TOTOGA2）</a></td>
+                            <td>整合長頁 · <code>fallen/totoga2.html</code></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="site-guide-grid site-guide-grid--compact">
                <article class="site-guide-card site-guide-card--totoga2">
-                    <h3><a href="totoga2.html">六六歌2 · 四入口</a></h3>
+                    <h3><a href="../fallen/totoga2.html">六六歌2 · 四入口</a></h3>
                    <p class="site-guide-note">複本總覽：<a href="totoga2%20copy.html">totoga2 copy.html</a>。章節錨點僅在網頁版（TOTOGA2）內。</p>
                    <ul class="site-guide-inline-links">
                        <li><a href="totoga2-copy-video.html">影片</a></li>
                        <li><a href="totoga2-copy-ebook.html">電子書</a></li>
                        <li><a href="totoga2-copy-timeline.html">時間軸</a></li>
-                        <li><a href="totoga2.html">網頁版（TOTOGA2）</a></li>
+                        <li><a href="../fallen/totoga2.html">網頁版（TOTOGA2）</a></li>
                    </ul>
                    <nav class="site-guide-chapter-nav" aria-label="totoga2 章節">
-                        <a href="totoga2.html#challenge">無限挑戰</a>
-                        <a href="totoga2.html#ssg2">六六歌2</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>
+                        <a href="../fallen/totoga2.html#challenge">無限挑戰</a>
+                        <a href="../fallen/totoga2.html#ssg2">六六歌2</a>
+                        <a href="../fallen/totoga2.html#sechskies-profile">水晶男孩</a>
+                        <a href="../fallen/totoga2.html#gather">召集</a>
+                        <a href="../fallen/totoga2.html#negotiate">交涉</a>
+                        <a href="../fallen/totoga2.html#variables">變數</a>
+                        <a href="../fallen/totoga2.html#surprise">驚喜</a>
+                        <a href="../fallen/totoga2.html#final-stage">登場</a>
                    </nav>
                </article>
            </div>
@@ -303,11 +303,11 @@
                    <tbody>
                        <tr>
                            <th scope="row">頁</th>
-                            <td><a href="member.html">extra/member.html</a></td>
+                            <td><a href="../member/member.html">member/member.html</a></td>
                        </tr>
                        <tr>
                            <th scope="row">錨點</th>
-                            <td><a href="member.html#crystal-board">#crystal-board</a></td>
+                            <td><a href="../member/member.html#crystal-board">#crystal-board</a></td>
                        </tr>
                    </tbody>
                </table>
@@ -357,7 +357,7 @@
                    <tbody>
                        <tr>
                            <th scope="row">視覺</th>
-                            <td><a href="minister.html">minister.html</a></td>
+                            <td><a href="../yellow-note/minister.html">yellow-note/minister.html</a></td>
                        </tr>
                        <tr>
                            <th scope="row">minister 長版</th>
@@ -365,7 +365,7 @@
                        </tr>
                        <tr>
                            <th scope="row">地圖</th>
-                            <td><a href="../map/map.html">map.html</a> · <a href="../map/map.html#taipei">#taipei</a> · <a href="../map/map.html#global">#global</a></td>
+                            <td><a href="../yellow-note/map.html">map.html</a> · <a href="../yellow-note/map.html#taipei">#taipei</a> · <a href="../yellow-note/map.html#global">#global</a></td>
                        </tr>
                    </tbody>
                </table>
@@ -392,7 +392,7 @@

        <section class="site-guide-group site-guide-group--extra" aria-labelledby="sg-nav-extra">
            <h2 class="section-title" id="sg-nav-extra">extra/ 其餘</h2>
-            <p class="site-guide-folder-hint">未列頂欄主模板；<code>member</code>／<code>totoga2</code>／<code>minister</code> 與六六歌2 四入口已見主選單樹。</p>
+            <p class="site-guide-folder-hint">未列頂欄主模板之草稿／實驗頁。主選單對應頁面已移至 <code>fallen/</code>、<code>member/</code>、<code>yellow-note/</code>、<code>variety/</code> 等資料夾；六六歌2 四入口之複本仍在本目錄。</p>
            <div class="site-guide-nav-table-wrap">
                <table class="site-guide-mini-table">
                    <thead>
@@ -14,15 +14,8 @@
    <header class="map-archive-header">
        <div class="header-inner">
            <h1 class="main-title">無限挑戰 · 六六歌2</h1>
-
-            <div class="main-content-title">
-                <span class="highlight-text">水晶男孩回來啦！</span>
-                <span class="eng-title">SECHSKIES COM' BACK</span>
-            </div>
-
            <div class="subtitle-wrap">
-                <span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — 複本導覽</span>
-                <span class="event-date">APRIL 14, 2016</span>
+                <span class="sub-title">水晶男孩回來啦！</span>
            </div>
        </div>
    </header>
@@ -36,7 +29,7 @@
            <h2 class="section-title" id="totoga2-copy-hub-title">六六歌2 複本 · 三頁分開</h2>
            <p class="ebook-intro-lead">
                原先單頁以按鈕切換「影片／電子書／時間軸＋長文」；此複本改為<strong>三個獨立 HTML</strong>（檔名無空白，較利分享與書籤）。
-                正式整合版仍以 <a href="totoga2.html">extra/totoga2.html</a> 為準。
+                正式整合版仍以 <a href="../fallen/totoga2.html">fallen/totoga2.html</a> 為準。
            </p>
        </section>

@@ -53,7 +46,7 @@

    <p class="ebook-back-link content-container">
        <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
-        <a href="totoga2.html" class="btn">主檔 totoga2.html</a>
+        <a href="../fallen/totoga2.html" class="btn">主檔 fallen/totoga2.html</a>
    </p>

    <footer>
@@ -14,13 +14,8 @@
    <header class="map-archive-header">
        <div class="header-inner">
            <h1 class="main-title">無限挑戰 · 六六歌2</h1>
-            <div class="main-content-title">
-                <span class="highlight-text">水晶男孩回來啦！</span>
-                <span class="eng-title">SECHSKIES COM' BACK</span>
-            </div>
            <div class="subtitle-wrap">
-                <span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
-                <span class="event-date">APRIL 14, 2016</span>
+                <span class="sub-title">水晶男孩回來啦！</span>
            </div>
        </div>
    </header>
@@ -14,13 +14,8 @@
    <header class="map-archive-header">
        <div class="header-inner">
            <h1 class="main-title">無限挑戰 · 六六歌2</h1>
-            <div class="main-content-title">
-                <span class="highlight-text">水晶男孩回來啦！</span>
-                <span class="eng-title">SECHSKIES COM' BACK</span>
-            </div>
            <div class="subtitle-wrap">
-                <span class="sub-title">INFINITE CHALLENGE · 時間軸 · 紀實長文</span>
-                <span class="event-date">APRIL 14, 2016</span>
+                <span class="sub-title">水晶男孩回來啦！</span>
            </div>
        </div>
    </header>
@@ -10,17 +10,12 @@
    <link rel="stylesheet" href="../assets/css/tablet.css">
 </head>

-<body class="ebook-ssg2-page totoga2-page">
+<body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
    <header class="map-archive-header">
        <div class="header-inner">
            <h1 class="main-title">無限挑戰 · 六六歌2</h1>
-            <div class="main-content-title">
-                <span class="highlight-text">水晶男孩回來啦！</span>
-                <span class="eng-title">SECHSKIES COM' BACK</span>
-            </div>
            <div class="subtitle-wrap">
-                <span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — 節目影片</span>
-                <span class="event-date">APRIL 14, 2016</span>
+                <span class="sub-title">水晶男孩回來啦！</span>
            </div>
        </div>
    </header>
@@ -37,41 +32,43 @@
    </nav>

    <div class="content-container ebook-main">
-        <section class="ebook-intro section" aria-label="影片三集">
-            <h2 class="section-title">節目影片</h2>
-            <p class="ebook-intro-lead">
-                以下為 Bilibili 嵌入播放器（16：9）。若無法播放，請至站內搜尋同一 BV 號；中集、下集請將 iframe 的 <code>bvid</code> 換成你的分集連結。
-            </p>
-        </section>
+        <section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">
+            <h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>

-        <div class="bilivideo-stack">
-            <section class="bilivideo-block" aria-labelledby="bilivideo-top">
-                <h3 id="bilivideo-top">上集</h3>
-                <div class="bilivideo-frame">
-                    <iframe
-                        src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353565&p=1"
-                        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+            <div class="bilivideo-tabs" id="bilivideo-tabs">
+                <div class="bilivideo-tabs__shell">
+                    <div class="bilivideo-tabs__list" role="tablist" aria-label="節目影片集數">
+                        <button type="button" class="bilivideo-tabs__tab bilivideo-tabs__tab--active" role="tab" id="bilivideo-tab-1"
+                            aria-controls="bilivideo-panel-1" aria-selected="true">上集</button>
+                        <button type="button" class="bilivideo-tabs__tab" role="tab" id="bilivideo-tab-2"
+                            aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
+                        <button type="button" class="bilivideo-tabs__tab" role="tab" id="bilivideo-tab-3"
+                            aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
+                    </div>
+                    <div class="bilivideo-tabs__panels">
+                        <div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1" aria-labelledby="bilivideo-tab-1">
+                            <div class="bilivideo-frame">
+                                <iframe title="無限挑戰 六六歌2 上集"
+                                    src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353565&p=1"
+                                    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+                            </div>
+                        </div>
+                        <div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-2" aria-labelledby="bilivideo-tab-2" hidden>
+                            <div class="bilivideo-frame">
+                                <iframe title="無限挑戰 六六歌2 中集" data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353561&p=2"
+                                    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+                            </div>
+                        </div>
+                        <div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-3" aria-labelledby="bilivideo-tab-3" hidden>
+                            <div class="bilivideo-frame">
+                                <iframe title="無限挑戰 六六歌2 下集" data-src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353562&p=3"
+                                    scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+                            </div>
+                        </div>
+                    </div>
                </div>
-            </section>
-            <section class="bilivideo-block" aria-labelledby="bilivideo-mid">
-                <h3 id="bilivideo-mid">中集</h3>
-                <p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為中集 BV。</p>
-                <div class="bilivideo-frame">
-                    <iframe
-                        src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353561&p=2"
-                        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
-                </div>
-            </section>
-            <section class="bilivideo-block" aria-labelledby="bilivideo-bot">
-                <h3 id="bilivideo-bot">下集</h3>
-                <p class="bilivideo-placeholder-note">預設與上集同一支；請替換 <code>bvid</code> 為下集 BV。</p>
-                <div class="bilivideo-frame">
-                    <iframe
-                        src="//player.bilibili.com/player.html?isOutside=true&aid=12288323&bvid=BV1Yx411B7TC&cid=20353562&p=3"
-                        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
-                </div>
-            </section>
-        </div>
+            </div>
+        </section>
    </div>

    <p class="ebook-back-link content-container">
@@ -89,6 +86,38 @@

    <script src="../assets/js/particles.js"></script>
    <script src="../assets/js/portal-nav.js"></script>
+    <script>
+        (function () {
+            var root = document.getElementById("bilivideo-tabs");
+            if (!root) return;
+            var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
+            var panels = Array.prototype.slice.call(root.querySelectorAll('[role="tabpanel"]'));
+
+            function activate(index) {
+                tabs.forEach(function (tab, i) {
+                    var on = i === index;
+                    tab.setAttribute("aria-selected", on ? "true" : "false");
+                    tab.tabIndex = on ? 0 : -1;
+                    if (on) tab.classList.add("bilivideo-tabs__tab--active");
+                    else tab.classList.remove("bilivideo-tabs__tab--active");
+                    panels[i].hidden = !on;
+                    if (on) {
+                        var iframe = panels[i].querySelector("iframe[data-src]");
+                        if (iframe && !iframe.getAttribute("src")) {
+                            iframe.setAttribute("src", iframe.getAttribute("data-src"));
+                        }
+                    }
+                });
+            }
+
+            tabs.forEach(function (tab, i) {
+                tab.addEventListener("click", function () {
+                    activate(i);
+                });
+            });
+            activate(0);
+        })();
+    </script>
 </body>

 </html>
@@ -162,15 +162,8 @@
    <header class="map-archive-header">
        <div class="header-inner">
            <h1 class="main-title">無限挑戰 · 六六歌2</h1>
-
-            <div class="main-content-title">
-                <span class="highlight-text">水晶男孩回來啦！</span>
-                <span class="eng-title">SECHSKIES COM' BACK</span>
-            </div>
-
            <div class="subtitle-wrap">
-                <span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
-                <span class="event-date">APRIL 14, 2016</span>
+                <span class="sub-title">水晶男孩回來啦！</span>
            </div>
        </div>
    </header>
@@ -188,33 +188,33 @@
            </div>
            <p class="intro-text">
                像劇情的反轉一樣過癮：這幾個節點，剛好是許多人從「旁觀綜藝」滑進「正式入坑」的轉軌。若想讀對白級細節，請開
-                <a href="extra/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
+                <a href="fallen/totoga2.html">六六歌2 整合專區</a>（影片／電子書／紀實長文八章，同一頁切換模式即可）。
            </p>
            <div class="story-ebook-cta">
-                <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>
+                <a href="fallen/totoga2.html#ebook" class="btn story-ebook-btn">開啟六六歌2 紀實電子書</a>
+                <a href="fallen/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="extra/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
+                    <p><a href="fallen/totoga2.html#ssg2">對照這一段幕後敘事</a></p>
                </article>
                <article id="negotiate" class="story-node" data-era="交涉">
                    <h3>命運的交涉</h3>
                    <p>KTV、游擊演唱會規則、與其說講道理不如說把真心擺上桌面——交涉的不是合約字面，而是還願不願意再一次肩並肩。</p>
-                    <p><a href="extra/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
+                    <p><a href="fallen/totoga2.html#negotiate">讀交涉與對話肌理</a></p>
                </article>
                <article id="complete" class="story-node" data-era="歸位">
                    <h3>拼圖的歸位</h3>
                    <p>變數一個個被排除之後，驚喜接上登場段落；缺一角舞台的視覺，終於對齊觀眾席上堅守的那片黃。</p>
-                    <p><a href="extra/totoga2.html#gather">從「召集」段開始補這條線</a></p>
+                    <p><a href="fallen/totoga2.html#gather">從「召集」段開始補這條線</a></p>
                </article>
                <article id="past" class="story-node" data-era="最初">
                    <h3>巔峰與雨天</h3>
                    <p>急凍、告別、各自的跑道——並不是要你沉浸遺憾，而是讓你懂：後來每一次亮燈，為什麼會更值得尖叫。</p>
-                    <p><a href="extra/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
+                    <p><a href="fallen/totoga2.html#sechskies-profile">讀這條脈絡的起點</a></p>
                </article>
            </div>
        </section> -->