/*
TODO:
 메인페이지 moving logo css
 */
/*
TODO:
 메인페이지 top-nav active css
*/
.nav-web-menu.active {
    background-color: #ffffff;
    color: #EA2626;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
.nav-mobile-menu.active {
    color: #ffffff;
    background-color: #EA2626;
}



@keyframes shine {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.card, .owl-item {
    transition: all 1s ease-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.owl-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.cards {
    position: relative;
    width: 100%;
}

.card {
    display: flex;
    justify-content: center;
    margin: 1em 0;
    border-radius: 4px;
    opacity: 0.7;
    transform: scale(0.87);
    transition: transform 0.4s 0.5s ease-out, opacity 1s ease;

    .active & {
        transform: box-shadow 0.3s ease, transform 0.1s 0.4s ease-in, opacity 0.4s ease;
    }

    & __content {
        display: flex;
        align-items: center;
        text-align: center;
        color: #fff;
        opacity: 1;

        .active & {
            opacity: 1;
            transition: opacity 0.4s ease;
        }
    }

    & __title {
        display: inline-block;
        font-size: 2em;
        overflow: hidden;

        span {
            display: inline-block;
            animation: slide-up 0.4s 0s ease both;

            .center.active &, .center.active.cloned:last-child & {
                opacity: 1;
                animation: slide-down 0.4s 0.4s ease both;
                transition: transform 0.3s 0.4s ease, opacity 0.3s ease;
            }
        }
    }

    .center & {
        opacity: 1;
        transform: scale(1);
    }
}

.owl-dot span {
    margin: 0 0.2em !important;
    background: #9F9F9F !important;
    display: block !important;
    -webkit-backface-visibility: visible !important;
    transition: all .4s ease !important;
}

.owl-theme .owl-dots .owl-dot.active span {
    width: 2em !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #EA2626 !important;
}


@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translate3d(0, -120%, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0%, 0);
    }
}


@keyframes slide-up {
    0% {
        opacity: 1;
        transform: translate3d(0, 0%, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -120%, 0);
    }
}

@keyframes moveBg {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: -1134px 50%;
    }
}

.logo-carousel {
    --blur: 6px;
    --contrast: 105%;
    --speed: 15s;
    height: clamp(200px, 40vw, 500px); /* 👈 반응형 높이 */
    background: #222222;
    width: 100%;
    position: relative;
    overflow: hidden; /* 혹시 넘칠 때 잘라냄 */

    .mask {
        position: absolute;
        inset: 0;
        background: #0000;
        backdrop-filter: blur(var(--blur)) contrast(var(--contrast));
        -webkit-backdrop-filter: blur(var(--blur)) contrast(var(--contrast)); /* Safari 대응 */
        -webkit-mask: linear-gradient(90deg, #000 50px, #0000 175px calc(100% - 175px), #fff calc(100% - 50px));
        pointer-events: none;
    }
}

@keyframes moveBg {
    from {
        background-position: 0 50%;
    }
    to {
        background-position: 100% 50%;
    }
}

.popcorn {
    opacity: 0;
    transform: scale(0.5) translateY(60px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 톡 튀는 커브 */
}

.popcorn.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.fadein {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.8s ease-out;
}

.fadein.active {
    opacity: 1;
    transform: translateY(0);
}

.login-container {
    height: calc(100dvh - 64px);
    background-color: #F5F5F5;
}

.phone-container {
    height: calc(100dvh - 64px);
    background-color: #F5F5F5;
}