/* 좌측 서브메뉴 호버 효과 CSS - 아래로 표시 */

/* 좌측 영역이 우측 컨텐츠보다 위에 표시되도록 설정 */
#left_area {
    position: relative !important;
    z-index: 999 !important;
    overflow: visible !important;
}

.left_snb {
    position: relative !important;
    z-index: 999 !important;
    overflow: visible !important;
}

/* 우측 영역의 z-index를 낮춤 */
#right_area {
    position: relative !important;
    z-index: 1 !important;
}

/* 메뉴 리스트 기본 설정 */
.left_snb ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 1000;
}

/* 상위 메뉴 스타일 개선 - 진한 파란색 계열 */
.left_snb > ul > li > a {
    background: #fff !important;
    color: #333 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    transition: all 0.3s !important;
    font-weight: 500 !important;
}

.left_snb > ul > li:hover > a {
    background: #1c65c8 !important;
    color: #fff !important;
    border-bottom: 1px solid #1c65c8 !important;
}

.left_snb > ul > li.on > a {
    background: #0052cc !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* 하위 메뉴가 있는 항목 표시 */
.left_snb li.has_sub > a,
#snb li.has_sub > a {
    position: relative;
    padding-right: 30px !important;
    transition: all 0.3s ease !important;
}

.left_snb li.has_sub > a::before,
#snb li.has_sub > a::before {
    content: "▼";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #999;
    transition: all 0.3s ease;
}

.left_snb li.has_sub:hover > a::before,
#snb li.has_sub:hover > a::before {
    transform: translateY(-50%) rotate(180deg);
    color: #1c65c8;
}

.left_snb li.has_sub.on > a::before {
    color: #fff !important;
}

/* 하위 메뉴 스타일 - 아래로 표시 - 연한 회색 배경 */
.left_snb ul.sub_menu,
.left_snb .sub_menu,
#snb ul.sub_menu,
#snb .sub_menu,
.snb_menu ul.sub_menu,
.snb_menu .sub_menu {
    display: none !important;
    position: relative !important;
    z-index: 9999 !important;
    background: #f5f7fa !important;
    border-left: 3px solid #66a3ff !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    list-style: none !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 호버 시 하위 메뉴 표시 - 더 구체적인 선택자 */
.left_snb li.has_sub:hover > ul.sub_menu,
.left_snb li:hover > ul.sub_menu,
#snb li.has_sub:hover > ul.sub_menu,
#snb li:hover > ul.sub_menu,
.snb_menu > li.has_sub:hover > ul.sub_menu,
.snb_menu > li:hover > ul.sub_menu {
    display: block !important;
}

/* 하위 메뉴 아이템 스타일 */
.left_snb ul.sub_menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e1e6eb !important;
}

.left_snb ul.sub_menu > li:last-child {
    border-bottom: none !important;
}

.left_snb ul.sub_menu > li > a {
    display: block !important;
    padding: 10px 15px 10px 30px !important;
    color: #666 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    font-weight: 400 !important;
    transition: all 0.2s !important;
    position: relative !important;
}

/* 하위 메뉴 링크 화살표 */
.left_snb ul.sub_menu > li > a::before {
    content: "›";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #99b3cc;
    font-size: 16px;
    transition: all 0.2s;
}

/* 하위 메뉴 링크 after 요소 제거 */
.left_snb ul.sub_menu > li > a::after {
    display: none !important;
}

.left_snb ul.sub_menu > li > a:hover {
    background: #e8ecf0 !important;
    color: #333 !important;
    padding-left: 35px !important;
}

.left_snb ul.sub_menu > li > a:hover::before {
    color: #4d7fb8 !important;
    left: 18px;
}

.left_snb ul.sub_menu > li.on > a {
    background: #dce2e8 !important;
    color: #1c65c8 !important;
    font-weight: 500 !important;
}

.left_snb ul.sub_menu > li.on > a::before {
    color: #1c65c8 !important;
}

/* 상위 메뉴가 활성화된 경우 하위 메뉴 표시 */
.left_snb > ul > li.on > ul.sub_menu {
    display: block !important;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    /* 모바일에서는 호버 대신 클릭으로 작동 */
    .left_snb li.has_sub:hover > ul.sub_menu {
        display: none !important;
    }
    
    .left_snb li.has_sub.active > ul.sub_menu {
        display: block !important;
    }
    
    /* 모바일에서 하위 메뉴 스타일 조정 */
    .left_snb ul.sub_menu {
        border-left: none !important;
        border-top: 1px solid #e0e0e0 !important;
    }
}