/* 반드시 CLAUDE.md의 절대원칙을 읽고 따를 것 */
/* 하나의 클래스/모듈은 하나의 책임만 가져야 함 (SRP 원칙) */
/* 인테리어 섹션 전용 스타일 */
/* 문서 위치: X:\web\theunjeong\docs\FRONTEND_INTERIOR_SECTION.md */

/* ============================================
   인테리어 섹션 전용 스타일시트
   - 데스크탑: Swiper 슬라이드 방식
   - 모바일: 세로 나열 방식
   - 평면도 섹션 스타일 참조

   관련 파일:
   - HTML: layouts/ncrom_layout/sections/html/interior.html
   - CSS: layouts/ncrom_layout/sections/styles/interior.css
   - JS: layouts/ncrom_layout/sections/scripts/interior.js
   ============================================ */

/* ===== 1. 섹션 기본 스타일 ===== */
/* 인테리어 섹션 전체 컨테이너 */
.interior-section {
	padding: 100px 0; /* 섹션 상하 여백 - 평면안내 섹션과 동일 */
	background: white; /* 깔끔한 배경색 */
	position: relative; /* 자식 요소의 absolute 포지셔닝 기준점 */
}

/* 인테리어 콘텐츠 래퍼 - 최대 너비 제한 및 중앙 정렬 */
.interior-container {
	max-width: 1400px; /* 콘텐츠 최대 너비 제한 */
	margin: 0 auto; /* 수평 중앙 정렬 */
	padding: 0 20px; /* 좌우 여백 - 화면 가장자리와의 간격 */
}

/* ===== 2. 섹션 헤더 ===== */
/* 섹션 제목 영역 (인테리어) */
.interior-section .section-header {
	text-align: center; /* 제목 중앙 정렬 */
	margin-bottom: 10px; /* 제목과 콘텐츠 사이 여백 - 평면안내 섹션과 동일 */
}

/* 섹션 메인 제목 스타일 - 평면안내 섹션과 동일한 박스 스타일 */
.interior-section .section-title {
	font-size: 48px; /* 큰 제목 크기로 시선 집중 */
	font-weight: 700; /* 굵은 글꼴로 강조 */
	color: #fff; /* 흰색 텍스트 */
	margin-bottom: 20px; /* 제목 하단 여백 */
	letter-spacing: -2px; /* 글자 간격 좁혀 밀도감 증가 */
	background: #857D74; /* 평면안내와 동일한 배경색 (회갈색) */
	padding: 20px 40px; /* 내부 여백으로 박스 형태 생성 */
	display: inline-block; /* 텍스트 너비만큼만 배경 표시 */
	border-radius: 8px; /* 모서리 둥글게 처리 */
}

/* ===== 3. 인테리어 타입 컨테이너 ===== */
/* 각 인테리어 타입(거실, 주방, 침실, 욕실) 컨테이너 */
.interior-type {
	background: white; /* 배경색 */
	padding: 10px; /* 내부 여백 */
	margin-bottom: 30px; /* 각 타입 간 간격 - 60px에서 30px로 축소 */
}

/* 마지막 인테리어 타입 - 하단 여백 제거 */
.interior-type:last-of-type {
	margin-bottom: 0; /* 섹션 하단에 불필요한 여백 제거 */
}

/* ===== 4. 인테리어 헤더 ===== */
/* 각 인테리어 타입의 헤더 영역 */
.interior-header {
	text-align: center; /* 중앙 정렬 */
	margin-bottom: 10px; /* 헤더와 이미지 슬라이더 사이 간격 */
}

/* 인테리어 타입 제목 (거실, 주방 등) */
.interior-title {
	font-size: 36px; /* 타입별 제목 크기 */
	font-weight: 700; /* 굵은 글꼴 */
	color: #333; /* 어두운 회색 텍스트 */
	margin-bottom: 20px; /* 제목과 설명 사이 여백 */
	letter-spacing: -1px; /* 글자 간격 조정 */
}

/* 인테리어 설명 텍스트 - 타이핑 애니메이션 대상 */
.interior-description {
	font-size: 18px; /* 읽기 좋은 크기 */
	color: #666; /* 중간 톤 회색으로 가독성 확보 */
	line-height: 1.6; /* 줄 간격 - 가독성 향상 */
	min-height: 30px; /* 최소 높이 확보 - 타이핑 전에도 공간 유지 */
}

