/* 햄버거 버튼 : 헤더(.hd-inner) 안에서 로고와 같은 줄에 세로 중앙 정렬
   터치 영역 44x44, 선은 26x20 영역에 그림 (오른쪽 끝 선을 여백 16px에 맞추려고 margin-right 보정)
   열린 상태의 닫기(X)는 패널 안 .m-lnb-close 가 담당 */
#btn-menu-m, #btn-menu-m span {display: inline-block; transition: all 0.4s; box-sizing: border-box;}
#btn-menu-m {position: relative; flex-shrink: 0; width: 44px; height: 44px; margin-right: -9px; display: none;}
#btn-menu-m span {position: absolute; left: 9px; width: 26px; height: 2px; background-color: #222;}
#btn-menu-m span:nth-of-type(1) {top: 12px;}
#btn-menu-m span:nth-of-type(2) {top: 21px; width:20px}
#btn-menu-m span:nth-of-type(3) {top: 30px;}

/* 로고 */
.logo {position:relative; flex-shrink:0;}
.logo a {display:flex; align-items:center;}
.logo img {display:block; width:auto; height:40px;}
#header-wrap, #m-lnb-wrapper {letter-spacing: -0.02em;}

/* 상단 고정 : 상단바 + GNB 전체가 맨 위에 고정 (스크롤해도 상단바 그대로) */
#header-wrap {position: sticky; top: 0; z-index: 100; width: 100%; background-color: #fff; border-bottom: 1px solid #e8e9ec;}


/* 상단 바 (수능 D-day + 로그인 메뉴) */
#top-bar {height: 40px; background-color: #f1f4f7;}
#top-bar .tb-inner {display: flex; align-items: center; justify-content: space-between; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 20px; box-sizing: content-box;}
#top-bar .dday {margin: 0; font-size: 14px; font-weight: 500; color: #222;}
#top-bar .dday strong {margin-left: 4px; font-weight: 800; color: #1e6ff0;}
#top-bar .util {display: flex; margin: 0; padding: 0; list-style: none;}
#top-bar .util li {position: relative;}
#top-bar .util a {display: block; padding: 0 9px; font-size: 12px; color: #666; font-weight: 500; transition: color 0.2s;}
#top-bar .util li:last-child a {padding-right: 0;}
#top-bar .util a:hover {color: #1e6ff0;}

/* GNB 1차 (depth1) : 시안 그대로 */
#header {height: 80px; background-color: #fff;}
#header .hd-inner {display: flex; align-items: center; justify-content: space-between; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 20px; box-sizing: content-box;}
#header .lnb-line {height:100%;}
#lnb {height:100%;}
#lnb * {box-sizing: border-box;}
#lnb > ul {display: flex; height: 100%;}
#lnb > ul > li {position: relative; height: 80px; line-height: 80px; white-space:nowrap;}
#lnb > ul > li > a {display: block; height: 100%; padding: 0 23px; text-align:center; font-size:16px; font-weight:600; color:#222; transition: color 0.2s;}
#lnb > ul > li:last-child > a {padding-right: 0;}
#lnb > ul > li.on > a, #lnb > ul > li > a:focus {color:#1e6ff0}
#lnb > ul > li.cur > a {color:#1e6ff0} /* 지금 페이지의 대메뉴 */

#lnb > ul > li > ul {position: absolute; top: 100%; left: 50%; z-index: 2; min-width: 190px; padding: 14px 0; background-color: #fff; border: 1px solid #e5e5e5; line-height: 1.4; text-align: left; opacity: 0; visibility: hidden; transform: translate(-50%, -10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;}
#lnb > ul > li:last-child > ul {margin-left: 11.5px;}
#lnb > ul > li.on > ul {opacity: 1; visibility: visible; transform: translate(-50%, 0);}
#lnb ul ul li {position: relative;}
#lnb ul ul li > a {display: block; padding: 10px 26px 10px 15px; font-size: 15px; color: #222; text-underline-offset: 0.25em;}
#lnb ul ul li:hover > a, #lnb ul ul li > a:focus {color: #1e6ff0; text-decoration: underline;}
#lnb ul ul li:has(> ul) > a {padding-right: 44px;}
#lnb .depth1 > li > .arrow {display: none;}
#lnb ul ul .arrow {position: absolute; top: 50%; right: 18px; font-size: 16px; line-height: 1; color: #aaa; transform: translateY(-50%) rotate(-90deg); pointer-events: none;}
#lnb ul ul li:hover > .arrow {color: #1e6ff0;}

/* GNB 3차 : 2차 항목 오른쪽으로 따로 열림 (2차와 같은 박스) / 오른쪽 두 메뉴는 왼쪽으로 */
#lnb ul ul ul {position: absolute; top: -15px; left: 100%; min-width: 170px; padding: 14px 0; background-color: #fff; border: 1px solid #e5e5e5; opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;}
#lnb > ul > li:nth-last-child(-n+2) ul ul {left: auto; right: 100%; transform: translateX(6px);}
#lnb ul ul li:hover > ul, #lnb ul ul li:focus-within > ul {opacity: 1; visibility: visible; transform: none;}
#lnb ul ul ul li > a {padding: 9px 24px; font-size: 14px; color: #444;}

@media screen and (max-width: 1200px) {
  #lnb > ul > li > a {padding:0 14px; font-size:15px}  #lnb > ul > li:last-child > ul {margin-left: 7px}
}

@media screen and (max-width: 960px) {
  #header {height:70px}
  #lnb > ul > li {height:70px; line-height:70px}
  #lnb > ul > li > a {padding:0 9px; font-size:14px}  #lnb > ul > li:last-child > ul {margin-left: 4.5px}
  #lnb ul ul li > a {padding: 9px 22px; font-size:14px}
  #lnb ul ul ul li > a {font-size:13px}
  .logo img {height:28px}
}

