/* =========================
   變數與 Reset
   ========================= */
:root {
    --maxw: 1280px;
    --header-h: 70px;
    --brand: #118A9B;
    --footer-bg: #198a93;
    --bubble-shadow: 0 10px 20px rgba(0,0,0,.1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    font-family: 'Noto Sans TC',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    overflow-x: hidden;
}

/* =========================
   Header
   ========================= */
header.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    background: var(--brand);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    height: auto;
    min-height: var(--header-h);
    flex-wrap: nowrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

    .brand img {
        width: 340px;
        height: auto;
        display: block;
    }

    .brand h1 {
        display: none;
    }

/* 導覽列 */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
}

    .top-nav a {
        display: inline-block;
        transition: transform .2s ease, filter .2s ease;
    }

        .top-nav a img {
            height: 40px;
            width: auto;
            display: block;
        }

        .top-nav a:hover {
            transform: translateY(-3px);
            filter: brightness(1.08);
        }

/* 漢堡 */
.hamburger {
    display: none;
    cursor: pointer;
}

    .hamburger span {
        display: block;
        width: 28px;
        height: 3px;
        background: #fff;
        margin: 5px 0;
        transition: .3s
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg)
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg)
    }

/* =========================
   Hero
   ========================= */
.hero {
    background: url('/children/images/assets/bg_main.jpg') center/cover no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--header-h) + 0px);
    position: relative;
}

/* 泡泡按鈕 */
.bubble-grid {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 600px;
    margin: auto;
}

.bubble {
    position: absolute;
    width: 276px;
    height: 268px;
    background: #ffffff00;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: float 5s ease-in-out infinite;
}

    .bubble img {
        width: 60%;
    }

    .bubble:hover {
        animation-play-state: paused;
    }

    .bubble .label {
        margin-top: 10px;
        font-weight: 700;
    }

@keyframes float {
    0%,100% {
        transform: translate3d(0,0,0);
    }

    50% {
        transform: translate3d(0,-20px,0);
    }
}

/* 位置 */
.b-knowledge {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.b-teach {
    top: 8%;
    left: 35%;
    animation-delay: .5s;
}

.b-media {
    top: 8%;
    left: 60%;
    animation-delay: 1s;
}

.b-library {
    top: 50%;
    left: 25%;
    animation-delay: 1.5s;
}

.b-links {
    top: 55%;
    left: 70%;
    animation-delay: 2s;
}

.b-kids {
    top: 25%;
    right: 1.5%;
    left: auto;
    animation-delay: 2.5s;
}

/* 英雄人物 */
.heroes {
    position: absolute;
    bottom: 5%;
    left: 57%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    align-items: flex-end;
}

    .heroes img:first-child {
        height: 180px;
        transform: translateY(-25px);
    }

    .heroes img:last-child {
        height: 140px;
        transform: translateY(15px);
    }

/* =========================
   手機抽屜
   ========================= */
nav.mobile {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
}

    nav.mobile .scrim {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.35);
        opacity: 0;
        transition: .25s
    }

    nav.mobile .panel {
        position: absolute;
        inset: 0 0 0 auto;
        width: min(92vw,420px);
        background: rgba(25,138,147,.96);
        color: #fff;
        backdrop-filter: blur(10px) saturate(1.2);
        transform: translateX(100%);
        transition: transform .28s ease;
    }

    nav.mobile.open {
        pointer-events: auto
    }

        nav.mobile.open .scrim {
            opacity: 1
        }

        nav.mobile.open .panel {
            transform: translateX(0);
            overflow: auto;
        }

.mobile-list {
    padding: 22px;
}

.mobile-item {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.35);
    font-size: 1.25rem;
    letter-spacing: .06em
}

    .mobile-item a {
        color: #fff;
        text-decoration: none
    }

/* =========================
   Footer
   ========================= */
footer {
    background: var(--footer-bg);
    color: #fff;
    padding: 20px clamp(16px,3vw,18px);
}

.footer-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 6px;
}

    .footer-links a {
        color: #fff;
        text-decoration: underline;
    }

