/**
 * responsive.css - 반응형 스타일시트
 * 소리튠영어 - Mobile First Approach
 */

/* ==========================================
   Small Mobile (320px - 374px)
   ========================================== */
@media (max-width: 374px) {
    :root {
        --header-height-mobile: 56px;
    }

    .container {
        padding: 0 var(--spacing-md);
    }

    .logo-main {
        font-size: 1.25rem;
    }

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

    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.875rem;
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }

    .page-banner {
        padding: var(--spacing-2xl) 0;
    }

    .floating-btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.8125rem;
    }

    .floating-text {
        display: none;
    }
}

/* ==========================================
   Mobile (375px - 575px)
   ========================================== */
@media (min-width: 375px) and (max-width: 575px) {
    .container {
        padding: 0 var(--spacing-md);
    }

    .section {
        padding: var(--spacing-2xl) 0;
    }

    .section-header {
        margin-bottom: var(--spacing-2xl);
    }

    .footer-grid {
        gap: var(--spacing-xl);
    }
}

/* ==========================================
   Large Mobile / Small Tablet (576px - 767px)
   ========================================== */
@media (min-width: 576px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .floating-cta {
        display: block;
    }
}

/* ==========================================
   Tablet (768px - 991px)
   ========================================== */
@media (min-width: 768px) {
    :root {
        --header-height-mobile: 72px;
    }

    .container {
        padding: 0 var(--spacing-xl);
    }

    .section {
        padding: var(--spacing-3xl) 0;
    }

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

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

    .page-banner {
        padding: 80px 0;
    }

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

    .footer-bottom-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-md);
    }

    .company-info {
        text-align: center;
    }
}

/* ==========================================
   Desktop (992px+)
   ========================================== */
@media (min-width: 992px) {
    :root {
        --header-height: 80px;
    }

    .site-main {
        padding-top: var(--header-height);
    }

    /* Header Desktop */
    .header-inner {
        height: var(--header-height);
    }

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

    .mobile-menu {
        display: none;
    }

    .main-nav {
        display: block;
    }

    .header-cta {
        display: block;
    }

    /* Grid */
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

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

    .footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .company-info {
        text-align: left;
    }

    /* Floating Elements Position */
    .floating-cta {
        right: var(--spacing-xl);
        bottom: 120px;
    }

    .scroll-top {
        right: var(--spacing-xl);
        width: 52px;
        height: 52px;
    }

    /* Page Banner */
    .page-banner {
        padding: 100px 0;
    }
}

/* ==========================================
   Large Desktop (1200px+)
   ========================================== */
@media (min-width: 1200px) {
    .container {
        max-width: 1280px;
        padding: 0 var(--spacing-2xl);
    }

    .nav-list {
        gap: var(--spacing-2xl);
    }

    .section {
        padding: 100px 0;
    }

    .footer-top {
        padding: 80px 0;
    }

    /* Enhanced hover effects for desktop */
    .card:hover {
        transform: translateY(-8px);
    }

    .btn-primary:hover {
        transform: translateY(-3px);
    }
}

/* ==========================================
   Extra Large Desktop (1400px+)
   ========================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* ==========================================
   Height-based adjustments
   ========================================== */
@media (max-height: 600px) and (orientation: landscape) {
    .page-banner {
        padding: var(--spacing-2xl) 0;
        min-height: auto;
    }

    .hero-section {
        min-height: auto;
        padding: var(--spacing-2xl) 0;
    }
}

/* ==========================================
   High DPI / Retina Displays
   ========================================== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Sharper borders for high DPI */
    .card,
    .form-input,
    .form-textarea,
    .btn {
        border-width: 0.5px;
    }
}

/* ==========================================
   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;
    }
}

/* ==========================================
   Dark Mode Support (for system preference)
   ========================================== */
@media (prefers-color-scheme: dark) {
    /*
     * The cosmic theme is already dark-oriented,
     * but we can adjust certain elements for
     * system-level dark mode preference.
     */
    :root {
        --bg-primary: #0f0c29;
        --bg-secondary: #1a1a2e;
        --bg-card: rgba(30, 27, 75, 0.8);
        --text-primary: #f8fafc;
        --text-muted: #94a3b8;
        --border-color: rgba(255, 255, 255, 0.1);
    }

    .card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
    }

    .form-input,
    .form-textarea,
    .form-select {
        background: rgba(15, 12, 41, 0.8);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .dropdown-menu {
        background: #1a1a2e;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropdown-menu li a:hover {
        background: rgba(99, 102, 241, 0.2);
    }

    .site-header {
        background: rgba(15, 12, 41, 0.9);
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}

/* ==========================================
   Print Responsive
   ========================================== */
@media print {
    * {
        background: white !important;
        color: black !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ==========================================
   Touch Device Adjustments
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-link,
    .mobile-nav-link,
    .footer-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .btn {
        min-height: 48px;
    }

    /* Remove hover effects on touch */
    .card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }
}

/* ==========================================
   Specific Page Responsive Styles
   ========================================== */

/* Home Page Hero */
@media (min-width: 768px) {
    .hero-content {
        text-align: left;
    }

    .hero-section .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--spacing-3xl);
    }
}

/* VAK Test Page */
@media (min-width: 576px) {
    .vak-option {
        padding: var(--spacing-lg);
    }
}

@media (min-width: 768px) {
    .vak-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
    }

    .result-chart {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Roadmap Page */
@media (min-width: 768px) {
    .roadmap-tabs {
        display: flex;
        justify-content: center;
        gap: var(--spacing-md);
    }

    .roadmap-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (min-width: 992px) {
    .roadmap-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Contact Page */
@media (min-width: 768px) {
    .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2xl);
    }
}

/* Team Page */
@media (min-width: 576px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Reviews Page */
@media (min-width: 768px) {
    .reviews-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
}

@media (min-width: 992px) {
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* FAQ Page */
@media (min-width: 992px) {
    .faq-container {
        max-width: 800px;
        margin: 0 auto;
    }
}

/* Products/Services Page */
@media (min-width: 576px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Location Page */
@media (min-width: 768px) {
    .location-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2xl);
        align-items: start;
    }

    .map-container {
        min-height: 400px;
    }
}

/* News/Blog Page */
@media (min-width: 576px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Portfolio Page */
@media (min-width: 576px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Stats Section */
@media (min-width: 576px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}