body {
    background-color: #262626;
}

/* 다크 모드 - 예외 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background-footer: #262626;
    }

    .site-footer__logo img {
        content: url("../image/logo/yhcc_website_logo_2025_black.svg");
    }

    .moments__nav-btn--prev img {
        content: url("../image/icon/mit/global/chevron-left_FFFFFF.svg");
    }

    .moments__nav-btn--next img {
        content: url("../image/icon/mit/global/chevron-right_FFFFFF.svg");
    }
}

/* ===============================================
   Media Section
   =============================================== */
.media-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* ===============================================
   Header & Logo
   =============================================== */
.site-header {
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;

    z-index: 10;
}

/* ===============================================
   Main Navigation
   =============================================== */
.nav-link {
    color: var(--color-text-fixed-white);
}

/* ===============================================
   Submenu (Dropdown)
   =============================================== */
.submenu-link {
    color: var(--color-text-fixed-white);
}



/* ===============================================
   Media Hero
   =============================================== */
.media-hero {
    width: 100%;
    height: 100vh;
    padding: 12.8rem 6.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-hero__background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: -2;

    transition: opacity 0.8s ease;
}

.media-hero__background.is-fading {
    opacity: 0;
}

.media-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: -1;
}



.media-hero__inner {
    width: fit-content;
    height: 43.4rem;
    display: flex;
    flex-direction: row;
    gap: 12.8rem;
}


.media-hero__content {
    width: 64.0rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    /* gap: 6.4rem; */

    opacity: 1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(6rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.media-hero__content.is-animating {
    animation: fadeInUp 0.8s ease-out forwards;
}

.media-hero__text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;

    color: var(--color-text-fixed-white);
}

.media-hero__eyebrow {
    padding: 0;
    margin: 0;
    font-size: 3.2rem;
    font-weight: var(--font-weight-bold);
}

.media-hero__title {
    padding: 0;
    margin: 0;
    font-size: 12.8rem;
    font-weight: var(--font-weight-bold);

    /* white-space: nowrap; */
    /* ⭐ 줄바꿈 금지 */
    /* overflow: hidden; */
    /* 안전장치 */
    /* text-overflow: ellipsis; */
    /* 혹시 너무 길면 ... */
}

.media-hero__title.is-long {
    font-size: 8.0rem;
}

.media-hero__description {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    line-height: 180%;
}

.media-hero__cta {
    padding: 1.6rem 3.2rem;
    margin: 0;
    width: fit-content;
    height: fit-content;

    font-size: 2.0rem;
    font-weight: var(--font-weight-semibold);
    /* Figma = Bold --> CSS = SemiBold */
    letter-spacing: 0.02rem;

    border-radius: 20.0rem;
    /* border: 0.1rem solid rgba(255, 255, 255, 0.35); */
    border: 0;

    color: var(--color-text-fixed-white);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.12));

    backdrop-filter: blur(1.4rem) saturate(160%);
    -webkit-backdrop-filter: blur(1.4rem) saturate(160%);

    box-shadow:
        0 0.8rem 2.4rem rgba(0, 0, 0, 0.25),
        inset 0 0.1rem 0 rgba(255, 255, 255, 0.35);

    cursor: pointer;
}


.media-hero__carousel {
    width: 31.4rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    /* gap: 6.4rem; */
}

.media-hero__track-wrapper {
    width: 31.4rem;
    height: 31.4rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #262626;

    border: 0.4rem solid var(--color-border-default);
    border-radius: 50%;

    overflow: hidden;
}

.media-hero__track {
    display: flex;
    height: 100%;
    will-change: transform;

    flex-direction: row;
    gap: 2.4rem;
}

.media-hero__card {
    flex: 0 0 100%;
    /* ⭐ 한 번에 하나씩 */
    width: 100%;
    height: 100%;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

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

.media-hero__controls {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2.4rem;
}

.media-hero__nav {
    padding: 0;
    margin: 0;
    width: 4.0rem;
    height: 4.0rem;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 0;
    background: transparent;

    cursor: pointer;
}

.media-hero__nav:hover {
    /* border: 0.1rem solid rgba(255, 255, 255, 0.35); */
    border: 0;

    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.12));

    backdrop-filter: blur(1.4rem) saturate(160%);
    -webkit-backdrop-filter: blur(1.4rem) saturate(160%);

    box-shadow:
        0 0.8rem 2.4rem rgba(0, 0, 0, 0.25),
        inset 0 0.1rem 0 rgba(255, 255, 255, 0.35);
}

.media-hero__nav--prev {
    padding-right: 0.2rem;
}

