/* 각주: 에디터 본문(content_css)과 글 보기(view.html)에서 함께 쓴다
 * 본문에는 <sup class="ed-fn"><span class="ed-fn-note">내용</span></sup> 만 저장하고, 번호는 CSS 카운터로 매긴다
 */
.mce-content-body,
.xe_content{
	counter-reset:edfn;
}

sup.ed-fn{
	counter-increment:edfn;
	display:inline-block;
	min-width:1.5em;
	margin:0 .1em 0 .15em;
	padding:0 .42em;
	border-radius:999px;
	background:rgba(59, 130, 246, .12);
	color:#2563eb;
	font-size:.68em;
	font-style:normal;
	font-weight:700;
	line-height:1.6;
	text-align:center;
	text-decoration:none;
	text-indent:0;
	vertical-align:.6em;
	cursor:pointer;
	user-select:none;
	transition:background-color .15s ease, color .15s ease;
}

sup.ed-fn::before{
	content:counter(edfn);
}

sup.ed-fn:hover,
sup.ed-fn:focus-visible,
sup.ed-fn.is-active{
	background:#2563eb;
	color:#fff;
	outline:none;
}

sup.ed-fn .ed-fn-note{
	display:none;
}

/* 에디터 안: 고를 때 테두리 */
.mce-content-body sup.ed-fn[data-mce-selected]{
	outline:none !important;
	box-shadow:0 0 0 2px rgba(37, 99, 235, .35);
}

/* 글 보기: 번호를 누르면 뜨는 말풍선 */
.ed-fn-pop{
	position:absolute;
	z-index:10000;
	box-sizing:border-box;
	max-width:360px;
	padding:12px 14px;
	border-radius:12px;
	background:#fff;
	color:#1f2937;
	box-shadow:0 12px 32px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .06);
	font-size:13px;
	line-height:1.65;
	word-break:break-word;
	opacity:0;
	transform:translateY(4px);
	transition:opacity .15s ease, transform .15s ease;
}

.ed-fn-pop.is-show{
	opacity:1;
	transform:translateY(0);
}

.ed-fn-pop-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:4px;
	color:#64748b;
	font-size:11px;
	font-weight:700;
}

.ed-fn-pop-go{
	padding:0;
	border:0;
	background:none;
	color:#2563eb;
	font-size:11px;
	font-weight:600;
	cursor:pointer;
}

.ed-fn-pop a,
.ed-fn-section a{
	color:#2563eb;
	word-break:break-all;
}

/* 글 보기: 글 아래 각주 목록 */
.ed-fn-section{
	margin-top:2.4em;
	padding-top:1em;
	border-top:1px solid rgba(100, 116, 139, .25);
	font-size:.9em;
}

.ed-fn-section-title{
	margin-bottom:.5em;
	font-size:.95em;
	font-weight:700;
	opacity:.75;
}

.ed-fn-section ol{
	margin:0 !important;
	padding:0 !important;
	list-style:none !important;
}

.ed-fn-section li{
	display:flex;
	align-items:flex-start;
	gap:.6em;
	margin:0 !important;
	padding:.35em .5em;
	border-radius:8px;
	line-height:1.65;
	list-style:none !important;
	transition:background-color .4s ease;
}

.ed-fn-section li.is-flash{
	background:rgba(59, 130, 246, .12);
}

.ed-fn-num{
	flex:0 0 auto;
	min-width:1.7em;
	margin:.2em 0 0;
	padding:0 .45em;
	border:0;
	border-radius:999px;
	background:rgba(59, 130, 246, .12);
	color:#2563eb;
	font-size:.78em;
	font-weight:700;
	line-height:1.6;
	cursor:pointer;
}

.ed-fn-num:hover{
	background:#2563eb;
	color:#fff;
}

.ed-fn-text{
	flex:1;
	min-width:0;
	word-break:break-word;
}

sup.ed-fn.is-flash{
	animation:ed-fn-flash 1.2s ease;
}

@keyframes ed-fn-flash{
	0%, 40%{ box-shadow:0 0 0 4px rgba(37, 99, 235, .35); }
	100%{ box-shadow:0 0 0 0 rgba(37, 99, 235, 0); }
}