/**
 * Vue 트랜지션 (모바일 최적화)
 * 페이지 전체 페이드 인/아웃 + 컴포넌트별 전환 효과
 */

/* ========================================
   View Transitions API (크로스페이드, 지원 브라우저 자동 적용)
   Chrome 111+, Edge 111+, Safari 18+
======================================== */
@view-transition {
	navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.2s;
	animation-timing-function: ease;
}

/* ========================================
   페이지 로드 시 전체 페이드인
======================================== */
.wrapper {
	animation: page-fadein 0.25s ease-out;
}

@keyframes page-fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ========================================
   Vue 앱 로딩 상태
======================================== */
[data-v-app]:not([data-v-app-mounted]) {
	min-height: 150px;
}

/* v-cloak */
[v-cloak] {
	display: none !important;
}

/* ========================================
   스켈레톤 로딩
======================================== */
.skeleton {
	background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
	background-size: 200% 100%;
	animation: shimmer 1.2s ease-in-out infinite;
	border-radius: 4px;
}
@keyframes shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }
.skeleton-image { width: 100%; height: 80px; border-radius: 8px; }

/* ========================================
   로딩 스피너
======================================== */
.vue-spinner {
	width: 24px;
	height: 24px;
	border: 2px solid #eee;
	border-top-color: #5D5FEF;
	border-radius: 50%;
	animation: spin 0.5s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}


/* ========================================
   Vue 트랜지션 — 페이드
======================================== */
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}

/* ========================================
   슬라이드 다운 (드롭다운, 확장 메뉴)
======================================== */
.slide-down-enter-active,
.slide-down-leave-active {
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.slide-down-enter-from,
.slide-down-leave-to {
	opacity: 0;
	transform: translateY(-8px);
}

/* ========================================
   슬라이드 업 (지도 infoCard 등)
======================================== */
.slide-up-enter-active,
.slide-up-leave-active {
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.slide-up-enter-from,
.slide-up-leave-to {
	opacity: 0;
	transform: translateY(16px);
}

/* ========================================
   슬라이드 페이드 (카테고리 서브메뉴)
======================================== */
.slide-fade-enter-active,
.slide-fade-leave-active {
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
	opacity: 0;
	transform: translateX(-10px);
}

/* ========================================
   스케일 (확대/축소)
======================================== */
.scale-enter-active,
.scale-leave-active {
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.scale-enter-from,
.scale-leave-to {
	opacity: 0;
	transform: scale(0.95);
}

/* ========================================
   드롭다운 (항공 필터 등)
======================================== */
.dropdown-enter-active,
.dropdown-leave-active {
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.dropdown-enter-from,
.dropdown-leave-to {
	opacity: 0;
	transform: translateY(-4px);
}

/* ========================================
   리스트 아이템 (transition-group)
======================================== */
.list-enter-active,
.list-leave-active {
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.list-enter-from,
.list-leave-to {
	opacity: 0;
	transform: translateY(10px);
}
.list-move {
	transition: transform 0.3s ease;
}
.list-leave-active {
	position: absolute;
	width: 100%;
}

/* ========================================
   탭 컨텐츠 전환
======================================== */
.tab-content-enter-active,
.tab-content-leave-active {
	transition: opacity 0.15s ease;
}
.tab-content-enter-from,
.tab-content-leave-to {
	opacity: 0;
}

/* ========================================
   확장 (댓글 대댓글 등)
======================================== */
.expand-enter-active,
.expand-leave-active {
	transition: opacity 0.2s ease, max-height 0.3s ease;
	overflow: hidden;
}
.expand-enter-from,
.expand-leave-to {
	opacity: 0;
	max-height: 0;
}
.expand-enter-to,
.expand-leave-from {
	max-height: 1000px;
}

/* ========================================
   팝업/모달 — 오버레이 (배경 딤)
======================================== */
.popup-overlay-enter-active,
.popup-overlay-leave-active {
	transition: opacity 0.25s ease;
}
.popup-overlay-enter-from,
.popup-overlay-leave-to {
	opacity: 0;
}

/* ========================================
   팝업/모달 — 본체 (슬라이드 업)
======================================== */
.popup-content-enter-active,
.popup-content-leave-active {
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.popup-content-enter-from,
.popup-content-leave-to {
	opacity: 0;
	transform: translateY(30px);
}

/* ========================================
   바텀 시트
======================================== */
.bottom-sheet-enter-active,
.bottom-sheet-leave-active {
	transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.bottom-sheet-enter-from,
.bottom-sheet-leave-to {
	transform: translateY(100%);
}


/* ========================================
   기본 요소 - 터치 피드백
======================================== */
.btn-press {
	-webkit-tap-highlight-color: transparent;
}
.btn-press:active {
	opacity: 0.7;
}

/* ========================================
   이미지 로딩
======================================== */
.img-fade {
	opacity: 0;
	transition: opacity 0.2s ease;
}
.img-fade.loaded {
	opacity: 1;
}

/* ========================================
   리스트 - 카드 등장 애니메이션
======================================== */
.list-stagger > li {
	opacity: 1;
}

.card-appear {
	animation: cardSlideUp 0.35s ease-out both;
}
@keyframes cardSlideUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========================================
   스와이프 콘텐츠 전환
======================================== */
.mPdcSwipeBox,
.mTravelPriceSwipeBox {
	transition: opacity 0.3s ease;
	min-height: 200px;
}
.mPdcSwipeBox.is-loading,
.mTravelPriceSwipeBox.is-loading {
	pointer-events: none;
	opacity: 0.4;
}

/* 스켈레톤 그리드 (탭 전환 로딩용) */
.skeleton-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 4px 0;
}
.skeleton-card-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.skeleton-card-item .skeleton-image {
	height: 100px;
	border-radius: 8px;
}
.skeleton-card-item .skeleton-text {
	height: 12px;
}
.skeleton-card-item .skeleton-text.short {
	width: 55%;
}

/* ========================================
   카테고리 버튼 전환
======================================== */
.mCateBtn {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.mCateBtn:active,
.mCateBtn.btn-pressed {
	transform: scale(0.95);
}

/* ========================================
   로딩 상태 (일반)
======================================== */
.is-loading {
	pointer-events: none;
	opacity: 0.5;
}

/* ========================================
   팝업 (comPop)
======================================== */
.comPopBg {
	transition: opacity 0.2s ease;
}