@layer slider {
    @layer base {
        .cards, .cards * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        :root {
            --cover-size: 592px;
            --spacing: 100px; /* 이미지 사이 간격 */
        }

        /*@media (max-width: 1024px) {*/
        /*    :root {*/
        /*        --cover-size: 9rem;*/
        /*    }*/
        /*}*/

        /*@media (max-width: 600px) {*/
        /*    :root {*/
        /*        --cover-size: 6rem;*/
        /*    }*/
        /*}*/

        /*html, body {*/
        /*    height: 100%;*/
        /*    width: 100%;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/

        #videoContainer {
            background: #111;
            font-family: sans-serif;

            display: flex;
            flex-direction: column;
            gap: 1em;
            padding: 1em;
            place-content: safe center;
            overscroll-behavior: contain;
            box-sizing: border-box;
        }

        .cards {
            list-style: none;
            overflow-x: scroll;
            width: 100%;
            white-space: nowrap;

            outline: 1px solid #333;
            background: rgba(0 0 0 / 0.5);
        }

        @layer scroll-snapping {
            /* only enable snapping when not dragging round*/
            #controls:has(#scroll-snapping:checked) ~ .cards:not(.active) {
                scroll-snap-type: x mandatory;
            }
            #controls:has(#scroll-snapping:checked) ~ .cards li {
                scroll-snap-align: center;
            }
        }

        .cards li {
            display: inline-block;
            width: var(--cover-size);
            height: var(--cover-size);
            margin: 0 var(--spacing); /* 좌우 마진 추가 */
            transition: transform 0.3s;
        }

        .cards li img {


            display: block;
            width: var(--cover-size);
            height: var(--cover-size);

            -webkit-box-reflect: below 0.5em
            linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25));
        }

        .cards {
            --size: 6;
            /*min-height: calc(var(--cover-size) * 2.5);*/

            /*width: calc(var(--cover-size) * var(--size));*/
            margin: 0 auto; !important;
            padding: calc(var(--cover-size) / 3 * 2) 0;
            position: relative;
            /*max-width: 90vw;*/
            display: flex;
            /* justify-content: center; */
            align-items: center;
            height: 100%;
            width: 100%;
        }

        /* Because the total size is 6, with 1 cover in the middle, there’s space for 5 left … so 2.5 on each side */
        /* Didn’t work (on the right): `calc(50% - (var(--cover-size) / 2));` */
        .cards li:first-of-type {
            margin-left: calc(50% - (var(--cover-size) / 2));
        }
        .cards li:last-of-type {
            margin-right: calc(50% - (var(--cover-size) / 2));
        }
    }

    @layer components {
        @layer warning {
            .warning {
                --size: 6;
                width: calc(var(--cover-size) * var(--size));
                margin: 0 auto !important;
                max-width: 90vw;
            }
        }

        @layer debug {
            #controls {
                position: absolute;
                top: 1em;
                left: 1em;
            }

            #controls label {
                display: block;
                color: white;
            }

            #controls:has(#debug:checked) ~ .cards {
                border: 1px solid lime;
            }

            #controls:has(#debug:checked) ~ .cards li {
                text-align: center;
                color: white;
                border: 1px solid blue;
            }

            #controls:has(#debug:checked) ~ .cards li::before {
                content: attr(id);
                display: block;
                position: absolute;
                inset: 0;
                line-height: var(--cover-size);
                opacity: 0.5;
            }

            #controls:has(#debug:checked) ~ .cards li img {
                opacity: 0.5;
            }
        }
    }
}

@layer slider.base, slider.components;

/* Animation bumps up the z-index, to make sure it’s on top */
@keyframes adjust-z-index {
    0% {
        z-index: 1;
    }
    50% {
        z-index: 100; /* When at the center, be on top */
    }
    100% {
        z-index: 1;
    }
}

/* Animation that rotates the cover */
@keyframes rotate-cover {
    0% {
        transform: translateX(-90%) rotateY(-20deg);
    }
    35% {
        transform: translateX(0) rotateY(-45deg);
    }
    50% {
        transform: rotateY(0deg) translateZ(1em);
    }
    65% {
        transform: translateX(0) rotateY(45deg);
    }
    100% {
        transform: translateX(90%) rotateY(20deg);
    }
}

