/*
 * ===================================================================
 * 강의 GNB 헤더 전용 스타일
 * -------------------------------------------------------------------
 * 이 파일은 header-archive-lecture.php 템플릿의 모든 스타일을 제어합니다.
 * - 데스크톱: 호버 기반 드롭다운 GNB
 * - 모바일: 오버레이 방식의 전체 메뉴
 * ===================================================================
 */

/* ===================================================================
   1. 헤더 기본 레이아웃
   =================================================================== */
.sf-lt-one-gnb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
    position: relative; /* 드롭다운 메뉴의 기준점 */
    z-index: 1000; /* 다른 요소들 위에 오도록 설정 */
}
.sf-lt-one-gnb-header__left,
.sf-lt-one-gnb-header__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.sf-lt-one-site-branding .sf-lt-one-custom-logo-link img {
    max-height: 40px;
    width: auto;
    display: block;
}
.sf-lt-one-site-branding .sf-lt-one-site-title-link {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}
.sf-lt-one-icon-button svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* ===================================================================
   2. 데스크톱 드롭다운 메뉴 (호버 안정성 개선)
   =================================================================== */
.sf-lt-one-custom-dropdown-nav {
    display: flex;
    gap: 1rem;
}
.sf-lt-one-dropdown-container {
    position: relative;
}

/* 트리거와 드롭다운 사이의 끊김을 방지하는 투명 브릿지(다리) 역할 */
.sf-lt-one-dropdown-container::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.5rem; /* 드롭다운의 margin-top과 동일한 높이 */
    background-color: transparent;
}

.sf-lt-one-dropdown-trigger {
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    color: #333;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 101; /* 드롭다운 메뉴보다 위에 위치 */
}
.sf-lt-one-dropdown-trigger::after {
    content: ' ▼';
    font-size: 0.7em;
    margin-left: 0.5em;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}
.sf-lt-one-dropdown-container:hover .sf-lt-one-dropdown-trigger::after {
    transform: rotate(180deg); /* 호버 시 화살표 회전 */
}

.sf-lt-one-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    min-width: 200px;
    padding: 0.5rem 0;
    z-index: 100;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
}

/* [핵심] 컨테이너에 호버했을 때 드롭다운이 나타나도록 변경 */
.sf-lt-one-dropdown-container:hover .sf-lt-one-dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sf-lt-one-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sf-lt-one-dropdown-list li a {
    display: block;
    padding: 0.5rem 1.5rem;
    text-decoration: none;
    color: #555;
    white-space: nowrap;
}
.sf-lt-one-dropdown-list li a:hover {
    background-color: #f0f0f0;
}


/* ===================================================================
   3. 모바일 메뉴 오버레이 (구조 개선)
   =================================================================== */
.sf-lt-one-mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    transition: left 0.3s ease-in-out;
}
.sf-lt-one-mobile-menu-overlay.is-open {
    left: 0;
}

/* 닫기 버튼은 패딩 없는 오버레이를 기준으로 위치 */
#sf-lto-mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
}

/* 실제 메뉴 내용을 담는 컨테이너에 패딩과 스크롤 적용 */
.sf-lt-one-mobile-menu-content {
    padding: 2rem;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.sf-lt-one-mobile-menu-group {
    margin-bottom: 2rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 1rem;
}
.sf-lt-one-mobile-menu-title {
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
}
.sf-lt-one-mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sf-lt-one-mobile-menu-list li a {
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
}
body.mobile-menu-is-open {
    overflow: hidden; /* 배경 페이지 스크롤 방지 */
}


/* ===================================================================
   4. 반응형 제어
   =================================================================== */
.sf-lto-desktop-only {
    display: flex;
}
.sf-lto-mobile-only {
    display: none !important;
}

@media screen and (max-width: 991px) {
    .sf-lto-desktop-only {
        display: none !important;
    }
    .sf-lto-mobile-only {
        display: inline-flex !important;
    }
    .sf-lt-one-gnb-header {
        padding: 0 1rem;
    }
    .sf-lt-one-gnb-header__right {
        gap: 0.5rem;
    }
    
    /* 모바일에서 아이콘 순서 재정렬 (flexbox order 속성 사용) */
    #sf-lto-mobile-menu-toggle { order: 3; }
    #sf-lto-share-button { order: 1; }
    #sf-lto-search-toggle { order: 2; }
}