style 調整配色

variety/NJTW/NJTW5.html

@@ -44,19 +44,12 @@
     </header>
     <div class="container">
         <h2 class="section-title">鬼神介紹</h2>
-        <!-- 第一排 -->
+        <!-- tr/td 必須放在 <table> 裡；外層用 div 接在 .container 的 grid 下，佔滿整列 -->
+        <div class="njtw-member-table-wrap">
+            <table class="njtw-member-table">
+                <tbody>
                     <tr>
-            <td></td>
+                        <td>
-            <td></td>
-            <td></td>
-            <td></td>
-        </tr>
-        <tr>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-        </tr>
                 <div class="member-card m1 parchment-card">
                     <div class="parchment-inner">
 
@@ -101,7 +94,8 @@
                         <p class="parchment-tags">#吃貨精靈 #低聲細語</p>
                     </div>
                 </div>
-
+            </td>
+            <td>
                 <div class="member-card m2 parchment-card">
                     <div class="parchment-inner">
                         <div class="parchment-headline">
@@ -145,7 +139,8 @@
                         <p class="parchment-tags">#最強短腿 #瘋狂跑動</p>
                     </div>
                 </div>
-
+            </td>
+            <td>
                 <div class="member-card m3 parchment-card">
                     <div class="parchment-inner">
                         <div class="parchment-headline">
@@ -193,8 +188,12 @@
                         <p class="parchment-tags">#瘋子使者 #最帥鬼怪</p>
                     </div>
                 </div>
-
+            </td>
-        <!-- 第二排 -->
+            <td class="njtw-layout-slot">OB</td>
+                    </tr>
+                    <tr>
+                        <td class="njtw-layout-slot">YB</td>
+            <td>
                 <div class="member-card m4 parchment-card">
                     <div class="parchment-inner">
                         <div class="parchment-headline">
@@ -236,7 +235,8 @@
                         <p class="parchment-tags">#美男殭屍 #運動白痴</p>
                     </div>
                 </div>
-
+            </td>
+            <td>
                 <div class="member-card m5 parchment-card">
                     <div class="parchment-inner">
                         <div class="parchment-headline">
@@ -282,7 +282,8 @@
                         <p class="parchment-tags">#長髮宋 #綜藝神降臨</p>
                     </div>
                 </div>
-
+            </td>
+            <td>
                 <div class="member-card m6 parchment-card">
                     <div class="parchment-inner">
                         <div class="parchment-headline">
@@ -327,6 +328,11 @@
                         <p class="parchment-tags">#新弟子 #德古拉</p>
                     </div>
                 </div>
+            </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
     <!-- 影片區塊：將 iframe 的 src 換成 https://www.youtube.com/embed/你的影片ID -->
     <div class="video-container">

variety/NJTW/njtw5.css

@@ -114,6 +114,44 @@ body.njtw5-page .container {
     box-sizing: border-box;
 }
 
+/* 成員 2×4 表格：必須為 table > tbody > tr > td，不可把 tr 直接放在 div 裡 */
+body.njtw5-page .njtw-member-table-wrap {
+    grid-column: 1 / -1;
+    width: 100%;
+    min-width: 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+body.njtw5-page .njtw-member-table {
+    width: max-content;
+    min-width: 100%;
+    border-collapse: separate;
+    border-spacing: clamp(10px, 2vw, 18px);
+    table-layout: auto;
+}
+
+body.njtw5-page .njtw-member-table td {
+    padding: 0;
+    vertical-align: top;
+}
+
+body.njtw5-page .njtw-member-table td:not(.njtw-layout-slot) {
+    min-width: clamp(220px, 24vw, 300px);
+}
+
+body.njtw5-page .njtw-member-table .njtw-layout-slot {
+    width: 1%;
+    white-space: nowrap;
+    vertical-align: middle;
+    text-align: center;
+    font-weight: 800;
+    font-size: clamp(1.35rem, 3.5vw, 1.85rem);
+    letter-spacing: 0.12em;
+    color: var(--njtw-ink);
+    opacity: 0.75;
+}
+
 body.njtw5-page .container .section-title,
 body.njtw5-page .video-container .video-title {
     font-weight: 800;
@@ -348,7 +386,7 @@ body.njtw5-page .parchment-card .parchment-stats {
 
 body.njtw5-page .parchment-card .parchment-stat-row {
     display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: auto minmax(min-content, 1fr);
     align-items: center;
     gap: 8px 10px;
     margin-bottom: clamp(8px, 1.6vw, 12px);
@@ -368,16 +406,14 @@ body.njtw5-page .parchment-card .parchment-stat-label {
 }
 body.njtw5-page .parchment-card .parchment-stat-balls {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     justify-content: flex-end;
     align-items: center;
     gap: 4px;
-    min-width: 0;
+    min-width: min-content;
-    overflow-x: auto;
+    overflow-x: visible;
-    overflow-y: hidden;
+    overflow-y: visible;
-    -webkit-overflow-scrolling: touch;
     padding-bottom: 2px;
-    scrollbar-width: thin;
 }
 
 body.njtw5-page .parchment-card .parchment-stat-balls img {