:root {
	--primary-black: #1d1d1f;
	--secondary-black: #333336;
	--primary-red: #fa233b;
	--hover-red: #dc1f34;
	--pure-white: #ffffff;
	--off-white: #f5f5f7;
	--shadow-color: rgba(0, 0, 0, 0.1);
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	line-height: 1.6;
	background-color: var(--off-white);
	opacity: 1;
	transition: opacity 0.7s ease-in-out;
	visibility: visible;
}

body.fade-out {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease-in-out, visibility 0s 0.7s;
}

.facility-hero {
	background-color: rgba(0, 0, 0, 0.6);
	color: var(--pure-white);
	text-align: center;
	padding: 3px 20px;
	margin: 30px auto 30px auto;
	/* 상 우 하 좌 마진 설정 */
	max-width: 1160px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	border-radius: 20px;
	/* 모서리를 둥글게 만듭니다 */
}

.facility-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../images/logo.png');
	background-size: 50%;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.3;
	z-index: -1;
}

.facility-hero h1 {
	font-size: 48px;
	margin-bottom: 20px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.facility-hero p {
	font-size: 20px;
	max-width: 600px;
	margin: 0 auto 30px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 컨테이너 레이아웃 */
.container {
	display: flex;
	/* 사이드바와 콘텐츠를 가로로 배치 */
	max-width: 1200px;
	margin: 0 auto;
	overflow: visible;
	/* Sticky가 정상적으로 작동하도록 설정 */
}

/* 사이드바 고정 스타일 */
.sidebar {
	top: 30px;
	/* 헤더 아래에서 고정 시작 */
	width: auto;
	/* 너비를 콘텐츠 크기에 맞게 설정 */
	height: auto;
	/* 높이를 콘텐츠 크기에 맞게 설정 */
	background-color: transparent;
	/* 배경색 제거 */
	padding-left: 0;
	/* 좌측 여백 제거 */
	margin: 0;
	/* 외부 여백 제거 */
	overflow: visible;
	/* 스크롤 숨김 */
}

/* 콘텐츠 영역 스타일 */
.content {
	width: 85%;
	/* 사이드바를 제외한 나머지 공간 차지 */
	padding: 0px 30px 0px 40px;
	min-height: 500px;
}

/* 탭 리스트 스타일 */
.tabs {
	list-style-type: none;
	/* 기본 리스트 스타일 제거 */
	padding: 0;
	margin: 0;
	position: sticky;
	/* 스크롤 시 고정 */
	top: 30px;
	/* 뷰포트 상단에서 30px 아래에 고정 */
	z-index: 10;
	/* 다른 요소보다 위에 표시 */
	position: sticky;
}

/* 탭 아이템 스타일 */
.tab-item {
	display: block;
	/* 블록 요소로 설정하여 세로로 나열 */
	cursor: pointer;
	font-family: 'Arial Black', sans-serif;
	font-weight: 100;
	font-size: 14px;
	color: var(--primary-black);
	/* 글자 색상 설정 */
	text-decoration: none;
	/* 밑줄 제거 */
	padding: 10px 0;
	/* 위아래 간격 추가 */
}

.tab-item.active {
	color: var(--primary-red);
	/* 활성화된 탭의 색상 변경 */
}

/* 탭 아이템 호버 효과 */
.tab-item:hover {
	color: var(--hover-red);
	transition: color 0.3s ease-in-out;
}

/* 갤러리 이미지 스타일 */
.gallery-item {
	margin-bottom: 20px;
	/* 갤러리 간격을 조금 줄임 */
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 3px 6px rgba(0, 0, 0, var(--shadow-color));
}

.gallery-item img {
	width: 100%;
	height: auto;
	display: block;
	scroll-behavior: smooth
}

.img-caption {
	text-align: center;
	padding: 8px;
	/* 캡션 패딩을 줄임 */
	background-color: #f8f8f8;
	font-size: 13px;
	/* 글씨 크기를 약간 줄임 */
	color: #666;
}

/* 탭 콘텐츠 숨김 */
.tab-content {
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}

.tab-content.active {
	display: block;
	opacity: 1;
	transition-delay: 0s;
}

/* 스마트폰 환경 (화면 너비 576px 이하) */
@media screen and (max-width: 576px) {

	/* Hero 섹션 글자 크기와 크기 축소 */
	.facility-hero h1 {
		font-size: 28px;
		/* 제목 크기 축소 */
	}

	.facility-hero p {
		font-size: 17px;
		/* 본문 텍스트 크기 축소 */
	}

	.facility-hero {
		width: 350px;
		padding: 0px 10px 10px 10px;
		/* 전체적인 패딩 축소 */
		min-height: 180px;
		/* 최소 높이 축소 */
		max-height: 175px;
		/* 최대 높이 */
	}

	.tab-item {
		padding: 0px 0px 10px 5px;
	}
}

/* 태블릿 */
@media (min-width: 577px) and (max-width: 768px) {}

/* 데스크탑 */
@media (min-width: 769px) {}