@charset "UTF-8";



.facilityList, .roomList {
	max-width: 1600px;
	margin: 0 auto;
	padding: 100px 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
}


.facilityCard, .roomCard {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px 60px 0 0;
	transition: 0.3s;
}

.facilityCard:hover, .roomCard:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}


.imgBox {
	width: 100%;
	height: 320px;
	border-radius: 0px 90px 0 0;
	box-shadow: var(--box-effect01);
	overflow: hidden;
}

.imgBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.4s;
}

.facilityCard:hover img, .roomCard:hover img {
	transform: scale(1.05);
}

.roomList .roomCard {
	border: 1px solid #eee;
	border-radius: 8px 60px 0 0;
	background: #ddd;
	transition: 0.3s;
}

.facilityCard .textBox {
	background: #ddd;
	width: 100%;
}


.textBox {
	padding: 25px;
}

.textBox h3 {
	font-size: 22px;
	margin-bottom: 10px;
}

.location, .time {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
}


.detailBtn {
	display: inline-block;
	margin-top: 15px;
	padding: 8px 20px;
	border: 1px solid #000;
	font-size: 14px;
	transition: 0.3s;
	background: #efefef;
}

.detailBtn:hover {
	background: #000;
	color: #fff;
}

@media ( max-width : 1024px) {
	/* 타이틀 폰트 축소 */
	.top_title h2 {
		font-size: 38px;
		margin-bottom: 22px;
	}


	.facilityList, .roomList {
		grid-template-columns: repeat(2, 1fr);
		padding: 70px 30px;
		gap: 40px;
	}

	.imgBox {
		height: 260px;
	}
	.textBox {
		padding: 20px;
	}
	.textBox h3 {
		font-size: 20px;
	}
}

@media ( max-width : 767px) {
	/* 상단 여백 조정 */
	.wrap {
		padding-top: 60px;
	}

	/* 타이틀 폰트 모바일 최적화 */
	.top_title h2 {
		font-size: clamp(26px, 7vw, 34px);
		margin-bottom: 16px;
		line-height: 1.2;
	}
	.top_title p {
		font-size: 14px;
		line-height: 1.7;
	}

	/* facilityList + roomList : 1열로 변경 */
	.facilityList, .roomList {
		grid-template-columns: 1fr;
		padding: 50px 16px;
		gap: 28px;
	}

	/* roomCard border-radius 모바일 축소 */
	.facilityCard, .roomCard {
		border-radius: 8px 40px 0 0;
	}

	/* 이미지 높이 모바일 최적화 */
	.imgBox {
		height: 220px;
		border-radius: 0px 60px 0 0; /* 모바일에서 radius 비례 축소 */
	}

	/* 텍스트 박스 */
	.textBox {
		padding: 18px 16px;
	}
	.textBox h3 {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.location, .time {
		font-size: 13px;
	}

	/* 버튼 */
	.detailBtn {
		margin-top: 12px;
		padding: 8px 18px;
		font-size: 13px;
	}

	/* 페이드업 : 모바일에서 translateY 줄임 (성능) */
	.fade-up {
		transform: translateY(30px);
	}
}

@media ( max-width : 480px) {
	.top_title h2 {
		font-size: 24px;
	}
	.facilityList, .roomList {
		padding: 36px 12px;
		gap: 20px;
	}
	.facilityCard, .roomCard {
		border-radius: 8px 28px 0 0;
	}
	.imgBox {
		height: 190px;
		border-radius: 0px 40px 0 0;
	}
	.textBox {
		padding: 14px 12px;
	}
	.textBox h3 {
		font-size: 16px;
	}
	.detailBtn {
		width: 100%; /* 모바일에서 버튼 풀너비 */
		text-align: center;
		box-sizing: border-box;
	}
}