:root {
			/* 主色調 */
			--color-primary-red: #D12828;
			--color-primary-blue: #2639C0;
            --color-primary-yellow: #FAC300;

			/* 選單底色漸層（左至右） */
			--gradient-menu: linear-gradient(to right,
				#3679FF 0%,
				#14289B 68%,
				#00004E 100%);

			/* 強調色漸層（原本桃紅/青色系，統一改為主色調） */
			--gradient-accent: linear-gradient(90deg, var(--color-primary-red), var(--color-primary-blue));
			--color-accent-glow: rgba(38, 57, 192, 0.6);
		}

		.main .kv {
			/* 不再強制 100vh，改成跟著主視覺內容（.kv-stage，依 16:9 比例自動換算高度）走，
			   避免圖片縮小後下方留下大片黑色空白，讓 sticky header 能緊接在圖片下緣 */
			height: auto !important;
		}

		.wrapper,
		.main {
			overflow-x: clip !important;
			overflow-y: visible !important;
			width: 100%;
			max-width: 100%;
		}

		html,
		body {
			width: 100%;
			max-width: 100vw;
			overflow-x: hidden;
		}

		.header {
			position: -webkit-sticky !important;
			position: sticky !important;
			top: 0 !important;
			z-index: 1000 !important;
			background: var(--gradient-menu) !important;
		}

		/* 選單展開時，.header 本身的 z-index 也要跟著拉高。
		   因為 .header 是 position:sticky + 有自己的 z-index，會形成獨立的堆疊環境，
		   裡面的 .menuBox 不管設多高的 z-index，都只會在 .header 內部比大小，
		   對外（例如右側浮動按鈕）還是被 .header 自己的 z-index(1000) 限制住，
		   所以選單一展開，浮動按鈕(z-index:9999)反而會蓋在選單上面。 */
		.header:has(.menuBox.on) {
			z-index: 10002 !important;
		}

		/* 錨點偏移設定，防止被 sticky header 遮擋 */
		[id^="anchor"] {
			scroll-margin-top: 100px;
		}



/*延伸閱讀 iframe*/






.anchor4-iframe {
    display: block;
    width: 100%;
    height: 440px;
    border: none;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .anchor4-iframe {
        width: 80%;
        height: 770px;
        margin: 0 auto;
    }
}
/*拔線斷網的關鍵72小時*/

/* ============ 裝飾性數位雨背景（anchor1 測驗區塊背景） ============ */

/* 讓 z-index:-1 的裝飾層只沉到「該區塊自己的背景色」之上，
   不會被其他區塊蓋掉、也不會穿到頁面最底層 */
.main .page.anchor1 {
    isolation: isolate;
    background-image: url('../images/testbg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    /* 部分行動瀏覽器對 fixed 背景支援度不穩定，手機版改回一般捲動背景較保險 */
    .main .page.anchor1 {
        background-attachment: scroll;
    }
}

.secBg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    font-family: 'Ubuntu', monospace;
}

.secBg--rain {
    display: flex;
    justify-content: space-evenly;
}

.secBg--rain .secBg-col {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 1px;
    color: #2639C0;
    opacity: 0.05;
    animation: secBgRainFall linear infinite;
}

@keyframes secBgRainFall {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0%); }
}

@media (max-width: 768px) {
    .secBg--rain .secBg-col { font-size: 11px; }
}

/* ==========================================
   【測測看】AI時代焦慮感自我評測 - 第一關：焦慮感自我評測
   五項拉桿 + 即時加總 + 解密翻牌卡
   ========================================== */
.aqCard {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 20px auto;
    perspective: 1600px;
    scroll-margin-top: 100px; /* 對應 sticky 選單高度，scrollIntoView 時避免頂端被擋住 */
    opacity: 0; /* 進場動畫觸發前先隱藏，避免先完整閃現一下才播放動畫 */
}

.aqCard.animate__animated {
    opacity: 1; /* 交給 animate.css 的關鍵影格自己控制透明度變化 */
}

.aqCard-inner {
    position: relative;
    width: 100%;
    transition: transform 0.9s cubic-bezier(0.4, 0.2, 0.2, 1), height 0.4s ease;
    transform-style: preserve-3d;
}

.aqCard.is-flipped .aqCard-inner {
    transform: rotateY(180deg);
}

.aqCard-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(108, 60, 233, 0.28), 0 6px 20px rgba(58, 160, 255, 0.22);
    padding: 32px 28px;
}

.aqCard-back {
    transform: rotateY(180deg);
}

.aqCard-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.aqCard-stage {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    background: linear-gradient(90deg, #2639C0, #3AA0FF);
    padding: 5px 14px;
    border-radius: 999px;
}

.aqCard-title {
    font-size: 22px;
    font-weight: 700;
    color: #1E2022;
    margin: 0;
}

.aqCard-question {
    font-size: 18px;
    line-height: 1.8;
    color: #4a5560;
    text-align: left;
    margin: 0 0 26px;
}

.aqCard-sliders {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.aqSlider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.aqSlider-label {
    font-size: 16px;
    font-weight: 600;
    color: #2c3440;
}

.aqSlider-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #2639C0, #3AA0FF);
    border-radius: 999px;
}

/* 拉桿本體：漸層由冷靜藍 → 科技紫 → 警示洋紅，數值愈高顯示愈多暖色，呈現愈焦慮的視覺 */
.aqSlider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    background-color: #e7ecf2;
    background-image:
        linear-gradient(to right, transparent 0%, transparent var(--aq-percent, 44%), #e7ecf2 var(--aq-percent, 44%), #e7ecf2 100%),
        linear-gradient(to right, #3AA0FF 0%, #2639C0 55%, #FF3D81 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%;
    transition: background-image 0.05s linear;
}

.aqSlider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #2639C0;
    box-shadow: 0 2px 8px rgba(108, 60, 233, 0.4);
    cursor: pointer;
    margin-top: 0;
}

.aqSlider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #2639C0;
    box-shadow: 0 2px 8px rgba(108, 60, 233, 0.4);
    cursor: pointer;
}

.aqSlider-input::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: transparent;
}

.aqCard-total {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 0;
    margin-bottom: 22px;
    border-top: 2px dashed #eef2f6;
    border-bottom: 2px dashed #eef2f6;
}

.aqCard-totalLabel {
    font-size: 15px;
    font-weight: 700;
    color: #2c3440;
    margin-right: 6px;
}

.aqCard-totalValue {
    display: inline-block;
    font-size: 30px;
    line-height: 1.4;
    padding: 0 2px;
    font-weight: 900;
    background: linear-gradient(90deg, #2639C0, #3AA0FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aqCard-totalMax {
    font-size: 14px;
    color: #8a97a3;
}

.aqCard-btn {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    padding: 13px 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
    background: linear-gradient(90deg, #2639C0, #3AA0FF);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(108, 60, 233, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aqCard-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(108, 60, 233, 0.4);
}

.aqCard-btn-ghost {
    background: #fff;
    color: #2639C0;
    border: 2px solid #2639C0;
    box-shadow: none;
}

.aqCard-btn-ghost:hover {
    background: rgba(108, 60, 233, 0.06);
    box-shadow: none;
}

/* 背面分數列表 */
.aqCard-backScores {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.aqCard-backScore-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #2c3440;
}

.aqCard-backScore-row span:last-child {
    font-weight: 700;
    color: #2639C0;
}

.aqCard-backScore-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #eef2f6;
    font-size: 16px;
    font-weight: 700;
    color: #1E2022;
}

.aqCard-backScore-total span:last-child {
    display: inline-block;
    font-size: 24px;
    line-height: 1.4;
    padding: 0 2px;
    font-weight: 900;
    background: linear-gradient(90deg, #2639C0, #3AA0FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aqCard-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, #eef2f6, transparent);
    margin: 0 0 18px;
}

.aqCard-backText {
    font-size: 18px;
    line-height: 1.9;
    color: #4a5560;
    text-align: left;
    margin: 0 0 24px;
}

@media (max-width: 768px) {
    .aqCard {
        max-width: 90%;
        margin: 20px auto;
    }

    .aqCard-face {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .aqCard-title {
        font-size: 19px;
    }

    .aqCard-totalValue {
        font-size: 26px;
    }
}

/* ==========================================
   【測測看】AI時代 - 第三關：誰是真正的AI霸主？（點選排序型測驗）
   ========================================== */
.aqCard-hint {
    font-size: 13px;
    line-height: 1.7;
    color: #8a97a3;
    text-align: left;
    margin: -10px 0 22px;
}

.aqRank-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 26px;
}

.aqRank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.aqRank-label {
    font-size: 16px;
    font-weight: 600;
    color: #2c3440;
}

.aqRank-status {
    font-size: 12px;
    font-weight: 600;
    color: #a4afb9;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.aqRank-status.is-complete {
    color: #2639C0;
}

.aqRank-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aqRank-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #2c3440;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, padding 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.aqRank-chip:hover {
    border-color: #9DA6E3;
}

.aqRank-chip:active {
    transform: scale(0.96);
}

.aqRank-chip.is-ranked {
    padding-left: 32px;
    border-color: transparent;
    background: linear-gradient(90deg, rgba(108, 60, 233, 0.1), rgba(58, 160, 255, 0.1));
    color: #3d2e78;
}

.aqRank-chip.is-ranked::before {
    content: attr(data-rank);
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2639C0, #3AA0FF);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.aqRank-chip.is-rank1 {
    box-shadow: 0 0 0 2px rgba(108, 60, 233, 0.35);
}

.aqCard-btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

@media (max-width: 768px) {
    .aqRank-chip {
        font-size: 13px;
        padding: 7px 12px;
    }

    .aqRank-chip.is-ranked {
        padding-left: 28px;
    }
}

/* ==========================================
   五力段落標題：【AI基磐力】等，強調括號內文字
   ========================================== */
.powerHeading {
    display: block !important;
    text-align: center;
    padding: 20px 5px 0 !important;
}

.powerHeading-tag {
    position: relative;
    display: inline-block;
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 14px;
    margin-bottom: 18px;
}

.powerHeading-tag::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: 2px;
    transform: translateX(-50%);
    background: var(--gradient-accent);
    box-shadow: 0 0 10px var(--color-accent-glow);
}