.media-hero__nav--next {
    padding-left: 0.2rem;
}

.media-hero__counter {
    padding: 0;
    margin: 0;
    font-size: 2.4rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-fixed-white);
}

/* ===============================================
   Moments
   =============================================== */
.moments {
    width: 100%;
    padding: 12.8rem 0 16.0rem 0;
    display: flex;
    flex-direction: column;
    gap: 8.0rem;
    background-color: var(--color-background-primary);
}

.moments__header {
    width: 100%;
    padding: 0 12.8rem;
    display: flex;
}

.moments__text {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.moments__title {
    padding: 0;
    margin: 0;
    font-size: 6.4rem;
    font-weight: var(--font-weight-bold);
}

.moments__subtitle {
    padding: 0;
    margin: 0;
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    font-style: italic;
}

.moments__visual-toggle {
    width: 3.2rem;
    height: 3.2rem;
    overflow: hidden;
    flex-shrink: 0;
}

.moments__visual-toggle-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.moments__years {
    width: 100%;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.moments__years-track {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 2.4rem;
}

.moments__year-item {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.moments__year-text {
    padding: 0;
    margin: 0;
    font-family: "source-serif-pro", serif;
    font-size: 6.4rem;
    font-weight: var(--font-weight-regular);
    font-style: italic;

    opacity: 0;
    transform: translateY(1.6rem);
    max-height: 0;

    overflow: hidden;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        max-height 0.4s ease;
}

.moments__year-item.is-active .moments__year-text {
    opacity: 1;
    transform: translateY(0);
    max-height: 10rem;
    /* 충분히 큰 값 */
}



.moments__year {
    position: relative;
    width: 48.0rem;
    height: 32.0rem;

    padding: 0;
    border-radius: 1.5rem;
    border: 0.4rem solid var(--color-border-line-default);
    overflow: hidden;

    cursor: pointer;
    background: none;
}

.moments__year-thumb {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    z-index: 0;
    transition: transform 0.6s ease;
}

.moments__year:hover .moments__year-thumb,
.moments__year.is-active .moments__year-thumb {
    transform: scale(1.05);
}

.moments__year-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 1;

    font-size: 6.4rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-button-fixed-white);

    opacity: 1;
    transition: opacity 0.3s ease;
}

.moments__year-control-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 2;

    width: 6.4rem;
    height: 6.4rem;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.moments__year:hover .moments__year-label {
    opacity: 0;
}

.moments__year:hover .moments__year-control-icon {
    opacity: 1;
}

.moments__year-item.is-active .moments__year-label {
    opacity: 0;
}

.moments__year-item.is-active .moments__year-control-icon {
    opacity: 1;
}



.moments__nav {
    width: 100%;
    padding: 0 12.8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.moments__nav-btn {
    width: 3.2rem;
    height: 3.2rem;
    overflow: hidden;
    flex-shrink: 0;
    background-color: transparent;
    border-radius: 50%;
    border: 0.2rem solid var(--color-button-primary);
    cursor: pointer;
}

.moments__nav-btn--prev {
    padding-right: 0.2rem;
}

.moments__nav-btn--next {
    padding-left: 0.2rem;
}

.moments__nav-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moments__nav-pagination {
    display: flex;
    flex-direction: row;
    gap: 1.0rem;
}

.moments__nav-pagination-dot {
    width: 1.0rem;
    height: 1.0rem;
    border-radius: 50%;
    border: 0.2rem solid var(--color-button-primary);
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.moments__nav-pagination-dot.is-active {
    background-color: var(--color-button-primary);
    transform: scale(1.2);
}



.moments__gallery {
    display: none;
    padding: 0 12.8rem;
}

.moments__gallery.is-visible {
    display: block;
}

.moments__gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 8.0rem;
    column-gap: 2.4rem;
}

.moments__gallery-item {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 1.5rem;
}

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



/* ===============================================
   Next Gen
   =============================================== */
.next-gen {
    width: 100%;
    padding-top: 12.8rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12.8rem;

    background-size: cover;
    background-position: center;
}

.next-gen__inner {
    width: 80.0rem;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.next-gen__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;

    font-family: "source-serif-pro", serif;
    color: var(--color-text-fixed-white);
}

.next-gen__eyebrow {
    padding: 0;
    margin: 0;
    font-size: 8.8rem;
    font-weight: var(--font-weight-extralight);
    text-align: center;
    text-transform: uppercase;
}

.next-gen__description {
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
    font-weight: var(--font-weight-light);
    /* Figma = Regular --> CSS = Light */
    font-style: italic;
    text-align: center;
    line-height: 180%;
    letter-spacing: 0.25rem;
}

.next-gen__media {
    width: 80.0rem;
    height: 45.0rem;

    position: relative;
    overflow: hidden;

    border: 0.1rem solid var(--color-border-default);
    border-radius: 1.5rem;
}

.next-gen__video {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    border: 0;
}

.next-gen__wave {
    width: 100%;
    height: 17.6rem;
    overflow: hidden;
    background-color: transparent;
}



/* ===============================================
    Footer
    =============================================== */
.footer__wave {
    display: none;
}



/* ===============================================
   모바일 반응형
   Desktop : 1728px / (1512px) / 1440px / (1280px)
   Mobile : 1024px / 768px / 390px / 375px

            1512px = 95em(94.5)
   반응형 --> 1280px = 80em
   메뉴판, 반응형 --> 1024px = 64em --> 70em
   반응형 --> 0768px = 48em --> 60em
   반응형 --> 0612px = 39em(38.25) - 390px 대신
            0390px = 25em(24.375)
            0375px = 24em(23.43)
            0320px = 16em
   =============================================== */
@media (max-width: 1280px) {
    .media-hero__inner {
        width: fit-content;
        height: 43.4rem;
        display: flex;
        flex-direction: row;
        gap: 6.4rem;
    }

    .moments__header,
    .moments__nav,
    .moments__gallery {
        padding: 0 6.4rem;
    }

}

/* 원래 64em인데 화면 가로 넓이 줄어듦 이슈로 70em */
@media (max-width: 1120px) {
    /* 햄버거 메뉴 버튼 색상 */
    .nav-toggle span {
        background-color: var(--color-button-fixed-white);
    }
    .nav-toggle[aria-expanded="true"] span {
        background-color: var(--color-main);
    }



    .media-hero__inner {
        width: 100%;
        height: fit-content;
        flex-direction: column;
        align-items: center;
    }

    .media-hero__text {
        text-align: center;
    }

    .media-hero__counter {
        font-size: 1.6rem;
        font-weight: var(--font-weight-semibold);
    }

    .media-hero__cta {
        display: none;
    }

    .media-hero__track-wrapper {
        display: none;
    }
}


/* 원래 48em인데 화면 가로 넓이 줄어듦 이슈로 60em */
@media (max-width: 960px) {
    .media-hero__content {
        width: 100%;
    }

    .media-hero__title {
        width: 100%;
    }



    .moments {
        padding: 8.0rem 0 12.8rem 0;
        gap: 6.4rem;
    }

    .moments__text {
        width: 100%;
        gap: 1.6rem;
    }

    .moments__title {
        font-size: 4.8rem;
        text-align: center;
    }

    .moments__subtitle {
        text-align: center;
    }

    .moments__year-text {
        font-size: 4.8rem;
    }

    .moments__year {
        width: 32.0rem;
        height: 21.3rem;
    }

    .moments__year-label {
        font-size: 4.8rem;
    }

    .moments__gallery-grid {
        row-gap: 2.4rem;
    }



    .next-gen__inner {
        width: 100%;
        padding: 0 6.4rem;
    }

    .next-gen__eyebrow {
        font-size: 6.4rem;
    }

    .next-gen__media {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        position: relative;
    }

    .next-gen__wave {
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: transparent;
    }
}



@media (max-width: 612px) {
    .media-hero {
        padding: 6.4rem 1.6rem;
    }

    .media-hero__content {
        padding: 0 1.6rem;
    }

    .media-hero__eyebrow {
        font-size: 2.4rem;
    }

    .media-hero__title,
    .media-hero__title.is-long {
        font-size: 6.4rem;
    }

    .media-hero__description {
        font-size: 1.4rem;
    }



    .moments {
        padding: 6.4rem 0 9.6rem 0;
        gap: 4.8rem;
    }

    .moments__header,
    .moments__nav,
    .moments__gallery {
        padding: 0 1.6rem;
    }

    .moments__title {
        font-size: 4.0rem;
        text-align: start;
    }

    .moments__subtitle {
        text-align: start;
    }

    .moments__gallery {
        width: 100%;
    }

    .moments__gallery-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.0rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .moments__gallery-item {
        width: 32.0rem;
        height: 21.3rem;
    }



    .next-gen {
        padding-top: 9.6rem;
        gap: 9.6rem;
    }

    .next-gen__inner {
        padding: 0 1.6rem;
    }

    .next-gen__eyebrow {
        font-size: 3.6rem;
    }

    .next-gen__description {
        font-size: 1.4rem;
    }

}