.footer-info {
    line-height: 1.9;
    font-size: clamp(0.875rem, 1.3vw, 1rem);
}

    .footer-info p {
        margin: 4px 0;
    }

.sep {
    opacity: .85;
}

/* =========================
   RWD (Header/Hero)
   ========================= */
@media (max-width:1530px) {
    header.site-header {
        flex-wrap: wrap;
        padding-bottom: 12px;
    }

    .brand img {
        width: 300px;
    }

    .top-nav {
        flex-wrap: wrap;
        row-gap: 10px;
        flex-basis: 100%;
        justify-content: center;
    }

        .top-nav a img {
            height: 36px;
        }

    .hero {
        padding-top: calc(var(--header-h) + 50px);
    }
}

@media (max-width:1076px) {
    .top-nav {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .bubble {
        width: 190px;
        height: 190px;
    }

    .bubble-grid {
        height: 520px;
    }

    .heroes img:first-child {
        height: 130px;
        transform: translateY(-15px);
    }

    .heroes img:last-child {
        height: 110px;
        transform: translateY(10px);
    }

    .hero {
        padding-top: var(--header-h);
    }
}

/* 手機：保留泡泡、兩欄排列；人物固定在底部置中 */
@media (max-width:768px) {
    .bubble-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(140px, 1fr)); /* 先保持兩欄 */
        gap: 14px 16px;
        justify-items: center; /* 每顆置中 */
        align-items: center;
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        height: auto;
        padding: 36px 0 88px; /* 底部留空給人物 */
    }

    .bubble {
        position: static;
        width: 200px;
        height: 200px;
    }

        .bubble img {
            width: 72%;
        }

    /* 英雄人物固定在底部中央，不會跑掉 */
    .heroes {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
        gap: 18px;
    }

        .heroes img:first-child {
            height: 170px;
            transform: none;
        }

        .heroes img:last-child {
            height: 140px;
            transform: none;
        }
}

/* 更小：這時才改成單排，且置中 */
@media (max-width:480px) {
    /* === 泡泡區 === */
    .bubble-grid {
        grid-template-columns: 1fr; /* 單排 */
        gap: 14px;
        justify-items: center;
        align-items: center;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        height: auto;
        padding: 36px 0 100px; /* 底部留空 */
        position: relative;
        z-index: 2; /* 提高層級 */
    }

    .bubble {
        width: 200px;
        height: 200px;
    }

        .bubble img {
            width: 70%;
        }

    /* === 人物區 === */
    .heroes {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        gap: 18px;
        z-index: 1; /* 在泡泡下方 */
        pointer-events: none; /* 不吃點擊事件 */
    }

        .heroes img:first-child {
            height: 170px;
            transform: none;
        }

        .heroes img:last-child {
            height: 140px;
            transform: none;
        }
}

/* =========================
   內頁：共用
   ========================= */
.inner {
    min-height: 100vh;
    padding-top: var(--header-h);
    background: #eaf7f8;
    position: relative;
}

.sub-hero {
    background: url('/children/images/assets/bg_knowledge.png') center/cover no-repeat, linear-gradient(#cdeff1,#cdeff1);
}

.sub-hero__wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 24px clamp(16px,3vw,24px) 18px;
    position: relative;
}

/* 徽章 + 麵包屑（同一行） */
.hero-header-line {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sub-hero .badge {
    width: 160px;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}

.badge {
    width: 160px;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.15));
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #4b3a26;
    font-size: 0.938rem;
    font-weight: 600;
}

    .crumbs a {
        color: #4b3a26;
        text-decoration: none;
    }

        .crumbs a:hover {
            text-decoration: underline;
        }

    .crumbs .current {
        font-weight: 800;
    }

