/* Pretendard 폰트를 기본 폰트로 설정 */
* {
  font-family: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI",
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* 기본 스타일 리셋 */
body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333;
}

/* Tailwind와 호환을 위한 기본 설정 */
html {
  font-size: 16px;
}

/* 슬라이드 애니메이션 */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-slide {
  animation: slide 30s linear infinite;
  width: 200%; /* 카드들을 2배로 복제해서 무한 루프 효과 */
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.animate-slide:hover {
  animation-play-state: paused;
}

/* 슬라이드 컨테이너 */
.overflow-hidden {
  padding: 20px 0;
}

/* 부드러운 스크롤 */
html {
  scroll-behavior: smooth;
}

/* 슬라이드인 애니메이션 */
@keyframes slideIn {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in {
  animation: slideIn 0.7s ease-out;
}

/* 순차적 슬라이드인 애니메이션 */
@keyframes slideInLeft {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-1 {
  animation: slideInLeft 0.7s ease-out;
}

.animate-slide-in-2 {
  animation: slideInLeft 0.9s ease-out;
}

.animate-slide-in-3 {
  animation: slideInLeft 1.1s ease-out;
}

.animate-slide-in-4 {
  animation: slideInLeft 1.4s ease-out;
}

/* 플로팅 버튼 고정 */
#floating-buttons * {
  pointer-events: auto !important;
}

/* body overflow 설정 */
body {
  overflow-x: hidden;
  position: relative;
}

/* 플로팅 버튼이 레이아웃에 영향을 주지 않도록 */
html {
  overflow-x: hidden;
}

/* 추천 여행 프로그램 모바일 스크롤바 숨김 */
.sm\:hidden .flex::-webkit-scrollbar {
  display: none;
}

/* 맞춤형 서비스 카드 모바일 스크롤바 숨김 */
.overflow-x-auto::-webkit-scrollbar {
  display: none;
}

/* 플로팅 버튼 데스크톱 최적화 */
@media (min-width: 640px) {
  #floating-buttons {
    right: 72px !important;
  }
}

/* 모바일에서 호버 효과 비활성화 */
@media (max-width: 639px) {
  .hover\:-translate-y-\[14px\]:hover {
    transform: none !important;
  }
}

/* 플로팅 버튼 모바일 스타일 */
@media (max-width: 639px) {
  #floating-buttons {
    top: auto !important;
    bottom: 20px !important;
    right: 18px !important;
    transform: none !important;
  }

  #floating-menu {
    display: none;
    flex-direction: column;
    gap: 12px;
  }

  #floating-menu.open {
    display: flex;
  }

  #floating-toggle {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  }

  #floating-menu a,
  #floating-menu button {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  }
}

/* 데스크톱에서 플로팅 메뉴 항상 표시 */
@media (min-width: 640px) {
  #floating-toggle {
    display: none !important;
  }

  #floating-menu {
    display: flex !important;
  }
}

/* primary_btn */
.primary_btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 100px;
  border: none;
  background-color: #ff890a;
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: #ffffff;
  transition: all 0.3s ease;
  cursor: pointer;
}

.primary_btn:hover {
  background-color: #924c00;
}

/* outline_btn */
.outline_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  border: 1px solid #ff890a;
  font-weight: 700;
  font-size: 16px;
  line-height: 120%;
  letter-spacing: -0.6px;
  color: #ff890a;
  transition: all 0.3s ease;
}

.outline_btn:hover {
  background-color: #924c00;
  border-color: #924c00;
  color: #ffffff;
}

.outline_btn:hover img {
  filter: brightness(0) invert(1);
}