/* ===== 5. 타이핑 애니메이션 (main.js와 호환) ===== */
/* 타이핑 진행 중에만 커서 표시 - main.js가 .typing 클래스 추가/제거 */
.interior-description.typing::after {
	content: '|'; /* 커서 모양 (세로 막대) */
	animation: blink 0.7s infinite; /* 깜빡임 애니메이션 */
	margin-left: 2px; /* 텍스트와 커서 사이 간격 */
}

/* 커서 깜빡임 애니메이션 */
@keyframes blink {
	0%, 50% {
		opacity: 1; /* 반쯤까지 보이기 */
	}
	51%, 100% {
		opacity: 0; /* 나머지 시간 숨기기 */
	}
}

/* ===== 6. 컨텐츠 영역 ===== */
/* 슬라이더/이미지가 포함되는 콘텐츠 영역 */
.interior-content {
	position: relative; /* 내부 절대 위치 요소의 기준점 */
}

/* ===== 7. 데스크탑/모바일 표시 제어 ===== */
/* 데스크탑에서만 표시 (Swiper 슬라이더) */
.desktop-only {
	display: block; /* 기본적으로 표시 */
}

/* 모바일에서만 표시 (세로 나열) */
.mobile-only {
	display: none !important; /* 기본적으로 숨김 - 768px 이하에서 표시 */
}

/* ===== 8. Swiper 슬라이드 래퍼 (데스크탑) ===== */
/* Swiper 슬라이더 외곽 래퍼 */
.interior-slider-wrapper {
	position: relative; /* 네비게이션 버튼의 위치 기준점 */
	width: 100%; /* 부모 너비에 맞춤 */
	max-width: 1200px; /* 슬라이더 최대 너비 제한 */
	margin: 0 auto; /* 중앙 정렬 */
}

/* Swiper 컨테이너 - 실제 슬라이더 영역 */
.interior-swiper {
	width: 100%; /* 래퍼에 맞춤 */
	height: 675px; /* 고정 높이 - 세로 길이 조정 (750px → 675px, 10% 감소) */
	padding: 0; /* 여백 제거 */
	position: relative; /* 페이지네이션/버튼 위치 기준점 */
}

/* ===== 9. Swiper 슬라이드 ===== */
/* 개별 슬라이드 아이템 */
.swiper-slide {
	display: flex; /* Flexbox 레이아웃 */
	justify-content: center; /* 가로 중앙 정렬 */
	align-items: center; /* 세로 중앙 정렬 */
}

/* 이미지 래퍼 - 그림자 및 라운드 처리 */
.interior-image-wrapper {
	position: relative; /* 캡션/오버레이 위치 기준점 */
	width: 100%; /* 슬라이드 너비에 맞춤 */
	height: 675px; /* 고정 높이 - 세로 길이 조정 (750px → 675px, 10% 감소) */
	overflow: hidden; /* 이미지가 영역을 벗어나지 않도록 */
	border-radius: 12px; /* 모서리 둥글게 */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 은은한 그림자 효과 */
}

/* 인테리어 이미지 */
.interior-img {
	width: 100%; /* 래퍼 너비에 맞춤 */
	height: 100%; /* 래퍼 높이에 맞춤 */
	object-fit: cover; /* 비율 유지하며 영역 채우기 */
	transition: transform 0.5s ease; /* 변형 애니메이션 (0.5초) */
}

/* 이미지 hover 확대 효과 제거 - 사용자 요청으로 제거됨 */
.interior-image-wrapper:hover .interior-img {
	transform: none; /* 변형 없음 (확대 효과 제거) */
}

/* ===== 세로 이미지 전용 처리 (블러 배경 + 중앙 1:1 배치) ===== */
/* 세로 이미지 래퍼 - 배경 이미지가 JavaScript로 설정됨 */
.interior-image-wrapper.portrait {
	background-size: cover; /* 배경 이미지 꽉 채우기 */
	background-position: center; /* 중앙 정렬 */
	background-repeat: no-repeat; /* 반복 안 함 */
}

/* 블러 처리된 배경 레이어 */
.interior-image-wrapper.portrait::before {
	content: ''; /* 가상 요소 생성 */
	position: absolute; /* 절대 위치 */
	top: -20px; /* 블러 효과로 인한 테두리 확장 */
	left: -20px; /* 블러 효과로 인한 테두리 확장 */
	right: -20px; /* 블러 효과로 인한 테두리 확장 */
	bottom: -20px; /* 블러 효과로 인한 테두리 확장 */
	background: inherit; /* 부모의 background 상속 */
	filter: blur(20px); /* 강한 블러 효과 */
	z-index: 0; /* 메인 이미지 뒤에 배치 */
}

