/* static/css/style.css */

/* 1. 폰트 설정 (프리텐다드 권장) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 2. GSAP 애니메이션 초기 상태 */
/* 화면 로드 시 깜빡임 방지용 */
.hero-section {
    opacity: 0;
    visibility: hidden; /* JS가 로드되면 visible로 변경됨 */
}

.card-item, .market-card {
    opacity: 0; /* 스크롤 애니메이션을 위해 숨겨둠 */
    transform: translateY(20px);
}

/* 3. HTMX 로딩 인디케이터 */
.htmx-indicator {
    display: none;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block;
}

/* 4. 커스텀 스크롤바 (선택사항) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 5. 카드 호버 효과 */
.market-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.market-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}