@tailwind base;
@tailwind components;
@tailwind utilities;

/* 기본 스타일 */
body {
  background-color: #fafafa;
  color: #1a1a1a;
}

/* 스크롤바 스타일 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #548360;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #456e50;
}

/* View Transitions API - 앨범 커버 이미지 부드러운 전환 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* 앨범 커버 트랜지션 */
::view-transition-group(*) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(*) {
  animation: fade-out 0.3s ease-out both;
}

::view-transition-new(*) {
  animation: fade-in 0.3s ease-in both;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 라이트박스 스크롤바 숨기기 */
.lightbox-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 스크롤바 숨기기 유틸리티 */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Swiper autoHeight 지원 */
.swiper-slide {
  height: auto !important;
}
