/* 꼬리살랑 앱 추가 인터랙션 및 애니메이션 스타일 */

/* 폰트 및 기본 설정 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body {
  font-family: 'Plus Jakarta Sans', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* 데스크톱/태블릿 화면에서 모바일 앱 형태의 세련된 프레임 중앙 정렬 */
@media (min-width: 640px) {
  body {
    background-color: #f3eae4;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .app-shell {
    width: 100%;
    max-width: 440px;
    min-height: 100vh;
    background-color: #fff8f5;
    position: relative;
    box-shadow: 0 10px 40px rgba(70, 35, 20, 0.12);
  }

  /* 헤더와 하단 네비게이션도 모바일 컨테이너 폭에 맞춤 */
  header.fixed, nav.fixed {
    max-width: 440px;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

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

/* 탭 뷰 전환 페이드 애니메이션 */
.tab-view {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.tab-view.active {
  display: block;
  opacity: 1;
}

/* 모달 바텀시트 애니메이션 */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content-bottom {
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.active .modal-content-bottom {
  transform: translateY(0);
}

.modal-content-center {
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.active .modal-content-center {
  transform: scale(1);
  opacity: 1;
}

/* 플로팅 토스트 메시지 */
#toastNotification {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(30px);
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#toastNotification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/* 버튼 터치 피드백 */
.active-press:active {
  transform: scale(0.96);
}

/* 배너 트랜지션 */
.hero-slide {
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* 펄스 애니메이션 */
@keyframes softPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.animate-soft-pulse {
  animation: softPulse 2s infinite ease-in-out;
}

/* 찜하기 하트 애니메이션 */
.heart-active {
  color: #ff334b !important;
  font-variation-settings: 'FILL' 1 !important;
  animation: heartBeat 0.35s ease;
}
@keyframes heartBeat {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}