/* 반드시 CLAUDE.md의 절대원칙을 읽고 따를 것, 하나의 클래스/모듈은 하나의 책임만 가져야 함 (SRP 원칙), 하나의 파일에 코드줄은 최대 500~600줄 내에서 생성하여야 하며 최대 코드줄이 넘어가지 않도록 작성, 만약 코드가 길어지면 분할해서 코드작업을 완성하여야 함 */
/* ============================================
   평면안내 섹션 전용 스타일시트
   - 84㎡ A, B, B-1 타입 평면도 및 ISO 이미지
   - 면적 정보 테이블
   - 타이핑 애니메이션 효과
   - 웨이브 텍스트 효과

   관련 파일:
   - HTML: layouts/ncrom_layout/sections/html/floorplan.html (171줄)
   - CSS: layouts/ncrom_layout/sections/styles/floorplan.css (542줄, 13개 섹션)
   - JS: layouts/ncrom_layout/sections/scripts/main.js (타이핑 애니메이션)

   문서:
   - docs/FLOORPLAN_SECTION_GUIDE.md (HTML 구조 가이드, 495줄)
   - docs/FLOORPLAN_CSS_GUIDE.md (CSS 스타일 가이드, 679줄)
   ============================================ */

/* ============================================
   1. 섹션 기본 레이아웃
   ============================================ */

/* 평면안내 섹션 전체 컨테이너 */
.floorplan-section {
	padding: 100px 0;           /* 상하 여백 100px */
	background: #f8f9fa;        /* 밝은 회색 배경 */
	position: relative;         /* 하위 요소 절대 위치 기준점 */
}

/* 평면안내 콘텐츠 래퍼 (최대 너비 제한) */
.floorplan-container {
	max-width: 1400px;          /* 최대 너비 1400px */
	margin: 0 auto;             /* 좌우 중앙 정렬 */
	padding: 0 10px;            /* 좌우 여백 10px */
}

/* ============================================
   2. 섹션 헤더 (제목 영역)
   ============================================ */

/* 섹션 헤더 컨테이너 */
.floorplan-section .section-header {
	text-align: center;         /* 중앙 정렬 */
	margin-bottom: 10px;        /* 하단 여백 10px */
}

/* 섹션 메인 타이틀 ("평면안내") */
.floorplan-section .section-title {
	font-size: 48px;            /* 폰트 크기 48px */
	font-weight: 700;           /* 굵은 글씨 (Bold) */
	color: #fff;                /* 흰색 텍스트 */
	margin-bottom: 20px;        /* 하단 여백 20px */
	letter-spacing: -2px;       /* 자간 -2px (좁게) */
	background: #857D74;        /* 배경색 #857D74 (테마 색상) */
	padding: 20px 40px;         /* 상하 20px, 좌우 40px 여백 */
	display: inline-block;      /* 인라인 블록 (내용만큼만 너비) */
	border-radius: 8px;         /* 모서리 둥글게 8px */
}

/* 섹션 서브타이틀 (현재 미사용) */
.floorplan-section .section-subtitle {
	font-size: 20px;            /* 폰트 크기 20px */
	color: #666;                /* 회색 텍스트 */
	line-height: 1.6;           /* 줄 높이 1.6배 */
}

/* ============================================
   3. 평면도 타입별 컨테이너 (84A, 84B, 84B-1)
   ============================================ */

/* 각 평면도 타입 컨테이너 */
.floorplan-type {30px;       /* 하단 여백 100px (타입 간 간격) */
	padding: 30px 0;            /* 상하 여백 30px */
}

/* 마지막 평면도 타입은 하단 여백 제거 */
.floorplan-type:last-child {
	margin-bottom: 0;           /* 하단 여백 제거 */
}

/* ============================================
   4. 평면도 헤더 (타입명, 세대수, 타이핑 텍스트)
   ============================================ */

/* 평면도 헤더 컨테이너 (Flexbox 레이아웃) */
.floorplan-header {
	display: flex;              /* Flexbox 레이아웃 */
	align-items: center;        /* 세로 중앙 정렬 */
	gap: 20px;                  /* 요소 간 간격 20px */
	margin-bottom: 40px;        /* 하단 여백 40px */
	padding-bottom: 30px;       /* 하단 안쪽 여백 30px */
	border-bottom: 3px solid #857D74; /* 하단 테두리 3px 테마 색상 */
	flex-wrap: nowrap;          /* 줄바꿈 금지 (한 줄로 표현) */
}