/* 分頁（主頁籤咖啡實心，其餘白底咖啡框，置中） */
.pill-tabs {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pill-tabs--center {
    display: flex;
    flex-wrap: wrap; /* ✅ 允許換行 */
    justify-content: center;
    gap: 16px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
}

    /* 每個按鈕設定固定寬比例，讓一行最多 4 個 */
    .pill-tabs--center .pill {
        flex: 1 1 calc(25% - 16px); /* ✅ 每個約佔 1/4 減間距 */
        max-width: calc(25% - 16px);
        text-align: center;
    }

/* 小螢幕時自動變成 2 個一行 */
@media (max-width: 768px) {
    .pill-tabs--center .pill {
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }
}

.pill {
    border: 1px solid #7a5b3a;
    background: #fff;
    color: #7a5b3a;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: none;
}

    .pill:hover {
        background: #f7efe6;
    }

    .pill.is-active {
        background: #7a5b3a;
        color: #fff;
        border-color: #7a5b3a;
    }

/* 內容卡片 */
.content-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 20px clamp(16px,3vw,24px) 40px;
}

.card {
    background: #ffffffd6;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    padding: 18px 0 18px 0; /* 以最後定義為主 */
    backdrop-filter: saturate(1.2);
}

    .card + .card {
        margin-top: 20px;
    }

/* 內文主標題：白字、深綠底、滿寬 */
.card-title {
    background-color: var(--brand);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 400;
    font-size: clamp(1.125rem, 2.4vw, 1.375rem);
    margin: 10px clamp(16px, 3vw, 24px); /* ← 左右留空會隨螢幕變化 */
    display: block;
    width: auto; /* 不再強制 100%，讓 margin 生效 */
    box-sizing: border-box;
}

.card p {
    padding: 0 40px;
}

.card ul {
    padding: 0 18px;
}

.list {
    padding-left: 20px;
    margin: 8px 0
}

    .list li {
        margin: 6px 0
    }

/* 分頁面板 */
.tab-pane {
    display: block
}

    .tab-pane[hidden] {
        display: none
    }

    .tab-pane.is-show {
        display: block
    }

/* 內頁插畫（可關） */
.inner-illustrations {
    position: absolute;
    inset: auto 0 16px 80%;
    transform: translateX(-5%);
    display: flex;
    gap: 26px;
    align-items: flex-end;
    pointer-events: none;
    opacity: 1;
}

    .inner-illustrations img:first-child {
        height: 120px;
        transform: translateY(-10px);
    }

    .inner-illustrations img:last-child {
        height: 180px;
        transform: translateY(6px);
    }

/* 內頁 RWD */
@media (max-width:1280px) {
    .inner {
        padding-top: calc(var(--header-h) + 10px);
    }
}

@media (max-width:1024px) {
    .inner {
        padding-top: var(--header-h);
    }

    .sub-hero .badge {
        width: 140px
    }
}

@media (max-width:768px) {
    .inner-illustrations {
        display: none
    }

    .pill {
        padding: 5px;
        font-size: 0.875rem;
    }
}
/* =========================
   內頁整版底圖（與首頁一致風格）
   ========================= */
.inner.has-bg {
    position: relative;
    background: none; /* 清除舊的單色 */
    overflow: hidden;
}

    .inner.has-bg .page-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

        .inner.has-bg .page-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            filter: brightness(0.96);
        }

    .inner.has-bg > *:not(.page-bg) {
        position: relative;
        z-index: 1;
    }

/* 為讓 header 與內容更清晰，可在 sub-hero 加上淡白遮罩 */
.sub-hero {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
}
/* ============ 相關網站（links page） ============ */
.links-page .sub-hero--links {
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(4px);
}

.inner-links {
    padding-bottom: 40px;
}

/* 半透明大面板 */
.links-panel {
    position: relative;
    z-index: 1;
    padding: 16px clamp(16px,3vw,24px) 32px;
}

.links-panel__wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    background: rgba(255,255,255,.82);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    padding: clamp(18px,2vw,24px) clamp(18px,3vw,28px) clamp(28px,3vw,36px);
    position: relative;
}

/* 頂部兩個章（國內／國外） */
/* ---------- links 頁面：上方兩張圖片 (原始比例顯示) ---------- */
.links-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(24px, 6vw, 80px);
    margin-bottom: 20px;
}

