@charset "utf-8";
/* ==========================================================================
 * main-carousel.css
 * 2026-03-25 12:20:00 r034
 *
 * [r034]
 * - 추천평/쇼츠/배너 공통 캐러셀
 * - 기존 will-change:transform 제거
 * - JS 실패 시에도 최소 레이아웃 유지
 * ========================================================================== */

#erum-main-page .carousel-head-tools{
    display:flex;
    align-items:center;
    gap:8px;
}

#erum-main-page .review-card-carousel .bbs-list-hd,
#erum-main-page .shorts-carousel .bbs-list-hd,
#erum-main-page .erum-banner-carousel .bbs-list-hd{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding-bottom:8px;
    margin-bottom:8px;
    border-bottom:1px solid #dcdcdc;
}

#erum-main-page .review-card-carousel__nav,
#erum-main-page .shorts-carousel__nav,
#erum-main-page .erum-banner-carousel__nav{
    display:flex;
    gap:6px;
}

#erum-main-page .review-card-carousel__btn,
#erum-main-page .shorts-carousel__btn,
#erum-main-page .erum-banner-carousel__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    padding:0;
    border:1px solid #d6d6d6;
    background:#fff;
    color:#333;
    font-size:14px;
    line-height:1;
    cursor:pointer;
    box-sizing:border-box;
}

#erum-main-page .review-card-carousel__btn[disabled],
#erum-main-page .shorts-carousel__btn[disabled],
#erum-main-page .erum-banner-carousel__btn[disabled]{
    opacity:.35;
    cursor:default;
}

#erum-main-page .review-card-carousel__viewport,
#erum-main-page .shorts-carousel__viewport,
#erum-main-page .erum-banner-carousel__viewport{
    overflow:hidden;
    width:100%;
}

#erum-main-page .review-card-carousel__track,
#erum-main-page .shorts-carousel__track,
#erum-main-page .erum-banner-carousel__track{
    display:flex;
    gap:12px;
    align-items:stretch;
}

#erum-main-page .review-card-carousel__slide,
#erum-main-page .shorts-carousel__slide,
#erum-main-page .erum-banner-carousel__slide{
    box-sizing:border-box;
    min-width:0;
    flex:0 0 auto;
}

/* JS 미적용 fallback */
@media all and (max-width:412px){
    #erum-main-page .review-card-carousel__slide{
        width:calc((100% - 12px) / 2);
        min-width:calc((100% - 12px) / 2);
        max-width:calc((100% - 12px) / 2);
    }

    #erum-main-page .erum-banner-carousel__slide{
        width:100%;
        min-width:100%;
        max-width:100%;
    }
}

@media all and (min-width:413px) and (max-width:767px){
    #erum-main-page .review-card-carousel__slide{
        width:calc((100% - 24px) / 3);
        min-width:calc((100% - 24px) / 3);
        max-width:calc((100% - 24px) / 3);
    }

    #erum-main-page .erum-banner-carousel__slide{
        width:calc((100% - 12px) / 2);
        min-width:calc((100% - 12px) / 2);
        max-width:calc((100% - 12px) / 2);
    }
}

@media all and (min-width:768px){
    #erum-main-page .review-card-carousel__slide{
        width:calc((100% - 48px) / 5);
        min-width:calc((100% - 48px) / 5);
        max-width:calc((100% - 48px) / 5);
    }

    #erum-main-page .erum-banner-carousel__slide{
        width:calc((100% - 24px) / 3);
        min-width:calc((100% - 24px) / 3);
        max-width:calc((100% - 24px) / 3);
    }
}

@media all and (max-width:640px){
    #erum-main-page .review-card-carousel .bbs-list-hd,
    #erum-main-page .shorts-carousel .bbs-list-hd,
    #erum-main-page .erum-banner-carousel .bbs-list-hd{
        padding-bottom:7px;
        margin-bottom:7px;
    }
}

@media all and (max-width:767px){
    #erum-main-page .review-card-carousel__btn,
    #erum-main-page .shorts-carousel__btn,
    #erum-main-page .erum-banner-carousel__btn{
        width:28px;
        height:28px;
        font-size:13px;
    }
}