/**
 * Carousel Component Styles
 * 숨카(SUMCAR) 프로젝트
 */

/* ========================================
   Carousel Container
   ======================================== */
.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ========================================
   Viewport & Track
   ======================================== */
.carousel__viewport {
    overflow: hidden;
    width: 100%;
}

.carousel__track {
    display: flex;
    transition: transform 350ms ease;
    transition: transform var(--transition-slow, 350ms ease);
}

.carousel__track.is-dragging {
    transition: none;
    cursor: grabbing;
}

/* ========================================
   Items
   ======================================== */
.carousel__item {
    flex: 0 0 33.333333%; /* 기본 3개 보임 */
    padding: 0 12px;
    padding: 0 var(--space-12, 12px);
    box-sizing: border-box;
}

/* 태블릿: 2개 보임 */
@media (max-width: 991px) and (min-width: 768px) {
    .carousel__item {
        flex: 0 0 50%;
    }
}

/* 모바일: 1개 보임 */
@media (max-width: 767px) {
    .carousel__item {
        flex: 0 0 100%;
    }
}

/* 이미지 아이템 */
.carousel__item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    border-radius: var(--radius-xl, 20px);
}

/* ========================================
   Navigation Buttons
   ======================================== */
.carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 9999px;
    border-radius: var(--radius-full, 9999px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-card, 0 4px 12px rgba(0, 0, 0, 0.1));
    cursor: pointer;
    transition: all 250ms ease;
    transition: all var(--transition-base, 250ms ease);
    z-index: 10;
}

.carousel__btn:hover {
    background-color: #00B8C6;
    background-color: var(--c-primary, #00B8C6);
    transform: translateY(-50%) scale(1.1);
}

.carousel__btn:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel__btn svg {
    width: 24px;
    height: 24px;
    stroke: #0E0E0E;
    stroke: var(--c-bg, #0E0E0E);
}

.carousel__btn:hover svg {
    stroke: #FFFFFF;
}

.carousel__btn--prev {
    left: 16px;
}

.carousel__btn--next {
    right: 16px;
}

/* Disabled state */
.carousel__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   Dots Indicator
   ======================================== */
.carousel__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    gap: var(--space-8, 8px);
    margin-top: 24px;
    margin-top: var(--space-24, 24px);
}

.carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    border-radius: var(--radius-full, 9999px);
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 250ms ease;
    transition: all var(--transition-base, 250ms ease);
}

.carousel__dot:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.2);
}

.carousel__dot.is-active {
    width: 24px;
    background-color: #00B8C6;
    background-color: var(--c-primary, #00B8C6);
}

.carousel__dot:focus {
    outline: 2px solid #00B8C6;
    outline: 2px solid var(--c-primary, #00B8C6);
    outline-offset: 2px;
}

/* ========================================
   Mobile Adjustments
   ======================================== */
@media (max-width: 767px) {
    .carousel__btn {
        width: 40px;
        height: 40px;
    }

    .carousel__btn svg {
        width: 20px;
        height: 20px;
    }

    .carousel__btn--prev {
        left: 8px;
    }

    .carousel__btn--next {
        right: 8px;
    }

    .carousel__dots {
        margin-top: 16px;
    }
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .carousel__track {
        transition: none;
    }

    .carousel__btn,
    .carousel__dot {
        transition: none;
    }
}

/* ========================================
   Variants
   ======================================== */

/* Compact Carousel (no padding) */
.carousel--compact .carousel__item {
    padding: 0;
}

/* Full Width Carousel */
.carousel--full-width .carousel__item {
    flex: 0 0 100%;
}