/* ================================================
   bbstab6 - 좌우 분할 카드 스와이퍼 게시판
   좌: 타이틀 + 탭 + 더보기 + 페이징
   우: 카드 Swiper (우측 연장 가능)
   ★ 모든 선택자에 .bbstab6 프리픽스
   ================================================ */

/* 최외곽 - 가로 스크롤 방지 */
.bbstab6 {
  overflow: clip;
}

/* ================================================
   좌우 분할 레이아웃
   ================================================ */
.bbstab6 .bbstab6-layout {
  display: flex;
  gap: clamp(30px, calc(2.34vw + 22.5px), 60px);
  align-items: stretch;
}

/* 왼쪽: 타이틀 + 탭 + 더보기 + 페이징 */
.bbstab6 .bbstab6-left {
  /* flex: 0 0 380px 는 dynamic CSS에서 설정 */
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* 오른쪽: Swiper */
.bbstab6 .bbstab6-right {
  flex: 1;
  min-width: 0;
  overflow: visible;
}

/* ================================================
   타이틀 영역
   ================================================ */
.bbstab6 .bbstab6-titles {
  margin-bottom: clamp(16px, calc(1.17vw + 12.25px), 28px);
}

.bbstab6 .bbstab6-titles .sub_stit1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary, #6366f1);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.bbstab6 .bbstab6-titles .sub_stit2 {
  font-size: clamp(26px, calc(0.78vw + 23.5px), 36px);
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  margin-bottom: 12px;
}

.bbstab6 .bbstab6-titles .sub_stit3 {
  font-size: clamp(14px, calc(0.16vw + 13.5px), 16px);
  color: #64748b;
  line-height: 1.6;
}

.bbstab6 .bbstab6-titles .sub_stit4,
.bbstab6 .bbstab6-titles .sub_stit5 {
  font-size: 14px;
  color: #94a3b8;
  margin-top: 6px;
}

/* ================================================
   탭 버튼 (pill 스타일)
   ================================================ */
.bbstab6 .bbstab6-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(16px, calc(1.17vw + 12.25px), 28px);
}