.links-head__item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.links-head-img {
    width: clamp(10px, 22vw, 180px); /* ✅ 自動隨螢幕縮放 */
    height: auto;
    object-fit: contain; /* ✅ 保持原始比例不裁切 */
    box-shadow: none; /* 不要外圈 */
    border-radius: 0; /* 不要圓形 */
}




.pet {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden; /* ✅ 裁成圓形 */
    background: none; /* 移除底色 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

    .pet img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: 50%;
    }

.chip {
    background: #d7d7d7;
    color: #333;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 999px;
    letter-spacing: .08em;
    box-shadow: 0 8px 16px rgba(0,0,0,.08);
}

.chip--orange {
    background: #f0c6a4;
}

/* 兩欄清單 */
.links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(18px,3vw,36px);
}

/* ---------- 連結清單（含灰框圓圈數字） ---------- */
.links-list {
    counter-reset: item;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 0;
    list-style: none;
    margin: 6px 0 0;
}

    .links-list li {
        counter-increment: item;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 14px;
        padding: 14px 16px 14px 60px; /* 留給數字圈空間 */
        position: relative;
        display: flex;
        align-items: center; /* ✅ 內容垂直置中 */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    }

        .links-list li::before {
            content: counter(item);
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            color: #555; /* 數字顏色 */
            border: 2px solid #aaa; /* ✅ 灰框線圓圈 */
            background: #fff;
        }

    /* 文字連結 */
    .links-list a {
        color: #555; /* ✅ 改成灰色文字 */
        text-decoration: none;
        font-weight: 600;
        font-size: 0.938rem;
    }

        .links-list a:hover {
            text-decoration: underline;
            color: #333;
        }


/* 右下角插圖（可選） */
.links-corner {
    position: absolute;
    right: 30px;
    bottom: 26px;
    width: clamp(120px, 22vw, 220px);
    height: auto;
    opacity: .9;
    pointer-events: none;
}

/* RWD */
@media (max-width: 980px) {
    .links-head {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .links-grid {
        grid-template-columns: 1fr;
    }

    .links-corner {
        right: 16px;
        width: 160px;
        opacity: .85;
    }
}

/* 內頁整版底圖（沿用你的 has-bg 管理） */
.links-page .page-bg img {
    object-position: center top;
}
/* === 修正版：左右兩欄、1~5 + 6~10 連續編號、置中 === */
.links-page .links-grid2 {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center; /* 整體水平置中 */
    align-items: start;
    gap: clamp(40px, 8vw, 80px);
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 0;
}

/* 左欄重新啟動編號；右欄繼續累計 */
.links-page .links-list--left {
    counter-reset: item; /* 從1開始 */
}

.links-page .links-list--right {
    counter-reset: none; /* 不重設，會從6開始 */
}

/* 清單共用樣式 */
.links-page .links-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 0;
    margin: 0;
    list-style: none;
    width: clamp(300px, 30vw, 360px);
}

    /* 每一項 */
    .links-page .links-list li {
        counter-increment: item;
        background: rgba(255,255,255,0.9);
        border-radius: 14px;
        padding: 20px 16px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center; /* 文字置中 */
        text-align: center;
        box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    }

        /* 圓形編號 */
        .links-page .links-list li::before {
            content: counter(item);
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            color: #555;
            background: #fff;
            border: 2px solid #aaa;
        }

    /* 文字樣式 */
    .links-page .links-list a {
        color: #555;
        font-weight: 600;
        text-decoration: none;
        font-size: 0.938rem;
    }

        .links-page .links-list a:hover {
            color: #333;
            text-decoration: underline;
        }

/* 右側插圖固定在中間右側，不影響版面 */
.links-page .links-corner--right {
    position: absolute;
    right: clamp(12px, 2.5vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(120px, 18vw, 220px);
    height: auto;
    opacity: 0.9;
    pointer-events: none;
}

/* 手機：單欄 */
@media (max-width: 980px) {
    .links-page .links-grid2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .links-page .links-corner--right {
        display: none;
    }
}
/* ================= ReelStage: 影音館卡片（獨立命名空間） ================= */
.reelstage {
    width: min(1120px, 92%);
    margin: clamp(16px,2vw,28px) auto;
}

.reelstage__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}

