/**
 * responsive.css - 반응형 스타일
 * 위치: /assets/css/responsive.css
 */

/* ==========================================
   TABLET (max-width: 1024px)
   ========================================== */
@media (max-width: 1024px) {
    /* Header */
    .main-nav {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .footer-brand {
        grid-column: span 2;
    }

    /* Sections */
    .section {
        padding: var(--space-2xl) 0;
    }

    .section-title {
        font-size: 1.75rem;
    }

    /* Grid adjustments */
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   MOBILE LANDSCAPE (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }

    /* Header */
    .logo .logo-main {
        font-size: 1rem;
    }

    .logo .logo-sub {
        font-size: 0.625rem;
    }

    .header-actions .btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.75rem;
    }

    /* Buttons */
    .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.875rem;
    }

    .btn-lg {
        padding: var(--space-md) var(--space-lg);
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand {
        grid-column: span 1;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-links h4 {
        margin-top: var(--space-lg);
    }

    /* Grid adjustments */
    .grid-cols-4,
    .grid-cols-3,
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }

    /* Cards */
    .card {
        padding: var(--space-md);
    }

    /* Slider */
    .slider-arrow {
        width: 36px;
        height: 36px;
    }

    /* Toast */
    .toast-container {
        left: var(--space-md);
        right: var(--space-md);
    }

    .toast {
        width: 100%;
    }
}

/* ==========================================
   MOBILE PORTRAIT (max-width: 480px)
   ========================================== */
@media (max-width: 480px) {
    /* Container */
    .container {
        padding: 0 var(--space-sm);
    }

    /* Typography */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }

    .section-title {
        font-size: 1.5rem;
    }

    /* Header */
    .logo .logo-text {
        display: none;
    }

    .logo .logo-icon {
        font-size: 1.75rem;
    }

    /* Buttons */
    .header-actions .btn-outline {
        display: none;
    }

    /* Mobile Nav */
    .mobile-nav {
        width: 100%;
        right: -100%;
    }

    /* Sections */
    .section {
        padding: var(--space-xl) 0;
    }

    /* Footer */
    .company-info p {
        font-size: 0.75rem;
    }

    /* Forms */
    .form-input,
    .form-textarea,
    .form-select {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9375rem;
    }
}

/* ==========================================
   HERO SECTION RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
    .hero-section .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        order: 1;
    }

    .hero-visual {
        order: 0;
        max-width: 400px;
        margin: 0 auto var(--space-xl);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-desc {
        max-width: 100%;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-stats {
        flex-wrap: wrap;
    }
}

/* ==========================================
   VAK TEST RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .vak-test-container {
        padding: var(--space-md);
    }

    .question-card {
        padding: var(--space-lg);
    }

    .question-text {
        font-size: 1.125rem;
    }

    .option-btn {
        padding: var(--space-md);
        font-size: 0.9375rem;
    }

    .result-chart {
        height: 200px;
    }

    .roadmap-tabs {
        flex-wrap: wrap;
    }

    .roadmap-tab {
        flex: 1 1 auto;
    }
}

/* ==========================================
   ROADMAP RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .roadmap-card {
        padding: var(--space-md);
    }

    .roadmap-grid {
        gap: var(--space-md);
    }

    .month-tabs {
        flex-direction: column;
    }

    .month-tab {
        width: 100%;
    }
}

/* ==========================================
   TEAM SECTION RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-card {
        text-align: center;
    }

    .team-avatar {
        margin: 0 auto var(--space-md);
    }
}

/* ==========================================
   REVIEWS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .review-card {
        padding: var(--space-md);
    }
}

/* ==========================================
   CONTACT FORM RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-info {
        order: 1;
    }

    .contact-form {
        order: 0;
    }
}

/* ==========================================
   FAQ RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .faq-item {
        padding: var(--space-md);
    }

    .faq-question {
        font-size: 0.9375rem;
    }

    .faq-answer {
        font-size: 0.875rem;
    }
}

/* ==========================================
   PRICING RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ==========================================
   SERVICE CARDS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .service-card {
        padding: var(--space-lg);
    }

    .service-icon {
        font-size: 2.5rem;
    }

    .service-title {
        font-size: 1.125rem;
    }
}

/* ==========================================
   STATS RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   TABLE RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
    }

    .table-responsive table {
        min-width: 600px;
    }
}

/* ==========================================
   MODAL RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .modal-overlay {
        padding: var(--space-md);
    }

    .modal {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-lg);
    }

    .modal-header {
        padding: var(--space-md);
    }

    .modal-body {
        padding: var(--space-md);
    }

    .modal-footer {
        padding: var(--space-md);
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ==========================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
    .site-header,
    .site-footer,
    .mobile-nav,
    .mobile-nav-overlay,
    #bg-canvas,
    .loading-screen,
    .toast-container {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .site-main {
        padding-top: 0;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}