/**
 * responsive.css - 반응형 스타일시트
 * 위치: /assets/css/responsive.css
 *
 * 브레이크포인트:
 * - Desktop: 1200px+
 * - Tablet: 768px - 1199px
 * - Mobile: 480px - 767px
 * - Small Mobile: < 480px
 */

/* ==========================================
   LARGE DESKTOP (1400px+)
   ========================================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }

    .container-lg {
        max-width: 1600px;
    }
}

/* ==========================================
   DESKTOP (1200px - 1399px)
   ========================================== */
@media (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }

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

/* ==========================================
   TABLET LANDSCAPE (992px - 1199px)
   ========================================== */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    /* Navigation adjustments */
    .nav-list > li > a {
        padding: var(--space-sm) var(--space-sm);
        font-size: 0.875rem;
    }

    .nav-icon {
        display: none;
    }

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

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

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

/* ==========================================
   TABLET PORTRAIT (768px - 991px)
   ========================================== */
@media (max-width: 991px) {
    :root {
        --space-3xl: 48px;
        --space-2xl: 32px;
    }

    .container {
        max-width: 720px;
    }

    /* Header */
    .main-nav {
        display: none;
    }

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

    /* Typography */
    h1, .section-title { font-size: 2rem; }
    h2, .page-title { font-size: 1.75rem; }
    h3 { font-size: 1.375rem; }

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

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

    /* Game UI */
    .hints-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .timer-display {
        font-size: 3rem;
    }

    .answer-input {
        font-size: 1.25rem;
        padding: var(--space-md) var(--space-lg);
    }

    .score-display {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .score-item {
        flex: 1 1 calc(50% - var(--space-md));
    }

    /* Ranking Table */
    .ranking-table {
        font-size: 0.875rem;
    }

    .ranking-table th,
    .ranking-table td {
        padding: var(--space-sm);
    }

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

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

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

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

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}

/* ==========================================
   MOBILE (576px - 767px)
   ========================================== */
@media (max-width: 767px) {
    :root {
        --space-3xl: 40px;
        --space-2xl: 28px;
        --space-xl: 24px;
    }

    .container {
        max-width: 100%;
        padding: 0 var(--space-md);
    }

    /* Header */
    .site-header {
        height: 60px;
    }

    .site-header.scrolled {
        height: 56px;
    }

    .logo .logo-text {
        display: none;
    }

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

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

    .user-name {
        display: none;
    }

    /* Main Content */
    .site-main {
        padding-top: 60px;
    }

    /* Typography */
    h1, .section-title { font-size: 1.75rem; }
    h2, .page-title { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }

    .section-desc {
        font-size: 1rem;
    }

    /* Page Hero */
    .page-hero {
        padding: calc(60px + var(--space-xl)) 0 var(--space-xl);
    }

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

    /* Game UI */
    .game-container {
        padding: var(--space-md);
    }

    .timer-display {
        font-size: 2.5rem;
    }

    .answer-input {
        font-size: 1.125rem;
        padding: var(--space-md);
    }

    .hint-card {
        max-width: 100%;
        padding: var(--space-md);
    }

    .score-display {
        padding: var(--space-md);
    }

    .score-item {
        flex: 1 1 100%;
    }

    .score-value {
        font-size: 1.25rem;
    }

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

    .btn-lg {
        padding: var(--space-md) var(--space-xl);
        font-size: 1rem;
    }

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

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

    /* Modals */
    .modal {
        width: 95%;
        max-height: 85vh;
    }

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

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

    .toast {
        min-width: auto;
        width: 100%;
    }

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

    .footer-brand {
        grid-column: auto;
    }

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

    .footer-links ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-sm) var(--space-md);
    }

    .footer-links li {
        margin-bottom: 0;
    }

    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* FAQ */
    .faq-question {
        padding: var(--space-md);
    }

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

    .faq-answer-content {
        padding: 0 var(--space-md) var(--space-md);
    }

    /* Upload Area */
    .upload-area {
        padding: var(--space-xl);
    }

    .upload-area .upload-icon {
        font-size: 2rem;
    }

    /* Create Page - Hint Items */
    .hint-item-form {
        flex-direction: column;
    }

    .hint-item-form .form-input {
        width: 100%;
    }
}

/* ==========================================
   SMALL MOBILE (< 576px)
   ========================================== */
