/* 메뉴 스타일 (주메뉴 + 부메뉴) */

/* PC 부메뉴 버튼 컨테이너 */
.lecture-submenu-buttons,
.timetable-submenu-buttons {
    position: relative;
    z-index: 10;
    display: none; /* 기본적으로 숨김, JavaScript로 제어 */
    width: 100%;
    margin-bottom: 20px;
    margin-top: 0;
}

/* PC에서 부메뉴 버튼을 주메뉴 컨테이너 바로 아래 배치 */
@media screen and (min-width: 769px) {
    .lecture-submenu-buttons,
    .timetable-submenu-buttons {
        position: relative !important; /* menu-container 내부에서 relative */
        top: 0 !important;
        right: auto !important;
        left: auto !important;
        width: auto !important; /* 콘텐츠 넓이에 맞춤 (주메뉴와 동일) */
        max-width: none !important;
        z-index: 1002 !important;
        background: rgba(0, 0, 0, 0.1) !important; /* 헤더 배경과 동일 */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important; /* 패딩 제거 (내부 form에서 처리) */
        box-sizing: border-box !important;
        display: none !important; /* 기본적으로 숨김 */
        justify-content: flex-end !important; /* 우측 정렬 */
        pointer-events: auto !important;
    }
    
    /* 현재 페이지에 맞는 부메뉴만 표시 (초기 상태) */
    .lecture-submenu-buttons.current-page-submenu,
    .timetable-submenu-buttons.current-page-submenu {
        display: flex !important;
    }
    
    .lecture-submenu-buttons form,
    .timetable-submenu-buttons form {
        display: flex !important;
        justify-content: flex-end !important; /* 우측 정렬 */
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        pointer-events: auto !important;
        width: 100% !important; /* 부모 컨테이너 폭에 맞춤 */
    }
    
    .lecture-submenu-btn {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 1003 !important;
    }
    
    /* 부메뉴 버튼의 마지막 버튼 오른쪽 패딩을 주메뉴와 정확히 맞추기 */
    .lecture-submenu-buttons form .lecture-submenu-btn:last-child,
    .timetable-submenu-buttons form .lecture-submenu-btn:last-child {
        margin-right: 0 !important;
        padding-right: 16px !important; /* 주메뉴와 동일한 오른쪽 패딩 (10px 16px) */
    }
}

/* 부메뉴 버튼 폼 */
.lecture-submenu-buttons form,
.timetable-submenu-buttons form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

