feat 電子書

.cursor/totoga2-video-notes.md

@@ -0,0 +1,3 @@
+# 影片頁筆記（索引）
+
+編輯規格以 **`docs/totoga2-video-notes.md`** 為準；對應頁面為 `extra/totoga2-video.html`。

assets/css/style.css

@@ -61,8 +61,8 @@ header {
     position: relative;
 }
 
-/* 導覽列 */
-nav {
+/* 導覽列（排除 portal、B 站分集 tab 等自帶版面之 nav，避免 space-between／大 padding 破壞） */
+nav:not(.portal-nav):not(.bilivideo-episode-nav) {
     background-color: var(--black);
     padding: 0.8rem;
     display: flex;
@@ -86,25 +86,20 @@ nav {
 
 }
 
-nav ul {
+nav:not(.portal-nav):not(.bilivideo-episode-nav) ul {
     list-style: none;
     display: flex;
     justify-content: center;
     gap: 24px;
 }
 
+/* 不寫 color：主色／hover 交給 .portal-nav 與全站 `a {}`；避免黃字規則意外影響可及元件 */
 nav a {
-    color: var(--primary);
     text-decoration: none;
     font-size: 0.95rem;
     letter-spacing: 1px;
 }
 
-
-nav a:hover {
-    color: white;
-}
-
 .portal-nav li {
     position: relative;
     padding-bottom: 8px;
@@ -2119,7 +2114,7 @@ body.ebook-ssg2-page .ebook-intro.section {
 body.ebook-ssg2-page .flip-ebook-shell {
     position: relative;
     width: 100%;
-    max-width: 1100px;
+    max-width: min(1000px, 96vw);
     margin: 0 auto 2rem;
     border-radius: 14px;
     overflow: hidden;
@@ -2143,6 +2138,63 @@ body.ebook-ssg2-page .flip-ebook-aspect iframe {
     top: 0;
 }
 
+/* PDF.js + PageFlip：與 iframe 相同，填滿 padding-top 預留區，否則父層 height:0 會看不到內容 */
+body.ebook-ssg2-page .flip-ebook-aspect > #my-flipbook {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+}
+
+body.ebook-ssg2-page .flip-ebook-aspect .ebook-pdf-error {
+    margin: 0;
+    padding: 1rem 1.25rem;
+    color: #5c3d00;
+    background: #fff7da;
+    border-radius: 10px;
+    font-size: 0.95rem;
+    line-height: 1.55;
+}
+
+body.ebook-ssg2-page .flip-ebook-aspect .ebook-pdf-error code {
+    font-size: 0.85em;
+    word-break: break-all;
+}
+
+/* PageFlip + PDF.js：不用 iframe 的 padding-top 比例盒，避免書被壓小、擠扁 */
+body.ebook-ssg2-page .flip-ebook-aspect.flip-ebook-aspect--pageflip {
+    height: auto;
+    padding-top: 0;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: clamp(12px, 2vw, 20px);
+    background: #0a0a0a;
+}
+
+body.ebook-ssg2-page .flip-ebook-aspect--pageflip > #my-flipbook {
+    position: static;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    overflow: visible;
+}
+
+body.ebook-ssg2-page #my-flipbook .page {
+    background: #fff;
+}
+
+body.ebook-ssg2-page #my-flipbook .page canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
 body.ebook-ssg2-page .ebook-back-link {
     text-align: center;
     margin: 0 0 2.5rem;
@@ -2178,7 +2230,7 @@ body.totoga2-page.totoga2-video-copy-page {
     overflow-x: hidden;
 }
 
-/* 節目影片複本：上／中／下集在播放器外殼內、緊貼 iframe 上方；維持全站 .btn 黃膠囊 */
+/* 節目影片複本：上／中／下集在播放器外殼內、緊貼 iframe 下方；維持全站 .btn 黃膠囊 */
 body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell {
     max-width: 960px;
     margin-left: auto;
@@ -2208,29 +2260,48 @@ body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep {
     opacity: 0.55;
 }
 
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav {
+/* 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;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 10px;
-    padding: 12px 14px 14px;
+    width: 100%;
+    max-width: none;
+    box-sizing: border-box;
+    padding: 14px 14px 12px;
     margin: 0;
     background: #0a0a0a;
-    border-bottom: 1px solid rgba(255, 204, 0, 0.28);
+    border-top: 1px solid rgba(255, 204, 0, 0.28);
+    flex-shrink: 0;
 }
 
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav .btn {
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav .btn {
     margin: 0;
+    flex: 0 0 auto;
     opacity: 0.92;
+    color: #141414;
+    -webkit-text-fill-color: #141414;
+    font-family: inherit;
 }
 
-body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav .bilivideo-episode-nav__tab--active {
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav .btn:hover,
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav .btn:focus-visible {
+    color: #141414;
+    -webkit-text-fill-color: #141414;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell nav.bilivideo-episode-nav .bilivideo-episode-nav__tab--active {
     opacity: 1;
     box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.32);
 }
 
 body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
     border-radius: 14px;
     overflow: hidden;
     border: 1px solid rgba(255, 204, 0, 0.38);
@@ -2239,6 +2310,9 @@ body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
 }
 
 body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__panels {
+    order: 1;
+    flex: 0 0 auto;
+    min-width: 0;
     overflow: hidden;
     background: #000;
 }

docs/totoga2-video-notes.md

@@ -1,6 +1,6 @@
-# 筆記：`extra/totoga2-copy-video.html`（站主／編輯用，不對讀者顯示）
+# 筆記：`extra/totoga2-video.html`（站主／編輯用，不對讀者顯示）
 
-對應檔案：`extra/totoga2-copy-video.html`。
+對應檔案：`extra/totoga2-video.html`。
 
 - 以下為 Bilibili 嵌入播放器（16：9）。請用上集／中集／下集分頁切換；若無法播放請至站內搜尋同一 BV 號。中集、下集可將 iframe 的 `bvid` 換成分集連結。
 - 中集、下集 iframe 使用 `data-src`，第一次切到該分頁時由頁內 script 寫入 `src`；改連結時請改 `data-src`（或已寫入後的 `src`）。

extra/site-guide.html

@@ -119,9 +119,9 @@
                             <td class="site-guide-nav-link-cell"><span class="site-guide-nav-nolink">—</span></td>
                         </tr>
                         <tr data-site-guide-depth="3">
-                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="totoga2-copy-video.html">影片</a></span></td>
+                            <td class="site-guide-nav-menu-cell"><span class="site-guide-nav-name"><a href="totoga2-video.html">影片</a></span></td>
                             <td class="site-guide-nav-desc">無限挑戰 · 六六歌2 嵌入影片單頁。</td>
-                            <td class="site-guide-nav-link-cell"><a href="totoga2-copy-video.html"><code>extra/totoga2-copy-video.html</code></a></td>
+                            <td class="site-guide-nav-link-cell"><a href="totoga2-video.html"><code>extra/totoga2-video.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-copy-ebook.html">電子書</a></span></td>
@@ -254,8 +254,8 @@
                             <td>區塊錨點（<code>#story</code> 不在頂欄白名單）</td>
                         </tr>
                         <tr>
-                            <td><a href="totoga2-copy-video.html">影片</a></td>
-                            <td>平行單頁 · <code>totoga2-copy-video.html</code></td>
+                            <td><a href="totoga2-video.html">影片</a></td>
+                            <td>平行單頁 · <code>totoga2-video.html</code></td>
                         </tr>
                         <tr>
                             <td><a href="totoga2-copy-ebook.html">電子書</a></td>
@@ -277,7 +277,7 @@
                     <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-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="../fallen/totoga2.html">網頁版（TOTOGA2）</a></li>

extra/totoga2 copy.html

@@ -34,7 +34,7 @@
         </section>
 
         <nav class="ebook-back-link totoga2-split-crossnav totoga2-copy-hub-nav" aria-label="六六歌2 複本分頁入口">
-            <a href="totoga2-copy-video.html" class="btn">節目影片 · 三集 Bilibili</a>
+            <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>

extra/totoga2-copy-ebook.html

@@ -25,7 +25,7 @@
     <canvas id="particles"></canvas>
 
     <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 複本分頁">
-        <a href="totoga2-copy-video.html" class="btn">節目影片</a>
+        <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>
@@ -35,21 +35,28 @@
         <section class="ebook-intro section" aria-label="電子書說明">
             <h2 class="section-title">紀實電子書</h2>
             <p class="ebook-intro-lead">
-                以下為《無限挑戰》六六歌2 相關跨頁電子書（FlipHTML5）。若載入較慢，請稍候或重新整理；全螢幕閱讀請使用閱讀器內建控制項。
+                以下為《無限挑戰》六六歌2 紀實跨頁 PDF（以 PDF.js 載入、PageFlip 翻頁）。若載入較慢請稍候；請以本機伺服器開啟頁面（勿用 file://），否則 PDF 可能被瀏覽器擋下。
             </p>
         </section>
 
-        <div class="flip-ebook-shell">
+        <!-- <div class="flip-ebook-shell">
             <div class="flip-ebook-aspect">
-                <iframe src="https://online.fliphtml5.com/tjyxm/vqff/"
-                    title="2023_電子書_無限挑戰六六歌2_final跨頁" allowfullscreen></iframe>
+                <iframe src="https://online.fliphtml5.com/tjyxm/vqff/" title="2023_電子書_無限挑戰六六歌2_final跨頁"
+                    allowfullscreen></iframe>
+            </div>
+        </div> -->
+
+        <div class="flip-ebook-shell">
+            <div id="book-container" class="flip-ebook-aspect flip-ebook-aspect--pageflip">
+                <!-- PDF.js + PageFlip 會在此產生頁面 -->
+                <div id="my-flipbook"></div>
             </div>
         </div>
     </div>
 
     <p class="ebook-back-link content-container">
         <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
-        <a href="totoga2-copy-video.html" class="btn">節目影片（另頁）</a>
+        <a href="totoga2-video.html" class="btn">節目影片（另頁）</a>
         <a href="totoga2-copy-timeline.html" class="btn">時間軸＋八章（另頁）</a>
     </p>
 
@@ -62,6 +69,92 @@
 
     <script src="../assets/js/particles.js"></script>
     <script src="../assets/js/portal-nav.js"></script>
+    <!-- 1. 引入 PDF.js 核心庫 -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+    <!-- 2. 引入 PageFlip -->
+    <script src="https://cdn.jsdelivr.net/npm/page-flip/dist/js/page-flip.browser.js"></script>
+    <script>
+        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+
+        /** 專案內實際存在的 PDF（原 totoga2/ebook/totoga2_ebook.pdf 尚未建檔） */
+        var EBOOK_PDF_URL = '../assets/images/totoga2/totoga2.pdf';
+
+        function showEbookError(message) {
+            var box = document.getElementById('my-flipbook');
+            if (!box) return;
+            box.innerHTML = '<p class="ebook-pdf-error" role="alert">' + message + '</p>';
+        }
+
+        async function initEbook(pdfUrl) {
+            var container = document.getElementById('my-flipbook');
+            if (!container) throw new Error('找不到 #my-flipbook');
+            if (typeof pdfjsLib === 'undefined') throw new Error('PDF.js 未載入');
+            if (typeof St === 'undefined' || !St.PageFlip) throw new Error('PageFlip（St.PageFlip）未載入');
+
+            var loadingTask = pdfjsLib.getDocument(pdfUrl);
+            var pdf = await loadingTask.promise;
+
+            /* 第 1 頁為封面；內文比例以第 2 頁為準（與 PageFlip showCover 一致） */
+            var sizePageIndex = pdf.numPages >= 2 ? 2 : 1;
+            var sizePage = await pdf.getPage(sizePageIndex);
+            var natural = sizePage.getViewport({ scale: 1 });
+            var shell = document.querySelector('.flip-ebook-shell');
+            var maxW = Math.min((shell && shell.clientWidth) || 1000, 1000) - 8;
+            var pageW = Math.max(320, Math.floor(maxW));
+            var pageH = Math.floor(pageW * (natural.height / natural.width));
+            var maxH = Math.floor(window.innerHeight * 0.72);
+            if (pageH > maxH) {
+                pageH = maxH;
+                pageW = Math.floor(pageH * (natural.width / natural.height));
+            }
+            var renderScale = (pageW / natural.width) * Math.min(window.devicePixelRatio || 1, 2);
+
+            for (var i = 1; i <= pdf.numPages; i++) {
+                var page = await pdf.getPage(i);
+                var viewport = page.getViewport({ scale: renderScale });
+
+                var canvas = document.createElement('canvas');
+                var context = canvas.getContext('2d');
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+
+                await page.render({ canvasContext: context, viewport: viewport }).promise;
+
+                var pageElement = document.createElement('div');
+                pageElement.className = 'page';
+                if (i === 1) {
+                    pageElement.setAttribute('data-density', 'hard');
+                } else if (i === pdf.numPages) {
+                    pageElement.setAttribute('data-density', 'hard');
+                }
+                pageElement.appendChild(canvas);
+                container.appendChild(pageElement);
+            }
+
+            var pageFlip = new St.PageFlip(container, {
+                width: pageW,
+                height: pageH,
+                size: 'stretch',
+                // PDF 每個 page 本身已是「A4*2 的攤開幅面」；避免 StPageFlip 在橫向模式下把頁寬視為總寬一半
+                // 導致看起來像把兩頁攤在一起、寬度被切半。
+                usePortrait: true,
+                showCover: true,
+                startPage: 0,
+                drawShadow: true,
+                maxShadowOpacity: 0.4
+            });
+            pageFlip.loadFromHTML(document.querySelectorAll('#my-flipbook .page'));
+        }
+
+        initEbook(EBOOK_PDF_URL).catch(function (err) {
+            console.error(err);
+            showEbookError(
+                '電子書 PDF 無法載入或翻頁初始化失敗。若用本機直接開檔案（file://），請改由本機伺服器開啟；並確認路徑存在：<code>'
+                + EBOOK_PDF_URL + '</code>'
+            );
+        });
+    </script>
+
 </body>
 
 </html>

extra/totoga2-copy-timeline.html

@@ -25,7 +25,7 @@
     <canvas id="particles"></canvas>
 
     <nav class="ebook-back-link content-container totoga2-split-crossnav" aria-label="六六歌2 複本分頁">
-        <a href="totoga2-copy-video.html" class="btn">節目影片</a>
+        <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>
@@ -65,84 +65,22 @@
             </div>
         </section>
 
-        <div class="chronicle-controls content-container totoga2-chronicle-controls">
-            <button type="button" class="mode-btn active" data-totoga-reader-mode="scroll">網漫模式（一路滑下去）</button>
-            <button type="button" class="mode-btn" data-totoga-reader-mode="paged">分頁模式（上一頁 / 下一頁）</button>
-        </div>
+        <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>
 
-        <main class="content-container chronicle-reader" id="totoga2-reader" data-mode="scroll">
-            <article class="chronicle-chapter active" id="challenge" data-title="無限挑戰">
-                <h2>04 無限挑戰</h2>
-                <p>《無限挑戰》是韓國綜藝史上指標性的真人秀節目。「星期六星期六是歌手（六六歌）」企劃，成為水晶男孩 2016 回歸舞台的關鍵起點。</p>
-                <p>第一季掀起 90 年代懷舊熱潮，雖然水晶男孩未能完整出演，卻留下「總有一天要六人完整回到舞台」的遺憾伏筆。</p>
-            </article>
+        <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>
 
-            <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>
-
-        <div class="chronicle-pager content-container" id="totoga2-pager" hidden>
-            <button type="button" id="totoga2-prev" class="btn">上一頁</button>
-            <span id="totoga2-chapter-indicator">1 / 8</span>
-            <button type="button" id="totoga2-next" class="btn">下一頁</button>
-        </div>
-    </div>
-
-    <p class="ebook-back-link content-container">
-        <a href="../index.html#story" class="btn">回到首頁 · 傳奇的轉折</a>
-        <a href="totoga2-copy-video.html" class="btn">節目影片（另頁）</a>
-        <a href="totoga2-copy-ebook.html" 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>
+        <script src="../assets/js/particles.js"></script>
+        <script src="../assets/js/portal-nav.js"></script>
+        <script src="../assets/js/totoga2.js"></script>
 </body>
 
 </html>

extra/totoga2-video.html

@@ -38,6 +38,7 @@
                 <h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
 
                 <div class="bilivideo-tabs__shell">
+                    <!-- tablist 在 DOM 上須先於 iframe，否則 B 站播放器合成層易蓋住下方按鈕文字；畫面順序改由 CSS flex order 控制 -->
                     <nav class="bilivideo-episode-nav" role="tablist" aria-label="節目影片集數">
                         <button type="button" class="btn bilivideo-episode-nav__tab bilivideo-episode-nav__tab--active"
                             role="tab" id="bilivideo-tab-1" aria-controls="bilivideo-panel-1"

fallen/totoga2.html

@@ -41,14 +41,14 @@
             display: flow-root;
         }
 
-        body.totoga2-page #totoga2-reader .chronicle-chapter > h2,
-        body.totoga2-page #totoga2-reader .chronicle-chapter > p {
+        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 {
+        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));
@@ -60,6 +60,8 @@
             }
         }
 
+        totoga2.html
+
         /* 含圖列：必須寫在含 #totoga2-reader 的選取器上，否則會輸給上一段 #totoga2-reader .container 的 height，圖會溢出蓋住後文 */
         body.totoga2-page #totoga2-reader.chronicle-reader .container:has(img) {
             height: auto;
@@ -174,19 +176,18 @@
     <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="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_01.jpg"
-                        alt="六六歌2 電子書跨頁圖（序號一 · 右）">
-                </div>
-            </div>
-            <!-- 序號二：第二列單一全寬 container11 -->
-            <div class="container">
-                <div class="container11">
-                    <img src="../assets/images/totoga2/jpg/2023_電子書_無限挑戰六六歌2_final跨頁_頁面_03.jpg"
-                        alt="六六歌2 電子書跨頁圖（序號二 · 全寬）">
+                    <img src="" alt="六六歌2 電子書跨頁圖（序號一 · 右）">
                 </div>
             </div>
             <h2>04 無限挑戰</h2>