/* 마키 컴포넌트 스타일 */
.marquee-container {
    display: flex;
    gap: clamp(20px, 4vw, 40px);
    height: clamp(400px, 60vh, 700px);
    overflow: hidden;
    position: relative;
}

.marquee-container::before,
.marquee-container::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: clamp(40px, 6vh, 60px);
    pointer-events: none;
    z-index: 10;
}

.marquee-container::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(243, 247, 250, 1), rgba(243, 247, 250, 0));
}

.marquee-container::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(243, 247, 250, 1), rgba(243, 247, 250, 0));
}

.marquee-column {
    width: clamp(180px, 25vw, 280px);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 30px);
    animation-duration: 24s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute;
    width: 100%;
}

.left-column .marquee-track {
    animation-name: scrollDown;
}

.right-column .marquee-track {
    animation-name: scrollUp;
}

/* 진정한 무한 스크롤 애니메이션 - 한 세트만큼 이동 후 리셋 */
@keyframes scrollDown {
    0% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-1240px); /* 카드 4개 + 간격: (280*4) + (30*4) = 1240px */
    }
}

@keyframes scrollUp {
    0% {
        transform: translateY(-1240px); /* 카드 4개 + 간격: (280*4) + (30*4) = 1240px */
    }
    100% {
        transform: translateY(0px);
    }
}

/* 모바일 반응형 - 가로 애니메이션 레이아웃 */
@media (max-width: 768px) {
    .marquee-container {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        flex-direction: column;
        gap: 20px;
        overflow: hidden;
        padding: 20px 0;
        align-items: center;
        justify-content: center;
    }
    
    .marquee-column {
        width: 100%;
        height: 170px;
        position: relative;
        overflow: hidden;
    }
    
    .marquee-track {
        position: absolute;
        width: 100%;
        height: 170px;
        flex-direction: row;
        gap: 10px;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        display: flex;
        align-items: center;
    }

    .left-column .marquee-track {
        animation-name: scrollLeft;
    }

    .right-column .marquee-track {
        animation-name: scrollRight;
    }

    /* 진정한 무한 스크롤 모바일 애니메이션 - 한 세트만큼 이동 후 리셋 */
    @keyframes scrollLeft {
        0% {
            transform: translateX(0px);
        }
        100% {
            transform: translateX(-640px); /* 카드 4개 + 간격: (150*4) + (10*4) = 640px */
        }
    }

    @keyframes scrollRight {
        0% {
            transform: translateX(-640px); /* 카드 4개 + 간격: (150*4) + (10*4) = 640px */
        }
        100% {
            transform: translateX(0px);
        }
    }
    
    /* 모바일에서 그라디언트 효과 조정 */
    .marquee-container::before {
        background: linear-gradient(to right, rgba(243, 247, 250, 1), rgba(243, 247, 250, 0));
        width: 30px;
        height: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
    }
    
    .marquee-container::after {
        background: linear-gradient(to left, rgba(243, 247, 250, 1), rgba(243, 247, 250, 0));
        width: 30px;
        height: 100%;
        top: 0;
        bottom: 0;
        right: 0;
        left: auto;
    }
}