From 58da2d56e424372208d02fef94b8d0edb7ca60cd Mon Sep 17 00:00:00 2001
From: JekkiNoopy <jekkinoopy@gmail.com>
Date: Fri, 15 May 2026 07:44:22 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=B0=88=E6=A1=88=E8=A8=AD=E8=A8=88?=
 =?UTF-8?q?=E8=A6=8F=E7=AF=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/style.css          | 35 ++++++++++++++++++++----------
 extra/totoga2-copy-video.html | 41 +++++++++++++++++++++--------------
 2 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 1ad3e2d..3f56bb6 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -793,7 +793,7 @@ section {
 }
 
 /* 金句放在「成立的初衷」段落下、右欄填空（與左欄 Logo 對齊節奏） */
-.mission-section .mission-row--intro .mission-row__body > .slogan-quote--mission {
+.mission-section .mission-row--intro .mission-row__body>.slogan-quote--mission {
     margin: 1.35rem 0 0;
     max-width: none;
     width: 100%;
@@ -801,7 +801,7 @@ section {
     text-align: left;
 }
 
-.mission-section .mission-row--intro .mission-row__body > .slogan-quote--mission .slogan-quote__inner {
+.mission-section .mission-row--intro .mission-row__body>.slogan-quote--mission .slogan-quote__inner {
     text-align: left;
 }
 
@@ -841,7 +841,7 @@ section {
 }
 
 /* 第二行：左縮排約一字／「i」寬，與上行「↑」後正文對齊 */
-.mission-section .mission-row--intro .logo-wrapper .caption > .caption__line:not(.caption__line--title) {
+.mission-section .mission-row--intro .logo-wrapper .caption>.caption__line:not(.caption__line--title) {
     margin-left: 1ch;
 }
 
@@ -1581,7 +1581,7 @@ footer a .mark_b {
 .map-archive-header .main-title {
     font-size: clamp(2rem, 4.5vw, 3.2rem);
     font-weight: 900;
-    color: var(--yellow);
+    color: var(--yellow, var(--primary));
     letter-spacing: 6px;
     text-transform: uppercase;
     margin: 0;
@@ -2178,7 +2178,7 @@ body.totoga2-page.totoga2-video-copy-page {
     overflow-x: hidden;
 }
 
-/* 節目影片複本：頂列為上／中／下集（獨立 .btn）；播放器外殼內僅 iframe */
+/* 節目影片複本：上／中／下集在播放器外殼內、緊貼 iframe 上方；維持全站 .btn 黃膠囊 */
 body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell {
     max-width: 960px;
     margin-left: auto;
@@ -2188,7 +2188,7 @@ body.totoga2-page.totoga2-video-copy-page .bilivideo-hub .bilivideo-tabs__shell
 body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links {
     text-align: center;
     font-size: 0.9rem;
-    margin: 0.35rem auto 0.85rem;
+    margin: 0.5rem auto 0.85rem;
     color: #555;
 }
 
@@ -2208,13 +2208,26 @@ body.totoga2-page.totoga2-video-copy-page .totoga2-copy-sibling-links__sep {
     opacity: 0.55;
 }
 
-body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .btn {
-    opacity: 0.9;
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    padding: 12px 14px 14px;
+    margin: 0;
+    background: #0a0a0a;
+    border-bottom: 1px solid rgba(255, 204, 0, 0.28);
 }
 
-body.totoga2-page.totoga2-video-copy-page .bilivideo-episode-nav .bilivideo-episode-nav__tab--active {
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav .btn {
+    margin: 0;
+    opacity: 0.92;
+}
+
+body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell .bilivideo-episode-nav .bilivideo-episode-nav__tab--active {
     opacity: 1;
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28);
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.32);
 }
 
 body.totoga2-page.totoga2-video-copy-page .bilivideo-tabs__shell {
@@ -2629,7 +2642,7 @@ body.site-guide-page .site-guide-group--nav-hero {
     box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
 }
 
-body.site-guide-page .site-guide-group--nav-hero > .section-title {
+body.site-guide-page .site-guide-group--nav-hero>.section-title {
     margin-bottom: 0.5rem;
 }
 
diff --git a/extra/totoga2-copy-video.html b/extra/totoga2-copy-video.html
index 9a7aa80..4bcac65 100644
--- a/extra/totoga2-copy-video.html
+++ b/extra/totoga2-copy-video.html
@@ -25,14 +25,6 @@
     <canvas id="particles"></canvas>
 
     <div id="bilivideo-tabs" class="bilivideo-hub">
-        <nav class="ebook-back-link content-container totoga2-split-crossnav 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" aria-selected="true">上集</button>
-            <button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-2"
-                aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
-            <button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-3"
-                aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
-        </nav>
         <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>
@@ -46,24 +38,41 @@
                 <h2 class="section-title" id="ebook-bilivideo-heading">節目影片</h2>
 
                 <div class="bilivideo-tabs__shell">
+                    <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"
+                            aria-selected="true">上集</button>
+                        <button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-2"
+                            aria-controls="bilivideo-panel-2" aria-selected="false" tabindex="-1">中集</button>
+                        <button type="button" class="btn bilivideo-episode-nav__tab" role="tab" id="bilivideo-tab-3"
+                            aria-controls="bilivideo-panel-3" aria-selected="false" tabindex="-1">下集</button>
+                    </nav>
                     <div class="bilivideo-tabs__panels">
-                        <div class="bilivideo-tabs__panel" role="tabpanel" id="bilivideo-panel-1" aria-labelledby="bilivideo-tab-1">
+                        <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>
+                                    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-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>
+                                <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-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>
+                                <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>