/* 세로 이미지 - 1:1 비율 유지하며 중앙 배치 */
.interior-image-wrapper.portrait .interior-img {
	object-fit: contain; /* 비율 유지하며 영역 내 맞추기 (꽉 채우지 않음) */
	position: relative; /* 블러 배경 위에 표시 */
	z-index: 1; /* 블러 배경 위에 배치 */
}

/* ===== 10. 이미지 캡션 ===== */
/* 이미지 하단에 표시되는 텍스트 레이블 (기타 섹션 전용) */
.image-caption {
	position: absolute; /* 이미지 wrapper 내부 절대 위치 */
	bottom: 60px; /* 하단에서 60px 위 (페이지네이션과 겹치지 않도록) */
	left: 50%; /* 가로 중앙 기준점 */
	transform: translateX(-50%); /* 정확한 중앙 정렬 */
	background: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 (50% 불투명도) */
	color: #fff; /* 흰색 텍스트 */
	padding: 10px 24px; /* 상하 10px, 좌우 24px 여백 */
	font-size: 16px; /* 폰트 크기 */
	font-weight: 500; /* 중간 굵기 */
	letter-spacing: 0.5px; /* 자간 */
	z-index: 10; /* 이미지 위에 표시 */
	white-space: nowrap; /* 텍스트 줄바꿈 방지 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 은은한 그림자 */
	backdrop-filter: blur(4px); /* 배경 흐림 효과 */
	-webkit-backdrop-filter: blur(4px); /* Safari 지원 */
}

/* ===== 11. Swiper 네비게이션 버튼 (메인 슬라이더와 동일) ===== */
/* 이전/다음 버튼 공통 스타일 */
.interior-swiper .swiper-button-prev,
.interior-swiper .swiper-button-next {
	position: absolute; /* 절대 위치 */
	width: 60px; /* 버튼 너비 */
	height: 60px; /* 버튼 높이 (정사각형) */
	top: 50%; /* 세로 중앙 */
	margin-top: -30px; /* 정확한 중앙 정렬 (높이의 절반) */
	background: rgba(102, 126, 234, 0.3); /* 반투명 블루 배경 */
	backdrop-filter: blur(10px); /* 배경 흐림 효과 */
	-webkit-backdrop-filter: blur(10px); /* Safari 지원 */
	border: 1px solid rgba(102, 126, 234, 0.4); /* 블루 테두리 */
	border-radius: 50%; /* 원형 버튼 */
	transition: all 0.3s ease; /* 모든 속성 애니메이션 */
	z-index: 10; /* 이미지 위에 표시 */
	cursor: pointer; /* 클릭 가능 표시 */
	display: flex; /* Flexbox 레이아웃 */
	align-items: center; /* 세로 중앙 정렬 */
	justify-content: center; /* 가로 중앙 정렬 */
}

/* 버튼 hover 효과 - 더 선명하고 크게 */
.interior-swiper .swiper-button-prev:hover,
.interior-swiper .swiper-button-next:hover {
	background: rgba(102, 126, 234, 0.5); /* 배경 더 불투명하게 (진한 블루) */
	border-color: rgba(102, 126, 234, 0.6); /* 테두리 더 진하게 */
	transform: scale(1.1); /* 10% 확대 */
}

/* 이전 버튼 화살표 (‹) */
.interior-swiper .swiper-button-prev:after {
	content: '‹'; /* 왼쪽 화살표 문자 */
	font-size: 48px; /* 큰 크기 */
	font-weight: 100; /* 얇은 글꼴 */
	color: #fff; /* 흰색 */
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 그림자로 가독성 향상 */
	position: absolute; /* 절대 위치 */
	left: 50%; /* 가로 중앙 */
	top: 40%; /* 약간 위쪽 (시각적 균형) */
	transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
	line-height: 1; /* 줄 높이 */
	pointer-events: none; /* 클릭 이벤트 무시 (부모 버튼만 반응) */
}

