/* MAIN_TOP_TOTAL - 기본 스타일 (MAIN_TOP1_JLS 스타일) */

.MAIN_TOP_TOTAL {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;
}

/* 슬라이드 기본 - height는 block.php에서 동적 설정 */
.MAIN_TOP_TOTAL .slide_wrap {
    position: relative;
    width: 100%;
    /* height: 동적 설정 (fixed, clamp, ratio, fullscreen 모드) */
}

.MAIN_TOP_TOTAL .slide_wrap .swiper {
    width: 100%;
    height: 100%;
}

.MAIN_TOP_TOTAL .slide_wrap .swiper-slide {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.MAIN_TOP_TOTAL .slide_wrap .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 컨트롤 영역 - z-index, pointer-events는 block.php 동적 CSS에서 관리 */
.MAIN_TOP_TOTAL .control_wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
/* 개별 파츠(arrows, pagination, playbar)에만 pointer-events: auto 부여 (아래 개별 규칙) */

.MAIN_TOP_TOTAL .control_inner {
    position: relative;
    height: 100%;
}

/* 화살표 기본 스타일 (스킨에서 덮어씀) */
.MAIN_TOP_TOTAL .arrows_wrap {
    pointer-events: none;
    --arrow-size: 24px; /* 화살표 폰트 크기 (모달에서 설정) */
}

.MAIN_TOP_TOTAL .swiper-button-prev,
.MAIN_TOP_TOTAL .swiper-button-next {
    pointer-events: auto;
    position: relative;
    cursor: pointer;
    width: calc(var(--arrow-size) * 2.1);
    height: calc(var(--arrow-size) * 2.1);
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.MAIN_TOP_TOTAL .swiper-button-prev::after,
.MAIN_TOP_TOTAL .swiper-button-next::after {
    display: none;
}

.MAIN_TOP_TOTAL .swiper-button-prev::before {
    content: "\ec49";
    font-family: unicons-line;
    color: #fff;
    font-size: var(--arrow-size);
    line-height: 1;
}

.MAIN_TOP_TOTAL .swiper-button-next::before {
    content: "\eb9f";
    font-family: unicons-line;
    color: #fff;
    font-size: var(--arrow-size);
    line-height: 1;
}

/* 페이지네이션 기본 스타일 */
.MAIN_TOP_TOTAL .pagination_wrap {
    pointer-events: auto;
}

.MAIN_TOP_TOTAL .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
}

.MAIN_TOP_TOTAL .swiper-pagination-bullet {
    cursor: pointer;
    opacity: 0.5 !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #fff !important;
    border-radius: 10px !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.MAIN_TOP_TOTAL .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background-color: #fff !important;
}

/* 플레이바 기본 스타일 */
.MAIN_TOP_TOTAL .playbar_wrap {
    pointer-events: auto;
}

/* 레이어 영역 (레거시 지원) */
.MAIN_TOP_TOTAL .layer_wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
}

/* layer_wrap 내부 개별 요소에서 pointer-events: auto 설정 */

.MAIN_TOP_TOTAL .layer_inner {
    height: 100%;
    display: flex;
    align-items: center;
}

/* 반응형 */
@media screen and (max-width: 1024px) {
    .MAIN_TOP_TOTAL .arrows_wrap.pos_side .swiper-button-prev,
    .MAIN_TOP_TOTAL .arrows_wrap.pos_side .swiper-button-next {
        opacity: 0.7;
    }
}

@media screen and (max-width: 768px) {
    /* 모바일 기본 높이 */
    .MAIN_TOP_TOTAL .slide_wrap {
        height: 300px;
    }
}

/* 빈 슬라이드 메시지 */
.MAIN_TOP_TOTAL .empty_li {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 14px;
}
