fix: 成員卡片高度固定，未選時明細淡出保留佔位

variety/bangxiao.html

@@ -133,52 +133,39 @@
             margin: 0 0 0.75rem;
         }
 
-        .bangxiao-page .result-members {
+        /* 卡片展開明細：永遠佔空間，卡片高度因此固定，未選時淡出 */
-            display: flex;
+        .bangxiao-page .member-detail {
-            flex-direction: column;
+            visibility: hidden;
-            gap: 8px;
+            opacity: 0;
-            margin-top: 0.85rem;
+            width: 100%;
+            text-align: center;
+            border-top: 1px solid transparent;
+            margin-top: 10px;
+            padding-top: 10px;
+            transition: opacity 0.25s ease, visibility 0.25s ease, border-color 0.25s ease;
         }
 
-        .bangxiao-page .result-member {
+        .bangxiao-page .member-check:has(input:checked) .member-detail {
-            display: grid;
+            visibility: visible;
-            grid-template-columns: auto auto 1fr;
+            opacity: 1;
-            gap: 0 10px;
+            border-top-color: rgba(255, 204, 0, 0.35);
-            align-items: baseline;
-            padding: 8px 12px;
-            background: rgba(255, 204, 0, 0.1);
-            border-radius: 8px;
         }
 
-        .bangxiao-page .result-member__name {
+        .bangxiao-page .member-detail__count {
-            font-weight: 800;
+            display: block;
-            font-size: 0.95rem;
+            font-size: 2rem;
-            color: var(--color-text-dark);
+            font-weight: 900;
-            white-space: nowrap;
-        }
-
-        .bangxiao-page .result-member__count {
-            font-weight: 700;
-            font-size: 0.88rem;
             color: var(--color-brand-dark);
-            white-space: nowrap;
+            letter-spacing: -0.02em;
+            margin: 0 0 6px;
         }
 
-        .bangxiao-page .result-member__works {
+        .bangxiao-page .member-detail__works {
-            font-size: 0.82rem;
+            font-size: 0.76rem;
             color: var(--color-text-muted);
-            line-height: 1.5;
+            line-height: 2;
-        }
+            margin: 0;
-
+            text-align: center;
-        @media (max-width: 540px) {
-            .bangxiao-page .result-member {
-                grid-template-columns: auto auto;
-                grid-template-rows: auto auto;
-            }
-
-            .bangxiao-page .result-member__works {
-                grid-column: 1 / -1;
-            }
         }
 
         @media (max-width: 540px) {
@@ -206,16 +193,15 @@
     <div class="container">
 
         <section class="bangxiao-intro">
-            <h2 class="section-title">為什麼叫爆笑養老院？</h2>
+            <h2 class="section-title">世紀級寶藏庫</h2>
             <p>
-                因為水晶男孩的綜藝節目，<span class="mark_b">多到要看到老才看得完</span>。
+                水晶男孩的綜藝節目，<span class="mark_b">多到要看到老才看得完</span>。
-                從 2016 年回歸後，六個大男孩分別在各種節目裡全力失控——
+                從 1997 年出道、世紀解散後的各自精彩，再到後來的奇蹟合體，這群大男孩不論在哪個時期，都在各種節目裡全力失控——
-                隊長帶著弟弟們上山下海，弟弟們又各自出去繼續暴走，
+                隊長帶著弟弟們上山下海，弟弟們又各自出去繼續暴走，算下來這二十幾年累積的精采清單，多到讓人眼睛發亮。
-                加上超人回來了裡的爸爸系燃點，算下來要補的清單長到讓人頭皮發麻。
             </p>
             <p>
                 在這裡你可以先算算，<span class="mark_y">選完本命之後有幾個節目得補</span>，
-                然後找個舒服的位置坐好，慢慢養老，反正跑不掉了。
+                然後找個舒服的位置坐好，慢慢養老，反正寶藏這麼多，你這輩子是跑不掉了。
             </p>
         </section>
 
@@ -224,7 +210,7 @@
             <div class="subtitle-wrap">
                 <span class="sub-title">SELECT YOUR BIAS</span>
             </div>
-            <p class="checker-lead">勾選你的本命（可複選），算出你的補番清單有多長。</p>
+            <p class="checker-lead">勾選你的本命（可複選），算出你的待補清單有多長。</p>
 
             <div class="member-grid">
                 <label class="member-check member-check--all">
@@ -235,31 +221,55 @@
                     <input type="checkbox" name="member" value="jiwon">
                     <span class="member-check__name">殷志源</span>
                     <span class="member-check__role">Leader・Rapper</span>
+                    <div class="member-detail">
+                        <span class="member-detail__count">50+ 部</span>
+                        <p class="member-detail__works">《兩天一夜》第一季・《新西遊記》系列・《姜食堂》系列</p>
+                    </div>
                 </label>
                 <label class="member-check">
                     <input type="checkbox" name="member" value="jaejin">
                     <span class="member-check__name">李宰鎮</span>
                     <span class="member-check__role">Rapper・Dancer</span>
+                    <div class="member-detail">
+                        <span class="member-detail__count">5 部</span>
+                        <p class="member-detail__works">《無限挑戰》六六歌2・《花樣旅行》・《全知干預視角》</p>
+                    </div>
                 </label>
                 <label class="member-check">
                     <input type="checkbox" name="member" value="jaeduck">
                     <span class="member-check__name">金在德</span>
                     <span class="member-check__role">Rapper・Dancer</span>
+                    <div class="member-detail">
+                        <span class="member-detail__count">10+ 部</span>
+                        <p class="member-detail__works">《尋笑人》・《不朽的名曲》・《與張水院的同居生活》</p>
+                    </div>
                 </label>
                 <label class="member-check">
                     <input type="checkbox" name="member" value="sunghoon">
                     <span class="member-check__name">姜成勳</span>
                     <span class="member-check__role">Vocalist</span>
+                    <div class="member-detail">
+                        <span class="member-detail__count">5 部</span>
+                        <p class="member-detail__works">《Sugar Man》・《心動 Video Star》・《家師父一體》</p>
+                    </div>
                 </label>
                 <label class="member-check">
                     <input type="checkbox" name="member" value="suwon">
                     <span class="member-check__name">張水院</span>
                     <span class="member-check__role">Vocalist</span>
+                    <div class="member-detail">
+                        <span class="member-detail__count">20+ 部</span>
+                        <p class="member-detail__works">《全知干預視角》・《林大叔的搞笑演技學堂》・《演藝家中介》</p>
+                    </div>
                 </label>
                 <label class="member-check">
                     <input type="checkbox" name="member" value="jiyong">
                     <span class="member-check__name">高志溶</span>
                     <span class="member-check__role">Vocalist</span>
+                    <div class="member-detail">
+                        <span class="member-detail__count">3 部</span>
+                        <p class="member-detail__works">《無限挑戰》重組特輯・《超人回來了》・《大腦性感的時代》</p>
+                    </div>
                 </label>
             </div>
 
@@ -341,22 +351,10 @@
                 const isAll = checked.length === $('input[name="member"]').length;
                 let total = isAll ? GROUP_SCORE : 0;
                 let hasEst = false;
-                let worksHTML = '';
-
                 checked.each(function () {
-                    const val  = $(this).val();
+                    const data = memberData[$(this).val()];
-                    const data = memberData[val];
-                    const name = $(this).closest('label').find('.member-check__name').text();
-
                     total += data.score;
                     if (data.est) hasEst = true;
-
-                    worksHTML +=
-                        '<div class="result-member">' +
-                            '<span class="result-member__name">' + name + '</span>' +
-                            '<span class="result-member__count">' + data.score + (data.est ? '+' : '') + ' 部</span>' +
-                            '<span class="result-member__works">' + data.works.join('・') + '</span>' +
-                        '</div>';
                 });
 
                 const totalStr = total + (hasEst ? '+' : '');
@@ -366,8 +364,7 @@
 
                 resultEl.html(
                     '<p class="result-headline">你總共有 <strong>' + totalStr + '</strong> 個節目要補，慢慢養老吧！</p>' +
-                    groupNote +
+                    groupNote
-                    '<div class="result-members">' + worksHTML + '</div>'
                 );
             });
         });