body {
	background-color: #f5f7fb;
}

#StudyPlan {
	max-width: 520px;
	margin: 50px auto;
}

#StudyPlan header {
	position: relative;
	text-align: center;
	margin-bottom: 25px;
}


/* 등록 */
.SP-Create {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 15px;
	padding: 25px;
}

.SP-Create .inputBox {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.SP-Create .inputBox input,
.SP-Create .inputBox textarea {
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.SP-Create #addBtn {
	padding: 10px;
	border-radius: 8px;
	background-color: #111;
	color: #fff;
}

.SP-Create #addBtn:active {
	transform: translateY(1px);
}


/* 조회 */
.SP-Read {
	margin-top: 50px;
}

.SP-Read .SPCount {
	padding: 10px 5px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.SP-Read .SPCount h2 {
	flex: 1;
	font-weight: 500;
	font-size: 1.35em;
}

.SP-Read .SPCount p {
	font-size: 14px;
	color: #333;
}

.SP-Read .SPCount p+p {
	padding-left: 10px;
}

.SP-Read ul#SPList {
	padding: 20px 25px;
	border-radius: 8px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.SP-Read ul#SPList li {
	padding: 0 5px;
}

.SP-Read ul#SPList li:not(:last-child) {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #d0d0d0;
}

/* JavaScript로 등록된 목록 */
.SP-Read ul#SPList li {
	display: flex;
	align-items: center;
}
.SP-Read ul#SPList li input[type="checkbox"] {}
.SP-Read ul#SPList li .info {
	flex: 1;
	padding: 0 15px;
}
.SP-Read ul#SPList li .info {}
.SP-Read ul#SPList li .info .dday{
	font-size: 1.4em;
	font-weight: 600;
	margin-bottom: 5px;
}
.SP-Read ul#SPList li .info .subject{
	font-size: 1.1em;
}
.SP-Read ul#SPList li .info .content{
	font-size: 0.9em;
	opacity: .75;
}
.SP-Read ul#SPList li button.delBtn {
	padding: 10px;
	border-radius: 8px;
	background-color: #111;
	color: #fff;
}

/* 정렬 버튼 */
.range{
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 0 5px 5px 5px;
	opacity: .6;
}
#dateSortBtn {
   display: none; /* 기본: 계획 1개라도 있어야 보이게 */
}