.cards li {
    /* Track this element as it intersects the scrollport */
    view-timeline-name: --li-in-and-out-of-view;
    view-timeline-axis: inline;

    /* Link an animation to the established view-timeline and have it run during the contain phase */
    animation: linear adjust-z-index both;
    animation-timeline: --li-in-and-out-of-view;

    /* Make the 3D stuff work… */
    perspective: 40em;

    position: relative;
    z-index: 1;
    will-change: z-index;

    user-select: none;
}

.cards li > img {
    /* Link an animation to the established view-timeline (of the parent li) and have it run during the contain phase */
    animation: linear rotate-cover both;
    animation-timeline: --li-in-and-out-of-view;

    /* Prevent FOUC */
    transform: translateX(-100%) rotateY(-25deg);

    will-change: transform;
}

/* Animation that rotates the cover */
@keyframes rotate-cover--mt {
    0% {
        transform: translateX(-90%) rotateY(-20deg);
    }
    35% {
        transform: translateX(0) rotateY(-45deg);
    }
    50% {
        transform: rotateY(0deg) translateZ(1em) scale(2.0);
    }
    65% {
        transform: translateX(0) rotateY(45deg);
    }
    100% {
        transform: translateX(90%) rotateY(20deg);
    }
}
#controls:has(#force-main-thread:checked) ~ .cards li > img {
    animation-name: rotate-cover--mt;
}

#controls:has(#size_type1:checked) ~ .cards li > img {
    object-fit: contain; /* 가로 세로 중 큰 쪽을 기준으로 100% 맞춤 */
    object-position: center; /* 이미지를 가운데로 배치 */
}

#controls:has(#size_type2:checked) ~ .cards li > img {
    object-fit: cover; /* 가로 세로 중 큰 쪽을 기준으로 100% 맞춤 */
    object-position: center; /* 이미지를 가운데로 배치 */
}

.is-embed #controls {
    display: none;
}

.slider_title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../image/history_img.png");
    z-index: 9999;
}





.animate__size_up {
    -webkit-animation-name: size_up;
    animation-name: size_up
}

@-webkit-keyframes size_up {
    0% {
    }
    to {
        -webkit-transform:  scale(1.7);
        transform:  scale(1.7);
    }
}

@keyframes size_up {
    0% {
    }
    to {
        -webkit-transform: scale(1.7);
        transform:  scale(1.7);
    }
}

.animate__size_down {
    -webkit-animation-name: size_down;
    animation-name: size_down
}

@-webkit-keyframes size_down {
    0% {
        -webkit-transform: scale(1.7);
        transform:  scale(1);
    }
    to {
        -webkit-transform:  scale(1.7);
        transform:  scale(1);
    }
}

@keyframes size_down {
    0% {
        -webkit-transform: scale(1.7);
        transform:  scale(1.7);
    }
    to {
        -webkit-transform: scale(1);
        transform:  scale(1);
    }
}

.swiper-slide > img {
    object-fit: contain;
}

.bottom_text_area {
    position: absolute;
    bottom: 35px;
    width: 100%;
    height: 66px;

    color: #FFFFFF;
    text-align: center;
    font-family: KNU TRUTH;
    font-size: 66px;
    font-style: normal;
    line-height: 66px;
}

.slider_title .year_text_area{
    position: absolute;
    top: 38px;
    left: 672px;
    width: 304px;
    height: 80px;

    color: #000000;
    text-align: center;
    font-family: KNU TRUTH;
    font-size: 73px;
    font-style: normal;
    line-height: 94px;
}

.slider_title .age_text_area {
    position: absolute;
    top: 37px;
    left: 1030px;
    width: 194px;
    height: 80px;

    color: #3D4DC1;
    text-align: center;
    font-family: KNU TRUTH;
    font-size: 66px;
    font-style: normal;
    line-height: 94px;
}