/* 본인의 디자인 감각을 최대한 발휘해주세요! */
@font-face {
	font-family: 'SejonghospitalBold';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/SejonghospitalBold.woff2')
		format('woff2');
}
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: SejonghospitalBold, sans-serif;
}

html {
	width: 100%;
	height: 95%;
	margin: 0;
	padding: 0;
	font-family: SejonghospitalBold, sans-serif;
}

#app {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: space-around;
	width: 80%;
	height: 98%;

	margin: 30px auto;

	padding: 20px auto;
	overflow-y: auto;
}

.calendar-section,
.todo-section,
.add-item {
	width: 100%; /* 컨테이너 내부 너비 */
	box-sizing: border-box; /* 패딩과 보더가 너비에 포함되도록 설정 */
}

.todo-section {
	margin-bottom: 20px 10px;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
}

input[type='text'],
input[type='date'],
button {
	font-family: SejonghospitalBold, sans-serif;
	padding: 8px;
	margin: 5px 0;
	border-radius: 5px;
	border: 1px solid #ccc;
}

button {
	background-color: #007bff;
	color: white;
	cursor: pointer;
}

button:hover {
	background-color: #0056b3;
}

.todo-section h3 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: space-around;
	font-size: 13px;
}
.todo-item {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-content: space-around;
	font-size: 10px;
}

#todoSections {
	max-height: 98vh;
	overflow-y: auto;
}