@charset "utf-8";

@font-face {
    font-family: "YeogiOttaeJalnan";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff") format("woff");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Eommakkaturi";
    src: url("https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_13@1.0/Katuri.woff") format("woff");
    font-weight: normal;
    font-display: swap;
}

/* #region font size */
@media (min-width: 1921px) {
    html {
        font-size: clamp(0px, calc((100 / 1920) * 1vw), 100px);
    }
}

@media (width: 1920px) {

    /*
	1920px 해상도 환경: 글꼴 크기 6.25% 고정값 적용
	브라우저 기본 글꼴 크기 대응을 위한 최적화 설정
	다른 해상도에서는 clamp 함수로 동적 크기 조정을 하지만,
	1920px에서는 브라우저 기본 글꼴 크기 기준 6.25% 고정 비율로
	일관된 글꼴 표시 보장
	*/
    html {
        font-size: 6.25%;
    }
}

@media (max-width: 1919px) and (min-width: 1280px) {
    html {
        font-size: clamp(0px, calc((100 / 1400) * 0.92 * 1vw), 1px);
    }
}

@media (max-width: 1279px) and (min-width: 768px) {
    html {
        font-size: clamp(0px, calc((100 / 768) * 1vw), 1px);
    }
}

@media (max-width: 767px) {
    html {
        font-size: clamp(0px, calc((100 / 360) * 1vw), 1px);
    }
}

/* #endregion font size */

/* #region 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */
@media (min-width: 768px) {
    #content .show-mob {
        display: none;
    }
}

@media (min-width: 1280px) {
    #content .show-tab {
        display: none;
    }
}

@media (max-width: 1279px) {
    #content .hide-tab {
        display: none;
    }
}

@media (max-width: 767px) {
    #content .hide-mob {
        display: none;
    }
}

/* #endregion 반응형 화면 표시/숨김 제어 (화면 너비별 출력 설정) */

/* #region base */
.page-event-2026 {
    scroll-behavior: smooth;

    --color-text: #2b2b2b;
    --color-cream: #fdf6e7;
    --color-orange: #F28422;
    --color-yellow: #ffd25a;
    --color-white: #ffffff;
    --color-green: #006E3F;
    --color-green-light: #b5dd5f;
    --color-pink: #f6b9c9;
    --color-blue: #8fd0f7;

    --primary: #faa32d;
    --secondary: #f7a536;
    --tertiary: #f48c30;
    --border-color: #ede5d0;
    --container: 1400;
    --container-edge-offset: calc((100vw - 40rem) / 2);
    --section-padding-block-min: 60rem;
    --font-pret: "Pretendard", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
    --font-jal: "YeogiOttaeJalnan", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
    --font-mont: "Montserrat", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
    --font-ekt: "Eommakkaturi", "Malgun Gothic", "Dotum", "Gulim", sans-serif;
    --font-sans: var(--font-pret);

    .container {
        position: relative;
        margin-inline: auto;
        max-width: calc(var(--container) * 1rem);
        width: calc(100% - 40rem);

        &.container--fluid {
            max-width: none;
            width: auto;
        }
    }

    .visually-hidden {
        contain: content;
        position: absolute;
        width: 0;
        height: 0;
        clip-path: rect(0 0 0 0);
    }

    .reverse-selection::selection,
    .reverse-selection *::selection {
        background: #fff;
        color: var(--primary);
    }

    .text-primary {
        color: var(--primary);
    }

    body:has(&) {
        #content {
            padding: 0;
        }

        .area-subVisual,
        .area_tab {
            display: none;
        }
    }

    --font-min-xl: 32rem;
    /* 60–70 */
    --font-min-lg: 24rem;
    /* 50–59 */
    --font-min-md: 20rem;
    /* 36–49 */
    --font-min-sm: 18rem;
    /* 26–35 */
    --font-min-xs: 16rem;
    /* 16–25 */
    --font-min-xxs: 14rem;
    /* 15 */
    --font-min-minimum: 12rem;
    /* 12 */

    --font-size-heading-xl: var(--font-size-32);
    --font-size-heading-md: var(--font-size-24);
    --font-size-body-lg: var(--font-size-18);
    --font-size-body: var(--font-size-16);
    --font-size-caption: var(--font-size-13);

    --font-size-70: clamp(var(--font-min-xl),
        calc(70 / var(--container) * 100vw),
        70rem);
    --font-size-69: clamp(var(--font-min-xl),
        calc(69 / var(--container) * 100vw),
        69rem);
    --font-size-68: clamp(var(--font-min-xl),
        calc(68 / var(--container) * 100vw),
        68rem);
    --font-size-67: clamp(var(--font-min-xl),
        calc(67 / var(--container) * 100vw),
        67rem);
    --font-size-66: clamp(var(--font-min-xl),
        calc(66 / var(--container) * 100vw),
        66rem);
    --font-size-65: clamp(var(--font-min-xl),
        calc(65 / var(--container) * 100vw),
        65rem);
    --font-size-64: clamp(var(--font-min-xl),
        calc(64 / var(--container) * 100vw),
        64rem);
    --font-size-63: clamp(var(--font-min-xl),
        calc(63 / var(--container) * 100vw),
        63rem);
    --font-size-62: clamp(var(--font-min-xl),
        calc(62 / var(--container) * 100vw),
        62rem);
    --font-size-61: clamp(var(--font-min-xl),
        calc(61 / var(--container) * 100vw),
        61rem);
    --font-size-60: clamp(var(--font-min-xl),
        calc(60 / var(--container) * 100vw),
        60rem);

    --font-size-59: clamp(var(--font-min-lg),
        calc(59 / var(--container) * 100vw),
        59rem);
    --font-size-58: clamp(var(--font-min-lg),
        calc(58 / var(--container) * 100vw),
        58rem);
    --font-size-57: clamp(var(--font-min-lg),
        calc(57 / var(--container) * 100vw),
        57rem);
    --font-size-56: clamp(var(--font-min-lg),
        calc(56 / var(--container) * 100vw),
        56rem);
    --font-size-55: clamp(var(--font-min-lg),
        calc(55 / var(--container) * 100vw),
        55rem);
    --font-size-54: clamp(var(--font-min-lg),
        calc(54 / var(--container) * 100vw),
        54rem);
    --font-size-53: clamp(var(--font-min-lg),
        calc(53 / var(--container) * 100vw),
        53rem);
    --font-size-52: clamp(var(--font-min-lg),
        calc(52 / var(--container) * 100vw),
        52rem);
    --font-size-51: clamp(var(--font-min-lg),
        calc(51 / var(--container) * 100vw),
        51rem);
    --font-size-50: clamp(var(--font-min-lg),
        calc(50 / var(--container) * 100vw),
        50rem);

    --font-size-49: clamp(var(--font-min-md),
        calc(49 / var(--container) * 100vw),
        49rem);
    --font-size-48: clamp(var(--font-min-md),
        calc(48 / var(--container) * 100vw),
        48rem);
    --font-size-47: clamp(var(--font-min-md),
        calc(47 / var(--container) * 100vw),
        47rem);
    --font-size-46: clamp(var(--font-min-md),
        calc(46 / var(--container) * 100vw),
        46rem);
    --font-size-45: clamp(var(--font-min-md),
        calc(45 / var(--container) * 100vw),
        45rem);
    --font-size-44: clamp(var(--font-min-md),
        calc(44 / var(--container) * 100vw),
        44rem);
    --font-size-43: clamp(var(--font-min-md),
        calc(43 / var(--container) * 100vw),
        43rem);
    --font-size-42: clamp(var(--font-min-md),
        calc(42 / var(--container) * 100vw),
        42rem);
    --font-size-41: clamp(var(--font-min-md),
        calc(41 / var(--container) * 100vw),
        41rem);
    --font-size-40: clamp(var(--font-min-md),
        calc(40 / var(--container) * 100vw),
        40rem);
    --font-size-39: clamp(var(--font-min-md),
        calc(39 / var(--container) * 100vw),
        39rem);
    --font-size-38: clamp(var(--font-min-md),
        calc(38 / var(--container) * 100vw),
        38rem);
    --font-size-37: clamp(var(--font-min-md),
        calc(37 / var(--container) * 100vw),
        37rem);
    --font-size-36: clamp(var(--font-min-md),
        calc(36 / var(--container) * 100vw),
        36rem);

    --font-size-35: clamp(var(--font-min-sm),
        calc(35 / var(--container) * 100vw),
        35rem);
    --font-size-34: clamp(var(--font-min-sm),
        calc(34 / var(--container) * 100vw),
        34rem);
    --font-size-33: clamp(var(--font-min-sm),
        calc(33 / var(--container) * 100vw),
        33rem);
    --font-size-32: clamp(var(--font-min-sm),
        calc(32 / var(--container) * 100vw),
        32rem);
    --font-size-31: clamp(var(--font-min-sm),
        calc(31 / var(--container) * 100vw),
        31rem);
    --font-size-30: clamp(var(--font-min-sm),
        calc(30 / var(--container) * 100vw),
        30rem);
    --font-size-29: clamp(var(--font-min-sm),
        calc(29 / var(--container) * 100vw),
        29rem);
    --font-size-28: clamp(var(--font-min-sm),
        calc(28 / var(--container) * 100vw),
        28rem);
    --font-size-27: clamp(var(--font-min-sm),
        calc(27 / var(--container) * 100vw),
        27rem);
    --font-size-26: clamp(var(--font-min-sm),
        calc(26 / var(--container) * 100vw),
        26rem);

    --font-size-25: clamp(var(--font-min-xs),
        calc(25 / var(--container) * 100vw),
        25rem);
    --font-size-24: clamp(var(--font-min-xs),
        calc(24 / var(--container) * 100vw),
        24rem);
    --font-size-23: clamp(var(--font-min-xs),
        calc(23 / var(--container) * 100vw),
        23rem);
    --font-size-22: clamp(var(--font-min-xs),
        calc(22 / var(--container) * 100vw),
        22rem);
    --font-size-21: clamp(var(--font-min-xs),
        calc(21 / var(--container) * 100vw),
        21rem);
    --font-size-20: clamp(var(--font-min-xs),
        calc(20 / var(--container) * 100vw),
        20rem);
    --font-size-20-to-14: clamp(14rem,
        calc(20 / var(--container) * 100vw),
        20rem);
    --font-size-19: clamp(var(--font-min-xs),
        calc(19 / var(--container) * 100vw),
        19rem);
    --font-size-18: clamp(var(--font-min-xs),
        calc(18 / var(--container) * 100vw),
        18rem);
    --font-size-18-to-14: clamp(14rem,
        calc(18 / var(--container) * 100vw),
        18rem);
    --font-size-17: clamp(var(--font-min-xs),
        calc(17 / var(--container) * 100vw),
        17rem);
    --font-size-16: clamp(var(--font-min-xxs),
        calc(16 / var(--container) * 100vw),
        16rem);
    --font-size-16-to-12: clamp(12rem,
        calc(16 / var(--container) * 100vw),
        16rem);
    --font-size-15: clamp(var(--font-min-xxs),
        calc(15 / var(--container) * 100vw),
        15rem);

    --font-size-14: clamp(var(--font-min-minimum),
        calc(14 / var(--container) * 100vw),
        14rem);
    --font-size-13: clamp(var(--font-min-minimum),
        calc(13 / var(--container) * 100vw),
        13rem);
}

