/* YouTube 배경 동영상 스타일 - contain 방식 (잘리지 않게) */

/* 비디오 컨테이너 */
.video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	background: #e9ecef; /* 페이지 배경색과 동일하게 */
}

/* iframe 기본 스타일 - 데스크탑 (cover 방식) */
.video-container iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9 */
	min-height: 100vh;
	min-width: 177.78vh; /* 16:9 */
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: none;
}

/* 모바일 - contain 방식 (영상 전체 보이면서 여백 최소화) */
@media screen and (max-width: 768px) {
	/* 배너 자체 - 동영상 높이에 맞춤 (16:9 비율) */
	#banner {
		height: 56.25vw !important; /* 16:9 비율 = 9/16 * 100 */
		min-height: auto !important;
		max-height: none !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-top: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		position: relative !important;
		background: #e9ecef !important;
	}
	
	/* 비디오 컨테이너 - 배너 전체를 채움 */
	.video-container {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		overflow: hidden !important;
		background: transparent !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	
	/* iframe - contain 방식으로 전체가 보이게 */
	.video-container iframe {
		position: relative !important;
		width: 100% !important;
		height: 100% !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		min-height: auto !important;
		min-width: auto !important;
	}
	
	/* 배너 내용 - 동영상 위 중앙에 배치 */
	#banner .inner {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		width: 90% !important;
		margin: 0 auto !important;
		z-index: 2 !important;
		text-align: center !important;
		padding: 1em 0 !important;
	}
	
	/* h2 텍스트 크기 조정 */
	#banner h2 {
		font-size: 1.6em !important;
		margin-bottom: 0.3em !important;
	}
	
	#banner p {
		font-size: 0.9em !important;
		margin-bottom: 0.3em !important;
	}
	
	/* h2 막대가 보이도록 */
	#banner h2:before,
	#banner h2:after {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	
	/* 학교 알아보기 버튼 숨김 */
	#banner .actions {
		display: none !important;
	}
	
	/* Learn More 버튼도 숨김 */
	#banner .more {
		display: none !important;
	}
}

/* 동영상 위에 반투명 오버레이 (텍스트 가독성 향상) */
#banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

/* 배너 내용이 동영상 위에 표시되도록 */
#banner .inner {
	position: relative;
	z-index: 2;
}

#banner .more {
	position: relative;
	z-index: 2;
}

/* 모바일에서 오버레이 더 어둡게 */
@media screen and (max-width: 736px) {
	#banner::before {
		background: rgba(0, 0, 0, 0.6);
	}
}