/* ==========================================
   Travel Gallery 테마 기반 커스텀 스타일 명세
   ========================================== */

/* 1. 동적 흐름 무빙 그라데이션 백그라운드 */
.dynamic-bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #8b5cf6, #ec4899);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: left center; }
    50% { background-position: right center; }
}

/* 2. 백그라운드 플로팅 오너먼트 (디자인 무드 보존) */
.bg-decoration {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    animation: floatingObj 6s ease-in-out infinite;
    pointer-events: none;
}
.bg-decoration:nth-child(1) { width: 120px; height: 120px; background: linear-gradient(45deg, #8b5cf6, #ec4899); top: 10%; left: 3%; }
.bg-decoration:nth-child(2) { width: 180px; height: 180px; background: linear-gradient(45deg, #ec4899, #f97316); top: 30%; right: 5%; animation-delay: 2s; }
.bg-decoration:nth-child(3) { width: 90px; height: 90px; background: linear-gradient(45deg, #23a6d5, #23d5ab); bottom: 10%; left: 8%; animation-delay: 4s; }

@keyframes floatingObj {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
}

/* 3. 지도 레이어 네온 아우라 테두리 */
.map-container {
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.18);
}

/* 4. 애니메이션 효과 스펙 */
.animate-scale-in {
    animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.animate-slide-up {
    animation: slideUp 0.35s ease-out forwards;
}

@keyframes scaleIn {
    0% { transform: scale(0.96); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes slideUp {
    0% { transform: translateY(15px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* 5. 스크롤바 폼 팩터 디자인 커스텀 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

/* 6. 카카오맵 커스텀 인포윈도우 래퍼 */
.custom-infowindow {
    padding: 10px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-size: 12px;
}