/* layout.css */
.text-background {
    background-color: #E9DAFF; // 연보라색
    padding: 5px;
}

h1 {
	text-align: center;
}

h2 {
	text-align: left; /* 좌측 정렬 */
	margin-left: 20px; /* 왼쪽 여백 추가 */
	color: #333;
}

ul {
	max-width: 800px;
	margin: 20px auto;
	text-align: left;
	padding-left: 20px;
	background: white;
	padding left: 0;
	margin-left: 0;
	border-left: 0px;
	background-color: #E9DAFF;    // 연보라색
}

li {
	font-size: 18px; /* 폰트 크기 증가 */
	margin-bottom: 10px;
	list-style: none; /* ✅ 머리글(•) 제거 */
	border-left: none; /* ✅ 파란 세로선 제거 */
}

/* ✅ 줄바꿈 시 들여쓰기 적용 */
ul li {
	margine: 10px;
	padding: 10px;
	list-style-position: outside; /* 기호를 텍스트 왼쪽에 배치 */
	padding-left: 20px; /* 첫 줄과 기호 간 간격 */
	text-indent: -10px; /* 첫 줄은 들여쓰기 없이 기호와 정렬 */
}

/* ✅ 전체 목록 테두리 적용 */
.toc {
	border: 2px solid #0073e6; /* 파란색 테두리 */
	padding: 15px; /* 내부 여백 */
	max-width: 500px; /* 최대 너비 설정 */
	margin: auto; /* 가운데 정렬 */
	background-color: #f9f9f9; /* 배경색 추가 */
	list-style-position: inside; /* 목록 번호가 테두리 내부로 들어오도록 설정 */
	counter-reset: list-counter; /* 목록 번호 초기화 */
}

.toc li {
	font-size: 18px; /* 기본 폰트 크기 */
	padding-left: 30px;
	margin-bottom: 10px;
	color: #0073e6; /* ✅ 글자 색상 설정 */
}

.toc li::before {
	content: counter(list-counter) "."; /* 숫자 출력 */
	position: absolute;
	left: 0;
	color: inherit; /* ✅ 글자 색상과 동일한 색상 적용 */
	font-weight: bold;
}

.toc li a {
	font-size: 20px;
	color: #0073e6;
	font-weight: bold;
	text-decoration: none;
}

.toc li a:hover {
	text-decoration: underline;
}

/* ✅ <ol> 리스트 전체에 배경색 적용 */
ol {
	background-color: #eef3ff;
	padding: 5px; /* 내부 여백 */
	max-width: 800px; /* 최대 너비 설정 */
	margin: auto; /* 가운데 정렬 */
	list-style-position: inside; /* 숫자를 텍스트 내부에 배치 */
}

/* ✅ 개별 <li> 항목에 배경색 적용 */
ol li {
	padding: 10px; /* 내부 여백 */
	margin: 5px 0; /* 위아래 여백 *
    list-style-position: inside; /* 숫자를 텍스트 내부에 배치 */
}

@media ( max-width : 768px) {
	.toc li {
		font-size: 16px;
	}
	.toc li a {
		font-size: 18px;
	}
}

h1 {
	text-align: center;
	color: #333;
	padding-bottom: 20px;
}

h2 {
	text-align: center;
	color: #333;
}

.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.header {
	position: fixed;
	background-color: #ffffff;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center; /* 메뉴 가운데 정렬 */
	padding: 20px 20px;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	z-index: 10;
	gap: 30px; /* 로고와 메뉴 사이 간격 */
	padding: 10px 20px; /* 내부 패딩은 조금만 */
}

/* 로고 스타일 */
.logo {
	display: flex;
	align-items: center;
}

.my-logo {
	letter-spacing: -6px;
	font-size: 2rem;
	line-height: 1; white-space; nowrap;
	font-family: "Josefin Sans", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}

/* 메뉴 스타일 */
.nav {
	display: flex;
}

#user-info {
	white-space: nowrap; /* 긴 아이디도 한 줄 유지 */
}

/* 메뉴 아이템 스타일 */
.nav a {
	text-decoration: none;
	color: black;
	font-size: 24px; // 메뉴 폰트 크기 font-weight : bold;
	transition: color 0.3s ease;
	cursor: pointer;
	padding: 10px 10px;
	//
	메뉴간
	간격
}

/* 마우스 오버 시 색상 변경 */
.nav a:hover {
	color: #0056b3;
}

/* body를 flexbox로 설정하여 footer를 main 바로 아래에 배치 */
body {
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 0; /* 상단 메뉴 높이만큼 전체 여백 추가 */
	font-family: Arial, sans-serif;
	font-size: 18px; /* 본문 폰트 크기 */
	background-color: #f9f9f9;
}

/* footer 스타일 */
.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	background-color: #f8f9fa;
	font-size: 14px;
	color: #333;
	border-top: 1px solid #ddd;
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: auto; /* ✅ footer를 항상 하단에 위치하도록 설정 */
}

/* 테이블 스타일 */
.footer-table {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 78px;
	border-collapse: collapse; /* 테두리 제거 */
}

/* 로고 셀 */
.footer-logo-cell {
	text-align: center;
	padding-right: 10px;
}

/* 로고 크기 */
.footer-logo {
	height: 65px;
	width: 65px;
}

