feat 電子書

2026-05-15 16:01:31 +08:00
parent 904f3ebffd
commit b656f5a362
14 changed files with 183 additions and 48 deletions
@@ -35,6 +35,7 @@ alwaysApply: true
 ## 文件與規則檔

 - **不要**主動新增或長篇修改 `README`、`docs/*.md`、規則檔，除非使用者明講要寫入文件或規範。
+- **助手自用筆記**（對話紀要、頁面編輯規格、實作備忘）：只寫在 **`.cursor/`**（例如 `.cursor/*-notes.md`）；**禁止**放在 `docs/`、`README` 或站主日常會開的目錄。回覆裡也不必貼長篇筆記內容。
 - **例外**：使用者要求「把約定寫死／規則講清楚／不要再做錯」時，得**精準**更新 `.cursor/rules`（與 `portal-nav.js` 頂部註解對齊），避免重複踩雷；仍避免無關長文。

 （與導覽開放、頂欄 vs `site-guide` 相關條文以 **`user-scope-and-nav.mdc`**、**`portal-nav-rules.mdc`** 為準；實作前兩份都讀。）
@@ -0,0 +1,47 @@
+---
+description: 全站對讀者文案語調（index body 開頭至 timeline data-era=2016.05）
+alwaysApply: true
+---
+
+# 全站文案調性
+
+撰寫或改寫**給訪客看的內文**時，語感對齊下列母本（站主指定範圍）：
+
+## 母本範圍
+
+**檔案**：`index.html`  
+**起點**：`<body>` 從開頭讀起。  
+**終點**：`#timeline` 內 `article[data-era="2016.05"]` **全文為止**（含錨點句）。
+
+依 **DOM 由上而下** 納入：
+
+| 區塊 | 說明 |
+|------|------|
+| `header#origin` | Hero 標語（六顆水晶、傳奇） |
+| `nav.portal-nav` | 頂欄導覽（主標／副標，在 body 內依序出現） |
+| `#start` | 好奇的開端、2016 四月入坑、黃色奇蹟、路人→坑底 |
+| `#mission` | 成立的初衷、LOGO／黃色海洋瞬間、追星與創作 |
+| `#timeline` → 至 `2016.05` | `1997` → `2000` → `2016`（合體）→ `2016.05`（夢境進現實＋錨點句） |
+
+**截止線**（站主指定）：`#timeline` 內 **`data-era="2016.05"` 之後**的節點；該篇之後的 body 內容。
+
+## 錨點句（`2016.05` 末段）
+
+> 原來大家只是換個方式一起變老，這份情誼早已超越了表演。
+
+是整條閱讀軸的收束之一；須能承接 **入坑自述 → 初衷 → 1997→2000→2016→2016.05**，勿只複誦此句。
+
+## 語感要點
+
+- 站主視角：2016 因《無限挑戰》入坑、好奇到淪陷；網站像藝廊、把喜愛化為創作。  
+- 時間軸：盛世 → 休止凍結 → 合體 → 現實落地（簽約、四／九月、空位、《超回》）。  
+- 溫柔、具體場景、遺憾與釋懷並寫；黃色海洋、十六年、羈絆、奇蹟、完整。
+
+## 避免
+
+- 只寫 timeline 末段或只抄錨點句。  
+- 把 2016.05 之後的 timeline 或 body 後段當母本。  
+- 讀者向技術說明（除非站主明講）。  
+- **單頁 intro**（如電子書）把首頁時間軸／入坑／錨點句硬拼進一段；該頁應先說明**該頁主題**（如六六歌2 跨頁書），語感對齊母本即可。
+
+細項：`.cursor/site-voice-notes.md`。
@@ -12,6 +12,7 @@ alwaysApply: true
 3. **`totoga2.html`**、**`variety.html`**：站主沒說「對外開放」→ **留在 `COMING_SOON_PAGES`**；不得自以為可以幫忙開放。
 4. **沒寫在指令裡的開放／連結／從 Set 移除／刪檔或刪導覽列**：**一律先問**，禁止推論；「刪除」未指明範圍（單檔 vs 頂欄整段 vs 資料夾）＝必須先問。
 5. 技術細節與檢查清單：**`portal-nav-rules.mdc`**（與本檔一起讀）。