/* 다음 버튼 화살표 (›) */
.interior-swiper .swiper-button-next:after {
	content: '›'; /* 오른쪽 화살표 문자 */
	font-size: 48px; /* 큰 크기 */
	font-weight: 100; /* 얇은 글꼴 */
	color: #fff; /* 흰색 */
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 그림자로 가독성 향상 */
	position: absolute; /* 절대 위치 */
	left: 50%; /* 가로 중앙 */
	top: 40%; /* 약간 위쪽 (시각적 균형) */
	transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
	line-height: 1; /* 줄 높이 */
	pointer-events: none; /* 클릭 이벤트 무시 (부모 버튼만 반응) */
}

/* 이전 버튼 위치 - 왼쪽 */
.interior-swiper .swiper-button-prev {
	left: 40px; /* 좌측 가장자리에서 40px */
}

/* 다음 버튼 위치 - 오른쪽 */
.interior-swiper .swiper-button-next {
	right: 40px; /* 우측 가장자리에서 40px */
}

/* ===== 12. Swiper 페이지네이션 (메인 슬라이더와 동일) ===== */
/* 페이지네이션 컨테이너 - 점(bullet) 표시 영역 */
.interior-swiper .swiper-pagination {
	position: absolute; /* 절대 위치 (이미지 위에 표시) */
	bottom: 20px; /* 하단에서 20px 위 */
	left: 0; /* 왼쪽 정렬 */
	width: 100%; /* 전체 너비 */
	text-align: center; /* 점들을 중앙 정렬 */
	z-index: 10; /* 이미지 위에 표시 */
}

/* 페이지네이션 점(bullet) - 비활성 상태 */
/* Swiper v2 클래스명: swiper-pagination-switch */
.interior-swiper .swiper-pagination-switch {
	width: 12px; /* 점 너비 */
	height: 12px; /* 점 높이 (원형) */
	background: #fff; /* 흰색 배경 */
	opacity: 0.5; /* 반투명 (비활성 상태) */
	margin: 0 5px; /* 점들 사이 간격 */
	cursor: pointer; /* 클릭 가능 표시 */
	border-radius: 50%; /* 완전한 원형 */
	display: inline-block; /* 인라인 블록 (가로 나열) */
}

/* 페이지네이션 활성 점 - 현재 슬라이드 표시 */
/* Swiper v2 클래스명: swiper-active-switch */
.interior-swiper .swiper-pagination-switch.swiper-active-switch {
	width: 30px; /* 너비 확장 (원형→타원형) */
	border-radius: 6px; /* 타원형 모양 */
	opacity: 1; /* 완전 불투명 (강조) */
}

/* ===== 13. 모바일 이미지 나열 ===== */
/* 모바일에서 이미지를 세로로 나열하는 컨테이너 */
.interior-images-mobile {
	display: flex; /* Flexbox 레이아웃 */
	flex-direction: column; /* 세로 방향 배치 */
	gap: 30px; /* 이미지들 사이 간격 */
}

/* 모바일 이미지 아이템 */
.interior-image-item {
	width: 100%; /* 컨테이너 너비에 맞춤 */
}

/* ===== 14. 주요 마감재 섹션 ===== */
/* 주요 마감재 전체 컨테이너 */
.interior-materials {
	margin-top: 100px; /* 인테리어 이미지와의 간격 */
	padding: 60px; /* 내부 여백 */
	background: white; /* 배경색 */
	border-radius: 16px; /* 둥근 모서리 */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 은은한 그림자 */
}

/* 마감재 섹션 제목 */
.materials-title {
	font-size: 36px; /* 큰 제목 크기 */
	font-weight: 700; /* 굵은 글꼴 */
	color: #222; /* 거의 검정색 */
	text-align: center; /* 중앙 정렬 */
	margin-bottom: 50px; /* 제목과 그리드 사이 간격 */
	letter-spacing: -1px; /* 글자 간격 조정 */
}

/* 마감재 그리드 레이아웃 - 6열 */
.materials-grid {
	display: grid; /* Grid 레이아웃 */
	grid-template-columns: repeat(6, 1fr); /* 6개 열 균등 분할 */
	gap: 30px; /* 그리드 아이템 사이 간격 */
}

/* 개별 마감재 아이템 */
.material-item {
	text-align: center; /* 내용 중앙 정렬 */
	padding: 30px 20px; /* 내부 여백 */
	background: #f8f9fa; /* 연한 회색 배경 */
	border-radius: 12px; /* 둥근 모서리 */
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* 변형/그림자 애니메이션 */
}

