/* ===============================================
   codepedia SEO Analyzer - Main CSS
   모든 스타일 컴포넌트 통합
   =============================================== */

/* Base */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');

/* Components */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/toast.css');
@import url('./components/faq.css');
@import url('./components/floating-buttons.css');
@import url('./components/chatbot.css');
@import url('./components/mobile-nav.css');
@import url('./components/mobile-text.css');

/* Layout */
@import url('./layout/header.css');
@import url('./layout/footer.css');
@import url('./layout/sections.css');

/* Pages */
@import url('./pages/result.css');

/* Responsive */
@import url('./responsive.css');

/* ===============================================
   Global Utilities
   =============================================== */

/* Spacing Utilities */
.mt-1 { margin-top: var(--spacing-md); }
.mt-2 { margin-top: var(--spacing-lg); }
.mt-3 { margin-top: var(--spacing-xl); }
.mt-4 { margin-top: var(--spacing-2xl); }

.mb-1 { margin-bottom: var(--spacing-md); }
.mb-2 { margin-bottom: var(--spacing-lg); }
.mb-3 { margin-bottom: var(--spacing-xl); }
.mb-4 { margin-bottom: var(--spacing-2xl); }

.py-1 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-2 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-3 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

/* Animation Utilities */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Gradient Text */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Divider */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gray-light), transparent);
    margin: var(--spacing-2xl) 0;
}