/* 卡片骨架：上圖下色塊，不重疊 */
.reelstage__card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: var(--brand);
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    text-decoration: none;
    transform: translateZ(0); /* 抗鋸齒小招 */
}

/* 上方電影底片圖：滿版、固定比例，不用絕對定位就不會重疊 */
.reelstage__film {
    background: #000;
    aspect-ratio: 16 / 9; /* 保持影片觀感比例 */
    position: relative;
}

    .reelstage__film img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: brightness(.9);
    }

/* 下方色塊＋反白字置中 */
.reelstage__caption {
    background: var(--brand); /* 站內品牌綠；沒有變數時用預設 */
    color: #fff;
    text-align: center;
    padding: 14px 12px;
}

.reelstage__title {
    display: inline-block;
    font-weight: 800;
    letter-spacing: .02em;
    font-size: clamp(1rem, 1.9vw, 1.125rem);
    line-height: 1.3;
}

/* Hover：只有圖片微放大、整卡片輕微浮起（不影響排版） */
.reelstage__card:hover .reelstage__film img {
    transform: scale(1.03);
    transition: transform .25s ease;
}

.reelstage__card:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,.14);
}

/* RWD：平板兩欄、手機單欄 */
@media (max-width: 1024px) {
    .reelstage__grid {
        grid-template-columns: repeat(2, minmax(220px,1fr));
    }
}

@media (max-width: 640px) {
    .reelstage__grid {
        grid-template-columns: 1fr;
    }

    .reelstage__card {
        border-radius: 12px;
    }
}
/* ================= ReelStage: 影音館卡片（自然底片框效果版） ================= */
.reelstage {
    width: min(1120px, 92%);
    margin: clamp(16px,2vw,28px) auto;
}

.reelstage__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: clamp(16px, 2.4vw, 28px);
}

/* 卡片：上圖下色塊 */
.reelstage__card {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: var(--brand); 
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    text-decoration: none;
    transition: box-shadow .25s ease;
}

/* 上半部：圖片置中、留邊黑框形成「底片」 */
.reelstage__film {
    width: 100%;
    aspect-ratio: 16 / 9; /* 維持影片比例 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000; /* 四周黑邊 */
}

    .reelstage__film img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* 完整顯示圖片，不放大裁切 */
        object-position: center;
        border: 6px solid #000; /* 黑色外框更像底片 */
        border-radius: 6px;
    }

/* 下方：色塊＋白字置中 */
.reelstage__caption {
    background: var(--brand);
    color: #fff;
    text-align: center;
    padding: 14px 12px;
}

.reelstage__title {
    display: inline-block;
    font-weight: 400;
    letter-spacing: .02em;
    font-size: clamp(1rem, 1.9vw, 1.125rem);
    line-height: 1.3;
}

/* Hover：輕微浮起效果 */
.reelstage__card:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

/* RWD：平板兩欄、手機單欄 */
@media (max-width: 1024px) {
    .reelstage__grid {
        grid-template-columns: repeat(2, minmax(220px,1fr));
    }
}

@media (max-width: 640px) {
    .reelstage__grid {
        grid-template-columns: 1fr;
    }

    .reelstage__card {
        border-radius: 12px;
    }
}
/* === ReelStage 半透明底層（圓角 + 與卡片保持距離）=== */
.reelstage {
    position: relative;
    z-index: 0;
    padding: clamp(60px, 3vw, 40px); /* ✅ 與 card 保持間距，不改 card 自身尺寸 */
}

    /* 半透明白底 + 圓角 + 柔焦 */
    .reelstage::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: clamp(12px, 2vw, 20px); /* ✅ 讓底層縮進一點，形成邊緣距離 */
        background: rgba(255, 255, 255, 0.6); /* 半透明白底 */
        backdrop-filter: blur(4px); /* 毛玻璃柔焦 */
        border-radius: 20px; /* ✅ 圓角 */
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        z-index: -1; /* 在內容下方 */
        pointer-events: none;
    }