/* 1. CSS 變數：明亮活潑與高級質感兼具的配色 */
            :root {
                --ct-blue: #354c60;   /* 更新：更有質感的深藍灰色 */
                --ct-red: #E31837;
                --ct-white: #FFFFFF;
                --wbc-gold: #e2bc65;
                --bg-gray: #F4F7FB;
                --text-dark: #2C3E50;
                --accent-light: #EAF2FA;
            }

            /* 2. 基礎重置、跨平台最佳化字型與平滑滾動 */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                /* 更新：最佳化系統字型集，確保各平台閱讀體驗完美 */
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", "PingFang TC", "Heiti TC", "Apple LiGothic Medium", "Microsoft JhengHei", "Microsoft JhengHei UI", "Microsoft YaHei", sans-serif;
            }

            html {
                scroll-behavior: smooth;
            }

            body {
                color: var(--text-dark);
                line-height: 1.6;
                background-color: var(--ct-white);
                padding-top: 60px;
            }

            /* =========================================
               3. 輕盈透亮的導覽列 (加入固定 Logo 與 Icon)
               ========================================= */
            .navbar {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 60px;
                background-color: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                display: flex;
                align-items: center;
                z-index: 1000;
                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);

                /* 💡 替換這裡：中華民國國旗漸層邊框 (紅 -> 白 -> 藍) */
                border-bottom: 5px solid transparent;
                border-image: linear-gradient(to right, #E31837 0%, #FFFFFF 50%, #04519e 100%) 1;
            }

            .nav-logo {
                flex-shrink: 0;
                display: flex;
                align-items: center;
                height: 100%;
                text-decoration: none;
                /* 💡 強制清除 a 標籤的各種互動屬性 */
                background-color: transparent !important;
                box-shadow: none !important;
                transform: none !important;
            }

            .nav-logo:hover {
                /* 💡 確保 hover 時絕對不會反紅、不會浮起 */
                background-color: transparent !important;
                box-shadow: none !important;
                transform: none !important;
            }

            .nav-logo img {
                height: 35px; /* 💡 放大到 70px */
                width: auto;
                display: block;
            }

            /* --- 橫向滑動的選單區塊 --- */
            .navbar ul {
                flex-grow: 1; /* 關鍵魔法：讓選單佔滿剩下的所有右側空間 */
                list-style: none;
                display: flex;
                gap: 8px;
                padding: 0 15px 0 5px;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

            .navbar ul::-webkit-scrollbar {
                display: none;
            }

            .navbar a.nav-link-item {
                color: var(--ct-blue);
                text-decoration: none;
                font-weight: bold;
                font-size: 1rem;
                padding: 8px 8px;
                border-radius: 30px;
                transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
                display: inline-flex;
                align-items: center;
                gap: 6px; /* 讓 Icon 和文字之間保持一點呼吸空間 */
            }

            .navbar a.nav-link-item:hover, .navbar a.nav-link-item.active {
                color: var(--ct-white);
                background-color: var(--ct-red);
                box-shadow: 0 4px 10px rgba(227, 24, 55, 0.3);
                transform: translateY(-2px);
            }

            /* 導覽列懸停：變成熱血紅底白字 */
            .navbar a:hover, .navbar a.active {
                color: var(--ct-white);
                background-color: var(--ct-red);
                box-shadow: 0 4px 10px rgba(227, 24, 55, 0.3);
                transform: translateY(-2px); /* 滑過時微微上浮 */
            }

            /* =========================================
               4. 動感的主視覺區塊 (還原真實圖片色彩)
               ========================================= */
            .hero {
                /* 取消紅藍遮罩，改用極淡的黑色漸層襯托白色文字 */
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%),
                    url('https://static.kmedia.com.tw/prd/event/layout/2026wbc/image/cover.webp') center/cover no-repeat;
                height: 85vh; /* 💡 桌機增加高度，避免底部文字被裁切 */
                min-height: 600px; /* 確保螢幕較扁時依然有足夠空間 */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                color: var(--ct-white);
                padding: 20px;
                position: relative;
                overflow: hidden;
            }

            /* 隱藏巨型 WBC 浮水印，把舞台還給真實背景圖 */
            .hero::before {
                display: none;
            }

            /* 確保文字與按鈕浮在浮水印與背景之上 */
            .hero h1, .hero p, .hero a {
                position: relative;
                z-index: 1;
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* 1. 新增：流動金屬光澤動畫 */
            @keyframes textShine {
                0% {
                    background-position: 0% 50%;
                }
                100% {
                    background-position: 200% 50%;
                }
            }

            /* 2. 新增：文字上下懸浮動畫 */
            @keyframes floatText {
                0%, 100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-8px);
                }
            }

            /* 3. 新增：副標題呼吸光暈動畫 */
            @keyframes pulseGlow {
                0%, 100% {
                    text-shadow: 0 0 10px rgba(242, 169, 0, 0.4), 0 0 20px rgba(242, 169, 0, 0.2);
                }
                50% {
                    text-shadow: 0 0 15px rgba(242, 169, 0, 0.8), 0 0 25px rgba(227, 24, 55, 0.5);
                }
            }

            .hero h1 {
                font-size: 70px;
                font-weight: 900;
                /*margin-bottom: 10px;*/
                letter-spacing: 2px;

                /* 互動感升級 A：流動金屬漸層字體 */
                background: linear-gradient(to right, #ffffff 20%, var(--wbc-gold) 40%, var(--wbc-gold) 60%, #ffffff 80%);
                background-size: 200% auto;
                color: #000;
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;

                /* 組合動畫：進場 + 流光 + 浮動 */
                animation: fadeInUp 0.8s ease-out, textShine 4s linear infinite, floatText 6s ease-in-out infinite;

                /* 互動感升級 B：滑鼠懸停特效 (使用 drop-shadow 搭配背景漸層字體) */
                transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
                filter: drop-shadow(0 4px 15px rgba(0,0,0,0.6));
                cursor: default;
            }

            .hero h1:hover {
                transform: scale(1.08); /* 滑鼠滑過時彈跳放大 */
                filter: drop-shadow(0 0 25px rgba(242, 169, 0, 0.9)); /* 爆發耀眼金光 */
            }

            .hero p {
                font-size: 30px;
                color: var(--ct-white);
                font-weight: bold;
                /*margin-bottom: 35px;*/

                /* 動態升級 C：呼吸光暈 */
                animation: fadeInUp 1s ease-out, pulseGlow 3s infinite alternate;
                transition: letter-spacing 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s ease;
                cursor: default;
            }

            .hero p:hover {
                letter-spacing: 5px; /* 滑鼠滑過時字距瞬間拉開，增加張力 */
                color: var(--wbc-gold);
            }

            /* 手機版字體與主視覺微調 (完整載入圖片比例) */
            @media (max-width: 768px) {
                .hero {
                    height: 30vh; /* 💡 手機版減少高度，讓背景圖片能露出更完整的橫向比例 */
                    min-height: 300px;
                }
                .hero h1 {
                    font-size: 30px; /* 💡 大幅縮小標題 */
                    /*margin-bottom: 10px;*/
                }
                .hero p {
                    font-size: 15px; /* 💡 縮小副標題 */
                    /*margin-bottom: 25px;*/
                }

                /* 💡 同步縮小手機版的按鈕大小，避免喧賓奪主 */
                .btn-primary {
                    padding: 5px 10px;
                    font-size: 15px;
                }

                .hero h1:active {
                    transform: scale(1.05);
                }
            }

            /* 充滿彈性的按鈕設計 */
            .btn-primary {
                display: inline-block;
                background-color: var(--wbc-gold);
                color: var(--ct-blue);
                padding: 10px 20px;
                border-radius: 50px;
                text-decoration: none;
                font-weight: 900;
                font-size: 18px;
                box-shadow: 0 6px 20px rgba(242, 169, 0, 0.4);
                transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
                animation: fadeInUp 1.2s ease-out;
            }

            .btn-primary:hover {
                transform: translateY(-5px) scale(1.05); /* 誇張一點的彈跳感 */
                box-shadow: 0 10px 25px rgba(242, 169, 0, 0.6);
            }

            /* 5. 區塊通用設定 */
            .section-padding {
                padding: 20px 20px;
                text-align: center;
            }

            .bg-white {
                background-color: var(--ct-white);
            }
            .bg-gray {
                background-color: var(--bg-gray);
            }

            /* 重新設計的懸浮標題：明亮膠囊運動風 (轉為超連結升級版) */
            .section-title {
                position: -webkit-sticky;
                position: sticky;
                top: 65px;
                z-index: 90;
                background-color: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(5px);
                color: var(--ct-blue);
                font-size: 24px;
                font-weight: 700;
                letter-spacing: 3px;
                text-align: center;
                width: fit-content;
                margin: 0 auto 50px auto;
                border-radius: 50px;
                border: 2px solid var(--accent-light);
                box-shadow: 0 8px 20px rgba(0, 92, 185, 0.1);

                /* 💡 關鍵：把原本的 padding 歸零，轉交給裡面的 a 標籤，確保點擊範圍最大化 */
                padding: 0;
                overflow: hidden;
                transition: all 0.3s ease;
            }

            /* 滑過時讓整個膠囊像按鈕一樣有互動感 */
            .section-title:hover {
                transform: translateY(-3px);
                box-shadow: 0 12px 25px rgba(0, 92, 185, 0.15);
                border-color: var(--ct-red);
            }

            /* 取消原本外層的棒球圖示 */
            .section-title::before {
                content: none;
            }

            /* 1. 預設排版：給「純超連結」或「純文字 span」使用 (兩側內距對稱，無按鈕) */
            .section-title a, .section-title span.title-text {
                display: flex;
                align-items: center;
                padding: 10px 30px;
                color: inherit;
                text-decoration: none;
            }

            .section-title a::before, .section-title span.title-text::before {
                content: '⚾';
                margin-right: 12px;
                font-size: 22px;
            }

            /* 2. 當 a 標籤加上 .show-more 時，右側縮小並顯示「看更多」按鈕 */
            .section-title a.show-more {
                padding: 8px 12px 8px 30px;
            }

            .section-title a.show-more::after {
                content: '看更多 \276F';
                font-size: 12px;
                color: #fbfbfb;
                background-color: #0b56a1e0;
                padding: 6px 14px;
                border-radius: 30px;
                margin-left: 20px;
                letter-spacing: 1px;
                transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            }

            .section-title:hover a.show-more::after {
                background-color: var(--ct-red);
                color: var(--ct-white);
                transform: translateX(5px);
                box-shadow: 0 4px 10px rgba(227, 24, 55, 0.2);
            }

            /* 滑鼠懸停時，小按鈕變成實體紅，並產生向右推進的動畫 */
            .section-title:hover a::after {
                background-color: var(--ct-red);
                color: var(--ct-white);
                transform: translateX(5px);
                box-shadow: 0 4px 10px rgba(227, 24, 55, 0.2);
            }

            /* =========================================
               新增：球員名單長圖專屬樣式 
               ========================================= */
            .roster-container {
                max-width: 600px; /* 限制最大寬度，避免在電腦螢幕上圖片變得太巨大 */
                margin: 0 auto;
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 15px 35px rgba(0,0,0,0.1); /* 給圖片一個帥氣的浮空陰影 */
                background-color: var(--ct-white);
                border: 4px solid var(--accent-light);
                transition: transform 0.3s ease;
                margin-top: 1rem;
            }

            .roster-container:hover {
                transform: translateY(-5px);
                border-color: var(--ct-blue);
            }

            .roster-img {
                display: block;
                width: 100%;
                height: auto;
                object-fit: cover;
            }

            /* =========================================
               6. 賽程表設計 (桌機網格全顯、手機橫向滑動)
               ========================================= */
            /* 桌機版預設：網格排列，全部顯示 */
            .pro-schedule-list {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* 自動分配寬度，每排約3~4張 */
                gap: 20px;
                max-width: 1200px;
                margin: 0 auto;
                padding: 10px 5px 25px 5px;
            }

            .pro-match-row {
                display: flex;
                flex-direction: column;
                background-color: var(--ct-white);
                border-radius: 12px;
                box-shadow: 0 6px 20px rgba(0,0,0,0.06);
                border: 1px solid var(--accent-light);
                overflow: hidden;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }

            .pro-match-row:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            }

            /* =========================================
                           中華隊專屬強調：尊爵版設計 (升級版)
                           ========================================= */
            .pro-match-row.highlight-ct {
                border: 2px solid var(--ct-red); /* 加粗邊框為 2px 實線 */
                box-shadow: 0 6px 20px rgba(227, 24, 55, 0.15); /* 加深紅光陰影 */
                position: relative;
            }

            .pro-match-row.highlight-ct:hover {
                box-shadow: 0 12px 30px rgba(227, 24, 55, 0.3);
                transform: translateY(-5px);
            }

            /* 1. 光澤掃過動畫 (Shine Effect) 讓卡片看起來會發光 */
            .pro-match-row.highlight-ct::after {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 50%;
                height: 100%;
                background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
                transform: skewX(-25deg);
                animation: shine 4s infinite;
                pointer-events: none; /* 避免擋住使用者點擊 */
            }

            @keyframes shine {
                0% {
                    left: -100%;
                }
                20% {
                    left: 200%;
                }
                100% {
                    left: 200%;
                }
            }

            /* 2. 標頭改為熱血紅漸層，與一般賽事的深藍色做出強烈對比 */
            .pro-match-row.highlight-ct .match-info {
                background: linear-gradient(135deg, var(--ct-red) 0%, #a01025 100%);
                border-bottom: 2px solid #800d1e;
            }

            /* 3. 調整標頭內的文字顏色，讓它在紅底上更閃耀 */
            .pro-match-row.highlight-ct .match-time {
                color: var(--ct-white); /* 時間改為純白 */
                text-shadow: 0 2px 8px rgba(0,0,0,0.3);
            }

            .pro-match-row.highlight-ct .match-date-badge {
                color: var(--wbc-gold); /* 日期改為耀眼金 */
                font-size: 15px;
                font-weight: 700;
            }

            /* 4. 對戰區塊加上極淡的紅色漸層底，增加整體層次 */
            .pro-match-row.highlight-ct .match-teams-pro {
                background: linear-gradient(180deg, #FFF3F4 0%, var(--ct-white) 100%);
            }

            /* 下半部：乾淨的白底對戰隊伍與比分 */
            .match-teams-pro {
                padding: 18px 15px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                background-color: var(--ct-white);
                height: 100%; /* 確保網格中每張卡片高度對齊 */
            }

            .team-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .team-name-pro {
                font-size: 18px;
                font-weight: 900;
                color: var(--text-dark);
                display: flex;
                align-items: center;
            }

            .team-name-pro span {
                font-size: 12px;
                color: #888;
                font-weight: normal;
                margin-left: 6px;
            }

            .team-score-pro {
                font-size: 24px;
                font-weight: 900;
                color: #e0e0e0;
                font-family: 'Helvetica Neue', Arial, sans-serif;
            }

            .team-score-pro.active {
                color: var(--ct-red);
            }

            /* =========================================
               手機版 RWD：恢復為橫向滑動
               ========================================= */
            @media (max-width: 768px) {
                .pro-schedule-list {
                    display: flex;
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none;
                    padding-bottom: 15px;
                }
                .pro-schedule-list::-webkit-scrollbar {
                    display: none;
                }
                .pro-match-row {
                    flex: 0 0 280px;
                    scroll-snap-align: start;
                }
            }
            /* 7. 新聞卡片動態設計 (兩種形式) */
            .news-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 30px;
                max-width: 1200px;
                margin: 0 auto;
                text-align: left;
            }

            .news-card {
                background-color: var(--ct-white);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 10px 25px rgba(0,0,0,0.05);
                transition: all 0.3s ease;
                text-decoration: none;
                color: inherit;
                display: flex;
                flex-direction: column;
                border-bottom: 4px solid transparent;
            }

            .news-card:hover {
                transform: translateY(-8px) scale(1.01); /* 微放大彈跳 */
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                border-bottom: 4px solid var(--wbc-gold); /* 滑過出現金色邊框 */
            }

            .news-card-img {
                width: 100%;
                height: 200px;
                object-fit: cover;
            }

            .news-card-body {
                padding: 20px;
            }
            .news-card-title {
                font-size: 18px;
                font-weight: 600;
                color: var(--ct-blue);
                margin-bottom: 10px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            /* 橫式條列風 */
            .news-list {
                display: flex;
                flex-direction: column;
                gap: 20px;
                max-width: 900px;
                margin: 0 auto;
                text-align: left;
            }

            .news-list-item {
                display: flex;
                background-color: var(--ct-white);
                border-radius: 20px;
                overflow: hidden;
                box-shadow: 0 8px 20px rgba(0,0,0,0.04);
                transition: all 0.3s ease;
                text-decoration: none;
                color: inherit;
                align-items: stretch;
                border-left: 5px solid transparent; /* 左側隱藏裝飾線 */
            }

            .news-list-item:hover {
                transform: translateX(8px);
                border-left: 5px solid var(--ct-red); /* 滑過時左側亮紅燈 */
                box-shadow: 0 12px 25px rgba(0,0,0,0.08);
            }

            .news-list-img {
                width: 250px;
                min-width: 250px;
                object-fit: cover;
            }

            .news-list-body {
                padding: 25px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .news-list-title {
                font-size: 20px;
                font-weight: 600;
                color: var(--ct-blue);
                margin-bottom: 10px;
            }

            .news-list-intro {
                font-size: 15px;
                color: #666;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            /* =========================================
                           9. 手機版 RWD 空間優化：首篇大圖，其餘精緻左圖右文
                           ========================================= */
            @media (max-width: 768px) {
                .news-grid {
                    gap: 15px;
                }

                /* ----- 版型 A (網格卡片：賽事焦點等) 第二則開始 ----- */
                .news-grid .news-card:not(:first-child) {
                    flex-direction: row;
                    align-items: center; /* 改為垂直置中，不強制拉伸 */
                    padding: 12px; /* 💡 關鍵：卡片四周加上內距，讓圖片不再貼邊 */
                    min-height: auto;
                }
                .news-grid .news-card:not(:first-child) .news-card-img {
                    width: 110px; /* 配合內距稍微縮小圖片寬度 */
                    height: 85px; /* 固定高度讓圖片變成精巧的矩形 */
                    min-height: auto;
                    border-radius: 12px; /* 💡 關鍵：圖片四周加上獨立圓角 */
                    object-fit: cover;
                }
                .news-grid .news-card:not(:first-child) .news-card-body {
                    padding: 0 0 0 15px; /* 取消上下內距，只留與左側圖片的間距 */
                    display: flex;
                    align-items: center;
                }
                .news-grid .news-card:not(:first-child) .news-card-title {
                    font-size: 15px;
                    margin-bottom: 0;
                    -webkit-line-clamp: 3;
                }

                /* 影片區塊的播放按鈕，精準對齊新的精緻小圖 */
                .news-grid .video-card:not(:first-child)::before {
                    width: 36px;
                    height: 36px;
                    font-size: 14px;
                    /* 12px(卡片padding) + 55px(圖片110寬度的一半) = 67px */
                    left: 67px;
                    top: 50%;
                }


                /* ----- 版型 B (橫式條列：戰況預報等) 第一則 ----- */
                .news-list .news-list-item:first-child {
                    flex-direction: column;
                    border-left: none;
                    border-bottom: 4px solid transparent;
                }
                .news-list .news-list-item:first-child .news-list-img {
                    width: 100%;
                    height: 200px;
                    /* 確保第一篇大圖的上方兩角有圓角，下方保持平整 */
                    border-radius: 20px 20px 0 0;
                }

                /* ----- 版型 B (橫式條列) 第二則開始 ----- */
                .news-list .news-list-item:not(:first-child) {
                    flex-direction: row;
                    align-items: center;
                    padding: 12px; /* 💡 卡片四周留白 */
                    border-left: none;
                    border-bottom: 4px solid transparent;
                }
                .news-list .news-list-item:not(:first-child) .news-list-img {
                    width: 110px;
                    min-width: 110px;
                    height: 85px;
                    border-radius: 12px; /* 💡 圖片四周圓角 */
                    object-fit: cover;
                }
                .news-list .news-list-item:not(:first-child) .news-list-body {
                    padding: 0 0 0 15px;
                    justify-content: center;
                }
                .news-list .news-list-item:not(:first-child) .news-list-title {
                    font-size: 15px;
                    margin-bottom: 5px;
                }
                .news-list .news-list-item:not(:first-child) .news-list-intro {
                    font-size: 13px;
                    -webkit-line-clamp: 2;
                }

                /* 統一手機版的互動特效 */
                .news-list-item:hover, .news-card:hover {
                    transform: translateY(-3px) scale(1);
                    border-bottom: 4px solid var(--ct-red);
                }
            }

            /* =========================================
               特別贊助區塊 (支援單張置中與多張並排)
               ========================================= */
            .ads-container {
                display: flex;
                flex-wrap: wrap; /* 確保未來多張圖時可以在手機版自動換行 */
                justify-content: center; /* 💡 絕對置中的魔法 */
                align-items: center;
                gap: 30px;
                max-width: 1000px;
                margin: 0 auto;
            }

            .ad-image-wrapper {
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* 加上精緻的高級陰影 */
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                max-width: 300px; /* 預設標準廣告寬度，可依據實際圖片調整 */
                width: 100%;
                background-color: var(--ct-white);
            }

            .ad-image-wrapper:hover {
                transform: translateY(-5px); /* 滑過時微微上浮，增加互動感 */
                box-shadow: 0 15px 30px rgba(0,0,0,0.12);
            }

            .ad-image-wrapper img {
                display: block;
                width: 100%;
                height: auto;
                object-fit: contain;
            }
            /* 💡 確保超連結標籤能完全撐滿容器，點擊無死角 */
            .ad-image-wrapper a {
                display: block;
                width: 100%;
                height: 100%;
                text-decoration: none;
            }
            /* =========================================
               8. 精彩短片專屬樣式與燈箱 (Lightbox)
               ========================================= */
            .video-card {
                cursor: pointer;
                position: relative;
            }

            /* 影片卡片上的播放按鈕重疊圖層 */
            .video-card::before {
                content: '▶';
                position: absolute;
                top: 80px; /* 大約在圖片正中間 */
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: rgba(227, 24, 55, 0.85); /* 半透明熱血紅 */
                color: white;
                font-size: 24px;
                width: 60px;
                height: 60px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                z-index: 10;
                box-shadow: 0 4px 15px rgba(0,0,0,0.3);
                transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s;
            }

            .video-card:hover::before {
                transform: translate(-50%, -50%) scale(1.15); /* 滑過時按鈕放大 */
                background-color: var(--ct-red);
            }

            /* 燈箱黑色半透明遮罩 */
            .lightbox-overlay {
                display: none; /* 預設隱藏 */
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.85);
                backdrop-filter: blur(5px);
                z-index: 9999;
                justify-content: center;
                align-items: center;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            /* 燈箱顯示時的 class */
            .lightbox-overlay.active {
                display: flex;
                opacity: 1;
            }

            /* 燈箱內容區 (升級版：大尺寸與完美 RWD 比例) */
            .lightbox-content {
                position: relative;
                /* 基礎寬度設定為螢幕的 95%，讓手機直式時也能撐到最大 */
                width: 95vw;
                /* 桌機版的最大寬度放寬，讓影片更具視覺張力 */
                max-width: 1200px;
                background-color: #000;
                border-radius: 12px;
                box-shadow: 0 20px 60px rgba(0,0,0,0.8); /* 加深陰影讓燈箱更立體 */

                /* 確保維持 YouTube 標準 16:9 比例 */
                aspect-ratio: 16 / 9;
                /* 防止影片高度超出螢幕，導致使用者看不到上下畫面 */
                max-height: 85vh;
            }

            /* RWD 關鍵魔法：當使用者的螢幕非常寬（例如桌機或手機轉橫向）時，
               我們改用「螢幕高度的 85%」來當作影片大小的基準，確保影片絕對不被切頭切尾 */
            @media (min-aspect-ratio: 16/9) {
                .lightbox-content {
                    width: auto;
                    height: 85vh;
                }
            }

            /* 確保 iframe 完全填滿我們算好的 16:9 容器 */
            .lightbox-content iframe {
                width: 100%;
                height: 100%;
                border-radius: 12px;
                border: none;
                display: block;
            }

            /* 關閉按鈕放大，並加上微動畫 */
            .lightbox-close {
                position: absolute;
                top: -50px; /* 稍微拉開一點距離 */
                right: 0;
                color: #fff;
                font-size: 45px;
                font-weight: bold;
                cursor: pointer;
                transition: color 0.3s, transform 0.3s;
                z-index: 10000;
                line-height: 1;
            }

            .lightbox-close:hover {
                color: var(--ct-red);
                transform: scale(1.1) rotate(90deg); /* 增加一點點旋轉趣味 */
            }
            /* 確保包住影片的容器完全填滿燈箱 */
            #iframeContainer {
                width: 100%;
                height: 100%;
            }

            /* 強制 YouTube iframe 撐開到 100% */
            #iframeContainer iframe {
                width: 100%;
                height: 100%;
                border-radius: 12px;
                border: none;
                display: block;
            }
            /* =========================================
               10. 懸浮社群分享按鈕 (FAB)
               ========================================= */
            .floating-share {
                position: fixed;
                right: 25px;
                bottom: 30px;
                z-index: 1001; /* 確保在最上層，比導覽列還高 */
                display: flex;
                flex-direction: column-reverse; /* 讓主按鈕在最下方，子按鈕往上長 */
                align-items: center;
                gap: 12px;
            }

            .share-btn {
                width: 52px;
                height: 52px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--ct-white);
                font-weight: bold;
                text-decoration: none;
                box-shadow: 0 4px 15px rgba(0,0,0,0.15);
                transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s;
                cursor: pointer;
                border: none;
                font-size: 15px;
            }

            .share-btn:hover {
                transform: scale(1.1);
            }

            /* 主展開按鈕 */
            .share-toggle {
                background-color: var(--ct-blue);
                z-index: 2;
                font-size: 20px; /* 稍微放大分享圖示 */
                box-shadow: 0 6px 20px rgba(53, 76, 96, 0.4);
            }

            /* 各平台專屬顏色與圖示大小微調 */
            .share-copy {
                background-color: #6c757d;
                font-size: 20px;
            }
            .share-line {
                background-color: #06C755;
                font-size: 24px; /* LINE 的圖示需要稍微大一點點才飽滿 */
            }
            .share-threads {
                background-color: #000000;
                font-size: 22px;
            }
            .share-x {
                background-color: #000000;
                font-size: 20px;
            }
            .share-fb {
                background-color: #1877F2;
                font-size: 20px;
            }

            /* 隱藏的展開選單設定 */
            .share-links {
                display: flex;
                flex-direction: column;
                gap: 12px;
                opacity: 0;
                visibility: hidden;
                transform: translateY(20px); /* 往下沉一點，製造展開時往上浮的動畫 */
                transition: all 0.3s ease;
            }

            /* 電腦版滑過、或手機版點擊加上 active 時展開 */
            .floating-share:hover .share-links,
            .floating-share.active .share-links {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            /* 手機版微調 */
            @media (max-width: 768px) {
                .floating-share {
                    right: 15px;
                    bottom: 20px;
                }
                .share-btn {
                    width: 48px;
                    height: 48px;
                    font-size: 13px;
                }
            }
            /* =========================================
               11. 現場紀實 (瀑布流照片牆與圖片燈箱)
               ========================================= */

            /* 瀑布流照片牆 (Masonry Layout) */
            .photo-wall {
                column-count: 3; /* 電腦版顯示 3 排 */
                column-gap: 15px; /* 照片之間的左右間距 */
                max-width: 1200px;
                margin: 0 auto;
            }

            /* RWD: 平板與手機版的排數自動遞減 */
            @media (max-width: 992px) {
                .photo-wall {
                    column-count: 2;
                }
            }
            @media (max-width: 576px) {
                .photo-wall {
                    column-count: 1;
                }
            }

            .photo-item {
                break-inside: avoid; /* 避免照片被切斷換欄 */
                margin-bottom: 15px;
                border-radius: 12px;
                overflow: hidden;
                cursor: pointer;
                box-shadow: 0 4px 15px rgba(0,0,0,0.05);
                position: relative;
            }

            .photo-item img {
                width: 100%;
                height: auto;
                display: block;
                transition: transform 0.4s ease;
            }

            /* 滑鼠移過去時，照片會微微放大，增加互動感 */
            .photo-item:hover img {
                transform: scale(1.05);
            }
            /* =========================================
               新增：現場紀實 (電影級神秘感圖說)
               ========================================= */
            .photo-caption-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                /* 從底部的深邃藍黑，向上漸層到完全透明 */
                background: linear-gradient(to top, rgba(15, 25, 35, 0.95) 0%, rgba(15, 25, 35, 0.6) 60%, transparent 100%);
                padding: 40px 15px 15px 15px;

                /* 文字設定：優雅、細緻的微透明白 */
                color: rgba(255, 255, 255, 0.75);
                font-size: 14px;
                line-height: 1.5;
                font-weight: 400;
                letter-spacing: 1px;
                text-shadow: 0 2px 4px rgba(0,0,0,0.8);

                /* 限制只顯示兩行，超過變成刪節號 (...) 增加神秘感 */
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;

                /* 動畫前置狀態：微微下沉 */
                transform: translateY(5px);
                transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                pointer-events: none; /* 避免擋住點擊範圍 */
            }

            /* 當滑鼠移過整張圖片時，圖說的華麗變化 */
            .photo-item:hover .photo-caption-overlay {
                transform: translateY(0); /* 文字優雅上浮 */
                color: var(--wbc-gold); /* 字體發出金色光芒 */
                text-shadow: 0 0 10px rgba(242, 169, 0, 0.5); /* 金色光暈 */
                background: linear-gradient(to top, rgba(15, 25, 35, 0.98) 0%, rgba(15, 25, 35, 0.75) 60%, transparent 100%);
            }

            /* --- 圖片專屬燈箱調整 --- */
            /* 覆寫原本影片 16:9 的設定，讓圖片能按照自身比例縮放 */
            .lightbox-image-content {
                position: relative;
                width: 95vw;
                max-width: 1000px;
                display: flex;
                flex-direction: column;
                align-items: center;
                aspect-ratio: auto; /* 取消 16:9 限制 */
                background: transparent;
                box-shadow: none;
            }

            .lightbox-image-content img {
                max-width: 100%;
                max-height: 80vh; /* 確保超大直圖不會超出螢幕高度 */
                border-radius: 12px;
                object-fit: contain;
                box-shadow: 0 10px 40px rgba(0,0,0,0.6);
            }

            /* 圖說文字 (Caption) */
            .lightbox-caption {
                color: #fff;
                margin-top: 15px;
                font-size: 16px;
                text-align: center;
                max-width: 800px;
                font-weight: 500;
                line-height: 1.5;
                text-shadow: 0 2px 4px rgba(0,0,0,0.5);
                letter-spacing: 0.5px;
            }
            /* =========================================
               新增：圖片燈箱左右切換按鈕
               ========================================= */
            .lightbox-nav {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                font-size: 50px;
                color: rgba(255, 255, 255, 0.6);
                cursor: pointer;
                padding: 20px;
                z-index: 10001;
                user-select: none;
                transition: color 0.3s, transform 0.3s;
                /* 讓點擊範圍變大，方便手機點擊 */
                display: flex;
                align-items: center;
                height: 100px;
            }

            .lightbox-nav:hover {
                color: #fff;
                transform: translateY(-50%) scale(1.1);
            }

            .lightbox-nav.prev {
                left: 15px;
            }
            .lightbox-nav.next {
                right: 15px;
            }

            @media (max-width: 768px) {
                .lightbox-nav {
                    font-size: 35px;
                    padding: 10px;
                }
                .lightbox-nav.prev {
                    left: 0;
                }
                .lightbox-nav.next {
                    right: 0;
                }
            }
            /* =========================================
               12. 賽事簡介與焦點 (WBC Intro)
               ========================================= */
            .intro-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 25px;
                max-width: 1000px;
                margin: 0 auto;
                text-align: left;
            }

            .intro-card {
                background-color: var(--ct-white);
                border-radius: 20px;
                padding: 30px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.04);
                border: 1px solid var(--accent-light);
                transition: transform 0.3s ease;
            }

            .intro-card:hover {
                transform: translateY(-5px);
            }

            .intro-card h3 {
                color: var(--ct-blue);
                font-size: 20px;
                font-weight: 900;
                margin-bottom: 15px;
                border-bottom: 3px solid var(--wbc-gold);
                padding-bottom: 10px;
                display: inline-block;
            }

            .intro-card p {
                color: var(--text-dark);
                font-size: 16px;
                line-height: 1.8;
            }

            /* 右側重點區塊使用微漸層底色凸顯 */
            .intro-card.highlight-box {
                background: linear-gradient(135deg, #FAFCFF 0%, #EAF2FA 100%);
                border: 1px solid rgba(53, 76, 96, 0.2);
            }

            /* 客製化的棒球列表項目 */
            .intro-card ul {
                list-style: none;
                padding: 0;
            }

            .intro-card ul li {
                margin-bottom: 15px;
                font-size: 16px;
                color: var(--text-dark);
                line-height: 1.6;
                padding-left: 30px;
                position: relative;
            }

            /* 用小棒球圖示取代傳統的黑點 */
            .intro-card ul li::before {
                content: '⚾';
                position: absolute;
                left: 0;
                top: 2px;
                font-size: 14px;
            }
            /* =========================================
               13. 導覽列「可滑動」視覺提示 (漸層與動畫箭頭)
               ========================================= */
            .navbar::after {
                content: '\f105'; /* FontAwesome 的單箭頭 (fa-angle-right) */
                font-family: 'Font Awesome 6 Free';
                font-weight: 900;
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 60px; /* 寬度拉大讓漸層更自然 */
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 15px;
                font-size: 20px;
                color: var(--ct-blue);
                /* 漸層：右側實體白，向左漸層透明 */
                background: linear-gradient(to left, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 100%);
                pointer-events: none; /* 💡 關鍵：讓滑鼠點擊穿透，不會阻擋到下方的按鈕操作 */
                transition: opacity 0.3s ease, visibility 0.3s ease;
                animation: hintBounce 1.5s infinite; /* 呼叫左右彈跳動畫 */
            }

            /* 當 JS 偵測到使用者已經開始滑動時，加上此 class 來完美隱藏提示 */
            .navbar.is-scrolled::after {
                opacity: 0;
                visibility: hidden;
                animation: none;
            }

            /* 箭頭左右微幅彈跳的動畫 */
            @keyframes hintBounce {
                0%, 100% {
                    transform: translateX(0);
                }
                50% {
                    transform: translateX(5px);
                }
            }
            /* =========================================
               14. 網頁頁尾 (Footer)
               ========================================= */
            .site-footer {
                background-color: var(--ct-blue);
                color: var(--ct-white);
                padding: 40px 20px 20px;
                margin-top: 40px; /* 與上方內容保持呼吸空間 */
            }

            .footer-container {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                padding-bottom: 25px;
                margin-bottom: 20px;
            }

            /* 左側：政策與資訊連結 */
            .footer-links {
                display: flex;
                gap: 25px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .footer-links a {
                color: rgba(255, 255, 255, 0.7);
                text-decoration: none;
                font-size: 15px;
                font-weight: bold;
                transition: color 0.3s ease;
            }

            .footer-links a:hover {
                color: var(--wbc-gold); /* 滑過變成耀眼的金色 */
            }

            /* 右側：社群平台圖示 */
            .footer-socials {
                display: flex;
                gap: 12px;
                justify-content: center;
            }

            .footer-socials a {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: rgba(255, 255, 255, 0.1);
                color: var(--ct-white);
                text-decoration: none;
                font-size: 20px;
                transition: all 0.3s ease;
            }

            .footer-socials a:hover {
                background-color: var(--ct-red); /* 滑過變成熱血紅 */
                transform: translateY(-3px);
            }

            /* 底部版權宣告 */
            .footer-copyright {
                text-align: center;
                font-size: 13px;
                color: rgba(255, 255, 255, 0.4);
                letter-spacing: 1px;
            }

            /* 手機版 RWD：改為上下垂直置中排列 */
            @media (max-width: 768px) {
                .footer-container {
                    flex-direction: column;
                    text-align: center;
                    gap: 30px;
                }
            }
            /* =========================================
               15. 簡易轉播資訊 (文字版：桌機不換行)
               ========================================= */
            .broadcast-text {
                max-width: 1200px;
                margin: 25px auto 0 auto;
                padding: 15px 20px;
                background-color: var(--ct-white);
                border-radius: 8px;
                color: var(--text-dark);
                font-size: 13px;
                line-height: 1.8;
                text-align: center;
                border: 1px solid var(--accent-light);

                /* 💡 關鍵魔法：強制不換行，並支援橫向滑動 */
                white-space: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none; /* Firefox 隱藏捲軸 */
            }

            .broadcast-text::-webkit-scrollbar {
                display: none; /* Chrome/Safari 隱藏捲軸 */
            }

            .broadcast-text strong {
                color: var(--ct-red);
                margin-right: 10px;
                font-size: 16px;
            }

            .broadcast-text span {
                display: inline-block;
                margin: 0 5px;
            }

            /* 手機版：恢復為可換行的上下條列式 */
            @media (max-width: 990px) {
                .broadcast-text {
                    text-align: left;
                    font-size: 13px;
                    margin: 25px 15px 0 15px;
                    white-space: normal; /* 💡 手機版解除不換行限制 */
                }
                .broadcast-text strong {
                    display: block;
                    margin-bottom: 8px;
                    border-bottom: 2px solid var(--accent-light);
                    padding-bottom: 5px;
                }
                .broadcast-text span {
                    display: block;
                    margin: 5px 0;
                }
                .broadcast-text .divider {
                    display: none;
                }
            }
            /* =========================================
               新增：現場紀實 (照片牆漸層折疊展開)
               ========================================= */
            .gallery-wrapper {
                position: relative;
                max-height: 700px; /* 💡 初始限制高度，大約顯示 2~3 排照片 */
                overflow: hidden;
                /* 展開時的平滑過場動畫 */
                transition: max-height 1s cubic-bezier(0.25, 0.8, 0.25, 1);
            }

            .gallery-wrapper.is-expanded {
                max-height: 10000px; /* 💡 展開後給一個極大值以容納 20+ 張照片 */
            }

            /* 遮罩漸層，顏色設定為與外層 section 相同的 bg-gray (#F4F7FB) */
            .gallery-overlay {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 250px;
                background: linear-gradient(to bottom, rgba(244, 247, 251, 0) 0%, rgba(244, 247, 251, 1) 80%);
                display: flex;
                align-items: flex-end;
                justify-content: center;
                padding-bottom: 20px;
                z-index: 2;
                transition: opacity 0.5s;
            }

            /* 展開後隱藏漸層與按鈕 */
            .gallery-wrapper.is-expanded .gallery-overlay {
                opacity: 0;
                pointer-events: none;
            }

            /* 展開按鈕的精緻設計 */
            .btn-expand {
                background-color: var(--ct-blue);
                color: var(--ct-white);
                border: none;
                padding: 12px 35px;
                border-radius: 30px;
                font-size: 16px;
                font-weight: bold;
                cursor: pointer;
                box-shadow: 0 6px 20px rgba(53, 76, 96, 0.3);
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .btn-expand:hover {
                background-color: var(--ct-red);
                transform: translateY(-3px) scale(1.05);
                box-shadow: 0 8px 25px rgba(227, 24, 55, 0.4);
            }
            /* =========================================
               手機版魔法：現場紀實變身「橫向滑動卡片夾」
               ========================================= */
            @media (max-width: 768px) {
                /* 1. 解除手機版的折疊限制，因為我們要改成橫向滑動了 */
                .gallery-wrapper {
                    max-height: none !important;
                    overflow: visible;
                }

                /* 2. 手機版隱藏「展開全部照片」按鈕與白霧遮罩 */
                .gallery-overlay {
                    display: none !important;
                }

                /* 3. 將瀑布流改為橫向滑動容器 */
                .photo-wall {
                    display: flex;
                    flex-wrap: nowrap;
                    column-count: auto; /* 取消瀑布流排版 */
                    gap: 15px;
                    padding-bottom: 20px; /* 留點空間給卡片陰影 */
                    overflow-x: auto;
                    scroll-snap-type: x mandatory; /* 啟動卡片吸附魔法 */
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none; /* 隱藏捲軸保持乾淨 */
                }

                .photo-wall::-webkit-scrollbar {
                    display: none;
                }

                /* 4. 每張照片變成獨立的精美卡片 */
                .photo-item {
                    flex: 0 0 85vw; /* 💡 佔據螢幕 85% 寬度，露出下一張的邊緣暗示可滑動 */
                    scroll-snap-align: center; /* 💡 滑動時自動將卡片停在正中間 */
                    margin-bottom: 0;
                    height: 50vh; /* 固定一個漂亮的高度 */
                    min-height: 350px;
                    border-radius: 16px;
                    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* 加深卡片立體感 */
                }

                .photo-item img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover; /* 讓不同比例的照片都能完美填滿卡片，不會變形 */
                }
            }