/* stack_bbstabmix_v1 - 스택 + 탭믹스 스와이퍼 (sw_tab_filter_v1 CSS는 별도 로드됨) */

.stack_bbstabmix_v1 .stackbm_grid {
    display: grid;
    align-items: stretch;
}

.stack_bbstabmix_v1 .stack_item_wrapper {
    min-width: 0;
}
.stack_bbstabmix_v1 .stack_item {
    height: 100%;
    min-width: 0;
    position: relative;
}

/* 슬롯 헤더 (제목/부제목/설정톱니/우측탭) */
.stack_bbstabmix_v1 .stackbm_header {
    position: relative;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.stack_bbstabmix_v1 .stackbm_header_txt {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stack_bbstabmix_v1 .stackbm_title {
    font-size: clamp(18px, 1.6vw, 26px);
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}
.stack_bbstabmix_v1 .stackbm_subtitle {
    font-size: clamp(13px, 1vw, 16px);
    color: #6b7280;
}
/* ★ 타이틀(헤더) 영역 숨김 — 상단 여백 제거 (관리자는 톱니만 떠 있게) */
.stack_bbstabmix_v1 .stackbm_header.stackbm_header_hidden {
    margin-bottom: 0;
    min-height: 0;
    gap: 0;
    /* 관리자 톱니가 레이아웃 공간을 차지하지 않도록 absolute 띄움 */
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
}
/* ★ 칸 타이틀 영역 정렬 모드 */
.stack_bbstabmix_v1 .stackbm_header.stackbm_hdr_center { justify-content: center; text-align: center; }
.stack_bbstabmix_v1 .stackbm_header.stackbm_hdr_center .stackbm_header_txt { align-items: center; }
.stack_bbstabmix_v1 .stackbm_header.stackbm_hdr_between { justify-content: space-between; }
/* ★ 칸 더보기 버튼 (기본 = + 텍스트형) */
.stack_bbstabmix_v1 .stackbm_more {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; color: #555; text-decoration: none;
    line-height: 1; white-space: nowrap;
}
.stack_bbstabmix_v1 .stackbm_more:hover { color: #111; }
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_text { font-weight: 500; }
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_arrow i { font-size: 16px; }

/* 디자인: pill (자세히 보기 + 화살표) */
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_pill {
    padding: 6px 14px; border: 1px solid #e2e2e2; border-radius: 50px;
    font-size: 12px; color: #555; gap: 2px;
}
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_pill:hover { background: #f7f7f7; color: #111; }
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_pill i { font-size: 15px; }

/* 디자인: custom (자체) — 인라인 style이 모든 시각속성 지정, 기본값만 최소 */
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_custom {
    gap: 4px; transition: all .2s ease;
}
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_custom:hover { opacity: .85; }
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_custom i { line-height: 0; }

/* 더보기와 톱니가 함께 있을 때: 톱니는 더보기 다음 */
.stack_bbstabmix_v1 .stackbm_more + .stack_edit_icon { margin-left: 6px; }
/* hdr_between 일 때 더보기는 auto 마진 해제 (space-between이 배치) */
.stack_bbstabmix_v1 .stackbm_header.stackbm_hdr_between .stackbm_more { margin-left: 0; }

/* ★ 더보기 세로 정렬 (타이틀 영역 안에서 상/중/하) — align-self (헤더 align-items 무관) */
.stack_bbstabmix_v1 .stackbm_more { align-self: flex-start; } /* 기본=상단 */
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_v_center { align-self: center; }
.stack_bbstabmix_v1 .stackbm_more.stackbm_more_v_bottom { align-self: flex-end; }

/* ★ MORE 샘플(more1~11) 디자인 — 헤더 안 인라인 배치 (loader의 absolute 무력화) */
.stack_bbstabmix_v1 .stackbm_more_sample { margin-left: auto; display: inline-flex; align-items: center; align-self: flex-start; }
.stack_bbstabmix_v1 .stackbm_more_sample.stackbm_more_v_center { align-self: center; }
.stack_bbstabmix_v1 .stackbm_more_sample.stackbm_more_v_bottom { align-self: flex-end; }
.stack_bbstabmix_v1 .stackbm_more_sample .hymore_wrap { position: static !important; right: auto !important; bottom: auto !important; float: none !important; }
.stack_bbstabmix_v1 .stackbm_more_sample + .stack_edit_icon { margin-left: 6px; }
.stack_bbstabmix_v1 .stackbm_header.stackbm_hdr_between .stackbm_more_sample { margin-left: 0; }
/* ★ 슬롯 톱니(설정) — 슬롯 우측 "하단"에 절대배치 (더보기/위젯관리 버튼과 겹침 방지, 눈에 띄게) */
.stack_bbstabmix_v1 .stack_item { position: relative; }
.stack_bbstabmix_v1 .stack_edit_icon {
    position: absolute;
    top: auto; bottom: 8px; right: 8px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin-left: 0;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    opacity: .85;
    transition: opacity .15s;
}
.stack_bbstabmix_v1 .stack_item:hover .stack_edit_icon { opacity: 1; } /* 슬롯 hover 시 또렷하게 */
.stack_bbstabmix_v1 .stack_edit_icon:hover { background: #d97706; opacity: 1; transform: scale(1.1); }
.stack_bbstabmix_v1 .stack_edit_icon { transition: background .15s, opacity .15s, transform .15s; }
.stack_bbstabmix_v1 .stack_edit_icon i { font-size: 18px; }
/* 톱니가 absolute가 되었으므로 더보기/샘플의 톱니 인접 마진 보정 불필요 (제거 효과) */
.stack_bbstabmix_v1 .stackbm_more + .stack_edit_icon,
.stack_bbstabmix_v1 .stackbm_more_sample + .stack_edit_icon { margin-left: 0; }

/* ============================================================
   ★ 탭 디자인 (위치 2종 + 스타일 2종 + 라벨컬러)
   ============================================================ */

/* 공통 — sw_tab_filter_v1 CSS의 .swtf_tabs/.swtf_tab 기본 디자인을 덮어씀
   (해당 CSS는 .sw_tab_filter_v1 클래스로 스코프돼 있어 우리 위젯엔 미적용 — 명시적 재정의 필요) */
.stack_bbstabmix_v1 .swtf_tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--swtf-tab-gap, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
    --swtf-tab-color-off: #94a3b8;
    --swtf-tab-color-on: #111;
    --swtf-tab-line-color: #111;
    --swtf-tab-line-height: 2px;
    --swtf-tab-pad-y: 10px;
    --swtf-tab-pad-x: 4px;
    --swtf-tab-bottom-line-color: #e5e7eb;
    --swtf-tab-btn-bg-off: #f1f5f9;
    --swtf-tab-btn-color-off: #64748b;
    --swtf-tab-btn-bg-on: #111;
    --swtf-tab-btn-color-on: #fff;
    --swtf-tab-btn-radius: 20px;
    --swtf-tab-btn-pad-y: 8px;
    --swtf-tab-btn-pad-x: 16px;
    --swtf-tab-btn-border-off: 1px solid transparent;
}
.stack_bbstabmix_v1 .swtf_tab {
    position: relative;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--swtf-tab-color-off);
    padding: var(--swtf-tab-pad-y) var(--swtf-tab-pad-x);
    transition: color .15s, background .15s, border-color .15s;
    line-height: 1.2;
    box-sizing: border-box;
}
.stack_bbstabmix_v1 .swtf_tab:hover { color: var(--swtf-tab-color-on); }

/* ── ★ 제목 ~ 더보기 사이 데코 (점 + 라인) — title_deco 옵션 켠 슬롯만 출력됨 ── */
.stack_bbstabmix_v1 .stackbm_header.stackbm_has_deco .stackbm_header_txt { flex: 0 1 auto; }
.stack_bbstabmix_v1 .stackbm_title_deco {
    flex: 1 1 auto;
    min-width: 40px;
    display: flex;
    align-items: center;
    /* 상단 기준 고정 — 제목이 2줄이 돼도 데코 위치가 흔들리지 않음. 오프셋으로 미세조정 */
    align-self: flex-start;
    margin-top: var(--stackbm-deco-top, 16px);
    /* 가로 확장: +값을 주면 시작점이 왼쪽으로 당겨지며 라인이 길어짐 */
    margin-left: calc(16px - var(--stackbm-deco-extend, 0px));
    margin-right: 16px;
}
.stack_bbstabmix_v1 .stackbm_title_deco::before {
    content: "";
    flex: 0 0 auto;
    width: var(--stackbm-deco-dot-size, 8px);
    height: var(--stackbm-deco-dot-size, 8px);
    border-radius: 50%;
    background: var(--stackbm-deco-dot, #333);
}
.stack_bbstabmix_v1 .stackbm_title_deco::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: var(--stackbm-deco-gap, 0px); /* 점~라인 사이 여백 */
    background: var(--stackbm-deco-line, #ddd);
}
/* 라인만 모드: 점 숨김 */
.stack_bbstabmix_v1 .stackbm_title_deco_line::before { display: none; }
@media (max-width: 768px) {
    .stack_bbstabmix_v1 .stackbm_title_deco { margin: 0 10px; min-width: 20px; }
}

/* ── 위치: 제목 하단 (가로 100%) ── */
.stack_bbstabmix_v1 .swtf_tabs_below {
    width: 100%;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--swtf-tab-bottom-line-color);
}
.stack_bbstabmix_v1 .swtf_tabs_below.swtf_tabs_align_center { justify-content: center; }
.stack_bbstabmix_v1 .swtf_tabs_below.swtf_tabs_align_right  { justify-content: flex-end; }

/* ── 위치: 우측 (자기 크기) — 슬롯 헤더 안에서 인라인 ── */
.stack_bbstabmix_v1 .stackbm_header_with_right_tabs {
    align-items: center;
    flex-wrap: nowrap;
}
.stack_bbstabmix_v1 .stackbm_header_with_right_tabs .stackbm_header_txt {
    flex: 1;
    min-width: 0;
}
.stack_bbstabmix_v1 .swtf_tabs_right {
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
    margin-left: auto;
    border-bottom: 0;
}
@media (max-width: 768px) {
    /* 모바일에서는 우측 탭도 헤더 아래로 떨어뜨림 */
    .stack_bbstabmix_v1 .stackbm_header_with_right_tabs { flex-wrap: wrap; align-items: flex-start; }
    .stack_bbstabmix_v1 .swtf_tabs_right { width: 100%; max-width: 100%; margin-left: 0; margin-top: 8px; }
}

/* ── 스타일: 라인형 (기본) ── */
.stack_bbstabmix_v1 .swtf_tabs_line .swtf_tab {
    border-bottom: var(--swtf-tab-line-height) solid transparent;
    margin-bottom: -1px; /* 외곽 라인과 겹치게 */
}
.stack_bbstabmix_v1 .swtf_tabs_line .swtf_tab.on {
    color: var(--swtf-tab-color-on);
    font-weight: 700;
    border-bottom-color: var(--swtf-tab-line-color);
}
/* 라벨 컬러가 있으면 ON 글자색을 라벨 컬러로 + 라인색도 동일 */
.stack_bbstabmix_v1 .swtf_tabs_line .swtf_tab.on.has_label_color {
    color: var(--swtf-tab-label-color, var(--swtf-tab-color-on));
    border-bottom-color: var(--swtf-tab-label-color, var(--swtf-tab-line-color));
}
/* 우측 위치 + 라인형 → 외곽 라인 없음 (자기 박스 크기만큼) */
.stack_bbstabmix_v1 .swtf_tabs_right.swtf_tabs_line { border-bottom: 0; }
.stack_bbstabmix_v1 .swtf_tabs_right.swtf_tabs_line .swtf_tab { margin-bottom: 0; }

/* ── 활성 탭 MORE+ 버튼 (옵션 tab_more_btn=1 슬롯만 출력됨 — 미사용 시 이 규칙은 매칭될 요소 없음) ── */
.stack_bbstabmix_v1 .swtf_tab .swtf_tab_more {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    max-width: 0;                 /* 접힌 상태 */
    opacity: 0;
    margin-left: 0;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    background: var(--swtf-tab-more-bg, #111);
    color: var(--swtf-tab-more-color, #fff);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 999px;         /* 알약 */
    transform: translateX(-4px);
    transition: max-width .35s ease, opacity .3s ease .05s, margin-left .35s ease, padding .35s ease, transform .35s ease;
    cursor: pointer;
}
.stack_bbstabmix_v1 .swtf_tab.on .swtf_tab_more {
    max-width: 90px;              /* 펼침 — 문구 길이 여유 */
    opacity: 1;
    margin-left: 8px;
    padding: 8px 10px;
    transform: translateX(0);
}
.stack_bbstabmix_v1 .swtf_tab .swtf_tab_more:hover { filter: brightness(1.35); }
/* 라벨 컬러 탭이면 MORE+ 배경도 라벨 컬러 따라감 (별도 배경색 지정 시 그 값 우선) */
.stack_bbstabmix_v1 .swtf_tab.on.has_label_color .swtf_tab_more {
    background: var(--swtf-tab-more-bg, var(--swtf-tab-label-color, #111));
}

/* ── 스타일: 버튼형 ── */
.stack_bbstabmix_v1 .swtf_tabs_button {
    border-bottom: 0 !important;
}
.stack_bbstabmix_v1 .swtf_tabs_button .swtf_tab {
    background: var(--swtf-tab-btn-bg-off);
    color: var(--swtf-tab-btn-color-off);
    border: var(--swtf-tab-btn-border-off);
    border-radius: var(--swtf-tab-btn-radius);
    padding: var(--swtf-tab-btn-pad-y) var(--swtf-tab-btn-pad-x);
    margin-bottom: 0;
}
.stack_bbstabmix_v1 .swtf_tabs_button .swtf_tab.on {
    background: var(--swtf-tab-btn-bg-on);
    color: var(--swtf-tab-btn-color-on);
    border-color: transparent;
    font-weight: 600;
}
/* 라벨 컬러가 있으면 ON 배경을 라벨 컬러로 */
.stack_bbstabmix_v1 .swtf_tabs_button .swtf_tab.on.has_label_color {
    background: var(--swtf-tab-label-color, var(--swtf-tab-btn-bg-on));
    color: #fff;
}

/* 슬롯 내부 (sw_tab_filter_v1 디자인 그대로) */
.stack_bbstabmix_v1 .stackbm_slot_inner { min-width: 0; }

/* 빈 슬롯 */
.stack_bbstabmix_v1 .stackbm_empty_slot { min-height: 1px; }

/* swtf_empty 박스 (CSS 누락 시 fallback) */
.stack_bbstabmix_v1 .swtf_empty {
    padding: 40px 20px;
    text-align: center;
    color: #9ca3af;
    background: #f9fafb;
    border-radius: 8px;
}

/* 관리자 hover 점선 (latest.skin.php에서 이미 정의되지만 안전망) */
.stack_bbstabmix_v1.admin_div_stack:hover {
    outline: 2px dashed #10b981 !important;
    outline-offset: -2px;
}

/* 스택 뱃지 (전체 설정) — 가로 100% 깔림 방지: inline-flex + width:auto + 명시 위치 */
.stack_bbstabmix_v1 .stack_badge,
.stack_bbstabmix_v1 .stack_widget_link {
    position: absolute !important;
    top: 6px;
    z-index: 50;
    display: none;
    width: auto !important;
    max-width: max-content;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
    white-space: nowrap;
    box-sizing: border-box;
}
.stack_bbstabmix_v1 .stack_badge {
    left: 6px;
    background: #10b981;
    color: #fff;
    text-decoration: none;
}
.stack_bbstabmix_v1 .stack_widget_link {
    left: auto;
    right: 6px;
    background: #3b82f6;
    color: #fff;
    text-decoration: none;
}
.stack_bbstabmix_v1.admin_div_stack .stack_badge,
.stack_bbstabmix_v1.admin_div_stack .stack_widget_link { display: inline-flex !important; }
.stack_bbstabmix_v1.admin_div_stack:hover .stack_badge,
.stack_bbstabmix_v1.admin_div_stack:hover .stack_widget_link { opacity: 1; }
.stack_bbstabmix_v1 .stack_badge .badge_hint { opacity: .8; font-size: 10px; }

/* 모바일 그리드 (slot_gap 조정) */
@media (max-width: 768px) {
    .stack_bbstabmix_v1 .stackbm_grid {
        grid-template-columns: 1fr !important;
        /* ★ 모바일 상하 간격도 설정한 '칸 간격'(--stackbm-gap)을 따름. 미설정 시 24px 폴백 */
        gap: var(--stackbm-gap, 24px) !important;
    }
    .stack_bbstabmix_v1 .stackbm_header { margin-bottom: 12px; }
}

/* ★ 렌더 모드: 단순 latest / 위젯 그대로 (스와이퍼 wrapper 없음) */
.stack_bbstabmix_v1 .stackbm_simple_slot {
    width: 100%;
    min-width: 0;
}
.stack_bbstabmix_v1 .stackbm_simple_slot > * {
    max-width: 100%;
}

/* ★ 단순 latest 가로 배열 (simple_cols 설정한 슬롯만) — 카드를 가로 N칸 그리드로 */
.stack_bbstabmix_v1 .stackbm_simple_slot.stackbm_simple_grid {
    display: grid;
    grid-template-columns: repeat(var(--sbm-cols, 3), 1fr);
    gap: var(--sbm-gap, 20px);
    align-items: stretch;
}
.stack_bbstabmix_v1 .stackbm_simple_grid > * { min-width: 0; }
/* 스킨이 붙인 swiper-slide 폭 제한(375px 등) 무력화 — 그리드 칸에 꽉 차게 */
.stack_bbstabmix_v1 .stackbm_simple_grid > .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
}
/* "등록된 내용이 없습니다" 등은 전체 칸 차지 */
.stack_bbstabmix_v1 .stackbm_simple_grid > .empty_li { grid-column: 1 / -1; }
/* 태블릿 (769~991px) — 값은 위젯이 인라인 변수로 항상 확정 출력 */
@media (max-width: 991px) and (min-width: 769px) {
    .stack_bbstabmix_v1 .stackbm_simple_grid { grid-template-columns: repeat(var(--sbm-cols-t, 2), 1fr) !important; }
}
/* 모바일 */
@media (max-width: 768px) {
    .stack_bbstabmix_v1 .stackbm_simple_grid { grid-template-columns: repeat(var(--sbm-cols-m, 1), 1fr) !important; }
}

/* ★ 박스 높이 100% 모드 (좌측 스택 슬롯 높이에 맞춰 채움) */
/* :has()는 일부 구버전 브라우저 미지원 → 직접 stack_item_wrapper에 height:100% 강제 */
.stack_bbstabmix_v1 .stack_item_wrapper,
.stack_bbstabmix_v1 .stack_item {
    height: 100%;
}
.stack_bbstabmix_v1 .stackbm_simple_slot.stackbm_full_height {
    height: 100%;
    /* 인라인 style="height:calc(...)" 가 박혀있으면 그게 우선 적용 (CSS 우선순위) */
    box-sizing: border-box;
}
/* 자식(.TOTAL_month)이 부모 높이 받도록 */
.stack_bbstabmix_v1 .stackbm_simple_slot.stackbm_full_height > .TOTAL_month {
    height: 100%;
}

/* ============================================================
   ★ latest 스와이퍼 컨트롤 (화살표 / 페이징·도트) 커스터마이징
   - 슬롯 인라인 style 의 --swctl-* 변수로 색/크기 제어
   - 클래스: swctrl_top|bottom / swarrow_inline|sides / swpaging_bar|dots
            sw_no_arrows / sw_no_paging
   ============================================================ */

/* 화살표 동그라미: 크기/색/배경/테두리 변수화
   아이콘 글자도 버튼 크기에 비례(40%) — 크기 키우면 화살표 아이콘도 같이 커짐 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .btn-prev,
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .btn-next {
    width:  var(--swctl-arrow-size, clamp(44px, calc(1.25vw + 40px), 60px));
    height: var(--swctl-arrow-size, clamp(44px, calc(1.25vw + 40px), 60px));
    /* 아이콘 크기: 직접 지정(--swctl-arrow-icon-size) 우선, 없으면 버튼 크기의 40% 자동 비례 */
    font-size: var(--swctl-arrow-icon-size, calc(var(--swctl-arrow-size, clamp(44px, calc(1.25vw + 40px), 60px)) * 0.4)) !important;
    color:        var(--swctl-arrow-color, #374151);
    background:   var(--swctl-arrow-bg, #fff);
    border-color: var(--swctl-arrow-border, #d1d5db);
}
/* 아이콘(i 태그)이 자체 크기를 갖지 않도록 버튼 크기 상속 강제 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .btn-prev i,
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .btn-next i {
    font-size: inherit !important;
}

/* ★ 슬라이드가 다 들어와서 넘길 게 없으면(watchOverflow 잠금) 화살표/페이징 숨김
   — 게시물 3개 + PC 3칸 = 숨김, 태블릿 2칸으로 줄면 자동으로 다시 표시 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .btn-prev.swiper-button-lock,
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .btn-next.swiper-button-lock,
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .swiper-pagination.swiper-pagination-lock {
    display: none !important;
}

/* 페이징 바(progressbar) 색 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .swiper-pagination {
    background: var(--swctl-bar-color, #e5e7eb);
}
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap .swiper-pagination .swiper-pagination-progressbar-fill {
    background: var(--swctl-bar-active, #374151);
}

/* 페이징 도트(bullets) — swpaging_dots 모드 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swpaging_dots .swiper-pagination {
    background: transparent !important;
    height: auto;
    display: flex; align-items: center; justify-content: center;
    gap: 7px;
}
/* OFF 도트 = 정원(1:1) — 클래스 중복으로 특이도 올림 + aspect-ratio + flex 축소 금지 3중 강제 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swpaging_dots .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    background: var(--swctl-dot-color, #d1d5db);
    opacity: 1; margin: 0; padding: 0 !important; cursor: pointer; transition: all .2s;
}
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swpaging_dots .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--swctl-dot-active, var(--primary, #2196f3));
    /* 활성 = 3:1 알약 (높이 8px 기준 → 24×8) */
    width: auto !important;
    aspect-ratio: 3 / 1 !important;
    border-radius: 999px !important;
}

/* ★ 우측상단 노치 페이징 패키지 (nt_paging=1 슬롯만) — 도트를 이미지 우측상단 흰 노치 안에 표시
   흰 영역은 도트 개수만큼 자동으로 넓어짐. 좌측/하단 곡선 조각으로 이미지 안쪽으로 파고드는 느낌 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swtf_notch_paging { position: relative; }
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swtf_notch_paging.swpaging_dots .swiper-pagination {
    position: absolute;
    top: var(--swctl-nt-y, 0);
    right: var(--swctl-nt-x, 0);
    left: auto; bottom: auto;
    z-index: 12;
    width: auto !important;
    display: inline-flex; align-items: center; gap: 8px;
    padding: var(--swctl-nt-pad, 11px 16px); /* 도트 기준 흰 영역 패딩 (설정 가능) */
    background: var(--swctl-nt-bg, #fff) !important;
    /* 우상단 직각(0), 좌하단만 크게 라운드 (파고드는 형태) */
    border-radius: 0 0 0 16px;
    height: auto;
}
/* 곡선 조각 — 노치 왼쪽(상단 라인 이어짐) / 노치 아래(우측 라인 이어짐) */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swtf_notch_paging.swpaging_dots .swiper-pagination::before,
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swtf_notch_paging.swpaging_dots .swiper-pagination::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    pointer-events: none;
    background: radial-gradient(circle at 0 100%, transparent 13.5px, var(--swctl-nt-bg, #fff) 14px);
}
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swtf_notch_paging.swpaging_dots .swiper-pagination::before {
    right: 100%; top: 0;
}
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swtf_notch_paging.swpaging_dots .swiper-pagination::after {
    top: 100%; right: 0;
}
/* 노치 모드에선 컨트롤 줄(paging-wrap)에 도트 자리가 비므로 화살표만 정렬 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swtf_notch_paging .paging-wrap { justify-content: flex-end; }

/* 출력 여부 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.sw_no_arrows .btn-wrap { display: none !important; }
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.sw_no_paging .swiper-pagination { display: none !important; }
/* 둘 다 숨김이면 paging-wrap 자체 숨김(여백 제거) */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.sw_no_arrows.sw_no_paging .paging-wrap { display: none !important; }

/* 컨트롤 묶음 위치: 상단 (이미지 위) */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swctrl_top { display: flex; flex-direction: column; }
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swctrl_top .paging-wrap { order: -1; margin-top: 0; margin-bottom: clamp(12px, calc(0.78vw + 9.5px), 20px); }

/* 화살표 좌우 배치(sides): 마스크(content-swiper) 바깥 좌우 거터에 배치.
   - 거터 폭 = 화살표크기 + 여백 만큼 wrap 에 좌우 패딩을 줘서 이미지가 가운데로 들어옴
   - 화살표는 그 거터(패딩) 영역에 절대배치 → 마스크에 안 잘림 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides {
    position: relative;
    /* gutter = 화살표크기 + 간격. 화살표 크기 fallback 은 버튼 width 와 동일해야 함 */
    --swctl-side-gutter: calc(var(--swctl-arrow-size, 48px) + var(--swctl-side-gap, 14px));
    padding-left: var(--swctl-side-gutter);
    padding-right: var(--swctl-side-gutter);
    box-sizing: border-box;
}
/* 화살표 묶음은 레이아웃 래퍼만 (실제 배치는 각 버튼이 거터에 절대배치) */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides .btn-wrap {
    position: static; display: contents;
}
/* 각 화살표를 wrap 의 거터(좌우 패딩) 한가운데에 절대배치 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides .btn-prev,
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides .btn-next {
    position: absolute; top: var(--swctl-side-top, 40%);
    transform: translateY(-50%);
    z-index: 6; flex-shrink: 0;
}
/* sides 모드 버튼 크기 fallback = 48px (gutter 계산과 일치). 사용자가 크기 지정 시 그 값 사용 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides .btn-prev,
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides .btn-next {
    width:  var(--swctl-arrow-size, 48px);
    height: var(--swctl-arrow-size, 48px);
}
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides .btn-prev {
    left: calc((var(--swctl-side-gutter) - var(--swctl-arrow-size, 48px)) / 2);
}
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides .btn-next {
    right: calc((var(--swctl-side-gutter) - var(--swctl-arrow-size, 48px)) / 2);
}
/* 모바일 등 거터가 부담되면 거터 좁힘 */
@media (max-width: 640px) {
    .stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides {
        --swctl-side-gap: 4px;
    }
}
/* sides 모드: paging-wrap 의 btn-wrap 자리는 비고 페이징만 → 중앙정렬 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides .paging-wrap { justify-content: center; position: static; }

/* ── ★ 좌우(sides) 배치 방식 확장 ──
   inside  = 거터 제거 → 스와이퍼 마스크가 슬롯 100% 차지, 화살표는 이미지 위 가장자리 오버레이
   outside = 거터 제거 → 마스크 슬롯 100% 유지, 화살표만 슬롯 바깥으로 오프셋 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides.swarrow_sides_inside,
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides.swarrow_sides_outside {
    padding-left: 0;
    padding-right: 0;
}
/* inside: 이미지 안쪽 가장자리에 겹침 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides_inside .btn-prev { left: var(--swctl-side-inset, 12px); }
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides_inside .btn-next { right: var(--swctl-side-inset, 12px); }
/* outside: 슬롯 밖으로 (화살표 크기 + 간격 만큼) — 컨테이너 여백 공간에 표시됨 */
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides_outside .btn-prev { left: calc(-1 * var(--swctl-side-gutter)); }
.stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides_outside .btn-next { right: calc(-1 * var(--swctl-side-gutter)); }
/* 모바일: 화면 밖으로 나가버리므로 outside는 안쪽 오버레이로 자동 폴백 */
@media (max-width: 768px) {
    .stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides_outside .btn-prev { left: 8px; }
    .stack_bbstabmix_v1 .sw_tab_freelink_swiper_wrap.swarrow_sides_outside .btn-next { right: 8px; }
}