@charset "UTF-8";


@import url(guide.css);
@import url(table.css);

/*
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,400;1,100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

@font-face {
    font-family: 'YonseiLight';
    src: url('../etc/YonseiLight.eot');
    src: url('../etc/YonseiLight.eot?#iefix') format('embedded-opentype'),
        url('../etc/YonseiLight.woff2') format('woff2'),
        url('../etc/YonseiLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'YonseiBold';
    src: url('../etc/YonseiBold.eot');
    src: url('../etc/YonseiBold.eot?#iefix') format('embedded-opentype'),
        url('../etc/YonseiBold.woff2') format('woff2'),
        url('../etc/YonseiBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body{font-family: 'Pretendard', sans-serif;font-weight: 400;font-size: 16px;line-height: 160%;letter-spacing: 0.02em;color: #111111;}

/* Google Translate 위젯 UI 숨김 (디자인 보호) */
.skiptranslate{display:none !important;}
body{top:0 !important;}
#google_translate_element{position:absolute !important;left:-9999px !important;top:-9999px !important;}
.goog-tooltip,.goog-tooltip:hover{display:none !important;}
.goog-text-highlight{background-color:transparent !important;box-shadow:none !important;}
/* >>> frontend-patterns:anchored-sub-tab:legacy >>> */
/* =============================================================================
 * Pattern: Anchored Sub-Tab — LEGACY ALIAS
 * 기존 사이트 마크업(.tab-inner.tab01 > ul.tab-ul01.row{N} 패턴) 그대로 적용.
 * 마크업 변경 없이 동일 동작 제공.
 *
 * 기준 마크업:
 *   <div class="tab-inner tab01">
 *     <ul class="tab-ul01 row{N}">
 *       <li class="active">…</li>  ← active 클래스
 *       …
 *     </ul>
 *     <ul class="tab-ul01">  ← 자식 행
 *       <li class="active">…</li>
 *       …
 *     </ul>
 *   </div>
 *
 * 적용 사례: yonsei_ysb / ysb / faculty/*.do
 * ========================================================================== */

/* 자식 행 공통: 부모 li 1개 폭(200px), 세로 stack */
.tab-inner.tab01 > ul.tab-ul01 + ul.tab-ul01 {
	width: 200px;
	flex-direction: column;
	border-left: 1px solid #DDDDDD;
}
.tab-inner.tab01 > ul.tab-ul01 + ul.tab-ul01 > li {
	flex: 0 0 auto;
	width: 100%;
	border-right: 1px solid #DDDDDD;
}
.tab-inner.tab01 > ul.tab-ul01 + ul.tab-ul01 > li.last {
	border-radius: 0 0 8px 8px;
}

/* row03: 부모 합 600px (3 × 200), 가운데 정렬 → margin-left = (100% - 600px)/2 + (idx-1)*200px */
.tab-inner.tab01 > ul.tab-ul01.row03:has(> li:nth-child(1).active) + ul.tab-ul01 { margin-left: calc((100% - 600px) / 2 + 0px); }
.tab-inner.tab01 > ul.tab-ul01.row03:has(> li:nth-child(2).active) + ul.tab-ul01 { margin-left: calc((100% - 600px) / 2 + 200px); }
.tab-inner.tab01 > ul.tab-ul01.row03:has(> li:nth-child(3).active) + ul.tab-ul01 { margin-left: calc((100% - 600px) / 2 + 400px); }
/* row04: 합 800px */
.tab-inner.tab01 > ul.tab-ul01.row04:has(> li:nth-child(1).active) + ul.tab-ul01 { margin-left: calc((100% - 800px) / 2 + 0px); }
.tab-inner.tab01 > ul.tab-ul01.row04:has(> li:nth-child(2).active) + ul.tab-ul01 { margin-left: calc((100% - 800px) / 2 + 200px); }
.tab-inner.tab01 > ul.tab-ul01.row04:has(> li:nth-child(3).active) + ul.tab-ul01 { margin-left: calc((100% - 800px) / 2 + 400px); }
.tab-inner.tab01 > ul.tab-ul01.row04:has(> li:nth-child(4).active) + ul.tab-ul01 { margin-left: calc((100% - 800px) / 2 + 600px); }
/* row05: 합 1000px */
.tab-inner.tab01 > ul.tab-ul01.row05:has(> li:nth-child(1).active) + ul.tab-ul01 { margin-left: calc((100% - 1000px) / 2 + 0px); }
.tab-inner.tab01 > ul.tab-ul01.row05:has(> li:nth-child(2).active) + ul.tab-ul01 { margin-left: calc((100% - 1000px) / 2 + 200px); }
.tab-inner.tab01 > ul.tab-ul01.row05:has(> li:nth-child(3).active) + ul.tab-ul01 { margin-left: calc((100% - 1000px) / 2 + 400px); }
.tab-inner.tab01 > ul.tab-ul01.row05:has(> li:nth-child(4).active) + ul.tab-ul01 { margin-left: calc((100% - 1000px) / 2 + 600px); }
.tab-inner.tab01 > ul.tab-ul01.row05:has(> li:nth-child(5).active) + ul.tab-ul01 { margin-left: calc((100% - 1000px) / 2 + 800px); }

/* 모바일에서는 sub-tab 전체 폭 사용 */
@media (max-width: 1024px) {
	.tab-inner.tab01 > ul.tab-ul01 + ul.tab-ul01 {
		width: auto !important;
		margin-left: 0 !important;
		border-left: 0;
	}
}

/* row09 (9탭): 5+4 형태 2줄 wrap */
.tab-inner.tab01 > ul.tab-ul01.row09 > li,
ul.tab-ul01.row09 > li {
	flex: 0 0 20%;
	max-width: 20%;
}


@media (max-width: 767.98px) {
  .mo-hidden {
    display: none !important;
  }
}

/* 2. PC 화면에서 숨기고 싶을 때 사용하는 클래스 */
@media (min-width: 768px) {
  .pc-hidden {
    display: none !important;
  }
}
/* <<< frontend-patterns:anchored-sub-tab:legacy <<< */