/* =========================================
	기본 리셋 / 페이지 셸
	========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	color: #ffffff;
	font-family:'Noto Sans KR', Malgun Gothic,dotum,arial,sans-serif;
	cursor: default;
}

/* 전체 페이지 배경 이미지 — Unsplash 플레이스홀더 */
/* TODO: 실제 이미지 경로로 교체 예정 */
body {
	background-color: #1a1a2e; /* 이미지 로딩 전 폴백 */
	background-image: url('../images/intro-bg-main.jpg');
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}

/* 배경 이미지 위 글로벌 어둠 오버레이 — 텍스트 가독성 보강 */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: linear-gradient(180deg, rgb(0, 82, 156, 0.6) 20%, rgba(35, 57, 90, 0.3) 80%);
	z-index: 0;
	pointer-events: none;
}

/* =========================================
	좌우 분할 컨테이너 (flexbox)
	========================================= */
.intro-container {
	display: flex;
	width: 100vw;
	height: 100vh;
	position: relative;
	z-index: 1; /* body::before 오버레이 위에 */
}

/* 캠퍼스 패널 — 좌/우 공통 (기본 투명) */
.campus-panel {
	flex: 1 1 0;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	background-color: transparent; /* 호버 전 — 전체 배경 이미지 노출 */
}

/* 패널 호버 시 등장하는 이미지 레이어 (별도 ::before 사용) */
.campus-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: transparent;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 0;
}

/* 패널 호버 시 가독성 보강 틴트 */
.campus-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 28, 0.2);
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
	pointer-events: none;
}
.campus-panel--left::after{
	background: rgba(21, 150, 236, 0.18);
}
.campus-panel--right::after{
	background: rgba(21, 150, 236, 0.15);
}

/* 좌측 캠퍼스 — 호버 배경 이미지 (Unsplash 플레이스홀더) */
/* TODO: 실제 이미지 경로로 교체 예정 */
.campus-panel--left::before {
	background-image: url('../images/intro-bg-jj.jpg');
	background-position: top center;
}

/* 우측 캠퍼스 — 호버 배경 이미지 (Unsplash 플레이스홀더) */
/* TODO: 실제 이미지 경로로 교체 예정 */
.campus-panel--right::before {
	background-image: url('../images/intro-bg-ca.jpg');
	background-position: bottom center;
}

/* 호버 상태 — 확대 + 이미지/틴트 페이드 인 */
.intro-container.hover-left .campus-panel--left { flex: 1.857 1 0; }
.intro-container.hover-left .campus-panel--right { flex: 1 1 0; }
.intro-container.hover-left  .campus-panel--left::before,
.intro-container.hover-left  .campus-panel--left::after  { opacity: 1; }

.intro-container.hover-right .campus-panel--right { flex: 1.857 1 0; }
.intro-container.hover-right .campus-panel--left { flex: 1 1 0; }
.intro-container.hover-right .campus-panel--right::before,
.intro-container.hover-right .campus-panel--right::after { opacity: 1; }


body:has(.intro-container.hover-left)::before,
body:has(.intro-container.hover-right)::before{
	background: rgba(10, 12, 28, 0.3);
}

/* =========================================
	패널 내부 콘텐츠 (캠퍼스명 + CTA)
	========================================= */
