@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --primary-burgundy: #722F37;
  --dark-burgundy: #4A0E17;
  --light-burgundy: #9B3B48;
  --gold-accent: #C5A059;
  --gold-light: #F6D365;
  --bg-champagne: #FCFBF7;
  --card-bg: #FFFFFF;
  --text-main: #1F2937;
  --text-muted: #6B7280;
  --border-light: #E5E7EB;
}

.dark {
  --bg-champagne: #0F172A;
  --card-bg: #1E293B;
  --text-main: #F9FAFB;
  --text-muted: #9CA3AF;
  --border-light: #334155;
  --primary-burgundy: #9B3B48;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  background-color: var(--bg-champagne);
  color: var(--text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
  word-break: keep-all;
}

/* 텍스트/버튼 오버플로우 방어 */
.protect-text {
  min-width: 0;
  flex-shrink: 0;
  white-space: nowrap;
  word-break: keep-all;
}

/* 스캐너 레이저 애니메이션 */
@keyframes scanner-laser {
  0% { top: 10%; opacity: 0.8; }
  50% { top: 85%; opacity: 1; }
  100% { top: 10%; opacity: 0.8; }
}

.scanner-beam {
  animation: scanner-laser 2.4s ease-in-out infinite;
  box-shadow: 0 0 15px #EF4444, 0 0 25px #F59E0B;
}

/* 커스텀 스크롤바 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(114, 47, 55, 0.25);
  border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(197, 160, 89, 0.35);
}

/* 바텀시트 트랜지션 */
.bottom-sheet-enter {
  transform: translateY(100%);
}
.bottom-sheet-enter-active {
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 게이지 바 애니메이션 */
.taste-bar {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 가로 스크롤바 숨김 유틸리티 */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 🌐 전 기기 반응형 최적 뷰 (Responsive Optimal View Safeguards) */
/* 1. 상단 스티키 헤더 및 채널 서브네비 겹침/잘림 방어 */
header {
  contain: paint;
}

#channelSubNav {
  min-height: fit-content;
}

.channel-view-btn {
  min-width: fit-content;
  flex-shrink: 0;
  white-space: nowrap;
  word-break: keep-all;
}

.curated-theme-chip {
  min-width: fit-content;
  flex-shrink: 0;
  white-space: nowrap;
  word-break: keep-all;
}

/* 2. 본문 메인 컨테이너 최소 높이 보장 (로딩/공백 방어) */
main {
  min-height: calc(100vh - 240px);
}

/* 3. 모바일(320px~768px) 최적 뷰 콤팩트 스타일링 */
@media (max-width: 767px) {
  #heroSection {
    padding: 1.25rem 1rem !important;
  }
  
  #channelHeroTitle {
    font-size: 1.25rem !important;
    line-height: 1.35 !important;
  }

  #channelHeroDesc {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #eventDealsSection {
    padding: 1rem 0.75rem !important;
  }

  .wine-card {
    padding: 1rem !important;
  }
}

/* 4. 초소형 모바일 (320px~374px) 극대화 방어 */
@media (max-width: 374px) {
  .channel-view-btn {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    font-size: 0.6875rem !important;
  }

  .curated-theme-chip {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    font-size: 0.6875rem !important;
  }
}


