/* 반드시 CLAUDE.md의 절대원칙을 읽고 따를 것, 하나의 클래스/모듈은 하나의 책임만 가져야 함 (SRP 원칙), 하나의 파일에 코드줄은 최대 500~600줄 내에서 생성하여야 하며 최대 코드줄이 넘어가지 않도록 작성, 만약 코드가 길어지면 분할해서 코드작업을 완성하여야 함 */
/* 동호수배치표 섹션 전용 스타일 */

/* 동호수배치표 섹션 */
.unit-layout-section {
	padding: 60px 0;
	background: #f8f8f8;
	position: relative;
}

.unit-layout-section .unit-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 동호수배치표 섹션 내부 요소 여백 최소화 */
.unit-layout-section .section-header {
	margin-bottom: 10px;
}

.unit-layout-section .section-title {
	margin-bottom: 5px;
}

.unit-layout-section .section-subtitle {
	margin: 0;
}

.unit-layout-section .unit-notice {
	margin-top: 10px;
	padding: 10px;
	background: rgba(0,0,0,0.05);
	border-radius: 8px;
	text-align: center;
}

.unit-layout-section .unit-notice p {
	color: #666;
	font-size: 14px;
}

.unit-layout-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Split Reveal 애니메이션 */
.split-image-wrapper {
	width: 100%;
	overflow: hidden;
	border-radius: 0;
	margin: 0;
}

.split-image-container {
	position: relative;
	width: 100%;
	padding-bottom: 52.41%;
	overflow: hidden;
}

/* 첫 번째 이미지 비율 (1824 x 956) */
.split-image-1 .split-image-container {
	padding-bottom: 52.41%;
}

/* 두 번째 이미지 비율 (1824 x 818) */
.split-image-2 .split-image-container {
	padding-bottom: 44.85%;
}

.split-left,
.split-right {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background-size: 200% auto;
	background-repeat: no-repeat;
	transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.split-left {
	left: 0;
	background-position: left center;
	transform: translateX(-100%);
}

.split-right {
	right: 0;
	background-position: right center;
	transform: translateX(100%);
}

/* 애니메이션 활성화 상태 */
.split-image-wrapper.reveal .split-left,
.split-image-wrapper.reveal .split-right {
	transform: translateX(0);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
	.unit-layout-section {
		padding: 40px 0;
	}

	.unit-layout-content {
		gap: 0;
	}

	.split-image-1 .split-image-container {
		padding-bottom: 52.41%;
	}

	.split-image-2 .split-image-container {
		padding-bottom: 44.85%;
	}
}