/* 평면도 타입명 (예: "84㎡ A") */
.floorplan-title {
	font-size: 40px;            /* 폰트 크기 40px */
	font-weight: 700;           /* 굵은 글씨 (Bold) */
	color: #222;                /* 진한 회색 텍스트 */
	letter-spacing: -1px;       /* 자간 -1px (좁게) */
	margin: 0;                  /* 마진 제거 */
}

/* 세대수 뱃지 (예: "384세대") */
.floorplan-badge {
	display: inline-block;      /* 인라인 블록 */
	padding: 10px 30px;         /* 상하 10px, 좌우 30px 여백 */
	background: #857D74;        /* 배경색 테마 색상 */
	color: white;               /* 흰색 텍스트 */
	font-size: 18px;            /* 폰트 크기 18px */
	font-weight: 600;           /* 세미볼드 */
	border-radius: 30px;        /* 둥근 모서리 30px (캡슐 형태) */
}

/* 타이핑 텍스트 설명 영역 */
.floorplan-description {
	font-size: 24px;            /* 폰트 크기 24px */
	color: #666;                /* 회색 텍스트 */
	line-height: 1.6;           /* 줄 높이 1.6배 */
	margin: 0;                  /* 마진 제거 */
	flex: 1;                    /* Flexbox에서 남은 공간 차지 */
	min-height: 30px;           /* 최소 높이 30px (타이핑 전에도 공간 확보) */
	font-weight: 500;           /* 미디엄 굵기 */
	position: relative;         /* 커서 위치 기준점 */
}

/* ============================================
   5. 타이핑 애니메이션 효과
   ============================================ */

/* 타이핑 중 커서 표시 (블록 커서) */
.floorplan-description.typing::after {
	content: '';                /* 빈 컨텐츠 */
	display: inline-block;      /* 인라인 블록 */
	width: 10px;                /* 커서 너비 10px */
	height: 1.2em;              /* 커서 높이 (텍스트 높이의 1.2배) */
	background: #666;           /* 커서 색상 회색 */
	animation: blink 0.7s infinite; /* 깜빡임 애니메이션 0.7초 간격 무한 반복 */
	margin-left: 3px;           /* 좌측 여백 3px */
	vertical-align: text-bottom; /* 텍스트 하단 정렬 */
}

/* 커서 깜빡임 애니메이션 */
@keyframes blink {
	0%, 50% { opacity: 1; }     /* 0~50%: 불투명 (보임) */
	51%, 100% { opacity: 0; }   /* 51~100%: 투명 (안 보임) */
}

/* ============================================
   6. 웨이브 텍스트 효과 (타이핑 완료 후)
   ============================================ */

/* 웨이브 효과를 받는 각 글자 */
.floorplan-description span.wave-char {
	display: inline-block;      /* 인라인 블록 (transform 적용 가능) */
	animation: wave-char 0.6s ease-in-out; /* 웨이브 애니메이션 0.6초 */
}

/* 웨이브 애니메이션 (상하 움직임) */
@keyframes wave-char {
	0%, 100% { transform: translateY(0); }   /* 시작/종료: 원위치 */
	50% { transform: translateY(-8px); }     /* 중간: 위로 8px 이동 */
}

/* ============================================
   7. 평면도 콘텐츠 영역 (테이블 + 이미지)
   ============================================ */

/* 평면도 콘텐츠 컨테이너 (Flexbox 세로 배치) */
.floorplan-content {
	display: flex;              /* Flexbox 레이아웃 */
	flex-direction: column;     /* 세로 방향 배치 */
	gap: 40px;                  /* 요소 간 간격 30px (테이블과 이미지 사이) */
}

/* ============================================
   8. 면적 정보 테이블
   ============================================ */

/* 테이블 래퍼 (가로 스크롤 대응) */
.floorplan-table-wrapper {
	overflow-x: auto;           /* 가로 스크롤 자동 */
}