.bbstab6 .bbstab6-tabs .sw_tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.bbstab6 .bbstab6-tabs .sw_tab:hover {
  border-color: var(--tab-color, var(--primary, #6366f1));
  color: var(--tab-color, var(--primary, #6366f1));
}

.bbstab6 .bbstab6-tabs .sw_tab.on {
  background: var(--tab-color, var(--primary, #1e293b));
  border-color: var(--tab-color, var(--primary, #1e293b));
  color: #fff;
  font-weight: 600;
}

/* ================================================
   더보기 (자세히 보기)
   ================================================ */
.bbstab6 .bbstab6-goto {
  margin-bottom: clamp(20px, calc(1.56vw + 15px), 40px);
}

.bbstab6 .bbstab6-goto .hymore_wrap {
  position: static;
}

.bbstab6 .bbstab6-more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bbstab6 .bbstab6-more-link:hover {
  color: var(--primary, #6366f1);
}

.bbstab6 .bbstab6-more-icon {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  transition: transform 0.2s ease;
}

.bbstab6 .bbstab6-more-link:hover .bbstab6-more-icon {
  transform: translateX(4px);
}

/* ================================================
   ★ 페이징 컨트롤 (좌측 하단)
   ================================================ */
.bbstab6 .bbstab6-paging {
  display: flex;
  align-items: center;
  gap: clamp(12px, calc(0.63vw + 10px), 20px);
  margin-top: auto;
  padding-top: clamp(20px, calc(1.56vw + 15px), 40px);
}

.bbstab6 .bbstab6-btn-wrap {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.bbstab6 .bbstab6-btn-prev,
.bbstab6 .bbstab6-btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bbstab6 .bbstab6-btn-prev:hover,
.bbstab6 .bbstab6-btn-next:hover {
  border-color: #374151;
  background: #374151;
  color: #fff;
}

.bbstab6 .bbstab6-btn-prev.disabled,
.bbstab6 .bbstab6-btn-next.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ── 공통: 아이콘만 보이는 화살표 ── */
.bbstab6.bbstab6-arrow-simple .bbstab6-btn-prev,
.bbstab6.bbstab6-arrow-simple .bbstab6-btn-next,
.bbstab6.bbstab6-arrow-simple_thin .bbstab6-btn-prev,
.bbstab6.bbstab6-arrow-simple_thin .bbstab6-btn-next,
.bbstab6.bbstab6-arrow-arrow .bbstab6-btn-prev,
.bbstab6.bbstab6-arrow-arrow .bbstab6-btn-next,
.bbstab6.bbstab6-arrow-arrow_thin .bbstab6-btn-prev,
.bbstab6.bbstab6-arrow-arrow_thin .bbstab6-btn-next {
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: #9ca3af;
  padding: 0;
}
.bbstab6.bbstab6-arrow-simple .bbstab6-btn-prev:hover,
.bbstab6.bbstab6-arrow-simple .bbstab6-btn-next:hover,
.bbstab6.bbstab6-arrow-simple_thin .bbstab6-btn-prev:hover,
.bbstab6.bbstab6-arrow-simple_thin .bbstab6-btn-next:hover,
.bbstab6.bbstab6-arrow-arrow .bbstab6-btn-prev:hover,
.bbstab6.bbstab6-arrow-arrow .bbstab6-btn-next:hover,
.bbstab6.bbstab6-arrow-arrow_thin .bbstab6-btn-prev:hover,
.bbstab6.bbstab6-arrow-arrow_thin .bbstab6-btn-next:hover {
  background: none;
  border: none;
  color: var(--primary, #333);
}

/* ── 심플 (< >) ── */
.bbstab6.bbstab6-arrow-simple .bbstab6-btn-prev,
.bbstab6.bbstab6-arrow-simple .bbstab6-btn-next {
  font-size: 48px;
  transform: translateY(-3px);
}
/* ── 심플 얇은 (< >) ── */
.bbstab6.bbstab6-arrow-simple_thin .bbstab6-btn-prev,
.bbstab6.bbstab6-arrow-simple_thin .bbstab6-btn-next {
  font-size: 48px;
  transform: translateY(-3px);
}

/* ── 화살표 (← →) ── */
.bbstab6.bbstab6-arrow-arrow .bbstab6-btn-prev,
.bbstab6.bbstab6-arrow-arrow .bbstab6-btn-next {
  font-size: 40px;
  transform: translateY(-3px);
}
/* ── 화살표 얇은 (← →) ── */
.bbstab6.bbstab6-arrow-arrow_thin .bbstab6-btn-prev,
.bbstab6.bbstab6-arrow-arrow_thin .bbstab6-btn-next {
  font-size: 40px;
  transform: translateY(-3px);
}

/* 프로그레스 바 */
.bbstab6 .bbstab6-progress {
  flex: 1;
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.bbstab6 .bbstab6-progress-fill {
  height: 100%;
  background: #1e293b;
  border-radius: 2px;
  transition: width 0.3s ease;
  width: 0%;
}

/* ================================================
   오른쪽 패널 & Swiper
   ================================================ */
.bbstab6 .bbstab6-panel[hidden] {
  display: none !important;
}

.bbstab6 .bbstab6-swiper-wrap {
  width: 100%;
}

.bbstab6 .content-swiper {
  width: 100%;
  overflow: hidden;
}

/* FOUC 방지 (Swiper 초기화 전) */
.bbstab6 .content-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}

.bbstab6 .content-swiper:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  width: 33.333%;
  min-width: 0;
}

/* ================================================
   ★ 우측 연장 (full-right)
   clip-path로 좌측은 클리핑, 우측은 뷰포트 끝까지 확장
   ================================================ */
.bbstab6 .bbstab6-swiper-wrap.full-right .content-swiper {
  overflow: visible !important;
  clip-path: inset(-10px -100vw -10px 0);
}

/* ================================================
   라벨 숨김
   ================================================ */
.bbstab6.hide-label .card2_label,
.bbstab6.hide-label .label_css,
.bbstab6.hide-label .card_label {
  display: none !important;
}

/* ================================================
   로딩 스피너
   ================================================ */
.bbstab6 .lazy-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  width: 100%;
}

.bbstab6 .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary, #333);
  border-radius: 50%;
  animation: bbstab6_spin 1s linear infinite;
}

@keyframes bbstab6_spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 빈 상태 */
.bbstab6 .empty_li {
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
  padding: 40px 0;
}

/* ================================================
   관리자 뱃지
   ================================================ */
.bbstab6 .sw_bbs1_badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.bbstab6 .sw_bbs1_badge:hover {
  background: linear-gradient(135deg, #047857, #059669);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.bbstab6 .sw_bbs1_badge i {
  font-size: 14px;
}

/* ================================================
   반응형 - 태블릿
   ================================================ */
@media only all and (max-width: 1024px) {
  .bbstab6 .bbstab6-layout {
    gap: 30px;
  }

  .bbstab6 .bbstab6-btn-prev,
  .bbstab6 .bbstab6-btn-next {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* ================================================
   반응형 - 모바일
   ================================================ */
@media only all and (max-width: 767px) {
  .bbstab6 .bbstab6-layout {
    flex-direction: column;
    gap: 20px;
  }

  .bbstab6 .bbstab6-left {
    width: 100%;
  }

  .bbstab6 .bbstab6-titles {
    margin-bottom: 12px;
  }

  .bbstab6 .bbstab6-titles .sub_stit1 {
    font-size: 12px;
  }

  .bbstab6 .bbstab6-titles .sub_stit2 {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .bbstab6 .bbstab6-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 12px;
  }

  .bbstab6 .bbstab6-tabs::-webkit-scrollbar {
    display: none;
  }

  .bbstab6 .bbstab6-tabs .sw_tab {
    padding: 8px 18px;
    font-size: 13px;
  }

  .bbstab6 .bbstab6-goto {
    margin-bottom: 16px;
  }

  .bbstab6 .bbstab6-more-link {
    font-size: 14px;
  }

  .bbstab6 .bbstab6-paging {
    padding-top: 16px;
  }

  .bbstab6 .bbstab6-btn-prev,
  .bbstab6 .bbstab6-btn-next {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .bbstab6.bbstab6-arrow-simple .bbstab6-btn-prev,
  .bbstab6.bbstab6-arrow-simple .bbstab6-btn-next,
  .bbstab6.bbstab6-arrow-simple_thin .bbstab6-btn-prev,
  .bbstab6.bbstab6-arrow-simple_thin .bbstab6-btn-next {
    width: auto;
    height: auto;
    font-size: 36px;
  }
  .bbstab6.bbstab6-arrow-arrow .bbstab6-btn-prev,
  .bbstab6.bbstab6-arrow-arrow .bbstab6-btn-next,
  .bbstab6.bbstab6-arrow-arrow_thin .bbstab6-btn-prev,
  .bbstab6.bbstab6-arrow-arrow_thin .bbstab6-btn-next {
    width: auto;
    height: auto;
    font-size: 30px;
  }

  /* 모바일에서 full-right 해제 */
  .bbstab6 .bbstab6-swiper-wrap.full-right .content-swiper {
    overflow: hidden !important;
    clip-path: none;
  }

  /* FOUC */
  .bbstab6 .content-swiper:not(.swiper-initialized) .swiper-slide {
    width: 100%;
  }
}