/* Style for LI elements containing submenus */
#DB_navi42 li.has-submenu {
    position: relative;
    display: flex;
    /* align-items: stretch; */ /* 변경: stretch 대신 center 사용 */
    align-items: center;      /* 변경: 링크와 토글을 수직 중앙 정렬 */
    flex-wrap: wrap;
    border-top: 1px solid #ddd;
}
/* Remove top border from the very first item */
#DB_navi42 > li:first-child {
    border-top: 1px solid #ddd;
}

/* Adjust the link style */
#DB_navi42 li.has-submenu > a {
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 12px 45px 12px 20px;
    color: #000;
    font-weight: bold;
    min-height: 50px; /* 1차 메뉴 높이 기준 */
    box-sizing: border-box;
    text-decoration: none;
    height: auto;
    line-height: normal;
}

/* Style for the toggle span */
#DB_navi42 .menu-toggle {
    position: absolute;
    right: 0;
    top: 0; /* 상단에 고정 */
    width: 45px;
    /* height: 100%; */ /* 제거: 100% 높이 대신 고정 높이 사용 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background-color 0.3s ease;
    /* 고정 높이를 각 레벨별로 지정 */
}

/* --- 기존 화살표 스타일 제거 및 Google Fonts 아이콘 적용 --- */

/* 기존 border 속성 및 관련 스타일 제거 */
#DB_navi42 .menu-toggle::before {
    /* border-left: 6px solid transparent; */  /* 삭제 */
    /* border-right: 6px solid transparent; */ /* 삭제 */
    /* border-top: 7px solid #555; */         /* 삭제 */
    /* width: 0; */                           /* 삭제 */
    /* height: 0; */                          /* 삭제 */
    /* transform-origin: center 50%; */       /* 삭제 또는 불필요 */
    /* transition: transform 0.3s ease; */    /* 삭제 또는 content 전환 transition으로 변경 가능 */
    content: ''; /* 내용을 초기화하고 아래에서 설정 */
    display: inline-block; /* 아이콘 표시를 위해 변경 */

    /* ▼▼▼ Google Material Symbols 스타일 추가 ▼▼▼ */
    font-family: 'Material Symbols Outlined'; /* 폰트 패밀리 지정 */
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* 원하는 아이콘 크기로 조절 */
    line-height: 1;   /* 아이콘 높이에 맞춤 */
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* 아이콘 렌더링 품질 향상 (Google Fonts 권장) */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';

    /* ▼ 기본 아이콘 (아래 화살표) 설정 ▼ */
    content: 'keyboard_arrow_down';
    color: #555; /* 아이콘 색상 지정 */
    transition: color 0.3s ease; /* 색상 변경 애니메이션 (선택 사항) */
}

/* 메뉴가 열렸을 때 (.open 클래스가 li에 있을 때) 아이콘 변경 */
#DB_navi42 li.open > .menu-toggle::before {
    /* transform: rotate(180deg); */ /* 삭제: 회전 대신 아이콘 자체를 변경 */
    /* border-top-color: #000; */    /* 삭제 */

    /* ▼ 위쪽 화살표 아이콘 설정 ▼ */
    content: 'keyboard_arrow_up'; /* 'Keyboard Control Key' 대신 표준 'up' 사용 */
    color: #000; /* 열렸을 때 아이콘 색상 (선택 사항) */
}
/* --- Specific Level Styling --- */

/* Level 1 */
#DB_navi42 > li.DB_1D > a {
    font-size: 18px;
    padding-left: 20px;
    min-height: 50px; /* 명시적 높이 기준 */
}
#DB_navi42 > li.DB_1D.has-submenu > .menu-toggle {
    height: 50px; /* 추가: 1차 메뉴 링크의 min-height와 일치 */
    background-color: #F6FCFF;
}
#DB_navi42 > li.DB_1D > a:hover {
    background-color: #f9f9f9;
}
#DB_navi42 > li.DB_1D.DB_select > a {
     background-color: #f0f0f0;
}


/* Level 2 */
#DB_navi42 .DB_1D .DB_2D_wrap {
    background-color: #F3F3F3;
    width: 100%;
    flex-basis: 100%;
    padding: 0;
    box-sizing: border-box;
}
/* 2차 레벨 LI 정렬 변경 */
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D {
    position: relative;
    display: flex;
    /* align-items: stretch; */ /* 변경: stretch 대신 center 사용 */
    align-items: center;      /* 변경: 링크와 토글을 수직 중앙 정렬 */
    flex-wrap: wrap;
    border-top: 1px solid #ddd;
    width: 100%;
}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D > a {
    flex-grow: 1;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #555;
    font-weight: normal;
    padding: 10px 45px 10px 30px;
    min-height: 40px; /* 2차 메뉴 높이 기준 */
    box-sizing: border-box;
    background-color: transparent;
    text-decoration: none;
    border-top: none;
    height: auto;
    line-height: normal;
}

#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D.has-submenu > .menu-toggle {
    height: 40px; /* 추가: 2차 메뉴 링크의 min-height와 일치 */
    background-color: #FDFFC8;
}

#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D > a:hover {
    color: #000;
    background-color: #e9e9e9;
}
#DB_navi42 .DB_1D .DB_2D_wrap .DB_2D.DB_select > a {
     color: #000;
     background-color: #e0e0e0;
}


/* Level 3 (토글 없으므로 변경 없음) */
#DB_navi42 .DB_2D .DB_3D_wrap {
    background-color: #EAEAEA;
    width: 100%;
    flex-basis: 100%;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
}
#DB_navi42 .DB_2D .DB_3D_wrap .DB_3D {
   border-top: none;
   width: 100%;
}
#DB_navi42 .DB_2D .DB_3D_wrap .DB_3D > a {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #777;
    padding: 8px 20px 8px 60px;
    min-height: 25px;
    box-sizing: border-box;
    background-color: transparent;
    text-decoration: none;
    border-top: none;
    font-weight: normal;
    height: auto;
    line-height: normal;
}
#DB_navi42 .DB_2D .DB_3D_wrap .DB_3D > a:hover {
    color: #000;
    background-color: #dcdcdc;
}
#DB_navi42 .DB_2D .DB_3D_wrap .DB_3D.DB_select a {
    color: #000;
     background-color: #d0d0d0;
}


/* Ensure submenus are hidden initially by JS or default CSS */
#DB_navi42 .DB_2D_wrap,
#DB_navi42 .DB_3D_wrap {
    position: static;
}


/* --- Reset conflicting styles from original CSS if necessary --- */
#DB_navi42 {
    border-bottom: 1px solid #ddd;
    height: auto;
    line-height: normal;
    cursor: default;
}

/* 히든 슬라이더 { */
.sh-side-options {
    /* ... 다른 스타일들 ... */
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 400px; /* 또는 사용하는 너비 */
    z-index: 9999999999;
    background-color: #fff;
    transition: transform 600ms cubic-bezier(0.86, 0, 0.07, 1); /* transform에 대한 transition */

    /* ▼ 중요: 초기 상태 - 화면 오른쪽 밖에 위치 ▼ */
    transform: translateX(400px); /* 너비만큼 오른쪽으로 이동 */
}

/* ▼ 중요: .open 클래스가 추가되면 화면 안으로 이동 ▼ */
.sh-side-options.open {
    transform: translateX(0px); /* 원래 위치로 이동 */
    box-shadow: 0 0px 39px 10px rgba(0, 0, 0, 0.2);
}

.bgs {
    /* ... 다른 스타일들 ... */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 999; /* 메뉴보다는 낮게 */
    display: none; /* ▼ 중요: 초기에는 숨겨짐 ▼ */
}
/* } */