refactor totoga2與首頁時間軸

.cursor/collaboration-notes.md

@@ -32,7 +32,7 @@
 
 - 頂欄與頁內按鈕：**`NAV_SOON_PHRASES` 隨機氣泡**（滑過）；無障礙 aria「尚無開放」。
 - 頁內按鈕：**不加**可見「（籌備中）」後綴。
-- `totoga2-copy-timeline.html` 在 `COMING_SOON_PAGES`（時間軸不公開）。
+- `totoga2/timeline.html` 在 `COMING_SOON_PAGES`（時間軸不公開）；圖文好讀版為 `totoga2/readable.html`。
 
 ---
 

.cursor/rules/portal-nav-rules.mdc

@@ -20,7 +20,7 @@ alwaysApply: true
 
 1. **未經站主逐句同意**：不得從 `COMING_SOON_PAGES` **刪**檔名、不得擴充 `INDEX_NAV_OPEN_HASHES`、不得在 `buildPortalNavInnerHTML` **新增**可點項、不得把籌備中改成真 `href`、不得刪站主已同意列入頂欄的項。
 2. **「檔案在 repo」≠「可開放導覽」**；不得自行推論。
-3. **`fallen/totoga2.html`（整合頁）**、**`variety/variety.html`**：站主**沒有明講對外開放**時，檔名**必須**留在 `COMING_SOON_PAGES`（訪客頂欄不可點進）。要開放時**只**能等站主說了再從 Set 移除。
+3. **`totoga2/readable.html`（圖文好讀版，檔名 `readable.html`）**、**`variety/variety.html`**：站主**沒有明講對外開放**時，檔名**必須**留在 `COMING_SOON_PAGES`（訪客頂欄不可點進）。要開放時**只**能等站主說了再從 Set 移除。
 4. **「刪除／拿掉／不要了」**：若未寫明是**單一檔案**、**頂欄某一列**、**整段子選單**還是**整個資料夾**，**一律先問站主**，禁止自行擴大刪除範圍。
 5. **不確定**是否開放、連哪、是否例外：**先問站主再改**，不要猜。
 6. 站主說要刪的是 **`某頁#錨點`**（頁內區塊）時：先改該頁 DOM，再修死錨連結；**不要**只動導覽、也不要把「刪區塊」擴成刪頂欄整段。細節見 **`user-scope-and-nav.mdc`**（§ 頁面錨點刪除）。
@@ -65,7 +65,7 @@ alwaysApply: true
 | 新頁要**正式開放** | 寫進 `buildPortalNavInnerHTML`（`assets/js/portal-nav.js`），並**確認檔名不在** `COMING_SOON_PAGES`。若曾暫時關閉，記得從 Set **刪除**該檔名。 |
 | 新頁先**占位、不開放** | 可選擇：仍寫進導覽，但把檔名**加進** `COMING_SOON_PAGES`；或暫時不要放進導覽。 |
 
-（目前 Set 內含哪些檔，以 `assets/js/portal-nav.js` 為準；站主明講開放後才從 Set 移除該檔名，例如 `totoga2.html`。）
+（目前 Set 內含哪些檔，以 `assets/js/portal-nav.js` 為準；站主明講開放後才從 Set 移除該檔名，例如 `readable.html`。）
 
 ---
 

.cursor/rules/user-scope-and-nav.mdc

@@ -9,7 +9,7 @@ alwaysApply: true
 
 1. **`extra/site-guide.html`**：站主自用；該頁頂欄 `data-portal-nav-all-open` → **全部連結可點**；主文 `<main class="site-guide-main">` 的 `<a>` **不准**用腳本改成籌備中。
 2. **其他每一頁**：未公開＝**籌備中**（頂欄＋頁內連結皆鎖、須寫出「籌備中」）；依 **`COMING_SOON_PAGES` / `INDEX_NAV_OPEN_HASHES`**；不准在其他頁加 `all-open`。
