/* ================================================
   sw_bbs1 - 스와이퍼 게시판 카드 위젯 (탭 ON/OFF)
   ================================================ */

/* 헤더 영역 (타이틀 + 더보기) */
.sw_bbs1_header {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: clamp(16px, calc(1.56vw + 11px), 30px);
}

.sw_bbs1_titles {
  float: left;
}

.sw_bbs1_more {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, calc(0.47vw + 6.5px), 14px);
  font-size: clamp(14px, calc(0.31vw + 13px), 18px);
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.sw_bbs1_more:hover {
  color: var(--more-hover-color, var(--primary, #111827));
}

.sw_bbs1_more:hover .sw_more_circle {
  background: var(--more-hover-color, var(--primary, #111827));
}

.sw_bbs1_more:hover .sw_more_txt::after {
  background: var(--more-hover-color, var(--primary, #111827));
}

.sw_bbs1_more .sw_more_txt {
  display: inline;
}

/* 텍스트와 원 사이 구분 점 */
.sw_bbs1_more .sw_more_txt::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9ca3af;
  margin-left: clamp(8px, calc(0.47vw + 6.5px), 14px);
  vertical-align: middle;
}

/* 동그란 화살표 버튼 */
.sw_bbs1_more .sw_more_circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, calc(1.09vw + 28.5px), 46px);
  height: clamp(32px, calc(1.09vw + 28.5px), 46px);
  border-radius: 50%;
  background: #1f2937;
  color: #fff;
  font-size: clamp(16px, calc(0.47vw + 14.5px), 22px);
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.sw_bbs1_more:hover .sw_more_circle {
  transform: translateX(2px);
}

/* ================================================
   탭 영역
   ================================================ */
.sw_bbs1_tab_area {
  width: 100%;
  float: left;
}

.sw_bbs1_tabs {
  width: 100%;
  float: left;
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: clamp(16px, calc(1.56vw + 11px), 30px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sw_bbs1_tabs::-webkit-scrollbar {
  display: none;
}

.sw_bbs1_tabs .sw_tab {
  position: relative;
  padding: clamp(12px, calc(0.47vw + 10.5px), 18px) clamp(16px, calc(0.94vw + 13px), 28px);
  font-size: clamp(16px, calc(0.47vw + 14.5px), 22px);
  font-weight: 500;
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.sw_bbs1_tabs .sw_tab:hover {
  color: #374151;
}

/* on 상태: 라벨컬러가 있으면 --tab-color 사용, 없으면 기본 진한색 */
.sw_bbs1_tabs .sw_tab.on {
  color: var(--tab-color, #111827);
  font-weight: 700;
  border-bottom-color: var(--tab-color, #111827);
}

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

/* 탭 패널 */
.sw_bbs1_panel {
  width: 100%;
  float: left;
}

.sw_bbs1_panel[hidden] {
  display: none !important;
}

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

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

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

/* ================================================
   스와이퍼 래퍼 (전체 모드 & 탭 패널 공용)
   ================================================ */
.sw_bbs1_swiper_wrap {
  position: relative;
  width: 100%;
  float: left;
}

.sw_bbs1_swiper_wrap .content-swiper {
  width: 100%;
  float: left;
  overflow: hidden;
}

/* Swiper 초기화 전 FOUC 방지: 슬라이드 가로 정렬 + 첫 이미지 크기 제한 */
.sw_bbs1_swiper_wrap .content-swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}

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

.sw_bbs1_swiper_wrap .content-swiper:not(.swiper-initialized) .swiper-slide img {
  max-width: 100%;
  height: auto;
}

/* 하단 페이징 영역 */
.sw_bbs1_swiper_wrap .paging-wrap {
  width: 100%;
  float: left;
  display: flex;
  align-items: center;
  gap: clamp(12px, calc(0.78vw + 9.5px), 20px);
  margin-top: clamp(16px, calc(1.17vw + 12.25px), 28px);
}

/* 화살표 버튼 영역 */
.sw_bbs1_swiper_wrap .btn-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sw_bbs1_swiper_wrap .btn-prev,
.sw_bbs1_swiper_wrap .btn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, calc(1.25vw + 40px), 60px);
  height: clamp(44px, calc(1.25vw + 40px), 60px);
  border-radius: 50%;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: clamp(18px, calc(0.47vw + 16.5px), 24px);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sw_bbs1_swiper_wrap .btn-prev:hover,
.sw_bbs1_swiper_wrap .btn-next:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.sw_bbs1_swiper_wrap .btn-prev.swiper-button-disabled,
.sw_bbs1_swiper_wrap .btn-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* 프로그레스바 영역 (나머지 공간) */
.sw_bbs1_swiper_wrap .swiper-pagination {
  position: relative;
  flex: 1;
  height: 3px;
  background: #e5e7eb;
  border-radius: 2px;
}

.sw_bbs1_swiper_wrap .swiper-pagination .swiper-pagination-progressbar-fill {
  background: #374151;
  border-radius: 2px;
}

/* ================================================
   관리자 뱃지
   ================================================ */
.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);
}

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

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

/* ================================================
   모바일
   ================================================ */
@media only all and (max-width: 767px) {
  .sw_bbs1_header {
    margin-bottom: 14px;
  }

  .sw_bbs1_more {
    font-size: 13px;
    gap: 6px;
  }

  .sw_bbs1_more .sw_more_txt::after {
    width: 3px;
    height: 3px;
    margin-left: 6px;
  }

  .sw_bbs1_more .sw_more_circle {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .sw_bbs1_tabs {
    margin-bottom: 14px;
  }

  .sw_bbs1_tabs .sw_tab {
    padding: 10px 14px;
    font-size: 15px;
  }

  .sw_bbs1_swiper_wrap .paging-wrap {
    margin-top: 14px;
    gap: 10px;
  }

  .sw_bbs1_swiper_wrap .btn-prev,
  .sw_bbs1_swiper_wrap .btn-next {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}