/* ctrl_dots_bar - 화살표 + 점 + 재생/정지 + 진행바 통합형 */
/* 진행바 폭: --ctrl-bar-width (block.php에서 control_set_bar_width로 주입, 기본 700px) */

.MAIN_TOP_TOTAL .control_set.ctrl_dots_bar {
    position: absolute;
    z-index: 20;
    pointer-events: auto;
}

/* 전체 = 컨트롤(auto) + 진행바(폭 지정) 가로 배치 */
.MAIN_TOP_TOTAL .control_set.ctrl_dots_bar .ctrl_inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 4px;
}

/* ===== 컨트롤 묶음 (좌화살표·점·정지/재생·우화살표) : auto 폭 ===== */
.MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_nav {
    display: flex;
    align-items: center;
    gap: var(--ctrl-gap, 10px);
    flex: 0 0 auto;
}

/* 화살표 위로 오프셋 (좌·우 둘 다) — 양수 입력 시 위로 */
.MAIN_TOP_TOTAL .ctrl_dots_bar .btn_prev,
.MAIN_TOP_TOTAL .ctrl_dots_bar .btn_next {
    transform: translateY(calc(-1 * var(--ctrl-arrow-up, 0px)));
}

/* 버튼 공통 (화살표 = arrow-size, 정지/재생 = icon-size) */
.MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_btn {
    width: auto;
    height: auto;
    min-width: 1em;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
    transition: opacity 0.3s;
}
/* 화살표 크기 */
.MAIN_TOP_TOTAL .ctrl_dots_bar .btn_prev,
.MAIN_TOP_TOTAL .ctrl_dots_bar .btn_next {
    font-size: var(--ctrl-arrow-size, 18px);
}
/* 정지/재생 아이콘 크기 */
.MAIN_TOP_TOTAL .ctrl_dots_bar .btn_pause,
.MAIN_TOP_TOTAL .ctrl_dots_bar .btn_play {
    font-size: var(--ctrl-icon-size, 18px);
}
.MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_btn:hover { opacity: 0.7; }
.MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_btn i { font-size: inherit; color: inherit; line-height: 1; }
.MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_btn::before,
.MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_btn::after { content: none !important; display: none !important; }

/* 정지 짝대기 (icon-size에 비례) */
.MAIN_TOP_TOTAL .ctrl_dots_bar .btn_pause { gap: 0.14em; }
.MAIN_TOP_TOTAL .ctrl_dots_bar .pause_bar {
    display: block;
    width: 0.16em;
    height: 0.7em;
    background: #fff;
    border-radius: 1px;
}

/* ===== 점(dots) 페이지네이션 ===== */
.MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_pagination {
    display: flex;
    align-items: center;
}
.MAIN_TOP_TOTAL .ctrl_dots_bar .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    width: auto;
}
.MAIN_TOP_TOTAL .ctrl_dots_bar .swiper-pagination .swiper-pagination-bullet {
    width: var(--ctrl-dot-size, 7px) !important;
    height: var(--ctrl-dot-size, 7px) !important;
    margin: 0 !important;
    background: rgba(255,255,255,0.45);
    opacity: 1;
    border-radius: 50%;
    transition: background 0.3s, width 0.3s, height 0.3s;
}
.MAIN_TOP_TOTAL .ctrl_dots_bar .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
}

/* ===== 진행바(플레이바) : 폭 지정 영역 (PC 기본 700px) ===== */
.MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_playbar {
    flex: 0 0 auto;
    width: var(--ctrl-bar-width, 700px);
    max-width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.MAIN_TOP_TOTAL .ctrl_dots_bar .playbar_progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--primary, #2ca96a);
}
.MAIN_TOP_TOTAL .ctrl_dots_bar.autoplay_running .playbar_progress {
    animation: ctrl_dots_progress var(--swiper-autoplay-delay, 5000ms) linear forwards;
}
@keyframes ctrl_dots_progress {
    from { width: 0%; }
    to { width: 100%; }
}

/* ===== 모바일 : 진행바는 inner 안에서 100% ===== */
@media screen and (max-width: 768px) {
    .MAIN_TOP_TOTAL .control_set.ctrl_dots_bar {
        /* inner 안일 때 .control_inner 폭(=inner)에 맞춰 100% 채우도록 */
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100%;
    }
    .MAIN_TOP_TOTAL .control_set.ctrl_dots_bar .ctrl_inner {
        gap: 10px;
        padding: 10px 0;
    }
    .MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_nav { gap: 8px; }
    .MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_btn { width: 26px; height: 26px; font-size: 16px; }
    /* 진행바 폭 강제 100% (inner 기준 꽉 채움) */
    .MAIN_TOP_TOTAL .ctrl_dots_bar .ctrl_playbar {
        flex: 1 1 auto;
        width: auto;
    }
}