/* 면적 정보 테이블 */
.floorplan-table {
	width: 100%;                /* 전체 너비 */
	border-collapse: collapse;  /* 테두리 병합 */
	background: white;          /* 흰색 배경 */
	border-radius: 12px;        /* 둥근 모서리 12px */
	overflow: hidden;           /* 모서리 밖 내용 숨김 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}

/* 테이블 행 (구분선) */
.floorplan-table tbody tr {
	border-bottom: 1px solid #e8e8e8; /* 하단 테두리 1px 연한 회색 */
}

/* 마지막 행은 구분선 제거 */
.floorplan-table tbody tr:last-child {
	border-bottom: none;        /* 테두리 제거 */
}

/* 테이블 셀 (공통 스타일) */
.floorplan-table td {
	padding: 20px 15px;         /* 상하 20px, 좌우 15px 여백 */
	text-align: center;         /* 중앙 정렬 */
	font-size: 16px;            /* 폰트 크기 16px */
	color: #333;                /* 진한 회색 텍스트 */
	line-height: 1.6;           /* 줄 높이 1.6배 */
	border-right: 1px solid #e8e8e8; /* 우측 테두리 1px 연한 회색 */
}

/* 마지막 셀은 우측 테두리 제거 */
.floorplan-table td:last-child {
	border-right: none;         /* 테두리 제거 */
}

/* 테이블 라벨 셀 (항목명: 전용 면적, 공급 면적 등) */
.floorplan-table .table-label {
	font-weight: 600;           /* 세미볼드 */
	color: #fff;                /* 흰색 텍스트 */
	background: #857D74;        /* 테마 색상 배경 */
	width: 25%;                 /* 너비 25% */
}

/* 테이블 값 셀 (면적 수치) */
.floorplan-table .table-value {
	font-weight: 700;           /* 굵은 글씨 (Bold) */
	color: #222;                /* 진한 회색 텍스트 */
	font-size: 18px;            /* 폰트 크기 18px */
	width: 25%;                 /* 너비 25% */
}

/* ============================================
   9. 평면도 이미지 (평면도 + ISO)
   ============================================ */

/* 이미지 그리드 컨테이너 (2열 배치) */
.floorplan-images {
	display: grid;              /* Grid 레이아웃 */
	grid-template-columns: repeat(2, 1fr); /* 2열 동일 너비 */
	gap: 25px;                  /* 요소 간 간격 40px */
	align-items: stretch;       /* 같은 행의 박스 높이를 동일하게 맞춤 */
}

/* 이미지 아이템 (평면도/ISO 각각) */
.floorplan-image-item {
	background: white;          /* 흰색 배경 */
	border-radius: 12px;        /* 둥근 모서리 12px */
	overflow: hidden;           /* 모서리 밖 내용 숨김 */
	transition: transform 0.3s ease; /* 호버 애니메이션 부드럽게 */
	display: flex;              /* Flexbox 레이아웃 */
	flex-direction: column;     /* 세로 방향 배치 */
	height: 600px;              /* 고정 높이 600px (모든 박스 통일) */
}

/* 이미지 아이템 호버 효과 */
.floorplan-image-item:hover {
	transform: translateY(-8px); /* 위로 8px 이동 */
}

/* 이미지 타이틀 ("평면도", "ISO") */
.floorplan-image-title {
	padding: 20px;              /* 상하좌우 20px 여백 */
	background: #857D74;        /* 테마 색상 배경 */
	color: white;               /* 흰색 텍스트 */
	font-size: 20px;            /* 폰트 크기 20px */
	font-weight: 600;           /* 세미볼드 */
	text-align: center;         /* 중앙 정렬 */
	margin: 0;                  /* 마진 제거 */
	flex-shrink: 0;             /* 타이틀 크기 고정 */
}

/* 이미지 래퍼 (타이틀 아래 영역) */
.floorplan-image-wrapper {
	position: relative;         /* VR 버튼 절대 위치 기준점 */
	flex: 1;                    /* 남은 공간 차지 */
	display: flex;              /* Flexbox 레이아웃 */
	align-items: center;        /* 세로 중앙 정렬 */
	justify-content: center;    /* 가로 중앙 정렬 */
	padding: 10px 20px 20px;    /* 상단 10px, 좌우 20px, 하단 20px */
}

/* 평면도 이미지 (기본 크기 80%) */
.floorplan-img {
	width: 80%;                 /* 너비 80% (원본의 80% 크기) */
	height: auto;               /* 높이 자동 (비율 유지) */
	display: block;             /* 블록 요소 */
	max-height: 100%;           /* 최대 높이 100% (박스 안에 맞춤) */
	object-fit: contain;        /* 비율 유지하며 박스 안에 맞춤 */
}

/* ISO 이미지 (더 큰 크기 95%) */
.floorplan-img-iso {
	width: 95%;                 /* 너비 95% (평면도보다 큼) */
}

/* ============================================
   10. 반응형 디자인 - 태블릿 (1024px 이하)
   ============================================ */
@media (max-width: 1024px) {
	/* 섹션 여백 축소 */
	.floorplan-section {
		padding: 80px 0;        /* 상하 여백 80px */
	}

	/* 컨테이너 좌우 여백 증가 */
	.floorplan-container {
		padding: 0 30px;        /* 좌우 여백 30px */
	}

	/* 섹션 타이틀 크기 축소 */
	.floorplan-section .section-title {
		font-size: 40px;        /* 폰트 크기 40px */
	}

	/* 서브타이틀 크기 축소 */
	.floorplan-section .section-subtitle {
		font-size: 18px;        /* 폰트 크기 18px */
	}

	/* 평면도 타입 여백 축소 */
	.floorplan-type {
		padding: 40px 0;        /* 상하 여백 40px */
		margin-bottom: 80px;    /* 하단 여백 80px */
	}

	/* 평면도 타이틀 크기 축소 */
	.floorplan-title {
		font-size: 34px;        /* 폰트 크기 34px */
	}

	/* 뱃지 크기 축소 */
	.floorplan-badge {
		font-size: 16px;        /* 폰트 크기 16px */
		padding: 8px 24px;      /* 상하 8px, 좌우 24px 여백 */
	}

	/* 테이블 셀 크기 축소 */
	.floorplan-table th,
	.floorplan-table td {
		padding: 15px 10px;     /* 상하 15px, 좌우 10px 여백 */
		font-size: 14px;        /* 폰트 크기 14px */
	}

	/* 이미지 간격 축소 */
	.floorplan-images {
		gap: 30px;              /* 간격 30px */
	}

	/* 이미지 타이틀 크기 축소 */
	.floorplan-image-title {
		font-size: 18px;        /* 폰트 크기 18px */
		padding: 15px;          /* 여백 15px */
	}
}

/* ============================================
   11. 반응형 디자인 - 모바일 (768px 이하)
   ============================================ */
@media (max-width: 768px) {
	/* 섹션 여백 축소 */
	.floorplan-section {
		padding: 30px 0;        /* 상하 여백 30px (대폭 축소) */
	}

	/* 컨테이너 좌우 여백 축소 */
	.floorplan-container {
		padding: 0 20px;        /* 좌우 여백 20px */
	}

	/* 섹션 헤더 하단 여백 대폭 축소 */
	.floorplan-section .section-header {
		margin-bottom: 20px;    /* 하단 여백 20px (대폭 축소) */
	}

	/* 섹션 타이틀 크기 축소 */
	.floorplan-section .section-title {
		font-size: 26px;        /* 폰트 크기 26px (보기 좋게 축소) */
		margin-bottom: 15px;    /* 하단 여백 15px */
	}

	/* 서브타이틀 크기 축소 */
	.floorplan-section .section-subtitle {
		font-size: 16px;        /* 폰트 크기 16px */
	}

	/* 평면도 타입 여백 대폭 축소 */
	.floorplan-type {
		padding: 10px 0;        /* 상하 여백 10px (상단 여백 대폭 축소) */
		margin-bottom: 30px;    /* 하단 여백 30px (타입 간 간격 축소) */
	}

	/* 헤더를 가로 배치로 변경 (제목+배지 한 줄, 설명문 다음 줄, 중앙 정렬) */
	.floorplan-header {
		flex-direction: row;     /* 가로 방향 배치 */
		flex-wrap: wrap;         /* 줄바꿈 허용 */
		align-items: center;     /* 세로 중앙 정렬 */
		justify-content: center; /* 가로 중앙 정렬 */
		gap: 15px;              /* 간격 15px */
		margin-bottom: 30px;    /* 하단 여백 30px */
		padding-bottom: 20px;   /* 하단 안쪽 여백 20px */
	}

	/* 타이핑 텍스트 크기 축소 및 새 줄로 이동, 좌측 정렬 */
	.floorplan-description {
		flex-basis: 100%;       /* 전체 너비로 새 줄 이동 */
		font-size: 16px;        /* 폰트 크기 16px */
		text-align: left;       /* 좌측 정렬 */
	}

	/* 평면도 타이틀 크기 축소 */
	.floorplan-title {
		font-size: 28px;        /* 폰트 크기 28px */
	}

	/* 뱃지 크기 축소 */
	.floorplan-badge {
		font-size: 14px;        /* 폰트 크기 14px */
		padding: 6px 20px;      /* 상하 6px, 좌우 20px 여백 */
	}

	/* 콘텐츠 간격 축소 */
	.floorplan-content {
		gap: 40px;              /* 간격 40px */
	}

	/* 모바일에서 테이블 라운드 제거 */
	.floorplan-table {
		border-radius: 0;       /* 라운드 제거 */
	}

	/* 모바일에서 테이블을 2칸 레이아웃으로 변경 */
	.floorplan-table tbody tr {
		display: grid;          /* Grid 레이아웃 */
		grid-template-columns: 1fr 1fr; /* 2칸 레이아웃 */
		border-bottom: none;    /* 행 구분선 제거 */
	}

	.floorplan-table td {
		display: block;         /* 블록 요소로 변경 */
		width: 100%;            /* 전체 너비 */
		border-right: none;     /* 우측 테두리 제거 */
		border-bottom: 1px solid #e8e8e8; /* 하단 테두리 추가 */
		padding: 8px;           /* 상하좌우 8px 여백 (보기 좋게 복원) */
		font-size: 12px;        /* 폰트 크기 12px */
	}

	/* 마지막 셀도 하단 테두리 유지 */
	.floorplan-table td:last-child {
		border-bottom: 1px solid #e8e8e8;
	}

	/* 라벨 셀 너비 auto */
	.floorplan-table .table-label {
		width: auto;            /* 너비 auto */
		font-size: 12px;        /* 폰트 크기 12px */
	}

	/* 값 셀 너비 auto */
	.floorplan-table .table-value {
		width: auto;            /* 너비 auto */
		font-size: 14px;        /* 폰트 크기 14px */
	}

	/* 이미지를 1열로 변경 (세로 배치) */
	.floorplan-images {
		grid-template-columns: 1fr; /* 1열 레이아웃 */
		gap: 30px;              /* 간격 30px */
	}

	/* 이미지 아이템 높이 자동 조정 */
	.floorplan-image-item {
		height: auto;           /* 높이 자동 (고정 높이 제거) */
	}

	/* 이미지 타이틀 크기 축소 */
	.floorplan-image-title {
		font-size: 16px;        /* 폰트 크기 16px */
		padding: 12px;          /* 여백 12px (기존대로 복원) */
	}

	/* 이미지 래퍼 여백 제거 */
	.floorplan-image-wrapper {
		padding: 0;             /* 여백 0 (상하좌우 제거) */
		margin: 0;              /* 마진 0 (상하좌우 제거) */
	}

	/* 이미지 전체 너비 및 상하 여백 제거 */
	.floorplan-img {
		width: 100%;            /* 너비 100% (여백 없이 꽉 차게) */
		display: block;         /* 블록 요소로 변경 (이미지 하단 공백 제거) */
		margin: 0;              /* 마진 0 (상하좌우 제거) */
	}
}

/* ============================================
   12. 반응형 디자인 - 작은 모바일 (480px 이하)
   ============================================ */
@media (max-width: 480px) {
	/* 섹션 여백 축소 */
	.floorplan-section {
		padding: 25px 0;        /* 상하 여백 25px (대폭 축소) */
	}

	/* 컨테이너 좌우 여백 축소 */
	.floorplan-container {
		padding: 0 15px;        /* 좌우 여백 15px */
	}

	/* 섹션 헤더 하단 여백 대폭 축소 */
	.floorplan-section .section-header {
		margin-bottom: 15px;    /* 하단 여백 15px (대폭 축소) */
	}

	/* 섹션 타이틀 크기 축소 */
	.floorplan-section .section-title {
		font-size: 22px;        /* 폰트 크기 22px (보기 좋게 축소) */
		margin-bottom: 12px;    /* 하단 여백 12px */
	}

	/* 서브타이틀 크기 축소 */
	.floorplan-section .section-subtitle {
		font-size: 15px;        /* 폰트 크기 15px */
	}

	/* 평면도 타입 여백 대폭 축소 */
	.floorplan-type {
		padding: 8px 0;         /* 상하 여백 8px (상단 여백 대폭 축소) */
		margin-bottom: 25px;    /* 하단 여백 25px (타입 간 간격 축소) */
	}

	/* 헤더 간격 축소 및 중앙 정렬 */
	.floorplan-header {
		justify-content: center; /* 가로 중앙 정렬 */
		gap: 15px;              /* 간격 15px */
		margin-bottom: 25px;    /* 하단 여백 25px */
		padding-bottom: 15px;   /* 하단 안쪽 여백 15px */
	}

	/* 타이핑 텍스트 크기 축소 및 새 줄로 이동, 좌측 정렬 */
	.floorplan-description {
		flex-basis: 100%;       /* 전체 너비로 새 줄 이동 */
		font-size: 14px;        /* 폰트 크기 14px */
		text-align: left;       /* 좌측 정렬 */
	}

	/* 평면도 타이틀 크기 축소 */
	.floorplan-title {
		font-size: 24px;        /* 폰트 크기 24px */
	}

	/* 뱃지 크기 축소 */
	.floorplan-badge {
		font-size: 12px;        /* 폰트 크기 12px */
		padding: 5px 16px;      /* 상하 5px, 좌우 16px 여백 */
	}

	/* 콘텐츠 간격 축소 */
	.floorplan-content {
		gap: 30px;              /* 간격 30px */
	}

	/* 모바일에서 테이블 라운드 제거 */
	.floorplan-table {
		border-radius: 0;       /* 라운드 제거 */
	}

	/* 모바일에서 테이블을 2칸 레이아웃으로 변경 */
	.floorplan-table tbody tr {
		display: grid;          /* Grid 레이아웃 */
		grid-template-columns: 1fr 1fr; /* 2칸 레이아웃 */
		border-bottom: none;    /* 행 구분선 제거 */
	}

	.floorplan-table td {
		display: block;         /* 블록 요소로 변경 */
		width: 100%;            /* 전체 너비 */
		border-right: none;     /* 우측 테두리 제거 */
		border-bottom: 1px solid #e8e8e8; /* 하단 테두리 추가 */
		padding: 6px;           /* 상하좌우 6px 여백 (보기 좋게 복원) */
		font-size: 11px;        /* 폰트 크기 11px */
	}

	/* 마지막 셀도 하단 테두리 유지 */
	.floorplan-table td:last-child {
		border-bottom: 1px solid #e8e8e8;
	}

	/* 라벨 셀 너비 auto */
	.floorplan-table .table-label {
		width: auto;            /* 너비 auto */
		font-size: 11px;        /* 폰트 크기 11px */
	}

	/* 값 셀 너비 auto */
	.floorplan-table .table-value {
		width: auto;            /* 너비 auto */
		font-size: 13px;        /* 폰트 크기 13px */
	}

	/* 이미지 간격 축소 */
	.floorplan-images {
		gap: 25px;              /* 간격 25px */
	}

	/* 이미지 아이템 높이 자동 조정 */
	.floorplan-image-item {
		height: auto;           /* 높이 자동 (고정 높이 제거) */
	}

	/* 이미지 타이틀 크기 축소 */
	.floorplan-image-title {
		font-size: 14px;        /* 폰트 크기 14px */
		padding: 10px;          /* 여백 10px (기존대로 복원) */
	}

	/* 이미지 래퍼 여백 제거 */
	.floorplan-image-wrapper {
		padding: 0;             /* 여백 0 (상하좌우 제거) */
		margin: 0;              /* 마진 0 (상하좌우 제거) */
	}

	/* 이미지 전체 너비 및 상하 여백 제거 */
	.floorplan-img {
		width: 100%;            /* 너비 100% (여백 없이 꽉 차게) */
		display: block;         /* 블록 요소로 변경 (이미지 하단 공백 제거) */
		margin: 0;              /* 마진 0 (상하좌우 제거) */
	}
}

/* ============================================
   13. 인쇄 스타일
   ============================================ */
@media print {
	/* 섹션 여백 최소화 */
	.floorplan-section {
		padding: 20px 0;        /* 상하 여백 20px */
	}

	/* 페이지 나누기 방지 */
	.floorplan-type {
		page-break-inside: avoid; /* 타입 단위로 페이지 나누기 방지 */
		margin-bottom: 40px;    /* 하단 여백 40px */
		padding: 30px 0;        /* 상하 여백 30px */
	}

	/* 인쇄 시 호버 효과 제거 */
	.floorplan-image-item:hover {
		transform: none;        /* 변형 효과 제거 */
	}
}


/* ============================================
   14. VR보기 버튼 스타일 (원형)
   ============================================ */

/* VR보기 버튼 - 84㎡B ISO 이미지 우측 상단 */
.vr-view-btn {
	position: absolute !important; /* 이미지 위에 절대 위치 */
	top: 20px !important;        /* 상단에서 20px */
	right: 20px !important;      /* 우측에서 20px */
	width: 80px;                 /* 너비 80px (원형) */
	height: 80px;                /* 높이 80px (원형) */
	background: rgba(102, 126, 234, 0.9); /* 블루 반투명 배경 */
	color: white;                /* 흰색 텍스트 */
	border: 2px solid rgba(255, 255, 255, 0.8); /* 흰색 테두리 */
	border-radius: 50%;          /* 완전한 원형 */
	padding: 0;                  /* 패딩 제거 */
	font-size: 16px;             /* 폰트 크기 */
	font-weight: 600;            /* 굵은 글씨 */
	display: flex !important;    /* Flexbox 레이아웃 */
	flex-direction: column;      /* 세로 방향 배치 */
	align-items: center;         /* 수평 중앙 정렬 */
	justify-content: center;     /* 수직 중앙 정렬 */
	gap: 2px;                    /* 텍스트 간격 */
	cursor: pointer;             /* 마우스 커서 포인터 */
	transition: all 0.3s ease;   /* 부드러운 전환 효과 */
	z-index: 10;                 /* 이미지 위에 표시 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
	opacity: 1 !important;       /* 항상 보이도록 설정 */
	visibility: visible !important; /* 항상 표시되도록 설정 */
}

/* VR 텍스트 첫 줄 (VR) */
.vr-text-line1 {
	display: block;              /* 블록 요소로 표시 */
	font-size: 18px;             /* 큰 폰트 크기 */
	font-weight: 700;            /* 더 굵은 글씨 */
	line-height: 1;              /* 줄 높이 1 */
}

/* VR 텍스트 둘째 줄 (보기) */
.vr-text-line2 {
	display: block;              /* 블록 요소로 표시 */
	font-size: 14px;             /* 작은 폰트 크기 */
	font-weight: 600;            /* 굵은 글씨 */
	line-height: 1;              /* 줄 높이 1 */
}

/* VR보기 버튼 호버 효과 */
.vr-view-btn:hover {
	background: rgba(102, 126, 234, 1); /* 진한 블루 */
	border-color: rgba(255, 255, 255, 1); /* 진한 흰색 테두리 */
	transform: translateY(-3px) scale(1.08); /* 살짝 위로 이동 및 확대 */
	box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4); /* 더 진한 그림자 */
}

