/* 체크리스트 · 할 일 목록: 에디터 본문(content_css)과 글 보기(view.html)에서 함께 쓴다 */

/* 체크리스트 */
ul.ed-checklist{
	margin-left:0;
	padding-left:0;
	list-style:none !important;
}

ul.ed-checklist > li{
	position:relative;
	margin-left:0;
	padding-left:1.75em;
	list-style:none !important;
}

ul.ed-checklist > li::before{
	content:"";
	position:absolute;
	left:0;
	top:.22em;
	top:calc(.5lh - .58em);
	box-sizing:border-box;
	width:1.16em;
	height:1.16em;
	border:.1em solid #c3cbd6;
	border-radius:.34em;
	background:transparent center / 72% no-repeat;
	transition:background-color .15s ease, border-color .15s ease;
}

ul.ed-checklist > li.ed-checked::before{
	border-color:#3b82f6;
	background-color:#3b82f6;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.4 8.4l3 3 6.2-6.6'/%3E%3C/svg%3E");
}

ul.ed-checklist > li.ed-checked{
	color:#8b95a3;
	text-decoration:line-through;
	text-decoration-color:rgba(139, 149, 163, .7);
}

/* 할 일 목록 */
.ed-todo{
	position:relative;
	margin:1em 0;
	padding:16px 18px 8px;
	border:1px solid rgba(100, 116, 139, .25);
	border-radius:14px;
	background:rgba(59, 130, 246, .035);
}

.ed-todo .ed-todo-title{
	margin:0 0 8px !important;
	padding-right:140px;
	font-size:1.05em;
	font-weight:700;
}

.ed-todo .ed-todo-progress{
	position:absolute;
	top:16px;
	right:18px;
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	color:#64748b;
	font-size:.8em;
	line-height:1.6;
	white-space:nowrap;
	user-select:none;
}

.ed-todo .ed-todo-progress b{
	color:#3b82f6;
}

.ed-todo .ed-todo-bar{
	display:inline-block;
	width:64px;
	height:6px;
	border-radius:3px;
	background:rgba(100, 116, 139, .2);
	overflow:hidden;
}

.ed-todo .ed-todo-bar > span{
	display:block;
	height:100%;
	border-radius:3px;
	background:#3b82f6;
	transition:width .3s ease;
}

.ed-todo ul.ed-checklist{
	margin:0 !important;
}

.ed-todo ul.ed-checklist > li{
	margin:0 !important;
	padding-top:7px;
	padding-bottom:7px;
	border-top:1px solid rgba(100, 116, 139, .15);
}

/* 할 일 항목은 동그란 체크 */
.ed-todo ul.ed-checklist > li::before{
	top:calc(7px + .22em);
	top:calc(7px + .5lh - .58em);
	border-radius:50%;
}

.ed-todo.ed-todo-done{
	border-color:rgba(34, 197, 94, .45);
	background:rgba(34, 197, 94, .04);
}

.ed-todo.ed-todo-done .ed-todo-progress b{
	color:#16a34a;
}

.ed-todo.ed-todo-done .ed-todo-bar > span,
.ed-todo.ed-todo-done ul.ed-checklist > li.ed-checked::before{
	border-color:#22c55e;
	background-color:#22c55e;
}

@media (max-width:480px){
	.ed-todo .ed-todo-title{
		padding-right:0;
	}

	.ed-todo .ed-todo-progress{
		position:static;
		margin:0 0 6px;
	}
}

/* 에디터 안에서만: 체크 칸을 누를 수 있게 보이고, 진행률은 고칠 수 없는 칸으로 둔다 */
.mce-content-body ul.ed-checklist > li::before{
	cursor:pointer;
}

.mce-content-body ul.ed-checklist > li:hover::before{
	border-color:#3b82f6;
}

.mce-content-body ul.ed-checklist > li.ed-checked::before{
	animation:ed-check-pop .2s ease;
}

.mce-content-body .ed-todo-progress[data-mce-selected]{
	outline:none !important;
}

@keyframes ed-check-pop{
	0%{ transform:scale(.75); }
	60%{ transform:scale(1.12); }
	100%{ transform:scale(1); }
}