@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: #0077FE !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: black;
    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;
}