.page-event-2026 {
    word-break: keep-all;

    .hero {
        position: relative;
        width: 100%;
        height: calc(100dvh - var(--page-header));
        overflow: hidden;

        /* Placeholder bg -> ganti sendiri pake background-image */
        & .hero__bg {
            position: absolute;
            inset: 0;
            background: #fef0e5 url("/images/event-2026/hero-bg.jpg") no-repeat center / cover;
        }

        & .hero__content {
            position: absolute;
            top: 24%;
            left: 0;
            width: 100%;
            padding: 0 20rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        & .hero__label {
            font-family: var(--font-jal);
            font-size: var(--font-size-32);
            color: var(--color-text);
            letter-spacing: -0.5rem;
        }

        & .hero__title {
            margin-top: 28rem;
            display: flex;
            gap: 22rem;
            font-size: var(--font-size-70);
            font-family: var(--font-jal);
            font-weight: 400;
            line-height: 1.1;
            letter-spacing: -2rem;
        }

        & .hero__title-text {
            -webkit-text-stroke-color: var(--color-white);
            -webkit-text-stroke-width: 20px;
            paint-order: stroke fill;
            filter: drop-shadow(0 4rem 6rem rgba(255, 166, 43, 0.25));

            &.hero__title-text--light {
                color: var(--color-yellow);
            }

            &.hero__title-text--accent {
                color: var(--color-orange);
            }
        }

        & .hero__pill {
            margin-top: 34rem;
            padding: 14rem 28rem;
            font-size: var(--font-size-24);
            font-weight: 500;
            color: var(--color-white);
            background: var(--color-orange);
            border: 3rem solid var(--color-white);
            border-radius: 100rem;
            box-shadow: 0 4rem 10rem rgba(255, 166, 43, 0.25);
        }

        & .hero__scroll {
            position: absolute;
            left: 50%;
            bottom: 8%;
            transform: translateX(-50%);
            display: inline-flex;
            align-items: center;
            gap: 8rem;
            padding: 8rem 18rem;
            font-family: var(--font-jal);
            font-size: var(--font-size-18);
            color: var(--color-orange);
            background: var(--color-white);
            border: 2rem solid var(--color-orange);
            border-radius: 100rem;
            transition: transform 0.3s;

            &:hover {
                transform: translateX(-50%) translateY(-3rem);
            }

            & i {
                color: var(--color-white);
                font-size: var(--font-size-18);
                padding: 4rem;
                background: var(--color-orange);
                border-radius: 99rem;
            }
        }
    }

    /* ==========================================================
   RESPONSIVE - Mobile
   ========================================================== */
    @media (max-width: 480px) {
        .hero {
            height: 560rem;

            & .hero__content {
                top: 16%;
            }

            & .hero__label {
                font-size: var(--font-size-16);
            }

            & .hero__title {
                flex-direction: column;
                align-items: center;
                gap: 0;
                margin-top: 14rem;
                font-size: var(--font-size-44);
            }

            & .hero__title-text {
                -webkit-text-stroke-width: 5rem;
            }

            & .hero__pill {
                margin-top: 18rem;
                padding: 10rem 16rem;
                font-size: var(--font-size-14);
                border-width: 2rem;
            }

            & .hero__scroll {
                padding: 6rem 14rem;
                font-size: var(--font-size-13);
            }
        }
    }

    /* ==========================================================
   RESPONSIVE - Tablet
   ========================================================== */
    @media (max-width: 768px) {
        .hero {
            height: 640rem;

            & .hero__content {
                top: 20%;
            }

            & .hero__label {
                font-size: var(--font-size-22);
            }

            & .hero__title {
                margin-top: 20rem;
                gap: 14rem;
                font-size: var(--font-size-56);
            }

            & .hero__title-text {
                -webkit-text-stroke-width: 6rem;
            }

            & .hero__pill {
                margin-top: 24rem;
                padding: 12rem 22rem;
                font-size: var(--font-size-18);
            }

            & .hero__scroll {
                bottom: 5%;
                font-size: var(--font-size-16);
            }
        }
    }

    .introduction {
        position: relative;
        padding: 130rem 0 120rem;
        background: var(--color-white);
        overflow: hidden;

        /* Placeholder dekorasi kupu-kupu (kanan) -> ganti sendiri */
        & .introduction__deco {
            position: absolute;
            top: 36%;
            right: -4%;
            width: 22%;
            aspect-ratio: 1 / 1;
            background: #f7f3ea;
            border-radius: 50%;
            opacity: 0.6;
        }

        & .introduction__inner {
            position: relative;
            max-width: 1440rem;
            margin: 0 auto;
            padding: 0 20rem;
        }

        & .introduction__title {
            font-family: var(--font-jal);
            font-size: var(--font-size-46);
            font-weight: 400;
            color: var(--color-orange);
        }

        /* ---------- Top (text + video) ---------- */
        & .introduction__top {
            margin-top: 60rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 44rem;
        }

        & .introduction__text {
            flex: 1;
            max-width: 680rem;
            font-size: var(--font-size-19);
            line-height: 2.3;
            color: var(--color-text);
        }

        & .introduction__video {
            flex-shrink: 0;
            width: 678rem;
            padding: 24rem;
            background: var(--color-white);
            border-radius: 30rem;
            box-shadow: 0 8rem 30rem rgba(0, 0, 0, 0.08);
        }

        & .introduction__video-frame {
            position: relative;
            width: 100%;
            aspect-ratio: 630 / 354;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-40);
            color: var(--color-white);
            background: #8fb6c9;
            border-radius: 16rem;
            overflow: hidden;
        }

        /* ---------- Tabs ---------- */
        & .introduction__tabs {
            margin-top: 130rem;
            display: flex;
            justify-content: center;
            gap: 45rem;
            list-style: none;
        }

        & .introduction__tab-btn {
            width: 208rem;
            height: 58rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12rem;
            font-family: var(--font-jal);
            font-size: var(--font-size-26);
            fill: #c9c9c9;
            color: #c9c9c9;
            background: var(--color-white);
            border: 1rem solid #d9d9d9;
            border-radius: 12rem;
            transition: all 0.3s;

            & i {
                font-size: var(--font-size-22);
            }

            &:hover {
                fill: var(--color-orange);
                color: var(--color-orange);
                border-color: var(--color-orange);
            }

            &.introduction__tab-btn--active {
                fill: var(--color-orange);
                color: var(--color-orange);
                background: #fff4e3;
                border-color: var(--color-orange);
            }
        }

        /* ---------- Panels ---------- */
        & .introduction__panels {
            margin-top: 70rem;
        }

        & .introduction__panel {
            position: relative;
            display: none;
            grid-template-columns: 1fr 1fr;
            gap: 44rem;

            &.introduction__panel--active {
                display: grid;
            }
        }

        & .introduction__card {
            position: relative;
            aspect-ratio: 678 / 477;
            border-radius: 20rem;
            overflow: hidden;

            /* overlay bawah buat caption */
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
            }

            &.introduction__card--day .introduction__card-bg {
                background: #f3e3c8;
            }

            &.introduction__card--hard .introduction__card-bg {
                background: #aebcdf;
            }
        }

        & .introduction__card-bg {
            position: absolute;
            inset: 0;
        }

        & .introduction__badge {
            position: absolute;
            top: 30rem;
            left: 30rem;
            z-index: 1;
            padding: 6rem 16rem;
            font-size: var(--font-size-16);
            font-weight: 500;
            color: var(--color-white);
            border: 3rem solid var(--color-white);
            border-radius: 100rem;

            &.introduction__badge--orange {
                background: var(--color-orange);
            }

            &.introduction__badge--navy {
                background: #44546e;
            }
        }

        & .introduction__caption {
            position: absolute;
            left: 32rem;
            right: 32rem;
            bottom: 30rem;
            z-index: 1;
            font-family: var(--font-jal);
            font-size: var(--font-size-24);
            color: var(--color-white);
        }

        & .introduction__handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            width: 80rem;
            height: 80rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-20);
            background: var(--color-white);
            border-radius: 50%;
            box-shadow: 0 4rem 16rem rgba(0, 0, 0, 0.15);
        }

        & .introduction__note {
            margin-top: 20rem;
            text-align: center;
            font-size: var(--font-size-15);
            color: #555;
        }
    }

    /* ---------- Introduction: Tablet ---------- */
    @media (max-width: 768px) {
        .introduction {
            padding: 90rem 0 80rem;

            & .introduction__title {
                font-size: var(--font-size-36);
            }

            & .introduction__top {
                margin-top: 36rem;
                flex-direction: column;
                align-items: stretch;
                gap: 36rem;
            }

            & .introduction__text {
                max-width: 100%;
                font-size: var(--font-size-17);
            }

            & .introduction__video {
                width: 100%;
                padding: 16rem;
                border-radius: 22rem;
            }

            & .introduction__tabs {
                margin-top: 70rem;
                flex-wrap: wrap;
                gap: 14rem;
            }

            & .introduction__tab-btn {
                width: 160rem;
                height: 50rem;
                font-size: var(--font-size-20);
            }

            & .introduction__panels {
                margin-top: 40rem;
            }

            & .introduction__panel {
                gap: 16rem;
            }

            & .introduction__card {
                border-radius: 14rem;
            }

            & .introduction__badge {
                top: 16rem;
                left: 16rem;
                font-size: var(--font-size-13);
            }

            & .introduction__caption {
                left: 16rem;
                right: 16rem;
                bottom: 16rem;
                font-size: var(--font-size-16);
            }

            & .introduction__handle {
                width: 52rem;
                height: 52rem;
                font-size: var(--font-size-14);
            }

            & .introduction__note {
                font-size: var(--font-size-13);
            }
        }
    }

    /* ---------- Introduction: Mobile ---------- */
    @media (max-width: 480px) {
        .introduction {
            padding: 60rem 0;

            & .introduction__title {
                font-size: var(--font-size-28);
            }

            & .introduction__text {
                font-size: var(--font-size-15);
                line-height: 2;
            }

            & .introduction__tabs {
                margin-top: 50rem;
                gap: 8rem;
            }

            & .introduction__tab {
                width: calc(50% - 4rem);
            }

            & .introduction__tab-btn {
                width: 100%;
                height: 44rem;
                font-size: var(--font-size-16);
                gap: 6rem;
            }

            & .introduction__panel.introduction__panel--active {
                grid-template-columns: 1fr;
            }

            & .introduction__handle {
                display: none;
            }

            & .introduction__caption {
                font-size: var(--font-size-15);
            }
        }
    }

    .pompe-disease {
        position: relative;
        padding: 130rem 0 140rem;
        overflow: hidden;

        /* Placeholder bg -> ganti sendiri pake background-image */
        & .pompe-disease__bg {
            position: absolute;
            inset: 0;
            background: url(/images/event-2026/stories-bg.jpg) no-repeat center / cover;
        }

        & .pompe-disease__inner {
            position: relative;
            max-width: 1440rem;
            margin: 0 auto;
            padding: 0 20rem;
            text-align: center;
        }

        & .pompe-disease__title {
            font-family: var(--font-jal);
            font-size: var(--font-size-46);
            font-weight: 400;
            color: var(--color-orange);
        }

        & .pompe-disease__desc {
            max-width: 680rem;
            margin: 60rem auto 0;
            font-size: var(--font-size-19);
            line-height: 2.3;
            color: var(--color-text);
        }

        & .pompe-disease__reference {
            margin-top: 64rem;
            font-size: var(--font-size-15);
            color: #555;
        }

        /* ---------- Cards ---------- */
        & .pompe-disease__cards {
            margin-top: 100rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 44rem;
            text-align: left;
        }

        & .pompe-disease__card {
            padding: 24rem;
            background: var(--color-white);
            border-radius: 10rem;
            box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.04);
        }

        & .pompe-disease__card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20rem;
        }

        & .pompe-disease__card-title {
            font-family: var(--font-jal);
            font-size: var(--font-size-26);
            font-weight: 400;
            color: var(--color-orange);
        }

        & .pompe-disease__icon {
            flex-shrink: 0;
            width: 74rem;
            height: 74rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-34);
            color: var(--color-orange);
            background: #fff4e3;
            border-radius: 50%;
        }

        & .pompe-disease__card-text {
            margin-top: 20rem;
            font-size: var(--font-size-19);
            line-height: 2.3;
            color: var(--color-text);
        }

        /* ---------- Buttons ---------- */
        & .pompe-disease__btns {
            margin-top: 44rem;
            display: flex;
            justify-content: center;
            gap: 46rem;
        }

        & .pompe-disease__btn {
            min-width: 236rem;
            height: 62rem;
            padding: 0 24rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 14rem;
            font-size: var(--font-size-20);
            font-weight: 500;
            border: 3rem solid var(--color-orange);
            border-radius: 100rem;
            transition: all 0.3s;

            & i {
                font-size: var(--font-size-20);
            }

            &.pompe-disease__btn--fill {
                color: var(--color-white);
                background: var(--color-orange);
                box-shadow: 0 0 0 3rem var(--color-white);

                &:hover {
                    background: #f09410;
                    border-color: #f09410;
                }
            }

            &.pompe-disease__btn--line {
                color: var(--color-orange);
                background: transparent;

                &:hover {
                    color: var(--color-white);
                    background: var(--color-orange);
                }
            }
        }
    }

    /* ---------- Pompe disease: Tablet ---------- */
    @media (max-width: 768px) {
        .pompe-disease {
            padding: 90rem 0 90rem;

            & .pompe-disease__title {
                font-size: var(--font-size-36);
            }

            & .pompe-disease__desc {
                margin-top: 36rem;
                font-size: var(--font-size-17);
            }

            & .pompe-disease__cards {
                margin-top: 60rem;
                grid-template-columns: 1fr;
                gap: 20rem;
            }

            & .pompe-disease__card-title {
                font-size: var(--font-size-22);
            }

            & .pompe-disease__icon {
                width: 60rem;
                height: 60rem;
                font-size: var(--font-size-28);
            }

            & .pompe-disease__card-text {
                font-size: var(--font-size-17);
            }

            & .pompe-disease__btns {
                margin-top: 36rem;
                gap: 16rem;
                flex-wrap: wrap;
            }

            & .pompe-disease__btn {
                min-width: 200rem;
                height: 54rem;
                font-size: var(--font-size-18);
            }
        }
    }

    /* ---------- Pompe disease: Mobile ---------- */
    @media (max-width: 480px) {
        .pompe-disease {
            padding: 60rem 0;

            & .pompe-disease__title {
                font-size: var(--font-size-28);
            }

            & .pompe-disease__desc {
                font-size: var(--font-size-15);
                line-height: 2;
            }

            & .pompe-disease__card {
                padding: 18rem;
            }

            & .pompe-disease__card-title {
                font-size: var(--font-size-20);
            }

            & .pompe-disease__icon {
                width: 50rem;
                height: 50rem;
                font-size: var(--font-size-24);
            }

            & .pompe-disease__card-text {
                font-size: var(--font-size-15);
                line-height: 2;
            }

            & .pompe-disease__btns {
                flex-direction: column;
                align-items: center;
            }

            & .pompe-disease__btn {
                width: 100%;
                max-width: 280rem;
                font-size: var(--font-size-16);
            }
        }
    }

    .stories-video {
        padding: 130rem 0 140rem;
        background: var(--color-white);

        & .stories-video__inner {
            max-width: 1440rem;
            margin: 0 auto;
            padding: 0 20rem;
        }

        & .stories-video__title {
            text-align: center;
            font-family: var(--font-jal);
            font-size: var(--font-size-46);
            font-weight: 400;
            color: var(--color-orange);
        }

        & .stories-video__list {
            display: grid;
            gap: 44rem;
            list-style: none;

            &.stories-video__list--wide {
                margin-top: 70rem;
                grid-template-columns: repeat(2, 1fr);
            }

            &.stories-video__list--tall {
                margin-top: 100rem;
                grid-template-columns: repeat(3, 1fr);

                & .stories-video__thumb {
                    aspect-ratio: 389 / 630;
                }

                & .stories-video__name,
                & .stories-video__desc {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }

        & .stories-video__item {
            min-width: 0;
            text-align: center;
        }

        & .stories-video__frame {
            display: block;
            width: 100%;
            padding: 24rem;
            background: var(--color-white);
            border-radius: 12rem;

            box-shadow: 0 8rem 30rem rgba(0, 0, 0, 0.08);
        }

        & .stories-video__frame img {
            width: 100%;
            border-radius: 12rem;
        }

        /* Placeholder video -> ganti sendiri pake iframe / image */
        & .stories-video__thumb {
            width: 100%;
            aspect-ratio: 630 / 354;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-40);
            color: var(--color-white);
            background: #8fb6c9;
            border-radius: 16rem;
            overflow: hidden;
        }

        & .stories-video__name {
            margin-top: 16rem;
            font-family: var(--font-jal);
            font-size: var(--font-size-22);
            font-weight: 400;
            color: var(--color-orange);
        }

        & .stories-video__desc {
            margin-top: 10rem;
            font-size: var(--font-size-16);
            color: var(--color-text);
        }
    }

    /* ---------- Stories video: Tablet ---------- */
    @media (max-width: 768px) {
        .stories-video {
            padding: 90rem 0 90rem;

            & .stories-video__title {
                font-size: var(--font-size-32);
            }

            & .stories-video__list {
                gap: 36rem;

                &.stories-video__list--wide {
                    margin-top: 40rem;
                    grid-template-columns: 1fr;
                }

                &.stories-video__list--tall {
                    margin-top: 36rem;
                    grid-template-columns: 1fr;
                }

                &.stories-video__list--tall .stories-video__item {
                    max-width: 437rem;
                    width: 100%;
                    margin: 0 auto;
                }
            }

            & .stories-video__frame {
                padding: 16rem;
                border-radius: 22rem;
            }

            & .stories-video__name {
                font-size: var(--font-size-20);
            }

            & .stories-video__desc {
                font-size: var(--font-size-15);
            }
        }
    }

    /* ---------- Stories video: Mobile ---------- */
    @media (max-width: 480px) {
        .stories-video {
            padding: 60rem 0;

            & .stories-video__title {
                font-size: var(--font-size-26);
            }

            & .stories-video__frame {
                padding: 12rem;
                border-radius: 16rem;
            }

            & .stories-video__thumb {
                border-radius: 10rem;
            }

            & .stories-video__name {
                margin-top: 12rem;
                font-size: var(--font-size-17);
            }

            & .stories-video__desc {
                font-size: var(--font-size-14);
            }
        }
    }

    .people-stories {
        position: relative;
        padding: 130rem 0 140rem;
        overflow: hidden;

        /* Placeholder bg -> ganti sendiri pake background-image */
        & .people-stories__bg {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, #fbf4dc 0%, #faf2d8 55%, #eef0c6 100%);
        }

        & .people-stories__inner {
            position: relative;
            max-width: 1440rem;
            margin: 0 auto;
            padding: 0 20rem;
            text-align: center;
        }

        & .people-stories__title {
            font-family: var(--font-jal);
            font-size: var(--font-size-46);
            font-weight: 400;
            color: var(--color-orange);
        }

        & .people-stories__desc {
            margin-top: 60rem;
            font-size: var(--font-size-19);
            color: var(--color-text);
        }

        /* ---------- List ---------- */
        & .people-stories__list {
            margin-top: 90rem;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            align-items: start;
            gap: 44rem;
            list-style: none;
            text-align: left;
        }

        & .people-stories__card {
            padding: 24rem;
            background: var(--color-white);
            border-radius: 12rem;
            box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.04);

            /* state: expanded */
            &.people-stories__card--open {
                & .people-stories__more {
                    grid-template-rows: 1fr;
                }

                & .people-stories__toggle i {
                    transform: rotate(180deg);
                }
            }
        }

        /* Placeholder foto -> ganti sendiri */
        & .people-stories__photo {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            background: #f4f4f4;
            border: 1rem solid #e2e2e2;
            border-radius: 12rem;
        }

        & .people-stories__head {
            margin-top: 24rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10rem;
        }

        & .people-stories__name {
            font-family: var(--font-jal);
            font-size: var(--font-size-28);
            font-weight: 400;
            color: #111;
        }

        & .people-stories__toggle {
            flex-shrink: 0;
            width: 26rem;
            height: 26rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-14);
            color: #111;
            background: var(--color-white);
            border: 1rem solid #cfcfcf;
            border-radius: 50%;
            box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.1);

            & i {
                transition: transform 0.3s;
            }
        }

        & .people-stories__tags {
            margin-top: 18rem;
            display: flex;
            gap: 14rem;
        }

        & .people-stories__tag {
            min-width: 80rem;
            height: 30rem;
            padding: 0 14rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-14);
            font-weight: 500;
            color: var(--color-white);
            border: 2rem solid var(--color-white);
            border-radius: 100rem;
            box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.12);

            &.people-stories__tag--orange {
                background: var(--color-orange);
            }

            &.people-stories__tag--navy {
                background: #44546e;
            }
        }

        /* ---------- Expand ---------- */
        & .people-stories__more {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 0.35s ease;
        }

        & .people-stories__more-inner {
            min-height: 0;
            overflow: hidden;
        }

        & .people-stories__more-text {
            padding-top: 26rem;
            font-size: var(--font-size-17);
            line-height: 1.7;
            color: var(--color-text);
        }

        & .people-stories__link {
            margin-top: 38rem;
            height: 50rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10rem;
            font-size: var(--font-size-20);
            color: var(--color-orange);
            background: #fff4e3;
            border: 1rem solid var(--color-orange);
            border-radius: 100rem;
            transition: all 0.3s;

            & .xi-play-circle {
                font-size: var(--font-size-24);
            }

            & .xi-long-arrow-right {
                font-size: var(--font-size-20);
            }

            &:hover {
                color: var(--color-white);
                background: var(--color-orange);
            }
        }
    }

    /* ---------- People stories: Tablet ---------- */
    @media (max-width: 1024px) {
        .people-stories {
            & .people-stories__list {
                grid-template-columns: repeat(2, 1fr);
                gap: 24rem;
            }
        }
    }

    @media (max-width: 768px) {
        .people-stories {
            padding: 90rem 0 90rem;

            & .people-stories__title {
                font-size: var(--font-size-32);
            }

            & .people-stories__desc {
                margin-top: 30rem;
                font-size: var(--font-size-17);
            }

            & .people-stories__list {
                margin-top: 50rem;
            }

            & .people-stories__name {
                font-size: var(--font-size-24);
            }

            & .people-stories__link {
                font-size: var(--font-size-18);
            }
        }
    }

    /* ---------- People stories: Mobile ---------- */
    @media (max-width: 480px) {
        .people-stories {
            padding: 60rem 0;

            & .people-stories__title {
                font-size: var(--font-size-26);
            }

            & .people-stories__desc {
                font-size: var(--font-size-15);
            }

            & .people-stories__list {
                grid-template-columns: 1fr;
            }

            & .people-stories__more-text {
                font-size: var(--font-size-15);
            }
        }
    }

    .section-participating-event {
        padding-top: clamp(32rem, calc(245 / var(--container) * 100vw), 245rem);
        padding-bottom: clamp(32rem, calc(265 / var(--container) * 100vw), 265rem);
        background: var(--color-orange) url(/images/event-2026/participating-bg.png) no-repeat bottom / contain;

        .split {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center;
            gap: 48px;
        }

        @media (min-width: 1280px) {
            .split {
                flex-direction: row;
            }
        }

        .heading-block {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .heading {
            font-family: var(--font-jal);
            font-size: var(--font-size-48);
            color: var(--color-orange);
            -webkit-text-stroke-color: var(--color-white);
            -webkit-text-stroke-width: 20px;
            paint-order: stroke fill;
            filter: drop-shadow(0 4rem 6rem rgba(255, 166, 43, 0.25));
            user-select: none;
        }

        .subheading {
            font: var(--font-size-24) / 1.55 var(--font-sans);
            color: #fff;
            text-align: center;
        }

        @media (min-width: 1280px) {
            .subheading {
                text-align: start;
            }
        }

        .prize-count {
            font-size: 1.25em;
            color: #fff600;
        }

        .schedule-block {
            display: flex;
            align-items: center;
            width: fit-content;
        }

        .schedule-text-block {
            padding-block: 32px;
            padding-left: 32px;
            padding-right: 32px;
            border: 2rem solid #fff;
            border-radius: 30rem;
        }

        @media (min-width: 768px) {
            .schedule-text-block {
                padding-right: 120px;
            }
        }

        .schedule-title-wrap {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .schedule-title {
            /* aspect-ratio: 347/31;
            background: url("/images/event-2025/participating-event-schedule-title.svg") no-repeat 50% / contain;
            translate: -1.15%; */
            font-family: var(--font-jal);
            color: var(--color-green);
            -webkit-text-stroke-color: var(--color-white);
            -webkit-text-stroke-width: 8px;
            paint-order: stroke fill;
            font-size: var(--font-size-24);

            @media (width >=768px) {
                width: 14.45833333em;
            }

            @media (width < 768px) {
                width: 15.5em;
            }
        }

        .schedule-list {
            width: 100%;
            margin-top: 18rem;
            display: grid;
            gap: 24rem;
            padding: 24rem;
            background: var(--color-white);
            border-radius: 10rem;
            font-size: var(--font-size-18);
            color: #000;
        }

        .schedule-item {
            /* display: grid; */
            /* grid-template-columns: auto 1fr; */
            /* align-items: baseline; */
            /* gap: 0.35lh 0.88888889em; */
        }

        .schedule-item span {
            display: flex;
            padding: 8rem 16rem;
            width: fit-content;
            justify-content: center;
            align-items: center;
            gap: 10rem;
            border-radius: 99px;
            background: var(--color-orange);
            color: var(--color-white);
        }

        .schedule-value {
            grid-column-start: 2;
            font: 700 1.11111111em var(--font-sans);
        }

        .schedule-image-block {
            display: block;
            position: absolute;
            right: -10%;
            max-width: 380rem;
            margin-left: -190px;
            animation-name: shake;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-delay: 0.5s;
        }

        @media (max-width: 768px) {
            .schedule-image-block {
                display: none;
            }
        }
        @media (max-width: 1280px) {
            .schedule-image-block {
                right: 16%;
            }
        }

        .section-quiz {
            margin-top: clamp(var(--section-padding-block-min),
                    calc(90 / var(--container) * 100vw),
                    90rem);
        }

        .quiz-heading {
            font: 700 var(--font-size-36) var(--font-jal);
            color: #fff;
            text-align: center;
        }

        .quiz-question {
            margin-top: 1.25em;
            font: 600 var(--font-size-24) var(--font-sans);
            color: #fff;
        }

        .quiz-list {
            counter-reset: index;
            margin-top: 40rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(260rem, 100%), 1fr));
            gap: 16rem;
            font: 700 var(--font-size-24) / 1.66666667 var(--font-jal);
        }

        .quiz-item {
            position: relative;
            align-content: center;
            aspect-ratio: 456/430;
            padding: 3.5% 11% 5%;
            background: repeating-linear-gradient(90deg,
                    #0000,
                    #0000 3px,
                    #f6f6f6 3px,
                    #f6f6f6 5px,
                    #0000 5px,
                    #0000 20px),
                repeating-linear-gradient(180deg,
                    #0000,
                    #0000 17px,
                    #f6f6f6 17px,
                    #f6f6f6 19px,
                    #0000 19px,
                    #0000 20px),
                #fff;
            border-radius: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
            text-align: center;
        }

        .quiz-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 6.4%;
            translate: 0 -13%;
            width: 11.40350877%;
            aspect-ratio: 52/79;
            background: url("/images/event-2025/quiz-clip.png") no-repeat 50% / contain;
        }

        .quiz-item::after {
            --space: clamp(16rem, calc(20 / var(--container) * 100vw), 20rem);
            counter-increment: index;
            content: "Q" counter(index);
            position: absolute;
            top: var(--space);
            right: var(--space);
            width: 2.29166667em;
            align-content: center;
            aspect-ratio: 1;
            background: var(--secondary);
            border-radius: 50%;
            font: 700 var(--font-size-24) var(--font-jal);
            color: #fff;
            text-align: center;
        }

        .quiz-masking {
            font: 250 1.25em var(--font-mont);
        }

        .quiz-hint {
            margin-top: 1.25em;
            font: 600 var(--font-size-24) var(--font-sans);
            color: #fff;
        }

        .quiz-answer-modal-trigger {
            margin: 1.81818182em auto 0;
        }

        .quiz-answer-modal-trigger.is-disabled {
            cursor: not-allowed;
            background: lightslategray;
            color: lightgray;
        }

        .quiz-answer-modal-trigger.is-disabled::after {
            filter: brightness(0.75);
        }

        .cam7__btn {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 46rem;
            margin-top: 46rem;
        }

        /* Hint */
        .cam7__btn p {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 64rem;
            padding: 12rem 20rem;
            box-sizing: border-box;
            border: 5rem solid var(--color-orange);
            border-radius: 50rem;
            background: var(--color-white);
            color: var(--color-orange);
            font-size: 23rem;
            font-weight: 800;
            line-height: 1.4;
            text-align: center;
            word-break: keep-all;
        }

        /* Button */
        .cam7__btn>a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20rem;
            width: 290rem;
            min-height: 76rem;
            margin: unset;
            border: 3rem solid var(--color-white);
            border-radius: 50rem;
            background: var(--color-orange);
            color: var(--color-white);
            font-size: 22rem;
            font-weight: 700;
            text-decoration: none;
            transition: background 0.25s ease, color 0.25s ease;
        }

        .cam7__btn>a i {
            font-size: 24rem;
            line-height: 1;
        }

        .cam7__btn>a:hover {
            background: var(--color-white);
            color: var(--color-orange);
        }

        /* Information */
        .cam7__btn>span {
            display: block;
            color: var(--color-white);
            font-size: 22rem;
            font-weight: 600;
            line-height: 1.5;
            text-align: center;
            word-break: keep-all;
        }

        /* Tablet */
        @media (max-width: 768px) {
            .cam7__btn {
                padding: 16rem 12rem 24rem;
            }

            .cam7__btn p {
                min-height: 52rem;
                padding: 10rem 14rem;
                border-width: 4rem;
                font-size: 16rem;
            }

            .cam7__btn>a {
                width: 230rem;
                min-height: 60rem;
                margin-top: 35rem;
                font-size: 18rem;
            }

            .cam7__btn>a i {
                font-size: 20rem;
            }

            .cam7__btn>span {
                margin-top: 32rem;
                font-size: 15rem;
            }
        }

        /* Mobile */
        @media (max-width: 480px) {
            .cam7__btn {
                padding: 12rem 10rem 20rem;
            }

            .cam7__btn p {
                font-size: 13rem;
                padding: 10rem 12rem;
                border-width: 3rem;
            }

            .cam7__btn>a {
                width: 200rem;
                min-height: 54rem;
                margin-top: 28rem;
                font-size: 16rem;
            }

            .cam7__btn>span {
                margin-top: 28rem;
                font-size: 12rem;
            }
        }
    }

    .share-information {
        position: relative;
        padding: 130rem 0 140rem;
        overflow: hidden;

        /* Placeholder bg -> ganti sendiri pake background-image */
        & .share-information__bg {
            position: absolute;
            inset: 0;
            background: url(/images/event-2026/sharing-bg.jpg) no-repeat center/cover;
        }

        & .share-information__inner {
            position: relative;
            max-width: 1440rem;
            margin: 0 auto;
            padding: 0 20rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        & .share-information__title {
            font-family: var(--font-jal);
            font-size: var(--font-size-46);
            font-weight: 400;
            color: var(--color-orange);
        }

        & .share-information__desc {
            margin-top: 60rem;
            font-size: var(--font-size-19);
            line-height: 1.3;
            color: var(--color-text);
        }

        /* ---------- SNS ---------- */
        & .share-information__sns {
            width: 100%;
            margin-top: 100rem;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22rem;
            list-style: none;
        }

        & .share-information__sns-link {
            height: 70rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20rem;
            font-size: var(--font-size-22);
            font-weight: 700;
            color: var(--color-text);
            background: var(--color-white);
            border: 2rem solid #f6ead2;
            border-radius: 100rem;
            transition: all 0.3s;

            &:hover {
                border-color: var(--color-orange);
                transform: translateY(-3rem);
            }
        }

        & .share-information__sns-icon {
            font-size: var(--font-size-32);

            &.share-information__sns-icon--instagram {
                color: #e1306c;
            }

            &.share-information__sns-icon--facebook {
                color: #1877f2;
            }

            &.share-information__sns-icon--naver {
                color: #2db400;
            }
        }

        /* ---------- CTA ---------- */
        & .share-information__cta {
            margin-top: 100rem;
            min-width: 236rem;
            height: 58rem;
            padding: 0 24rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 14rem;
            font-size: var(--font-size-20);
            font-weight: 500;
            color: var(--color-white);
            background: var(--color-orange);
            border: 3rem solid var(--color-orange);
            border-radius: 100rem;
            box-shadow: 0 0 0 3rem var(--color-white);
            transition: background 0.3s;

            &:hover {
                background: #f09410;
                border-color: #f09410;
            }
        }

        & .share-information__url {
            margin-top: 32rem;
            font-size: var(--font-size-20);
            color: var(--color-text);

            & a {
                text-decoration: underline;
            }
        }

        & .share-information__highlight {
            margin-top: 34rem;
            padding: 18rem 34rem;
            font-family: var(--font-jal);
            font-size: var(--font-size-22);
            color: var(--color-orange);
            background: var(--color-white);
            border: 2rem solid #f6ead2;
            border-radius: 100rem;
        }

        /* ---------- Notice ---------- */
        & .share-information__notice {
            margin-top: 100rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60rem;
            text-align: left;
        }

        & .share-information__notice-title {
            flex-shrink: 0;
            padding-right: 60rem;
            font-family: var(--font-jal);
            font-size: var(--font-size-40);
            font-weight: 400;
            color: #6b4a14;
            border-right: 1rem solid #8a5a1b;
        }

        & .share-information__notice-list {
            list-style: none;
        }

        & .share-information__notice-item {
            position: relative;
            padding-left: 18rem;
            font-size: var(--font-size-18);
            line-height: 1.95;
            color: #6b4a14;

            &::before {
                content: '•';
                position: absolute;
                left: 0;
            }
        }
    }

    /* ---------- Share information: Tablet ---------- */
    @media (max-width: 768px) {
        .share-information {
            padding: 90rem 0 100rem;

            & .share-information__title {
                font-size: var(--font-size-32);
            }

            & .share-information__desc {
                margin-top: 30rem;
                font-size: var(--font-size-17);
            }

            & .share-information__sns {
                margin-top: 50rem;
                grid-template-columns: 1fr;
                gap: 14rem;
            }

            & .share-information__sns-link {
                height: 60rem;
                font-size: var(--font-size-20);
            }

            & .share-information__cta {
                margin-top: 50rem;
                height: 54rem;
                font-size: var(--font-size-18);
            }

            & .share-information__url {
                font-size: var(--font-size-16);
                word-break: break-all;
            }

            & .share-information__highlight {
                padding: 14rem 22rem;
                font-size: var(--font-size-18);
                border-radius: 30rem;
            }

            & .share-information__notice {
                margin-top: 60rem;
                flex-direction: column;
                gap: 20rem;
            }

            & .share-information__notice-title {
                padding: 0 0 20rem;
                font-size: var(--font-size-30);
                border-right: 0;
                border-bottom: 1rem solid #8a5a1b;
            }

            & .share-information__notice-item {
                font-size: var(--font-size-16);
                line-height: 1.8;
            }
        }
    }

    /* ---------- Share information: Mobile ---------- */
    @media (max-width: 480px) {
        .share-information {
            padding: 60rem 0 80rem;

            & .share-information__title {
                font-size: var(--font-size-26);
            }

            & .share-information__desc {
                font-size: var(--font-size-15);
            }

            & .share-information__desc br {
                display: none;
            }

            & .share-information__sns-link {
                height: 54rem;
                font-size: var(--font-size-18);
            }

            & .share-information__sns-icon {
                font-size: var(--font-size-26);
            }

            & .share-information__highlight {
                font-size: var(--font-size-15);
            }

            & .share-information__notice-item {
                font-size: var(--font-size-14);
            }
        }
    }

    .section-cheer-board {
        padding-block: clamp(var(--section-padding-block-min),
                calc(130 / var(--container) * 100vw),
                130rem);

        .cheer-board {
            display: grid;
            gap: 40rem 30rem;
            padding: 26rem clamp(8rem, calc(26 / var(--container) * 100vw), 26rem);
            /* background: #fafafa; */
            border-radius: 30rem;

            /* box-shadow: 0 0 40rem #00000014; */
            @media (width >=1280px) {
                grid-template-columns: 700fr 625fr;
                align-items: end;
                padding-bottom: 2rem;
            }
        }

        .heading-block {
            padding-left: 0.38em;
            /* display: flex;
      flex-direction: column;
      gap: 32px; */
            font: 700 var(--font-size-50) / 1.47 var(--font-jal);
        }

        .heading {
            /* padding-left: 0.54em; */
            font: inherit;
        }

        .heading-visual {
            margin-top: 1.52em;
            width: 100%;
            aspect-ratio: 534/245;
            background: url("/images/event-2025/cheer-board-visual.svg") no-repeat 50% / contain;

            @media (width >=1280px) {
                width: 10.68em;
            }

            @media (768px <=width < 1280px) {
                width: 80%;
            }
        }

        .message-block {
            padding: clamp(16rem, calc(40 / var(--container) * 100vw), 40rem) clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
            background: #fff;
            border: 4rem solid var(--tertiary);
            border-radius: 24rem;
        }

        .message-list::-webkit-scrollbar {
            display: block;
            width: 9rem;
        }

        .message-list::-webkit-scrollbar-thumb {
            border: 0;
        }

        .message-list {
            overflow: clip auto;
            display: grid;
            gap: 30rem;
            max-height: 315rem;
        }

        .message-item {
            display: grid;
            align-items: center;
            gap: 12px;
            /* @media (width >= 768px) {
        grid-template-columns: auto 1fr;
      } */
        }

        .message-date {
            display: block;
            width: 8.125em;
            padding: 0.625em 1.25em;
            background: #f9f5e4;
            border-radius: 5em;
            font-weight: 700;
            color: #ab922b;
        }

        .message-text {
            overflow: hidden;
            font-size: var(--font-size-18);

            @media (width >=768px) {
                display: -webkit-box;
                line-height: 140%;
                /* -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; */
                word-break: break-all;
            }

            @media (width < 768px) {
                padding-left: 2ch;
                line-height: 1.5;
            }
        }

        .message-form {
            margin-top: 30rem;
            border-top: 1px solid #ddd;
            padding-top: 29rem;
            display: grid;
            grid-template-columns: repeat(1fr, 2fr);
            grid-template-rows: repeat(2, 1fr);
            /* grid-template: "spam-number spam-input" "message-input message-input" / auto 1fr; */
            gap: 10rem;
        }

        .field {
            margin: 0;
            min-width: 0;
            height: 3.38888889em;
            background: #f3f3f3;
            border: 0;
            border-radius: 5em;
            font-size: var(--font-size-18);
        }

        .spam-number {
            /* grid-area: spam-number; */
            grid-area: 1 / 1 / 2 / 2;
            /* width: fit-content; */
            height: 100%;
            font-weight: 700;
            text-align: center;
            user-select: none;
            pointer-events: none;
        }

        .spam-input {
            /* grid-area: spam-input; */
            grid-area: 1 / 2 / 2 / 3;
            width: 100%;
            height: 100%;
            padding-inline: clamp(28px, calc(50 / var(--container) * 100vw), 50px);
        }

        .spam-input:focus {
            outline: 0;
        }

        .field-message-input {
            /* grid-area: message-input; */
            grid-area: 2 / 1 / 3 / 3;
            display: grid;
            grid-template-columns: 1fr auto;
            height: auto;
            gap: 12px;
            padding: 12px;
        }

        .message-input {
            margin: 0;
            width: 100%;
            height: 100%;
            padding: 0 0 0 clamp(16rem, calc(41 / var(--container) * 100vw), 41rem);
            background: 0;
            border: 0;
            font: inherit;
        }

        .message-input:focus {
            outline: 0;
        }

        .submit-btn {
            width: 2.5em;
            aspect-ratio: 1;
            background: var(--tertiary) url("/images/event-2025/cheer-board-submit.svg") no-repeat 50% / 44.44444444%;
            border-radius: 50%;
            font-size: var(--font-size-18);
        }

        .list-link {
            margin: clamp(40rem, calc(80 / var(--container) * 100vw), 80rem) auto 0;
            display: block;
            width: fit-content;
            padding: 0.95em 2.95em;
            border: 1px solid currentColor;
            border-radius: 5em;
            font-size: var(--font-size-20);
            text-align: center;
        }
    }

    .cheer-board {
        padding: 140rem 0 130rem;
        background: var(--color-white);

        & .cheer-board__inner {
            max-width: 1440rem;
            margin: 0 auto;
            padding: 0 20rem;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 44rem;
        }

        /* ---------- Intro (kiri) ---------- */
        & .cheer-board__intro {
            flex: 1;
            min-width: 0;
            max-width: 680rem;
        }

        & .cheer-board__title {
            font-family: var(--font-jal);
            font-size: var(--font-size-46);
            font-weight: 400;
            color: var(--color-orange);
        }

        & .cheer-board__desc {
            margin-top: 60rem;
            font-size: var(--font-size-19);
            line-height: 2.3;
            color: var(--color-text);
        }

        /* Placeholder ilustrasi -> ganti sendiri */
        & .cheer-board__visual {
            margin-top: 60rem;
            width: 100%;
            /* aspect-ratio: 672 / 390;
            background: #fbe9d0;
            border-radius: 30rem; */
        }

        /* ---------- Panel (kanan) ---------- */
        & .cheer-board__panel {
            flex-shrink: 0;
            width: 686rem;
            padding: 34rem 32rem 32rem;
            background: var(--color-white);
            border: 4rem solid var(--color-orange);
            border-radius: 40rem;
        }

        & .cheer-board__list {
            height: 320rem;
            padding-right: 30rem;
            overflow-y: auto;
            list-style: none;
            scrollbar-width: thin;
            scrollbar-color: #c9c9c9 transparent;

            &::-webkit-scrollbar {
                width: 8rem;
            }

            &::-webkit-scrollbar-thumb {
                background: #c9c9c9;
                border-radius: 100rem;
            }

            &::-webkit-scrollbar-track {
                background: #f3f3f3;
                border-radius: 100rem;
            }
        }

        & .cheer-board__item {
            height: 69rem;
            display: flex;
            align-items: center;
            gap: 30rem;
        }

        & .cheer-board__date {
            flex-shrink: 0;
            width: 130rem;
            height: 38rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-17);
            font-weight: 700;
            color: var(--color-orange);
            background: #fff4e3;
            border-radius: 100rem;
        }

        & .cheer-board__message {
            flex: 1;
            min-width: 0;
            font-size: var(--font-size-18);
            color: var(--color-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ---------- Write ---------- */
        & .cheer-board__write {
            margin-top: 28rem;
            padding-top: 43rem;
            display: flex;
            gap: 18rem;
            border-top: 1rem solid #e2e2e2;
        }

        & .cheer-board__visitor {
            flex-shrink: 0;
            width: 204rem;
            padding: 24rem 10rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            background: #fff4e8;
            border-radius: 12rem;
        }

        & .cheer-board__visitor-icon {
            width: 74rem;
            height: 74rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--font-size-34);
            color: var(--color-orange);
            background: var(--color-white);
            border-radius: 50%;
        }

        & .cheer-board__visitor-label {
            margin-top: 40rem;
            font-size: var(--font-size-16);
            font-weight: 500;
            color: #444;
        }

        & .cheer-board__visitor-count {
            margin-top: 8rem;
            font-size: var(--font-size-36);
            font-weight: 700;
            color: var(--color-orange);
        }

        & .cheer-board__visitor-note {
            margin-top: 8rem;
            font-size: var(--font-size-14);
            color: #777;
        }

        & .cheer-board__form {
            flex: 1;
            min-width: 0;
        }

        & .cheer-board__textarea {
            display: block;
            width: 100%;
            height: 131rem;
            padding: 14rem 16rem;
            font: inherit;
            font-size: var(--font-size-16);
            color: var(--color-text);
            resize: none;
            border: 1rem solid #e2e2e2;
            border-radius: 20rem;
            outline: none;

            &::placeholder {
                color: #b5b5b5;
            }

            &:focus {
                border-color: var(--color-orange);
            }
        }

        & .cheer-board__submit {
            margin-top: 19rem;
            width: 100%;
            height: 56rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14rem;
            font-size: var(--font-size-20);
            font-weight: 500;
            color: var(--color-white);
            background: var(--color-orange);
            border-radius: 100rem;
            transition: background 0.3s;

            &:hover {
                background: #f09410;
            }
        }

        & .cheer-board__note {
            margin-top: 18rem;
            font-size: var(--font-size-13);
            color: #888;
        }
    }

    /* ---------- Cheer board: Tablet ---------- */
    @media (max-width: 1024px) {
        .cheer-board {
            & .cheer-board__inner {
                flex-direction: column;
                gap: 60rem;
            }

            & .cheer-board__intro {
                max-width: 100%;
                width: 100%;
            }

            & .cheer-board__panel {
                width: 100%;
            }
        }
    }

    @media (max-width: 768px) {
        .cheer-board {
            padding: 90rem 0 90rem;

            & .cheer-board__title {
                font-size: var(--font-size-32);
            }

            & .cheer-board__desc {
                margin-top: 30rem;
                font-size: var(--font-size-17);
            }

            & .cheer-board__visual {
                margin-top: 36rem;
                border-radius: 20rem;
            }

            & .cheer-board__panel {
                padding: 24rem 20rem 24rem;
                border-radius: 28rem;
            }

            & .cheer-board__item {
                gap: 16rem;
            }

            & .cheer-board__date {
                width: 112rem;
                font-size: var(--font-size-15);
            }

            & .cheer-board__message {
                font-size: var(--font-size-16);
            }
        }
    }

    /* ---------- Cheer board: Mobile ---------- */
    @media (max-width: 480px) {
        .cheer-board {
            padding: 60rem 0;

            & .cheer-board__title {
                font-size: var(--font-size-26);
            }

            & .cheer-board__desc {
                font-size: var(--font-size-15);
                line-height: 2;
            }

            & .cheer-board__desc br {
                display: none;
            }

            & .cheer-board__list {
                height: 280rem;
                padding-right: 14rem;
            }

            & .cheer-board__item {
                height: 70rem;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                gap: 6rem;
            }

            & .cheer-board__date {
                width: 100rem;
                height: 30rem;
                font-size: var(--font-size-14);
            }

            & .cheer-board__message {
                width: 100%;
                font-size: var(--font-size-15);
            }

            & .cheer-board__write {
                flex-direction: column;
            }

            & .cheer-board__visitor {
                width: 100%;
            }

            & .cheer-board__visitor-label {
                margin-top: 20rem;
            }
        }
    }

    .cta {
        position: relative;
        min-height: 562rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        /* Placeholder bg -> ganti sendiri pake background-image */
        & .cta__bg {
            position: absolute;
            inset: 0;
            background: url(/images/event-2026/stories-bg.jpg) no-repeat center / cover;
        }

        & .cta__inner {
            position: relative;
            padding: 80rem 20rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        & .cta__title {
            font-family: var(--font-jal);
            font-size: var(--font-size-46);
            font-weight: 400;
            line-height: 1.28;
            color: var(--color-orange);
            -webkit-text-stroke-color: var(--color-white);
            -webkit-text-stroke-width: 20px;
            paint-order: stroke fill;
        }

        & .cta__desc {
            margin-top: 28rem;
            font-size: var(--font-size-19);
            color: var(--color-text);
        }

        & .cta__btn {
            margin-top: 42rem;
            min-width: 236rem;
            height: 58rem;
            padding: 0 24rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 14rem;
            font-size: var(--font-size-20);
            font-weight: 500;
            color: var(--color-white);
            background: var(--color-orange);
            border: 3rem solid var(--color-orange);
            border-radius: 100rem;
            box-shadow: 0 0 0 3rem var(--color-white);
            transition: background 0.3s;

            &:hover {
                background: #f09410;
                border-color: #f09410;
            }
        }
    }

    /* ---------- CTA: Tablet ---------- */
    @media (max-width: 768px) {
        .cta {
            min-height: 440rem;

            & .cta__title {
                font-size: var(--font-size-32);
                -webkit-text-stroke-width: 3rem;
            }

            & .cta__desc {
                margin-top: 20rem;
                font-size: var(--font-size-17);
            }

            & .cta__btn {
                margin-top: 32rem;
                height: 54rem;
                font-size: var(--font-size-18);
            }
        }
    }

    /* ---------- CTA: Mobile ---------- */
    @media (max-width: 480px) {
        .cta {
            min-height: 380rem;

            & .cta__title {
                font-size: var(--font-size-24);
            }

            & .cta__title br {
                display: none;
            }

            & .cta__desc {
                font-size: var(--font-size-15);
            }
        }
    }
}