/* 상단(GNB) 메뉴 공용 스타일 - mng/setup_topmenu_form.php 에서 관리 */
.top-menu-icon { height: 16px; vertical-align: middle; margin-right: 4px; }
.top-menu-badge { display: inline-block; margin-left: 3px; padding: 1px 5px; border-radius: 8px; color: #fff; font-size: 10px; line-height: 1.4; vertical-align: middle; }
/*
 * 하위메뉴는 CSS :hover 가상클래스로 켜고 끄지 않음.
 * .hd_pc/.hd_m 이 transform으로 GPU 레이어에 강제 승격되어 있는데, CSS :hover로 동적으로
 * 나타나는 절대위치 박스를 추가하면 스크롤 중 컴포지팅이 불안정해져 헤더가 순간적으로
 * 깜빡이며 사라지는 문제가 확인됨(2026-07-09) — 그래서 마우스오버 표시는
 * top_menu.js의 mouseenter/mouseleave(JS 이벤트)로 .hover-open 클래스를 토글해서 구현.
 *
 * position:absolute로 문서 흐름에서 완전히 빼내서, 하위메뉴가 있는 항목이
 * 메뉴 줄(.hd_sub_wp 등 높이 고정 컨테이너) 자체의 높이를 늘리지 않도록 함.
 * (문서 흐름에 그대로 뒀을 때, 항목이 길어지면서 메뉴 줄이 위로도 넘쳐 로고를
 *  덮어버리는 문제가 있었음 — 2026-07-09 확인)
 */
.has-submenu {
    position: relative;
}
.hd_sub_menu_li .top-menu-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 96px;
    margin: 0;
    padding: 6px 0 2px;
    list-style: none;
    background: #fff;
    border: 1px solid #eee;
    z-index: 10;
}
.hd_sub_menu_li.has-submenu.hover-open > .top-menu-submenu {
    display: block;
}
.hd_sub_menu_li .top-menu-submenu li a {
    display: block;
    padding: 4px 10px;
    font-size: 13px;
    color: #777;
    white-space: nowrap;
}
.top-menu-submenu-mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 96px;
    background: #fff;
    border: 1px solid #eee;
    z-index: 10;
    padding: 4px 0;
}
li.has-submenu.open > .top-menu-submenu-mobile {
    display: block;
}
.top-menu-submenu-mobile li a {
    white-space: nowrap;
    padding: 4px 10px;
}