/* 마감재 아이템 hover 효과 - 위로 떠오르는 느낌 */
.material-item:hover {
	transform: translateY(-8px); /* 8px 위로 이동 */
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 그림자 강화 */
}

/* 마감재 아이콘 (Font Awesome) */
.material-item i {
	font-size: 40px; /* 아이콘 크기 */
	color: #667eea; /* 보라빛 파란색 */
	margin-bottom: 20px; /* 아이콘과 제목 사이 간격 */
	display: block; /* 블록 레벨 (세로 배치) */
}

/* 마감재 제목 (거실/주방, 현관 등) */
.material-item h4 {
	font-size: 18px; /* 제목 크기 */
	font-weight: 700; /* 굵은 글꼴 */
	color: #333; /* 어두운 회색 */
	margin-bottom: 10px; /* 제목과 설명 사이 간격 */
}

/* 마감재 설명 텍스트 */
.material-item p {
	font-size: 14px; /* 작은 크기 */
	color: #666; /* 중간 톤 회색 */
	line-height: 1.5; /* 줄 간격 */
}

/* ===== 15. 태블릿 (1024px 이하) ===== */
@media (max-width: 1024px) {
	/* 섹션 여백 축소 */
	.interior-section {
		padding: 80px 0; /* 100px → 80px */
	}

	/* 컨테이너 좌우 여백 증가 */
	.interior-container {
		padding: 0 30px; /* 20px → 30px (터치 영역 확보) */
	}

	/* 섹션 제목 크기 축소 */
	.interior-section .section-title {
		font-size: 40px; /* 48px → 40px */
	}

	/* 인테리어 타입 컨테이너 여백 조정 */
	.interior-type {
		padding: 50px 40px; /* 60px → 50px/40px */
		margin-bottom: 25px; /* 60px → 25px (데스크탑 30px의 절반) */
	}

	/* 타입 제목 크기 축소 */
	.interior-title {
		font-size: 32px; /* 36px → 32px */
	}

	/* 설명 텍스트 크기 조정 */
	.interior-description {
		font-size: 17px; /* 18px → 17px */
	}

	/* 이미지 높이 조정 */
	.interior-image-wrapper {
		height: 585px; /* 650px → 585px (태블릿, 10% 감소) */
	}

	/* 캡션 텍스트 크기 조정 (사용되지 않음) */
	.interior-caption h4 {
		font-size: 22px;
	}

	.interior-caption p {
		font-size: 15px;
	}

	/* 마감재 섹션 여백 조정 */
	.interior-materials {
		margin-top: 80px; /* 100px → 80px */
		padding: 50px 40px; /* 60px → 50px/40px */
	}

	/* 마감재 제목 크기 축소 */
	.materials-title {
		font-size: 32px; /* 36px → 32px */
		margin-bottom: 40px; /* 50px → 40px */
	}

	/* 마감재 그리드 3열로 변경 */
	.materials-grid {
		grid-template-columns: repeat(3, 1fr); /* 6열 → 3열 */
		gap: 25px; /* 30px → 25px */
	}
}

