@charset "UTF-8";
/* 2026 홈페이지 정리 — menu (기존 디자인 유지, 기존 CSS 파일은 고치지 않고 여기서 덮어쓴다) */
/* 담당 A: 헤더 GNB · 사이드바(.snb) · 서브 페이지 틀(.container/.content) · 페이지 제목(h1.sub_title) */


/***** 헤더 *****/
/* S-07 GNB 현재 구역: 기존 hover 표시(아래 3px 검은 선)를 .on 에도 */
#header .innerHeader nav ul.mainGnb > li.on {border-bottom: 3px solid #000;}

/* GNB 드롭다운 넘침: '국민내일배움카드' 등 국비지원 5개 항목이 칸(108~138px)보다 길다.
   마지막 칸은 오른쪽이 비어 있으므로 칸을 글자 길이만큼 오른쪽으로 넓히고, 글자는 제목 글자 시작선(1.8vw)에 맞춰 한 줄로 */
#header .innerHeader nav ul.mainGnb > li:last-child > ul {width: max-content; min-width: 100%; padding-right: 1.8vw; box-sizing: border-box;}
#header .innerHeader nav ul.mainGnb > li:last-child > ul > li > a {padding-left: 1.8vw; text-align: left; white-space: nowrap;}

/* S-31 span 안 ul → div.afterLogin. 기존 `nav span ...` 규칙을 같은 값으로 옮긴다 (2023css.css:72-81) */
#header .innerHeader nav .afterLogin {flex: 2; float: none;}
#header .innerHeader nav .afterLogin ul li {display: inline-block;}
#header .innerHeader nav .afterLogin ul li.join {margin: 37px 0;}
#header .innerHeader nav .afterLogin ul li.join a {padding: 5px 0.9vw; font-size: 0.95rem; font-weight: 500; border: 1px solid #000; border-radius: 40px;}
#header .innerHeader nav .afterLogin ul li.login a {margin-right: 10px; transition: 0.5s;}
#header .innerHeader nav .afterLogin ul li.login:hover a {background: #0091db; border-color: #0091db; color: #fff;}
#header .innerHeader nav .afterLogin ul li.joinMember a {background: #000; color: #fff; transition: 0.5s;}
#header .innerHeader nav .afterLogin ul li.joinMember:hover a {background: #0091db; border-color: #0091db;}
/* V-27 관리자 로그인 1280: '로그아웃' 줄바꿈 → 한 줄 유지, 모자라면 GNB 쪽 여백에서 가져온다 */
#header .innerHeader nav .afterLogin {min-width: max-content;}
#header .innerHeader nav .afterLogin ul {white-space: nowrap;}


/***** 서브 페이지 제목 *****/
/* D1 · S-40/S-41 · V-19: h1.sub_title 을 모든 서브 페이지에 보인다. 모양은 게시판 제목(sojin.css #notice h1.title)과 같다 */
h1.sub_title {display: block; width: 100%; padding: 20px; margin-bottom: 30px; font-size: 28px; font-weight: 700; text-align: center; color: #000; border-bottom: 2px solid #000; box-sizing: border-box;}


/***** 사이드바 *****/
/* S-06 · V-17: 칸 높이·테두리를 li 에서 a 로 옮긴다 → li 가 3단 목록 길이만큼 늘어나 매직 여백(199px/90px) 없이 간격이 고르다 */
.snb > ul > li > ul > li {height: auto; border: 0; transition: none;}
.snb > ul > li > ul > li > a {height: 70px; line-height: 70px; border: 2px solid #f0f0f0; box-sizing: border-box;}
.snb > ul > li > ul > li:active > a, .snb > ul > li > ul > li.on > a {border-color: #0091db; color: #0091db;}
.snb > ul > li > ul > li.academyGuide, .snb > ul > li > ul > li.centerGuide {margin-bottom: 8px;}
.snb > ul > li > ul > li > ul > li:last-child > a {margin-bottom: 0;}


/***** 서브 페이지 틀 (1261px 이상 — 1260 이하 햄버거 구간은 기존 그대로) *****/
/* V-13: 수강신청·과정상세의 px 고정 폭(1340/1125px, 사이드바 250px)을 걷어 모든 서브 페이지가 같은 위치·폭
   S-34 · V-20: 본문 = 컨테이너 − 사이드바 − 3vw (컨테이너를 넘지 않는다)
   S-36: responsive.css:110 `#courseView .container`(공백 오타)는 고치지 않고 여기서 올바른 선택자로 덮는다 */
@media screen and (min-width: 1261px) {
	#greeting.container, #feature.container, #curriculum.container, #academy.container, #hrd.container,
	#course.container, #courseView.container, #notice.container, #noticeView.container {width: 70vw;}

	#greeting > .snb, #feature > .snb, #curriculum > .snb, #academy > .snb, #hrd > .snb,
	#course > .snb, #courseView > .snb, #notice > .snb, #noticeView > .snb {flex: none; width: 13vw; min-width: 200px;}

	#greeting > .content, #feature > .content, #curriculum > .content, #academy > .content, #hrd > .content,
	#course > .content, #courseView > .content, #notice > .content, #noticeView > .content {flex: 1 1 0; width: auto; min-width: 0; margin-left: 3vw;}

	/* 국비지원 이미지: 54vw/58vw 고정 → 본문 폭 */
	#hrd .content img {width: 100%; max-width: 100%;}

	/* 과정상세: 본문 폭 안에서 사진 칸이 줄고, 정보 칸은 '총 n명 | 모집기간 …' 한 줄(약 390px)을 지킨다 (1920 은 500px · 3vw · 480px 그대로) */
	#courseView .content .lecture .courseLeft {flex: 0 1 500px; min-width: 0; margin-right: 3vw;}
	#courseView .content .lecture .courseLeft img {width: 100%; margin-right: 0;}
	#courseView .content .lecture .courseLeft .lecture_text {width: 100%; height: auto; aspect-ratio: 500 / 284;}
	#courseView .content .lecture .courseRight {flex: 1 0 390px; max-width: 480px; min-width: 0; width: auto;}
	#courseView .content .lecture .courseRight ul.info {flex-wrap: wrap;}
	#courseView .content .lecture .courseRight ul.info li {white-space: nowrap;}
}
@media screen and (min-width: 1261px) and (max-width: 1500px) {
	#greeting.container, #feature.container, #curriculum.container, #academy.container, #hrd.container,
	#course.container, #courseView.container, #notice.container, #noticeView.container {width: 75vw;}

	#courseView .content .lecture .courseLeft {flex-basis: 430px; margin-right: 2vw;}
	#courseView .content .lecture .courseRight {max-width: 400px;}
}


/***** 과정상세 안내문 *****/
/* S-30: <h1 style="color:blue"> 안내문 → 안내 문단 p.courseNotice (h1 리셋 모양 그대로, blue → #0091db) */
#courseView .content .lecture .courseRight .courseNotice {margin-top: 30px; color: #0091db; word-break: keep-all;}