/* 본문 래퍼 */
#container-box {width: 100%; position:relative}

/* 모바일 : 상단바(D-day/로그인)는 메뉴 패널 안으로 이동, 헤더만 고정 + 햄버거 메뉴 */
@media screen and (max-width: 768px) {
  #header .lnb-line {display: none;}
  #top-bar {display:none}
  #header {height:60px}
  #header .hd-inner {padding:0 16px}
  .logo img {height:26px}
  #btn-menu-m {display: block;}
}

@media screen and (max-width: 360px) {
  .logo img {height:22px}
}

/* ---------- 모바일 메뉴 패널 ----------
   헤더(z-index:100) 위를 덮는 우측 슬라이드 패널. 닫기는 패널 안 X / 배경 / ESC (menu.js) */
#m-lnb-dim {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 140; background-color: #000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;}
#m-lnb-dim.on {opacity: 0.5; visibility: visible;}
#m-lnb-wrapper {position: fixed; top: 0; right: 0; z-index: 150; display: flex; flex-direction: column; width: 100%; max-width: 360px; height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background-color: #fff; box-sizing: border-box; transform: translateX(100%); visibility: hidden; transition: transform 0.35s ease, visibility 0.35s;}
#m-lnb-wrapper.on {transform: translateX(0); visibility: visible;}
#m-lnb-wrapper * {box-sizing: border-box;}

/* 패널 상단 : D-day + 닫기(X) */
#m-lnb-wrapper .m-lnb-top {display: flex; align-items: center; justify-content: space-between; padding: 8px 7px 8px 20px; /* X 중심 = 화면 오른쪽에서 29px = 햄버거 중심과 동일 */ background-color: #1e6ff0; flex-shrink: 0;}
#m-lnb-wrapper .dday {margin: 0; font-size: 15px; font-weight: 600; color: #d6e6ff;}
#m-lnb-wrapper .dday strong {margin-left: 4px; font-weight: 800; color: #fff;}
.m-lnb-close {position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;}
.m-lnb-close span {position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; background-color: #fff;}
.m-lnb-close span:nth-child(1) {transform: rotate(45deg);}
.m-lnb-close span:nth-child(2) {transform: rotate(-45deg);}

/* 패널 유틸 링크 (로그인/회원가입/공지사항) */
#m-lnb-wrapper .m-util {display: flex; gap: 8px; margin: 0; padding: 16px 20px; list-style: none; border-bottom: 1px solid #e5e5e5; flex-shrink: 0;} /* 메인 '메가스터디 소식' 탭(.con1_r_tab)과 같은 알약 버튼 */
#m-lnb-wrapper .m-util li {flex: 1;}
#m-lnb-wrapper .m-util a {display: block; padding: 9px 0; border-radius: 18px; background-color: #eee; font-size: 13px; color: #555; text-align: center; transition: background-color .2s;}
#m-lnb-wrapper .m-util a:hover {background-color: #e2e2e2;}

/* 메뉴 트리 */
#m-lnb {flex: 1 0 auto;}
#m-lnb ul {margin: 0; padding: 0; list-style: none;}
#m-lnb li {position: relative;}
#m-lnb > ul > li {border-bottom: 1px solid #e5e5e5;}
#m-lnb > ul > li > a {display: block; padding: 17px 54px 17px 20px; font-size: 15px; font-weight: 700; line-height: 1.3; color: #222;}
#m-lnb > ul > li.on > a, #m-lnb > ul > li > a:hover {color: #000;}

/* 하위메뉴 열기 화살표 */
#m-lnb li > .arrow {position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; /* = 1차 메뉴 a 높이 (17+15*1.3+17) */ font-size: 16px; color: #999; cursor: pointer;}
#m-lnb li > .arrow i {display: block; transition: transform 0.3s;} /* 54px 칸 전체를 돌리면 회전 중 대각선만큼 커져 가로 스크롤이 생기므로 아이콘만 회전 */
#m-lnb li.on > .arrow {color: #222;}
#m-lnb li.on > .arrow i {transform: rotate(180deg);}

/* 2차 / 3차 메뉴 */
#m-lnb > ul > li ul {display: none; padding: 8px 0; border-top: 1px solid #e5e5e5; background-color: #f6f7f9;}
#m-lnb > ul > li li > a {display: block; padding: 9px 54px 9px 32px; font-size: 15px; line-height: 1.4; color: #555;}
#m-lnb > ul > li li > a:hover {color: #222;}
#m-lnb > ul > li li > .arrow {width: 44px; height: 41px; font-size: 15px;}
#m-lnb > ul > li li ul {padding: 4px 0; border-top: 0;}
#m-lnb > ul > li li li > a {padding: 7px 20px 7px 44px; font-size: 14px; color: #777;}

/* 패널 하단 : 대표번호 */
#m-lnb-wrapper .m-lnb-call {display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-top: 1px solid #e5e5e5; background-color: #f6f7f9; flex-shrink: 0;}
#m-lnb-wrapper .m-lnb-call .t {font-size: 13px; color: #666;}
#m-lnb-wrapper .m-lnb-call strong {font-size: 18px; font-weight: 800; color: #222;}

/* 메뉴 열린 동안 뒤 페이지 스크롤 잠금
   scrollbar-gutter : 스크롤바가 사라지면서 화면이 오른쪽으로 밀려 X가 햄버거보다 오른쪽에 보이는 현상 방지 */
html {scrollbar-gutter: stable;}
html.m-lnb-open, html.m-lnb-open body {overflow: hidden;}