/**
 * Responsive Styles
 */

/* Large Devices (Desktops, < 1280px) */
@media (max-width: 1280px) {
    :root {
        --container-max-width: 1024px;
    }

    .section {
        padding: var(--space-16) 0;
    }
}

/* Medium Devices (Tablets, < 1024px) */
@media (max-width: 1024px) {
    :root {
        --container-max-width: 768px;
        --navbar-height: 70px;
    }

    body {
        padding-top: 70px;
    }

    .section {
        padding: var(--space-12) 0;
    }

    .section-lg {
        padding: var(--space-20) 0;
    }

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

/* Small Devices (Landscape Phones, < 768px) */
@media (max-width: 768px) {
    :root {
        --container-max-width: 100%;
        --container-padding: var(--space-4);
        --navbar-height: 60px;
    }

    body {
        padding-top: 60px;
    }

    .section {
        padding: var(--space-10) 0;
    }

    .section-sm {
        padding: var(--space-8) 0;
    }

    .section-lg {
        padding: var(--space-16) 0;
    }

    .section-header {
        margin-bottom: var(--space-8);
    }

    .section-title {
        font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
    }

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

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

    /* Desktop-only elements hidden on mobile */
    .desktop-only {
        display: none;
    }

    /* Typography Adjustments */
    h1 {
        font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl));
    }

    h2 {
        font-size: clamp(var(--text-2xl), 6vw, var(--text-3xl));
    }

    h3 {
        font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
    }

    /* Button Adjustments */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn {
        width: 100%;
    }
}

/* Extra Small Devices (Portrait Phones, < 640px) */
@media (max-width: 640px) {
    :root {
        --container-padding: var(--space-3);
    }

    .section {
        padding: var(--space-8) 0;
    }

    .section-header {
        margin-bottom: var(--space-6);
    }
}

/* Landscape Orientation */
@media (max-height: 600px) and (orientation: landscape) {
    .section {
        padding: var(--space-8) 0;
    }

    .navbar {
        height: 50px;
    }

    body {
        padding-top: 50px;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .footer,
    .btn,
    .loader,
    .cursor,
    .cursor-follower {
        display: none !important;
    }

    body {
        padding-top: 0;
    }

    .main-content {
        min-height: auto;
    }

    .section {
        padding: var(--space-4) 0;
    }

    a {
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: var(--text-sm);
        color: var(--color-gray-600);
    }
}

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

    .loader-logo,
    .loader-progress {
        animation: none !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #B8941F;
        --color-gray-400: #666666;
        --color-gray-500: #555555;
    }

    .btn,
    .card,
    .form-input,
    .form-textarea,
    .form-select {
        border-width: 2px;
    }
}

/* Dark Mode Support (준비) */
@media (prefers-color-scheme: dark) {
    /* 추후 다크모드 지원 시 활성화 */
    /*
    :root {
        --color-white: #1a1a1a;
        --color-black: #ffffff;
        --color-gray-50: #2a2a2a;
        --color-gray-100: #3a3a3a;
    }
    */
}