/* responsive.css */
@media (max-width: 992px) {
    .word-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    
    .lib-detail-container {
        flex-direction: column;
    }
    
    .unit-list {
        width: 100%;
    }
    
    .learning-settings {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .quiz-options {
        grid-template-columns: 1fr;
    }
    
    .word-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    
    .record-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .calendar-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .main-menu {
        padding: var(--space-lg);
        gap: var(--space-lg);
    }
    
    .spelling-display {
        min-width: 280px;
        font-size: 2rem;
    }
    
    .letter-tile {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
    }

    .word-card-pill {
        width: 100%;
        justify-content: center;
    }

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

    #mainPage .header {
        padding: calc(var(--space-lg) + env(safe-area-inset-top)) var(--space-md) var(--space-lg) !important;
    }

    #mainPage .header-content {
        flex-direction: column;
        gap: var(--space-md);
    }

    #mainPage .header h1 {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
        letter-spacing: 1px !important;
    }

    #mainPage .header .header-subtitle {
        font-size: 0.9rem !important;
    }

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

    .menu-icon {
        width: 64px;
        height: 64px;
    }

    .menu-icon i {
        font-size: 1.8rem;
    }

    .user-info-compact {
        width: 100%;
        justify-content: center;
        justify-items: center;
        padding: var(--space-xs);
        font-size: 0.84rem;
    }

    .user-info-compact .account-type,
    .user-info-compact .remaining-days {
        padding: 2px 8px;
        font-size: 0.76rem;
    }

    .user-info-compact .sync-btn,
    .user-info-compact .guide-btn,
    .user-info-compact .btn-logout {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

@media (max-width: 600px) {
    .content {
        padding: var(--space-md);
    }

    .main-menu {
        padding: var(--space-md);
        gap: var(--space-md);
    }

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

    .menu-card h2 {
        font-size: 1.25rem;
    }

    .menu-card p {
        font-size: 0.9rem;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header h1 {
        font-size: 1.5rem;
    }
    
    .header h1 i {
        font-size: 1.3rem;
    }
    
    .main-menu {
        grid-template-columns: 1fr;
    }
    
    .word-grid {
        grid-template-columns: 1fr;
    }
    
    .quiz-word {
        font-size: 2rem;
    }
    
    .spelling-controls {
        flex-direction: column;
    }
    
    .spelling-controls .btn {
        width: 100%;
        justify-content: center;
    }
    
    .top-right-buttons {
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .back-btn, .refresh-btn {
        font-size: 0.85rem;
        padding: var(--space-xs) var(--space-sm);
    }
}