@media (max-width: 575px) {
    :root {
        --space-3xl: 32px;
        --space-2xl: 24px;
        --space-xl: 20px;
        --space-lg: 16px;
    }

    body {
        font-size: 15px;
    }

    /* Header */
    .site-header {
        height: 56px;
    }

    .site-header .container {
        padding: 0 var(--space-sm);
    }

    .header-actions {
        gap: var(--space-xs);
    }

    .header-actions .btn-outline,
    .header-actions .btn-primary:not(.user-btn) {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    /* Typography */
    h1, .section-title { font-size: 1.5rem; }
    h2, .page-title { font-size: 1.375rem; }
    h3 { font-size: 1.125rem; }

    .section-desc,
    .page-desc {
        font-size: 0.9375rem;
    }

    /* Game UI */
    .timer-display {
        font-size: 2rem;
    }

    .timer-progress {
        height: 6px;
    }

    .answer-input {
        font-size: 1rem;
        padding: var(--space-sm) var(--space-md);
    }

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

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

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

    .btn-icon {
        width: 40px;
        height: 40px;
    }

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

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

    /* Ranking Table - Horizontal Scroll */
    .ranking-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ranking-table {
        min-width: 500px;
    }

    /* Mobile Navigation */
    .mobile-nav {
        width: 85%;
    }

    .mobile-nav-list li a {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9375rem;
    }

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

    /* Footer */
    .site-footer {
        padding: var(--space-xl) 0 var(--space-md);
    }

    .footer-links h4 {
        font-size: 0.9375rem;
    }

    .footer-links a {
        font-size: 0.8125rem;
    }

    .footer-bottom {
        font-size: 0.75rem;
    }
}

/* ==========================================
   EXTRA SMALL (< 400px)
   ========================================== */
@media (max-width: 399px) {
    .container {
        padding: 0 var(--space-sm);
    }

    h1, .section-title { font-size: 1.375rem; }
    h2, .page-title { font-size: 1.25rem; }

    .timer-display {
        font-size: 1.75rem;
    }

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

    .btn {
        font-size: 0.8125rem;
        padding: 8px 12px;
    }
}

/* ==========================================
   LANDSCAPE MODE (Mobile)
   ========================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .site-header {
        height: 50px;
    }

    .site-main {
        padding-top: 50px;
    }

    .page-hero {
        padding: calc(50px + var(--space-lg)) 0 var(--space-lg);
    }

    .game-container {
        padding: var(--space-sm);
    }

    .timer-display {
        font-size: 2rem;
    }

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

    .loading-screen .loading-logo .logo-icon {
        font-size: 2rem;
    }
}

/* ==========================================
   HIGH DPI / RETINA DISPLAYS
   ========================================== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    /* Sharper borders */
    .card,
    .btn,
    .form-input,
    .form-textarea,
    .form-select {
        border-width: 0.5px;
    }
}

/* ==========================================
   HOVER CAPABILITY (Desktop/Laptop)
   ========================================== */
@media (hover: hover) and (pointer: fine) {
    /* Enable hover effects only on devices that support it */
    .btn:hover:not(:disabled) {
        transform: translateY(-2px);
    }

    .card:hover {
        transform: translateY(-4px);
    }

    .hint-card:hover {
        transform: scale(1.02);
    }
}

/* ==========================================
   TOUCH DEVICES
   ========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
    }

    .nav-list > li > a,
    .mobile-nav-list li a {
        min-height: 44px;
    }

    .form-input,
    .form-textarea,
    .form-select {
        min-height: 44px;
    }

    /* Remove hover effects */
    .btn:hover {
        transform: none;
    }

    .card:hover {
        transform: none;
    }
}

/* ==========================================
   REDUCED MOTION (Accessibility)
   ========================================== */
@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;
    }

    .loading-progress {
        animation: none;
        width: 100%;
    }

    .timer-display.warning,
    .timer-display.danger {
        animation: none;
    }
}

/* ==========================================
   DARK MODE PREFERENCE (Already dark, but ensure consistency)
   ========================================== */
@media (prefers-color-scheme: dark) {
    /* Already using dark theme, no changes needed */
}

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

    /* Reset colors for printing */
    body {
        background: white;
        color: black;
    }

    .card {
        background: white;
        border: 1px solid #ccc;
        box-shadow: none;
    }

    h1, h2, h3, h4, h5, h6 {
        color: black;
    }

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

    /* Ensure content fits on page */
    .site-main {
        padding: 0;
    }

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

    /* Page breaks */
    .section {
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }
}