/* 헤더 전체 스타일 */
#hd_wrapper {
   display: block;
   position: fixed;
   height: 100px;
   left: 0;
   top: 0;
   width: 100%;
   z-index: 99;
   background-color: #ffffff;
   transition: background-color 0.3s ease;
}
.on #hd_wrapper,
.fixed #hd_wrapper {
   background-color: #ffffff;
}

/* ✅ 핵심 수정: inner 컨테이너를 강제로 1줄(nowrap)로 유지시킵니다. */
#hd_wrapper > .inner {
   display: flex !important;
   justify-content: space-between !important;
   align-items: center !important;
   flex-wrap: nowrap !important; /* 햄버거 버튼이 아래로 떨어지는 문제 완벽 차단 */
   height: 100%;
   width: 100%;
   max-width: 1840px; /* 양옆 여유를 위해 폭 설정 */
   margin: 0 auto;
   padding: 0 20px;
}

/* 로고 영역 설정 */
.logo {
   display: flex;
   align-items: center;
   flex-shrink: 0;
}
.logo img {
   /* height: 28px;
   width: 386px; */
}

@media (max-width: 1200px) {
   .logo {
      /* margin-left: 0.2rem; */
   }
}

/* ✅ 핵심 수정: 네비게이션이 width:100%로 주변을 밀어내지 않게 flex:1 로 변경 */
#lnb {
   flex: 1; /* 로고와 버튼 사이의 '남는 공간'만 차지 */
   display: none; /* 모바일 초기값 숨김 */
   justify-content: flex-end; /* 메뉴를 우측으로 밀어붙임 */
}

/* GNB 메뉴 (1차) */
#gnb_1dul {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   margin: 0;
   padding: 0;
   list-style: none;
   height: 100px;
}

#gnb_1dul > li {
   position: relative;
   height: 100%;
}
#gnb_1dul > li.ex {
   margin-right: 100px;
}
#gnb_1dul > li.long {
   margin-left: 150px;
}
/* 메뉴 내부 텍스트 & 이미지 정렬 */
#gnb_1dul > li > a {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 44px;
   font-size: 20px;
   font-weight: 600;
   height: 100px;
   white-space: nowrap;
   text-decoration: none;
}
#gnb_1dul > li > a#menu5 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: 0;
   height: 100px;
}
.fixed #gnb_1dul > li > a {
   color: #000;
}

/* #menu5 이미지 장학회 버튼 전용 */
#menu5 img {
   display: block;
   width: 254px;
   height: 52px;
}

/* 서브메뉴(2뎁스) 중앙 정렬 */
#lnb .submenu {
   position: absolute;
   top: 100px;
   left: 50%;
   transform: translateX(-50%);
   width: max-content;
   min-width: 100%;
   text-align: center;
   padding: 0.5rem 0;
   z-index: 99 !important;
   display: none;
   height: 380px;
   border-top: 1px solid var(--bs-border-color);
}
#lnb .submenu li {
   margin-top: 1.25rem;
}
#lnb .submenu a {
   display: inline-block;
   color: #212529;
   font-weight: 500;
   height: 30px;
   transition: all 0.2s;
   text-decoration: none;
   line-height: 1.15;
}
#lnb .submenu a:hover,
.fixed a.a_smenu:hover {
   color: #fffefe;
   font-weight: 900;
}

.submenu.active-bg {
   background-color: var(--bs-main-bg-color) !important;
}
#lnb .submenu:not(.active-bg) {
   background-color: #f8f9fa;
}


/* 서브메뉴 배경 */
.lnb_bg {
   background: #f8f9fa;
   left: 0;
   position: absolute;
   width: 100%;
   top: 100px;
   height: 380px;
   display: none;
}
.lnb_bg .inner {
   position: relative;
   height: 100%;
   border-top: 1px solid var(--bs-border-color);
}

/* 활성화 상태 색상 */
.on #gnb_1dul > li > a {
   color: #000;
   font-weight: 700;
}
.on #gnb_1dul > li:not(.long) > a.a_menu_on,
.fixed .on #gnb_1dul > li:not(.long) > a.a_menu_on {
   background-color: var(--bs-main-bg-color);
   color: #fff !important;
}

.on #gnb_1dul > li.long > a.a_menu_on,
.fixed .on #gnb_1dul > li.long > a.a_menu_on {
   background-color: #fff;
}

.a_smenu_on {
   color: #fffefe !important;
   font-weight: 900;
}

/* ====================================
   모바일 & PC 반응형 컨트롤
==================================== */

