@charset "utf-8";
/* =====================================================
   시설 보기 — page-facility (Claude Design v2)
   ===================================================== */

.page-facility { display:block; overflow:hidden; }

/* 벤토 그리드 (3×3 with 2 large tiles) */
.page-facility__grid {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-auto-rows:270px;
	gap:20px;
}
.page-facility__item {
	position:relative; margin:0;
	border-radius:32px; overflow:hidden;
	display:flex; align-items:flex-end;
	padding:22px 24px;
	background-color:var(--bg3);
	background-size:cover; background-position:center;
	box-shadow:var(--sh-card);
	transition:transform .3s ease, box-shadow .3s ease;
}
.page-facility__item:hover {
	transform:translateY(-4px);
	box-shadow:0 20px 44px oklch(0.30 0.05 148 / 0.14);
}
.page-facility__item::before {
	content:""; position:absolute; inset:0;
	background:linear-gradient(180deg,
		oklch(0.30 0.05 148 / 0) 40%,
		oklch(0.30 0.05 148 / 0.55) 100%);
	pointer-events:none;
}
.page-facility__item img {width:100%; height:100%; object-fit:cover; position:absolute; left:0; top:0;}
.page-facility__item--lg { grid-column:span 2; grid-row:span 2; }
.page-facility__item--lg .page-facility__label { font-size:var(--fs17); }

.page-facility__label {
	position:relative; z-index:1;
	font-family:var(--f_display);
	font-size:var(--fs15);
	font-weight:700;
	letter-spacing:-0.01em;
	color:var(--tx-invert);
	background:oklch(0.99 0.008 120 / 0.15);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	padding:9px 16px;
	border-radius:999px;
}

/* 안내 카드 */
.page-facility__note {
	padding:60px 0 120px;
	background:var(--bg1);
}
.page-facility__note-card {
	background:var(--bg3);
	border-radius:40px;
	padding:56px;
	display:flex; flex-direction:column; gap:14px;
	align-items:flex-start;
	box-shadow:var(--sh-card);
}
.page-facility__note-card h3 {
	margin:0;
	font-family:var(--f_display);
	font-weight:700;
	font-size:var(--fs32);
	color:oklch(0.31 0.05 148);
	line-height:1.3;
	letter-spacing:-0.02em;
}
.page-facility__note-card p {
	margin:0 0 12px;
	font-size:var(--fs15);
	line-height:1.85;
	color:var(--tx-body);
	max-width:560px;
}

/* ==================== 반응형 ==================== */
@media screen and (max-width:1199px) {
	.page-facility__grid { grid-auto-rows:180px; }
	.page-facility__note { padding:40px 0 80px; }
	.page-facility__note-card { padding:36px; border-radius:28px; }
	.page-facility__note-card h3 { font-size:var(--fs26); }
}
@media screen and (max-width:767px) {
	.page-facility__grid {
		grid-template-columns:1fr 1fr;
		grid-auto-rows:150px;
		gap:12px;
	}
	.page-facility__item { border-radius:22px; padding:16px 18px; }
	.page-facility__item--lg { grid-column:span 2; grid-row:span 1; }
	.page-facility__label { font-size:var(--fs13); padding:7px 12px; }
	.page-facility__note-card { padding:26px; border-radius:22px; }
	.page-facility__note-card h3 { font-size:var(--fs22); }
}

/* ============================================================
   갤러리 라이트박스 (JS로 body에 주입, Swiper 기반)
   ============================================================ */
.page-facility__item { cursor:zoom-in; }

.fl-lightbox {
	position:fixed; inset:0;
	z-index:9999;
	background:oklch(0.14 0.02 148 / 0.88);
	-webkit-backdrop-filter:blur(12px);
	backdrop-filter:blur(12px);
	display:none;
	align-items:center; justify-content:center;
	padding:40px;
	opacity:0;
	transition:opacity .25s ease;
}
.fl-lightbox.is-open { display:flex; opacity:1; }

