/* ===== MOBILE ONLY IMPROVEMENTS - 20250109-02 ===== */
/* 데스크탑에는 전혀 영향을 주지 않음 */

/* ===== MOBILE DEVICES (320px - 480px) ===== */
@media screen and (max-width: 480px) {
    
    /* 모바일 세로모드에서 헤더 메뉴를 햄버거 메뉴로 변경 */
    .header-menu-grid {
        display: none !important;
    }
    
    .navbar-toggle {
        display: block !important;
        background: #2c3e50 !important;
        border: 2px solid #3498db !important;
        border-radius: 8px !important;
        padding: 0.5rem !important;
        cursor: pointer !important;
        z-index: 1000 !important;
        width: 3rem !important;
        height: 3rem !important;
        position: relative !important;
    }
    
    .navbar-toggle:hover {
        background: #34495e !important;
        border-color: #2980b9 !important;
    }
    
    /* 햄버거 아이콘 */
    .hamburger {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #ffffff !important;
        position: relative !important;
        margin: 0 auto !important;
    }
    
    .hamburger::before,
    .hamburger::after {
        content: '' !important;
        position: absolute !important;
        width: 20px !important;
        height: 2px !important;
        background: #ffffff !important;
        left: 0 !important;
    }
    
    .hamburger::before {
        top: -6px !important;
    }
    
    .hamburger::after {
        top: 6px !important;
    }
    
    /* 모바일 메뉴 오버레이 - 모바일 세로모드에서만 표시 */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9998;
        display: none;
    }
    
    .mobile-menu-overlay.active {
        display: block;
    }
    
    .mobile-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        z-index: 9999;
        transition: left 0.3s ease;
        overflow-y: auto;
        padding: 2rem 0;
    }
    
    .mobile-menu.active {
        left: 0;
    }
    
    .mobile-menu-header {
        padding: 2rem 2rem 1rem 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-menu-header h3 {
        color: white;
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0;
    }
    
    .mobile-menu-close {
        background: none;
        border: none;
        color: white;
        font-size: 2rem;
        cursor: pointer;
        padding: 0;
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
    }
    
    .mobile-menu-item {
        display: block;
        padding: 1rem 2rem;
        color: white;
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 500;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: background 0.3s ease;
    }
    
    .mobile-menu-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .mobile-menu-item.active {
        background: rgba(255, 255, 255, 0.2);
        font-weight: 600;
    }
    
    /* 모바일에서 헤더 메뉴 카드 시인성 개선 (햄버거 메뉴가 아닌 경우) */
    .header-menu-card {
        min-width: 3.5rem !important;
        height: 3.5rem !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        margin: 0 2px !important;
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
        color: #ffffff !important;
        border: 2px solid #3498db !important;
        box-shadow: 0 4px 12px rgba(52, 73, 94, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    }
    
    .header-menu-grid {
        gap: 0.4rem !important;
    }
    
    .header-menu-card .menu-text {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    }
    
    /* 모바일 세로모드에서 메인 메뉴 카드를 9행1열로 변경 */
    .menu-grid,
    #main-menu-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(9, auto) !important;
        gap: 1rem !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    .menu-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
    }
    
    .menu-card .menu-number {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .menu-card h3 {
        font-size: 1.3rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .menu-card p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1rem !important;
    }
    
    .menu-tags {
        margin-bottom: 1rem !important;
    }
    
    .menu-tags .tag {
        font-size: 0.9rem !important;
        padding: 0.3rem 0.6rem !important;
        margin: 0.2rem !important;
    }
    
    /* 모바일 세로보기에서 배경사진 섹션 여백 대폭 감소 */
    .background-image-section {
        height: 25vh !important;
        margin-top: 50px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        min-height: 200px !important;
        max-height: 250px !important;
    }
    
    /* 메인 메뉴 섹션과의 간격도 줄이기 */
    #main-menu {
        margin-top: 0 !important;
        padding-top: 1rem !important;
    }
}

/* ===== 모바일 가로화면과 데스크탑에서 모바일 메뉴 숨기기 ===== */
@media screen and (min-width: 481px) {
    /* 태블릿과 데스크탑에서 모바일 메뉴 완전히 숨기기 */
    .mobile-menu-overlay {
        display: none !important;
    }
    
    .mobile-menu {
        display: none !important;
    }
    
    .navbar-toggle {
        display: none !important;
    }
}

/* ===== MOBILE LANDSCAPE (가로화면) ===== */
@media screen and (max-width: 480px) and (orientation: landscape) {
    
    /* 기존 3열 스타일 완전히 무시 */
    .menu-grid[style*="grid-template-columns"],
    #main-menu-grid[style*="grid-template-columns"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 모바일 가로화면에서 9개 메뉴 모두 항상 보이도록 설정 */
    .header-menu-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.3rem !important;
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }
    
    /* 모바일 가로화면에서 메인 메뉴 카드를 2열로 변경 - 강제 적용 */
    .menu-grid,
    #main-menu-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto !important;
        gap: 1.2rem !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* 모든 메뉴 카드 강제 2열 적용 */
    .menu-card:nth-child(1),
    .menu-card:nth-child(2),
    .menu-card:nth-child(3),
    .menu-card:nth-child(4),
    .menu-card:nth-child(5),
    .menu-card:nth-child(6),
    .menu-card:nth-child(7),
    .menu-card:nth-child(8),
    .menu-card:nth-child(9) {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    
    .menu-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 1.2rem !important;
    }
    
    .menu-card .menu-number {
        font-size: 1.3rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    .menu-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.6rem !important;
    }
    
    .menu-card p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.8rem !important;
    }
    
    .menu-tags {
        margin-bottom: 0.8rem !important;
    }
    
    .menu-tags .tag {
        font-size: 0.8rem !important;
        padding: 0.2rem 0.5rem !important;
        margin: 0.1rem !important;
    }
    
    .header-menu-card {
        min-width: 2.8rem !important;
        height: 2.8rem !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin: 0 1px !important;
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
        color: #ffffff !important;
        border: 2px solid #3498db !important;
        box-shadow: 0 3px 8px rgba(52, 73, 94, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .header-menu-card .menu-text {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 선택된 메뉴도 다른 메뉴들과 함께 보이도록 */
    .header-menu-card.selected {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border-color: #667eea !important;
        transform: scale(1.05) !important;
    }
}

/* ===== TABLET DEVICES (481px - 768px) ===== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    
    /* 태블릿에서도 헤더 메뉴 시인성 약간 개선 */
    .header-menu-card {
        min-width: 3.2rem !important;
        height: 3.2rem !important;
        font-size: 1.0rem !important;
        font-weight: 600 !important;
        margin: 0 1px !important;
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
        color: #ffffff !important;
        border: 2px solid #3498db !important;
        box-shadow: 0 3px 10px rgba(52, 73, 94, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    }
    
    .header-menu-grid {
        gap: 0.3rem !important;
    }
    
    .header-menu-card .menu-text {
        font-size: 1.0rem !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    }
}