/* 기본적으로 모바일 버튼 셋팅 */
.btn-menu2 {
   height: 32px;
   width: 32px;
   background-image: url('/img/btn_navb.png');
   background-repeat: no-repeat;
   background-position: center center;
   border: none;
   background-color: transparent;
   flex-shrink: 0;
}
#btn_area {
   display: none;
}

@media (max-width: 1200px) {
   .btn-menu2 {
      display: block;
   }
   #lnb,
   #btn_area {
      display: none !important;
   }
}

@media (min-width: 1201px) {
   #lnb {
      display: flex !important;
   } /* 메뉴 노출 */
   .btn-menu2 {
      display: none !important;
   } /* 모바일 햄버거 숨김 */

   /* ✅ PC버전 우측 전체메뉴 햄버거 버튼 고정 설정 */
   #btn_area {
      display: flex !important;
      align-items: center;
      justify-content: center;
      flex-shrink: 0; /* 우측 끝에서 찌그러지거나 밀려나지 않도록 방어 */
      margin-left: 20px; /* 메뉴와의 간격 확보 */
   }
   #btn_area a i {
      font-size: 2rem;
      font-weight: 700;
      color: #2b2f32;
      vertical-align: middle;
   }
}

/* 모바일 전체메뉴 슬라이드 스타일 */
#mobile_menu {
   position: fixed;
   width: 100%;
   z-index: 999;
   background-color: #fff;
   right: 0;
   display: none;
   top: 100px;
}
.gnb_m {
   border-top: 1px solid #dee2e6;
   width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;
}
.gnb_m > li {
   border-bottom: 1px solid #dee2e6;
}
.gnb_m > li > a {
   font-weight: 700;
   display: block;
   padding: 15px 20px;
   position: relative;
   text-decoration: none;
   color: #333;
}
.gnb_m .submenu {
   background: #f7f7f7;
   display: none;
   padding: 15px 20px;
   list-style: none;
}
.gnb_m .submenu > li > a {
   display: block;
   padding: 10px 20px;
   text-decoration: none;
   color: #333;
}
.gnb_m > li > a:after {
   background: url('../images/menu_on.png') right center no-repeat;
   background-size: 20px;
   content: '';
   position: absolute;
   width: 20px;
   height: 20px;
   right: 20px;
   top: 50%;
   transform: translateY(-50%);
}
.gnb_m > li.opend > a:after {
   background-image: url('../images/menu_off.png');
}

/* PC 전체메뉴 팝업 스타일 */
#gnb_all {
   position: fixed;
   width: 90vw;
   height: 50vh;
   z-index: 1001;
   background-color: #fff;
   top: 50%;
   left: 50%;
   padding: 1em;
   display: none;
   transform: translate(-50%, -50%);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
}
.gnb_all_back {
   position: fixed;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.8);
   z-index: 1000;
   top: 0;
   left: 0;
}
.gnb_close_btn {
   position: absolute;
   top: 10px;
   right: 30px;
   background: transparent;
   border: none;
   font-size: 2rem;
   cursor: pointer;
}
#gnb_all .gnb_al_ul {
   width: 100%;
   position: relative;
   top: 49px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   height: 100%;
   overflow-y: auto;
   justify-content: space-between;
   align-content: flex-start;
   align-items: flex-start;
   padding-left: 0;
   list-style: none;
}
#gnb_all .gnb_al_li {
   flex-basis: max-content;
   flex-shrink: 0;
   flex-grow: 1;
   padding: 5px 10px;
}
#gnb_all .gnb_al_a {
   border-radius: 5px;
   position: relative;
   border: 1px solid var(--bs-main-bg-color);
   font-size: 1.05em;
   display: block;
   margin-bottom: 10px;
   font-weight: 400;
   color: #fff;
   padding: 0.6rem 0.5rem;
   background-color: var(--bs-main-bg-color);
   text-align: center;
   text-decoration: none;
}
#gnb_all .gnb_al_sub {
   padding-left: 0;
   list-style: none;
}
#gnb_all .gnb_al_sub li {
   padding-left: 10px;
   line-height: 2em;
   border-bottom: 1px solid #ddd;
}
#gnb_all .gnb_al_sub li a {
   color: #444;
   display: block;
   text-align: left;
   font-size: 1rem;
   text-decoration: none;
}
#gnb_all .gnb_al_sub li a:hover {
   color: var(--bs-main-bg-color);
}
@media (max-width: 576px) {
   .logo img {
      height: auto;
      width: 300px;
   }
}