diff --git a/variety/vedio-list.html b/variety/vedio-list.html
new file mode 100644
index 0000000..4f340f2
--- /dev/null
+++ b/variety/vedio-list.html
@@ -0,0 +1,546 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>水晶男孩｜追劇清單</title>
+    <link rel="stylesheet" href="../assets/css/style.css">
+    <link rel="stylesheet" href="../assets/css/index.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>
+        /* ── 追劇清單頁面專用樣式 ── */
+
+        .vedio-list-page .vedio-intro {
+            text-align: left;
+        }
+
+        .vedio-list-page .vedio-intro p {
+            color: var(--color-text-muted);
+            font-size: 1rem;
+            line-height: 1.8;
+            margin: 0 0 0.85rem;
+            text-align: left;
+        }
+
+        .vedio-list-page .vedio-intro p:last-child {
+            margin-bottom: 0;
+        }
+
+        .vedio-list-page .list-lead {
+            color: var(--color-text-muted);
+            font-size: 1rem;
+            margin: 0 0 1.25rem;
+            text-align: left;
+        }
+
+        /* 類型篩選 */
+        .vedio-list-page .type-tabs {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 10px;
+            margin: 0 0 1.75rem;
+        }
+
+        .vedio-list-page .type-tab {
+            appearance: none;
+            border: 2px solid rgba(255, 204, 0, 0.22);
+            background: var(--color-surface-soft);
+            color: var(--color-text-dark);
+            font-weight: 700;
+            font-size: 0.92rem;
+            padding: 0.45rem 1.1rem;
+            border-radius: 999px;
+            cursor: pointer;
+            transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
+            white-space: nowrap;
+        }
+
+        .vedio-list-page .type-tab:hover {
+            border-color: var(--color-brand);
+        }
+
+        .vedio-list-page .type-tab.is-active {
+            border-color: var(--color-brand);
+            background: #fffce8;
+            color: var(--color-brand-dark);
+        }
+
+        /* 卡片格線 */
+        .vedio-list-page .drama-grid {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 16px;
+            margin: 0 0 2rem;
+        }
+
+        .vedio-list-page .drama-card {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            text-align: left;
+            padding: 1.15rem 1.2rem 1.25rem;
+            background: var(--color-surface-soft);
+            border: 2px solid rgba(255, 204, 0, 0.18);
+            border-radius: 12px;
+            cursor: pointer;
+            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
+            box-sizing: border-box;
+            min-height: 100%;
+        }
+
+        .vedio-list-page .drama-card:hover,
+        .vedio-list-page .drama-card.is-active {
+            border-color: var(--color-brand);
+            background: #fffce8;
+        }
+
+        .vedio-list-page .drama-card__poster {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            aspect-ratio: 16 / 9;
+            margin: 0 0 0.95rem;
+            border-radius: 8px;
+            background:
+                linear-gradient(145deg, rgba(255, 204, 0, 0.22), rgba(0, 0, 0, 0.08)),
+                var(--color-surface-soft);
+            color: var(--color-brand-dark);
+            font-weight: 800;
+            font-size: 0.95rem;
+            letter-spacing: 0.04em;
+            text-align: center;
+            padding: 0.75rem;
+            box-sizing: border-box;
+        }
+
+        .vedio-list-page .drama-card__meta {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            margin: 0 0 0.55rem;
+        }
+
+        .vedio-list-page .drama-tag {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.18rem 0.55rem;
+            border-radius: 999px;
+            font-size: 0.72rem;
+            font-weight: 700;
+            letter-spacing: 0.03em;
+            white-space: nowrap;
+            background: rgba(255, 204, 0, 0.18);
+            color: var(--color-brand-dark);
+        }
+
+        .vedio-list-page .drama-tag--platform {
+            background: rgba(0, 0, 0, 0.06);
+            color: var(--color-text-muted);
+        }
+
+        .vedio-list-page .drama-card__title {
+            margin: 0 0 0.45rem;
+            font-size: 1.15rem;
+            font-weight: 800;
+            color: var(--color-text-dark);
+            line-height: 1.35;
+            text-align: center;
+        }
+
+        .vedio-list-page .drama-card__progress,
+        .vedio-list-page .drama-card__note {
+            margin: 0 0 0.35rem;
+            color: var(--color-text-muted);
+            font-size: 0.9rem;
+            line-height: 1.65;
+            text-align: left;
+        }
+
+        .vedio-list-page .drama-card__note {
+            font-size: 0.84rem;
+            margin-bottom: 0.85rem;
+        }
+
+        .vedio-list-page .drama-card__actions {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+            margin-top: auto;
+            padding-top: 0.35rem;
+        }
+
+        .vedio-list-page .drama-card__actions a,
+        .vedio-list-page .drama-card__actions button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            min-height: 38px;
+            padding: 0.35rem 0.9rem;
+            border-radius: 999px;
+            font-size: 0.86rem;
+            font-weight: 700;
+            text-decoration: none;
+            white-space: nowrap;
+            cursor: pointer;
+            border: 2px solid rgba(255, 204, 0, 0.35);
+            background: #fff;
+            color: var(--color-brand-dark);
+            transition: background 0.18s ease, border-color 0.18s ease;
+        }
+
+        .vedio-list-page .drama-card__actions a:hover,
+        .vedio-list-page .drama-card__actions button:hover {
+            border-color: var(--color-brand);
+            background: #fffce8;
+        }
+
+        .vedio-list-page .drama-card__actions a.is-primary {
+            background: var(--color-brand);
+            border-color: var(--color-brand);
+            color: #1a1a1a;
+        }
+
+        /* 詳情區 */
+        .vedio-list-page .detail-panel {
+            display: none;
+            padding: 1.35rem 1.4rem 1.5rem;
+            border-radius: 12px;
+            background: var(--color-surface-soft);
+            border: 1px solid rgba(255, 204, 0, 0.25);
+            margin-bottom: 1.5rem;
+        }
+
+        .vedio-list-page .detail-panel.is-open {
+            display: block;
+        }
+
+        .vedio-list-page .detail-panel__eyebrow {
+            display: block;
+            text-align: center;
+            font-size: 0.78rem;
+            font-weight: 700;
+            letter-spacing: 0.08em;
+            color: var(--color-text-muted);
+            margin: 0 0 0.45rem;
+            white-space: nowrap;
+        }
+
+        .vedio-list-page .detail-panel__title {
+            margin: 0 0 0.75rem;
+            text-align: center;
+            font-size: 1.35rem;
+            font-weight: 800;
+            color: var(--color-brand-dark);
+            line-height: 1.35;
+        }
+
+        .vedio-list-page .detail-panel p {
+            margin: 0 0 0.75rem;
+            color: var(--color-text-muted);
+            font-size: 0.98rem;
+            line-height: 1.8;
+            text-align: left;
+        }
+
+        .vedio-list-page .detail-panel__progress-box {
+            margin: 1rem 0;
+            padding: 0.9rem 1rem;
+            border-radius: 10px;
+            background: #fffce8;
+            border: 1px solid rgba(255, 204, 0, 0.35);
+        }
+
+        .vedio-list-page .detail-panel__progress-box p {
+            margin: 0 0 0.35rem;
+        }
+
+        .vedio-list-page .detail-panel__progress-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .vedio-list-page .detail-panel__actions {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+            margin-top: 1.1rem;
+        }
+
+        .vedio-list-page .detail-panel__actions a,
+        .vedio-list-page .detail-panel__actions button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            min-height: 40px;
+            padding: 0.4rem 1.05rem;
+            border-radius: 999px;
+            font-size: 0.9rem;
+            font-weight: 700;
+            text-decoration: none;
+            white-space: nowrap;
+            cursor: pointer;
+            border: 2px solid rgba(255, 204, 0, 0.35);
+            background: #fff;
+            color: var(--color-brand-dark);
+        }
+
+        .vedio-list-page .detail-panel__actions a.is-primary {
+            background: var(--color-brand);
+            border-color: var(--color-brand);
+            color: #1a1a1a;
+        }
+
+        .vedio-list-page .empty-hint {
+            display: none;
+            text-align: center;
+            color: var(--color-text-muted);
+            padding: 1.5rem 1rem;
+            margin: 0 0 1.5rem;
+        }
+
+        .vedio-list-page .empty-hint.is-visible {
+            display: block;
+        }
+
+        @media (max-width: 640px) {
+            .vedio-list-page .drama-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+
+<body class="vedio-list-page">
+    <header class="inner-page-header">
+        <div class="header-inner site-header-inner">
+            <h1 class="main-title">深夜清單</h1>
+            <div class="subtitle-wrap">
+                <span class="sub-title">DRAMA &amp; VARIETY WATCH LIST</span>
+            </div>
+        </div>
+    </header>
+
+    <nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
+
+    <canvas id="particles"></canvas>
+
+    <div class="container">
+
+        <section class="vedio-intro">
+            <h2 class="section-title">正在追的那些夜晚</h2>
+            <p>
+                有些夜晚適合考古黃色奇蹟，有些夜晚則是——螢幕一亮，人就栽進另一個世界。
+                綜藝裡的失控笑聲、戲劇裡的心跳停拍，都值得被好好記下來：看到哪一季、哪一集、哪一句台詞剛把你釘在沙發上。
+            </p>
+            <p>
+                這裡先收兩部最近在追的：一部是把人丟進肯亞還能笑到缺氧的<span class="mark_y">韓綜</span>，
+                一部是把 1997 年的青春寫得又甜又疼的<span class="mark_b">韓劇</span>。
+                點進去，進度與入口都在；先別急著一次追完，慢慢養也很好看。
+            </p>
+        </section>
+
+        <section class="list-section" aria-labelledby="vedio-list-heading">
+            <h2 class="section-title" id="vedio-list-heading">追劇清單</h2>
+            <p class="list-lead">先用類型找——綜藝還是戲劇，跟 OTT 首頁那排分類一樣直覺。</p>
+
+            <div class="type-tabs" role="tablist" aria-label="作品類型">
+                <button type="button" class="type-tab is-active" role="tab" aria-selected="true"
+                    data-type="all">全部</button>
+                <button type="button" class="type-tab" role="tab" aria-selected="false"
+                    data-type="variety">綜藝</button>
+                <button type="button" class="type-tab" role="tab" aria-selected="false"
+                    data-type="drama">戲劇</button>
+            </div>
+
+            <div class="drama-grid" id="dramaGrid">
+                <article class="drama-card" data-type="variety" data-id="kenya" tabindex="0"
+                    aria-label="三傻遊肯亞，綜藝">
+                    <div class="drama-card__poster" aria-hidden="true">NETFLIX · 綜藝</div>
+                    <div class="drama-card__meta">
+                        <span class="drama-tag">綜藝</span>
+                        <span class="drama-tag drama-tag--platform">Netflix</span>
+                    </div>
+                    <h3 class="drama-card__title">三傻遊肯亞</h3>
+                    <p class="drama-card__progress">觀看進度：第 1 季・第 2 集・看到 28:40</p>
+                    <p class="drama-card__note">三人剛被扔進野外，表情比獅子還慌。</p>
+                    <div class="drama-card__actions">
+                        <a class="is-primary" href="https://www.netflix.com/title/82031207"
+                            target="_blank" rel="noopener noreferrer"
+                            onclick="event.stopPropagation()">繼續觀看</a>
+                        <button type="button" data-open-detail="kenya">查看詳情</button>
+                    </div>
+                </article>
+
+                <article class="drama-card" data-type="drama" data-id="reply1997" tabindex="0"
+                    aria-label="請回答1997，戲劇">
+                    <div class="drama-card__poster" aria-hidden="true">DISNEY+ · 戲劇</div>
+                    <div class="drama-card__meta">
+                        <span class="drama-tag">戲劇</span>
+                        <span class="drama-tag drama-tag--platform">Disney+</span>
+                    </div>
+                    <h3 class="drama-card__title">請回答1997</h3>
+                    <p class="drama-card__progress">觀看進度：第 1 季・第 5 集・看到 41:12</p>
+                    <p class="drama-card__note">宿舍夜談剛結束，收音機還在響，心卻已經開始亂。</p>
+                    <div class="drama-card__actions">
+                        <a class="is-primary" href="https://www.disneyplus.com/en-tw/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73"
+                            target="_blank" rel="noopener noreferrer"
+                            onclick="event.stopPropagation()">繼續觀看</a>
+                        <button type="button" data-open-detail="reply1997">查看詳情</button>
+                    </div>
+                </article>
+            </div>
+
+            <p class="empty-hint" id="emptyHint" role="status">這個類型目前還沒有作品——換「全部」看看？</p>
+
+            <div class="detail-panel" id="detailPanel" aria-live="polite">
+                <span class="detail-panel__eyebrow" id="detailEyebrow">單部作品</span>
+                <h3 class="detail-panel__title" id="detailTitle"></h3>
+                <p id="detailIntro"></p>
+                <div class="detail-panel__progress-box">
+                    <p id="detailProgress"></p>
+                    <p id="detailNote"></p>
+                </div>
+                <p id="detailExtra"></p>
+                <div class="detail-panel__actions">
+                    <a class="is-primary" id="detailWatch" href="#" target="_blank" rel="noopener noreferrer">繼續觀看</a>
+                    <button type="button" id="detailClose">先收起來</button>
+                </div>
+            </div>
+        </section>
+
+    </div>
+
+    <footer>
+        <p>SECHSKIES Fanpage &copy; 2026 - 黃色氣球永遠飄揚</p>
+        <a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
+            Design by <span class="mark_b">Jekkinoopy Studio</span>
+        </a>
+    </footer>
+
+    <script>
+        (function () {
+            const dramas = {
+                kenya: {
+                    typeLabel: '綜藝｜Netflix',
+                    title: '三傻遊肯亞',
+                    intro: '三個人、一座肯亞，以及無數個「這也能出事？」的現場。笑點來得又急又野，像把旅行節目的安全感整袋拆掉，只留下腎上腺素與默契。',
+                    progress: '第 1 季｜第 2 集｜28:40',
+                    note: '三人剛被扔進野外，表情比獅子還慌。',
+                    extra: '狀態：追劇中　·　開始看的那天：最近才入坑，進度還很乖。',
+                    watchUrl: 'https://www.netflix.com/title/82031207'
+                },
+                reply1997: {
+                    typeLabel: '戲劇｜Disney+',
+                    title: '請回答1997',
+                    intro: '把 1997 寫進宿舍、收音機與那一聲來不及說出口的喜歡。甜的時候甜到發亮，疼的時候又老實得讓人不敢快轉——那種青春，看完會想立刻打電話給誰。',
+                    progress: '第 1 季｜第 5 集｜41:12',
+                    note: '宿舍夜談剛結束，收音機還在響，心卻已經開始亂。',
+                    extra: '狀態：追劇中　·　提醒自己：下一集容易哭，衛生紙先備好。',
+                    watchUrl: 'https://www.disneyplus.com/en-tw/browse/entity-3979fb82-8681-44e8-b7be-e313091f0d73'
+                }
+            };
+
+            const tabs = document.querySelectorAll('.type-tab');
+            const cards = document.querySelectorAll('.drama-card');
+            const emptyHint = document.getElementById('emptyHint');
+            const detailPanel = document.getElementById('detailPanel');
+            const detailEyebrow = document.getElementById('detailEyebrow');
+            const detailTitle = document.getElementById('detailTitle');
+            const detailIntro = document.getElementById('detailIntro');
+            const detailProgress = document.getElementById('detailProgress');
+            const detailNote = document.getElementById('detailNote');
+            const detailExtra = document.getElementById('detailExtra');
+            const detailWatch = document.getElementById('detailWatch');
+            const detailClose = document.getElementById('detailClose');
+
+            function setFilter(type) {
+                tabs.forEach(function (tab) {
+                    const active = tab.getAttribute('data-type') === type;
+                    tab.classList.toggle('is-active', active);
+                    tab.setAttribute('aria-selected', active ? 'true' : 'false');
+                });
+
+                let visible = 0;
+                cards.forEach(function (card) {
+                    const show = type === 'all' || card.getAttribute('data-type') === type;
+                    card.hidden = !show;
+                    if (show) visible += 1;
+                });
+
+                emptyHint.classList.toggle('is-visible', visible === 0);
+
+                const activeCard = document.querySelector('.drama-card.is-active');
+                if (activeCard && activeCard.hidden) {
+                    closeDetail();
+                }
+            }
+
+            function openDetail(id) {
+                const data = dramas[id];
+                if (!data) return;
+
+                cards.forEach(function (card) {
+                    card.classList.toggle('is-active', card.getAttribute('data-id') === id);
+                });
+
+                detailEyebrow.textContent = data.typeLabel;
+                detailTitle.textContent = data.title;
+                detailIntro.textContent = data.intro;
+                detailProgress.textContent = '觀看進度：' + data.progress;
+                detailNote.textContent = data.note;
+                detailExtra.textContent = data.extra;
+                detailWatch.href = data.watchUrl;
+                detailPanel.classList.add('is-open');
+                detailPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+
+            function closeDetail() {
+                detailPanel.classList.remove('is-open');
+                cards.forEach(function (card) {
+                    card.classList.remove('is-active');
+                });
+            }
+
+            tabs.forEach(function (tab) {
+                tab.addEventListener('click', function () {
+                    setFilter(tab.getAttribute('data-type'));
+                });
+            });
+
+            cards.forEach(function (card) {
+                card.addEventListener('click', function (event) {
+                    if (event.target.closest('a, button')) return;
+                    openDetail(card.getAttribute('data-id'));
+                });
+
+                card.addEventListener('keydown', function (event) {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        openDetail(card.getAttribute('data-id'));
+                    }
+                });
+            });
+
+            document.querySelectorAll('[data-open-detail]').forEach(function (btn) {
+                btn.addEventListener('click', function (event) {
+                    event.stopPropagation();
+                    openDetail(btn.getAttribute('data-open-detail'));
+                });
+            });
+
+            detailClose.addEventListener('click', closeDetail);
+        })();
+    </script>
+
+    <script src="../assets/js/particles.js"></script>
+    <script src="../assets/js/portal-nav.js"></script>
+</body>
+
+</html>
