/* SB-01-2-ADD AVIF 무한 스크롤 스타일 */
.sb-marquee-wrapper {
    height: 480px; /* 카드 약 3장 정도의 높이만 화면에 노출 (150px * 3장 + gap 고려) */
    overflow: hidden;
    position: relative;
    border-radius: 24px;
}

.sb-marquee-track {
    display: flex;
    gap: 16px;
    height: 100%;
}

.sb-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    will-change: transform;
}

.sb-card {
    width: 100%;
    height: 150px; /* 개별 카드 높이 */
    border-radius: 16px;
    overflow: hidden;
    background: #e2e8f0;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sb-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 왼쪽 컬럼: 위 -> 아래 스크롤 */
.scroll-down {
    animation: scrollDown 30s linear infinite; /* 카드가 20장으로 많으므로 시간을 늘려 속도 조절 */
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%); /* 정확히 원본 1세트 분량만큼만 이동 후 루프 */
    }
    100% {
        transform: translateY(0);
    }
}

/* 오른쪽 컬럼: 밑 -> 위 스크롤 */
.scroll-up {
    animation: scrollUp 30s linear infinite;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%); /* 정확히 원본 1세트 분량만큼만 이동 후 루프 */
    }
}

/* 마우스 호버 시 일시 정지 */
.sb-column:hover {
    animation-play-state: paused;
}