/* =========================================
   14. 모바일 햄버거 메뉴 (완벽 터치 최적화)
   ========================================= */

/* ========== 모바일 햄버거 버튼 ========== */
.mobile-menu-toggle {
    /* 레이아웃 */
    display: none;
    position: relative;
    z-index: 101 !important; /* 헤더보다 위 */
    
    /* 크기 */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    
    /* 스타일 */
    background: transparent;
    border: none;
    border-radius: 8px;
    
    /* 텍스트 */
    font-size: 24px;
    color: #1e293b;
    line-height: 1;
    
    /* 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    
    /* 커서 */
    cursor: pointer;
    
    /* 터치 최적화 */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    
    /* 포인터 이벤트 */
    pointer-events: auto !important;
    
    /* 애니메이션 */
    transition: all 0.2s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(59, 130, 246, 0.1);
}

.mobile-menu-toggle:active {
    background: rgba(59, 130, 246, 0.2);
    transform: scale(0.95);
}

/* 햄버거 버튼 활성화 시 */
.mobile-menu-toggle.active {
    color: #3b82f6;
}

/* ========== 사이드바 오버레이 ========== */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* ========== 사이드바 모바일 제어 ========== */
@media (max-width: 768px) {
    /* 햄버거 버튼 표시 */
    .mobile-menu-toggle {
        display: flex !important;
        order: -1;
        margin-right: 0.5rem;
    }
    
    /* 사이드바 기본 숨김 */
    .sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 95;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }
    
    /* 사이드바 열림 */
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    /* 오버레이 표시 */
    .sidebar-overlay {
        display: block;
    }
    
    /* Body 스크롤 방지 */
    body.sidebar-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

/* ========== 태블릿 (769px ~ 1024px) ========== */
@media (min-width: 769px) and (max-width: 1024px) {
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .sidebar {
        transform: translateX(0) !important;
    }
}

/* ========== PC (1025px 이상) ========== */
@media (min-width: 1025px) {
    .mobile-menu-toggle {
        display: none !important;
    }
    
    .sidebar {
        transform: translateX(0) !important;
    }
    
    .sidebar-overlay {
        display: none !important;
    }
}

/* ========== 작은 모바일 (480px 이하) ========== */
@media (max-width: 480px) {
    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        font-size: 22px;
        margin-right: 0.375rem;
    }
    
    .sidebar {
        width: 260px;
    }
}

/* ========== 초소형 모바일 (360px 이하) ========== */
@media (max-width: 360px) {
    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 20px;
        margin-right: 0.25rem;
    }
    
    .sidebar {
        width: 240px;
    }
}

/* ========== 터치 디바이스 최적화 ========== */
@media (hover: none) and (pointer: coarse) {
    .mobile-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-menu-toggle:active {
        background: rgba(59, 130, 246, 0.3);
        transform: scale(0.9);
    }
}

/* ========== 가로 모드 ========== */
@media (max-height: 600px) and (orientation: landscape) {
    .sidebar {
        top: 50px;
    }
}

/* ========== 접근성 ========== */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu-toggle,
    .sidebar,
    .sidebar-overlay {
        transition: none;
    }
}

/* ========== 고대비 모드 ========== */
@media (prefers-contrast: high) {
    .mobile-menu-toggle {
        border: 2px solid currentColor;
    }
    
    .mobile-menu-toggle.active {
        background: rgba(59, 130, 246, 0.3);
    }
}

/* ========== z-index 계층 ========== */
/*
100: 헤더 (.app-header)
101: 햄버거 버튼 (.mobile-menu-toggle)
95:  사이드바 (.sidebar)
90:  오버레이 (.sidebar-overlay)
*/

/* ========== 클릭 영역 확장 (디버깅용) ========== */
@media (max-width: 768px) {
    .mobile-menu-toggle::before {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        /* 디버깅: 클릭 영역 확인용 (프로덕션에서는 제거) */
        /* background: rgba(255, 0, 0, 0.1); */
    }
}

/* 10/24 선생님 화면 점검 — 폰에서 누르기 쉽게(44px) · 아이폰은 16px 보다 작은 입력칸을 누르면 화면을 확대한다 */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
        font-size: 16px !important;
    }
    #myTours button, #mySettlement button, #myContractContent button, #myBoard button,
    #teacherSms button, #myFeedbackContent button, #mySettingsContent button,
    #myTours select, #myBoard select, #myFeedbackContent select, #myFeedbackContent input {
        min-height: 44px;
    }
}