/* 부메뉴 버튼 기본 스타일 (통일된 색상) */
.lecture-submenu-btn {
    padding: 6px 20px !important; /* 내부 여백 증가 */
    margin: 0 !important;
    border: none !important; /* 보더 제거 */
    border-color: transparent !important; /* 보더 색상 제거 */
    background: transparent !important; /* 배경색 없음 (선택 안 된 상태) */
    color: #fff !important;
    font-size: 14px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: all 0.3s !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    outline: none !important; /* 아웃라인 제거 */
    outline-offset: 0 !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.lecture-submenu-btn:hover,
.lecture-submenu-btn:focus,
.lecture-submenu-btn:focus-visible,
.lecture-submenu-btn:focus-within,
.lecture-submenu-btn:active {
    background: transparent !important; /* hover 시에도 배경색 없음 */
    border: none !important; /* 보더 제거 */
    border-color: transparent !important; /* 보더 색상 제거 */
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.lecture-submenu-btn.active,
.lecture-submenu-btn.active:hover,
.lecture-submenu-btn.active:focus,
.lecture-submenu-btn.active:focus-visible,
.lecture-submenu-btn.active:active {
    background: rgba(255, 255, 255, 0.15) !important; /* 주메뉴 선택 조건과 통일 */
    color: #fff !important;
    border: none !important; /* 보더 제거 */
    border-color: transparent !important; /* 보더 색상 제거 */
    font-weight: 400 !important; /* 주메뉴와 동일 */
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* ended 클래스가 있어도 선택되지 않은 경우(active가 아닌 경우)는 기본 스타일과 동일 */
.lecture-submenu-btn.ended:not(.active) {
    background: transparent !important; /* 선택 안 된 상태와 동일 */
    color: #fff !important;
    border: none !important; /* 보더 제거 */
    border-color: transparent !important; /* 보더 색상 제거 */
}

.lecture-submenu-btn.ended:not(.active):hover {
    background: transparent !important; /* 선택 안 된 상태와 동일 */
    border: none !important; /* 보더 제거 */
    border-color: transparent !important; /* 보더 색상 제거 */
}

/* 모바일 반응형 */
@media screen and (max-width: 768px) {
    /* 모바일에서 부메뉴 버튼 - 기본적으로 숨김 */
    .lecture-submenu-buttons,
    .timetable-submenu-buttons {
        display: none !important;
        position: relative !important; /* menu-container 내부에서 relative */
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background-color: #000000 !important; /* 주메뉴와 동일 */
        padding: 12px 0 !important; /* 주메뉴와 동일 */
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2) !important; /* 주메뉴와 동일 */
        z-index: 1002 !important;
        text-align: center !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        top: auto !important;
        box-sizing: border-box !important;
    }
    
    /* 모바일에서 현재 페이지에 해당하는 부메뉴만 표시 */
    .lecture-submenu-buttons.current-page-submenu,
    .timetable-submenu-buttons.current-page-submenu {
        display: flex !important; /* block에서 flex로 변경 - 좌우 배치 */
        flex-direction: row !important; /* 좌우 배치 */
        gap: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* form이 있는 경우와 없는 경우 모두 대응 */
    .lecture-submenu-buttons form,
    .timetable-submenu-buttons form {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* form이 없는 경우를 위한 직접 스타일 - 버튼들이 div 안에 직접 있을 때 */
    .lecture-submenu-buttons > button,
    .timetable-submenu-buttons > button {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    
    .lecture-submenu-buttons .lecture-submenu-btn,
    .timetable-submenu-buttons .lecture-submenu-btn {
        padding: 12px 8px !important; /* 주메뉴와 동일한 패딩 */
        font-size: 16px !important; /* 주메뉴(18px)보다 작게 */
        flex: 1 1 auto !important; /* 주메뉴와 동일 */
        text-align: center !important; /* 주메뉴와 동일 */
        position: relative !important; /* 주메뉴와 동일 */
        max-width: none !important;
        background-color: rgba(255, 255, 255, 0.05) !important; /* 주메뉴와 동일 */
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 주메뉴와 동일 */
        border-radius: 4px !important; /* 주메뉴와 동일 */
        margin: 0 4px !important; /* 주메뉴와 동일 */
        transition: all 0.3s !important;
        font-family: 'Noto Sans KR', sans-serif !important;
        font-weight: 400 !important; /* 주메뉴와 동일 */
        white-space: nowrap !important;
        display: block !important;
        text-decoration: none !important;
    }
    
    .lecture-submenu-buttons .lecture-submenu-btn.active,
    .timetable-submenu-buttons .lecture-submenu-btn.active {
        background-color: rgba(255, 255, 255, 0.2) !important; /* 주메뉴와 동일 */
        color: #ffffff !important;
        font-weight: 400 !important; /* 주메뉴와 동일 */
    }
    
    .lecture-submenu-buttons .lecture-submenu-btn:hover,
    .timetable-submenu-buttons .lecture-submenu-btn:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* ended 클래스가 있어도 선택되지 않은 경우(active가 아닌 경우)는 기본 스타일과 동일 */
    .lecture-submenu-buttons .lecture-submenu-btn.ended:not(.active),
    .timetable-submenu-buttons .lecture-submenu-btn.ended:not(.active) {
        background-color: rgba(255, 255, 255, 0.05) !important; /* 주메뉴와 동일 */
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 주메뉴와 동일 */
    }
    
    .lecture-submenu-buttons .lecture-submenu-btn.ended:not(.active):hover,
    .timetable-submenu-buttons .lecture-submenu-btn.ended:not(.active):hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 모바일에서 직전 강좌 버튼 숨김 */
    .lecture-submenu-buttons .submenu-btn-previous1,
    .lecture-submenu-buttons .submenu-btn-previous2,
    .timetable-submenu-buttons .submenu-btn-previous1,
    .timetable-submenu-buttons .submenu-btn-previous2,
    .lecture-submenu-btn.submenu-btn-previous1,
    .lecture-submenu-btn.submenu-btn-previous2 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}