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

/* 프리미엄10 섹션 */
.premium10-section {
	padding: 60px 0 100px 0;
	background: #F8F9FA;
}

.premium10-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 50px;
}

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

.premium10-title-image {
	width: 100%;
	max-width: 480px;
	height: auto;
	margin: 0 0 25px 0;
	display: block;
}

.premium10-subtitle {
	font-size: 24px;
	color: #333333;
	font-weight: 600;
	letter-spacing: -0.5px;
}

/* 콘텐츠 그리드 */
.premium10-content {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 100px;
	align-items: center; /* 좌측 텍스트와 우측 이미지 수직 중앙 정렬 */
	max-width: 1400px;
	perspective: 2000px; /* 3D 회전 효과를 위한 원근감 */
}

/* 왼쪽 리스트 영역 */
.premium10-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.premium10-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 25px 0;
	border-bottom: 1px solid #E0E0E0;
	/* 애니메이션 초기 상태 */
	opacity: 0;
	transform: translateX(-30px);
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium10-item.visible {
	opacity: 1;
	transform: translateX(0);
}

.premium10-item:first-child {
	border-top: 1px solid #E0E0E0;
}

.premium10-icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	background: #00529F;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.premium10-item:hover .premium10-icon {
	transform: scale(1.1);
	background: #003D7A;
}

.premium10-icon img {
	width: 40px;
	height: 40px;
	filter: brightness(0) invert(1);
	object-fit: contain;
}

/* 06번 평면도 아이콘만 작게 */
.premium10-item:nth-child(6) .premium10-icon img {
	width: 28px;
	height: 28px;
}

.premium10-number {
	font-size: 20px;
	font-weight: 700;
	color: #00529F;
	min-width: 40px;
}

.premium10-text {
	font-size: 18px;
	color: #333333;
	font-weight: 500;
	letter-spacing: -0.3px;
	line-height: 1.4;
	margin-left: -12px; /* 숫자와 텍스트 사이 간격 제거 */
	flex: 1; /* 남은 공간 차지 */
	word-break: keep-all; /* 단어 단위로 줄바꿈 */
	overflow-wrap: break-word; /* 긴 단어는 강제 줄바꿈 */
}

.premium10-text .highlight {
	color: #00529F;
	font-weight: 700;
}

/* 오른쪽 이미지 그리드 */
.premium10-images {
	display: block;
	margin-left: auto;
	width: auto;
	/* 애니메이션 초기 상태 */
	opacity: 0;
	transform: translateY(30px) rotateY(0deg);
	transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium10-images.visible {
	opacity: 1;
	transform: translateY(0) rotateY(720deg); /* 2번 회전 */
}

.premium10-photo {
	width: 100%;
	height: auto;
	border-radius: 15px;
	transition: all 0.4s ease;
}

.premium10-photo:hover {
	transform: translateY(-5px);
}

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

	.premium10-container {
		padding: 0 20px;
	}

	.premium10-header {
		margin-bottom: 40px;
		text-align: left;
	}

	.premium10-title-image {
		max-width: 280px;
		margin-bottom: 15px;
	}

	.premium10-subtitle {
		font-size: 18px;
	}

	.premium10-content {
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.premium10-item {
		padding: 20px 0;
		gap: 8px;
	}

	.premium10-icon {
		width: 36px;
		height: 36px;
	}

	.premium10-icon img {
		width: 22px;
		height: 22px;
		filter: brightness(0) invert(1);
		object-fit: contain;
	}

	/* 06번 평면도 아이콘은 모바일에서 더 작게 */
	.premium10-item:nth-child(6) .premium10-icon img {
		width: 16px;
		height: 16px;
	}

	.premium10-number {
		font-size: 17px;
		min-width: auto; /* 숫자 자체 너비만 차지 */
	}

	.premium10-text {
		font-size: 16px;
		margin-left: -8px; /* 모바일에서 숫자와 텍스트 사이 간격 제거 */
		flex: 1; /* 남은 공간 차지 */
		word-break: keep-all; /* 단어 단위로 줄바꿈 */
		overflow-wrap: break-word; /* 긴 단어는 강제 줄바꿈 */
		min-width: 0; /* flex 아이템이 줄어들 수 있도록 허용 */
	}

	/* 모바일에서 이미지 상단/좌우 여백 0, 가로 100% */
	.premium10-images {
		gap: 15px;
		margin: -50px -20px 0 -20px; /* 상단/좌우 여백 제거 */
		width: calc(100% + 40px); /* 컨테이너 전체 너비 */
	}

	.premium10-photo {
		width: 100%;
		border-radius: 0; /* 모바일에서 둥근 모서리 제거 */
	}
}