/* ==========================================================
   추천 콘텐츠 (Discovery) 섹션 전용 스타일
   ========================================================== */

/* === 전체 컨테이너 === */
.discovery-container {
  /* 이 클래스는 HTML에 사용되지 않은 것으로 보임, 필요시 추가 */
  padding: 0 0 3rem 0;
  position: relative;
  z-index: 1;
}

/* #discover-section 패딩은 section.css 또는 onlycss.css 에서 .section-padding-discover 로 관리 */

/* #charts-title 스타일은 onlycss.css의 .section-title-white .section-title-spacing 으로 대체 가능 (현재는 삭제됨) */

.discovery-section + .discovery-section {
  /* 연속된 discovery-section 사이 간격 */
  margin-top: 2.5rem;
}

/* .discovery-section-title 관련 스타일 제거 */

/* === 좌우 스크롤 컨테이너 (버튼 포함) === */
.discovery-scroll-container {
  position: relative;
  margin-bottom: 24px; /* 타이틀 제거 후 이 마진이 섹션 상단 여백처럼 보일 수 있음, 필요시 조정 */
}

.scroll-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0; /* 기본 숨김, 호버 시 나타남 */
  transition: opacity 0.2s, background-color 0.2s;
  -webkit-backdrop-filter: blur(4px); /* 배경 블러 효과 */
  backdrop-filter: blur(4px);
}
.discovery-scroll-container:hover .scroll-nav-btn {
  opacity: 1;
}
.scroll-nav-btn.left {
  left: -22px;
} /* 버튼 절반만큼 밖으로 */
.scroll-nav-btn.right {
  right: -22px;
}
.scroll-nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.scroll-nav-btn.disabled,
.discovery-scroll-container.not-scrollable .scroll-nav-btn {
  /* JS로 .not-scrollable 클래스 추가 시 버튼 숨김 */
  opacity: 0 !important; /* JS 제어 확실히 하기 위해 !important 유지 고려 */
  cursor: not-allowed;
  pointer-events: none;
  display: none !important; /* JS 제어 확실히 하기 위해 !important 유지 고려 */
}

.horizontal-scroll-wrapper {
  overflow-x: auto; /* 가로 스크롤 활성화 */
  scrollbar-width: none; /* Firefox 스크롤바 숨김 */
  -ms-overflow-style: none; /* IE 스크롤바 숨김 */
  scroll-behavior: smooth; /* 부드러운 스크롤 (JS 클릭 시) */
}
.horizontal-scroll-wrapper::-webkit-scrollbar {
  display: none;
} /* Chrome, Safari 스크롤바 숨김 */

.suggestion-card-grid {
  display: flex; /* 가로 정렬 */
  gap: 1rem; /* 카드 열 사이 간격 */
  width: max-content; /* 내용만큼 너비 확장 */
  padding-bottom: 0.5rem; /* 그림자 등 위한 여백 */
}
.card-column {
  display: flex;
  flex-direction: column; /* 세로 정렬 */
  gap: 1rem; /* 카드 사이 간격 */
}
.suggestion-card {
  display: flex;
  align-items: center;
  gap: 1rem; /* 아이콘과 텍스트 사이 간격 */
  background-color: #242435; /* 카드 배경색 */
  padding: 0.8rem 1rem;
  border-radius: 12px;
  width: 320px; /* 카드 너비 */
  border: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  text-align: left; /* 텍스트 왼쪽 정렬 */
  color: white;
}
.suggestion-card:hover {
  background-color: #3a3a52;
  transform: translateY(-2px); /* 살짝 위로 뜨는 효과 */
}
.suggestion-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%; /* 원형 아이콘 */
  object-fit: cover; /* 이미지 비율 유지하며 채우기 */
  flex-shrink: 0; /* 아이콘 크기 고정 */
}
.suggestion-card .text-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #e0e0e0;
}
.suggestion-card .text-content p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.voice-card-grid {
  display: flex;
  gap: 0.8rem;
  width: max-content;
}
.voice-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #2a2a40;
  padding: 0.9rem;
  border-radius: 12px;
  width: 280px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  text-align: left;
  color: white;
}
.voice-card:hover {
  background-color: #3a3a52;
  border-color: rgba(255, 255, 255, 0.2);
}
.voice-card .voice-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.voice-card .voice-icon.bg-blue {
  background-color: #3b82f6;
}
.voice-card .voice-icon.bg-red {
  background-color: #ef4444;
}
.voice-card .voice-icon.bg-orange {
  background-color: #f97316;
}
.voice-card .voice-icon.bg-green {
  background-color: #22c55e;
}
.voice-card .text-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: #e0e0e0;
}
.voice-card .text-content p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-pills-container {
  display: flex;
  flex-wrap: wrap; /* 내용 많으면 다음 줄로 */
  gap: 12px; /* 알약 사이 간격 */
}
/* .category-pill 스타일은 onlycss.css의 .chip-button으로 통합 */
.chip-button.category-pill {
  /* 기본 스타일은 .chip-button 에서 상속 */
  /* .category-pill 만의 특별한 스타일이 있다면 여기에 추가 */
}

@media (max-width: 768px) {
  /* .discovery-section-title 관련 스타일 제거 */
  .scroll-nav-btn {
    display: none !important; /* 모바일에서는 스크롤 버튼 숨김 (!important 유지 또는 JS로 제어) */
  }
  /* .discovery-scroll-container.not-scrollable .scroll-nav-btn 중복 제거 */
  .suggestion-card {
    width: 280px; /* 모바일에서 카드 너비 줄임 */
  }
  .category-pills-container {
    gap: 8px; /* 모바일에서 알약 간격 줄임 */
  }
  .chip-button.category-pill {
    /* .chip-button으로 통합 후 반응형 스타일 적용 */
    font-size: 12px;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  #discover-section {
    /* onlycss.css 에서도 정의될 수 있으므로, 필요한 경우 !important 사용 또는 구체성 높이기 */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .discovery-container {
    /* HTML에 사용되지 않음 */
    padding: 0 0 2.5rem 0;
  }
  .suggestion-card {
    width: 70vw; /* 화면 너비의 70% 사용 */
  }
  .chip-button.category-pill {
    /* .chip-button으로 통합 후 반응형 스타일 적용 */
    font-size: 11px;
    padding: 5px 10px;
  }
}