body { background-color: #FFFFFF; overflow-x: hidden; color: #1A1F36; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* 뷰 전환 */
.app-view { display: none; opacity: 0; transition: opacity 0.4s ease; }
.app-view.active { display: block; opacity: 1; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.nav-scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }

/* 지도 설정 */
#map { width: 100%; height: 100%; z-index: 10; }
.pay-tab.active { background-color: #0BBFEA; color: white; border-color: #0BBFEA; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #0BBFEA; border-radius: 10px; }
#calendar-grid {
    height: auto; /* 320px 제거 */
    display: grid;
    grid-template-rows: repeat(6, 1fr); /* 6줄을 다 보여주되 */
    align-content: start;
    overflow: visible; /* 잘리지 않게 설정 */
    gap: 8px; /* 날짜 간격 */
}

/* Hero Section Animations */
.hero-content-container {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.hero-content-container.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.hero-stat {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.hero-stat.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }

/* [수정] 숫자 입력 필드 화살표(스피너) 숨기기 */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type='number'] {
    -moz-appearance: textfield;
}