@font-face {
	font-family: 'PTBandocheB';
	/* src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408@1.0/PTBandocheB.woff2') format('woff2'); */
	src: url('./fonts/PTBandocheB.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: Arial, sans-serif;
	background-color: #000;
	overflow: hidden;
	font-family: PTBandocheB;
}
.slide {
	position: absolute;
	width: 100%;
	height: 100%;
	background-position: center; /* 중앙 정렬 */
	background-size: cover; /* 전체 화면을 덮도록 설정 */
	opacity: 0; /* 기본 투명도 */
	visibility: hidden; /* 기본으로 보이지 않음 */
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* 페이드 효과 */
}
.active {
	opacity: 1; /* 현재 슬라이드 보이게 설정 */
	visibility: visible; /* 현재 슬라이드 보이게 설정 */
}

.title-bar {
	position: absolute;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: rgba(0, 0, 0, 0.3); /* 투명도를 높임 (0.3) */
	color: white; /* 텍스트 색상 */
	padding: 10px 20px;
	z-index: 10; /* 다른 요소보다 위에 표시 */
}
.title-bar h1 {
	margin: 0; /* 마진 제거 */
	padding: 0; /* 패딩 제거 */
}
.title-bar h1 a {
	color: white;
	text-decoration: none;
}
.title-bar h1 a:hover {
	text-decoration: none;
}
.search-container {
	display: flex; /* 플렉스 박스 설정 */
	align-items: center; /* 수직 중앙 정렬 */
	margin-right: 2.5rem; /* 오른쪽 여백 추가 */
}
.search {
	margin-left: auto;
	padding-right: 2rem; /* 오른쪽 패딩 추가 */
	height: 30px; /* 높이를 줄임 */
	font-size: 14px; /* 글자 크기 설정 */
	padding: 5px; /* 내부 여백 추가 */
	border: 1px solid #ccc; /* 테두리 추가 */
	border-radius: 5px; /* 모서리 둥글게 */
	outline: none; /* 포커스 시 테두리 제거 */
	width: 200px; /* 너비 설정 */
}
.search-icon {
	cursor: pointer; /* 마우스 커서 포인터로 변경 */
	font-size: 16px; /* 아이콘 크기 설정 */
	margin-left: -2rem; /* 아이콘 왼쪽 여백 조정 */
	position: relative; /* 아이콘 위치 조정 */
	right: 0; /* 아이콘을 오른쪽으로 이동 */
}
.search-results {
	position: absolute;
	top: 60px; /* 타이틀 바 아래 위치 */
	right: 20px; /* 오른쪽 여백 */
	background-color: white; /* 배경색 설정 */
	border: 1px solid #ccc; /* 테두리 추가 */
	border-radius: 5px; /* 모서리 둥글게 */
	max-height: 150px; /* 최대 높이 설정 */
	overflow-y: auto; /* 스크롤 가능 */
	z-index: 10; /* 타이틀 바보다 위에 표시 */
	width: 200px; /* input.search와 너비를 같게 설정 */
}
.search-results div {
	padding: 10px; /* 내부 여백 */
	cursor: pointer; /* 마우스 커서 포인터로 변경 */
}
.search-results div:hover {
	background-color: #f0f0f0; /* 호버 시 배경색 변경 */
}
.slide-content {
	position: absolute;
	top: 50%; /* 수직 중앙 정렬 */
	left: 50%; /* 수평 중앙 정렬 */
	transform: translate(-50%, -50%); /* 중앙 정렬을 위한 변환 */
	color: white; /* 텍스트 색상 흰색 */
	text-align: center; /* 텍스트 중앙 정렬 */
	padding: 2rem 3rem;
	backdrop-filter: blur(10px); /* 불투명 유리 효과 */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* 그림자 효과 추가 */
	border-radius: 15px; /* 모서리 둥글게 */
	width: 60%;
	min-width: 350px;
	font-size: 1.2rem; line-height: 1.6
}
.slide-content .poem-writer {text-align: right;}
.slide-content p {text-align: left;}
.poem-title a {
	color: white; /* 링크 색상을 흰색으로 설정 */
	text-decoration: none; /* 밑줄 제거 */
}
.poem-title a:hover {
	text-decoration: underline; /* 호버 시 밑줄 추가 (선택 사항) */
}