/* 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;
}

/* 슬롯 헤더 (제목/부제목/설정톱니/우측탭) */
.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 .stack_edit_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    margin-left: auto;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    cursor: pointer;
    border: 1px solid #fcd34d;
}
.stack_bbstabmix_v1 .stack_edit_icon:hover { background: #fde68a; }
.stack_bbstabmix_v1 .stack_edit_icon i { font-size: 16px; }

/* ============================================================
   ★ 탭 디자인 (위치 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); }

/* ── 위치: 제목 하단 (가로 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; }

/* ── 스타일: 버튼형 ── */
.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;
        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%;
}

/* ★ 박스 높이 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%;
}