+6. **頂欄 `portal-nav`（header）**：文案與巢狀結構對齊 `extra/site-guide.html` **主選單樹**（有連結者）；`site-guide-nav-nolink` 與 `COMING_SOON_PAGES` 維持籌備中、**不准擅自開放或改未列開放之頁內容**。勿把此句誤做成 `extra/` 分頁列或全站 `nav` 黑底規則。

 ---

@@ -38,4 +38,3 @@
 ## 4. 本檔說明

 - 由 2026-05-13 對話整理；若與後續 commit 不一致，以 git 與規則檔為準。
- 若要再拆成「只給人讀」與「只給規則」兩層，可之後再調整，目前不重複貼長篇到多份文件。
@@ -0,0 +1,37 @@
+# 全站文案調性（助手用）
+
+## 母本（一句話）
+
+**`index.html`：從 `<body>` 開頭依 DOM 往下讀，讀到 `#timeline` 的 `data-era="2016.05"` 止（含）。**
+
+## 納入（由上而下）
+
+1. **`header#origin`** — Hero  
+2. **`nav.portal-nav`** — 頂欄導覽（主標／副標）  
+3. **`#start`** — 好奇的開端  
+4. **`#mission`** — 成立的初衷、LOGO／黃色海洋  
+5. **`#timeline`** — 至 `1997` → `2000` → `2016` → **`2016.05`**（含錨點句）
+
+## 截止線（站主指定）
+
+- `#timeline` 內 **2016.05 之後**（後段 `data-era="2016"`、`2019`、`NOW` 等）  
+- 該線之後的 body 內容  
+
+## 錨點句
+
+> 原來大家只是換個方式一起變老，這份情誼早已超越了表演。
+
+## 檢查
+
+- 有沒有接到 **入坑（#start）＋初衷（#mission）＋四節時間軸**？  
+- 有沒有誤用截止線之後的段落？
+
+## 六六歌2 電子書 intro
+
+- 站主採用版：第一次感性改寫（「四月那場重逢…」開頭），見 `extra/totoga2-copy-ebook.html`。  
+- **勿**再改成 FlipHTML5／PDF 技術說明，也**勿**把 `#start`＋整條 timeline 名詞塞滿一段（東拼西湊版）。
+
+## 其他
+
+- 六六歌2 分頁（site-guide）：影片 → 電子書 → 時間軸 → 網頁版（TOTOGA2）  
+- 規則：`.cursor/rules/site-voice.mdc`
@@ -1,3 +1,9 @@
-# 影片頁筆記（索引）
+# 筆記：`extra/totoga2-video.html`（助手用，不對讀者顯示）

