@charset "UTF-8";

/**
 * custom-override.css — 프론트 서브페이지 스타일 + 사이트 추가/보정 CSS
 *
 * 로드 위치 : intl · major · hd 레이아웃에서 display_css() "뒤"(프론트 CSS 중 마지막).
 *             관리자 > 자산관리 > css관리(css_key=override)에서 웹으로 편집한다.
 *
 * 2026-08-13 style.css 의 서브페이지 구간 2,311행을 이 파일로 옮겼다
 *   (이동 전 원본은 application/backup_css/_origin/style.css).
 *   화면이 같은 이유 — 이 파일이 뒤에 로드되지만, style.css 에 남아 이 규칙들을 덮던 둘
 *   (.dept-site 높이 / :lang(zh) 표제 굵기)은 선택자가 한 단계 더 구체적이라 순서가 아니라
 *   명시도로 이긴다.
 *   ⚠ 뒤집어 말하면 style.css 에서 서브페이지 규칙을 덮으려면 명시도를 올려야 한다 —
 *     같은 명시도로 쓰면 이 파일이 이긴다(분리 전과 반대).
 *
 * ⚠ 이 파일에서 :root 를 재정의하지 말 것 — major/layout.php 의 학과 인라인 <style> 보다
 *   뒤라서 전 학과 키컬러가 하나로 통일된다. 색·폰트 변수는 root.css 에서 고친다.
 * ⚠ 상대경로 url(../images/...) 은 이 파일이 assets/css/ 안에 있어야 유효하다.
 */

/***************************************************************************************************************************************
 sub_layout :common */

 /* sub_title_img */
.sub_title_area { 
	position:relative; 
	height: var(--height-sub-title);
	display: flex;
    align-content: space-between;
    flex-wrap: wrap;
	background: linear-gradient(to bottom, var(--color-secondary-deep), var(--color-primary-dark));
}
.sub_title_area .sub_title_img {
	position:absolute; top:0; left:50%; transform: translateX(-50%); 
	width:100%; height:var(--height-sub-title); 
	z-index: 997;
	overflow: hidden;
}
.sub_title_area .sub_title_img img { height: 100%; width: 100%; object-fit: cover; }
.sub_title_area .sub_title {
	position:relative; 
	z-index: 998;
}
.sub_title_area .current_location { 
	margin-top: 240px; 
	display: flex; 
	gap:10px;
	align-items: center;
	color: #fff;
	font-size: 24px; font-weight: 400; 
	opacity: 0.7;
}
.sub_title_area .current_location a {
	color:#fff; font-size: 24px; line-height: 30px; font-weight: 400; text-align: left;
}
.sub_title_area .current_location .divider { 
	font-size: 14px; 
	font-weight: 100; 
}
.sub_title_area h2 {
	font-size: 45px; font-weight: 700; color:#fff;  font-family: var(--font-family-title);
	margin-top: 20px;
}


/* sub_menu */
.sub_menu_bg {
	position:absolute; bottom:0; left:0; width:100%; z-index: 997;
}
.sub_menu_bg .sub_menu {
	background-color: #fff;
	border-top-right-radius:30px;  border-top-left-radius:30px;
	min-height:73px; border-bottom: #e5e5e5 solid 1px;   /* 항목이 넘쳐 줄바꿈되면 바 높이가 늘어나도록 고정 height → min-height */
	display: flex; align-items: center; justify-content: flex-end;
}
.sub_menu_bg .sub_menu ul {
	display: flex;
	flex-wrap: nowrap;                 /* 영역(가로)을 넘어가면 다음 줄로 줄바꿈 */
	justify-content: flex-end;
	margin:0 auto;                   /* 세로 마진 제거: 한 줄일 땐 기존 높이 유지, 줄바꿈될 때만 바 높이 증가 */
	width: 100%;
	/* 좌측 워터마크(cbnu 심볼)는 아래 ::after 가 그린다 — 배경이미지에서 마스크 방식으로 옮김.
	   ul 자체에 mask 를 걸면 자식 메뉴 링크까지 잘려나가므로 의사요소를 써야 한다. 2026.08 */
	position: relative;
}
/* 좌측 워터마크 = 키컬러 단색.
   종전 background-image:url(sub_menu_bg.png) + background-position:0 50% 를 그대로 옮긴 것으로,
   absolute 라 flex 흐름(justify-content:flex-end, ::before 80px 스페이서)에 영향을 주지 않는다.
   원본 PNG 는 2색(#B32B5C·#881241)이라 filter 로는 단색화가 안 돼 헤더 로고와 동일한
   mask + background-color 방식을 쓴다. 학과 홈은 --color-primary-dark 가 학과색으로 덮인다. */
.sub_menu_bg .sub_menu ul::after {
	content: '';
	position: absolute;
	left: 0; top: 50%; transform: translateY(-50%);
	width: 59px; height: 33px;      /* sub_menu_bg.png 원본 크기 (background-size:auto 와 동일) */
	background-color: var(--color-primary-dark);
	-webkit-mask: url(../images/sub_menu_bg.png) no-repeat center / 100% 100%;
	        mask: url(../images/sub_menu_bg.png) no-repeat center / 100% 100%;
	pointer-events: none;
}
.sub_menu_bg .sub_menu ul::before {
    width: 80px;
    content: '';
}
.sub_menu_bg .sub_menu ul li a { 
	font-size: 20px; line-height:1.3; height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
	color:#000000; font-weight: 400; 
	padding: 0 30px; 
	transition: all .15s;
	font-family: var(--font-family-title);
}
:lang(zh) .sub_menu_bg .sub_menu ul li a {
	font-family: var(--font-family-base, 'Pretendard', sans-serif);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0;
	padding: 0 20px;
}

.sub_menu_bg .sub_menu ul li a:hover,
.sub_menu_bg .sub_menu ul li a.on { 
	text-decoration:none; 
	color: var(--color-primary-light); 
	border-bottom: var(--color-primary-light) solid 3px;
}

.sub_menu_depth02 { display: none;}

/* 1200px 이상: 2차 서브메뉴 항목명이 한 줄을 넘으면 2줄로 표시.
   기존 height/line-height 74px(한 줄 고정) → flex 세로중앙 + min-height 로 바꿔 2줄도 수용. */
@media (min-width:900px) {
	.sub_menu_bg .sub_menu ul li a {
		height: auto;
		min-height: 74px;
		line-height: 1.3;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		white-space: normal;      /* 폭 넘으면 다음 줄로 */
		word-break: keep-all;     /* 단어 중간은 안 끊음 */
	}
}

@media (max-width:1440px) {
	.sub_title_area .container { width: 100%; padding: 0 var(--layout-padding); }
}