/* ===== 16. 모바일 (768px 이하) ===== */
@media (max-width: 768px) {
	/* 데스크탑/모바일 레이아웃 전환 */
	.desktop-only {
		display: none !important; /* Swiper 슬라이더 숨김 */
	}

	.mobile-only {
		display: block !important; /* 세로 나열 표시 */
	}

	/* 섹션 여백 대폭 축소 (평면안내와 동일) */
	.interior-section {
		padding: 30px 0; /* 80px → 30px (평면안내와 동일) */
	}

	/* 컨테이너 좌우 여백 제거 (모바일 전체 너비) */
	.interior-container {
		padding: 0; /* 좌우 여백 제거 */
	}

	/* 섹션 헤더 하단 여백 대폭 축소 (평면안내와 동일) */
	.interior-section .section-header {
		margin-bottom: 20px; /* 10px → 20px (평면안내와 동일) */
		padding: 0 20px; /* 좌우 여백 추가 */
	}

	/* 섹션 제목 크기 축소 (평면안내와 동일) */
	.interior-section .section-title {
		font-size: 26px; /* 40px → 26px (평면안내와 동일) */
		margin-bottom: 15px; /* 20px → 15px */
	}

	/* 인테리어 타입 컨테이너 여백 축소 */
	.interior-type {
		padding: 40px 20px 20px 20px; /* 헤더 부분만 좌우 여백, 하단 축소 */
		margin-bottom: 20px; /* 50px → 20px (데스크탑 30px 대비 축소) */
	}

	/* 타입 헤더 여백 증가 */
	.interior-header {
		margin-bottom: 35px; /* 10px → 35px */
	}

	/* 타입 제목 크기 축소 */
	.interior-title {
		font-size: 24px; /* 36px → 24px (더 축소) */
		margin-bottom: 15px; /* 20px → 15px */
	}

	/* 설명 텍스트 크기 조정 및 좌측 정렬 */
	.interior-description {
		font-size: 16px; /* 17px → 16px */
		text-align: left; /* 좌측 정렬 (평면도 섹션과 동일) */
	}

	/* 모바일 이미지 좌우 여백 제거 및 간격 조정 */
	.interior-images-mobile {
		margin-left: -20px; /* 타입 padding 상쇄 */
		margin-right: -20px; /* 타입 padding 상쇄 */
		gap: 0; /* 이미지 간 간격 제거 */
	}

	/* 이미지 실제 비율 유지 */
	.interior-image-wrapper {
		height: auto; /* 고정 높이 제거, 실제 비율 유지 */
		margin-bottom: 20px; /* 이미지 하단 여백 */
		border-radius: 0; /* 모바일에서 둥근 모서리 제거 */
		box-shadow: none; /* 그림자 효과 제거 */
	}

	/* 이미지 전체 너비 표시 */
	.interior-img {
		width: 100%;
		display: block;
		border-radius: 0; /* 모바일에서 둥근 모서리 제거 */
	}

	/* 이미지 캡션 하단 배치 */
	.image-caption {
		bottom: 15px; /* 이미지 하단 배치 (60px → 15px) */
		font-size: 14px; /* 모바일 폰트 크기 축소 */
		padding: 8px 20px; /* 여백 축소 */
	}

	/* 캡션 여백 조정 (사용되지 않음) */
	.interior-caption {
		padding: 20px;
	}

	.interior-caption h4 {
		font-size: 20px;
		margin-bottom: 6px;
	}

	.interior-caption p {
		font-size: 14px;
	}

	/* 마감재 섹션 여백 축소 */
	.interior-materials {
		margin-top: 60px; /* 80px → 60px */
		padding: 40px 20px; /* 좌우 여백 조정 */
	}

	/* 마감재 제목 크기 축소 */
	.materials-title {
		font-size: 28px; /* 32px → 28px */
		margin-bottom: 30px; /* 40px → 30px */
	}

	/* 마감재 그리드 2열로 변경 */
	.materials-grid {
		grid-template-columns: repeat(2, 1fr); /* 3열 → 2열 */
		gap: 20px; /* 25px → 20px */
	}

	/* 마감재 아이템 여백 축소 */
	.material-item {
		padding: 25px 15px; /* 30px/20px → 25px/15px */
	}

	/* 마감재 아이콘 크기 축소 */
	.material-item i {
		font-size: 32px; /* 40px → 32px */
		margin-bottom: 15px; /* 20px → 15px */
	}

	/* 마감재 제목 크기 축소 */
	.material-item h4 {
		font-size: 16px; /* 18px → 16px */
	}

	/* 마감재 설명 크기 축소 */
	.material-item p {
		font-size: 13px; /* 14px → 13px */
	}
}