-3. **`totoga2.html`**、**`variety.html`**：站主沒說「對外開放」→ **留在 `COMING_SOON_PAGES`**；不得自以為可以幫忙開放。
+3. **`totoga2/readable.html`**（檔名 `readable.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` 黑底規則。
@@ -26,11 +26,11 @@ alwaysApply: true
 - **不得**因為「內容已搬到某頁」就自行推論「導覽也應該開放」——導覽是否開放**只聽使用者口述**。
 - 若使用者只要求搬內容、刪檔、改站內某段文案，**預設不改** `assets/js/portal-nav.js` 的開放狀態與連結目標。
 
-## 「傳奇的轉折」與 `fallen/totoga2.html`（特別記牢）
+## 「傳奇的轉折」與 `totoga2/readable.html`（特別記牢）
 
-- 頂欄模板裡「傳奇的轉折」連到 **`fallen/totoga2.html`**（見 `buildPortalNavInnerHTML`）。
+- 頂欄「圖文好讀版」連到 **`totoga2/readable.html`**（見 `buildPortalNavInnerHTML`）。
-- 使用者**沒有明講對外開放整合頁**時：`totoga2.html` **必須**在 **`COMING_SOON_PAGES`** 裡 → 訪客頂欄該項為籌備中、**不可點進**。
+- 使用者**沒有明講對外開放整合頁**時：`readable.html` **必須**在 **`COMING_SOON_PAGES`** 裡 → 訪客頂欄該項為籌備中、**不可點進**。
-- **禁止**在未獲同意下：從 Set **移除** `totoga2.html`、或改成連到其他頁並當成已開放。
+- **禁止**在未獲同意下：從 Set **移除** `readable.html`、或改成連到其他頁並當成已開放。
 - 首頁錨點另依 **`INDEX_NAV_OPEN_HASHES`**；與「傳奇的轉折／totoga2」分開判斷。
 
 ## 實作前自檢

.cursor/site-voice-notes.md

@@ -28,7 +28,7 @@
 
 ## 六六歌2 電子書 intro
 
-- 站主採用版：第一次感性改寫（「四月那場重逢…」開頭），見 `extra/totoga2-copy-ebook.html`。  
+- 站主採用版：第一次感性改寫（「四月那場重逢…」開頭），見 `totoga2/ebook.html`。  
 - **勿**再改成 FlipHTML5／PDF 技術說明，也**勿**把 `#start`＋整條 timeline 名詞塞滿一段（東拼西湊版）。
 
 ## 其他

.cursor/totoga2-video-notes.md

