/* ===========================
   FILTER SELECT 필터 선택 화면
   =========================== */

.filter-select-screen {
  background: #ffffff;
}

/* 메인 레이아웃 */
.filter-select-main {
  flex: 1 1 0;
  padding: 5.15cqw;
  gap: 3.43cqw;
  min-height: 0;
  overflow: hidden;
}

/* 타이틀 */
.filter-select-title {
  font-weight: 700;
  font-size: 5.15cqw;
  line-height: 6.87cqw;
  text-align: center;
  color: #222222;
  margin: 0;
}

/* 슬라이드 인디케이터 */
.filter-slide-indicator {
  display: flex;
  justify-content: center;
  gap: 2.15cqw;
  flex-shrink: 0;
}
.filter-slide-tag {
  padding: 1.29cqw 3.43cqw;
  border-radius: 8.58cqw;
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 3.43cqw;
  color: #999999;
  background: #f0f0f0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter-slide-tag.active {
  background: #222222;
  color: #ffffff;
}

/* Swiper 래퍼 (남은 공간 채움) */
.filter-swiper-wrap {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.filter-swiper {
  width: 78%;
  height: 100%;
  margin: 0 auto;
  overflow: visible !important;
}
.filter-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s, transform 0.3s;
}
.filter-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.4;
  transform: scale(0.92);
}

/* 슬라이드 내 프레임 */
.filter-slide-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 95%;
  border: 1.72cqw solid #222222;
  border-radius: 4.29cqw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 이미지/캔버스 */
.filter-slide-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Swiper 페이지네이션 */
.filter-swiper-pagination {
  display: none;
}

/* 필터 옵션 섹션 */
.filter-options-section {
  display: flex;
  flex-direction: column;
  gap: 2.15cqw;
  flex-shrink: 0;
}

/* 섹션 라벨 */
.filter-options-label {
  font-weight: 700;
  font-size: 5.15cqw;
  line-height: 6.22cqw;
  color: #222222;
  margin: 0;
}

/* 필터 옵션 행 */
.filter-options-row {
  display: flex;
  gap: 3.43cqw;
  padding: 0.86cqw;
}

/* 필터 버튼 */
.filter-option-btn {
  width: 18cqw;
  height: 18cqw;
  padding: 0;
  background: #222222;
  border-radius: 3.43cqw;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.86cqw;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 3.43cqw;
  color: #ffffff;
  white-space: nowrap;
  box-shadow: none;
}
.filter-option-btn-icon {
  width: 4.29cqw;
  height: 4.29cqw;
  color: #ffffff;
}
.filter-option-btn-text {
  font-weight: 600;
  font-size: 2.58cqw;
  color: #ffffff;
  text-align: center;
}
.filter-option-btn:active {
  transform: scale(0.95);
}

/* 선택 상태 */
.filter-option-btn.selected {
  box-shadow:
    0 0 0 0.43cqw #ffffff,
    0 0 0 0.86cqw #222222;
}

/* 버튼 컨테이너 */
.filter-select-buttons {
  display: flex;
  gap: 5.15cqw;
  flex-shrink: 0;
}

/* 버튼 공통 */
.filter-select-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4.29cqw 6.87cqw;
  gap: 1.72cqw;
  background: #222222;
  border-radius: 4.29cqw;
  border: none;
  cursor: pointer;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 4.29cqw;
  line-height: 5.15cqw;
  text-align: center;
  color: #ffffff;
  transition: transform 0.2s;
}
.filter-select-btn:active {
  transform: scale(0.95);
}
.filter-select-btn--secondary {
  background: #666666;
}