@charset "utf-8";
/* 서정대학교 공통 번역 위젯 */

/* 구글이 끼워넣는 상단 배너와 본문 밀림 방지 */
iframe.skiptranslate { display: none !important; }
body { top: 0 !important; }
.sju-translate-host { display: none !important; }
font[style] { background: none !important; box-shadow: none !important; }

/* ── 번역 시 메뉴 글자 잘림 방지 ────────────────────────
   번역문은 한국어보다 길다. GNB 메가메뉴 항목이 nowrap 이라
   줄바꿈을 못 하고 가로로 밀려 오른쪽이 잘린다.
   구글이 붙이는 .translated-ltr 일 때만 걸리므로
   한국어로 보는 화면은 전혀 바뀌지 않는다. */
.translated-ltr .gnb-depth2.mega-active > li,
.translated-ltr .gnb-depth2 > li > a,
.translated-ltr .gnb-depth3 > li > a {
	white-space: normal;
	word-break: break-word;
}
/* 사이트 JS 가 한국어 기준으로 잰 높이를 인라인으로 박아둔다.
   (height: 30px; overflow: hidden 식) 번역문은 줄이 늘어 잘리므로
   잘라내기만 풀어둔다. 실제 높이는 sju-translate.js 의
   syncMenuHeight() 가 펼쳐진 뒤 내용에 맞춰 다시 잡는다.
   배경색은 메뉴마다 달라서(남색/투명) 여기서 건드리지 않는다. */
.translated-ltr .gnb-depth2 { overflow: visible !important; }
/* 로그인 버튼은 8rem 고정에 line-height 로 한 줄만 맞춰져 있다.
   번역하면 글자가 길어 두 줄이 되면서 버튼 밖으로 넘친다.
   (ĐĂNG NHẬP, TIZIMGA KIRISH 등) 번역 시에만 글자만큼 늘려준다. */
.translated-ltr .side-menu .login-out {
	width: auto;
	min-width: 8rem;
	padding: 0 1.2rem;
	white-space: nowrap;
}
/* ──────────────────────────────────────────────────── */

/* height:100% + align-items 로 헤더 줄 안에서 세로 중앙에 놓는다 */
.sju-translate { position: relative; display: inline-flex; align-items: center; height: 100%; vertical-align: middle; color: inherit; }

/* ── 사이트별 헤더 글자색 ──────────────────────────────
   버튼 배경은 항상 투명이라 헤더 글자색만 맞춰주면 된다.
   사이트를 추가할 때 헤더 바깥 요소의 클래스로 한 줄 추가. */
