@charset "UTF-8";

/* ============================================================
   층별안내 : 상단 슬라이드 + 원형 층선택 + 하단 표
   포인트 컬러: #6d86ec  (아래 --fc / --fc-rgb 만 바꾸면 전체 색 변경)
   ============================================================ */
.floor_viewer, .floor_circles, .floor_table, .floor_empty{
	--fc: #6d86ec;
	--fc-rgb: 109,134,236;
	--fc-dark: #133743;
}

/* ── ① 상단 이미지 슬라이드 ── */
.floor_viewer{
	position: relative;
	margin-bottom: 50px;
}
.floor_slider{
	display: none;
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: #f2f5f6;
}
.floor_slider.active{ display: block; }

.floor_slider .swiper-slide{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 8;      /* 와이드 배너 비율 */
	background: #e9eef0;
}
.floor_slider .swiper-slide img{
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.floor_slider .slide_empty{
	display: flex; align-items: center; justify-content: center;
	color: #9aa7ac; font-size: var(--fs20); letter-spacing: 1px;
}

/* 슬라이드 캡션 (층수 + 부제목 + 설명) */
.floor_caption{
	position: absolute; left: 0; bottom: 0; z-index: 5;
	width: 100%;
	padding: 46px 34px 26px;
	color: #fff;
	background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
}
.floor_caption_head{ display: flex; align-items: baseline; flex-wrap: wrap; }
.floor_caption strong{
	display: inline-block;
	font-size: var(--fs28); font-weight: 700;
	margin-right: 12px;
}
.floor_caption span{ font-size: var(--fs20); opacity: 0.95; }
.floor_caption_desc{
	margin-top: 8px;
	font-size: var(--fs14);
	line-height: 1.55;
	color: rgba(255,255,255,0.92);
	max-width: 1200px;
	display: -webkit-box;
	-webkit-line-clamp: 6;     /* 캡션 표시 줄 수 (전체 내용은 하단 표에) */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Swiper 화살표 (이미지 위 좌/우) — Swiper 버전 무관하게 CSS로 직접 그림 */
.floor_slider .swiper-button-next,
.floor_slider .swiper-button-prev{
	position: absolute;
	top: 50%;
	margin-top: -23px;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(var(--fc-rgb), 0.75);
	background-image: none;          /* v4 기본 SVG 화살표 제거(직접 그림) */
	border-radius: 50%;
	opacity: 1;                      /* 테마 기본 opacity:.3 무력화 */
	z-index: 10;
	cursor: pointer;
	transition: 0.2s all;
}
.floor_slider .swiper-button-next:hover,
.floor_slider .swiper-button-prev:hover{ background: var(--fc); opacity: 1; }

/* 화살표 모양: 흰색 테두리 셰브론 */
.floor_slider .swiper-button-next:after,
.floor_slider .swiper-button-prev:after{
	content: '';
	display: block;
	width: 11px; height: 11px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	font-size: 0;                    /* 폰트 글리프 억제 */
}
.floor_slider .swiper-button-prev{ left: 18px; }
.floor_slider .swiper-button-next{ right: 18px; }
.floor_slider .swiper-button-prev:after{ transform: rotate(-135deg); margin-left: 4px; }
.floor_slider .swiper-button-next:after{ transform: rotate(45deg);  margin-right: 4px; }

/* 테마 v4의 :before(fontello) 흔적 제거 */
.floor_slider .swiper-button-next:before,
.floor_slider .swiper-button-prev:before{ display: none; content: none; }

/* Swiper 페이지네이션 */
.floor_slider .swiper-pagination{ bottom: 14px; }
.floor_slider .swiper-pagination-bullet{ background: #fff; opacity: 0.6; width: 9px; height: 9px; }
.floor_slider .swiper-pagination-bullet-active{ background: var(--fc); opacity: 1; }

/* ── ② 원형 층 선택 (PC 한 줄) ── */
.floor_circles{
	display: flex;
	flex-wrap: nowrap;             /* 한 줄 고정 */
	justify-content: center;
	gap: 0 16px;
	margin-bottom: 60px;
	padding: 16px 2px 14px;        /* 위/아래 여백 → hover 시 원 위쪽 잘림 방지 */
	overflow-x: auto;              /* 층이 많으면 가로 스크롤 */
	scrollbar-width: thin;
}
.floor_circles::-webkit-scrollbar{ height: 6px; }
.floor_circles::-webkit-scrollbar-thumb{ background: rgba(var(--fc-rgb),0.4); border-radius: 3px; }
.floor_circle{
	flex: 0 0 auto;
	background: none; border: 0; cursor: pointer;
	display: flex; flex-direction: column; align-items: center;
	width: 82px;
}
.fc_thumb{
	width: 74px; height: 74px;
	border-radius: 50%;
	background-color: #eef1fb;
	background-size: cover; background-position: center;
	display: flex; align-items: center; justify-content: center;
	color: var(--fc); font-size: var(--fs20); font-weight: 700;
	border: 3px solid transparent;
	transition: 0.25s all;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.fc_label{
	margin-top: 9px;
	font-size: var(--fs14); font-weight: 500; color: #555;
	white-space: nowrap;
	transition: 0.25s all;
}
.floor_circle:hover .fc_thumb{ transform: translateY(-4px); border-color: rgba(var(--fc-rgb), 0.45); }
.floor_circle.on .fc_thumb{
	border-color: var(--fc);
	box-shadow: 0 6px 16px rgba(var(--fc-rgb), 0.35);
}
.floor_circle.on .fc_label{ color: var(--fc); font-weight: 700; }

/* ── ③ 하단 층별 안내 표 (글자 축소) ── */
.floor_table table{
	width: 100%;
	border-top: 2px solid var(--fc);
	border-collapse: collapse;
}
.floor_table th{
	background: var(--fc);
	color: #fff;
	font-size: var(--fs14); font-weight: 600;
	padding: 13px 10px;
	text-align: center;
}
.floor_table td{
	border-bottom: 1px solid #e6e9ea;
	padding: 12px 16px;
	vertical-align: middle;
}
.floor_table .ft_floor{
	text-align: center; font-weight: 700; color: var(--fc-dark);
	background: #f6f8fe; width: 18%;
}
.floor_table .ft_desc{ text-align: left; color: #555; line-height: 1.55; }
.floor_table tbody tr{ cursor: pointer; transition: 0.2s all; }
.floor_table tbody tr:hover{ background: rgba(var(--fc-rgb),0.05); }
.floor_table tbody tr.active .ft_floor{ background: var(--fc); color: #fff; }
.floor_table tbody tr.active{ background: rgba(var(--fc-rgb),0.07); }

.floor_empty{
	text-align: center; padding: 80px 0;
	color: #888; font-size: var(--fs20);
}

/* ── 반응형 ── */
@media all and (max-width: 1024px){
	.floor_slider .swiper-slide{ aspect-ratio: 16 / 9; }
	.floor_caption{ padding: 34px 22px 20px; }
}
@media all and (max-width: 768px){
	.floor_circles{ justify-content: flex-start; gap: 0 12px; }
	.floor_circle{ width: 68px; }
	.fc_thumb{ width: 60px; height: 60px; font-size: var(--fs18); border-width: 2px; }
	.fc_label{ font-size: var(--fs14); margin-top: 6px; }
	.floor_slider{ border-radius: 12px; }
	.floor_slider .swiper-slide{ aspect-ratio: 4 / 3; }
	.floor_slider .swiper-button-next,
	.floor_slider .swiper-button-prev{ width: 38px; height: 38px; margin-top:-19px; }
	.floor_slider .swiper-button-prev{ left: 10px; }
	.floor_slider .swiper-button-next{ right: 10px; }
	.floor_slider .swiper-button-next:after,
	.floor_slider .swiper-button-prev:after{ width: 9px; height: 9px; border-width: 2px; }
	.floor_table td{ padding: 11px 10px; }
}
@media all and (max-width: 480px){
	.floor_circle{ width: 60px; }
	.fc_thumb{ width: 54px; height: 54px; }
}