/**
 * 무료 사주 (sjbF) 전용 CSS
 * 
 * @author saju.a1
 * @since 2025-01-08
 */

/* 기본 스타일 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

/* Alpine.js x-cloak */
[x-cloak] {
    display: none !important;
}

/* 반응형 컨테이너 */
.free-saju-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
}

/* 로딩 스피너 */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 애니메이션 */
.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 스크롤바 커스텀 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 모바일 최적화 */
@media (max-width: 480px) {
    .free-saju-container {
        padding: 15px;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
}

/* 터치 디바이스 최적화 */
@media (hover: none) and (pointer: coarse) {
    .submit-btn:hover,
    .cta-btn:hover {
        transform: none;
    }
}