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

/* =========================================== */
/* 조경+부분컷 섹션 (garden) */
/* =========================================== */
.garden-section {
	padding: 100px 0 60px 0;
	background: #F8F9FA; /* 섹션 구분 배경색 */
}

.garden-container {
	max-width: 1400px; /* community-container와 동일 */
	margin: 0 auto;
	padding: 0 20px;
}

/* 제목 영역 */
.garden-header {
	text-align: center;
	margin-bottom: 60px;
}

.garden-title {
	font-size: 30px;
	color: #000000;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 20px;
}

.garden-subtitle {
	font-size: 48px;
	color: #000000;
	font-weight: 800;
	line-height: 1;
	margin-top: 0;
	margin-bottom: 0;
}

/* 색상 강조 클래스 */
.highlight-gold {
	color: #D4AF37;
}

.highlight-green {
	color: #06857E;
}

/* 모바일 전용 줄바꿈 - 데스크탑에서는 숨김 */
.mobile-br {
	display: none;
}

/* 이미지 영역 */
.garden-images {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.garden-image-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative; /* 오버레이를 위한 relative positioning */
	/* 양방향 스크롤 애니메이션 초기 상태 */
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.garden-image {
	width: 80%; /* community-image와 동일 (20% 축소) */
	max-width: 80%;
	height: auto;
	display: block;
	margin: 0 auto;
	border-radius: 20px; /* 이미지 라운드 처리 */
}

/* 이미지 설명 영역 (오버레이) */
.garden-image-description {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	max-width: 80%;
	text-align: center;
	background: rgba(0, 0, 0, 0.3); /* 반투명 블랙 배경 */
	padding: 20px;
	border-radius: 0 0 20px 20px; /* 하단 라운드만 적용 */
}

.garden-image-title {
	font-size: 24px;
	color: #FFFFFF; /* 흰색 텍스트 */
	font-weight: 700;
	margin: 0 0 10px 0;
	line-height: 1.2;
}

.garden-image-text {
	font-size: 18px;
	color: #FFFFFF; /* 흰색 텍스트 */
	font-weight: 400;
	margin: 0;
	line-height: 1.6;
}

/* 양방향 스크롤 애니메이션 - 위에서 내려올 때 (나타남) */
.garden-image-wrapper.scroll-down.visible {
	opacity: 1;
	transform: translateY(0);
}

/* 양방향 스크롤 애니메이션 - 아래에서 올라올 때 (나타남) */
.garden-image-wrapper.scroll-up.visible {
	opacity: 1;
	transform: translateY(0);
}

/* FadeIn 효과 애니메이션 */
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* FadeIn 효과 활성화 */
.garden-image-wrapper.fade-active .garden-image {
	animation: fadeIn 1s ease-in-out 1;
}

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

	.garden-container {
		padding: 0 15px;
	}

	.garden-header {
		margin-bottom: 40px;
	}

	.garden-title {
		font-size: 20px;
		font-weight: 400;
		margin-top: 0;
		margin-bottom: 15px;
	}

	.garden-subtitle {
		font-size: 24px;
		font-weight: 800;
		margin-bottom: 0;
		line-height: 1.2;
	}

	/* 모바일에서 줄바꿈 표시 */
	.mobile-br {
		display: block;
	}

	.garden-images {
		gap: 30px;
	}

	/* 모바일에서 중앙 정렬 유지 */
	.garden-image-wrapper {
		align-items: center;
	}

	.garden-image {
		width: 100%; /* 모바일에서는 전체 너비 */
		max-width: 100%;
		border-radius: 15px; /* 모바일에서는 약간 작은 라운드 */
	}

	/* 모바일에서 설명을 이미지 밖으로 이동 */
	.garden-image-description {
		position: static; /* absolute 해제 */
		left: auto; /* 데스크탑 left: 50% 초기화 */
		bottom: auto; /* 데스크탑 bottom: 0 초기화 */
		transform: none; /* 데스크탑 translateX(-50%) 초기화 */
		width: 100%; /* 전체 너비 */
		max-width: 100%;
		padding: 15px 20px; /* 상하좌우 패딩 */
		background: transparent; /* 배경 투명 */
		border-radius: 0; /* 라운드 제거 */
		text-align: center; /* 중앙 정렬 */
	}

	.garden-image-title {
		font-size: 18px; /* 20px → 18px */
		color: #000000; /* 검정색 텍스트 */
		margin: 0 0 8px 0;
	}

	.garden-image-text {
		font-size: 14px; /* 16px → 14px */
		color: #666666; /* 회색 텍스트 */
	}
}

/* 태블릿 반응형 (769px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.garden-section {
		padding: 80px 0 50px 0;
	}

	.garden-subtitle {
		font-size: 36px;
		font-weight: 800;
	}

	.garden-title {
		font-size: 40px;
		font-weight: 400;
	}

	.garden-image {
		width: 90%;
		max-width: 90%;
		border-radius: 18px; /* 태블릿에서는 중간 크기 라운드 */
	}

	.garden-image-description {
		width: 90%;
		max-width: 90%;
		padding: 18px;
		border-radius: 0 0 18px 18px; /* 하단 라운드만 적용 */
	}

	.garden-image-title {
		font-size: 22px;
		margin: 0 0 9px 0;
	}

	.garden-image-text {
		font-size: 17px;
	}
}