/* VR보기 버튼 활성화 (클릭) 효과 */
.vr-view-btn:active {
	transform: translateY(0) scale(1); /* 원래 크기로 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 약한 그림자 */
}

/* ============================================
   15. 반응형 디자인 (VR보기 버튼)
   ============================================ */

/* 태블릿 (768px ~ 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.vr-view-btn {
		width: 70px;             /* 너비 축소 */
		height: 70px;            /* 높이 축소 */
		top: 15px !important;    /* 상단 위치 조정 */
		right: 15px !important;  /* 우측 위치 조정 */
	}
	
	.vr-text-line1 {
		font-size: 16px;         /* 폰트 크기 축소 */
	}
	
	.vr-text-line2 {
		font-size: 13px;         /* 폰트 크기 축소 */
	}
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
	.vr-view-btn {
		width: 60px;             /* 너비 축소 */
		height: 60px;            /* 높이 축소 */
		top: 12px !important;    /* 상단 위치 조정 */
		right: 12px !important;  /* 우측 위치 조정 */
		gap: 1px;                /* 간격 축소 */
	}
	
	.vr-text-line1 {
		font-size: 14px;         /* 폰트 크기 축소 */
	}
	
	.vr-text-line2 {
		font-size: 12px;         /* 폰트 크기 축소 */
	}
}

/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
	.vr-view-btn {
		width: 50px;             /* 너비 축소 */
		height: 50px;            /* 높이 축소 */
		top: 10px !important;    /* 상단 위치 조정 */
		right: 10px !important;  /* 우측 위치 조정 */
		gap: 0px;                /* 간격 최소화 */
	}
	
	.vr-text-line1 {
		font-size: 12px;         /* 폰트 크기 축소 */
	}
	
	.vr-text-line2 {
		font-size: 10px;         /* 폰트 크기 축소 */
	}
}