.fl-lightbox .fl-swiper {
	width:min(1200px, 100%);
	height:min(82vh, 800px);
}
.fl-lightbox .swiper-wrapper { height:100%; }
.fl-slide {
	display:flex; align-items:center; justify-content:center;
	height:100%;
}
.fl-slide__figure {
	position:relative; margin:0;
	width:100%; height:100%;
	border-radius:32px; overflow:hidden;
	display:flex; align-items:flex-end;
	padding:40px;
	background:oklch(0.15 0.02 148);
	background-size:cover; background-position:center;
	box-shadow:0 30px 80px oklch(0 0 0 / 0.5);
}
.fl-slide__figure img {
	position:absolute; inset:0;
	width:100%; height:100%; object-fit:contain;
}
.fl-slide__caption {
	position:relative; z-index:1;
	font-family:var(--f_display);
	font-size:var(--fs20);
	font-weight:700;
	letter-spacing:-0.01em;
	color:var(--tx-invert);
	background:oklch(0.99 0.008 120 / 0.18);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	padding:12px 22px;
	border-radius:999px;
}

/* placeholder 시설별 톤 (그리드 타일과 매칭) */
.fl-tint--counsel  { background-image:linear-gradient(135deg, oklch(0.88 0.06 140), oklch(0.72 0.09 148)); }
.fl-tint--speech   { background-image:linear-gradient(135deg, oklch(0.93 0.07 100), oklch(0.78 0.10 105)); }
.fl-tint--play     { background-image:linear-gradient(135deg, oklch(0.93 0.06 5),   oklch(0.78 0.11 15)); }
.fl-tint--sensory  { background-image:linear-gradient(135deg, oklch(0.92 0.05 220), oklch(0.76 0.10 225)); }
.fl-tint--cognitive{ background-image:linear-gradient(135deg, oklch(0.94 0.05 60),  oklch(0.80 0.10 55)); }
.fl-tint--lounge   { background-image:linear-gradient(135deg, oklch(0.90 0.05 130), oklch(0.60 0.09 148)); }

/* 컨트롤 (닫기 · 이전/다음 · 카운터) */
.fl-close, .fl-nav {
	position:absolute;
	background:oklch(0.99 0.01 120 / 0.15);
	color:var(--tx-invert);
	border:none; cursor:pointer;
	border-radius:50%;
	display:grid; place-items:center;
	transition:background .2s ease, transform .2s ease;
	z-index:10;
}
.fl-close:hover, .fl-nav:hover { background:oklch(0.99 0.01 120 / 0.30); }
.fl-close { top:24px; right:24px; width:48px; height:48px; }
.fl-nav {
	top:50%; transform:translateY(-50%);
	width:56px; height:56px;
}
.fl-nav:hover { transform:translateY(-50%) scale(1.05); }
.fl-nav--prev { left:24px; }
.fl-nav--next { right:24px; }
.fl-nav.swiper-button-disabled { opacity:0.35; cursor:default; }
.fl-nav.swiper-button-disabled:hover { transform:translateY(-50%) scale(1); background:oklch(0.99 0.01 120 / 0.15); }

.fl-count {
	position:absolute; bottom:24px; left:50%;
	transform:translateX(-50%);
	font-family:var(--f_ui);
	font-size:var(--fs14);
	font-weight:600;
	color:var(--tx-invert);
	background:oklch(0.99 0.01 120 / 0.15);
	-webkit-backdrop-filter:blur(10px);
	backdrop-filter:blur(10px);
	padding:8px 18px;
	border-radius:999px;
	z-index:10;
}

@media screen and (max-width:1199px) {
	.fl-lightbox { padding:24px; }
	.fl-close { top:16px; right:16px; }
	.fl-nav--prev { left:12px; }
	.fl-nav--next { right:12px; }
}
@media screen and (max-width:767px) {
	.fl-lightbox { padding:12px; }
	.fl-lightbox .fl-swiper { height:78vh; }
	.fl-slide__figure { border-radius:20px; padding:22px; }
	.fl-slide__caption { font-size:var(--fs14); padding:8px 14px; }
	.fl-close { top:10px; right:10px; width:40px; height:40px; }
	.fl-nav { width:44px; height:44px; }
	.fl-nav--prev { left:6px; }
	.fl-nav--next { right:6px; }
	.fl-count { bottom:12px; font-size:var(--fs12); padding:6px 14px; }
}