@media (max-width:768px) {

	.sub_title_area .sub_title_img
	{
		height:var(--height-sub-title); 
		background-size: cover;
	}
	.sub_title_area {height:var(--height-sub-title);  }
	.sub_title_area .sub_title h2 { font-size: 20px; font-weight: 700;  text-align: center; margin-top:90px;}  /* 서브메뉴와 간격 확보 위해 축소(145→90) */
	
	.sub_title_area .current_location {display: none;}

	.sub_menu_bg .sub_menu {
		background-color: #fff;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 50px;
	}
	.sub_menu_bg .sub_menu ul li a { font-size: 16px; line-height: 50px; height: 50px;}

	/* 서브 2차 메뉴: 모바일에서 한 줄 고정 + 가로 스크롤 */
	.sub_menu_bg .sub_menu { position: relative; overflow: hidden; }
	.sub_menu_bg .sub_menu ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;   /* iOS 관성 스크롤 */
		scrollbar-width: none;                /* Firefox: 스크롤바 숨김 */
		-ms-overflow-style: none;             /* 구 Edge/IE */
		margin: 0 auto;
	}
	.sub_menu_bg .sub_menu ul::-webkit-scrollbar { display: none; } /* Chrome/Safari */
	.sub_menu_bg .sub_menu ul li { flex: 0 0 auto; }               /* 줄어들지 않게 */
	.sub_menu_bg .sub_menu ul li a { width: auto; padding: 0 16px; }

	/* 좌우 "더보기" 인디케이터: 화살표(‹ ›) + 페이드(JS가 스크롤 가능 방향에만 노출) */
	.sub_menu_bg .sub_menu::before,
	.sub_menu_bg .sub_menu::after {
		position: absolute; top: 0; bottom: 0; width: 34px;
		display: flex; align-items: center;
		color: #555; font-size: 24px; font-weight: 700; line-height: 1;
		pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 3;
	}
	.sub_menu_bg .sub_menu::before {
		content: "‹"; left: 0; justify-content: flex-start; padding-left: 6px;
		background: linear-gradient(to right, #fff 55%, rgba(255,255,255,0));
	}
	.sub_menu_bg .sub_menu::after {
		content: "›"; right: 0; justify-content: flex-end; padding-right: 6px;
		background: linear-gradient(to left, #fff 55%, rgba(255,255,255,0));
	}
	.sub_menu_bg .sub_menu.can-scroll-left::before  { opacity: 1; }
	.sub_menu_bg .sub_menu.can-scroll-right::after  { opacity: 1; }

}
@media (max-width:525px) {
	
	.sub_title_area { height:var(--height-sub-title); }

	/* 좌측 워터마크 숨김 — 배경이미지에서 ::after(mask) 로 바뀌어 선택자도 함께 옮김. 2026.08 */
	.sub_menu_bg .sub_menu ul::after { display:none; }
	.sub_title_area .sub_title_img { height:var(--height-sub-title); }

	.sub_title_area .sub_title h2 {margin-top:70px;}  /* 서브메뉴와 간격 확보 위해 축소(85→70) */
	
	.sub_menu_bg .sub_menu {
		height: 40px;
	}
	.sub_menu_bg .sub_menu ul { display:flex; justify-content: flex-start; gap: 0; flex-wrap: nowrap; }
	.sub_menu_bg .sub_menu ul li { flex: 0 0 auto; }
	.sub_menu_bg .sub_menu ul li a { font-size: 14px; line-height: 40px; height: 40px; padding: 0 14px; width: auto; text-align: center;}
}


/* ===== guide 문서(document/guide*, 입학안내 등) 전용 서브메뉴 오버라이드 =====
   레이아웃(intl/hd/major)에서 guide 문서일 때 .sub_menu container 에 doc-guide 클래스가 붙는다.
   .sub_menu_bg .sub_menu.doc-guide … 는 클래스 3개 + 요소라 특이도가 :lang(zh)와 동률 이상이고,
   기본·반응형(768/525) 규칙(클래스 2개)을 이긴다(이 블록이 뒤에 위치해 동률도 승 → 전 구간 적용).
   브레이크포인트별로 다르게 하려면 @media 안에 같은 셀렉터를 추가. */
.sub_menu_bg .sub_menu.doc-guide ul li a {
	font-size: 17px;
	padding: 0 10px;
}
.sub_menu_bg .sub_menu.doc-guide ul li a:hover,
.sub_menu_bg .sub_menu.doc-guide ul li a.on {
	/* 활성/호버 — 기본값 예시(교체용):
	   color: var(--color-primary-light);
	   border-bottom: var(--color-primary-light) solid 3px; */
}


/* 3차 메뉴 */
.tabs_3depth { margin-top: 60px; width: auto; max-width:100%; 
    display: flex;
    justify-content: center;
}
.tabs_3depth ul { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; min-width: 50%; }
.tabs_3depth li { flex: 1; }
.tabs_3depth li a { 
	font-size: 20px; font-weight: 400; 
	font-family: var(--font-family-titleS);
	color: #333; background-color: #efefef; 
	text-align: center;  line-height: 1; 
	padding: 0 20px; 
	display: flex; align-items: center; justify-content: center;
	height: 68px; 
	border-radius: 28px; transition: all .15s;
	width: 100%;
}
.tabs_3depth li a:hover { background-color: var(--color-primary-dark); color: #fff; }
.tabs_3depth li.selected a { background-color: var(--color-primary-light); color: #fff; }

@media (max-width:1024px) {
	.tabs_3depth { margin-top: 30px; }
	.tabs_3depth ul { width: 90%; margin:0 auto; gap: 10px; }
	.tabs_3depth li a { font-size: 16px; line-height: 18px; height: 50px; padding: 0 15px;}
}
@media (max-width:768px) {
	/*.tabs_3depth li { height: 40px;}
	.tabs_3depth li a { font-size: 14px; }*/
}
@media (max-width:525px) {
	.tabs_3depth { margin-top: 15px; margin-bottom: 15px;}
	.tabs_3depth li a { font-size:12px; line-height:16px; padding:5px;}
	.tabs_3depth li a br { display: block; }
}








/* sub_con */
.sub_con { padding: 60px 0 100px; color:#555; font-size:16px; line-height:20px; min-height:700px;}
/* 문서 콘텐츠의 넓은 표: 표 자체만 가로 스크롤(잘림 방지). JS(initContentTableScroll)가 표를 이 래퍼로 감쌈 */
.sub_con .table-scroll { max-width: 100%; width:100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sub_con .table-scroll > table { margin: 0; }
/* 표 셀 여백: 좁아지면 단계적으로 축소 → 표 폭이 줄어 가로 스크롤이 줄어든다. 2026.08
   ⚠ 넓은 화면(1025px~)에는 규칙을 두지 않는다 — 여백이 사이트 CSS 가 아니라 문서 HTML 의
     inline style/cellpadding 에서 오므로 기본 규칙을 만들면 원래 여백 없던 표에 여백이 생긴다.
     그 문서쪽 값을 덮어야 해서 !important 가 필요하다.
   부작용: 레이아웃용 표(padding:0)도 좁은 화면에서 여백이 생긴다 → 문제되면 :not() 추가. */
@media (max-width:1024px) {
	.sub_con .table-scroll > table th,
	.sub_con .table-scroll > table td { padding: 12px 14px !important; }
}
@media (max-width:768px) {
	.sub_con .table-scroll > table th,
	.sub_con .table-scroll > table td { padding: 8px 10px !important; }
}
@media (max-width:525px) {
	.sub_con .table-scroll > table th,
	.sub_con .table-scroll > table td { padding: 5px 6px !important; }
}
.sub_con:after,
.sub_con_title:after { content:""; display:block; clear:both; }

.sub_con_title { margin-bottom:30px;position:relative }
.sub_con_title.board {min-height:230px;}


.sub_con_title h3 span.head_txt1 {font-size:20px; line-height:1.2em; font-family:'OneMobileT'; font-weight:300; display: block }
.sub_con_title h3 span.head_txt2 {font-size:40px; line-height:1.5em; font-family:'OneMobileT'; font-weight:100; display: block }
.sub_con_title h3 {font-size:3em; font-family: 'Jalnan'; line-height: 1.2em !important; color:#111; line-height:inherit; font-weight: 600; letter-spacing: -0.5px;}

.sub_con_title .txt1 {font-size:28px; line-height:50px; color:#000; font-weight:600; letter-spacing: -0.05em; margin-top:200px; }
.sub_con_title .txt2 {font-size:22px; line-height:1.2em; color:#000; font-weight:300; letter-spacing: -0.05em;}
.sub_con_title .txt3 {position:absolute; top:0; right:10px;}
.sub_con_title .txt4 {position:absolute; top:240px; right:380px; text-align: right; font-size:16px; line-height:22px; color:#000; font-weight:500; }
.sub_con_title .txt4 strong { font-size:22px;}
.sub_con_title .txt4 a {font-size:14px;}
.sub_con_title:after {display: block; clear:both;}


/*게시판용 타이틀영역 */
.overview .sub_con_title.board, .location .sub_con_title.board {min-height:300px;}
.sub_con_title.board .txt1 {margin-top:100px}
.sub_con_title.board .txt3 img {width:200px;}
.sub_con_title.board .txt4 {top:100px; right:210px;font-size:14px;  }
.sub_con_title.board .txt4 strong {font-size:18px;}

.sub_con_title .location { float:right; font-size:1rem; color:#999; margin:20px 0 0 0; }
.sub_con_title .location span { background:url(../images/location_arrow.png) no-repeat left center; padding-left:10px; margin-left:5px; }
.sub_con_title .location .home { font-size:0; background:url(../images/home.png) no-repeat center; width:19px; height:16px; display:inline-block; vertical-align:middle; margin-top:-2px; }
.sub_con_title .location a { color:#999; }
.sub_con_title .location a:hover { color:#000; }

.sub_con_title:after {clear:both; display: block;}


@media (max-width:1440px) {	
    .sub_con { padding: 60px 20px 100px;}

}

@media (max-width:768px) {	
	.sub_con { padding:15px 15px 50px; }
	.sub_con_title { margin-bottom:20px; }
	.sub_con_title h3 { font-size:4em; }	
	
	.sub_con_title h3 span.head_txt1 {font-size:16px}
	.sub_con_title h3 span.head_txt2 {font-size:20px}
	
	.sub_con_title.board .txt3, 
	.sub_con_title.board .txt4 {display: none}
}

@media (max-width:500px) {	
	.sub_con {
	    min-height: 500px;
	}


	.sub_con_title.board {min-height:90px;}
	.overview .sub_con_title.board {min-height:90px;}
			
	.sub_con_title h3 span.head_txt1 {font-size:1.4rem}
	.sub_con_title h3 span.head_txt2 {font-size:2.2rem}
	.sub_con_title h3 { font-size:3rem;word-break: keep-all;}
	
	.sub_con_title.board .txt1 {margin-top:30px; line-height:1.2em; font-size:1.2rem} 
    .sub_con_title .txt2 {font-size:1.4rem} 
	.sub_con_title .location { font-size:10px; margin:5px 0 0 0; }
	.sub_con_title .location .home { width:14px; height:12px; background-size:cover; }
	
	.overview div iframe {width:100%; height:200px}
    
    .sub_con_title .txt1 {margin-top:1.4rem}
    .sub_con_title .txt3,
	.sub_con_title .txt4  {position:inherit; top:20px; right:auto; display: inline-table; width:48%; vertical-align: top}
	.sub_con_title .txt4 { padding-top:20px; text-align:left;}   
    
}


/* .admin_btn { margin-top:100px; text-align:right; }
   ⚠ 2026-08-13 서브페이지 CSS 이동 때 주석 처리. 지우거나 되살리지 말 것.
   분리 전에는 style.css admin 구획의 같은 명시도 .admin_btn{margin:50px 0}이 더 뒤에 있어
   한 번도 적용된 적 없는 죽은 선언이었다. 분리로 순서가 뒤집혀 되살아나면 여백이 50→100px 로
   벌어진다(문서 페이지의 관리자용 [내용수정] 버튼). 이 이동에서 캐스케이드가 뒤집힌 유일한
   충돌이었다. ★ .admin_btn 여백은 style.css 쪽에서 고친다. */

#viewcomment .sub_con { min-height:inherit; padding:0; }

/* 최종수정일 */
.doc-updated-datetime { 
	background: #eeeeee;
	padding: 26px 48px ;
	border-top-left-radius: 25px; border-top-right-radius: 25px;
	width: 100%;
	margin-top: 30px;
	font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--color-font-dark); text-align: left; 
}
.doc-updated-datetime .txt { 
	display: inline-block; font-size: 16px;  background: #fff; border-radius: 30px; padding: 7px 20px; 
	background-image: url(../images/icon_update.png); background-repeat: no-repeat; background-position: 20px center; padding-left: 45px;
	margin-right: 10px;
}
@media (max-width:525px) {
	.doc-updated-datetime { padding: 15px 20px; }
	.doc-updated-datetime .txt { font-size: 14px; padding: 5px 15px; background-position: 10px center; padding-left: 35px;}
}





/* ready :컨텐츠준비중 */
.ready { width:100%; height:500px; background-color:#f9f9f9; border: 1px #eee solid; color:#999; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.ready_txt01:before { content:"!"; display:block; margin:0 auto 15px; font-size: 50px; color: var(--color-primary-light); border: 4px var(--color-primary-light) solid; width: 100px; height: 100px; line-height: 90px; border-radius:50%; }
.ready_txt01 { font-size: 32px; line-height: 2; font-weight: 500; font-family: var(--font-family-title); color: var(--color-primary-light); }
.ready_txt02 { font-size: 20px; font-weight: 600; line-height: 1.2;color: var(--color-font-dark);}

@media (max-width:525px) {
	.ready { min-height:300px; }
	.ready_txt01:before { font-size: 40px; width: 80px; height: 80px; line-height: 70px;}
	.ready_txt01 { font-size: 26px; line-height: 1.4; }
	.ready_txt02 { font-size: 14px;}
}


/***************************************************************************************************************************************
 contents :common */
.con_box { color:#888; padding:15px;}


.con_box p { /* margin-bottom:30px; */}
.con_box .con_title_tbl:before { content:"ㆍ"; display:inline-block; color: #1cb2cc; }
.con_box .con_title { color:#000; font-size:24px; line-height: 30px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 15px; }
.con_box .con_txt { font-size:18px; line-height:1.8;  color:#555;}

.con_box .con_txt.align_r {text-align:right;}




@media (min-width:769px) and (max-width:1024px)  {
	.con_box .col-md-4, .con_box .col-md-6  {float:left; }	
	.con_box .col-md-4 {width:33.333333%}	
	.con_box .col-md-6 {width:50%}	
}

@media (max-width:768px) {
	.con_box { padding:10px; }		
}
@media (max-width:500px) { 
	.con_box .con_title { font-size:22px; }
	.con_box .con_txt { font-size:18px; line-height:1.6;  }
}


.con_list { padding:50px 0 25px 30px;  margin:30px 0 50px 80px }
.con_list:after { content: ""; display: block; clear: both;}
.con_list .con_title, .con_list ul { float:left; }
.con_list .con_title { width:25%; }
.con_list ul { width:75%;}
.con_list li * {display:table-cell}
.con_list li { font-size:18px; line-height:1.8; position:relative; padding:0 0 25px 15px }
.con_list li:before { display:table-cell; content:"■"; font-size:10px; color: #b2cf5b; padding-right:10px; padding-top:5px; vertical-align: top }
.con_list li strong {color:#205390}
.con_list li strong.con_name {width:180px; }
.con_list li span.date {width:260px; margin:0 0 0 10px; padding:0 0 0 10px; color:#000; font-size:16px; }
.con_list li span.txt {border-left:2px solid #dedede; padding:0 0 0 10px; font-size:16px; }
:lang(ko) .con_list li strong.con_name {width:300px; }
:lang(ko) .con_list li span.date {display: none;}


@media (max-width:768px) {
	.con_list {margin:30px 0; padding:10px 20px}
	.con_list .con_title { margin:15px 0 15px; }
	.sub1_1 .con_list li * {display:inline-table}
	.sub1_1 .con_list li:before { display:inline-table}
	.sub1_1 .con_list li span.txt {border-left: none; padding: 0 0 0 20px;}
}
@media (max-width:500px) { 
	.con_list {margin:10px 0; padding:10px 0; }
	.con_list .con_title { font-size:18px; margin-bottom:10px; }
	.con_list li { font-size:16px; line-height:1.6 !important; padding-bottom:10px; }
	.con_list .con_title, .con_list ul { float:inherit; width:inherit !important; }
}

.con_tip { font-size:14px; color:#888; padding:5px 0; }

@media (max-width:500px) { 
	.con_tip { font-size:11px; }
}

/* con_tbl */
.con_tbl { font-size:15px; width:100%; border-top:1px #ddd solid; border-bottom:1px #ccc solid; border-left:1px #ddd solid; margin-bottom: 30px; }
.con_tbl th, .con_tbl td { padding:15px; border-bottom:1px #ddd solid; border-right:1px #ddd solid; line-height: 20px; }
.con_tbl th { background-color:#f4f6f9; text-align:center; color: #1092c0; }
.con_tbl .link { text-decoration:underline; cursor:pointer; }
.con_tbl .th_bg, .con_tbl.th_bg th, .con_tbl.th_bg td { background-color:#fffff4; color:#444; }

.con_tbl .th_bg02 { background-color: #fafbfd !important;}

/*btn */
.con_btn {margin:20px auto; width:250px; }
.con_btn a {width:100%; padding:10px; display:inline-block; background:#aac322; border-radius: 5px;font-size:16px; color:#fff; font-weight: 600; text-align: center;}
.con_btn a:hover { background: #a2bf06;}

@media (max-width:768px) {
	.con_tbl { font-size:12px; }
	.con_tbl th, .con_tbl td { padding:10px;}
}
@media (max-width:500px) {
	.con_tbl { font-size:11px; }
	.con_tbl th, .con_tbl td { padding:10px; line-height: 16px; }
    .con_btn { width:100%}
    .con_btn a {padding:10px 0; font-size: 12px; }
}



/* bootstrap  custom*/

@media (max-width:768px) {
	.col-md-4 {
		float: left;
        width: 33.33333333%;
    }
	
	.col-md-6 {
		float: left;
		width: 50%;
	}
}


@media (max-width:500px) {
	.col-md-4, .col-md-6  {
        width: 100%;
    }
}




/* privacy */
.agree_info { height:300px; padding:3%; background-color:#fff; border:1px #ddd solid; overflow:auto; }
.agree_info .con_bg_box { background-color:#f4f6f9; }



/***********************************************************************************************************************************
contents */


.con_box {}

/******* sub1_1 *********/
/* Greetings */

.greetings { display: flex; align-items: center; justify-content: center; gap: 50px;}
.greetings .greetings_text {
	flex: 1 1 0;
	min-width: 0;
}
.greetings .greetings_text .txt1 {
	font-size: clamp(15px, 1.1vw + 10px, 22px);
	line-height: 1.45;
	color: var(--color-font-light);
	font-family: var(--font-family-title);
	margin-bottom: 0;
}
.greetings .greetings_text .txt2 {
	font-size: clamp(24px, 2.2vw + 12px, 45px);
	line-height: 1.2;
	color: var(--color-font-default);
	font-family: var(--font-family-title);
}
.greetings .greetings_text .txt2 strong { color: var(--color-primary-light); }
.greetings .greetings_text .con_txt {
	font-size: clamp(16px, 0.8vw + 11px, 20px);
	line-height: 1.75;
	color: var(--color-font-default);
}

.greetings .greetings_img {
	flex: 0 0 auto;
	width: clamp(280px, 30vw, 437px);
}
.greetings .greetings_img img {
	width:100%;
	height:auto;
	display: block;
}

@media (max-width:1024px) {
	.greetings {
		gap: 30px;
	}
	
	.greetings .greetings_img {
		width: clamp(240px, 28vw, 340px);
	}
}

@media (max-width:768px) {
	.greetings {
		flex-direction: column;
		position: relative;
	}
	.greetings .greetings_text {
	}
	.greetings .greetings_text .con_txt {
		line-height: 1.5;
		width: 65%;
	}

	.greetings .greetings_img {
		position: absolute;
		top: 120px;	
		right: 0;
	}
}

@media (max-width:525px) {
	.greetings {
		gap: 20px;
	}
	.greetings .greetings_text .txt2 {
		line-height: 1.25;
	}
	.greetings .greetings_text .txt2 br {
		display: none;
	}
	.greetings .greetings_text .con_txt {
		width: 100%;
	}
	.greetings .greetings_img {
		width: clamp(120px, 65vw, 260px);
		position:relative;
		top: 0;	
		right: 0;
	}
}



/* Professor : 교수소개  & Staff */
.professor {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 3fr));
	gap: 120px 105px;
}
.staff {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 3fr));
	gap: 70px 105px;
	width: 90%;
	margin: 0 auto;
}

.person_card {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	padding: 20px 0 14px;
	border-top: 2px solid #2f2f2f;
	border-bottom: 1px solid #b9b9b9;
}

/* staff는 한줄에 3명씩 배치 */
/* 단 첫줄은 1명, 2째줄은 2명 배치 */ 
.staff .person_card:first-of-type, .staff .person_card:nth-child(2){
	/* grid-column: 1 / -1; */
}


.person_photo {
	flex: 0 0 auto;
	width: clamp(170px, 18vw, 230px);
}

.person_photo img {
	display: block;
	width: 100%;
	height: auto;
}

.person_info {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 20px;
}

.person_role {
	font-size: clamp(16px, 0.8vw + 2px, 34px);
	font-weight: 300;
	line-height: 1.25;
	color: #666;
	margin-bottom: 2px;
}

.person_name {
	font-size: clamp(22px, 1.2vw + 3px, 34px);
	line-height: 1.22;
	font-family: var(--font-family-title);
	font-weight: 700;
	color: #333;
	margin-bottom: 30px;
}

.person_meta {
	margin-bottom: 24px;
}

.person_meta:last-child {
	margin-bottom: 0;
}

.person_meta .plabel {
	position: relative;
	padding-left: 0;
	font-size: clamp(16px, calc(1vw + 2px), 22px);
	color: var(--color-font-light);
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-font-light);
	margin-bottom: 0;
}


.person_meta .plabel::first-letter {
	color: var(--color-primary-light);
}

.person_meta .plabel::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 8px;
	height: 2px;
	background-color: var(--color-primary-light);
}

.person_meta .value {
	font-size: clamp(14px, calc(1vw + 2px), 20px);
	line-height: 1.45;
	color: #222;
	word-break: keep-all;
}

.person_meta .value:last-of-type {
	margin-bottom: 0;
}

@media (max-width:1200px) {
	.professor, .staff {
		gap: 34px;
	}
	.person_card {
		gap: 20px;
	}
	.person_info {
		padding-top: 8px;
	}
}

@media (max-width:1024px) {
	.person_card {
		padding: 18px 0 12px;
	}
	.person_photo {
		width: clamp(120px, 28vw);
	}
	.person_name {
		margin-bottom: 18px;
	}
	.person_meta {
		margin-bottom: 14px;
	}
}
@media (max-width:768px) {
	.professor, .staff {
		grid-template-columns: 2fr;
		gap: 40px;
		width: 90%;
		margin: 0 auto;
	}
}

@media (max-width:600px) {
	
	.professor {
		width: 100%;
		margin: 0 auto;
	}

	.person_card {
		gap: 16px;
	}
	.person_photo {
		width: min(100px, 60vw);
	}
	.person_info {
		padding-top: 0;
	}
}



/* sub1_1 : Address,location */

.LocationBox {
	display: flex;
	align-items: center;
	gap: 20px;
}

.LocationBox .LocationTxt {display: none;}




/* sub2, sub3 : 전공소개 */

.majors {
	display: flex;
	align-items: center;
}


.major_card {
	display: flex; 
	align-items: center;	
	flex-direction: column;
	gap: 50px;
	margin-top: 50px;
}


.major_title {
	background-color: var(--color-bg-light);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:auto 100%;
	height:330px;
	width: 100%;
	display: flex; align-items: center;
}

.major_card.gmajor1 .major_title { /* 글로벌비즈니스 */
	background-image: url(/assets/images/major_1_intro_bg.jpg);
}


.major_card.gmajor2 .major_title,
.major_card.umajor1 .major_title { /* 글로벌교육 */
	background-image: url(/assets/images/major_2_intro_bg.jpg);
}

.major_card.gmajor3 .major_title,
.major_card.umajor2 .major_title { /* 융합소프트웨어 */
	background-image: url(/assets/images/major_3_intro_bg.jpg);
}

.major_card .major_title_box {
	padding: 30px;
	width: 50%;
	margin: 0 auto;
	background-color: rgba(0, 0, 0, 0.44);
	
	display: flex; 
	align-items: center;	
	flex-direction: column;
}

.major_card .major_title .name_small {
	font-size: clamp(18px, 1.4vw + 2px, 26px);
	line-height: 1.45;
	font-weight: 400;
	color: #fff;
	margin-bottom: 0;
	opacity: 0.5;
}

.major_title .title_name {
	font-size: clamp(24px, 2.2vw + 12px, 45px);
	line-height: 1.2;
	color: #fff;
	font-family: var(--font-family-title);
	text-align: center;
}

.major_card .major_info {
	display: flex; align-items: flex-start; 
	gap: 50px;
	flex-direction: row;
	padding: 30px 0;
}
.major_card .major_info .logo_bg {
	background-image: url(/assets/images/bg_cbnu_blue.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	flex: 0 1 clamp(220px, 30vw, 400px);
	width: clamp(220px, 30vw, 400px);
	aspect-ratio: 400 / 233;
	height: auto;
}

.major_card .major_info .major_txt {
	flex: 1 1 clamp(260px, 50vw, 780px);
	min-width: 0;
	font-size: clamp(16px, 0.8vw + 11px, 20px);
	line-height: 1.75;
	color: #555;
	padding-right: clamp(0px, 8vw, 120px);
}

@media (max-width:1024px) {
	.major_card .major_info {
		gap: 28px;
	}
	.major_card .major_info .major_txt {
		padding-right: 0;
	}
}

@media (max-width:768px) {
	.major_card {
		gap: 30px;
		margin-top:30px;
	}

	.major_title {
		height: 200px;
	}
	
	.major_card .major_title_box {
		width: 80%;
	}
	.major_card .major_info {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.major_card .major_info .logo_bg {
		display: none;
	}
	.major_card .major_info {
		padding: 0 15px;
	}
	
}


/* sub1_1 : 커리큘럼 */
.curriculum { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; }
.curriculum h4 {
	font-family: var(--font-family-title);
	font-size: 30px; font-weight: 500; color:#333; text-align: left; 
	padding-left: 20px;
	display: flex; flex-direction: row; align-items: center; justify-content: space-between;
}

.curriculum h4 a.btndownload {
	background: #eeeeee; 
	border-radius: 20px;
	padding: 10px 20px;
	font-size: 18px; color:#54548e; 
	display: flex; flex-direction: row; align-items: flex-start; justify-content: center; flex:auto;
	gap:5px;
	margin-left: 10px;
}
.curriculum h4 a.btndownload::before {
	content: ''; display: inline-block; background: url(/assets/images/icon_down.png) no-repeat center; 
	width: 19px; height: 16px; 
}
.curriculum .h4_txt {padding-left: 20px;}


.curriculum .contTable_c {
	border-top: 2px solid #000000; 
	border-bottom: 2px solid #000000; 
	width:100%; 
	position: relative; 
}
.curriculum .contTable_c::before { /* 좌측 세로선 삭제 */
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #fff;
	pointer-events: none;
	z-index: 1;
}
.curriculum .contTable_c caption { display: none; }
.curriculum .contTable_c thead th { 
	border-right: none; border-left: none; 
	height: 60px; text-align: center; 
	color:#333; font-size: 18px; font-weight: 600;
}
.curriculum .contTable_c thead {border-bottom:1px solid #999999;}
.curriculum .contTable_c tbody th, .curriculum .contTable_c tbody td {
	padding:20px 30px;
	border-left:1px solid #d6d6d6;
	border-bottom:1px solid #d6d6d6;

	font-weight:300;
	font-size: 18px;
	color: #555;
	line-height: 1.8;
	
}
.curriculum .contTable_c tbody th {
	text-align: center;
}

.curriculum .contTable_c tfoot td {
	border-bottom: 2px solid #000000; 
	padding:30px 0;
}
.curriculum .contTable_c tfoot td .account {
	display: flex; align-items: center; justify-content: center; gap: 5px;
	color:#333; font-size: 18px; line-height:2; font-weight: 600;
}
.curriculum .contTable_c tfoot td .account .major_h {
	font-size: 22px; font-weight: 700; 
}
.curriculum .contTable_c tfoot td .account span {
	display: inline-block; text-align: right;
	min-width: 80px;
}

.curriculum .contTable_c tfoot td .account span.num {
	border-bottom: 1px solid #333; 
	width: 80px; 
	padding: 0 20px;
	margin-left: 30px;
}

.curriculum .contTable_c.standardmodel td .total {
	font-size: 20px; font-weight: 200;
	display:inline-block; 
	background-color: var(--color-primary-light);
	padding:5px 20px; border-radius: 30px; color:#fff;
	margin-top: 20px;
}
.curriculum .contTable_c.standardmodel td .total strong {
	font-weight: 700; 
}

/* 대학원은 마지막 학점 영역을 가운데 정렬 */
.curriculum .contTable_c.gcurriculum tbody td:nth-last-of-type(1),
.curriculum .contTable_c.gcurriculum tbody td:nth-last-of-type(2) {
	text-align: center;
}

/* gcurriculum 테이블 모바일 반응형: 가로 스크롤 + 폰트/패딩 축소 (2026.07)
   6컬럼 + 한/영 이중 과목명 구조라 카드형 대신 표 유지 + 좌우 스와이프.
   ★ .curriculum 은 flex 컨테이너(display:flex; align-items:flex-start)라, 표에 직접
      overflow-x:auto 를 줘도 flex item 의 min-width:auto 때문에 표가 콘텐츠 폭으로 커져
      스크롤이 안 잡히고 페이지 밖으로 넘친다. → .curriculum 자체를 스크롤 컨테이너로 만들고
      표는 진짜 table 레이아웃을 유지(헤더/본문 컬럼 정렬 유지)한 채 min-width 로 최소폭만 확보. */
@media (max-width:768px) {
	/* 부모(.curriculum)를 좌우 스크롤 컨테이너로 */
	.curriculum {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;   /* iOS 관성 스크롤 */
	}
	/* 제목/다운로드 버튼 줄(h4)은 좌측 고정 → 표만 스크롤되고 버튼은 제자리에 남음.
	   (DB 문서 콘텐츠라 표 전용 래퍼를 넣을 수 없어 sticky 로 h4 를 고정한다.) */
	.curriculum > h4,
	.curriculum > .h4_txt {
		position: sticky;
		left: 0;
	}
	/* 표는 table 그대로 두고, 6컬럼이 뭉개지지 않을 최소폭 확보(넘치면 .curriculum 이 스크롤) */
	.curriculum .contTable_c.gcurriculum {
		min-width: 600px;
	}
	/* 폰트/패딩 축소 */
	.curriculum .contTable_c.gcurriculum thead th { font-size: 15px; height: 46px; }
	.curriculum .contTable_c.gcurriculum tbody th,
	.curriculum .contTable_c.gcurriculum tbody td {
		padding: 12px 10px; font-size: 14px; line-height: 1.6;
	}
	.curriculum .contTable_c.gcurriculum tbody td.subject { word-break: keep-all; }
}






/* admission : 입학안내 */
.admission { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	gap: 20px; 
	margin-top: 50px;
}
.admission .txt {
	font-size: clamp(18px, 1vw + 2px, 28px);
	line-height: 1.45;
	font-weight: 400;
	color: var(--color-font-dark);
	width: 70%;
	text-align: center;
}
.admission .admission_card {
	display: flex; 
	align-items: center;	
	flex-direction: column;
	gap:50px;
	width: 100%;
}

.admission .admission_card .admission_title {
	background-image: url(/assets/images/admission_intro_bg.jpg);
	background-color: var(--color-bg-light);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:auto 100%;
	height:330px;
	width: 100%;
	display: flex; align-items: center;
}
.admission .admission_card .admission_title .admission_title_box {
	padding: 30px;
	margin: 0 auto;
	/* background-color: rgba(0, 0, 0, 0.44); */
	
	display: flex; 
	align-items: center;	
	flex-direction: column;

	font-size: clamp(24px, 2.2vw + 12px, 45px);
	line-height: 1.2;
	color: #fff;
	font-family: var(--font-family-title);
	text-align: center;
}

.admission .admission_card .admission_info {
	display: flex; align-items: flex-start; 
	gap: 30px;
	flex-direction: row;
}




/* con_box내 버튼 기본 세팅 */

.con_box .btn {
	border-radius: 35px;
	line-height: 32px;
	padding: 20px 40px;
	font-size: clamp(24px, 2.2vw + 12px, 30px);
	color:#fff; 
	display: flex; flex-direction: row; align-items: flex-start; justify-content: center; flex:auto;
	gap:5px;
	margin-left: 10px;
	position:relative;
}	
.con_box .btn.download:after {
	content: ''; 
	display: inline-block; 
	background: url(/assets/images/icon_down_w.png) no-repeat center; 
	width: 36px; height: 32px; 
	margin-left: 10px;
}

.con_box .btn.primary {
	background-color: var(--color-primary-light);
	color: #fff;
}
.con_box .btn.secondary {
	background-color: var(--color-secondary-light);
	color: #fff;
}

.con_box .btn.primary:hover, 
.con_box .btn.primary:focus {
	background-color: var(--color-primary-accent);
	color: #fff;
}
.con_box .btn.secondary:hover, 
.con_box .btn.secondary:focus {
	background-color: var(--color-secondary-accent);
	color: #fff;
}






/* sub4_1 : FAQ */
.faq .search_box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width:300px;
	width: calc(300px + 80px);
	margin:0 auto 30px;
	background-color: var(--color-bg-light);
}
.faq .search_box .form-group {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
}
.faq .search_box .form-group input {
	margin: 10px 20px;
}

.faq .search_box .form-control {
	font-size: 18px;
	font-family: var(--font-family-title);
	color: var(--color-font-dark);
}

.navbar-form .btn, .navbar-form .btn:focus, .navbar-form .btn:active,
.navbar-form .btn:active, .navbar-form .btn:focus, .navbar-form .btn:hover {
	background-color: transparent;
	color: var(--color-link-hover);
	border-radius: 35px;
	line-height: 32px;
	font-size: clamp(24px, 2.2vw + 12px, 30px);
	display: flex; flex-direction: row; 
	align-items: flex-start; justify-content: center; flex:auto;
	gap:5px;
	margin-left: 10px;
	position:relative;
}

.navbar-form .btn-primary:hover, .navbar-form .btn-primary:focus, .navbar-form .btn-primary:active, .navbar-form .btn-primary.active, .open .dropdown-toggle.navbar-form .btn-primary {
	background-color: transparent !important;	
}

.search_box { text-align:right; margin:0 15px; }
.search_box .btn { border-radius:0; height:34px; padding:0 15px; }

#accordion { 
	border-top:2px #333 solid; 
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 70%;
	margin: 0 auto 40px;
}
#accordion.panel-group .panel { 
	border-radius:0; box-shadow:none; border:0; margin:0; 
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-bottom: 1px solid var(--color-font-dark);
}
#accordion .faq_a { border:0; border-bottom:1px #ddd solid; background-color:#f4f6f9; }

#accordion .panel-default>.panel-heading { background:none; border-bottom:1px #ddd solid; }
#accordion .panel-default>.panel-heading:after { content:""; clear:both; display:block; }

#accordion .faq_title div, #accordion .faq_title:before,
#accordion .faq_a div:before, #accordion .panel-body { float:left; }

#accordion .faq_title div,
#accordion .panel-body { width:90%; }
#accordion .nopost { width:100%; float:inherit; border-bottom:1px #ddd solid; }


#accordion .faq_a div { padding:20px 30px 50px 60px; }

.panel-group .panel-heading+.panel-collapse>.list-group, 
.panel-group .panel-heading+.panel-collapse>.panel-body {
	border-top: none;
}

#accordion .faq_title:before,
#accordion .faq_a div:before { display:inline-block; color:#fff; font-size:18px; border-radius:50%; width:35px; height:35px; line-height:37px; text-align:center; margin-right:10px; }

#accordion .faq_title:before { content:"Q"; background-color:var(--color-font-light); }
#accordion .faq_title:hover:before { background-color:var(--color-secondary-accent); }
#accordion .faq_title:hover { color: var(--color-secondary-accent); }

#accordion .faq_title { display: flex; align-items: center; }
#accordion .faq_title.active {color: var(--color-secondary-accent); }
#accordion .faq_title.active:before { content:"Q"; background-color:var(--color-secondary-accent); }


#accordion .panel-title {font-family: var(--font-family-title); font-weight: 500; }
#accordion .panel-title,
#accordion .panel-body { font-size:18px; line-height:22px; padding:8px 0 0 0; }

#accordion .faq_a div:before {
	display: none; 
	content:"A"; 
	background-color:var(--color-primary-accent); 
	margin-left:3%; 
}							   





@media (max-width:500px) {

	#accordion { 
		width: 90%;
	}
	.faq .search_box { width: 90%; max-width: none; }
	#accordion .panel-default>.panel-heading,
	#accordion .faq_a div { padding:15px; }
	#accordion .faq_title:before,
	#accordion .faq_a div:before { font-size:16px; width:25px; height:25px; line-height:25px; }
	#accordion .panel-title,
	#accordion .panel-body { font-size:16px; line-height:1.2; padding:4px 0 0 0; }
	#accordion .faq_title div,
	#accordion .panel-body { width:85%; }

	.navbar-form .btn, .navbar-form .btn:focus, .navbar-form .btn:active, .navbar-form .btn:active, .navbar-form .btn:focus, .navbar-form .btn:hover {
		font-size: 28px !important;
		line-height: 1.1;
		height: 28px;
	}

}












































/* sub1_1 : GCED */
.ic_gced1, .ic_gced2, .ic_gced3 {min-width:210px; min-height:210px; }
.ic_gced1, .ic_gced2 {border-right:dotted 2px #ddd}
	.ic_gced1 {background:url(/assets/images/sub1_2_i_01.png) 50% 50% no-repeat}
	.ic_gced2 {background:url(/assets/images/sub1_2_i_02.png) 50% 50% no-repeat}
	.ic_gced3 {background:url(/assets/images/sub1_2_i_03.png) 50% 50% no-repeat}
.gced .con_title, .gced .con_txt {text-align:center;}
.gced .con_txt {font-size:16px; line-height: 1.5em; padding:0 30px;}

.sub1_2.con_box .con_txt.align_r {font-size:14px; color:#999}


@media (max-width:500px) {
	
	.ic_gced1, .ic_gced2 {border-right:none}
	.ic_gced2, .ic_gced3 {border-top:dotted 2px #ddd}
}


/* sub2_1 : OVERVIEW */
.sub2_1.con_box .con_list {padding:0}


/* sub2_2 : Programme */
.sub_con.m40, .sub_con.m42 {padding:0 0 60px}

table.programme  {width:100%;}
table.programme th {display: none;}
table.programme tr:last-child td {border-bottom:2px solid #516df5; }
table.programme td:first-child {width:25%;text-align: center; font-size:20px; color:#516df5; line-height: 1.2em; vertical-align: top;}
table.programme td:first-child::before {content:''; background:url(../images/clock_blue.png) 0 0 no-repeat; display: inline-block; width:17px; height:17px;margin-right:10px;}
table.programme tr:last-child td:first-child::before {background:none;}

/* 대회 이전일 */

table.programme td.preday:first-child {background:#eee; border-bottom:none; font-size:20px;text-align: left; border-radius: 50px; margin-top:30px; margin-bottom:10px;}
table.programme td:first-child::before { background:none; display: none; width:0; height:0;margin-right:0;}


table.programme td {border-bottom:1px solid #dedede;  padding:22px 30px;font-size:16px; line-height:1.5; font-weight:600; }
table.programme td:first-child .due {font-size:16px;font-weight:600}
table.programme td .due {font-size:14px;font-weight:600}
table.programme td .p_title {font-size:18px; color:#555;font-weight:600;}
table.programme td .p_title strong {color:#000; font-weight:700; border-bottom:1px solid #000; margin-right:10px; }
table.programme td .p_detail {font-size:16px; line-height:1.6; color:#777;font-weight:500; margin-top:30px;}
table.programme td .p_detail strong {color:#000;font-weight:600;}
table.programme td .p_detail strong.room {font-size:16px; padding:0 3px; margin-right:10px; color:#000;font-weight:600;border-bottom:1px solid #ddd; background:#f9f9f9}
table.programme td .p_detail.session  {color:#777; font-size:16px; }
table.programme td .p_detail.session strong {font-size:16px;margin-top:15px; display: inline-block;  position: relative; }
/* table.programme td .p_detail.session strong:before {content: '';  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 40%;  background-color: #f4fbb4;  z-index: -1; } 형광펜 처리 숨김*/
table.programme td .dep2,
table.programme td > .p_detail   { margin-left:50px;}

table.programme td .dep2 .session    {font-size:14px;}
table.programme td .dep2 .session strong { font-size:16px;}


table.programme td div.dep2 {margin-top:50px;}


@media (max-width:1024px) {

}
@media (max-width:768px) {

}
@media (max-width:525px) {
	table.programme td {display: block; width:100%; padding: 10px 15px 22px;}
	table.programme td:first-child { width:100%; text-align: left; background:#f9f9f9; border-bottom:none;  padding: 22px 15px 10px;}
	table.programme td:first-child br {display: none;}
	table.programme td:last-child {border-bottom-width:2px; border-bottom-color: #555;} 
	table.programme td .dep2, table.programme td > .p_detail {margin-left: 20px; font-size:14px;}
	
	table.programme tr:last-child td:first-child {display: none;}
	table.programme td.preday:first-child {padding:10px; border-radius: 30px;}
	
}


/* sub2_3 : presenter modal popup */
.presenter_wrap{padding: 30px 20px 40px;}

.presenter_wrap h4.title {font-size:18px; color:#4f6df5; font-weight:700; margin-bottom:40px;
	background:url(/assets/images/icon_presenter.png) 0 50% no-repeat; padding-left:40px; min-height:40px;
	vertical-align: bottom; display:flex; align-items: center;
}
.presenter_wrap h5 {font-size:16px; color:#222;  margin-left: 40px; display:inline-block; background:#dce2fd; padding:5px 15px; border-radius: 10px;}
.presenter_wrap .p_list { display:flex; 
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
	border-bottom:#dddddd 1px solid; 
	margin:60px 0;
}
.presenter_wrap .p_list p {margin-bottom:0}
.presenter_wrap .p_list .person {width:20%; padding:0 3%; text-align: center;	min-height:300px; margin-bottom:50px}
.presenter_wrap .p_list .person .position {display:none; font-size:14px; line-height:1.2em;color:#666666;}
.presenter_wrap .p_list .person .position,
.presenter_wrap .p_list .person .role {display:none; }
.presenter_wrap .p_list .person .photo { min-height:230px; margin-bottom:20px;
	display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}
.presenter_wrap .p_list .person .photo a {display: flex; position:relative;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
border-radius: 50px; overflow: hidden;  /*position:absolute; top:0; left:18.5%;*/ }
/*.presenter_wrap .p_list .person .photo::after {display: block; content: ''; clear: none;}*/

.presenter_wrap .p_list .person .photo .over {
	display:inline-block; background-color:rgba(79, 109, 245, 0); background-position: 50% 50%; background-repeat: no-repeat; 
	overflow: hidden; position:absolute; top:0; left:0;width:100%; height: 100%; }
.presenter_wrap .p_list .person .photo .over:hover {background-color:rgba(79, 109, 245, 0.7); background-image:url(/assets/images/photo_magni.png);}
.presenter_wrap .p_list .person .role { text-align: center ;}
.presenter_wrap .p_list .person .role span {display: inline-block;  background:#e5e5e5; color:#777; font-size:13px; line-height:1.2em; padding:0 5px; }

.presenter_wrap .p_list .person .name {font-size:20px; font-weight:600; color:#000; line-height:1.4em;}

/* 모달 팝업 */
.presenter_wrap .modal_box	{width: 680px; height: 560px; margin: 0 auto; padding:0; text-align: center;	background-color: #fff; position: fixed; top:50%; left: 50%; transform: translate(-50%, -50%);	z-index: 999;}
.presenter_wrap .modal_box p {margin-bottom:0}
.presenter_wrap .modal_box .modal_header {background:#4f6df5; width:100%; padding:30px 50px; color:#fff; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;}
.presenter_wrap .modal_box .modal_header p {width:50%;text-align: left; font-size:18px;}
.presenter_wrap .modal_box .modal_header p:last-child {text-align: right;}
.presenter_wrap .modal_box .modal_header .close_btn	{ 	width: 36px;	height: 36px;	border: none;	margin-top: 0;	align-self: center;	cursor: pointer; background:none; color:#fff; font-size:40px; font-weight:400}

.presenter_wrap .modal_box .modal_info { padding:30px 50px; display: flex; flex-direction: row; }
.presenter_wrap .modal_box .modal_info .info {display: flex;  flex-direction: column-reverse;   justify-content: space-between;}
.presenter_wrap .modal_box .modal_info .info .name {text-align: center; padding-top:20px;}


.presenter_wrap .modal_box .modal_info .info .name strong {font-size:24px; line-height: 1.2em; display: block; color:#000; }
.presenter_wrap .modal_box .modal_info .info .name span {font-size:14px; display: block; color:#999 }
.presenter_wrap .modal_box .modal_info .info .name:after {display: inline-block; content: ''; width:100%; height:1px;/* border-bottom:1px solid #999*/}
.presenter_wrap .modal_box .modal_info .info .photo {width:180px; height:auto; border-radius: 50px; overflow: hidden;}
.presenter_wrap .modal_box .modal_info .info .photo img {width:100%; height:100%;}

.presenter_wrap .modal_box .modal_info .bio {width:100%; margin-left:30px; max-height:360px; font-size:14px; font-weight:300; text-align: left; padding-right:30px;}

.presenter_wrap .modal_box .modal_info .bio.ScrollBox {overflow-y: scroll;}
.presenter_wrap .modal_box .modal_info .bio.ScrollBox::-webkit-scrollbar {width: 4px;	}
.presenter_wrap .modal_box .modal_info .bio.ScrollBox::-webkit-scrollbar-thumb {background-color: #a0a0a0;	}
.presenter_wrap .modal_box .modal_info .bio.ScrollBox::-webkit-scrollbar-track {background-color: #e5e5e5;	}

.presenter_wrap .modal_bg	{ position: fixed;	top: 0; left:0;	width: 100%;	height: 100%;	background-color: rgba(0,0,0,0.5);	z-index: 99;}
@media (max-width:768px) {
	.presenter_wrap .p_list .person {width:48%; padding:0 3%;}
}

@media (max-width:525px) {
	.presenter_wrap{padding: 15px 10px 20px;}

	.presenter_wrap h4.title {font-size:16px; font-weight:500; 	}
	.presenter_wrap h5 {margin-left: 0; font-size:14px;}

	.presenter_wrap .p_list { display:flex; 
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		border-bottom:#dddddd 1px solid; 
		margin:30px 0;
	}
	.presenter_wrap .p_list .person {width:96%;}
	.presenter_wrap .modal_box	{width: 90%; }
	.presenter_wrap .modal_box .modal_info,
	.presenter_wrap .modal_box .modal_header {padding: 10px 20px;	}
	.presenter_wrap .modal_box .modal_info .info {display: block;}

	.presenter_wrap .modal_box .modal_info .info .name {
		text-align: center;
	}
	.presenter_wrap .modal_box .modal_info .info .photo {
		width: 150px;
		height: 150px;
		margin:10px auto;
	}
	.presenter_wrap .p_list .person .photo a {left:10%}
	.presenter_wrap .modal_box .modal_header .close_btn {font-size:30px; width:16px; height:30px;}


}




/* sub3 : History */

.history_top {background:#f5f6fa; width:100%; box-sizing:border-box;  border:1px solid #dddddd; padding:30px; text-align: center;}
.history_top h4.title {font-weight:700; font-size:38px; line-height:1.8em; margin-bottom:10px;}
.history_top .theme:nth-child(2)  {font-weight:500; font-size:18px; line-height:1.8em;color:#516df5;}
.history_top .theme:nth-child(2)::after {content: ''; display:block; width:30px; height:3px; background:#ddd; margin:5px auto;}
.history_top .theme:nth-child(3)  {color:#656565; font-size:18px; line-height:1.8em;}

.btn_history_down {color:#fff;  text-align:right; }
.btn_history_down a {display:inline-block;margin:0; font-size:16x;  text-align:center;  width:200px; padding:10px 20px; transition: all 0.5s;
	background: #516df5;
	color:#ebff46;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}
.btn_history_down a:hover {
	color:#516df5; 
	background:#ebff46;
    transition: all 0.5s;
}


.history_content h5.day {font-weight: 800; font-size:32px; margin:50px 0 18px;}
.history_content table {width:100%;}
.history_content table th:first-child, .history_content table td:first-child {width:25%;}
.history_content table th {background:#516df5; color:#fff; font-weight:600; font-size:20px; padding:26px; text-align: center; }
.history_content table th:first-child::before {content:''; background:url(../images/clock.png) 0 0 no-repeat; display: inline-block; width:17px; height:17px;margin-right:10px;}
.history_content table td {border-bottom:1px solid #dedede;  padding:22px 30px;font-size:16px; line-height:1.5; font-weight:600; }
.history_content table td:first-child {border-right:1px solid #dedede; background:#f9f9f9;  text-align: center; font-size:20px;  letter-spacing: 0.08em; }
.history_content table td.part_txt {background:#ebebeb; font-size:18px;  letter-spacing: 0; }
.history_content table td .p_title {font-size:18px; color:#516df5;font-weight:600;}
.history_content table td .p_title strong {font-weight:700; border-bottom:1px solid #516df5; margin-right:10px; }
.history_content table td .p_detail {font-size:16px; line-height:1.6; color:#777;font-weight:500; margin-top:30px;}
.history_content table td .p_detail strong {color:#000;font-weight:600;}
.history_content table td .p_detail strong.room {font-size:16px; padding:0 3px; margin-right:10px; color:#000;font-weight:600;border-bottom:1px solid #ddd; background:#f9f9f9}

.history_content table td .dep2,
.history_content table td > .p_detail   { margin-left:50px;}


.history_content table td .dep2 .session    {font-size:14px;}
.history_content table td .dep2 .session strong { font-size:16px;}


.history_content table td div.dep2 {margin-top:50px;}

@media (max-width:500px) {
	.history_top h4.title {font-size:28px; line-height:1.5em;}
	.history_top .theme:nth-child(2)  {font-size:16px; line-height:1.5em;}
	.history_top .theme:nth-child(3)  {font-size:16px; line-height:1.5em;}
	
	.history_content h5.day {font-size:26px; margin:30px 0 10px;}
	.history_content table th:first-child, .history_content table td:first-child {width:20%;}
	.history_content table th {font-weight:500; font-size:18px; padding:10px;}
	.history_content table td { padding:8px 10px;font-size:14px; line-height:1.5; }
	.history_content table td:first-child {font-size:14px;letter-spacing: 0;  }
	.history_content table td p.detail {font-size:14px;  line-height:1.3; margin-top:10px; margin-left:0;  }

	.history_content table td>.p_detail   { margin-left:0;}
	.history_content table td .dep2, .history_content table td>.p_detail.session { margin-left:20px;}

}



/* registration */

.sub4_1.con_box .con_title span.date {font-size: 22px; color:#4f6df5}

:lang(ko) .sub4_1.con_box .col-md-6 .con_txt {min-height:130px;}
:lang(en) .sub4_1.con_box .col-md-6 .con_txt {max-height:280px;min-height:200px;}

.btn_regi {display: inline-block; /*align-items: center; justify-content: space-between;*/ font-size: 22px; font-weight: 500; background-color: #4f6df5; color: #fff; width: 100%; min-height: 50px; padding:15px 30px; border-radius: 8px; line-height:1.5em}
.btn_regi:focus, .btn_regi:visited {color:#fff;} 
.btn_regi:hover, .btn_regi:active {color:#ebff46;}

i.regi {background: url(/assets/images/icon_regi.png) 50% 50% no-repeat; width: 32px; height: 32px; display: inline-block; vertical-align: text-bottom;}
.btn_regi:hover i.regi, .btn_regi:active i.regi {background: url(/assets/images/icon_regi_over.png) 50% 50% no-repeat;}


.sub4_1.con_box .col-md-6 {width:46%}
.sub4_1.con_box .onsite {border-right:1px dotted #eee; padding:0 ; } 
.sub4_1.con_box .online { padding:0}

@media (max-width:500px) {

.btn_regi {padding:15px 10px; }
.sub4_1.con_box .col-md-6 {width:100%}
.sub4_1.con_box .onsite {border-right:none;border-bottom:1px dotted #eee; padding:0 0 10% 0; } 
.sub4_1.con_box .online { margin-left:0; margin-top:10%; padding:0}
}

.onsite .btn_regi{background-color: #d5a23c; min-width: 200px; width:400px;}
.online .btn_regi{background-color: #8cae69; min-width: 200px; width:400px;}






/* privacy */
.privacy { background-color:#f9f9f9; border:1px #ddd solid; padding:3%; height:700px; overflow:scroll; }


/******* about_school *********/
/* ═══ 문서 본문 전용 블록들의 공통 규칙 (about_school / school_history / school_vision /
       major_scholarship / major_eduobj 에 모두 적용) ═══
   · 색·폰트는 root.css 변수 + 폴백으로 쓴다. major/layout.php 가 :root 를 덮으면 학과 키컬러를 따라간다.
   · 큰 표시용은 --font-family-title(OneMobileT), 작은 라벨은 --font-family-titleS(OneMobileR).
     ⚠ 둘 다 OneMobile.css 에 font-weight:normal 하나뿐이라 600/700/900 은 faux bold 로 렌더된다.
   · ⚠ 본문 요소마다 line-height 와 color 를 명시할 것 — .sub_con(20px/#555)·.con_box(#888) 상속에
     기대면 줄간격이 뭉친다.
   · 반응형은 flex/grid 가 기본이고 @media 는 크기만 다듬는다(구조는 미디어쿼리 없이도 성립).
   · 클래스는 문서별로 분리한다 — 한 문서를 고칠 때 다른 문서가 흔들리지 않게. 공통값이 늘면 묶는다.
   ═══════════════════════════════════════════════════════════════════════ */

/* 학부 소개(About the School). 대상: views/_html/01_about.html → cb_document.doc_content */

.about_school { color: var(--color-font-dark, #333); }

/* ── 인트로 ───────────────────────────────────────── */
.about_school .as_intro { max-width: 1440px; margin: 0 auto; text-align: center; }
.about_school .as_eyebrow {
  font-size: 12px; line-height: 1.6; font-weight: 700; letter-spacing: 0.3em;
  color: var(--color-primary-dark, #881241);
}
.about_school .as_headline {
  margin: 22px 0 0;
  font-family: var(--font-family-title, sans-serif);
  font-size: 31px; line-height: 1.55; font-weight: 600;
  color: var(--color-font-default, #000);
}
.about_school .as_headline strong { color: var(--color-primary-dark, #881241); font-weight: 900; }
.about_school .as_lead {
  max-width: 640px; margin: 26px auto 0;
  font-size: 16.5px; line-height: 1.8; color: var(--color-font-dark, #333);
}

/* ── 번호 섹션 (라벨 + 본문 2단) ──────────────────── */
.about_school .as_sec {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 24px 56px;
  margin-top: 40px; padding-top: 40px;
  border-top: 1px solid #e5e1de;
}
.about_school .as_sec.as_first { margin-top: 84px; padding-top: 64px; }
.about_school .as_sec_head { flex: 0 0 210px; max-width: 100%; }
.about_school .as_sec_body { flex: 1 1 420px; min-width: 0; }
.about_school .as_num {
  font-family: var(--font-family-titleS, sans-serif); font-size: 14px; line-height: 1.5;
  color: var(--color-primary-light, #b32b5c);
}
.about_school .as_sec_title {
  margin: 8px 0 0;
  font-family: var(--font-family-title,  sans-serif); font-size: 23px; line-height: 1.4; font-weight: 500;
  color: var(--color-font-default, #000);
}
.about_school .as_sec_en {
  margin-top: 6px;
  font-size: 11.5px; line-height: 1.6; letter-spacing: 0.18em;
  color: var(--color-font-light, #7c7c7c);
}

/* ── 본문 문단 ────────────────────────────────────── */
.about_school .as_text { margin: 0; font-size: 16px; line-height: 1.85; color: var(--color-font-dark, #333); }
.about_school .as_text + .as_facts,
.about_school .as_text + .as_majors { margin-top: 28px; }

/* ── 수치/언어 카드 (1px gap 이 테두리 역할) ───────── */
.about_school .as_facts {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: #e5e1de; border: 1px solid #e5e1de;
  margin-bottom: 32px;
}
.about_school .as_fact { flex: 1 1 140px; background: var(--color-bg-default, #fff); padding: 22px 16px; }
.about_school .as_fact_num {font-size: 30px; line-height: 1.2; font-weight: 700;
  color: var(--color-primary-dark, #881241);
}
.about_school .as_fact_label { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--color-font-light, #7c7c7c); }

/* 언어 3칸: 가운데 정렬 + 한글 라벨을 굵게 */
.about_school .as_facts.as_lang .as_fact { flex: 1 1 120px; padding: 26px 16px; text-align: center; }
.about_school .as_facts.as_lang .as_fact_label {
  margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--color-font-default, #000);
}
.about_school .as_fact_en {
  margin-top: 2px; font-size: 11.5px; line-height: 1.6; letter-spacing: 0.14em;
  color: var(--color-font-light, #7c7c7c);
}

/* ── 연혁 타임라인 ────────────────────────────────── */
.about_school .as_time { padding-top: 6px; }
.about_school .as_time_row { display: flex; gap: 12px; }
.about_school .as_time_date {
  flex: 0 0 92px; text-align: right;
  font-family: var(--font-family-titleS, 'OneMobileR', sans-serif); font-size: 17px; line-height: 1.5; font-weight: 700;
  color: var(--color-primary-dark, #881241);
  padding-bottom: 34px;
}
.about_school .as_time_mark { flex: 0 0 9px; display: flex; flex-direction: column; align-items: center; }
.about_school .as_time_mark:before {
  content: ""; width: 9px; height: 9px; margin-top: 7px; border-radius: 50%;
  background: var(--color-primary-dark, #881241); flex: 0 0 auto;
}
.about_school .as_time_mark:after { content: ""; flex: 1 1 auto; width: 1px; background: #e0d5d9; }
.about_school .as_time_text {
  flex: 1 1 auto; min-width: 0;
  font-size: 16px; line-height: 1.7; color: var(--color-font-dark, #333);
  padding-bottom: 34px;
}
/* 마지막 항목은 아래로 이어지는 선과 여백을 두지 않는다 */
.about_school .as_time_row:last-child .as_time_date,
.about_school .as_time_row:last-child .as_time_text { padding-bottom: 0; }
.about_school .as_time_row:last-child .as_time_mark:after { display: none; }

/* ── 전공 3카드 ───────────────────────────────────── */
.about_school .as_majors { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.about_school .as_major {
  flex: 1 1 240px;
  background: var(--color-bg-default, #fff);
  border: 1px solid #e5e1de;
  border-top: 3px solid var(--color-primary-dark, #881241);
  padding: 26px 22px;
}
.about_school .as_major_en {
  font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: 0.16em;
  color: var(--color-primary-dark, #881241);
}
.about_school .as_major_ko {
  margin-top: 10px;
  font-family: var(--font-family-titleS, sans-serif); font-size: 19px; line-height: 1.4; font-weight: 700;
  color: var(--color-font-default, #000);
}
.about_school .as_major_desc {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--color-font-light, #7c7c7c);
}

/* ── 마무리 문단 ──────────────────────────────────── */
/* 인트로와 같은 폭·정렬을 쓰되 위쪽에 구분선을 둔다.
   .as_intro 와 함께 써서 폭·정렬을 재사용한다: <div class="as_intro as_closing"> */
.about_school .as_closing {
  margin-top: 64px; padding-top: 48px; border-top: 1px solid #e5e1de;
}
/* .as_lead 의 margin-top:26px 이 위 padding-top 에 더해져 여백이 과해지므로 여기서만 없앤다 */
.about_school .as_closing .as_lead { margin-top: 0; }

/* ── 반응형 (구조는 flex-wrap 이 담당, 여기서는 크기만) ── */
@media (max-width:1024px) {
  .about_school .as_sec { gap: 20px 36px; }
  .about_school .as_sec.as_first { margin-top: 64px; padding-top: 48px; }
  .about_school .as_headline { font-size: 27px; }
}

@media (max-width:768px) {
  /* 라벨을 본문 위로 완전히 올린다(210px 를 붙잡지 않게) */
  .about_school .as_sec_head { flex: 1 1 100%; }
  .about_school .as_sec { gap: 14px 0; margin-top: 32px; padding-top: 32px; }
  .about_school .as_sec.as_first { margin-top: 48px; padding-top: 36px; }

  .about_school .as_eyebrow { font-size: 11px; letter-spacing: 0.22em; }
  .about_school .as_headline { font-size: 22px; line-height: 1.5; }
  .about_school .as_lead { margin-top: 20px; font-size: 15px; }
  .about_school .as_sec_title { font-size: 20px; }
  .about_school .as_text { font-size: 15px; line-height: 1.8; }

  .about_school .as_fact { padding: 18px 14px; }
  .about_school .as_fact_num { font-size: 25px; }
  .about_school .as_facts.as_lang .as_fact { padding: 20px 14px; }

  .about_school .as_time_date { flex: 0 0 76px; font-size: 15px; padding-bottom: 26px; }
  .about_school .as_time_text { font-size: 15px; padding-bottom: 26px; }

  .about_school .as_major { padding: 20px 18px; }
  .about_school .as_major_ko { font-size: 17px; }
  .about_school .as_closing { margin-top: 44px; padding-top: 32px; }
}
/******* about_school end *********/

/******* school_history *********/
/* 연혁(History). 대상: views/_html/01_history.html → cb_document.doc_content
   ★ 3열(시기 130px / 점 24px / 내용)은 grid 가 아니라 flex-basis 로 잡는다 — 미디어쿼리 없이도
     좁은 폭에서 내용만 줄어들어 무너지지 않는다.
   ★ 마일스톤 행은 <div class="hs_row hs_key"> 로 점 안을 키컬러로 채운다. 색 결정을 데이터가
     아니라 CSS 에 둔 것이다 — 본문이 DB 라 관리자가 색값을 편집할 일이 없어야 한다. */

.school_history { color: var(--color-font-dark, #333); }

/* ── 인트로 ───────────────────────────────────────── */
.school_history .hs_intro { max-width: 1440px; margin: 0 auto; text-align: center; }
.school_history .hs_eyebrow {
  font-size: 12px; line-height: 1.6; font-weight: 700; letter-spacing: 0.3em;
  color: var(--color-primary-dark, #881241);
}
.school_history .hs_headline {
  margin: 22px 0 0;
  font-family: var(--font-family-title, sans-serif);
  font-size: 31px; line-height: 1.55; font-weight: 600;
  color: var(--color-font-default, #000);
}
.school_history .hs_headline strong { color: var(--color-primary-dark, #881241); font-weight: 900; }

/* ── 연혁 표 ──────────────────────────────────────── */
.school_history .hs_table {
  max-width: 860px; margin: 84px auto 0; padding-top: 64px;
  border-top: 1px solid #e5e1de;
}

/* 머리행·본문행 공통 3열 : 시기(130px) · 점(24px) · 내용(가변).
   .hs_th_mark 는 빈 칸이지만 지우면 머리글 "학부 연혁" 이 내용 열과 어긋난다. */
.school_history .hs_thead,
.school_history .hs_row { display: flex; gap: 0 16px; }
.school_history .hs_thead { padding-bottom: 18px; }
.school_history .hs_th_date,
.school_history .hs_date { flex: 0 0 130px; text-align: right; }
.school_history .hs_th_mark,
.school_history .hs_mark { flex: 0 0 24px; }
.school_history .hs_th_body,
.school_history .hs_body { flex: 1 1 auto; min-width: 0; }

.school_history .hs_th_date,
.school_history .hs_th_body {
  font-size: 12px; line-height: 1.5; font-weight: 700; letter-spacing: 0.14em;
  color: var(--color-font-light, #7c7c7c);
}

/* 시기 */
.school_history .hs_date {
  font-family: var(--font-family-titleS, 'OneMobileR', sans-serif);
  font-size: 21px; line-height: 1.2; font-weight: 700;
  color: var(--color-primary-dark, #881241);
  padding-bottom: 40px;
}

/* 점 + 세로선. 점은 :before, 아래로 이어지는 선은 :after 가 남은 높이를 채운다 */
.school_history .hs_mark { display: flex; flex-direction: column; align-items: center; }
.school_history .hs_mark:before {
  content: ""; flex: 0 0 auto;
  width: 11px; height: 11px; margin-top: 5px; box-sizing: border-box;
  border: 2px solid var(--color-primary-dark, #881241); border-radius: 50%;
  background: var(--color-bg-default, #fff);
}
.school_history .hs_mark:after { content: ""; flex: 1 1 auto; width: 1px; background: #e0d5d9; }
.school_history .hs_key .hs_mark:before { background: var(--color-primary-dark, #881241); }

/* 내용 */
.school_history .hs_body { padding-bottom: 40px; }
.school_history .hs_event {
  display: inline-block; margin-bottom: 12px; padding: 7px 14px;
  background: var(--color-primary-dark, #881241);
  font-size: 14px; line-height: 1.5; font-weight: 700; color: #fff;
}
.school_history .hs_prog { font-size: 16px; line-height: 1.6; color: var(--color-font-dark, #333); }
.school_history .hs_prog + .hs_prog { margin-top: 8px; }
/* 트랙 배지. 좁은 폭에서는 학과명 아래로 넘어가되 배지 자체는 쪼개지지 않는다 */
.school_history .hs_prog_lang {
  display: inline-block; margin-left: 10px; padding: 2px 8px;
  border: 1px solid #e0d5d9; white-space: nowrap;
  font-size: 12.5px; line-height: 1.5; color: var(--color-font-light, #7c7c7c);
}

/* 범례 */
.school_history .hs_legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid #e5e1de;
  font-size: 13px; line-height: 1.6; color: var(--color-font-light, #7c7c7c);
}

/* ── 반응형 (구조는 flex 가 담당, 여기서는 크기만) ── */
@media (max-width:1024px) {
  .school_history .hs_headline { font-size: 27px; }
  .school_history .hs_table { margin-top: 64px; padding-top: 48px; }
}

@media (max-width:768px) {
  .school_history .hs_eyebrow { font-size: 11px; letter-spacing: 0.22em; }
  .school_history .hs_headline { font-size: 22px; line-height: 1.5; }
  .school_history .hs_table { margin-top: 48px; padding-top: 36px; }

  .school_history .hs_thead,
  .school_history .hs_row { gap: 0 12px; }
  /* 92px : 언어별 표기가 달라 가장 긴 중문 '2026年3月'(18px 기준 ≒81px)이 줄바꿈되지 않는 폭.
     국문 '2024.09'·영문 'Sep 2024' 는 더 짧다. */
  .school_history .hs_th_date,
  .school_history .hs_date { flex: 0 0 92px; }
  .school_history .hs_date { font-size: 18px; padding-bottom: 30px; }
  .school_history .hs_th_mark,
  .school_history .hs_mark { flex: 0 0 16px; }

  .school_history .hs_body { padding-bottom: 30px; }
  .school_history .hs_event { margin-bottom: 10px; padding: 6px 12px; font-size: 13px; }
  .school_history .hs_prog { font-size: 15px; }
  .school_history .hs_prog_lang { margin-left: 8px; font-size: 12px; }
  .school_history .hs_legend { gap: 4px 14px; font-size: 12.5px; }
}
/******* school_history end *********/

/******* school_vision *********/
/* 비전(Vision) 문서 본문 전용. 2026-08
   대상: views/_html/01_vision.html → cb_document.doc_content

   방사형 관계도를 CSS 로만 만든다(본문이 DB 라 JS 를 못 씀) —
     .vs_map 을 760:600 비율 박스로 만들고(:before 의 padding-top 78.947%), 원의 중심 좌표를 %
     로 줘서 폭에 따라 자동으로 좁혀지게 했다. 원 지름은 고정 px.
   ⚠ padding-top 의 % 는 "부모" 폭 기준이라 .vs_map 에 직접 주면 부모가 760px 보다 넓을 때 세로로
     늘어난다. :before 에 줘야 자기 폭 기준이 된다. :before 를 지우면 무대 높이가 0 이 되어
     관계도가 통째로 사라진다.
   ★ 세로 전환 768px — 방사형 최소 무대폭 570px(중심~위성 0.2737W ≥ 92+58+6=156) 근거.
   ★ 아이콘·연결선은 본문이 아니라 이 블록의 data URI 다. 아이콘은 .vs_nX:before 의 --vs-icon
     (mask + currentColor 라 학과 키컬러를 따름), 연결선은 .vs_map 의 background.
   ⚠ 항목을 늘리면 ① --vs-icon ② .vs_nX 좌표 ③ .vs_map 배경의 line 끝점 세 곳을 함께 고칠 것.
   ⚠ .vs_map_lines / .vs_node svg 의 display:none 은 남겨둘 것 — 옛 개정본에서 도형이 두 벌로
     뜨는 것을 막는 안전장치다. */

.school_vision { color: var(--color-font-dark, #333); }

/* ── 인트로 ───────────────────────────────────────── */
.school_vision .vs_intro { max-width: 1440px; margin: 0 auto; text-align: center; }
.school_vision .vs_eyebrow {
  font-size: 12px; line-height: 1.6; font-weight: 700; letter-spacing: 0.3em;
  color: var(--color-primary-dark, #881241);
}
.school_vision .vs_headline {
  margin: 22px 0 0;
  font-family: var(--font-family-title, sans-serif);
  font-size: 31px; line-height: 1.55; font-weight: 600;
  color: var(--color-font-default, #000);
}
.school_vision .vs_headline strong { color: var(--color-primary-dark, #881241); font-weight: 900; }
.school_vision .vs_lead {
  max-width: 1200px; margin: 26px auto 0;
  font-size: 16.5px; line-height: 1.85; color: var(--color-font-dark, #333);
}

/* ── 5대 교육 방향 ────────────────────────────────── */
.school_vision .vs_pillars {
  margin-top: 84px; padding-top: 56px;
  border-top: 1px solid #e5e1de;
}

/* ── 관계도 무대 (760:600 비율 박스) ──────────────── */
/* 연결선 + 점선 원은 본문이 아니라 이 배경(data URI)이다.
   ★ 배경이라 자식(.vs_hub/.vs_nodes)보다 아래에 그려진다 — :after 로 넣으면 선이 원 위를 가로지른다.
   ⚠ line 끝점은 아래 .vs_n1~5 의 % 좌표와 짝이다. 한쪽만 고치면 선이 원을 빗나간다.
   좌표(읽기용): 중심 380,300 / 끝점 01 380,92 · 02 578,236 · 03 502,470 · 04 258,470 · 05 182,236 */
.school_vision .vs_map {
  position: relative; max-width: 760px; margin: 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 600' fill='none' stroke='%23e0d5d9' stroke-width='1'%3E%3Ccircle cx='380' cy='300' r='208' stroke-dasharray='3 6'/%3E%3Cline x1='380' y1='300' x2='380' y2='92'/%3E%3Cline x1='380' y1='300' x2='578' y2='236'/%3E%3Cline x1='380' y1='300' x2='502' y2='470'/%3E%3Cline x1='380' y1='300' x2='258' y2='470'/%3E%3Cline x1='380' y1='300' x2='182' y2='236'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.school_vision .vs_map:before { content: ""; display: block; padding-top: 78.947%; } /* 600/760 */

/* 잔존 마크업 무해화 — 본문에서 SVG 를 걷어냈지만 옛 개정본을 되살리거나 다른 언어 문서가
   아직 안 바뀐 경우에도 선/아이콘이 두 벌로 보이지 않게 한다. 이 두 줄 덕분에 CSS 를 먼저
   배포하고 본문을 나중에 고쳐도 화면이 깨지지 않는다. 지우면 CSS 규칙을 잃은 인라인 SVG 가
   fill 기본값(검정)으로 렌더되어 아이콘 옆에 검은 덩어리가 함께 뜬다. */
.school_vision .vs_map_lines { display: none; }
.school_vision .vs_node svg  { display: none; }

.school_vision .vs_nodes { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* 중심 원 */
.school_vision .vs_hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 184px; height: 184px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center;
  background: var(--color-primary-dark, #881241); color: #fff;
  box-shadow: 0 14px 34px rgba(136, 18, 65, 0.28);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary-dark, #881241) 28%, transparent);
}
.school_vision .vs_hub_label {
  font-size: 10.5px; line-height: 1.5; font-weight: 600; letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.7);
}
.school_vision .vs_hub_title {
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 19px; line-height: 1.5; font-weight: 700; color: #fff;
}

/* 위성 원 */
.school_vision .vs_node {
  position: absolute; transform: translate(-50%, -50%);
  width: 116px; height: 116px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: var(--color-bg-default, #fff); border: 1px solid #e0d5d9;
  color: var(--color-primary-dark, #881241);
}
/* 위성원 아이콘. 인라인 SVG 를 mask 로 옮겼다 (아이콘 모양은 아래 .vs_n1~5 참고).
   ★ background-image 로 하면 색이 data URI 안에 박제되어 currentColor(= .vs_node 의
     --color-primary-dark, 학과별 키컬러) 상속이 끊긴다. 반드시 mask + background-color 다.
     선례: style.css 의 --logo-mask / btn_top_ink, 이 파일의 sub_menu_bg 마스크.
   ★ .vs_node 가 flex-direction:column 이라 :before 가 그대로 제목 위에 온다(순서보정 불필요).
     flex:none 은 원이 좁아졌을 때 아이콘이 눌리지 않게 하는 방어다. */
.school_vision .vs_node:before {
  content: ""; display: block; flex: none;
  width: 30px; height: 30px;
  /* 모양은 --vs-icon 하나로만 갈아끼운다(아래 .vs_n1~5). style.css 의 --logo-mask 와 같은 방식이라
     같은 data URI 를 접두사별로 두 번 쓰지 않아도 된다. */
  -webkit-mask-image: var(--vs-icon, none);  mask-image: var(--vs-icon, none);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}
/* mask 미지원 브라우저에서 색면 사각형 5개가 뜨는 것을 막는다(아이콘만 안 보이고 원은 정상).
   구형 사파리는 무접두 mask-image 를 모르므로 -webkit- 쪽도 or 로 함께 본다. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .school_vision .vs_node:before { background-color: currentColor; }
}
.school_vision .vs_node_title {
  font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--color-font-default, #000);
}

/* 위성 원의 중심 좌표 — 원본 캔버스 좌표를 % 로 옮긴 값(가로 /760, 세로 /600).
   항목을 늘리거나 순서를 바꾸면 여기와 위 .vs_map 배경의 line 끝점을 함께 고쳐야 한다. */
.school_vision .vs_n1 { left: 50%;     top: 15.333%; }  /* 380,92  국제화 */
.school_vision .vs_n2 { left: 76.053%; top: 39.333%; }  /* 578,236 전문화 */
.school_vision .vs_n3 { left: 66.053%; top: 78.333%; }  /* 502,470 융합성 */
.school_vision .vs_n4 { left: 33.947%; top: 78.333%; }  /* 258,470 실용화 */
.school_vision .vs_n5 { left: 23.947%; top: 39.333%; }  /* 182,236 다양성 */

/* 위성 원의 아이콘 모양. 24x24 캔버스이고 stroke 계열 속성은 data URI 안에 들어있다 —
   mask 안의 SVG 는 바깥 CSS 를 받지 않으므로 stroke-width:1.6 등을 밖에서 줄 수 없다.
   ★ 안의 stroke 색(%23000)은 마스크의 알파에만 쓰인다. 화면 색은 background-color:currentColor.
   ★ data URI 규칙 : < > # 는 %3C %3E %23 로, 속성값은 홑따옴표, url() 은 겹따옴표.
     xmlns 가 빠지면 이미지로 로드되지 않는다(파이어폭스에서 아이콘이 통째로 사라짐).
   각 줄 위 주석이 원본 SVG 의 path 다 — 모양을 바꿀 때 여기를 먼저 읽을 것. */

/* 01 국제화 : <path d='M22 2L11 13'/><path d='M22 2l-7 20-4-9-9-4z'/> */
.school_vision .vs_n1:before {
  --vs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
}
/* 02 전문화 : <path d='M12 4a8 8 0 1 0 0 16a8 8 0 0 0 0-16'/>
               <path d='M12 8.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7'/>
               <path d='M12 11.6a.4.4 0 1 0 0 .8a.4.4 0 0 0 0-.8'/> */
.school_vision .vs_n2:before {
  --vs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a8 8 0 1 0 0 16a8 8 0 0 0 0-16'/%3E%3Cpath d='M12 8.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7'/%3E%3Cpath d='M12 11.6a.4.4 0 1 0 0 .8a.4.4 0 0 0 0-.8'/%3E%3C/svg%3E");
}
/* 03 융합성 : <path d='M6 8.4a2.2 2.2 0 1 0 0-4.4a2.2 2.2 0 0 0 0 4.4'/>
               <path d='M18 8.4a2.2 2.2 0 1 0 0-4.4a2.2 2.2 0 0 0 0 4.4'/>
               <path d='M12 20.4a2.2 2.2 0 1 0 0-4.4a2.2 2.2 0 0 0 0 4.4'/>
               <path d='M8.2 6.2h7.6'/><path d='M7 8.2l4 8'/><path d='M17 8.2l-4 8'/> */
.school_vision .vs_n3:before {
  --vs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8.4a2.2 2.2 0 1 0 0-4.4a2.2 2.2 0 0 0 0 4.4'/%3E%3Cpath d='M18 8.4a2.2 2.2 0 1 0 0-4.4a2.2 2.2 0 0 0 0 4.4'/%3E%3Cpath d='M12 20.4a2.2 2.2 0 1 0 0-4.4a2.2 2.2 0 0 0 0 4.4'/%3E%3Cpath d='M8.2 6.2h7.6'/%3E%3Cpath d='M7 8.2l4 8'/%3E%3Cpath d='M17 8.2l-4 8'/%3E%3C/svg%3E");
}
/* 04 실용화 : <path d='M9 3h6'/>
               <path d='M10 3v6L4.5 19a1.5 1.5 0 0 0 1.4 2h12.2a1.5 1.5 0 0 0 1.4-2L14 9V3'/>
               <path d='M7.5 15h9'/> */
.school_vision .vs_n4:before {
  --vs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6L4.5 19a1.5 1.5 0 0 0 1.4 2h12.2a1.5 1.5 0 0 0 1.4-2L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E");
}
/* 05 다양성 : <path d='M9 17a5 5 0 1 0 0-10a5 5 0 0 0 0 10'/>
               <path d='M15 17a5 5 0 1 0 0-10a5 5 0 0 0 0 10'/> */
.school_vision .vs_n5:before {
  --vs-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17a5 5 0 1 0 0-10a5 5 0 0 0 0 10'/%3E%3Cpath d='M15 17a5 5 0 1 0 0-10a5 5 0 0 0 0 10'/%3E%3C/svg%3E");
}

/* ── 상세 목록 ────────────────────────────────────── */
.school_vision .vs_rows {
  max-width: 860px; margin: 40px auto 0;
  border-top: 1px solid #e5e1de;
}
.school_vision .vs_row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
  padding: 26px 4px; border-bottom: 1px solid #e5e1de;
}
.school_vision .vs_row_no {
  flex: 0 0 44px;
  font-family: var(--font-family-titleS, sans-serif); font-size: 15px; line-height: 1.5;
  color: var(--color-primary-light, #b32b5c);
}
.school_vision .vs_row_head { flex: 0 0 150px; }
.school_vision .vs_row_title {
  font-family: var(--font-family-titleS, sans-serif); font-size: 19px; line-height: 1.4; font-weight: 700;
  color: var(--color-font-default, #000);
}
.school_vision .vs_row_en {
  margin-top: 4px;
  font-size: 10.5px; line-height: 1.5; font-weight: 700; letter-spacing: 0.16em;
  color: var(--color-primary-light, #b32b5c);
}
/* min-width 로 설명이 너무 좁아지면 한 줄 아래로 내려간다(원본과 같은 동작) */
.school_vision .vs_row_desc {
  flex: 1 1 300px; min-width: 260px; margin: 0;
  font-size: 15.5px; line-height: 1.8; color: var(--color-font-dark, #333);
}

/* ── 반응형 ───────────────────────────────────────── */
/* 내용폭 참고(브레이크포인트 근거) — .container(부트스트랩3) → .row/.col-md-12 →
   .sub_con(좌우 20px, 768 이하 15px) → .con_box(좌우 15px, 768 이하 10px) 를 거친 실제 폭:
     뷰포트 992px 이상 : 970 - 30 - 40 - 30 = 870px
     뷰포트 769~991px  : 750 - 30 - 40 - 30 = 650px   ← 방사형 최소폭 570px 을 넘으므로 유지
     뷰포트 768px 이하 : 뷰포트 - 30 - 30 - 20        ← 세로 배치로 전환
   .sub_con/.con_box 패딩을 바꾸면 이 계산도 다시 해야 한다. */
@media (max-width:1024px) {
  .school_vision .vs_headline { font-size: 27px; }
  .school_vision .vs_pillars { margin-top: 64px; padding-top: 48px; }
}

/* 좁은 화면 : 같은 마크업을 방사형 → 세로 배치로 전환한다(원본의 isNarrow 분기 대체) */
@media (max-width:768px) {
  .school_vision .vs_eyebrow { font-size: 11px; letter-spacing: 0.22em; }
  .school_vision .vs_headline { font-size: 22px; line-height: 1.5; }
  .school_vision .vs_lead { margin-top: 20px; font-size: 15px; }
  .school_vision .vs_pillars { margin-top: 48px; padding-top: 36px; }

  .school_vision .vs_map {
    display: flex; flex-direction: column; align-items: center;
    max-width: 420px;
    background-image: none;   /* 방사형 연결선은 쓰지 않는다 */
  }
  .school_vision .vs_map:before { display: none; }   /* 비율 박스 해제 */

  /* 중심원 → 위 / 위성원 → 아래. 사이의 26px 세로선은 :after 로 그린다 */
  .school_vision .vs_hub {
    position: relative; left: auto; top: auto; transform: none;
    width: 170px; height: 170px; margin-bottom: 26px;
  }
  .school_vision .vs_hub:after {
    content: ""; position: absolute; left: 50%; top: 100%;
    width: 1px; height: 26px; background: #e0d5d9;
  }
  .school_vision .vs_nodes {
    position: static;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  }
  .school_vision .vs_node {
    position: static; transform: none;
    width: 104px; height: 104px; gap: 6px;
  }
  .school_vision .vs_node:before { width: 26px; height: 26px; }
  .school_vision .vs_node_title { font-size: 14px; }

  .school_vision .vs_rows { margin-top: 32px; }
  .school_vision .vs_row { gap: 6px 14px; padding: 20px 2px; }
  .school_vision .vs_row_no { flex: 0 0 32px; font-size: 14px; }
  .school_vision .vs_row_head { flex: 0 0 auto; }
  .school_vision .vs_row_title { font-size: 17px; }
  .school_vision .vs_row_desc { flex: 1 1 100%; min-width: 0; font-size: 14.5px; line-height: 1.75; }
}
/******* school_vision end *********/

/******* 학과 문서 공통 (인트로 · 아이콘) *********/
/* ── [학과 문서 공통] 값이 "완전히 같은" 규칙만 모아 둔 곳. 2026-08 ──
   대상 : .major_scholarship · .major_eduobj · .major_ggrad
   ★ 문서를 추가하면 아래 선택자 목록에 클래스를 끼워 넣는다 — 같은 선언을 문서 블록에 복사하지
     말 것. 값이 다른 것만 각 문서 블록에서 덮는다(문서 블록이 뒤에 와서 같은 명시도로 덮인다).
   ★ HTML 클래스명은 문서별로 둔다(.sch_* / .edu_*) — 공통 클래스명으로 갈아끼우면 cb_document 에
     붙여넣은 본문을 전부 다시 붙여넣어야 한다. */

.major_scholarship,
.major_eduobj,
.major_ggrad { color: var(--color-font-dark, #333); }

/* ── 인트로 (눈썹줄 + 표제) ───────────────────────── */
.major_scholarship .sch_intro,
.major_eduobj .edu_intro { max-width: 1440px; margin: 0 auto; text-align: center; }

.major_scholarship .sch_eyebrow,
.major_eduobj .edu_eyebrow {
  font-size: 12px; line-height: 1.6; font-weight: 700; letter-spacing: 0.3em;
  color: var(--color-primary-dark, #881241);
}

/* 표제가 짧은 단어가 아니라 문장 한 개라, 인트로의 1440px 를 그대로 쓰면 한 줄이 90자를 넘어
   읽기 힘들어진다. 원본 디자인들도 표제를 860~900px 로 묶어 두었다 — 사이트 선례인
   .vs_lead(1200px)에 맞춰 재단했다.
   ※ Educational Objectives 원본은 29px/1.6 이었으나 Scholarships 와 같은 급(31px/1.55)으로
     통일했다. 두 문서가 같은 학과의 서브페이지라 표제 크기가 달라지면 오히려 튄다. */
.major_scholarship .sch_headline,
.major_eduobj .edu_headline {
  max-width: 1200px; margin: 22px auto 0;
  font-family: var(--font-family-title, sans-serif);
  font-size: 31px; line-height: 1.55; font-weight: 600;
  color: var(--color-font-default, #000);
}
.major_scholarship .sch_headline strong,
.major_eduobj .edu_headline strong { color: var(--color-primary-dark, #881241); font-weight: 900; }

/* ── 중문 줄바꿈 ──────────────────────────────────── */
/* 중문은 단어 사이 공백이 없어 style.css 13행의 전역 `* { word-break: keep-all }`(한국어용) 아래에서
   구두점 사이 구절 전체가 끊을 수 없는 덩어리가 되어 좁은 화면에서 가로로 넘친다
   (520px 실측: 중문 표제 +51px). 중문에서만 normal 로 되돌린다 — ko/en 은 keep-all 유지.
   ⚠ 자손(`*`)까지 선택자에 넣어야 한다. 전역 규칙이 모든 요소에 "직접" 걸려 있어 부모에만 주면
     상속값이 자식의 직접 선언을 못 이긴다.
   ⚠ 같은 증상이 사이트 전역에 있다(01_about_cn +44px, 10_gmajor1_cn +167px). 여기서는 학과 문서
     두 블록만 고친다 — 전역 수정은 영향 범위가 넓어 별도 판단이 필요하다. */
:lang(zh) .major_scholarship,
:lang(zh) .major_scholarship *,
:lang(zh) .major_eduobj,
:lang(zh) .major_eduobj *,
:lang(zh) .major_ggrad,
:lang(zh) .major_ggrad * { word-break: normal; }

/* ── 아이콘 (data URI mask + currentColor) ────────── */
/* 모양은 --doc-icon 하나로만 갈아끼운다(각 문서 블록의 .sch_iN / .edu_iN).
   ⚠ 반드시 mask + background-color:currentColor — background-image 로 하면 색이 data URI 안에
     박제되어 학과 키컬러 상속이 끊긴다. data URI 의 stroke 색은 마스크 알파에만 쓰인다.
   ⚠ data URI 규칙 : < > # 는 %3C %3E %23 로, 속성값은 홑따옴표, url() 은 겹따옴표.
     xmlns 가 빠지면 이미지로 로드되지 않는다(파이어폭스에서 아이콘이 사라짐).
     mask 안의 SVG 는 바깥 CSS 를 못 받으므로 stroke-width 등도 data URI 안에 넣는다.
   ★ 크기·mask-size 는 문서마다 달라 각 블록에서 지정한다. */
.major_scholarship .sch_item:before,
.major_scholarship .sch_note_head:before,
.major_scholarship .sch_item_link:after,
.major_eduobj .edu_head:after {
  content: ""; display: block; flex: none;
  -webkit-mask-image: var(--doc-icon, none);  mask-image: var(--doc-icon, none);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}

/* mask 미지원 브라우저에서 색면 사각형이 뜨는 것을 막는다(아이콘만 안 보이고 나머지는 정상).
   구형 사파리는 무접두 mask-image 를 모르므로 -webkit- 쪽도 or 로 함께 본다. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .major_scholarship .sch_item:before,
  .major_scholarship .sch_note_head:before,
  .major_scholarship .sch_item_link:after,
  .major_eduobj .edu_head:after { background-color: currentColor; }
}

/* ── 반응형 (인트로 공통분 — 문서별 크기는 각 블록에서) ── */
@media (max-width:1024px) {
  .major_scholarship .sch_headline,
  .major_eduobj .edu_headline { font-size: 27px; }
}
@media (max-width:768px) {
  .major_scholarship .sch_eyebrow,
  .major_eduobj .edu_eyebrow { font-size: 11px; letter-spacing: 0.22em; }
  .major_scholarship .sch_headline,
  .major_eduobj .edu_headline { font-size: 22px; line-height: 1.5; }
}
/******* 학과 문서 공통 end *********/

/******* major_scholarship *********/
/* 학과 장학금(Scholarships) 문서 본문 전용. 2026-08
   대상: views/_html/major1_scholarship*.html → cb_document.doc_content
   ※ 인트로·아이콘 mask 공통 선언은 위 [학과 문서 공통] 블록에 있다. 여기는 이 문서만의 규칙.

   ⚠ 옅은 배경(태그 배지·안내상자)의 color-mix 와 바로 윗줄 폴백은 반드시 짝으로 유지할 것 —
     윗줄만 남기면 학과에서 자주색 띠가 뜨고, 아랫줄만 남기면 구형 브라우저에서 배경이 사라진다.
   ⚠ 항목을 늘리면 .sch_iN:before 의 --doc-icon 도 함께 추가해야 아이콘 자리가 안 빈다.
   ⚠ 타일을 <a> 로 감싸지 말 것 — style.css 14행의 전역 a > * { line-height:0 } 이 자식 줄간격을
     0 으로 눌러 타일이 찌그러진다(CLAUDE.md 의 .doc-files 배지 사고와 같은 함정). */

/* ── 인트로 ───────────────────────────────────────── */
/* .sch_intro / .sch_eyebrow / .sch_headline 은 [학과 문서 공통] 블록에 있다.
   여기는 이 문서에만 있는 .sch_lead 뿐 — 폭을 .sch_headline 과 같게 두어 두 줄의 좌우 끝을 맞춘다. */
.major_scholarship .sch_lead {
  max-width: 1200px; margin: 22px auto 0;
  font-size: 16.5px; line-height: 1.8; color: var(--color-font-dark, #333);
}

/* ── 장학금 타일 ──────────────────────────────────── */
/* auto-fit 이라 열 수가 폭에 따라 스스로 줄어든다(gap 14px 기준 5열 → 4열 → 3열 → 2열 → 1열).
   style.css 의 .container 가 max-width:1600px 이라 넓은 화면에서는 5개가 한 줄에 들어간다.
   ⚠ minmax 의 260px 를 낮추면 열은 늘지만 설명 문단이 좁아져 타일 높이가 크게 벌어진다. */
.major_scholarship .sch_items {
  max-width: 1440px; margin: 64px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
/* color 는 아이콘(:before)이 currentColor 로 상속받을 값이다 — 글자색은 아래에서 각자 덮는다
   (.vs_node 와 같은 구조). align-items:flex-start 는 태그 배지가 타일 폭 전체로 늘어나지 않게 한다. */
.major_scholarship .sch_item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 30px 26px;
  background: var(--color-bg-default, #fff);
  border: 1px solid #e5e1de;
  border-top: 3px solid var(--color-primary-dark, #881241);
  color: var(--color-primary-dark, #881241);
}
.major_scholarship .sch_item_title {
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 18px; line-height: 1.4; font-weight: 700;
  color: var(--color-font-default, #000);
}
.major_scholarship .sch_item_tag {
  padding: 5px 10px;
  font-size: 12.5px; line-height: 1.5; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-primary-dark, #881241);
  background: #f3e7ec;   /* color-mix 폴백 : 본부 키컬러 #881241 의 10% 틴트 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 10%, #fff);
}
/* 설명 문단이 타일 밖으로 나가지 않게. 2026-08-14 (실측: 긴 URL +131px, 긴 한글 +51px → 0px)
   ⚠ 세 줄 다 필요하다 — 부모 .sch_item 의 align-items:flex-start 가 자식 폭을 fit-content 로
     만들고(그 flex-start 는 위 태그 배지용이라 부모를 고치면 안 된다 → align-self 로 되돌림),
     전역 word-break:keep-all 이 긴 토큰을 안 끊는다.
   ⚠ break-word 가 아니라 anywhere 여야 한다 — anywhere 만 min-content 계산에 반영되어
     grid/flex 트랙 산정까지 잡힌다. 평소 어절 단위 줄바꿈에는 영향이 없다. */
.major_scholarship .sch_item_desc {
  margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--color-font-dark, #333);
  align-self: stretch; max-width: 100%; overflow-wrap: anywhere;
}

/* ── 상세 링크 (외부 사이트 · 새 창) ──────────────── */
/* 각 장학금의 안내 페이지(oia.cbnu.ac.kr)로 나간다. 2026-08-20
   margin-top:auto 로 타일 맨 아래에 붙인다 — grid 가 한 줄의 타일 높이를 맞추므로 설명 길이가
   달라도 한 줄 안의 링크들이 세로로 나란히 정렬된다.
   ⚠ <a> 안에 <span>·<svg> 를 넣지 말 것 — style.css 14행의 전역 a > * { line-height:0 } 이 자식
     줄간격을 0 으로 눌러 글자가 찌그러진다(CLAUDE.md 의 .doc-files 배지 사고와 같은 함정).
     아이콘은 :after 로 그린다 — 의사요소는 그 전역 규칙의 대상이 아니다.
   ⚠ 평소에도 border-bottom 을 transparent 로 잡아 둔다 — hover 에서 0 → 1px 로 만들면 링크
     높이가 1px 늘어 타일 안의 글이 밀린다. */
.major_scholarship .sch_item_link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; line-height: 1.5; font-weight: 700;
  color: var(--color-primary-dark, #881241);
  border-bottom: 1px solid transparent;
}
.major_scholarship .sch_item_link:hover,
.major_scholarship .sch_item_link:focus-visible { border-bottom-color: currentColor; }

/* 새 창(external-link) 아이콘. mask 공통 선언은 [학과 문서 공통] 블록에 있다 — 여기는 크기·모양만.
   원본 SVG : <path d='M14 4h6v6'/><path d='M20 4l-9 9'/>
              <path d='M17 14.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4.5'/>
   ※ 14px 로 줄어드니 stroke-width 는 타일 아이콘(1.7)보다 굵은 2 를 쓴다. */
.major_scholarship .sch_item_link:after {
  width: 14px; height: 14px;
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M17 14.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4.5'/%3E%3C/svg%3E");
}

/* ── 안내 상자 ────────────────────────────────────── */
/* 라벨은 고정(flex:none), 문단이 남는 폭을 먹다가 좁아지면 아래로 내려간다 */
.major_scholarship .sch_note {
  max-width: 1440px; margin: 44px auto 0;
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  padding: 28px 30px;
  border: 1px solid #e5e1de;
  background: #f9f3f6;   /* color-mix 폴백 : 본부 키컬러 #881241 의 5% 틴트 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 5%, #fff);
}
.major_scholarship .sch_note_head {
  flex: none; display: flex; align-items: center; gap: 8px;
  font-size: 15px; line-height: 1.6; font-weight: 700;
  color: var(--color-primary-dark, #881241);
}
.major_scholarship .sch_note_text {
  flex: 1 1 420px; min-width: 280px; margin: 0;
  font-size: 15px; line-height: 1.85; color: var(--color-font-dark, #333);
}

/* ── 아이콘 (mask + currentColor) ─────────────────── */
/* mask 공통 선언(-webkit- 포함)과 미지원 폴백은 [학과 문서 공통] 블록에 있다.
   여기는 크기와 모양(--doc-icon)만 지정한다.
   ⚠ 항목을 늘리면 아래 .sch_iN:before 의 --doc-icon 도 함께 추가해야 아이콘 자리가 빈다. */
.major_scholarship .sch_item:before      { width: 26px; height: 26px; }
.major_scholarship .sch_note_head:before { width: 20px; height: 20px; }

/* 각 줄 위 주석이 원본 SVG 의 path 다 — 모양을 바꿀 때 여기를 먼저 읽을 것. */

/* 01 CBNU Bridge : <path d='M4 20V8l8-4l8 4v12'/><path d='M9 20v-6h6v6'/><path d='M12 4v4'/> */
.major_scholarship .sch_i1:before {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V8l8-4l8 4v12'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3Cpath d='M12 4v4'/%3E%3C/svg%3E");
}
/* 02 TOPIK : <path d='M4 5h16v11H4z'/><path d='M8 20h8'/><path d='M12 16v4'/>
              <path d='M7.5 9h5'/><path d='M7.5 12h9'/> */
.major_scholarship .sch_i2:before {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H4z'/%3E%3Cpath d='M8 20h8'/%3E%3Cpath d='M12 16v4'/%3E%3Cpath d='M7.5 9h5'/%3E%3Cpath d='M7.5 12h9'/%3E%3C/svg%3E");
}
/* 03 GKS : <path d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18'/><path d='M3 12h18'/>
            <path d='M12 3c2.5 2.4 3.8 5.4 3.8 9s-1.3 6.6-3.8 9c-2.5-2.4-3.8-5.4-3.8-9S9.5 5.4 12 3'/> */
.major_scholarship .sch_i3:before {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.4 3.8 5.4 3.8 9s-1.3 6.6-3.8 9c-2.5-2.4-3.8-5.4-3.8-9S9.5 5.4 12 3'/%3E%3C/svg%3E");
}
/* 04 Tuition Waiver : <path d='M18 6L6 18'/>
                       <path d='M8 9.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3'/>
                       <path d='M16 17.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3'/> */
.major_scholarship .sch_i4:before {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18'/%3E%3Cpath d='M8 9.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3'/%3E%3Cpath d='M16 17.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3'/%3E%3C/svg%3E");
}
/* 05 Other : <path d='M20 8H4v12h16z'/>
              <path d='M9.5 8V6.5A2.5 2.5 0 0 1 12 4a2.5 2.5 0 0 1 2.5 2.5V8'/><path d='M4 13h16'/> */
.major_scholarship .sch_i5:before {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 8H4v12h16z'/%3E%3Cpath d='M9.5 8V6.5A2.5 2.5 0 0 1 12 4a2.5 2.5 0 0 1 2.5 2.5V8'/%3E%3Cpath d='M4 13h16'/%3E%3C/svg%3E");
}
/* 안내 : <path d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18'/><path d='M12 8h.01'/><path d='M11.5 11.5h1V16h-1z'/> */
.major_scholarship .sch_note_head:before {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18'/%3E%3Cpath d='M12 8h.01'/%3E%3Cpath d='M11.5 11.5h1V16h-1z'/%3E%3C/svg%3E");
}

/* ── 반응형 (구조는 auto-fit/flex-wrap 이 담당, 여기서는 크기만) ── */
/* 인트로(.sch_eyebrow / .sch_headline)의 반응형은 [학과 문서 공통] 블록에 있다. */
@media (max-width:1024px) {
  .major_scholarship .sch_items { margin-top: 48px; }
}

@media (max-width:768px) {
  .major_scholarship .sch_lead { margin-top: 18px; font-size: 15px; }

  .major_scholarship .sch_items { margin-top: 36px; gap: 12px; }
  .major_scholarship .sch_item { padding: 24px 20px; gap: 12px; }
  .major_scholarship .sch_item:before { width: 24px; height: 24px; }
  .major_scholarship .sch_item_title { font-size: 17px; }
  .major_scholarship .sch_item_desc { font-size: 14px; line-height: 1.75; }
  .major_scholarship .sch_item_link { font-size: 14px; }

  .major_scholarship .sch_note { margin-top: 32px; padding: 22px 20px; gap: 10px 16px; }
  .major_scholarship .sch_note_text { flex: 1 1 100%; min-width: 0; font-size: 14.5px; line-height: 1.8; }
}
/******* major_scholarship end *********/

/******* major_eduobj *********/
/* 학과 교육목표(Educational Objectives). 대상: views/_html/major1_educationobj*.html
   ※ 인트로·아이콘 mask 는 [학과 문서 공통] 블록에 있다. 여기는 항목 카드만.

   ★ 메인컬러는 전부 --color-primary-dark(학과 키컬러를 따라가야 하므로 원본의 그린 값을 안 박음).
   ⚠ 옅은 배경(아이콘 바탕)의 color-mix 와 바로 윗줄 폴백은 반드시 짝으로 유지할 것.
   ★ 아이콘은 .edu_iN 의 --doc-icon(data URI mask)이고, .edu_head 의 :before/:after 두 겹으로
     그린다 — ⚠ 빈 <div> 를 두면 CKEditor 가 내용 없는 요소를 지워버리기 때문이다. */

/* ── 항목 카드 ────────────────────────────────────── */
/* 원본이 2열 고정이고 설명 문단이 길어 auto-fit(장학금 타일 방식)을 쓰지 않았다 —
   1600px 컨테이너에서 auto-fit 이면 4개가 한 줄로 늘어서 카드가 잘게 쪼개진다. */
.major_eduobj .edu_items {
  max-width: 1440px; margin: 64px auto 0; padding-top: 56px;
  border-top: 1px solid #e5e1de;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
/* color 는 아이콘(:after)이 currentColor 로 상속받을 값이다 — 글자색은 아래에서 각자 덮는다. */
.major_eduobj .edu_item {
  padding: 30px 28px;
  background: var(--color-bg-default, #fff);
  border: 1px solid #e5e1de;
  border-left: 3px solid var(--color-primary-dark, #881241);
  color: var(--color-primary-dark, #881241);
}

/* 아이콘(1열) + 번호(2열 1행) + 항목명(2열 2행). 아이콘은 두 행에 걸쳐 세로 가운데.
   ⚠ :before(바탕 사각형)와 :after(아이콘 글리프)를 같은 그리드 칸에 겹쳐 놓는다. mask 는
     요소가 칠한 배경을 오려내는 방식이라 한 요소가 바탕색과 글리프색을 동시에 가질 수 없다.
     겹치는 순서는 DOM 순서 그대로 :after 가 위다. */
.major_eduobj .edu_head {
  display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center;
}
.major_eduobj .edu_head:before,
.major_eduobj .edu_head:after {
  grid-column: 1; grid-row: 1 / span 2;
  width: 46px; height: 46px;
}
.major_eduobj .edu_head:before {
  content: "";
  background: #f3e7ec;   /* color-mix 폴백 : 본부 키컬러 #881241 의 10% 틴트 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 10%, #fff);
}
/* mask 공통 선언은 [학과 문서 공통] 블록에 있다. 46px 칸 안에 24px 글리프만 그린다. */
.major_eduobj .edu_head:after { -webkit-mask-size: 24px 24px; mask-size: 24px 24px; }

.major_eduobj .edu_no {
  grid-column: 2; grid-row: 1;
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 13px; line-height: 1.4; font-weight: 600;
  color: var(--color-primary-dark, #881241);
}
.major_eduobj .edu_title {
  grid-column: 2; grid-row: 2;
  margin-top: 2px;
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 18px; line-height: 1.35; font-weight: 700;
  color: var(--color-font-default, #000);
}
.major_eduobj .edu_desc {
  margin: 18px 0 0;
  font-size: 15.5px; line-height: 1.8; color: var(--color-font-dark, #333);
}

/* ── 아이콘 모양 (원본 SVG 의 path 를 그대로 옮긴 것) ── */
/* 01 개발 기초 : <path d='M8 17l-5-5l5-5'/><path d='M16 7l5 5l-5 5'/><path d='M13.5 4l-3 16'/> */
.major_eduobj .edu_i1 .edu_head:after {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 17l-5-5l5-5'/%3E%3Cpath d='M16 7l5 5l-5 5'/%3E%3Cpath d='M13.5 4l-3 16'/%3E%3C/svg%3E");
}
/* 02 첨단기술 응용 : <path d='M12 3a4.5 4.5 0 0 0-4.5 4.5c0 1.4.6 2.6 1.6 3.4c.7.6 1.1 1.4 1.1 2.3v.8h3.6v-.8c0-.9.4-1.7 1.1-2.3a4.5 4.5 0 0 0 1.6-3.4A4.5 4.5 0 0 0 12 3'/>
                      <path d='M10.2 17.8h3.6'/><path d='M10.8 20.5h2.4'/> */
.major_eduobj .edu_i2 .edu_head:after {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a4.5 4.5 0 0 0-4.5 4.5c0 1.4.6 2.6 1.6 3.4c.7.6 1.1 1.4 1.1 2.3v.8h3.6v-.8c0-.9.4-1.7 1.1-2.3a4.5 4.5 0 0 0 1.6-3.4A4.5 4.5 0 0 0 12 3'/%3E%3Cpath d='M10.2 17.8h3.6'/%3E%3Cpath d='M10.8 20.5h2.4'/%3E%3C/svg%3E");
}
/* 03 산업 융합 : <path d='M3 21h18'/><path d='M6 21V9l5-3v15'/><path d='M11 21V11l7-3v13'/>
                  <path d='M14.5 12.5h.01'/><path d='M14.5 16h.01'/><path d='M8.5 12.5h.01'/><path d='M8.5 16h.01'/> */
.major_eduobj .edu_i3 .edu_head:after {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V9l5-3v15'/%3E%3Cpath d='M11 21V11l7-3v13'/%3E%3Cpath d='M14.5 12.5h.01'/%3E%3Cpath d='M14.5 16h.01'/%3E%3Cpath d='M8.5 12.5h.01'/%3E%3Cpath d='M8.5 16h.01'/%3E%3C/svg%3E");
}
/* 04 프로젝트·협업 : <path d='M9 11.5a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/><path d='M2 20c0-3.2 3.1-5.8 7-5.8s7 2.6 7 5.8'/>
                      <path d='M16 6a3 3 0 0 1 0 5.6'/><path d='M18.4 15c2.1.8 3.6 2.5 3.6 4.6'/> */
.major_eduobj .edu_i4 .edu_head:after {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11.5a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/%3E%3Cpath d='M2 20c0-3.2 3.1-5.8 7-5.8s7 2.6 7 5.8'/%3E%3Cpath d='M16 6a3 3 0 0 1 0 5.6'/%3E%3Cpath d='M18.4 15c2.1.8 3.6 2.5 3.6 4.6'/%3E%3C/svg%3E");
}

/* ── 학과별 아이콘 교체 ───────────────────────────── */
/* .edu_i1~4 는 "몇 번째 항목"일 뿐이라 아이콘 모양이 학과마다 달라야 한다(major1 의 코드 괄호가
   글로벌교육의 "교육 이론·정책"에 붙으면 뜻이 어긋난다). 본문 wrapper 에 학과 modifier 를 하나
   더 붙이고 여기서 --doc-icon 만 덮는다 — 크기·배치·색은 위 규칙을 그대로 쓴다.
   ★ 색은 덮지 않는다. --color-primary-dark 가 학과 키컬러를 이미 따라간다
     (글로벌교육 = 블루 #0d47a1, major_sites.php 의 major_theme).
   ★ 학과를 추가할 때는 .eduobj_majorN 를 하나 더 만들어 4줄만 쓴다. modifier 가 없는 본문은
     위 major1 아이콘이 기본값으로 남는다. */

/* 글로벌교육(major2 / global-education) */
/* 01 교육 이론·정책 : <path d='M12 6.8C10.2 5.3 8 4.6 5.5 4.6H3v12.8h2.5c2.5 0 4.7.7 6.5 2.2'/>
                       <path d='M12 6.8c1.8-1.5 4-2.2 6.5-2.2H21v12.8h-2.5c-2.5 0-4.7.7-6.5 2.2'/>
                       <path d='M12 6.8v13'/> */
.major_eduobj.eduobj_major2 .edu_i1 .edu_head:after {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.8C10.2 5.3 8 4.6 5.5 4.6H3v12.8h2.5c2.5 0 4.7.7 6.5 2.2'/%3E%3Cpath d='M12 6.8c1.8-1.5 4-2.2 6.5-2.2H21v12.8h-2.5c-2.5 0-4.7.7-6.5 2.2'/%3E%3Cpath d='M12 6.8v13'/%3E%3C/svg%3E");
}
/* 02 다문화 이해 : <path d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18'/><path d='M3 12h18'/>
                    <path d='M12 3c2.5 2.4 3.8 5.4 3.8 9s-1.3 6.6-3.8 9c-2.5-2.4-3.8-5.4-3.8-9S9.5 5.4 12 3'/>
   (장학금 블록의 GKS 아이콘과 같은 지구본 — 사이트 안에서 뜻이 같은 도형은 모양도 같게 둔다) */
.major_eduobj.eduobj_major2 .edu_i2 .edu_head:after {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.5 2.4 3.8 5.4 3.8 9s-1.3 6.6-3.8 9c-2.5-2.4-3.8-5.4-3.8-9S9.5 5.4 12 3'/%3E%3C/svg%3E");
}
/* 03 교육 실천 : <path d='M3 4.5h18'/><path d='M4.5 4.5v9.5h15V4.5'/><path d='M12 14v3.5'/>
                  <path d='M9 21l3-3.5l3 3.5'/><path d='M8.5 10.5l2.5-2.5l2 2l2.5-3'/> */
.major_eduobj.eduobj_major2 .edu_i3 .edu_head:after {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h18'/%3E%3Cpath d='M4.5 4.5v9.5h15V4.5'/%3E%3Cpath d='M12 14v3.5'/%3E%3Cpath d='M9 21l3-3.5l3 3.5'/%3E%3Cpath d='M8.5 10.5l2.5-2.5l2 2l2.5-3'/%3E%3C/svg%3E");
}
/* 04 국제 교육 협력 : <path d='M6.5 9a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5'/>
                       <path d='M17.5 9a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5'/>
                       <path d='M12 20a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5'/>
                       <path d='M9 6.5h6'/><path d='M7.6 8.7l3.3 6.6'/><path d='M16.4 8.7l-3.3 6.6'/> */
.major_eduobj.eduobj_major2 .edu_i4 .edu_head:after {
  --doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5'/%3E%3Cpath d='M17.5 9a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5'/%3E%3Cpath d='M12 20a2.5 2.5 0 1 0 0-5a2.5 2.5 0 0 0 0 5'/%3E%3Cpath d='M9 6.5h6'/%3E%3Cpath d='M7.6 8.7l3.3 6.6'/%3E%3Cpath d='M16.4 8.7l-3.3 6.6'/%3E%3C/svg%3E");
}

/* ── 반응형 (인트로 공통분은 [학과 문서 공통] 블록에) ── */
@media (max-width:1024px) {
  .major_eduobj .edu_items { margin-top: 48px; padding-top: 44px; }
}

@media (max-width:768px) {
  /* 설명 문단이 길어 2열을 유지하면 좁은 화면에서 글자가 세로로 흘러내린다 */
  .major_eduobj .edu_items { margin-top: 36px; padding-top: 32px; grid-template-columns: 1fr; gap: 12px; }
  .major_eduobj .edu_item { padding: 24px 20px; }
  .major_eduobj .edu_head { grid-template-columns: 40px 1fr; column-gap: 12px; }
  .major_eduobj .edu_head:before,
  .major_eduobj .edu_head:after { width: 40px; height: 40px; }
  .major_eduobj .edu_head:after { -webkit-mask-size: 22px 22px; mask-size: 22px 22px; }
  .major_eduobj .edu_title { font-size: 17px; }
  .major_eduobj .edu_desc { margin-top: 14px; font-size: 14px; line-height: 1.75; }
}
/******* major_eduobj end *********/

/******* major_ggrad *********/
/* 대학원 졸업요건(Graduation Requirements for Graduate Students). 2026-08
   대상: views/_html/major1_ggraduation_{en,cn}.html → cb_document.doc_content
   ※ 기본 글자색과 중문 word-break 는 [학과 문서 공통] 블록에 있다. 여기는 이 문서만의 규칙.

   ★ 메인컬러는 전부 --color-primary-dark 다. 시안의 그린 #1b5e20 은 major_sites.php 의
     convergence-software 키컬러 값 그대로라, 값으로 박으면 다른 학과에서 색이 안 바뀐다.
   ⚠ 옅은/짙은 배경의 color-mix 와 바로 윗줄 폴백은 반드시 짝으로 유지할 것 —
     윗줄만 남기면 학과에서 자주색이 뜨고, 아랫줄만 남기면 구형 브라우저에서 배경이 사라진다.
     쓰는 틴트는 5%(옅은 면) · 10%(배지·표 머리) · 20%(테두리) · 45%+#000(좌측 레일 바탕) ·
     45%+#fff(레일 위 강조색) 다섯 가지뿐이다.

   ★ 접기/펼치기는 부트스트랩 3 collapse 다. bootstrap.min.css/js(3.3.6)가 프론트 레이아웃에
     이미 로드돼 있어(FAQ 의 #accordion 과 같은 방식) 전용 JS 를 만들지 않았다.
     ⚠ 패널은 class="collapse in"(열림)으로 시작한다 — 시안의 기본 상태이자, JS 가 죽어도 본문이
        그대로 보이는 상태다. 여기서 in 을 빼면 JS 실패 시 본문이 통째로 사라진다.
     ⚠ +/− 표시는 부트스트랩이 트리거에 붙였다 떼는 .collapsed 를 후크로 :after 로 그린다.
        빈 <span> 을 두면 CKEditor 가 내용 없는 요소를 지운다(major_eduobj 아이콘과 같은 이유).
     ⚠ 트리거는 <button> 이어야 한다 — <div role="button"> 은 키보드로 열 수 없고(부트스트랩은
        click 만 바인딩), <a> 로 감싸면 style.css 14행의 전역 a > * { line-height:0 } 이 자식
        span 의 줄간격을 0 으로 눌러 제목이 찌그러진다.

   ★ 점수표는 <table> 하나만 둔다. 좁은 화면의 카드형 목록은 td[data-label] + :before 로 같은
     마크업을 다시 쓴다 — 시안은 표와 목록을 각각 그렸는데 그러면 점수 10개가 본문에 두 벌 들어가
     관리자가 두 곳을 고쳐야 한다. ⚠ data-label 을 지우면 좁은 화면에서 항목명이 사라진다.
*/

/* ── 2단 레이아웃 ─────────────────────────────────── */
/* max-width 1200px : 사이트의 본문 가독폭 선례(.sch_headline · .vs_lead)와 같은 값.
   1440px 로 두면 넓은 화면에서 본문 열이 1150px 가 되어 한 줄이 140자를 넘는다(시안의 본문 열은
   약 750px). 표의 min-width 860px 와도 맞물린다 — 아래 1220px 미디어쿼리 주석 참고. */
.major_ggrad .grad_wrap {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 40px;
}
.major_ggrad .grad_rail { flex: 0 0 250px; max-width: 100%; }
.major_ggrad .grad_body { flex: 1 1 460px; min-width: 0; }

/* ── 좌측 목차 레일 ──────────────────────────────── */
/* 상단 메뉴바는 항상 position:fixed 다(style.css .navbar) — 높이는 유틸바 45px + --height-header.
   그 아래로 16px 띄운다. 변수를 그대로 읽으므로 좁은 화면에서 자동으로 따라 줄어든다.
   ⚠ 조상에 overflow:hidden 이 생기면 sticky 가 조용히 죽는다(그때는 static 처럼 보임). */
.major_ggrad .grad_rail_box {
  position: sticky; top: calc(var(--height-header, 120px) + 61px);
  padding: 26px 22px;
  background: #3d081d;   /* color-mix 폴백 : 본부 키컬러 #881241 을 45% 로 어둡게 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 45%, #000);
  color: #fff;
}
.major_ggrad .grad_rail_label {
  font-size: 11px; line-height: 1.6; font-weight: 700; letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}
.major_ggrad .grad_toc { margin-top: 16px; display: flex; flex-direction: column; }
.major_ggrad .grad_toc_item {
  display: flex; gap: 12px; align-items: baseline;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.86);
}
.major_ggrad .grad_toc_item:hover,
.major_ggrad .grad_toc_item:focus { color: #fff; text-decoration: none; }
/* ⚠ line-height 를 지우지 말 것 — style.css 14행의 전역 a > * { line-height:0 } 이 <a> 의 자식
   span 을 0 으로 눌러 목차 줄이 서로 겹친다. 클래스 선택자가 그 전역 규칙을 이긴다. */
.major_ggrad .grad_toc_no {
  flex: none;
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 12px; line-height: 1.5; font-weight: 600;
  color: #c994aa;   /* color-mix 폴백 : 본부 키컬러 #881241 의 45% 밝은 틴트 */
  color: color-mix(in srgb, var(--color-primary-dark, #881241) 45%, #fff);
}
.major_ggrad .grad_toc_label { font-size: 14px; line-height: 1.5; }

.major_ggrad .grad_rail_links {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; flex-direction: column; gap: 10px;
}
.major_ggrad .grad_rail_links a {
  font-size: 13px; line-height: 1.6; font-weight: 700;
  color: #c994aa;   /* color-mix 폴백 : 본부 키컬러 #881241 의 45% 밝은 틴트 */
  color: color-mix(in srgb, var(--color-primary-dark, #881241) 45%, #fff);
}
/* 외부링크 화살표. 빈 요소를 안 만들려고 :after 로 그린다(CKEditor 가 지움) */
.major_ggrad .grad_rail_links a:after { content: " \2197"; }
.major_ggrad .grad_rail_links a:hover,
.major_ggrad .grad_rail_links a:focus { color: #fff; text-decoration: none; }

/* ── 항목(아코디언) ──────────────────────────────── */
/* scroll-margin-top : 목차 링크로 점프했을 때 제목이 고정 메뉴바 뒤로 숨지 않게 한다 */
.major_ggrad .grad_sec {
  border-bottom: 1px solid #e5e1de; padding-bottom: 8px;
  scroll-margin-top: calc(var(--height-header, 120px) + 61px);
}
.major_ggrad .grad_title { margin: 0; }
.major_ggrad .grad_head {
  display: flex; gap: 16px; align-items: flex-start;
  width: 100%; padding: 26px 0 22px;
  background: none; border: 0; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.major_ggrad .grad_no {
  flex: none; width: 26px; padding-top: 5px;
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 15px; line-height: 1.45; font-weight: 600;
  color: var(--color-primary-dark, #881241);
}
.major_ggrad .grad_label {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 20px; line-height: 1.45; font-weight: 700;
  color: var(--color-font-default, #000);
}
.major_ggrad .grad_head:after {
  content: "\2212";   /* − (열림). 닫히면 아래 .collapsed 규칙이 + 로 바꾼다 */
  flex: none; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e7d0d9;   /* color-mix 폴백 : 본부 키컬러 #881241 의 20% 틴트 */
  border: 1px solid color-mix(in srgb, var(--color-primary-dark, #881241) 20%, #fff);
  font-size: 15px; line-height: 1; font-weight: 700;
  color: var(--color-primary-dark, #881241);
}
.major_ggrad .grad_head.collapsed:after { content: "+"; }

/* 패딩은 .grad_panel 이 아니라 안쪽 .grad_panel_in 에 준다 — 부트스트랩 collapse 는
   .grad_panel 의 height 를 애니메이션하므로 거기에 패딩이 있으면 접힐 때 튄다. */
.major_ggrad .grad_panel_in { padding: 0 0 30px 42px; }

/* ── 본문 요소 ───────────────────────────────────── */
/* .sub_con 이 16px/20px, .con_box 가 color:#888 을 상속시키므로 요소마다 명시한다 */
.major_ggrad .grad_p { margin: 0 0 14px; font-size: 16px; line-height: 1.85; color: var(--color-font-dark, #333); }
.major_ggrad .grad_p:last-child { margin-bottom: 0; }
.major_ggrad .grad_lead { margin: 24px 0 14px; font-size: 16px; line-height: 1.85; color: var(--color-font-dark, #333); }
.major_ggrad .grad_note { margin: 18px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--color-font-light, #7c7c7c); }
.major_ggrad .grad_tracks + .grad_note { margin-top: 14px; }
.major_ggrad .grad_rules + .grad_p { margin: 18px 0 0; }

/* 본문 안의 인라인 링크. .grad_btn(아래)과 목차 레일은 제외 */
.major_ggrad .grad_panel_in a:not(.grad_btn) {
  font-weight: 700;
  color: var(--color-primary-dark, #881241);
  border-bottom: 1px solid var(--color-primary-dark, #881241);
}
.major_ggrad .grad_panel_in a:not(.grad_btn):hover { text-decoration: none; }

/* 대시 목록 — 시안의 <span>&mdash;</span> 를 :before 로 대체(빈 요소 금지).
   ⚠ 항목을 display:flex 로 만들지 말 것 — <li> 안의 텍스트 노드와 <a> 가 각각 별개의 flex 항목이
     되어 gap 만큼 벌어진다(문장 중간 링크 앞뒤에 12px 구멍이 생겼다, 실측 2026-08). 시안은 본문을
     <span> 으로 한 번 더 감싸 이를 피했는데, 그러면 관리자가 붙여넣는 본문에 의미 없는 span 이
     늘어난다 → 흐름 배치 + 대시만 절대배치로 바꿨다. */
.major_ggrad .grad_list { margin: 0 0 20px; padding: 0; list-style: none; }
.major_ggrad .grad_list_item {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 16px; line-height: 1.85; color: var(--color-font-dark, #333);
}
.major_ggrad .grad_list_item:last-child { margin-bottom: 0; }
.major_ggrad .grad_list_item:before {
  content: "\2014"; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--color-primary-dark, #881241);
}

/* 외부링크 버튼. ⚠ 자식 요소를 두지 말 것 — 전역 a > * { line-height:0 } 에 걸린다 */
.major_ggrad .grad_btn {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px;
  background: var(--color-primary-dark, #881241);
  color: #fff;
  font-size: 14px; line-height: 1.4; font-weight: 700;
}
.major_ggrad .grad_btn:after { content: "\2197"; font-size: 12px; }
.major_ggrad .grad_btn:hover,
.major_ggrad .grad_btn:focus { background: var(--color-primary-light, #b32b5c); color: #fff; text-decoration: none; }

/* ── 종합시험 (라벨 + 내용) ──────────────────────── */
.major_ggrad .grad_kvs { display: flex; flex-direction: column; gap: 14px; }
.major_ggrad .grad_kv {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid #e7d0d9;   /* color-mix 폴백 : 본부 키컬러 #881241 의 20% 틴트 */
  border-left: 2px solid color-mix(in srgb, var(--color-primary-dark, #881241) 20%, #fff);
}
.major_ggrad .grad_kv_k { flex: none; width: 170px; font-size: 14.5px; line-height: 1.75; font-weight: 700; color: var(--color-primary-dark, #881241); }
.major_ggrad .grad_kv_v { flex: 1 1 260px; min-width: 220px; font-size: 16px; line-height: 1.75; color: var(--color-font-dark, #333); }

/* ── 학점 트랙 카드 ─────────────────────────────── */
.major_ggrad .grad_tracks { display: flex; flex-wrap: wrap; gap: 14px; }
.major_ggrad .grad_track {
  flex: 1 1 220px; min-width: 200px; padding: 22px 20px;
  background: #f9f3f6;   /* color-mix 폴백 : 본부 키컬러 #881241 의 5% 틴트 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 5%, #fff);
}
.major_ggrad .grad_track_kicker { font-size: 11px; line-height: 1.6; font-weight: 700; letter-spacing: 0.14em; color: var(--color-primary-dark, #881241); }
.major_ggrad .grad_track_title {
  margin-top: 8px;
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 17px; line-height: 1.4; font-weight: 700;
  color: var(--color-font-default, #000);
}
.major_ggrad .grad_track_credit { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.major_ggrad .grad_track_num {
  font-family: var(--font-family-titleS, sans-serif);
  font-size: 32px; line-height: 1; font-weight: 600;
  color: var(--color-primary-dark, #881241);
}
.major_ggrad .grad_track_unit { font-size: 14.5px; line-height: 1.6; color: var(--color-font-dark, #333); }
.major_ggrad .grad_track_desc { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--color-font-dark, #333); }

/* ── 학점 배분 규칙 (배지 + 설명) ───────────────── */
.major_ggrad .grad_rules { display: flex; flex-direction: column; gap: 10px; }
.major_ggrad .grad_rule { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.major_ggrad .grad_rule_tag {
  flex: none; padding: 5px 11px; white-space: nowrap;
  font-size: 13.5px; line-height: 1.5; font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-primary-dark, #881241);
  background: #f3e7ec;   /* color-mix 폴백 : 본부 키컬러 #881241 의 10% 틴트 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 10%, #fff);
}
.major_ggrad .grad_rule_text { flex: 1 1 300px; min-width: 240px; font-size: 15.5px; line-height: 1.7; color: var(--color-font-dark, #333); }

/* ── 강조 상자 ──────────────────────────────────── */
.major_ggrad .grad_callout {
  margin-bottom: 16px; padding: 18px 20px;
  border-left: 3px solid var(--color-primary-dark, #881241);
  background: #f9f3f6;   /* color-mix 폴백 : 본부 키컬러 #881241 의 5% 틴트 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 5%, #fff);
  font-size: 16px; line-height: 1.85; color: var(--color-font-default, #000);
}

/* ── 어학성적 표 ─────────────────────────────────── */
/* 가로 스크롤 래퍼는 레이아웃의 initContentTableScroll() 이 .sub_con table 을 .table-scroll 로
   감싸 만든다 — 여기서 따로 감싸지 말 것(이중 래퍼가 된다). */
.major_ggrad .grad_tbl {
  width: 100%; min-width: 860px; margin: 4px 0 0;
  border-collapse: collapse; border: 1px solid #e5e1de;
  font-size: 13.5px;
}
.major_ggrad .grad_tbl th,
.major_ggrad .grad_tbl td { text-align: center; vertical-align: middle; line-height: 1.5; }
.major_ggrad .grad_tbl thead th {
  padding: 13px 9px;
  background: #f3e7ec;   /* color-mix 폴백 : 본부 키컬러 #881241 의 10% 틴트 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 10%, #fff);
  border-right: 1px solid #e7d0d9;   /* color-mix 폴백 : 본부 키컬러 #881241 의 20% 틴트 */
  border-right: 1px solid color-mix(in srgb, var(--color-primary-dark, #881241) 20%, #fff);
  border-bottom: 1px solid #e7d0d9;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary-dark, #881241) 20%, #fff);
  font-size: 12px; font-weight: 700; color: var(--color-font-default, #000);
}
.major_ggrad .grad_tbl thead th:last-child { border-right: 0; }
.major_ggrad .grad_tbl tbody th {
  padding: 15px 9px;
  background: #f9f3f6;   /* color-mix 폴백 : 본부 키컬러 #881241 의 5% 틴트 */
  background: color-mix(in srgb, var(--color-primary-dark, #881241) 5%, #fff);
  border-right: 1px solid #e5e1de;
  font-size: 13px; font-weight: 700; color: var(--color-font-default, #000);
}
.major_ggrad .grad_tbl tbody td { padding: 15px 9px; border-right: 1px solid #e5e1de; color: var(--color-font-dark, #333); }
.major_ggrad .grad_tbl tbody td:last-child { border-right: 0; }

/* ── 반응형 ─────────────────────────────────────── */
/* 표가 min-width 860px 를 못 채우는 구간부터 세로로 쌓는다. 표로 두면 .table-scroll 안에서
   가로 스크롤이 생기므로, td[data-label] 을 라벨로 쓰는 카드형으로 바꾼다(시안의 좁은 화면 모드).
   ★ 1280px 근거(실측) : 표가 쓸 수 있는 폭 = min(1200, 화면폭 − 70) − 레일 250 − gap 40
     − .grad_panel_in 왼쪽 들여쓰기 42 다. 화면폭 1281px 이상이면 1200 − 332 = 868px 로
     860 을 넘고, 1262px 아래면 860 에 못 미쳐 표가 열 밖으로 밀려난다(1221px 에서 41px 초과 실측).
     여유를 두고 1280px 에서 끊는다. ⚠ .grad_panel_in 의 padding-left 나 .grad_wrap 의
     max-width 를 바꾸면 이 값도 다시 계산해야 한다.
   ★ 레일이 가로 줄로 바뀌는 1024px 보다 먼저 발동하는 것이 맞다 — 2단일 때 본문 열이 더 좁다. */
@media (max-width: 1280px) {
  .major_ggrad .grad_tbl { min-width: 0; }
  .major_ggrad .grad_tbl thead { display: none; }
  .major_ggrad .grad_tbl,
  .major_ggrad .grad_tbl tbody,
  .major_ggrad .grad_tbl tbody tr,
  .major_ggrad .grad_tbl tbody th,
  .major_ggrad .grad_tbl tbody td { display: block; }
  .major_ggrad .grad_tbl tbody th {
    padding: 12px 16px; border-right: 0;
    text-align: left; font-size: 12.5px; letter-spacing: 0.1em;
    color: var(--color-primary-dark, #881241);
    background: #f3e7ec;   /* color-mix 폴백 : 본부 키컬러 #881241 의 10% 틴트 */
    background: color-mix(in srgb, var(--color-primary-dark, #881241) 10%, #fff);
  }
  .major_ggrad .grad_tbl tbody td {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 13px 16px; border-right: 0; border-top: 1px solid #e5e1de;
    text-align: right; font-size: 14.5px;
  }
  .major_ggrad .grad_tbl tbody td:before {
    content: attr(data-label);
    text-align: left; font-weight: 700; color: var(--color-font-default, #000);
  }
}

/* 레일을 가로 줄로. sticky 도 해제한다 — 가로 줄이 화면 위에 붙어 있으면 본문을 가린다 */
@media (max-width: 1024px) {
  .major_ggrad .grad_wrap { gap: 28px; }
  .major_ggrad .grad_rail { flex: 1 1 100%; }
  .major_ggrad .grad_rail_box { position: static; top: auto; }
  .major_ggrad .grad_toc { flex-direction: row; flex-wrap: wrap; gap: 4px 22px; }
  .major_ggrad .grad_body { flex: 1 1 100%; }
}

@media (max-width: 768px) {
  .major_ggrad .grad_rail_box { padding: 20px 18px; }
  .major_ggrad .grad_toc_label { font-size: 13.5px; }

  .major_ggrad .grad_head { gap: 12px; padding: 20px 0 18px; }
  .major_ggrad .grad_no { width: 22px; font-size: 14px; }
  .major_ggrad .grad_label { font-size: 17px; }
  .major_ggrad .grad_head:after { width: 24px; height: 24px; font-size: 14px; }
  /* 좁은 화면에서는 번호만큼의 들여쓰기가 본문 폭을 크게 깎아 없앤다 */
  .major_ggrad .grad_panel_in { padding: 0 0 24px; }

  .major_ggrad .grad_p,
  .major_ggrad .grad_lead,
  .major_ggrad .grad_list_item,
  .major_ggrad .grad_kv_v,
  .major_ggrad .grad_callout { font-size: 15px; line-height: 1.8; }
  .major_ggrad .grad_note { font-size: 14px; }

  .major_ggrad .grad_kv_k { width: 100%; }
  .major_ggrad .grad_kv_v { flex: 1 1 100%; min-width: 0; }

  .major_ggrad .grad_track { flex: 1 1 100%; padding: 20px 18px; }
  .major_ggrad .grad_track_num { font-size: 28px; }

  .major_ggrad .grad_rule_text { flex: 1 1 100%; min-width: 0; font-size: 15px; }

  .major_ggrad .grad_callout { padding: 16px 18px; }
}
/******* major_ggrad end *********/