/* 대표홈페이지 (남색 헤더) */
.side-menu .sju-translate { color: #fff; }
/* 스크롤하면 헤더가 흰 바탕으로 바뀌고 side-menu 에 .on 이 붙는다.
   이웃 메뉴와 같이 글자를 어둡게 하지 않으면 흰 바탕에 흰 글자가 된다. */
.side-menu.on .sju-translate { color: #222; }
.side-menu .sju-translate__toggle { font-size: 16px; font-weight: 500; }
/* 기존 KOR 드롭다운용으로 10rem 고정이던 칸. 언어명이 더 길어 넓혀준다.
   헤더 JSP 에서 <li class="lang sju-lang"> 로 표시한 칸에만 걸린다. */
.side-menu > li.sju-lang { width: auto !important; }
/* 국제홈페이지 (밝은 상단바) */
.header-kukje .sju-translate { color: #34368a; }
.header-kukje .sju-translate__toggle { font-size: 14px; font-weight: 500; padding: 0 14px 0 0; }
/* 옆 칸(HOME·학사관리 로그인)은 14px 글자뿐인데 여기만 24px 국기가 붙어
   칸이 커 보인다. 글자 높이에 가깝게 줄인다. */
.header-kukje .sju-translate__toggle img { width: 18px; height: 18px; flex-basis: 18px; }
/* 띠의 다른 칸은 <a> 에 좌우 여백과 구분선이 걸려 있다.
   언어 버튼은 <div> 라 그대로 두면 구분선도 간격도 빠진다. 칸 자체에 똑같이 준다. */
.header-kukje li.sju-lang {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 2rem;
	border-right: 0.1rem solid rgba(0, 0, 0, 0.10);
}
/* 국제 모바일 : 768px 아래에서 오른쪽 묶음(HOME·학사관리 로그인)이 통째로 숨는다.
   언어 버튼은 띠에 그대로 보여야 하므로 묶음은 되살리고 나머지 칸만 숨긴다. */
@media (max-width: 768px) {
	.n-header .header-kukje .top-menu.right { display: flex; }
	.header-kukje .top-menu.right > li:not(.sju-lang) { display: none; }
}
/* 입시홈페이지 (흰 상단줄). 옆 항목들과 같은 26px 간격을 준다. */
.header-top .sju-translate { color: #333; }
.header-top .sju-translate__toggle { font-size: 14px; font-weight: 400; }
.header-top > li.sju-lang { margin-left: 26px; margin-right: 26px; }
/* 인트로 화면 : 헤더가 없어서 로고줄 오른쪽 끝에 직접 띄운다.
   가운데 제목(h2)이 폭 넓게 자리를 잡고 있어 로고 바로 옆에 두면 글자가 겹친다.
   오른쪽 여백은 로고의 margin-left 와 같은 9.6rem 으로 맞췄고,
   세로는 h1 의 padding-top 3rem 을 빼고 로고 이미지에 맞춘다. */
.wrap-intro { position: relative; }
.wrap-intro > .sju-translate {
	position: absolute;
	top: 3rem;
	right: 9.6rem;
	height: 7.8rem;
	color: #222;
}
/* 인트로는 100vh 고정 화면에 내용을 아래로 붙여 놓은 구조다.
   번역하면 글자가 길어져 내용이 화면보다 커지는데, 넘친 만큼이 위로 밀려
   제목과 버튼이 화면 밖으로 사라진다. 번역 시에는 높이를 풀어 스크롤되게 한다. */
.translated-ltr .wrap-intro {
	height: auto;
	min-height: 100vh;
}
.translated-ltr .intro-content {
	height: auto;
	justify-content: flex-start;
}
/* 인트로 배경은 사진이라 자리에 따라 밝기가 제각각이다.
   흰 알약 배경을 깔았었는데 다른 사이트와 모양이 달라 보인다고 해서 걷어냈다.
   대신 사진 위에서도 읽히도록 옅은 흰 테두리 그림자만 남긴다. */
.wrap-intro .sju-translate__toggle {
	font-size: 16px;
	font-weight: 600;
	text-shadow: 0 0 3px rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .7);
}
/* 모바일은 화면이 좁아 right 9.6rem 이면 거의 한가운데로 온다.
   로고 왼쪽 여백(2rem)과 대칭으로 붙이고 로고 높이에 맞춘다. */
@media (max-width: 768px) {
	.wrap-intro > .sju-translate { top: 3rem; right: 2rem; height: 3.6rem; }
	.wrap-intro .sju-translate__toggle { font-size: 14px; }
	.wrap-intro .sju-translate__toggle img { width: 20px; height: 20px; flex-basis: 20px; }
}
/* ──────────────────────────────────────────────────── */

/* 배경 없이 헤더의 글자색·폰트를 그대로 물려받는다 */
.sju-translate__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 18px 2px 8px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
	white-space: nowrap;
}
.sju-translate__toggle::after {
	content: "";
	position: absolute;
	right: 2px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -5px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg);
}
.sju-translate.is-open .sju-translate__toggle::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}
/* 헤더 배경이 밝든 어둡든 보이도록 글자색을 따라간다 */
.sju-translate__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sju-translate__item:focus-visible { outline: 2px solid #1a4fd6; outline-offset: -2px; }

.sju-translate__list {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 1000;
	min-width: 170px;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.sju-translate__list li { margin: 0; padding: 0; }

.sju-translate__item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 12px;
	border: 0;
	background: none;
	color: #222;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}
.sju-translate__item:hover { background: #f0f4fb; }
.sju-translate__item[aria-current="true"] { font-weight: 700; background: #eaf0fa; }
.sju-translate__toggle img,
.sju-translate__item img { width: 24px; height: 24px; flex: 0 0 24px; }

@media (max-width: 768px) {
	.sju-translate__list { right: auto; left: 0; }
}

/* 모바일 상단 띠 ────────────────────────────────────────────
   언어·검색을 햄버거 패널 밖으로 꺼내, 햄버거를 열지 않아도 보이게 한다.
   (한국외대 방식. 2026-11 홍보과 요청)
   햄버거 자체를 기준점으로 삼으면 사이트마다 헤더가 달라도 알아서 따라붙는다.
   #mobileMenu 는 absolute 지만 top/left 가 auto 라 제자리에 그대로 있다.
   ※ 국제홈페이지는 자기 CSS 에서 .menu-mobile 을 이미 absolute 로 자리잡아 뒀다.
      특이도가 같아 뒤에 오는 이 파일이 이기므로, 그냥 .menu-mobile 로 쓰면
      국제 햄버거가 제자리를 벗어난다. position 이 없는 사이트만 집는다. */
.main-site .menu-mobile,
.iphak-site .menu-mobile { position: relative; }

/* .menu-mobile span 은 햄버거 막대(2.7rem x 0.3rem 흰 블록)를 그리는 규칙이라
   우리가 넣은 span 까지 막대로 만들어 버린다. 되돌린다. */
.menu-mobile .sju-translate span,
.menu-mobile .font-blind {
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	background: none !important;
	border-radius: 0 !important;
}
.menu-mobile .sju-translate span { display: inline; }
/* 읽어주기 전용 글자는 화면에서만 접는다 (font-size:0 은 스크린리더도 못 읽는다) */
.menu-mobile .font-blind {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* 언어 버튼 ─ 햄버거 왼쪽 */
.m-head-lang {
	position: absolute;
	top: 50%;
	right: 4.4rem;
	transform: translateY(-50%);
	z-index: 3;
}
.m-head-lang .sju-translate { height: auto; color: #222; }
.m-head-lang .sju-translate__toggle {
	padding: 0 14px 0 0;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.m-head-lang .sju-translate__toggle img { width: 20px; height: 20px; flex-basis: 20px; }
/* 목록이 화면 오른쪽으로 넘치지 않게 버튼 오른쪽 끝에 맞춘다 */
.m-head-lang .sju-translate__list { right: 0; left: auto; }
/* 대표홈페이지는 돋보기가 하나 더 붙으므로 그만큼 더 왼쪽이다.
   로고·햄버거 사이 183px 중 내용이 146px 이라 여백이 37px 뿐이다.
   10 / 10 / 17 로 나눠 햄버거 쪽에 몰리지 않게 한다. */
.main-site .m-head-lang { right: 8.6rem; }

/* 글자·아이콘 색은 그 사이트 햄버거 막대색을 그대로 따라간다.
     대표홈  처음엔 투명 헤더 위 흰색 → 스크롤하면 흰 바탕에 #222
     입학    흰 바탕에 #222 (기본값)
     국제    흰 바탕에 #34368A */
.main-header .m-head-lang .sju-translate { color: #fff; }
.main-header.on .m-head-lang .sju-translate,
.main-header.fixed .m-head-lang .sju-translate { color: #222; }

/* 돋보기·닫기는 대표홈페이지에만 있다. 투명 헤더 위에서는 흰 아이콘을 쓴다. */
.main-header .menu-mobile .sju-msearch-open {
	background-image: url("/_res/seojeong/_share/img/ico-gnb-search.png");
}
.main-header .menu-mobile .sju-msearch-close {
	background-image: url("/_res/seojeong/_share/img/ico-search-close.png");
}
.main-header.on .menu-mobile .sju-msearch-open,
.main-header.fixed .menu-mobile .sju-msearch-open {
	background-image: url("/_res/seojeong/_share/img/ico-gnb-search_on.png");
}
.main-header.on .menu-mobile .sju-msearch-close,
.main-header.fixed .menu-mobile .sju-msearch-close {
	background-image: url("/_res/seojeong/_share/img/ico-search-close_on.png");
}

/* 통합검색 ─ 대표홈페이지에만 있다 ─────────────────────────
   검색 페이지(/main/search.do)가 있는 사이트가 대표홈페이지뿐이라
   입학·국제에는 돋보기를 달지 않는다. */
/* 체크박스는 라벨로만 조작한다. common.css 의 .menu-mobile input 규칙
   (40x32, opacity:0, z-index:2)이 그대로 걸리면 투명한 덩어리가 돋보기를 덮는다. */
.menu-mobile .sju-msearch-chk {
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	opacity: 0;
	pointer-events: none;
	z-index: auto;
}
.menu-mobile .sju-msearch-open,
.menu-mobile .sju-msearch-close {
	position: absolute;
	top: 50%;
	right: 4.4rem;
	transform: translateY(-50%);
	width: 3.2rem;
	height: 3.2rem;
	margin: 0;
	cursor: pointer;
	z-index: 4;
}
.menu-mobile .sju-msearch-open {
	background: url("/_res/seojeong/_share/img/ico-gnb-search_on.png") center center / 2.2rem 2.2rem no-repeat;
}
.menu-mobile .sju-msearch-close {
	display: none;
	background: url("/_res/seojeong/_share/img/ico-search-close.png") center center / 2.2rem 2.2rem no-repeat;
}
.menu-mobile .sju-msearch-chk:focus-visible ~ .sju-msearch-open { outline: 2px solid #1a4fd6; outline-offset: 2px; }

/* 햄버거 메뉴가 열리면 흰 패널이 화면을 덮는다.
   돋보기와 언어 버튼 둘 다 가린다. 패널 위에 떠 있으면 메뉴와 뒤엉킨다. */
.menu-mobile #mobileMenu:checked ~ .sju-msearch-open { display: none; }
.menu-mobile #mobileMenu:checked ~ .m-head-lang { display: none; }

/* 햄버거 X 모양 복구.
   공용 common.css 는 막대 세 개를 뒤에서부터 세어 고른다.
     .menu-mobile input:checked ~ span:nth-last-child(3)  가운데 막대 숨김
     .menu-mobile input:checked ~ span:nth-last-child(2)  아래 막대 반대로 회전
   그런데 상단 띠 요소들을 패널 뒤에 붙이면서 자식 수가 늘어 번호가 밀렸다.
   입학은 .nth03 이 nth-last-child(3) 이 되는 바람에 숨겨져 X 가 아니라 빗금
   한 줄만 남았다. 번호 대신 클래스로, 막대 세 개를 모두 직접 지정한다.
   (하나라도 빠뜨리면 밀린 번호 규칙이 그 막대에 그대로 걸린다) */
/* 막대가 도는 기준점도 번호로 잡혀 있다.
     .menu-mobile span:nth-last-child(2) { margin-bottom:0; transform-origin:0% 100% }
   이것도 번호가 밀려 아래 막대에 안 걸리는 바람에 기준점이 틀어져 X 가 비뚤었다.
   (가운데 막대는 어차피 숨으니 기본값 그대로 둔다) */
.menu-mobile span.nth03 {
	margin-bottom: 0;
	transform-origin: 0% 100%;
}
.menu-mobile #mobileMenu:checked ~ .nth01 {
	opacity: 1;
	transform: rotate(45deg) translate(-0.2rem, 0.2rem);
}
.menu-mobile #mobileMenu:checked ~ .nth02 {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}
.menu-mobile #mobileMenu:checked ~ .nth03 {
	opacity: 1;
	transform: rotate(-45deg) translate(0, -0.3rem);
}

/* 검색창은 로고 자리까지 덮는다. 로고 숨김은 sju-translate.js 가 맡는다
   (로고가 햄버거보다 앞에 있어 CSS 형제 선택자로는 닿지 않는다). */
.menu-mobile .sju-msearch {
	display: none;
	position: absolute;
	top: 50%;
	left: auto;
	right: 8.6rem;
	transform: translateY(-50%);
	width: calc(100vw - 12.6rem);
	height: 4rem;
	margin: 0;
	z-index: 4;
}
.menu-mobile .sju-msearch-chk:checked ~ .sju-msearch,
.menu-mobile .sju-msearch-chk:checked ~ .sju-msearch-close { display: block; }
.menu-mobile .sju-msearch-chk:checked ~ .sju-msearch-open,
.menu-mobile .sju-msearch-chk:checked ~ .m-head-lang { display: none; }

.menu-mobile .sju-msearch input[type="search"] {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 0 4.6rem 0 2rem;
	border: 1px solid #222;
	border-radius: 40px;
	background: #fff;
	color: #222;
	font-size: 1.5rem;
	opacity: 1;
	z-index: auto;
	cursor: text;
	-webkit-appearance: none;
	appearance: none;
}
.sju-msearch input[type="search"]::placeholder { color: #222; opacity: .7; }
.sju-msearch input[type="search"]:focus-visible { outline: 2px solid #1a4fd6; outline-offset: 2px; }
/* 폼 안 돋보기가 실제 제출 버튼이다 */
.menu-mobile .sju-msearch .sju-msearch-go {
	position: absolute;
	top: 50%;
	right: 1.6rem;
	transform: translateY(-50%);
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	background: url("/_res/seojeong/_share/img/ico-gnb-search_on.png") center center / 2.2rem 2.2rem no-repeat;
	font-size: 0;
	color: transparent;
	cursor: pointer;
}
/* 검색창이 열려 있는 동안 로고를 접는다 (js 가 .m-search-on 을 붙인다) */
.m-search-on .main-logo,
.m-search-on .logo-main { visibility: hidden; }