-編輯規格以 **`docs/totoga2-video-notes.md`** 為準；對應頁面為 `extra/totoga2-video.html`。
+對應檔案：`extra/totoga2-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 頁不受影響。
+- 資訊架構：頂部黃色列僅 **上集／中集／下集**（`role="tab"`）；**紀實電子書、時間軸＋長文、複本總覽** 為其下文字連結，仍各為獨立 HTML；`totoga2-copy-ebook.html` 等頁仍保留原四鈕列。
@@ -2101,6 +2101,15 @@ body.ebook-ssg2-page .ebook-intro-lead {
    line-height: 1.7;
 }

+body.ebook-ssg2-page .ebook-intro-note {
+    text-align: center;
+    max-width: 42rem;
+    margin: -0.75rem auto 1.25rem;
+    font-size: 0.88rem;
+    color: #777;
+    line-height: 1.5;
+}
+
 body.ebook-ssg2-page .ebook-main,
 body.ebook-ssg2-page footer {
    position: relative;
@@ -2182,6 +2191,16 @@ body.ebook-ssg2-page .flip-ebook-aspect--pageflip > #my-flipbook {
    height: auto;
    max-width: 100%;
    overflow: visible;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* PageFlip 在 landscape 會把書寬當成 2×半頁；host 限寬才能穩定走 portrait 全幅 */
+body.ebook-ssg2-page .flip-ebook-aspect.flip-ebook-aspect--pageflip {
+    width: fit-content;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
 }

 body.ebook-ssg2-page #my-flipbook .page {
@@ -3,7 +3,7 @@
     * ── 導覽「尚未開放」連結 ─────────────────────────────────────────
     * 【兩個世界】① 僅 `extra/site-guide.html`：`<nav data-portal-nav data-portal-nav-all-open>` → 不套用籌備中，
     *    頂欄全可點；`main.site-guide-main` 內 `<a>` 腳本不改寫（站主自用索引）。② 其餘每一頁：一律套用籌備中。
-     * 【totoga2 整合頁】`fallen/totoga2.html`（檔名仍為 totoga2.html）在 COMING_SOON_PAGES 內＝訪客頂欄「傳奇的轉折」不可點進；站主沒明講開放不得從 Set 刪除。
+     * 【totoga2】頂欄結構對齊 `site-guide` 主選單樹：傳奇的轉折（六六歌2）下四入口；`extra/totoga2-*.html` 可點。`fallen/totoga2.html`（檔名 totoga2.html）仍在 COMING_SOON_PAGES＝「網頁版（TOTOGA2）」訪客籌備中；未同意不得從 Set 刪除。
     * 【硬規則】檔案在 repo ≠ 可開放；未同意不得從 Set 刪名、不得擴白名單、不得在模板新增可點項。
     * 文案 NAV_SOON_PHRASES：籌備中連結提示用。
     * 完整條文：`.cursor/rules/portal-nav-rules.mdc` + `user-scope-and-nav.mdc`
@@ -171,10 +171,18 @@
        return `
 <a class="logo" target="_blank" rel="noopener noreferrer" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
 <ul>
-    <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><a target="_blank" rel="noopener noreferrer" href="${rp}index.html"><span class="portal-nav__label">淪陷瞬間</span><span class="portal-nav__sub">Hero、入坑敘事與站方初衷；LOGO 與跨時空軌跡</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}fallen/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}index.html"><span class="portal-nav__label">初心與軌跡</span><span class="portal-nav__sub">Hero、入坑敘事與站方初衷；LOGO 與跨時空軌跡</span></a></li>
+            <li class="portal-nav__subgroup">
+                <span class="portal-nav__subgroup-head"><span class="portal-nav__label">傳奇的轉折（六六歌2）</span><span class="portal-nav__sub">四種入口：影片、電子書、時間軸、網頁版</span></span>
+                <ul class="portal-submenu-nested" aria-label="傳奇的轉折（六六歌2）">
+                    <li><a target="_blank" rel="noopener noreferrer" href="${rp}extra/totoga2-video.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}extra/totoga2-copy-ebook.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-copy-timeline.html"><span class="portal-nav__label">時間軸</span><span class="portal-nav__sub">時間軸與紀實八章長文單頁</span></a></li>
+                    <li><a target="_blank" rel="noopener noreferrer" href="${rp}fallen/totoga2.html"><span class="portal-nav__label">網頁版（TOTOGA2）</span><span class="portal-nav__sub">單頁整合：影片／電子書／長文與八章錨點</span></a></li>
+                </ul>
+            </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="全員發瘋">
@@ -202,10 +210,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}yellow-note/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}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>
+            <li><a target="_blank" rel="noopener noreferrer" href="${rp}yellow-note/minister.html"><span class="portal-nav__label">視覺進化論</span><span class="portal-nav__sub">從好奇到全端：自述與時間軸式章節</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">台灣行程表、成員行程篩選、搜尋與地圖</span></a></li>
        </ul>
    </li>
 </ul>