@@ -6,4 +6,4 @@
 - 中集、下集 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` 等頁仍保留原四鈕列。
+- 資訊架構：頂部黃色列僅 **上集／中集／下集**（`role="tab"`）；四入口為 `totoga2/` 下 `timeline.html`、`ebook.html`、`readable.html`、`video.html`，頁內四鈕列共用 `split-nav.css`。

assets/css/index.css

@@ -438,3 +438,13 @@ header#origin .site-header-inner .subtitle-wrap::after {
         font-size: 1rem;
     }
 }
+
+/* 首頁時間軸末：2019／NOW 改為未完待續占位 */
+.home-page #timeline .story-node--tbc {
+    text-align: center;
+}
+
+.home-page #timeline .story-node--tbc h3 {
+    margin: 0;
+    white-space: nowrap;
+}

assets/css/style.css

@@ -13,7 +13,7 @@
     --card-bg: #1a1a1a;
     --bg-alt: #fcfaf2;
     --text-main: #333;
-    --text-muted: #888;
+    --text-muted: #4d4d4d;
     --surface: #fffdf7;
     --surface-soft: #fff9e8;
     /* 導覽無法進入之提示後備（互動後各連結以 inline 變數覆寫，每次滑過／聚焦重抽） */
@@ -473,9 +473,7 @@ nav a {
         height: 100dvh;
         margin: 0;
         padding:
-            max(0.85rem, env(safe-area-inset-top, 0px))
+            max(0.85rem, env(safe-area-inset-top, 0px)) clamp(14px, 2vw + 10px, 32px) max(1rem, env(safe-area-inset-bottom, 0px));
-            clamp(14px, 2vw + 10px, 32px)
-            max(1rem, env(safe-area-inset-bottom, 0px));
         z-index: 10000;
         overflow: hidden;
         background-color: var(--black);
@@ -2622,7 +2620,7 @@ body.ebook-ssg2-page .ebook-main p {
     line-height: 1.7;
 }
 
-body.ebook-ssg2-page .ebook-intro.section p + p {
+body.ebook-ssg2-page .ebook-intro.section p+p {
     margin-top: -0.5rem;
     font-size: 0.88rem;
     color: #777;
@@ -2641,7 +2639,7 @@ body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note {
     line-height: 1.5;
 }
 
-body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note + .ebook-intro-note {
+body.ebook-ssg2-page .ebook-intro-notes .ebook-intro-note+.ebook-intro-note {
     margin-top: 0.35rem;
 }
 
@@ -2683,7 +2681,7 @@ body.ebook-ssg2-page .flip-ebook-aspect iframe {
 }
 
 /* PDF.js + PageFlip：與 iframe 相同，填滿 padding-top 預留區，否則父層 height:0 會看不到內容 */
-body.ebook-ssg2-page .flip-ebook-aspect > #my-flipbook {
+body.ebook-ssg2-page .flip-ebook-aspect>#my-flipbook {
     position: absolute;
     left: 0;
     top: 0;
@@ -2720,7 +2718,7 @@ body.ebook-ssg2-page .flip-ebook-aspect.flip-ebook-aspect--pageflip {
     background: #0a0a0a;
 }
 
-body.ebook-ssg2-page .flip-ebook-aspect--pageflip > #my-flipbook {
+body.ebook-ssg2-page .flip-ebook-aspect--pageflip>#my-flipbook {
     position: static;
     width: auto;
     height: auto;
@@ -2765,7 +2763,7 @@ body.ebook-ssg2-page .ebook-back-link {
     margin: 0 0 2.5rem;
 }
 
-/* extra/totoga2-copy-ebook：翻書區與上方 section 同欄寬、無額外外距；#my-flipbook 滿寬＋圓角裁切 */
+/* totoga2/ebook.html：翻書區與上方 section 同欄寬、無額外外距；#my-flipbook 滿寬＋圓角裁切 */
 body.ebook-ssg2-page.totoga2-ebook-copy-page .ebook-intro.section {
     margin-bottom: 1.25rem;
 }
@@ -2790,7 +2788,7 @@ body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect.flip-ebook-aspec
 }
 
 body.ebook-ssg2-page.totoga2-ebook-copy-page #book-container.flip-ebook-aspect--pageflip,
-body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect--pageflip > #my-flipbook {
+body.ebook-ssg2-page.totoga2-ebook-copy-page .flip-ebook-aspect--pageflip>#my-flipbook {
     width: 100%;
     max-width: 100%;
     margin: 0;
@@ -2840,30 +2838,7 @@ body.totoga2-page.totoga2-video-copy-page .ebook-main .bilivideo-tabs__shell {
     margin-right: auto;
 }
 
-body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links {
+/* DOM 上 tablist 在 panels 前（見 totoga2/video.html）；order 讓畫面仍為「影片在上、分集在下」 */
-    text-align: center;
-    font-size: 0.9rem;
-    margin: 0.5rem auto 0.85rem;
-    color: #555;
-}
-
-body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a {
-    color: #4a3d12;
-    font-weight: 650;
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-}
-
-body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links a:hover {
-    color: #221a06;
-}
-
-body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep {
-    margin: 0 0.4rem;
-    opacity: 0.55;
-}
-
-/* DOM 上 tablist 在 panels 前（見 totoga2-video.html）；order 讓畫面仍為「影片在上、分集在下」 */
 body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav {
     order: 2;
     display: flex;
@@ -3007,26 +2982,11 @@ body.totoga2-page .ebook-back-link {
     gap: 12px;
 }
 
-/* extra/totoga2 copy.html — 複本改為三獨立頁後的總覽；主檔 fallen/totoga2.html；子頁共用 .totoga2-split-crossnav */
+/* totoga2/* 子頁共用 .totoga2-split-crossnav */
 body.totoga2-page .totoga2-split-crossnav {
     margin-top: 0.75rem;
 }
 
-body.totoga2-page .totoga2-copy-hub-main {
-    max-width: 960px;
-    margin: 0 auto 2rem;
-    padding: 0 14px;
-}
-
-body.totoga2-page .totoga2-copy-hub-nav {
-    margin-bottom: 2rem;
-}
-
-body.totoga2-page .totoga2-copy-hub-anchor-hint {
-    text-align: center;
-    font-size: 0.95rem;
-}
-
 /* member/member.html — 黑白水晶交錯格（2×4）與懸賞令海報 */
 body.member-crystal-page .member-crystal-main {
     padding: 1.75rem 14px 3rem;

extra/site-guide.html

@@ -314,7 +314,7 @@
             <div class="site-guide-grid site-guide-grid--compact">
                 <article class="site-guide-card site-guide-card--totoga2">
                     <h3><a href="../totoga2/readable.html">六六歌2 · 四入口</a></h3>
-                    <p class="site-guide-note">複本總覽：<a href="totoga2%20copy.html">totoga2 copy.html</a>。章節錨點僅在圖文好讀版內。
+                    <p class="site-guide-note">章節錨點僅在圖文好讀版（<code>totoga2/readable.html</code>）內。
                     </p>
                     <ul class="site-guide-inline-links">
                         <li><a href="../totoga2/timeline.html">時間軸</a></li>
@@ -323,14 +323,14 @@
                         <li><a href="../totoga2/video.html">影片</a></li>
                     </ul>
                     <nav class="site-guide-chapter-nav" aria-label="totoga2 章節">
-                        <a href="readable.html#challenge">無限挑戰</a>
+                        <a href="../totoga2/readable.html#challenge">無限挑戰</a>
-                        <a href="readable.html#ssg2">六六歌2</a>
+                        <a href="../totoga2/readable.html#ssg2">六六歌2</a>
-                        <a href="readable.html#sechskies-profile">水晶男孩</a>
+                        <a href="../totoga2/readable.html#sechskies-profile">水晶男孩</a>
-                        <a href="readable.html#gather">召集</a>
+                        <a href="../totoga2/readable.html#gather">召集</a>
-                        <a href="readable.html#negotiate">交涉</a>
+                        <a href="../totoga2/readable.html#negotiate">交涉</a>
-                        <a href="readable.html#variables">變數</a>
+                        <a href="../totoga2/readable.html#variables">變數</a>
-                        <a href="readable.html#surprise">驚喜</a>
+                        <a href="../totoga2/readable.html#surprise">驚喜</a>
-                        <a href="readable.html#final-stage">登場</a>
+                        <a href="../totoga2/readable.html#final-stage">登場</a>
                     </nav>
                 </article>
             </div>
@@ -467,10 +467,6 @@
                             <td><a href="grok.html">grok.html</a></td>
                             <td>實驗單頁</td>
                         </tr>
-                        <tr>
-                            <td><a href="totoga2%20copy.html">totoga2 copy.html</a></td>
-                            <td>複本總覽</td>
-                        </tr>
                         <tr>
                             <td><a href="Untitled-1.html">Untitled-1.html</a></td>
                             <td>草稿</td>

extra/totoga2 copy.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>水晶男孩｜無限挑戰六六歌2 — 複本分頁導覽</title>
-    <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">
-    <header class="map-archive-header">
-        <div class="header-inner site-header-inner">
-            <h1 class="main-title">無限挑戰 · 六六歌2</h1>
-            <div class="subtitle-wrap">
-                <span class="sub-title">水晶男孩回來啦！</span>
-            </div>
-        </div>
-    </header>
-
-    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
-
-    <canvas id="particles"></canvas>
-
-    <main class="content-container ebook-main totoga2-copy-hub-main">
-        <section class="ebook-intro section" aria-labelledby="totoga2-copy-hub-title">
-            <h2 class="section-title" id="totoga2-copy-hub-title">六六歌2 複本 · 三頁分開</h2>
-            <p class="ebook-intro-lead">
-                原先單頁以按鈕切換「影片／電子書／時間軸＋長文」；此複本改為<strong>三個獨立 HTML</strong>（檔名無空白，較利分享與書籤）。
-                正式整合版仍以 <a href="../totoga2/readable.html">totoga2/readable.html</a> 為準。
-            </p>
-        </section>
-
-        <nav class="ebook-back-link totoga2-split-crossnav totoga2-copy-hub-nav" aria-label="六六歌2 閱讀入口">
-            <a href="../totoga2/timeline.html" class="btn" title="時間軸與紀實八章長文單頁">時間軸</a>
-            <a href="../totoga2/ebook.html" class="btn" title="紀實電子書內容獨立成頁">電子書</a>
-            <a href="../totoga2/readable.html" class="btn" title="單頁整合：影片／電子書／長文模式切換與八章錨點">圖文好讀版</a>
-            <a href="../totoga2/video.html" class="btn" title="無限挑戰 · 六六歌2 嵌入影片單頁">影片</a>
-        </nav>
-
-        <p class="ebook-intro-lead totoga2-copy-hub-anchor-hint">
-            長文章節錨點請用 <a href="../totoga2/timeline.html#challenge">#challenge</a> 等同名 id（見時間軸頁）。
-        </p>
-    </main>
-
-    <p class="ebook-back-link content-container">
-        <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
-        <a href="../totoga2/readable.html" class="btn">主檔 totoga2/readable.html</a>
-    </p>
-
-    <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="../assets/js/particles.js"></script>
-    <script src="../assets/js/portal-nav.js"></script>
-</body>
-
-</html>

extra/totoga2-copy-ebook.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-<head>
-<meta charset="UTF-8">
-<meta http-equiv="refresh" content="0; url=../totoga2/ebook.html">
-<link rel="canonical" href="../totoga2/ebook.html">
-<title>已搬移</title>
-<script>location.replace("../totoga2/ebook.html" + location.hash);</script>
-</head>
-<body><p>頁面已搬至 <a href="../totoga2/ebook.html">totoga2/ebook.html</a></p></body>
-</html>

extra/totoga2-copy-timeline.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-<head>
-<meta charset="UTF-8">
-<meta http-equiv="refresh" content="0; url=../totoga2/timeline.html">
-<link rel="canonical" href="../totoga2/timeline.html">
-<title>已搬移</title>
-<script>location.replace("../totoga2/timeline.html" + location.hash);</script>
-</head>
-<body><p>頁面已搬至 <a href="../totoga2/timeline.html">totoga2/timeline.html</a></p></body>
-</html>

extra/totoga2-video.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-<head>
-<meta charset="UTF-8">
-<meta http-equiv="refresh" content="0; url=../totoga2/video.html">
-<link rel="canonical" href="../totoga2/video.html">
-<title>已搬移</title>
-<script>location.replace("../totoga2/video.html" + location.hash);</script>
-</head>
-<body><p>頁面已搬至 <a href="../totoga2/video.html">totoga2/video.html</a></p></body>
-</html>

fallen/totoga2(old).html

@@ -1,257 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>水晶男孩｜無限挑戰六六歌2 — 紀實電子書</title>
-    <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">
-    <style>
-        /* 僅本頁 main：加寬、取消左右內距（覆寫 .chronicle-reader / .content-container 的 padding） */
-        body.totoga2-page main#totoga2-reader.chronicle-reader {
-            max-width: min(1280px, 96vw);
-            padding-left: 0;
-            padding-right: 0;
-            position: relative;
-            z-index: 1;
-        }
-
-        /* 覆寫全站 .container（1200px／置中／大 padding），此頁圖列專用。
-         * 勿沿用全站 header,nav,.container 的 z-index:1，否則圖列會疊在後方 h2、p 內文之上。 */
-        body.totoga2-page #totoga2-reader .container {
-            width: 100%;
-            max-width: none;
-            margin: 0;
-            padding: 0;
-            height: auto;
-            min-height: 0;
-            background-color: #ccc;
-            clear: both;
-            box-sizing: border-box;
-            position: static;
-            z-index: auto;
-        }
-
-        /* 章節卡 .chronicle-chapter 有左右 padding；直屬 .container 負邊距拉出 → 貼滿 main 內寬 */
-        body.totoga2-page #totoga2-reader .chronicle-chapter {
-            --totoga-chapter-pad-inline: 20px;
-            overflow: visible;
-            display: flow-root;
-        }
-
-        body.totoga2-page #totoga2-reader .chronicle-chapter>h2,
-        body.totoga2-page #totoga2-reader .chronicle-chapter>p {
-            clear: both;
-            position: relative;
-            z-index: 1;
-        }
-
-        body.totoga2-page #totoga2-reader .chronicle-chapter>.container {
-            width: calc(100% + 2 * var(--totoga-chapter-pad-inline));
-            margin-left: calc(-1 * var(--totoga-chapter-pad-inline));
-            margin-right: calc(-1 * var(--totoga-chapter-pad-inline));
-        }
-
-        @media (max-width: 640px) {
-            body.totoga2-page #totoga2-reader .chronicle-chapter {
-                --totoga-chapter-pad-inline: 14px;
-            }
-        }
-
-        totoga2.html
-
-        /* 含圖列：必須寫在含 #totoga2-reader 的選取器上，否則會輸給上一段 #totoga2-reader .container 的 height，圖會溢出蓋住後文 */
-        body.totoga2-page #totoga2-reader.chronicle-reader .container:has(img) {
-            height: auto;
-            min-height: 0;
-            overflow: visible;
-        }
-
-        body.totoga2-page #totoga2-reader.chronicle-reader .container:has(img)::after {
-            content: "";
-            display: table;
-            clear: both;
-        }
-
-        body.totoga2-page #totoga2-reader.chronicle-reader .container:has(img)>[class^="container"] {
-            height: auto;
-            min-height: 0;
-            overflow: visible;
-        }
-
-        .container11 {
-            width: 100%;
-            height: 100%;
-            background-color: lightpink;
-        }
-
-        .container21 {
-            float: right;
-            width: 50%;
-            height: 100%;
-            background-color: lightblue;
-        }
-
-        .container22 {
-            float: left;
-            width: 50%;
-            height: 100%;
-            background-color: lightyellow;
-        }
-
-        .container31 {
-            float: left;
-            width: 33%;
-            height: 100%;
-            background-color: darkblue;
-        }
-
-        .container32 {
-            float: left;
-            width: 33%;
-            height: 100%;
-            background-color: darkgreen;
-        }
-
-        .container33 {
-            float: right;
-            width: 33%;
-            height: 100%;
-            background-color: darkmagenta;
-        }
-
-        .container41 {
-            float: left;
-            width: 25%;
-            height: 100%;
-            background-color: lightblue;
-        }
-
-        .container42 {
-            float: left;
-            width: 25%;
-            height: 100%;
-            background-color: lightgreen;
-        }
-
-        .container43 {
-            float: right;
-            width: 25%;
-            height: 100%;
-            background-color: lightpink;
-        }
-
-        .container44 {
-            float: right;
-            width: 25%;
-            height: 100%;
-            background-color: lightyellow;
-        }
-
-        /* 圖在欄寬內鋪滿，高度由瀏覽器依 intrinsic ratio 計算（須配合上方 :has(img) 拿掉固定列高） */
-        body.totoga2-page .chronicle-reader img {
-            width: 100%;
-            max-width: 100%;
-            height: auto;
-            display: block;
-        }
-    </style>
-</head>
-
-<body class="ebook-ssg2-page totoga2-page">
-    <header class="map-archive-header">
-        <div class="header-inner site-header-inner">
-            <h1 class="main-title">無限挑戰 · 六六歌2</h1>
-            <div class="subtitle-wrap">
-                <span class="sub-title">水晶男孩回來啦！</span>
-            </div>
-        </div>
-    </header>
-
-    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
-
-    <canvas id="particles"></canvas>
-    <main class="content-container chronicle-reader" id="totoga2-reader" data-mode="scroll">
-        <article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
-            <!-- 序號一：第一列 container21（右欄 float:right）+ container22（左欄 float:left）→ 畫面左 01、右 02 -->
-
-            <!-- 序號二：第二列單一全寬 container11 -->
-            <div class="container">
-                <div class="container11">
-                    <img src="../assets/images/totoga2/web/cover.jpg" alt="六六歌2">
-                </div>
-            </div>
-            <div class="container">
-                <div class="container22">
-                </div>
-                <div class="container21">
-                    <img src="" alt="六六歌2 電子書跨頁圖（序號一 · 右）">
-                </div>
-            </div>
-            <h2>04 無限挑戰</h2>
-            <p>《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。</p>
-            <p>第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。</p>
-        </article>
-
-        <article class="chronicle-chapter" id="ssg2" data-title="六六歌第二季">
-            <h2>06 六六歌第二季</h2>
-            <p>第二季改成「為單一團體打造完整回歸敘事」，保密層級更高，連主持群都縮小到劉在錫與 HAHA，避免消息提前走漏。</p>
-            <p>從開場的復古裝扮、試探式線索到真正揭曉團體身份，節目節奏在搞笑與懸念間拉開這場 16 年重逢序章。</p>
-        </article>
-
-        <article class="chronicle-chapter" id="sechskies-profile" data-title="水晶男孩">
-            <h2>08 水晶男孩</h2>
-            <p>1997 出道後迅速登頂，與同世代頂流並列，短短三年創下極高銷量與舞台紀錄，卻在 2000 無預警解散，留下集體創傷。</p>
-            <p>16 年間六人從未以水晶男孩名義完整合體，這次企劃不只是回憶，而是回應當年未說完的離別。</p>
-        </article>
-
-        <article class="chronicle-chapter" id="gather" data-title="召集">
-            <h2>10 召集</h2>
-            <p>製作組先與隊長殷志源交涉，再透過隱藏攝影機確認成員意願。大家都希望重組，卻同時知道最困難的拼圖是離開演藝圈多年的高志溶。</p>
-            <p>這個階段的重點不是舞台，而是「願不願意再次站在一起」的心理門檻。</p>
-        </article>
-
-        <article class="chronicle-chapter" id="negotiate" data-title="正式交涉">
-            <h2>11 正式交涉</h2>
-            <p>主持人與成員深度對話，回顧解散緣由、舞台記憶、KTV 挑戰與游擊演唱會規則。笑鬧之間，團魂逐漸浮現。</p>
-            <p>同時，節目也把高志溶議題正式擺上檯面：如果不是完整體，這次回歸是否還成立？</p>
-        </article>
-
-        <article class="chronicle-chapter" id="variables" data-title="變數">
-            <h2>16 變數</h2>
-            <p>排練期間接連出現傷病、手術需求與消息外流，原本理想的游擊演唱會計畫屢次被迫改寫，團隊陷入 B 計畫陰影。</p>
-            <p>在體力與心理都被拉到極限的情況下，成員仍選擇撐住，只為把久違舞台交回給等待 16 年的小黃。</p>
-        </article>
-
-        <article class="chronicle-chapter" id="surprise" data-title="驚喜">
-            <h2>19 驚喜</h2>
-            <p>當所有人幾乎接受「不完整」時，節目仍悄悄推進最後安排。高志溶與成員的情感張力在此段達到最高點。</p>
-            <p>這份驚喜不是綜藝反轉，而是把六顆水晶的空位真正填回舞台。</p>
-        </article>
-
-        <article class="chronicle-chapter" id="final-stage" data-title="登場">
-            <h2>21 登場</h2>
-            <p>眼罩揭開後，滿場黃海與哭聲同時湧現。從《請記得我》到安可，《離別曲》在那一晚變成了「重逢證詞」。</p>
-            <p>2000 的缺憾，在 2016 終於補上。這一頁不是結束，而是團體與粉絲共同完成的回歸章節。</p>
-        </article>
-    </main>
-
-    <p class="ebook-back-link content-container">
-        <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
-    </p>
-
-    <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="../assets/js/particles.js"></script>
-    <script src="../assets/js/portal-nav.js"></script>
-    <script src="../assets/js/totoga2.js"></script>
-</body>
-
-</html>

fallen/totoga2.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-TW">
-<head>
-<meta charset="UTF-8">
-<meta http-equiv="refresh" content="0; url=../totoga2/readable.html">
-<link rel="canonical" href="../totoga2/readable.html">
-<title>已搬移</title>
-<script>location.replace("../totoga2/readable.html" + location.hash);</script>
-</head>
-<body><p>頁面已搬至 <a href="../totoga2/readable.html">totoga2/readable.html</a></p></body>
-</html>

index.html

@@ -21,7 +21,7 @@
                     <span class="sub-title">六顆永恆的水晶 • 左右命運的傳奇</span>
                 </div>
             </div>
-            <a href="#start" class="btn">從這裡開始淪陷</a>
+            <!-- <a href="#start" class="btn">從這裡開始淪陷</a> -->
         </div>
     </header>
 
@@ -158,14 +158,8 @@
                     </p>
                 </article>
 
-                <article class="story-node" data-era="2019">
+                <article class="story-node story-node--tbc" data-era="未完">
-                    <h3>體制調整與穩定</h3>
+                    <h3>未完待續</h3>
-                    <p>調整為四人組合（殷志源、李宰鎮、金在德、張水院），繼續以經典魅力活躍於樂壇與綜藝。</p>
-                </article>
-
-                <article class="story-node" data-era="NOW">
-                    <h3>至今：個人與團體並行</h3>
-                    <p>隊長殷志源活躍於各類綜藝節目，成員們也積極參與音樂與個人品牌活動。雖然活動節奏放緩，但水晶男孩仍是 K-POP 史上的長壽標竿。</p>
                 </article>
             </div>
         </section>

totoga2/readable.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="zh-TW">
 
 <head>
@@ -60,8 +60,6 @@
             }
         }
 
-        totoga2.html
-
         /* 含圖列：必須寫在含 #totoga2-reader 的選取器上，否則會輸給上一段 #totoga2-reader .container 的 height，圖會溢出蓋住後文 */
         body.totoga2-page #totoga2-reader.chronicle-reader .container:has(img) {
             height: auto;

待確認/_timeline-2016-拆月-還原.html

@@ -1,16 +0,0 @@
-<!-- 僅拆原 2016.05 為 05／09／12；合體卡 data-era="2016" 不動 -->
-                <article class="story-node" data-era="2016.05">
-                    <h3>從路人到鐵粉：從夢境進現實</h3>
-                    <p>當《無限挑戰》的燈光熄滅，原以為那場重逢只是曇花一現。當我們陷入瘋狂但卻不敢過度期待合體、只在螢幕前等待每個oppa消息的時光，終於盼到了 5月 11
-                        日與 YG的簽約消息，所有新舊小黃從絕望中打醒。從未知的空虛到塵埃落定的感動——原來這不是終點，奇蹡真的在現實生了根。</p>
-                </article>
-                <article class="story-node" data-era="2016.09">
-                    <h3>九月首場：黃色海洋裡的羈絆</h3>
-                    <p>四月的重逢是老黃們守候十六年的淚水；而九月的單獨演唱會，則讓無數新小黃見證了那份無法動搖的羈絆。在那片黃色海洋裡，我們不只愛上了水晶男孩，更愛上了他們與小黃之間的愛情。雖然遺憾沒能親眼看見六人並肩的畫面，但那股新舊交織的生命力，確實為水晶注入了新的靈魂。
-                    </p>
-                </article>
-                <article class="story-node" data-era="2016.12">
-                    <h3>聖誕夜：另一種形式的陪伴</h3>
-                    <p>而志溶雖然未參與合體，卻在十二月聖誕夜那場釜山演唱會落幕當天，帶著孩子在《超人回來了》的預告驚喜現身。這不是告別，而是他選擇以另一種最真實、最溫馨的形式，在現實生活中繼續陪伴著大家。舞台上的空位雖然令人難過，但看到他帶著孩子幸福的模樣，我們才明白：原來水晶與粉絲的羈絆，早已超越了表演的定義，而是要在彼此的生活裡，一起寫下新的篇章。
-                    </p>
-                </article>