/* ===== 17. 작은 모바일 (480px 이하) ===== */
@media (max-width: 480px) {
	/* 섹션 여백 최소화 (평면안내와 동일) */
	.interior-section {
		padding: 25px 0; /* 60px → 25px (평면안내와 동일) */
	}

	/* 컨테이너 좌우 여백 제거 (모바일 전체 너비) */
	.interior-container {
		padding: 0; /* 좌우 여백 제거 */
	}

	/* 섹션 헤더 여백 축소 (평면안내와 동일) */
	.interior-section .section-header {
		margin-bottom: 15px; /* 50px → 15px (평면안내와 동일) */
		padding: 0 15px; /* 좌우 여백 추가 */
	}

	/* 섹션 제목 크기 최소화 (평면안내와 동일) */
	.interior-section .section-title {
		font-size: 22px; /* 32px → 22px (평면안내와 동일) */
		margin-bottom: 12px; /* 15px → 12px */
	}

	/* 인테리어 타입 여백 최소화 */
	.interior-type {
		padding: 30px 15px 15px 15px; /* 헤더 부분만 좌우 여백, 하단 축소 */
		margin-bottom: 15px; /* 40px → 15px (작은 화면 최적화) */
	}

	/* 타입 헤더 여백 축소 */
	.interior-header {
		margin-bottom: 30px; /* 35px → 30px */
	}

	/* 타입 제목 크기 최소화 */
	.interior-title {
		font-size: 20px; /* 28px → 20px (더 축소) */
		margin-bottom: 12px; /* 15px → 12px */
	}

	/* 설명 텍스트 크기 축소 및 좌측 정렬 */
	.interior-description {
		font-size: 15px; /* 16px → 15px */
		text-align: left; /* 좌측 정렬 (평면도 섹션과 동일) */
	}

	/* 모바일 이미지 좌우 여백 제거 및 간격 조정 */
	.interior-images-mobile {
		margin-left: -15px; /* 타입 padding 상쇄 */
		margin-right: -15px; /* 타입 padding 상쇄 */
		gap: 0; /* 이미지 간 간격 제거 */
	}

	/* 이미지 실제 비율 유지 */
	.interior-image-wrapper {
		height: auto; /* 고정 높이 제거, 실제 비율 유지 */
		margin-bottom: 15px; /* 이미지 하단 여백 */
		border-radius: 0; /* 모바일에서 둥근 모서리 제거 */
		box-shadow: none; /* 그림자 효과 제거 */
	}

	/* 이미지 전체 너비 표시 */
	.interior-img {
		width: 100%;
		display: block;
		border-radius: 0; /* 모바일에서 둥근 모서리 제거 */
	}

	/* 이미지 캡션 하단 배치 */
	.image-caption {
		bottom: 12px; /* 이미지 하단 배치 (60px → 12px) */
		font-size: 13px; /* 모바일 폰트 크기 축소 */
		padding: 6px 16px; /* 여백 축소 */
	}

	/* 캡션 여백 최소화 (사용되지 않음) */
	.interior-caption {
		padding: 15px;
	}

	.interior-caption h4 {
		font-size: 18px;
		margin-bottom: 5px;
	}

	.interior-caption p {
		font-size: 13px;
	}

	/* 마감재 섹션 여백 최소화 */
	.interior-materials {
		margin-top: 50px; /* 60px → 50px */
		padding: 30px 15px; /* 좌우 여백 조정 */
	}

	/* 마감재 제목 크기 최소화 */
	.materials-title {
		font-size: 24px; /* 28px → 24px */
		margin-bottom: 25px; /* 30px → 25px */
	}

	/* 마감재 그리드 1열로 변경 - 세로 나열 */
	.materials-grid {
		grid-template-columns: 1fr; /* 2열 → 1열 */
		gap: 15px; /* 20px → 15px */
	}

	/* 마감재 아이템 여백 최소화 */
	.material-item {
		padding: 20px 15px; /* 25px/15px → 20px/15px */
	}

	/* 마감재 아이콘 크기 축소 */
	.material-item i {
		font-size: 28px; /* 32px → 28px */
		margin-bottom: 12px; /* 15px → 12px */
	}

	/* 마감재 제목 크기 축소 */
	.material-item h4 {
		font-size: 15px; /* 16px → 15px */
	}

	/* 마감재 설명 크기 최소화 */
	.material-item p {
		font-size: 12px; /* 13px → 12px */
	}
}

/* ===== 18. 인쇄 스타일 ===== */
@media print {
	/* 인쇄 시 섹션 여백 최소화 */
	.interior-section {
		padding: 20px 0; /* 용지 절약 */
	}

	/* 인쇄 시 인터랙티브 요소 숨김 */
	.interior-swiper .swiper-button-prev,
	.interior-swiper .swiper-button-next,
	.interior-swiper .swiper-pagination {
		display: none; /* 버튼과 페이지네이션 숨김 */
	}

	/* 페이지 나누기 방지 - 타입별로 한 페이지에 */
	.interior-type {
		page-break-inside: avoid; /* 인테리어 타입이 페이지 중간에 나뉘지 않도록 */
		margin-bottom: 30px; /* 여백 축소 */
	}

	/* 인쇄 시 hover 효과 제거 */
	.interior-image-wrapper:hover .interior-img {
		transform: none; /* 변형 없음 */
	}

	/* 마감재 섹션 페이지 나누기 방지 */
	.interior-materials {
		page-break-inside: avoid; /* 마감재 섹션이 페이지 중간에 나뉘지 않도록 */
	}
}