/**
 * 모바일 드롭다운 메뉴 통합 CSS
 * 모든 모바일 드롭다운 관련 스타일을 한 곳에서 관리
 */

/* ============================================
   PC에서 모바일 드롭다운 숨김
   ============================================ */
.dropdown-item.mobile-dropdown,
.dropdown-item.mobile-dropdown * {
    display: none !important;
}

/* ============================================
   모바일 반응형 (768px 이하)
   ============================================ */
@media (max-width: 768px) {
    /* 모바일에서 desktop-menu 숨김 */
    .dropdown-item.desktop-menu {
        display: none !important;
    }
    
    /* 모바일에서 mobile-dropdown 표시 */
    .dropdown-item.mobile-dropdown {
        display: block !important;
        position: relative !important;
        overflow: visible !important;
        z-index: 100 !important;
    }
    
    /* 드롭다운 메뉴 컨테이너 */
    .dropdown-menus {
        flex: 1 !important;
        display: flex !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        overflow: visible !important;
        width: 100% !important;
        margin-left: 0 !important;
        position: relative !important;
        z-index: 999 !important;
    }
    
    /* 부모 컨테이너도 overflow 허용 */
    .submenu-container,
    .submenu-area {
        overflow: visible !important;
    }
    
    /* 모바일 드롭다운 버튼 */
    .dropdown-item.mobile-dropdown .dropdown-btn {
        min-width: calc(100vw - 80px) !important;
        max-width: calc(100vw - 80px) !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        padding: 0 40px 0 15px !important;
        font-size: 16px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
        position: relative !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 100 !important;
        -webkit-tap-highlight-color: transparent !important;
        background: white !important;
        border: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* 모바일 드롭다운 버튼 텍스트 */
    .dropdown-item.mobile-dropdown .dropdown-btn-text {
        display: block !important;
        flex: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #333 !important;
        visibility: visible !important;
        opacity: 1 !important;
        white-space: nowrap !important;
        padding-right: 30px !important;
        pointer-events: none !important;
    }
    
    /* 모바일 드롭다운 버튼 아이콘 (우측 정렬) */
    .dropdown-item.mobile-dropdown .dropdown-btn-icon {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: auto !important;
        height: auto !important;
        display: inline-block !important;
        pointer-events: none !important;
    }
    
    /* 모바일 드롭다운 콘텐츠 - 기본적으로 숨김 */
    /* PC용 menu3-content와 구분하기 위해 더 구체적인 선택자 사용 */
    .dropdown-item.mobile-dropdown > .dropdown-content:not(.menu3-content),
    .dropdown-item.mobile-dropdown .dropdown-content:not(.menu3-content) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* 모바일 드롭다운 콘텐츠 - 열렸을 때 표시 (최고 우선순위) */
    /* PC용 menu3-content와 구분 */
    .dropdown-item.mobile-dropdown.open > .dropdown-content:not(.menu3-content),
    .dropdown-item.mobile-dropdown.open .dropdown-content:not(.menu3-content),
    .dropdown-item.mobile-dropdown.open .dropdown-content[style*="display"]:not(.menu3-content),
    div.dropdown-item.mobile-dropdown.open div.dropdown-content:not(.menu3-content) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
        margin-top: 0 !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
        border-radius: 0 0 4px 4px !important;
        background: #4a7ba7 !important;
    }
    
    /* 모바일 드롭다운 콘텐츠 링크 (PC용 menu3-content와 구분) */
    .dropdown-item.mobile-dropdown .dropdown-content:not(.menu3-content) a {
        display: block !important;
        padding: 12px 15px !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .dropdown-item.mobile-dropdown .dropdown-content:not(.menu3-content) a:last-child {
        border-bottom: none !important;
    }
    
    .dropdown-item.mobile-dropdown .dropdown-content:not(.menu3-content) a:hover {
        opacity: 0.9 !important;
    }
    
    .dropdown-item.mobile-dropdown .dropdown-content:not(.menu3-content) a.active {
        font-weight: 600 !important;
    }
}