.powerHeading-desc {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    color: #1E2022;
    letter-spacing: 0.02em;
}

/* anchor1 測驗區塊、anchor2 AI基磐力、anchor3 AI投資力、anchor4 AI人才力、anchor5 AI產業力、anchor6 AI應用力 背景改成深色照片，標題副敘述與前導文字改用淺色，確保可讀性 */
.page.anchor1 .powerHeading-desc,
.page.anchor2 .powerHeading-desc,
.page.anchor3 .powerHeading-desc,
.page.anchor4 .powerHeading-desc,
.page.anchor5 .powerHeading-desc,
.page.anchor6 .powerHeading-desc {
    color: #f2f4f7;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.page.anchor1 .txt1 p,
.page.anchor2 .txt1 p,
.page.anchor3 .txt1 p,
.page.anchor4 .txt1 p,
.page.anchor5 .txt1 p,
.page.anchor6 .txt1 p {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* AI基磐力區塊底圖 */
.main .page.anchor2 {
    isolation: isolate;
    background-image: url('../images/AI01bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* AI投資力區塊底圖 */
.main .page.anchor3 {
    isolation: isolate;
    background-image: url('../images/AI02bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* AI人才力區塊底圖 */
.main .page.anchor4 {
    isolation: isolate;
    background-image: url('../images/AI03bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* AI產業力區塊底圖 */
.main .page.anchor5 {
    isolation: isolate;
    background-image: url('../images/AI04bg.JPG');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* AI應用力區塊底圖 */
.main .page.anchor6 {
    isolation: isolate;
    background-image: url('../images/AI05bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (max-width: 768px) {
    .main .page.anchor2,
    .main .page.anchor3,
    .main .page.anchor4,
    .main .page.anchor5,
    .main .page.anchor6 {
        background-attachment: scroll;
    }

    /* AI產業力底圖手機版偏左對焦，避免重點內容被置中裁切掉 */
    .main .page.anchor5 {
        background-position: left center;
    }
}

@media (max-width: 768px) {
    .powerHeading-tag {
        font-size: 2rem;
        padding-bottom: 10px;
        margin-bottom: 14px;
    }

    .powerHeading-tag::after {
        width: 48px;
        height: 3px;
    }

    .powerHeading-desc {
        font-size: 1.2rem;
        padding: 0 10px;
    }
}

/* ==========================================
   五力段落 - 右側浮動導覽標示（滾動時顯示目前所在的力，可點選跳轉）
   ========================================== */
.fivePowerNav {
    position: fixed;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.fivePowerNav.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fivePowerNav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
}

.fivePowerNav-tick {
    display: inline-block;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: rgb(195 195 195 / 45%);
    transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.fivePowerNav-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgb(119, 119, 119);
    white-space: nowrap;
    transition: font-size 0.3s ease, color 0.3s ease;
}

.fivePowerNav-item:hover .fivePowerNav-label {
    color: rgb(195 195 195 / 80%);
}

.fivePowerNav-item:hover .fivePowerNav-tick {
    background: rgba(38, 57, 192, 0.5);
}

.fivePowerNav-item.is-active .fivePowerNav-tick {
    width: 34px;
    background: var(--gradient-accent);
    box-shadow: 0 0 8px var(--color-accent-glow);
}

.fivePowerNav-item.is-active .fivePowerNav-label {
    font-size: 17px;
    font-weight: 900;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 手機版：畫面較窄時，右側浮動導覽容易跟內文打架，先隱藏，靠原本選單/滾動瀏覽即可 */
@media (max-width: 991px) {
    .fivePowerNav {
        display: none;
    }
}

/* ==========================================
   五力段落 - 小圖表元件（每力短述下方，樣式共用，數據各自不同）
   ========================================== */
.powerChart {
    width: 100%;
    max-width: 620px;
    margin: 10px auto 0;
    padding: 26px 28px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 30, 60, 0.06);
    box-sizing: border-box;
}

.powerChart-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 16px;
    font-weight: 800;
    color: #1E2022;
    margin-bottom: 20px;
}

.powerChart-bullet {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2639C0, #3AA0FF);
    flex-shrink: 0;
}

.powerChart-unit {
    font-size: 13px;
    font-weight: 600;
    color: #8a97a3;
}

.powerChart-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.powerChart-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 10px;
}

.powerChart-label {
    font-size: 14px;
    font-weight: 700;
    color: #2c3440;
    white-space: nowrap;
}

.powerChart-barWrap {
    position: relative;
    display: block;
    height: 18px;
    border-radius: 4px;
    background: #f0f2f5;
    overflow: hidden;
}

.powerChart-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: linear-gradient(90deg, #2639C0, #3AA0FF);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
    mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
    transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.powerChart-value {
    font-size: 14px;
    font-weight: 800;
    color: #2c3440;
    min-width: 34px;
    text-align: left;
}

.powerChart-note {
    margin-top: 16px;
    font-size: 12px;
    color: #a4afb9;
    text-align: left;
}

@media (max-width: 768px) {
    .powerChart {
        max-width: 100%;
        margin: 10px auto 0;
        padding: 20px 18px;
        border-radius: 14px;
    }

    .powerChart-row {
        grid-template-columns: 52px 1fr auto;
        gap: 8px;
    }

    .powerChart-label,
    .powerChart-value {
        font-size: 13px;
    }
}

/* ==========================================
   五力段落 - 共用資料來源說明（小灰框，放在五力最後）
   ========================================== */
.powerSources {
    width: 100%;
    max-width: 900px;
    margin: 130px auto 0;
    padding: 18px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
}

.powerSources p {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .powerSources {
        padding: 14px 16px 0;
        margin: 28px auto 0;
    }

    .powerSources p {
        font-size: 11px;
    }
}

/* ==========================================
   五力段落 - 實例案例區塊（圖左文右，深色背景版本）
   用 CSS Grid 具名區域控制排版，方便手機版重新排序（標題→照片→內文）
   而不需要更動 HTML 內容順序
   ========================================== */
.caseStudy {
    width: 100%;
    max-width: 1140px;
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: 46% 1fr;
    grid-template-areas:
        "media title"
        "media content";
    align-items: center;
    gap: 0 56px;
}

.caseStudy-media {
    position: relative;
    grid-area: media;
}

/* 圖片外圍的漸層光暈，撐出桌機版的氣勢感 */
.caseStudy-media::before {
    content: '';
    position: absolute;
    inset: -18px;
    background: linear-gradient(135deg, rgba(108, 60, 233, 0.45), rgba(58, 160, 255, 0.3));
    border-radius: 30px;
    filter: blur(22px);
    z-index: -1;
}

.caseStudy-img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.caseStudy-caption {
    margin: 10px 4px 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    text-align: left;
}

.caseStudy-content {
    grid-area: content;
    min-width: 0;
}

/* 無配圖版本：純文字案例，維持適中寬度置中，不用整寬撐開 */
.caseStudy-textOnly {
    width: 100%;
    max-width: 720px;
    margin: 20px auto 0;
}

.caseStudy-heading {
    grid-area: title;
}

.caseStudy-title {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    text-align: left;
    margin: 0 0 12px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.caseStudy-title-main {
    color: var(--color-primary-red);
}

.caseStudy-title-tag {
    color: var(--color-primary-blue);
}

.caseStudy-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f2f4f7;
    text-align: left;
    margin: 0;
    line-height: 1.6;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.caseStudy-text {
    font-size: 16px;
    line-height: 1.9;
    color: #ffffff;
    text-align: left;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
    .caseStudy {
        max-width: 700px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "media"
            "content";
        gap: 0;
    }

    .caseStudy-heading {
        margin-bottom: 18px;
    }

    /* 手機版標題斷成兩行：「台灣這樣打造」第一行，「【XX力】」換到第二行，顏色維持不變 */
    .caseStudy-title-tag {
        display: block;
    }

    .caseStudy-media {
        width: 100%;
        margin-bottom: 22px;
    }

    .caseStudy-media::before {
        display: none;
    }

    .caseStudy-img {
        height: auto;
        max-height: 420px;
        width: 100%;
        border-radius: 0;
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
    }

    .caseStudy-title,
    .caseStudy-subtitle,
    .caseStudy-caption {
        text-align: center;
    }

    .caseStudy-heading,
    .caseStudy-content,
    .caseStudy-textOnly,
    .caseStudy-caption {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .caseStudy-media {
        margin-bottom: 16px;
    }

    .caseStudy-img {
        border-radius: 0;
        max-height: 260px;
    }

    .caseStudy-title {
        font-size: 1.25rem;
    }

    .caseStudy-subtitle {
        font-size: 1.2rem;
        margin-bottom: 14px;
    }

    .caseStudy-text {
        font-size: 16px;
    }
}

/* ==========================================
   AI產業力 - 「黃仁勳五層蛋糕論」手風琴圖表
   五層各自不同顏色，科技感中帶點可愛蛋糕感
   ========================================== */
.cakeAccordion {
    width: 100%;
    max-width: 820px;
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cakeLayer {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.cakeLayer-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    padding: 18px 22px;
    font-family: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.cakeLayer-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.cakeLayer-headText {
    flex: 1;
    min-width: 0;
}

.cakeLayer-name {
    display: block;
    font-size: 19px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.cakeLayer-sub {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
}

.cakeLayer-caret {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    position: relative;
    transition: transform 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.cakeLayer-caret::before,
.cakeLayer-caret::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 1px;
}

.cakeLayer-caret::before {
    width: 10px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.cakeLayer-caret::after {
    width: 2px;
    height: 10px;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.cakeLayer.is-open .cakeLayer-caret::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.cakeLayer.is-open .cakeLayer-caret {
    transform: rotate(180deg);
}

.cakeLayer-body {
    max-height: 0;
    overflow: hidden;
    background: rgba(10, 12, 20, 0.72);
    transition: max-height 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.cakeLayer-bodyInner {
    padding: 20px 22px 22px;
    text-align: left;
}

.cakeRow {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cakeRow:last-of-type {
    border-bottom: none;
}

.cakeRow-label {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.5;
}

.cakeRow-value {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

.cakeRow-sub {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.cakeRow-sub:last-child {
    margin-bottom: 0;
}

.cakeRow-subLabel {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    padding-top: 2px;
}

.stockHot {
    color: #ff4d6d;
    font-weight: 800;
}

.cakeLayer-note {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.18);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
}

/* ── 五層各自配色：由上（應用/粉）到下（能源/橘），科技感中帶蛋糕的可愛感 ── */
.cakeLayer--app .cakeLayer-head {
    background: linear-gradient(120deg, #ff5fa8, #ff8fc4);
}
.cakeLayer--app { box-shadow: 0 14px 34px rgba(255, 95, 168, 0.25); }

.cakeLayer--model .cakeLayer-head {
    background: linear-gradient(120deg, #8b5cf6, #b794f6);
}
.cakeLayer--model { box-shadow: 0 14px 34px rgba(139, 92, 246, 0.25); }

.cakeLayer--infra .cakeLayer-head {
    background: linear-gradient(120deg, #22a6ff, #6fc8ff);
}
.cakeLayer--infra { box-shadow: 0 14px 34px rgba(34, 166, 255, 0.25); }

.cakeLayer--chip .cakeLayer-head {
    background: linear-gradient(120deg, #17d0a0, #6be8c4);
}
.cakeLayer--chip { box-shadow: 0 14px 34px rgba(23, 208, 160, 0.25); }

.cakeLayer--energy .cakeLayer-head {
    background: linear-gradient(120deg, #ff9a3c, #ffc36e);
}
.cakeLayer--energy { box-shadow: 0 14px 34px rgba(255, 154, 60, 0.25); }

.cakeAccordion-footnote {
    max-width: 820px;
    margin: 16px auto 0;
    font-size: 12px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
}

@media (max-width: 768px) {
    .cakeLayer-head {
        padding: 15px 16px;
        gap: 10px;
    }

    .cakeLayer-icon {
        font-size: 19px;
    }

    .cakeLayer-name {
        font-size: 16px;
    }

    .cakeLayer-bodyInner {
        padding: 16px 16px 18px;
    }

    .cakeRow {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .cakeRow-label {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
        font-weight: 700;
    }

    .cakeRow-value {
        font-size: 13.5px;
    }

    .cakeRow-sub {
        flex-direction: column;
        gap: 2px;
    }
}

@media (max-width: 768px) {
    /* 手機版：只在真正需要收窄的文字元素本身設定 80%，不去動外層的 contBox。
       這樣任何一個元素的寬度都只會被「這一條規則」決定，不會有兩層 80% 疊加縮成 64% 的風險 */
    .page.anchor1 .txt1,
    .page.anchor2 .txt1,
    .page.anchor3 .txt1,
    .page.anchor4 .txt1,
    .page.anchor5 .txt1,
    .page.anchor6 .txt1,
    .page.anchor7 .txt1,
    .powerChart,
    .caseStudy-heading,
    .caseStudy-content,
    .caseStudy-textOnly,
    .caseStudy-caption,
    .cakeAccordion,
    .cakeAccordion-footnote,
    .powerSources {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================
   手機版選單（menuBox）- 深色科技風設計
   ========================================== */
.header .menuBox {
    background: var(--gradient-menu);
}

.header .menuBox .block {
    width: 84%;
}

.header .menuBox {
    z-index: 10000; /* 蓋過右下角浮動按鈕(z-index:9999)，展開選單時要在最上層 */
}

/* 漢堡/關閉(X)按鈕本身的 z-index 要比 menuBox 更高，
   不然選單展開時，全螢幕的深色選單背景會蓋住這顆按鈕，變成看不到 X 可以關閉 */
.header .block .navOpen {
    z-index: 10001;
}

.header .menuBox .block .navBtn {
    position: relative;
    font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.04em;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.header .menuBox .block .navBtn:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* 每個選項左側的發光短線，點選/觸碰時滑出 */
.header .menuBox .block .navBtn::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    box-shadow: 0 0 8px rgba(38, 57, 192, 0.7);
    transform: translateY(-50%);
    transition: width 0.3s ease;
}

.header .menuBox .block .navBtn:hover,
.header .menuBox .block .navBtn:active {
    color: var(--color-primary-yellow);
    padding-left: 20px;
}

.header .menuBox .block .navBtn:hover::before,
.header .menuBox .block .navBtn:active::before {
    width: 14px;
}

/* ==========================================
   選單切換點：寬度 1100px 以下改用漢堡選單
   layout.css 原本就在 1100px 以下隱藏橫向選單，但下方主視覺段落有一條
   「992px 以上 .mShow 一律隱藏（!important）」的通用規則，會把漢堡鈕也藏起來，
   造成 992～1100px 之間兩種選單都看不到。這裡只針對選單覆寫，不影響其他 .mShow 元素。
   ========================================== */
@media (max-width: 1100px) {
    .header .block .menuList {
        display: none !important;
    }

    .header .block .navOpen.mShow {
        display: block !important;
    }
}

@media (min-width: 1101px) {
    .header .block .navOpen.mShow {
        display: none !important;
    }

    /* 寬螢幕不會出現漢堡鈕，萬一縮放視窗時選單仍是展開狀態，一併隱藏 */
    .header .menuBox {
        display: none;
    }
}

/* ==========================================
   選單 LOGO 組：LOGO1（遠見）｜LOGO2（城市）
   ========================================== */
.header .block .logoGroup {
    display: flex;
    align-items: center;
    gap: 14px;
    left: 1%;
    height: 50px;
}

/* 原本 .logo 有固定 width:100px 與 left:1%，放進 LOGO 組後改由 LOGO 組負責定位 */
.header .block .logoGroup .logo {
    left: 0;
    width: auto;
    height: 50px;
    display: flex;
    align-items: center;
}

.header .block .logoGroup-divider {
    display: block;
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.header .block .logoGroup-city {
    display: flex;
    align-items: center;
    height: 50px;
}

/* 城市 LOGO 高度：如果看起來比遠見 LOGO 大或小，調整這裡的 height 即可 */
.header .block .logoGroup-city img {
    display: block;
    height: 32px;
    width: auto;
}


@media (max-width: 767px) {
    .header .block .logoGroup {
        gap: 10px;
    }

    .header .block .logoGroup .logo img {
        height: 40px !important;
    }

    .header .block .logoGroup-divider {
        height: 22px;
    }

    .header .block .logoGroup-city img {
        height: 26px;
    }
}



/* ==========================================
   合作夥伴 - LOGO 牆（4 x 3，先用示意圖預留位置）
   ========================================== */
.partnerGrid {
    display: grid;
    grid-template-columns: repeat(4, 240px);
    gap: 24px;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

.partnerGrid-item {
    width: 240px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.partnerGrid-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.partnerGrid-item:hover img {
    transform: scale(1.05);
}

.partnerGrid-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

@media (max-width: 991px) {
    .partnerGrid {
        grid-template-columns: repeat(2, minmax(0, 240px));
        gap: 18px;
    }
}

@media (max-width: 768px) {
    /* 手機版：逐一往下展開，單欄排列 */
    .partnerGrid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .partnerGrid-item {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
    }
}

/* ==========================================
   影音專題 - YouTube 播放清單版型（左側播放器 + 右側縮圖清單）
   ========================================== */
.videoSeries {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.videoSeries-player {
    flex: 1 1 68%;
    min-width: 0;
}

/* YouTube 播放器：用 padding-bottom 撐出 16:9 比例，隨版面等比縮放 */
.videoSeries-playerWrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.videoSeries-playerWrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.videoSeries-list {
    flex: 1 1 32%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-right: 4px;
}

.videoSeries-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.videoSeries-item:hover {
    background: rgba(108, 60, 233, 0.06);
}

.videoSeries-item.is-active {
    background: rgba(108, 60, 233, 0.08);
    border-color: rgba(108, 60, 233, 0.3);
}

.videoSeries-thumb {
    position: relative;
    flex: 0 0 120px;
    width: 120px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

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

.videoSeries-playIcon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.videoSeries-item:hover .videoSeries-playIcon,
.videoSeries-item.is-active .videoSeries-playIcon {
    opacity: 1;
}

.videoSeries-item.is-active .videoSeries-playIcon {
    background: rgba(108, 60, 233, 0.45);
}

.videoSeries-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.videoSeries-ep {
    font-size: 12px;
    font-weight: 700;
    color: #2639C0;
}

.videoSeries-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #1E2022;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.videoSeries-item.is-active .videoSeries-title {
    color: #2639C0;
}

/* 手機版：清單移到播放器下方，整體寬度收窄到 80% */
@media (max-width: 768px) {
    .videoSeries {
        flex-direction: column;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        gap: 20px;
    }

    .videoSeries-player,
    .videoSeries-list {
        flex: none;
        width: 100%;
    }

    .videoSeries-thumb {
        flex: 0 0 100px;
        width: 100px;
        height: 56px;
    }

    .videoSeries-ep {
        font-size: 11px;
    }

    .videoSeries-title {
        font-size: 13px;
    }
}

/* ==========================================
   右側浮動按鈕 - 導向 AI 五力現場影片區塊
   ========================================== */
#videoSeries {
    scroll-margin-top: 100px; /* 對應 sticky 選單高度，跳轉時避免頂端被擋住 */
}

.float-videoBtn {
    position: fixed;
    right: 2%;
    bottom: calc(20% + 104px);
    width: 64px;
    display: block;
    line-height: 0;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 10px rgba(108, 60, 233, 0.4));
    animation: floatVideoPulse 2.4s ease-in-out infinite;
}

.float-videoBtn.on {
    transition: transform 0.3s ease;
}

.float-videoBtn::before,
.float-videoBtn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 rgba(251, 37, 255, 0.55);
    animation: floatVideoRipple 2.4s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}

.float-videoBtn::after {
    animation-delay: 1.2s; /* 第二圈漣漪錯開時間，看起來連續不斷 */
}

.float-videoBtn img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.float-videoBtn:hover {
    transform: scale(1.06);
    animation-play-state: paused;
}

@keyframes floatVideoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes floatVideoRipple {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 37, 255, 0.55);
        opacity: 1;
    }
    100% {
        box-shadow: 0 0 0 22px rgba(34, 204, 255, 0);
        opacity: 0;
    }
}


/* ============================================================
   2026 九合一大選 專題 - 主視覺(KV) + 倒數計時 + AI問答 + 文章輪播
   由 index.html 內嵌 <style> 整合移入，方便集中維護
   ============================================================ */
		/* ==========================================
		   AI新國力 - 新主視覺 (Key Visual) 樣式
		   結構：開場影片 → 淡出 → 機房機器人靜態底圖
		         + 動態科技光線層 + 動態數據流層
		   ========================================== */
		.kv-container {
			position: relative;
			width: 100%;
			overflow: hidden;
			background: #05070c; /* 圖片載入前的底色，避免白閃 */
		}

		/* ── 主視覺畫布：寬度固定 100%，高度依 16:9 比例自動跟著寬度換算 (預設16:9，請依 images/main.jpg 實際比例調整) ──
		   不再強制 100vh，戳印/標題定位跟著同一張畫布等比縮放，永遠對齊底圖，不會出現黑邊留白 */
		.kv-stage {
			position: relative;
			width: 100%;
			aspect-ratio: 16 / 9;
			overflow: hidden;
		}

		/* 主視覺底圖：2026九合一大選 紅藍分割 × 投票單設計 (images/main.jpg) ── */
		.kv-bg-main {
			position: absolute;
			inset: 0;
			z-index: 1;
			background: url('../images/main.jpg') no-repeat center center;
			background-size: cover;
		}

		/* 深色漸層已移除 */

		.kv-content {
			position: relative;
			width: 100%;
			max-width: 1400px;
			margin: 0 auto;
			z-index: 5;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 80px 20px;
			min-height: 100vh;
		}

		/* 文字內容區塊：直接顯示，不做進場動畫 */
		.kv-text-group {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			z-index: 4;
			width: 100%;
			max-width: 1000px;
			margin: 10vh auto 0;
		}

		/* 主標題 (包含外層與漸層效果) */
		.kv-title {
			position: relative;
			margin: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		/* ── HUD 邊角框：框住主標題，強化科技儀表感（靜態顯示） ── */
		.kv-title-hud {
			position: relative;
			display: inline-block;
			padding: 16px 44px;
		}

		.kv-hud-corner {
			position: absolute;
			width: 22px;
			height: 22px;
			border: 2px solid #5adcff;
			filter: drop-shadow(0 0 6px rgba(90, 220, 255, 0.75));
			font-style: normal;
		}

		.kv-hud-corner.tl { top: 0;    left: 0;  border-right: none; border-bottom: none; }
		.kv-hud-corner.tr { top: 0;    right: 0; border-left: none;  border-bottom: none; }
		.kv-hud-corner.bl { bottom: 0; left: 0;  border-right: none; border-top: none;    }
		.kv-hud-corner.br { bottom: 0; right: 0; border-left: none;  border-top: none;    }

		/* ── 主標題文字：紫→藍→白 漸層（靜態） ── */
		.kv-title-main {
			position: relative;
			display: inline-block;
			font-size: 5.8rem;
			font-weight: 900;
			font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
			letter-spacing: 0.05em;
			line-height: 1.2;
			background: linear-gradient(90deg, #6C3CE9 0%, #5adcff 35%, #ffffff 50%, #5adcff 65%, #6C3CE9 100%);
			background-size: 250% 100%;
			background-position: 50% 50%;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			filter: drop-shadow(0 2px 10px rgba(60, 120, 255, 0.45));
		}

		/* ── 發光分隔線：置中固定寬度，兩端帶光點 ── */
		.kv-title-rule {
			display: block;
			width: 220px;
			height: 2px;
			margin: 14px auto 22px;
			background: linear-gradient(90deg, transparent, #6C3CE9, #5adcff, #6C3CE9, transparent);
			box-shadow: 0 0 10px rgba(90, 220, 255, 0.8);
			position: relative;
		}

		.kv-title-rule::before,
		.kv-title-rule::after {
			content: '';
			position: absolute;
			top: 50%;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #5adcff;
			box-shadow: 0 0 8px rgba(90, 220, 255, 0.95);
			transform: translateY(-50%);
		}

		.kv-title-rule::before { left: -3px; }
		.kv-title-rule::after  { right: -3px; }

		.kv-title-sub {
			display: inline;
			font-size: 2.2rem;
			font-weight: 700;
			color: #ffffff;
			font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
			letter-spacing: 0.08em;
			line-height: 1.3;
			text-shadow: 0 2px 10px rgba(0,0,0,0.9);
			margin-top: 5vh; /* 確保副標位於閃光地平線下方 */
		}

		/* PC 顯示 & 手機顯示輔助類別 */
		@media (min-width: 992px) {
			.pcShow { display: block !important; }
			.mShow { display: none !important; }
		}

		/* 響應式微調 (RWD) */
		@media (max-width: 991px) {
			.pcShow { display: none !important; }
			.mShow { display: flex !important; }

			.kv-content {
				flex-direction: column;
				padding: 100px 20px 60px;
				min-height: 100vh;
			}



			.kv-text-group {
				align-items: center;
				margin-left: 0;
				margin-right: 0;
				text-align: center;
				margin: 10vh auto 0;
			}
			
			.kv-title {
				align-items: center;
			}

			.kv-title-hud {
				padding: 12px 30px;
			}

			.kv-hud-corner {
				width: 16px;
				height: 16px;
			}

			.kv-title-main {
				font-size: 5rem;
			}

			.kv-title-rule {
				margin: 10px auto 16px;
			}

			.kv-title-sub {
				font-size: 1.5rem;
				white-space: pre-line; /* 讓副標文字裡的換行字元在手機版真正換行 */
			}
		}

		@media (max-width: 576px) {
			.kv-title-hud {
				padding: 10px 22px;
			}

			.kv-hud-corner {
				width: 13px;
				height: 13px;
			}

			.kv-title-main {
				font-size: 5rem;
			}
			.kv-title-sub {
				font-size: 1.5rem;
			}

			.word-break-m {
				display: block;
			}
		}

		/* ==========================================
		   2026 九合一大選 - 主視覺動態元件
		   1. 投票單戳印 (img/stamp.svg)
		   2. 右側三行主標 (img/2026.svg, img/9-1.svg, img/main-title.svg)
		   ========================================== */

		/* ── 1. 投票單戳印：蓋章式進場 + 待機震動 + 印泥擴散暈染 ── */
		.kv-stamp-wrap {
			position: absolute;
			left: 21%;
			top: 43%;
			width: clamp(45px, 3vw, 130px);
			aspect-ratio: 1 / 1;
			z-index: 3;
			transform: translate(-50%, -50%);
			pointer-events: none;
		}

		.kv-stamp-ring {
			display: none; /* 依需求隱藏蓋章前的紅色暈染圈，只保留圖章本身的蓋章動畫 */
			position: absolute;
			inset: 0;
			border: 3px solid #e0293f;
			border-radius: 50%;
			opacity: 0;
			animation: stampInkRing 1.4s ease-out 1.05s 1 both;
		}

		.kv-stamp {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
			transform-origin: center;
			filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 14px rgba(224, 41, 63, 0.55));
			opacity: 0;
			animation:
				stampSlam 0.55s cubic-bezier(.32, 1.85, .38, 1) 0.55s 1 both,
				stampIdle 2.6s ease-in-out 1.2s infinite;
		}

		@keyframes stampSlam {
			0%   { opacity: 0; transform: scale(2.4) rotate(-26deg); }
			55%  { opacity: 1; transform: scale(0.92) rotate(-6deg); }
			75%  { transform: scale(1.06) rotate(-9deg); }
			100% { opacity: 1; transform: scale(1) rotate(-8deg); }
		}

		@keyframes stampIdle {
			0%, 100% { transform: scale(1) rotate(-8deg); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)) drop-shadow(0 0 14px rgba(224,41,63,0.55)); }
			50%      { transform: scale(1.035) rotate(-8deg); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)) drop-shadow(0 0 22px rgba(224,41,63,0.85)); }
		}

		@keyframes stampInkRing {
			0%   { opacity: 0.85; transform: scale(0.6); }
			100% { opacity: 0;    transform: scale(2.1); }
		}

		/* ── 2. 右側文字組：遠見戰情室（品牌標籤）→ 主標 → 副標 ──
		   層級：主標最大；戰情室與副標同為小字，用不同形式區分——
		   戰情室＝細框標籤（品牌），副標＝白底色塊（說明）。字級步階約 3.5 : 1.35 : 1.15（vw）。
		   顏色集中在下面四個變數，換底圖後如果對比不夠，只要改這裡 */
		.kv-title-stack {
			--kv-title-color: #ffffff;
			--kv-room-color: #ffffff;
			--kv-sub-bg: #ffffff;
			--kv-sub-color: var(--color-primary-blue, #2639C0);

			position: absolute;
			left: 57%;
			top: 58%;
			transform: translateY(-50%);
			z-index: 3;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			text-align: left;
			width: max-content;
			max-width: 40%;
			font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
		}

		.kv-title-stack p {
			margin: 0;
		}

		/* 遠見戰情室：細框標籤。letter-spacing 會在最後一字後多留空白，右內距少 0.3em 抵消 */
		.kv-headline-room {
			padding: 0.35em calc(0.9em - 0.3em) 0.35em 0.9em;
			font-size: clamp(11px, 1.25vw, 22px);
			font-weight: 700;
			line-height: 1.3;
			letter-spacing: 0.3em;
			color: var(--kv-room-color);
			border: 1.5px solid rgba(255, 255, 255, 0.85);
			border-radius: 3px;
			opacity: 0;
			animation: headlineSubIn 0.7s ease-out 0.1s forwards;
		}

		/* 主標：兩行（「2026 九合一大選」＋「看遠見」），行高放寬，不擠 */
		.kv-headline {
			margin-top: clamp(12px, 1.6vw, 30px) !important;
			font-size: clamp(22px, 3.5vw, 68px);
			font-weight: 900;
			line-height: 1.3;
			letter-spacing: 0.04em;
			color: var(--kv-title-color);
			text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
		}

		.kv-headline-line {
			display: block;
			white-space: nowrap;
			opacity: 0;
			transform: translateY(20px);
			animation: titleLineIn 0.8s cubic-bezier(.16, 1, .3, 1) forwards;
		}

		.kv-headline-line1 { animation-delay: 0.35s; }
		.kv-headline-line2 { animation-delay: 0.55s; }

		/* 年份：使用 img/2026.svg。高度以 em 綁定主標字級（與「九合一大選」等高），寬度依圖檔比例自動；
		   若覺得與文字大小不一致，調整 height，垂直位置微調 vertical-align */
		.kv-headline-year {
			display: inline-block;
			height: 1em;
			width: auto;
			vertical-align: -0.2em;
		}

		/* 副標：白底色塊（呼應選票欄位），任何底色上都讀得清楚 */
		.kv-headline-sub {
			align-self: flex-start;
			margin-top: clamp(14px, 1.8vw, 34px) !important;
			padding: 0.4em calc(0.9em - 0.22em) 0.4em 0.9em;
			font-size: clamp(12px, 1.35vw, 26px);
			font-weight: 700;
			line-height: 1.3;
			letter-spacing: 0.22em;
			color: #ffffff;
			background: #FF0000;
			opacity: 0;
			animation: headlineSubIn 0.7s ease-out 0.9s forwards;
		}

		@keyframes titleLineIn {
			0%   { opacity: 0; transform: translateY(20px); }
			100% { opacity: 1; transform: translateY(0); }
		}

		@keyframes headlineSubIn {
			0%   { opacity: 0; transform: translateY(10px); }
			100% { opacity: 1; transform: translateY(0); }
		}

		/* 使用者系統設定為「減少動態效果」時，直接顯示最終畫面 */
		@media (prefers-reduced-motion: reduce) {
			.kv-headline-room,
			.kv-headline-line,
			.kv-headline-sub {
				animation: none;
				opacity: 1;
				transform: none;
			}
		}

		/* ── 主視覺標題動態強化（只加光澤、底線、光暈，不更動任何位置與尺寸） ──
		   1. 2026：進場後持續柔和發光
		   2. 遠見戰情室：細框標籤外圍呼吸光
		   3. 九合一大選看遠見：每隔幾秒一道金色光澤掃過文字
		   4. 縣市長最新選情分析：紅色色塊上一道白光掃過
		   想調整頻率，改各 animation 的秒數即可 */
		.kv-headline-year {
			animation: kvYearGlow 3s ease-in-out 1.4s infinite;
		}

		@keyframes kvYearGlow {
			0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 226, 122, 0)); }
			50%      { filter: drop-shadow(0 0 0.18em rgba(255, 226, 122, 0.85)); }
		}

		.kv-headline-room {
			animation: headlineSubIn 0.7s ease-out 0.1s forwards,
			           kvRoomPulse 2.6s ease-in-out 1.2s infinite;
		}

		@keyframes kvRoomPulse {
			0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); border-color: rgba(255, 255, 255, 0.85); }
			50%      { box-shadow: 0 0 0.9em 0.05em rgba(255, 255, 255, 0.55); border-color: #ffffff; }
		}

		/* 第二行：文字改用漸層填色做光澤掃過；原本 text-shadow 在漸層文字上會蓋到字，改用 filter 陰影維持相同的立體感 */
		.kv-headline-hl {
			position: relative;
			display: inline;
			background: linear-gradient(105deg, #ffffff 0%, #ffffff 42%, #FFE27A 50%, #ffffff 58%, #ffffff 100%);
			background-size: 300% 100%;
			background-position: 100% 0;
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			text-shadow: none;
			filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3));
			animation: kvTitleShine 5s ease-in-out 1.8s infinite;
		}

		@keyframes kvTitleShine {
			0%   { background-position: 100% 0; }
			35%  { background-position: 0% 0; }
			100% { background-position: 0% 0; }
		}

		/* 副標：紅色色塊上的白光掃過（overflow 只裁切光條，不影響色塊大小） */
		.kv-headline-sub {
			position: relative;
			overflow: hidden;
		}

		.kv-headline-sub::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			left: -60%;
			width: 40%;
			background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
			transform: skewX(-20deg);
			animation: kvSubSheen 5s ease-in-out 2.4s infinite;
			pointer-events: none;
		}

		@keyframes kvSubSheen {
			0%   { left: -60%; }
			30%  { left: 130%; }
			100% { left: 130%; }
		}

		@media (prefers-reduced-motion: reduce) {
			.kv-headline-room {
				animation: none;
				opacity: 1;
				transform: none;
			}

			.kv-headline-year,
			.kv-headline-hl {
				animation: none;
				filter: none;
			}

			.kv-headline-hl {
				background-position: 0 0;
			}

			.kv-headline-sub::after {
				display: none;
			}
		}

		/* 手機版 2026（2026-m.svg）「0」位置的印章：桌機版不顯示 */
		.kv-year-stamp {
			display: none;
		}

		/* 手機版底圖：桌機版不顯示 */
		.kv-bg-m {
			display: none;
		}

		/* ==========================================
		   手機版主視覺（寬度 1100px 以下，與漢堡選單同一個切換點）
		   底圖改用 images/main_m.jpg（1628×2251），畫布高度由圖片本身撐開，圖片完整顯示、不裁切。

		   印章定位原理：主視覺畫布永遠和底圖一樣大、一起等比縮放，
		   所以印章的 left / top / width 全部用「%」，就等於釘在底圖上的固定一點，
		   不論手機多寬，印章都會蓋在選票同一格、大小比例也相同。
		   （注意：width 不可改成 px 或 clamp，否則縮放時大小會跟選票脫鉤）

		   - 印章 left / top：印章中心點在底圖上的位置（%，以底圖寬、高計算）
		     目前對準選票中間那位候選人的格子（底圖約 x 33%、y 77% 處）
		   - 印章 width：印章寬度佔底圖寬度的 %
		   - 文字組 top：文字組上緣距離主視覺頂端的 %
		   ========================================== */
		@media (max-width: 1100px) {
			.kv-stage {
				aspect-ratio: auto;
			}

			.kv-bg-main {
				display: none;
			}

			.kv-bg-m {
				display: block;
				position: relative;
				z-index: 1;
			}

			.kv-bg-m img {
				display: block;
				width: 100%;
				height: auto;
			}

			/* 選票上的印章：手機版改由 2026 的「0」印章取代，先隱藏（想放回選票上，刪掉這段即可） */
			.kv-stamp-wrap {
				display: none;
			}

			/* 文字組：置中放在上方空白處，整體放大（可調整：top 為上緣位置） */
			.kv-title-stack {
				left: 50%;
				top: 17%;
				bottom: auto;
				transform: translateX(-50%);
				align-items: center;
				text-align: center;
				max-width: 94%;
			}

			/* 字級（可調整）：主標 10.8vw 時「九合一大選看遠見」約佔畫面寬 89% */
			.kv-headline-room {
				font-size: clamp(13px, 4.1vw, 44px);
			}

			.kv-headline {
				margin-top: clamp(8px, 2.6vw, 28px) !important;
				font-size: clamp(30px, 10.8vw, 124px);
				line-height: 1.25;
			}

			.kv-headline-sub {
				align-self: center;
				margin-top: clamp(14px, 4.6vw, 48px) !important;
				font-size: clamp(16px, 5vw, 54px);
			}

			/* 2026-m.svg：外框包住年份圖，讓印章可以用 % 對準「0」的空位 */
			.kv-year-box {
				position: relative;
				display: inline-block;
				line-height: 0;
				vertical-align: middle; /* 與右邊「遠見戰情室」標籤垂直置中對齊 */
			}

			.kv-year-box .kv-headline-year {
				vertical-align: top;
			}

			/* 「0」位置的印章（可調整）：
			   left / top＝印章中心點在 2026 圖上的位置（%），width＝印章寬度佔 2026 圖寬的 %
			   用 % 綁定 2026 圖，字級怎麼縮放都會對準 */
			.kv-year-stamp {
				display: block;
				position: absolute;
				left: 37.5%;
				top: 50%;
				width: 30%;
				aspect-ratio: 1 / 1;
				transform: translate(-50%, -50%);
				pointer-events: none;
			}

			/* 沿用原本印章的「蓋章落下＋呼吸光」動態，等第一行文字進場後才蓋下 */
			.kv-year-stamp .kv-stamp {
				animation-delay: 1.1s, 1.75s;
			}
		}

		/* ==========================================
		   倒數計時 / AI問答（預留嵌入）/ 文章輪播
		   ========================================== */

		/* 段落小標：小圖章 + 文；用 !important 蓋掉 layout.css 的 .main .page h2
		   （那條規則會把 h2 變成 inline-block、文字變橘色，害圖示跟文字被擠成上下兩行） */
		.miniHeading {
			display: flex !important;
			flex-direction: row !important;
			align-items: center;
			justify-content: center;
			gap: 10px;
			margin: 0 0 28px !important;
			padding: 0 !important;
			font-size: 42px;
			font-weight: 900;
			color: #000000 !important;
		}

		.miniHeading-icon {
			display: block;
			flex-shrink: 0;
			width: 44px;
			height: 44px;
		}

		.miniHeading-text {
			display: inline-block;
			letter-spacing: 0.35em;
			margin-right: -0.35em; /* 抵消字距在最後一個字後方多出來的空白，讓文字視覺上維持置中 */
		}

		/* 倒數計時段標的字級改直接寫在 index.html 該行的 inline style（style="font-size:...px"），
		   不再放在這裡：inline style 的優先權最高，不會再跟 layout.css 的 .main .page h2 打架，
		   之後要微調字級，直接改 index.html 那行的數字即可，不用再改這個檔案 */
		.pageCountdown .miniHeading-icon {
			width: 24px;
			height: 24px;
		}

		/* ── 倒數計時 ── */
		.pageCountdown {
			padding: 60px 0 40px;
			text-align: center;
		}

		/* 外框改用圖檔 img/frame.svg，置中鋪滿整個倒數區塊 */
		.countdown-frame {
			position: relative;
			display: inline-flex;
			align-items: baseline;
			justify-content: center;
			gap: 2px;
			padding: 23px 56px;
			background: url('../img/frame.svg') no-repeat center center;
			background-size: 100% 100%;
		}

		.countdown-num {
			display: inline-block;
			min-width: 1.3em;
			font-family: 'Ubuntu', 'Noto Sans TC', sans-serif;
			font-size: clamp(28px, 4.5vw, 44px);
			font-weight: 900;
			color: #1a1a1a;
			letter-spacing: 0.02em;
			text-align: center;
			font-variant-numeric: tabular-nums;
		}

		.countdown-colon {
			font-size: clamp(28px, 4.5vw, 44px);
			font-weight: 900;
			color: #1a1a1a;
			margin: 0 4px;
		}

		/* 倒數結束：rank.js 會在 .countdown-frame 加上 .is-voting，數字與冒號隱藏，改顯示「投票中」 */
		.countdown-voting {
			display: none;
			padding: 0 0.6em 0 0.75em;
			font-size: clamp(28px, 4.5vw, 44px);
			font-weight: 900;
			letter-spacing: 0.15em;
			color: var(--color-primary-red, #D12828);
		}

		.countdown-frame.is-voting .countdown-num,
		.countdown-frame.is-voting .countdown-colon {
			display: none;
		}

		.countdown-frame.is-voting .countdown-voting {
			display: inline-block;
		}

		/* ── AI問答（功能預留嵌入版位） ── */
		.pageAIQA {
			padding: 50px 0 70px;
			background: #F4F4F4 !important; /* 目前跟 .main .page:nth-child(odd) 剛好同色，加 !important 避免以後排序一變就跑掉 */
			text-align: center;
		}

		.aiEmbedBox {
			position: relative;
			width: 100%;
			max-width: 900px;
			min-height: 220px;
			margin: 0 auto;
			background: #fff;
			border-radius: 20px;
			box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
		}

		/* 開發階段的提示文字，正式串接AI問答功能後可移除此段 */
		.aiEmbedBox::after {
			content: 'AI 問答功能嵌入區（預留版位）';
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			color: #C9C9C9;
			letter-spacing: 0.05em;
			pointer-events: none;
		}

		@media (max-width: 767px) {
			.aiEmbedBox {
				width: 85%;
			}
		}

		/* ── 文章內容輪播（3篇） ── */
		.pageArticles {
			padding: 50px 0 70px;
		}

		.pageArticles .swiperStyle1 {
			max-width: 1100px;
		}

		.pageArticles .swiper-slide .img {
			position: relative;
			width: 100%;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			border-radius: 20px;
			background: #E3E3E3; /* 佔位圖底色，換上實際文章圖後可移除 */
		}

		.pageArticles .swiper-slide .img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.pageArticles .swiper-slide .txt {
			margin-top: 14px;
			font-size: 15px;
			line-height: 1.6;
			color: #1E2022;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}


/* ============================================================
   縣市首長預測（版型）：頂部漸層紅線 + 22縣市下拉選單
   + 候選人 2~4 位彈性 + 學歷/政見資訊框 + 縣市硬指標圖表嵌入版位
   ============================================================ */

.pageElection {
	position: relative;
	padding-top: 0 !important; /* .main .page (layout.css) 的 30px 上內距 specificity 比較高，用 !important 蓋掉 */
	padding-bottom: 60px;
	text-align: center;
	background: linear-gradient(to bottom, #ffffff 0%, #ffffff 45%, #eef0f2 100%) !important; /* .main .page:nth-child(odd) 目前排到這個區塊，specificity 較高，會蓋成純灰，用 !important 保留原本的白→灰漸層 */
}

.election-stripes {
	width: 100%;
}

.election-stripe {
	width: 100%;
	margin-bottom: 10px;
	background: #FF0000;
}

.election-stripe:last-child {
	margin-bottom: 0;
}

.electionHeading {
	padding: 40px 20px 20px;
}

.electionHeading-icon {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 12px;
}

.electionHeading-text {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 42px !important; /* 跟隨「AI問答」段標字級（.miniHeading 預設 42px） */
	font-weight: 900;
	color: #000000 !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
}

.electionCitySelect-wrap {
	position: relative;
	display: inline-block;
	margin: 0 0 30px;
}

.electionCitySelect {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: block;
	min-width: 200px;
	padding: 10px 20px 10px 20px;
	font-size: 16px;
	color: #555;
	background: #ffffff;
	border: 1px solid #d8d8d8;
	border-radius: 30px;
	text-align: center;
	cursor: pointer;
	/* 選單本身的文字隱藏，改由 .electionCitySelect-label 置中顯示（iPhone Safari 不支援 select 文字置中） */
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* 展開後的選項清單維持正常文字顏色 */
.electionCitySelect option {
	color: #555;
	-webkit-text-fill-color: #555;
}

/* 置中顯示目前選到的縣市：疊在選單上方，不攔截點擊 */
.electionCitySelect-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px; /* 左右留空，避開右側小三角形 */
	font-size: 16px;
	color: #555;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

.electionCitySelect-wrap::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #8a8a8a;
	transform: translateY(-50%);
	pointer-events: none;
}

/* 上下淡出的紅色分隔線，中間帶一個向下的小箭頭 */
.electionDivider {
	position: relative;
	height: 2px;
	max-width: 900px;
	margin: 0 auto 80px;
	background: linear-gradient(90deg, transparent 0%, var(--color-primary-red, #D12828) 50%, transparent 100%);
}

.electionDivider::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--color-primary-red, #D12828);
}

.electionLocation {
	margin-bottom: 30px;
	font-size: 22px;
	font-weight: 700;
	color: #1a1a1a;
}

.electionLocation i {
	color: var(--color-primary-red, #D12828);
	margin-right: 6px;
}

/* 候選人 2~7 位彈性：桌機版 flex-wrap 置中排列，增減 .election-candidate 數量即可。
   每排人數由 --cand-per-row 控制（限制容器最大寬度，超過就換排）：
   預設 4 → 7位＝上4下3；5、6位改成 3 → 5位＝上3下2、6位＝上3下3；2~4位單排置中。
   data-count（人數）由 rank.js 依實際候選人數量自動寫入 */
.election-candidates {
	--cand-w: 140px;
	--cand-gap: 40px;
	--cand-per-row: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 32px var(--cand-gap);
	box-sizing: content-box;
	max-width: calc(var(--cand-per-row) * var(--cand-w) + (var(--cand-per-row) - 1) * var(--cand-gap));
	margin: 0 auto 40px;
	padding: 0 20px;
}

.election-candidates[data-count="5"],
.election-candidates[data-count="6"] {
	--cand-per-row: 3;
}

.election-candidate {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 140px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

.election-candidate:focus-visible {
	outline: 3px solid var(--color-primary-blue, #2639C0);
	outline-offset: 8px;
	border-radius: 8px;
}

/* 候選人照片：圓框顏色 = 政黨色，由該元素的行內 style="border-color:..." 指定；
   src 先留空，之後直接替換照片路徑即可 */
.election-candidate-photo {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 4px solid #ccc;
	overflow: hidden;
	background: #eef0f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='39' r='17' fill='%23c9ced9'/%3E%3Cpath d='M15 100c0-23 15-37 35-37s35 14 35 37z' fill='%23c9ced9'/%3E%3C/svg%3E") center / cover no-repeat;
	transition: transform .25s ease, box-shadow .25s ease;
}

/* 照片還沒放（src 留空）時隱藏 img，改顯示上方的人像剪影，避免出現破圖圖示 */
.election-candidate-photo img[src=""],
.election-candidate-photo img:not([src]) {
	visibility: hidden;
}

.election-candidate-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.election-candidate.is-active .election-candidate-photo {
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
	transform: scale(1.05);
}

.election-candidate-name {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
	text-align: center;
}

/* 學歷／政見資訊框：每位候選人各自一組 .election-info-box，預設全部隱藏，
   只有帶 .is-active 的那組會顯示（由 rank.js 依點選的候選人切換） */
.election-info-wrap {
	max-width: 700px;
	margin: 0 auto;
	padding: 0 20px;
}

.election-info-box {
	display: none;
	padding: 24px 0px 30px 30px;
	border: 2px solid var(--color-primary-blue, #2639C0);
	border-radius: 20px;
	background: #fff;
	text-align: left;
}

.election-info-box.is-active {
	display: block;
}

/* 內容捲動區：固定最大高度，超過時自動出現捲軸，避免政見內容過長撐爆版面 */
.election-info-scroll {
	max-height: 560px;
	overflow-y: auto;
	padding-right: 12px;
	scrollbar-width: thin;
	scrollbar-color: #c3c8e0 #f0f1f6;
}

.election-info-scroll::-webkit-scrollbar {
	width: 6px;
}

.election-info-scroll::-webkit-scrollbar-track {
	background: #f0f1f6;
	border-radius: 10px;
}

.election-info-scroll::-webkit-scrollbar-thumb {
	background: #c3c8e0;
	border-radius: 10px;
}

.election-info-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--color-primary-blue, #2639C0);
}

.election-info-section + .election-info-section {
	margin-top: 20px;
}

/* 候選人姓名（放在學歷／政見資訊框最上方，與下方小標同一字級階層，但用不同顏色以區隔）
   加 !important 是因為 layout.css 的 .main .page h3 通用規則（font-size:32px; color:#00AED3;）
   選擇器優先度比單一 class 高，若不加 !important 會蓋掉這裡的設定 */
.election-info-name {
	margin: 0 0 12px !important;
	padding-bottom: 0 !important;
	font-size: 28px !important;
	font-weight: 900 !important;
	color: #313131 !important;
	border-bottom: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
	/* 姓名吸頂鎖定：政見內容在 .election-info-scroll 內捲動時，姓名固定顯示在最上方，
	   不管捲到多下面都能一眼看出目前是哪位候選人的資料（電腦版／手機版皆適用） */
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	padding-top: 4px !important;
	padding-bottom: 10px !important;
	box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.12);
}

.election-info-title {
	margin: 0 0 8px !important;
	padding-bottom: 6px !important;
	font-size: 22px !important;
	font-weight: 900 !important;
	color: var(--color-primary-blue, #2639C0) !important;
	border-bottom: 1px solid #dfe3ee !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
}

.election-info-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.election-info-list li {
	position: relative;
	padding-left: 14px;
	margin: 6px 0;
	font-size: 16px;
	line-height: 1.7;
	color: #333;
}

.election-info-list li::before {
	content: '-';
	position: absolute;
	left: 0;
	color: #333;
}

/* 政見階層：大標題 → 說明文字 → ●條列 → (必要時)子編號1~6 */
.election-policy-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.election-policy-item + .election-policy-item {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed #dfe3ee;
}

.election-policy-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 900;
	line-height: 1.6;
	color: #1a1a1a;
}

.election-policy-desc {
	margin: 0 0 8px;
	font-size: 16px;
	line-height: 1.7;
	color: #555;
}

.election-policy-sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.election-policy-sub > li {
	position: relative;
	padding-left: 16px;
	margin: 6px 0;
	font-size: 16px;
	line-height: 1.7;
	color: #333;
}

.election-policy-sub > li::before {
	content: '●';
	position: absolute;
	left: 0;
	top: 6px;
	font-size: 9px;
	color: #333;
}

.election-policy-subnum {
	margin: 6px 0 4px;
	padding-left: 20px;
	list-style: decimal;
}

.election-policy-subnum li {
	margin: 4px 0;
	font-size: 13px;
	line-height: 1.7;
	color: #333;
}

@media (max-width: 767px) {
	/* 候選人橫向排開，可左右滑動：每位寬度 = (容器寬 - 4px) / 2.5，
	   配合左側 20px 內距與 12px 間距，畫面剛好露出 2 位半，右側那半位就是「後面還有」的提示。
	   單位寬度上限 150px，避免橫向手機（寬度接近 767px）時人像過大 */
	.election-candidates {
		--cand-gap: 12px;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: var(--cand-gap);
		max-width: none;
		margin: 0 0 30px;
		padding: 12px 20px 8px; /* 上下留白：放大中的照片（scale 1.05）不會被捲動容器裁掉 */
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scroll-padding-left: 20px;
		scrollbar-width: none;
	}

	.election-candidates::-webkit-scrollbar {
		display: none;
	}

	.election-candidate {
		flex: 0 0 min(150px, calc((100% - 4px) / 2.5));
		width: auto;
		max-width: none;
		scroll-snap-align: start;
	}

	/* 人數少、不需要滑動時（例如 2 位）自動置中；需要滑動時 auto 邊界為 0，不影響捲動範圍 */
	.election-candidate:first-child {
		margin-left: auto;
	}

	.election-candidate:last-child {
		margin-right: auto;
	}

	.election-candidate-photo {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.election-info-wrap {
		padding: 0 20px;
	}

	.election-info-scroll {
		max-height: 420px;
	}
}

/* ── 縣市硬指標（黃底，圖表嵌入預留版位） ── */
.pageHardIndex {
	padding: 60px 0 80px;
	background: #FAC300 !important; /* 防止之後區塊順序異動、變成奇數子層時被 .main .page:nth-child(odd) 蓋掉 */
	text-align: center;
}

.pageHardIndex-title,
.pageFiveStar-title,
.pageElectionFocus-title,
.pageWordCloud-title {
	display: block !important;
	position: relative;
	width: auto !important;
	margin: 0 auto 34px !important;
	padding: 0 0 18px !important;
	font-size: 36px !important;
	font-weight: 800 !important;
	color: #333 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.4 !important;
}

.pageHardIndex-title::after,
.pageFiveStar-title::after,
.pageElectionFocus-title::after,
.pageWordCloud-title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 48px;
	height: 4px;
	border-radius: 2px;
	transform: translateX(-50%);
}

/* 硬指標：黃底，底線用白色才有對比 */
.pageHardIndex-title::after {
	background: #fff;
}

/* 五星首長：淺灰底，底線用品牌藍 */
.pageFiveStar-title::after {
	background: var(--color-primary-blue, #2639C0);
}

/* 選戰焦點：藍底，底線用白色才有對比 */
.pageElectionFocus-title::after {
	background: #fff;
}

/* 選戰網路趨勢雲：白底，底線用品牌藍 */
.pageWordCloud-title::after {
	background: var(--color-primary-blue, #2639C0);
}

@media (max-width: 767px) {
	.pageHardIndex-title,
	.pageFiveStar-title,
	.pageElectionFocus-title,
	.pageWordCloud-title {
		font-size: 26px !important;
		margin-bottom: 26px !important;
	}
}

/* 硬指標：比照五星首長，拿掉外層白底框，直接顯示嵌入圖表（圖表本身已自帶白色卡片）。
   max-width 1008px ＝ 圖表卡片最大寬 960px ＋ 圖表頁左右留白 24px×2 */
.pageHardIndex-embed {
	position: relative;
	width: 100%;
	max-width: 1008px;
	min-height: 220px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
}

/* iframe 高度由圖表頁 postMessage 回報後自動調整（election-data.js），這裡只是載入前的預設值 */
.hardIndex-frame {
	height: 760px;
}

.pageHardIndex-embed > .election-data-message {
	display: flex;
	min-height: 220px;
	margin: 0;
	align-items: center;
	justify-content: center;
}

.election-embed-frame {
	display: block;
	width: 100%;
	height: 560px;
	border: 0;
}

.election-data-message {
	margin: 20px auto;
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
	color: #555;
}

/* 硬指標的圖文欄位先隱藏（保留在 HTML 裡，之後要用再拿掉這行即可） */
/* 手機版（414px 以下）：硬指標區塊的 .block 放寬為 98%，讓圖表有更多寬度。
   layout.css 在同一斷點把所有區塊的 .main .page .block 設為 85%，這裡只針對硬指標覆寫，其他區塊不受影響 */
@media screen and (max-width: 414px) {
	.main .page.pageHardIndex .block {
		max-width: 98%;
	}
}

.pageHardIndex .contBox {
	display: none;
}

/* 開發階段的提示文字，正式串接圖表功能後可移除此段 */
/* 已改為實際嵌入 Flourish 圖表，不再需要「嵌入圖表」的預留提示文字（原本的 ::after 規則移除） */

/* ── 各縣市五星首長圖表 ── */
.pageFiveStar {
	padding: 60px 0 80px;
	background: #F5F6FA !important; /* 防止之後區塊順序異動、變成奇數子層時被 .main .page:nth-child(odd) 蓋掉 */
	text-align: center;
}

.main .pageFiveStar > .block {
	width: 100%;
	max-width: none;
}

.pageFiveStar-embed {
	position: relative;
	width: 100%;
	max-width: none;
	min-height: 220px;
	margin: 0 auto;
	padding: 8px;
	overflow: hidden;
	box-sizing: border-box;
}

.fiveStar-frame {
	height: 490px;
}

.pageFiveStar-embed > .election-data-message {
	display: flex;
	min-height: 204px;
	margin: 0;
	align-items: center;
	justify-content: center;
}

/* ── 新北市選戰焦點（藍底 #00AED3） ── */
.pageElectionFocus {
	padding: 60px 0 80px;
	background: #00AED3 !important; /* 防止之後區塊順序異動、變成奇數子層時被 .main .page:nth-child(odd) 蓋掉 */
	text-align: center;
}

/* 內容1：左文字段落 + 右圖卡，整塊小區塊套白底圓角卡片 */
.electionFocus-intro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	max-width: 1000px;
	margin: 0 auto 60px;
	padding: 36px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	text-align: left;
	box-sizing: border-box;
}

.electionFocus-text {
	flex: 1 1 50%;
}

.electionFocus-text p {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	color: #333;
}

.electionFocus-text p + p {
	margin-top: 12px;
}

.electionFocus-card {
	flex: 1 1 40%;
	max-width: 340px;
	overflow: hidden;
	border-radius: 16px;
}

.electionFocus-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #E3E3E3; /* 佔位圖底色，換上實際圖片後可移除 */
}

/* 內容2：文章輪播，卡片樣式沿用 .pageArticles 的輪播寫法，另外針對藍底調整文字顏色以確保可讀性 */
.pageElectionFocus-articles {
	max-width: 1100px;
}

.pageElectionFocus-articlesWrap[hidden],
.pageElectionFocus-articles[hidden] {
	display: none !important;
}

.pageElectionFocus-articles .swiper-button-lock {
	display: none !important;
}

.pageElectionFocus.has-no-articles .focusGrid {
	margin-bottom: 0;
}

.pageElectionFocus-articles .swiper-slide .img {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #E3E3E3; /* 佔位圖底色，換上實際文章圖後可移除 */
	border-radius: 20px;
}

.pageElectionFocus-articles .swiper-slide .img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pageElectionFocus-articles .swiper-slide .txt {
	display: -webkit-box;
	margin-top: 14px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.6;
	color: #fff;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (max-width: 767px) {
	.electionFocus-intro {
		flex-direction: column;
		gap: 24px;
		margin-bottom: 40px;
	}

	.electionFocus-card {
		max-width: 100%;
	}
}

/* ── 選戰焦點：A／B 兩款版型比較用的輔助樣式 ── */

/* 方案標籤：標示目前是哪一款設計，確認方向後可移除 */
.focusVersion-label {
	margin: 0 0 20px;
	font-size: 14px;
	font-weight: 700;
	color: #00AED3;
	background: #fff;
	display: inline-block;
	padding: 6px 20px;
	border-radius: 999px;
}

/* 焦點內容中，第三層的細項條列（比 .election-policy-sub 再小一階，用短橫線區隔） */
.focus-subsub {
	margin: 8px 0 6px;
	padding: 0;
	list-style: none;
}

.focus-subsub li {
	position: relative;
	padding-left: 18px;
	margin: 4px 0;
	font-size: 16px;
	line-height: 1.7;
	color: #333;
}

.focus-subsub li::before {
	content: '–';
	position: absolute;
	left: 2px;
	top: 0;
	color: #333;
}

/* 方案B：四宮格卡片版型 */
.focusGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1000px;
	margin: 0 auto 60px;
	text-align: left;
}

.focusGrid-item {
	padding: 28px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* 選戰焦點四宮格：小標題強調（字級放大＋換色，僅限本區塊，不影響其他候選人政見標題） */
.focusGrid-item .election-policy-title {
	font-size: 18px;
	color: #00AED3;
}

@media (max-width: 767px) {
	.focusGrid {
		grid-template-columns: 1fr;
		gap: 20px;
		width: 85%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ── 選戰網路趨勢雲（白底，外部互動頁面 iframe 嵌入） ── */
.pageWordCloud {
	padding: 60px 0 80px;
	background: #fff !important; /* 防止之後區塊順序異動、變成奇數子層時被 .main .page:nth-child(odd) 蓋掉 */
	text-align: center;
}

.pageWordCloud-embed {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background: #fff;
}

/* 文字雲高度：要調整請同時改 height 與 min-height（兩個數字相同）
   min-height 是下限：index.html 的自動量高程式只能把 iframe 拉高，不會縮到比這裡更矮 */
.pageWordCloud-embed iframe {
	display: block;
	width: 100%;
	height: 750px;
	min-height: 750px;
	border: 0;
}

@media (max-width: 767px) {
	.pageWordCloud-embed iframe {
		height: 700px;
		min-height: 700px;
	}
}


/* ==========================================
   短影音：橫向輪播（≥992px 4則、640~991px 3則、<640px 1則），左右按鈕切換
   直式 9:16 卡片，點擊縮圖後才載入 YouTube 播放器（rank.js）
   ========================================== */
.shortVideo {
    margin-top: 70px;
}

/* 左右內距留給按鈕，按鈕不會壓到影片，也不會超出視窗 */
.shortVideo-slider {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 56px;
    box-sizing: border-box;
}

.shortVideo-slider .swiper-container {
    width: 100%;
    margin: 0;
}

.shortVideo .swiper-slide {
    height: auto;
    text-align: left;
}

.shortVideo-media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 14px;
    background: #000;
}

.shortVideo-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.shortVideo-play {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* 縮圖：YouTube 的 4:3 縮圖中央 9:16 區塊即為直式影片畫面，用 cover 置中裁切即可 */
.shortVideo-play img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shortVideo-playIcon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: rgba(20, 20, 30, 0.55);
    transition: background 0.2s ease, transform 0.2s ease;
}

.shortVideo-playIcon::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 17px;
    border-left: 16px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

.shortVideo-play:hover .shortVideo-playIcon,
.shortVideo-play:focus-visible .shortVideo-playIcon {
    background: var(--color-primary-blue, #2639C0);
    transform: scale(1.08);
}

.shortVideo-play:focus-visible {
    outline: 3px solid var(--color-primary-blue, #2639C0);
    outline-offset: -3px;
}

.shortVideo .shortVideo-title {
    display: -webkit-box;
    margin: 12px 0 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: #1E2022;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.shortVideo-btn {
    position: absolute;
    top: calc(50% - 26px); /* 扣掉下方標題高度，讓按鈕對齊影片畫面的垂直中心 */
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d8d8d8;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.shortVideo-prev { left: 4px; }
.shortVideo-next { right: 4px; }

.shortVideo-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--color-primary-blue, #2639C0);
    border-left: 2px solid var(--color-primary-blue, #2639C0);
    transition: border-color 0.2s ease;
}

.shortVideo-prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.shortVideo-next::before { transform: translate(-70%, -50%) rotate(135deg); }

.shortVideo-btn:hover,
.shortVideo-btn:focus-visible {
    background: var(--color-primary-blue, #2639C0);
    border-color: var(--color-primary-blue, #2639C0);
}

.shortVideo-btn:hover::before,
.shortVideo-btn:focus-visible::before {
    border-color: #fff;
}

.shortVideo-btn.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* 則數不足、不需要切換時，Swiper 會加上 lock 類別，把按鈕藏起來 */
.shortVideo-btn.swiper-button-lock {
    display: none;
}

@media (max-width: 767px) {
    .shortVideo {
        margin-top: 50px;
    }

    .shortVideo-slider {
        padding: 0 48px;
    }

    .shortVideo-btn {
        width: 40px;
        height: 40px;
    }

    .shortVideo-prev { left: 2px; }
    .shortVideo-next { right: 2px; }
}

/* ==========================================
   選戰網路趨勢雲：7 個頁籤切換
   ========================================== */
.wcTabs-list {
    position: relative; /* rank.js 以 offsetLeft 計算選中的頁籤位置，需要以此為定位基準 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto 28px;
}

.wcTabs-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    color: #555;
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 30px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.wcTabs-tab:hover {
    color: var(--color-primary-blue, #2639C0);
    border-color: var(--color-primary-blue, #2639C0);
}

.wcTabs-tab.is-active {
    color: #fff;
    background: var(--color-primary-blue, #2639C0);
    border-color: var(--color-primary-blue, #2639C0);
}

.wcTabs-tab:focus-visible {
    outline: 3px solid rgba(38, 57, 192, 0.35);
    outline-offset: 2px;
}

.wcTabs-panel[hidden] {
    display: none;
}

@media (max-width: 767px) {
    /* 手機版：頁籤單排橫向滑動，選中的頁籤會自動捲到可視範圍 */
    .wcTabs-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        width: 100vw; /* 頁籤列滿版，滑動時不會在內容區塊邊緣被截斷 */
        max-width: none;
        margin: 0 0 20px calc(50% - 50vw);
        padding: 2px 20px 6px;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .wcTabs-list::-webkit-scrollbar {
        display: none;
    }

    .wcTabs-tab {
        padding: 8px 18px;
        font-size: 15px;
    }
}

/* ==========================================
   統一段標（小印章 + 標題）
   套用於：AI選戰即問即答、2026縣市長誰勝出？、選戰直擊焦點影音、選戰短影音快報、九合一深度報導
   結構：小印章在上，標題文字沿用「選戰直擊焦點影音」的 .powerHeading-tag（紅藍漸層字、字距、手機版縮字級），
   但拿掉底線。之後要調整五個段標，只改這一段即可。
   ========================================== */
.sectionHeading {
	text-align: center;
	padding: 30px 20px 0;
	margin: 0 0 28px;
}

/* 小印章 */
.sectionHeading-icon {
	display: block;
	width: 28px;
	height: 28px;
	margin: 0 auto 12px;
}

/* 標題外層：清掉 layout.css 的 .main .page h2 預設（橘色、45px、上下留白） */
.main .page .sectionHeading .powerHeading,
.sectionHeading .powerHeading {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

/* 標題文字：保留 .powerHeading-tag 的字級、粗細、字距與漸層，只拿掉底線與底線預留的空間 */
.sectionHeading .powerHeading-tag {
	padding-bottom: 0;
	margin-bottom: 0;
}

.sectionHeading .powerHeading-tag::after {
	display: none;
}