@@ -1,9 +0,0 @@
-# 筆記：`extra/totoga2-video.html`（站主／編輯用，不對讀者顯示）
-
-對應檔案：`extra/totoga2-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 頁不受影響。
- 資訊架構：頂部黃色列僅 **上集／中集／下集**（`role="tab"`）；**紀實電子書、時間軸＋長文、複本總覽** 為其下文字連結，仍各為獨立 HTML；`totoga2-copy-ebook.html` 等頁仍保留原四鈕列。
@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/tablet.css">
+    <link rel="stylesheet" href="totoga2-split-nav.css">
 </head>

 <body class="ebook-ssg2-page totoga2-page">
@@ -33,10 +34,11 @@
            </p>
        </section>

-        <nav class="ebook-back-link totoga2-split-crossnav totoga2-copy-hub-nav" aria-label="六六歌2 複本分頁入口">
-            <a href="totoga2-video.html" class="btn">節目影片 · 三集 Bilibili</a>
-            <a href="totoga2-copy-ebook.html" class="btn">紀實電子書 · FlipHTML5</a>
-            <a href="totoga2-copy-timeline.html" class="btn">時間軸＋紀實長文八章</a>
+        <nav class="ebook-back-link totoga2-split-crossnav totoga2-copy-hub-nav" aria-label="六六歌2 閱讀入口">
+            <a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
+            <a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
+            <a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
+            <a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
        </nav>

        <p class="ebook-intro-lead totoga2-copy-hub-anchor-hint">
@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/tablet.css">
+    <link rel="stylesheet" href="totoga2-split-nav.css">
 </head>

 <body class="ebook-ssg2-page totoga2-page">
@@ -24,19 +25,20 @@

    <canvas id="particles"></canvas>

-    <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 複本分頁">
-        <a href="totoga2-video.html" class="btn">節目影片</a>
-        <a href="totoga2-copy-ebook.html" class="btn" aria-current="page">紀實電子書</a>
-        <a href="totoga2-copy-timeline.html" class="btn">時間軸＋長文</a>
-        <a href="totoga2%20copy.html" class="btn">複本總覽</a>
+    <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
+        <a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
+        <a href="totoga2-copy-ebook.html" class="btn" aria-current="page" title="紀實電子書內容獨立成頁">電子書</a>
+        <a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
+        <a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
    </nav>

    <div class="content-container ebook-main">
        <section class="ebook-intro section" aria-label="電子書說明">
            <h2 class="section-title">紀實電子書</h2>
            <p class="ebook-intro-lead">
-                以下為《無限挑戰》六六歌2 紀實跨頁 PDF（以 PDF.js 載入、PageFlip 翻頁）。若載入較慢請稍候；請以本機伺服器開啟頁面（勿用 file://），否則 PDF 可能被瀏覽器擋下。
+                四月那場重逢，不只是一集綜藝，而是塵封十六年的旋律，終於在笑聲與淚水裡再次被聽見。這本紀實電子書留住《無限挑戰》六六歌2 的每一頁：有驚喜、有拉扯，也有那些當時說不出口的想念。慢慢翻過去吧——我們後來才明白，有些情誼早已超越了表演，只是在節目的鏡頭裡，換了一種方式，陪彼此一起變老。
            </p>
+            <p class="ebook-intro-note">翻頁方式：點擊書頁左、右側，或拖曳頁角即可往前／往後翻。若畫面載入較慢，請稍候再試。</p>
        </section>

        <!-- <div class="flip-ebook-shell">
@@ -56,8 +58,6 @@

    <p class="ebook-back-link content-container">
        <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
-        <a href="totoga2-video.html" class="btn">節目影片（另頁）</a>
-        <a href="totoga2-copy-timeline.html" class="btn">時間軸＋八章（另頁）</a>
    </p>

    <footer>
@@ -109,6 +109,17 @@
            }
            var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);

+            /* 容器寬度 ≈ 單頁寬，配合 size:'fixed' 才會走 portrait（全幅 A4*2），不會切成左右兩半 */
+            var bookHost = document.getElementById('book-container');
+            if (bookHost) {
+                bookHost.style.width = pageW + 'px';
+                bookHost.style.maxWidth = '100%';
+                bookHost.style.marginLeft = 'auto';
+                bookHost.style.marginRight = 'auto';
+            }
+            container.style.width = pageW + 'px';
+            container.style.maxWidth = '100%';
+
            for (var i = 1; i <= pdf.numPages; i++) {
                var page = await pdf.getPage(i);
                var viewport = page.getViewport({ scale: renderScale });
@@ -134,12 +145,12 @@
            var pageFlip = new St.PageFlip(container, {
                width: pageW,
                height: pageH,
-                size: 'stretch',
-                // PDF 每個 page 本身已是「A4*2 的攤開幅面」；避免 StPageFlip 在橫向模式下把頁寬視為總寬一半
-                // 導致看起來像把兩頁攤在一起、寬度被切半。
+                /* stretch 在寬容器會固定走 landscape（總寬=2×半頁），跨頁 PDF 會被切成左空白+右半頁 */
+                size: 'fixed',
                usePortrait: true,
                showCover: true,
                startPage: 0,
+                autoSize: true,
                drawShadow: true,
                maxShadowOpacity: 0.4
            });
@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/tablet.css">
+    <link rel="stylesheet" href="totoga2-split-nav.css">
 </head>

 <body class="ebook-ssg2-page totoga2-page">
@@ -24,11 +25,11 @@

    <canvas id="particles"></canvas>

-    <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 複本分頁">
-        <a href="totoga2-video.html" class="btn">節目影片</a>
-        <a href="totoga2-copy-ebook.html" class="btn">紀實電子書</a>
-        <a href="totoga2-copy-timeline.html" class="btn" aria-current="page">時間軸＋長文</a>
-        <a href="totoga2%20copy.html" class="btn">複本總覽</a>
+    <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
+        <a href="totoga2-video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
+        <a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
+        <a href="totoga2-copy-timeline.html" class="btn" aria-current="page" title="時間軸與紀實八章長文單頁">時間軸</a>
+        <a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
    </nav>

    <div class="totoga2-reader-hub content-container ebook-main">
@@ -67,8 +68,6 @@

        <p class="ebook-back-link content-container">
            <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
-            <a href="totoga2-video.html" class="btn">節目影片（另頁）</a>
-            <a href="totoga2-copy-ebook.html" class="btn">紀實電子書（另頁）</a>
        </p>

        <footer>
@@ -0,0 +1,14 @@
+/* 僅 extra 六六歌2 四入口單頁載入（見 site-guide 傳奇的轉折）；不寫入 assets/css/style.css */
+body.totoga2-page nav.totoga2-split-crossnav.ebook-back-link {
+    margin: 0.75rem auto 1.25rem;
+    padding: 0.35rem 14px;
+    width: 100%;
+    max-width: 1200px;
+    box-sizing: border-box;
+    background: transparent;
+    background-color: transparent;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+}
@@ -8,6 +8,7 @@
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/tablet.css">
+    <link rel="stylesheet" href="totoga2-split-nav.css">
 </head>

 <body class="ebook-ssg2-page totoga2-page totoga2-video-copy-page">
@@ -25,13 +26,12 @@
    <canvas id="particles"></canvas>

    <div id="bilivideo-tabs" class="bilivideo-hub">
-        <p class="totoga2-copy-sibling-links content-container" aria-label="六六歌2 其他複本入口">
-            <a href="totoga2-copy-ebook.html">紀實電子書</a>
-            <span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span>
-            <a href="totoga2-copy-timeline.html">時間軸＋長文</a>
-            <span class="totoga2-copy-sibling-links__sep" aria-hidden="true">·</span>
-            <a href="totoga2%20copy.html">複本總覽</a>
-        </p>
+        <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 閱讀入口">
+            <a href="totoga2-video.html" class="btn" aria-current="page" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
+            <a href="totoga2-copy-ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
+            <a href="totoga2-copy-timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
+            <a href="../fallen/totoga2.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">網頁版（TOTOGA2）</a>
+        </nav>

        <div class="content-container ebook-main">
            <section class="ebook-intro section" aria-labelledby="ebook-bilivideo-heading">