/* video css */
.video-wrapper {
	/* 부모 요소의 너비에 따라 동영상 크기 조절 */
	max-width: 800px; /* 최대 너비 설정 (선택 사항) */
	width: 90%; /* 화면 너비의 90% 차지 */
	margin: 20px auto;
	background-color: #333;
}

.video-container {
	position: relative;
	/* 16:9 비율 (9 / 16 * 100 = 56.25%) */
	/* 만약 동영상이 4:3 비율이라면 75% */
	/* 동영상의 원본 비율에 맞게 조정해야 합니다. */
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden; /* 동영상이 컨테이너 밖으로 나가지 않도록 */
}

.video-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain; /* 또는 cover */
	/*
	 * object-fit: contain;  -> 동영상 비율 유지하며 컨테이너에 맞춤 (레터박스/필러박스 생길 수 있음)
	 * object-fit: cover;   -> 동영상 비율 유지하며 컨테이너를 채움 (일부 잘릴 수 있음)
	 * object-fit: fill;    -> 동영상 비율 무시하고 컨테이너에 꽉 채움 (왜곡될 수 있음)
	 */
}

/* -------------------------------------- */
/* 추가: 동영상 비율이 가변적일 때 JavaScript와 함께 사용 */
.video-container-js {
	position: relative;
	height: 0;
	overflow: hidden;
	background-color: #333;
}

.video-container-js video {
	width: 100%;
	height: auto; /* 또는 100% */
	display: block; /* 하단 여백 제거 */
}