/* 텍스트 셀 */
.footer-text-cell {
	white-space: nowrap; /* 텍스트 줄바꿈 방지 */
	text-align: left;
	line-height: 0.5; /* 줄 간격 */
	padding-left: 0px;
}

footer table {
	width: 50%;
	margin: 20px auto;
	border-collapse: collapse;
}

/* 테두리 투명 처리 */
footer th, footer td {
	border: 1px solid transparent; /* 테두리 투명 */
	padding: 10px;
	text-align: center;
}

/* 헤더 배경색 유지 */
footer th {
	background-color: #f4f4f4;
}

img {
	margin-top: 20px; /* 위쪽 여백 */
	margin-bottom: 20px; /* 아래쪽 여백 */
}

.content {
	flex-grow: 1;
	padding-bottom: 40px;
	background-color: #f9f9f9;
	padding-top: 30px;
	//
	메뉴와
	본문간
	간격
	조절
	margin-top
	:
	30px;
}

/* 공통 폼 컨테이너 클래스 */
.form-container {
	width: 100%;
	align-items: center;
	display: flex;
	flex-direction: column;
	width: 100% align-items: center; /* 내부 요소 가로 중앙 정렬 */
	justify-content: center; /* 내부 요소 세로 중앙 정렬 */
	max-width: 500px; /* 최대 너비 설정 */
	padding: 20px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin: 0 auto; /* 중앙 정렬 */
}

/* flexbox 적용 */
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* 화면 크기와 동일한 최소 높이 설정 */
}

.main-content {
	flex: 1; /* 본문이 늘어나면 자동으로 확장되도록 설정 */
}

/* 로그인 폼 */
.login-container {
	max-width: 400px; /* 원하는 최대 너비로 조정 */
	margin: 50px auto; /* 수평 중앙 정렬 */
	padding: 10px; /* 내부 여백 조정 */
	background: #fff; /* 배경색 설정 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}

.login-container input[type="text"], .login-container input[type="password"], .login-container input[type="email"],
	.signup-container input[type="text"], .signup-container input[type="password"], .signup-container input[type="email"],
	.profile-container input[type="text"], .profile-container input[type="password"], .profile-container input[type="email"]
	{
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

/* 메인 제출 버튼에만 스타일 적용 */
.login-container>form>button[type="submit"], .signup-container>form>button[type="submit"], .profile-container>form>button[type="submit"]
	{
	margin: 0 auto; /* 가로 중앙 정렬 */
	width: 100%; /* 버튼을 컨테이너 너비로 설정 */
	padding: 10px;
	background-color: #28a745; /* 원하는 색상으로 변경 */
	color: #fff;
	border: none;
	font-size: 16px;
	cursor: pointer;
}

.login-container>form>button[type="submit"]:hover, .signup-container>form>button[type="submit"]:hover,
	.profile-container>form>button[type="submit"]:hover {
	background-color: green; /* 호버 시 색상 변경 */
}

/* 버튼 그룹에 Flexbox 적용 */
.login-container .button-group, .signup-container .button-group, .profile-container .button-group {
	display: flex;
	justify-content: center; /* 가로 중앙 정렬 */
	gap: 10px; /* 버튼 간격 추가 */
	width: 100%;
	margin-top: 15px;
}

/* 버튼 그룹 내 버튼 스타일 재정의 */
.login-container .button-group button, .signup-container .button-group button, .profile-container .button-group button
	{
	width: auto; /* Override width:40% */
	margin: 0; /* Override margin:0 auto */
	padding: 10px 20px; /* 버튼 내부 여백 */
	background-color: #28a745; /* 초록색 */
	color: #fff; /* 텍스트 색상 */
	border: none;
	border-radius: 5px;
	font-size: 14px;
	cursor: pointer;
}

/* 취소 버튼의 별도 스타일 */
.login-container .button-group button.cancel-button, .signup-container .button-group button.cancel-button,
	.profile-container .button-group button.cancel-button {
	background-color: #ffc107; /* 노란색 */
	color: #000; /* 텍스트 색상 */
}

/* 버튼 호버 효과 */
.login-container .button-group button:hover, .signup-container .button-group button:hover, .profile-container .button-group button:hover
	{
	opacity: 0.9;
}

/* 링크 스타일 */
.login-container .links, .signup-container .links, .profile-container .links {
	text-align: center;
	margin-top: 10px;
}

.login-container .links a, .signup-container .links a, .profile-container .links a {
	color: #007bff;
	text-decoration: none;
	margin: 0 5px;
	cursor: pointer;
}

.login-container .links a:hover, .signup-container .links a:hover, .profile-container .links a:hover {
	text-decoration: underline;
}

/* 메시지 스타일 */
.error-message, .success-message {
	font-size: 14px;
	text-align: center;
	margin-bottom: 10px;
}

.error-message {
	color: red; /* 오류 메시지는 빨간색으로 수정 */
}

.success-message {
	color: green;
}

/* 공통 버튼 스타일 */
.button {
	flex: 1;
	padding: 10px 20px;
	border: none;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.submit-button {
	background-color: #28a745;
	color: #fff;
}

.submit-button:hover {
	background-color: #218838;
}

.cancel-button {
	background-color: #ffc107;
	color: #fff;
}

.cancel-button:hover {
	background-color: #e0a800;
}