/* ═══════════════════════════════════════════════════════════
   반응형 스타일
   ═══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .container { padding: 0 1.5rem; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .hide-tablet { display: none !important; }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
    }

    html { font-size: 15px; }
    .container { padding: 0 1rem; }

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

    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }

    .main-content {
        padding-top: calc(var(--nav-height) + 1rem);
        padding-bottom: 2rem;
    }

    /* Navbar Mobile */
    .nav-links {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        flex-direction: column;
        padding: 1rem;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-smooth);
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links a {
        padding: 0.75rem 1rem;
        border-radius: var(--radius-sm);
    }

    .hamburger { display: flex !important; }

    /* Tables */
    .table-wrap { font-size: 0.85rem; }
    th, td { padding: 0.6rem 0.5rem; }

    /* Cards */
    .card { padding: 1rem; }

    /* Buttons */
    .btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
    .btn-lg { padding: 0.8rem 1.5rem; font-size: 1rem; }

    /* Flash messages */
    .flash-messages {
        left: 1rem;
        right: 1rem;
    }
    .flash-msg {
        min-width: auto;
        max-width: none;
    }

    /* Match detail */
    .match-versus { flex-direction: column; gap: 1.5rem; }
    .match-versus .vs-divider { transform: rotate(90deg); }
}

/* Small Mobile */
@media (max-width: 480px) {
    html { font-size: 14px; }
    .container { padding: 0 0.75rem; }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }

    .pagination {
        gap: 0.3rem;
    }
    .pagination a, .pagination span {
        min-width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }
}