@font-face {
	font-family: 'Nanum Gothic';
	font-weight: 400;
	src: url('../font/NanumGothic.eot');
	src: url('../font/NanumGothic.eot?#iefix') format('embedded-opentype'),
		url('../font/NanumGothic.woff') format('woff'),
		url('../font/NanumGothic.ttf') format('truetype');
	src: local(※), url('../font/NanumGothic.woff') format('woff');
}

@font-face {
	font-family: 'Nanum GothicEB';
	font-weight: 400;
	src: url('../font/NanumGothicExtraBold.eot');
	src: url('../font/NanumGothicExtraBold.eot?#iefix') format('embedded-opentype'),
		url('../font/NanumGothicExtraBold.woff') format('woff'),
		url('../font/NanumGothicExtraBold.ttf') format('truetype');
	src: local(※), url('../font/NanumGothicExtraBold.woff') format('woff');
}

body,
td,
div,
form,
textarea,
center,
pre,
blockquote,
select,
input,
table,
thead,
tbody,
tr,
td,
th,
span {
	font-size: 10pt;
	font-family: Nanum Gothic, Arial, 맑은 고딕, Gulim;
	color: #000000;
}

/* 페이지 전체 여백, 마진 조정 */
body {
	padding: 0px 0px 0px 0px;
	/* top, right, bottom, left */
	margin: 0px 0px 0px 0px;
}

/* 화면 전체를 감싸는 레이아웃 설정 */
.center-container {
	display: flex;
	/* Flexbox 활성화 */
	justify-content: center;
	/* 가로 중앙 정렬 */
	align-items: center;
	/* 세로 중앙 정렬 (핵심!) */
	min-height: 90vh;
	/* 화면 높이의 100%를 차지하게 설정 */
	background-color: #ffffffff;
	/* 배경색 (선택 사항) */
}

/* 전체 메뉴 레이아웃 설정 */
.menu-container {
	display: flex;
	flex-direction: column;
	/* 메뉴를 세로로 일렬 배치 */
	gap: 10px;
	/* ✨ 핵심: 각각의 메뉴 상자 사이의 간격을 10px로 띄웁니다. */
	width: 300px;
}

/* 사이트 타이틀 스타일 */
.title {
	background: linear-gradient(135deg, #007bff, #0056b3);
	/* 시선을 사로잡는 세련된 파란색 그라데이션 */
	color: #ffffff;
	/* 글자색은 깔끔한 흰색 */
	font-size: 25px;
	font-weight: 800;
	/* 글씨를 아주 굵게 설정하여 제목 느낌 강조 */
	text-align: center;
	/* 글자를 가운데 정렬 */
	padding: 16px;
	border-radius: 15px;
	/* 메뉴 카드와 동일한 둥근 모서리 */
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
	/* 메뉴 카드보다 살짝 더 짙은 그림자로 무게감 부여 */
	letter-spacing: 1px;
	/* 알파벳 사이의 간격을 살짝 넓혀서 고급스러운 느낌 추가 */
	margin-bottom: 5px;
	/* 타이틀과 첫 번째 메뉴 사이의 공간을 조금 더 여유롭게 확보 */
	font-family: 'Nanum Gothic', sans-serif;
	font-weight: bold;
	letter-spacing: -0.5px;
	/* 글짜 간격조절 */
	/* 타이틀은 클릭하는 요소가 아니므로 떠오르는 효과는 넣지 않습니다 */
	cursor: pointer;
	/* 검색 사이트 링크 오류 수정을위해 추가 */
}

/* 개별 메뉴 상자 (카드) 기본 스타일 */
.menu-item {
	border: 1px solid #e6e6e6ff;
	display: flex;
	/* 아이콘과 텍스트를 가로로 나란히 배치 */
	align-items: center;
	/* 세로 기준 중앙 정렬 */
	background-color: #fcfcfcff;
	border-radius: 15px;
	/* 둥근 사각형 모서리 */
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
	/* 평상시의 얕은 그림자 */
	padding: 12px 15px;
	/* 상자 안쪽 여백 */

	/* 애니메이션 설정: 이동, 그림자, 배경색 변화를 0.3초 동안 부드럽게 */
	transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
	cursor: pointer;
}

/* 🌟 개별 메뉴에 마우스를 올렸을 때(Hover)의 독립적인 떠오르는 효과 */
.menu-item:hover {
	transform: translateY(-6px);
	/* 선택된 상자만 개별적으로 위로 6px 떠오름 */
	box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.15);
	/* 그림자가 깊고 넓어짐 */
	background-color: #f1f8ff;
	/* 마우스를 올린 상자의 배경색을 연한 파란색으로 변경 */
}

/* 왼쪽 이모지(아이콘) 스타일 */
.menu-icon {
	font-size: 26px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 아이콘을 정중앙에 배치 */
	margin-right: 25px;
	/* 텍스트와의 간격 */
	background-color: #f8f9fa;
	border-radius: 10px;
	/* 아이콘 배경도 둥글게 */
	transition: background-color 0.3s ease;
}

/* 메뉴에 마우스를 올렸을 때 아이콘 배경색도 함께 변경 */
.menu-item:hover .menu-icon {
	background-color: #e6f2ff;
}

/* 텍스트 영역 (제목 + 설명) 스타일 */
.menu-text {
	display: flex;
	flex-direction: column;
	/* 제목과 설명을 위아래로 배치 */
	gap: 4px;
	/* 제목과 설명 사이의 미세한 간격 */
}

/* 메뉴 제목 스타일 */
.menu-title {
	font-family: "Nanum GothicEB";
	display: flex;
	padding: 0px 0px 0px 0px;
	color: #333333;
	font-size: 16px;
}

/* 메뉴 설명 스타일 */
.menu-desc {
	display: flex;
	color: #777777;
	font-size: 13px;
}