.panel-content {
	position: relative;
	z-index: 2; /* ::before / ::after 위 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px;
	transform: translateY(50px);
	text-align: center;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.intro-container.hover-left .campus-panel--left .panel-content{
	transform: translateY(-30px);
}
.intro-container.hover-right .campus-panel--right .panel-content{
	transform: translateY(-30px);
}

.campus-name {
	position:relative;
	font-size: clamp(32px, 5.5vw, 70px);
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #ffffff;
	line-height: 1.1;
	text-shadow: 0 2px 24px rgba(15, 52, 153, 0.4);
}

.intro-container.hover-left .campus-panel--right .campus-name{
	opacity: 0.7;
	font-size: clamp(20px, 7vw, 60px);
}
.intro-container.hover-right .campus-panel--left .campus-name{
	opacity: 0.7;
	font-size: clamp(20px, 7vw, 60px);
}

.intro-container.hover-left .campus-panel--left .campus-name:after{
	display: inline-block;
	position: absolute;
	bottom: 0px;
	left: -5%;
	width: 110%;
	height: 35px; /* 세로를 살짝 줄이면 더 날카로워 보입니다 */
	background: linear-gradient(90deg, rgb(4, 98, 180) 20%, rgb(73, 81, 184, 0.85) 80%);
	z-index: -9;
	content: "";

	/* 오른쪽 끝만 둥글게 깎아서 필터와 만났을 때 뾰족한 붓끝이 되도록 유도 */
	border-radius: 0% 80% 80% 0% / 0% 50% 50% 0%;
	
	/* 붓이 오른쪽으로 쓸려나간 듯한 속도감 부여 */
	transform: skewX(-15deg) rotate(-3deg);

	/* 지글지글한 필터 적용 */
	filter: url(#brush-stroke);
}
.intro-container.hover-right .campus-panel--right .campus-name:after{
	display: inline-block;
	position: absolute;
	bottom: 0px;
	left: -5%;
	width: 110%;
	height: 35px; /* 세로를 살짝 줄이면 더 날카로워 보입니다 */
	background: linear-gradient(90deg, rgb(0, 149, 235, 1) 20%, rgb(20, 158, 140, 0.85) 80%);
	z-index: -9;
	content: "";

	/* 오른쪽 끝만 둥글게 깎아서 필터와 만났을 때 뾰족한 붓끝이 되도록 유도 */
	border-radius: 0% 80% 80% 0% / 0% 50% 50% 0%;
	
	/* 붓이 오른쪽으로 쓸려나간 듯한 속도감 부여 */
	transform: skewX(-15deg) rotate(-3deg);

	/* 지글지글한 필터 적용 */
	filter: url(#brush-stroke);
}

.campus-tagline {
	font-size: clamp(12px, 0.95vw, 15px);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 400;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* =========================================
	CTA 버튼 그룹 — 호버 시 등장
	데스크탑: 가로 정렬 / 모바일: 세로 정렬
	========================================= */
.cta-group {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	margin-top:40px
}

.cta-button {
	position:relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 160px;
	padding: 24px 60px 24px 40px;
	border: 1.5px solid #00529c;
	border:1px solid rgba(255,255,255,0.9);
	color: #fff;
	font-size: clamp(17px, 2vw, 26px);
	border-radius: 8px;;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2em;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,
				transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,
				background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
				color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	font-family: inherit;
	white-space: nowrap;
	word-break: keep-all;
}
.cta-button strong{
	font-weight: 500;
}
.cta-button span{
	position:relative;
}
.cta-button::after {
	display: inline-block;
	position:absolute;
	top:50%;
	right:20px;
	margin-top:-7px;
	width:26px;
	height: 20px;
	content: '';
	background-image:url('../images/ico-go.png');
	background-size: 18px auto;
	background-position: center center;
	background-repeat: no-repeat;
	font-size: 1em;
	transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-button:hover::after { 
	transform: translateX(8px); 
}

.cta-button:hover {
	background: #fff;
	color: #fff;
}

.campus-panel--left .cta-button.susi{
	background-color: rgb(4, 98, 180, 0.85);
	border: 1px solid rgb(4, 98, 180, 1);
}
.campus-panel--left .cta-button.jungsi{
	background-color: rgb(73, 81, 184, 0.85);
	border: 1px solid rgb(73, 81, 184, 1);
}
.campus-panel--right .cta-button.susi{
	background-color: rgba(0, 149, 235, 0.85);
	border: 1px solid rgb(0, 149, 235, 1);
}
.campus-panel--right .cta-button.jungsi{
	background-color: rgb(20, 158, 140, 0.85);
	border: 1px solid rgb(20, 158, 140, 1);
}
.campus-panel--left .cta-button.susi:hover{
	background-color: rgb(4, 98, 180, 1);
}
.campus-panel--left .cta-button.jungsi:hover{
	background-color: rgb(73, 81, 184, 1);
}
.campus-panel--right .cta-button.susi:hover{
	background-color: rgb(0, 149, 235, 01);
}
.campus-panel--right .cta-button.jungsi:hover{
	background-color: rgb(20, 158, 140, 1);
}

/* CTA 페이드인 — 확대된 패널 쪽만 표시 (0.3s 딜레이, 두 버튼 순차 등장) */
.intro-container.hover-left .campus-panel--left .cta-button,
.intro-container.hover-right .campus-panel--right .cta-button {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	transition-delay: 0.1s;
}
/* 두 번째 버튼은 살짝 늦게 등장 */
.intro-container.hover-left .campus-panel--left .cta-button:nth-child(2),
.intro-container.hover-right .campus-panel--right .cta-button:nth-child(2) {
	transition-delay: 0.12s;
}

/* =========================================
	중앙 오버레이 — 로고 + 슬로건
	(호버 영향 없음, 항상 고정)
	========================================= */
.center-overlay {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	z-index: 10;
	pointer-events: none; /* 패널 호버 감지를 방해하지 않도록 */
	text-align: center;
}

/* 슬로건 플레이스홀더 — 흰색 이탤릭 */
.slogan-placeholder {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 400px;
	height: 200px;
	margin-top: 4px;
	background-image: url('../images/intro-slogan.png');
	background-size: 340px auto;
	background-position: center center;
	background-repeat: no-repeat;
}

.intro-container.hover-left + .center-overlay,
.intro-container.hover-right +  .center-overlay{
	top: 14%;
	gap:0;
}
.intro-container.hover-left + .center-overlay .logo-placeholder,
.intro-container.hover-right + .center-overlay .logo-placeholder{	
	width: 200px;
	height: 50px;
	background-size: 160px auto;
}

.intro-container.hover-left + .center-overlay .slogan-placeholder,
.intro-container.hover-right + .center-overlay .slogan-placeholder{	
	width: 400px;
	height: 170px;
	background-size: 280px auto;
}


/* 구분선 — 중앙 수직 라인 (장식) */
.divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 0.5px;
	background: rgba(255, 255, 255, 0.4);
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
	transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-container.hover-left ~ .divider,
.intro-container.hover-left .divider { left: 65%; }
.intro-container.hover-right .divider { left: 35%; }

/* 하단 안내 텍스트 */
.bottom-logo {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	z-index: 10;
	pointer-events: none;
	opacity: 0.7;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
/* 로고 플레이스홀더 — 흰색 200x60 박스 */
.logo-placeholder {
	width: 200px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url('../images/logo-w.png');
	background-size: 170px auto;
	background-position: center center;
	background-repeat: no-repeat;
}

/* =========================================
	반응형 — 태블릿 / 모바일
	1280px 미만: 세로 분할
	768px 이하: CTA 버튼 세로 배열
	========================================= */
@media (max-width: 1024px) {
	body::before {
		background: linear-gradient(0deg, rgb(0, 82, 156, 0.7) 20%, rgba(35, 57, 90, 0.2) 70%);
	}
	/* 반응형: 캠퍼스 이름 폰트 크기 재정의 */
	.campus-name { font-size: clamp(30px, 7vw, 80px); }
	.intro-container { flex-direction: column; }
	.campus-panel { transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

	/* 모바일/태블릿: 탭 시 확장 유지 */
	.intro-container.hover-left .campus-panel--left ,
	.intro-container.hover-right .campus-panel--right {
		flex: 1.857 1 0;
	}
	.intro-container.hover-left .campus-panel--right,
	.intro-container.hover-right .campus-panel--left {
		flex: 1 1 0;
	}
	.panel-content{
		transform: translateY(0px);

	}
	.cta-group{
		margin-top:0;
	}
	.cta-button{
		padding:16px 40px 16px 16px;
	}

	.slogan-placeholder {
		width: 300px;
		height: 160px;
		margin-top: 0px;
		background-size: 200px auto;
	}


	.divider {
		top: 50%;
		left: 0;
		right: 0;
		width: auto;
		height: 0.5px;
		bottom: auto;
		transform: translateY(-50%);
	}
	.intro-container.hover-left ~ .divider,
	.intro-container.hover-left .divider { top: 65%; left: 0; }
	.intro-container.hover-right .divider { top: 35%; left: 0; }

	.center-overlay { top: 50%; }

	/* 터치 디바이스: CTA 항상 노출 */
	.cta-button {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/* 모바일 — CTA 세로 배열 */
@media (max-width: 768px) {	
	.slogan-placeholder {
		display: none;
	}
	.logo-placeholder {
		display: none;
	}
	.cta-group {
		flex-direction: column;
		gap: 12px;
		width: min(280px, 80vw);
	}
	.cta-button {
		width: 100%;
		min-width: 0;
		padding: 14px 24px;
	}
}

@media (max-width: 640px) {
	.panel-content { gap: 16px; }
	.cta-button { padding: 12px 22px; }
}

/* 접근성: 모션 감소 환경 대응 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}