/* 《零餘》彈出式注釋 —— 顏色沿用全站 --yk-* 變數，沒有時用預設值 */
.yk-fn, sup.fn { line-height: 0; }
.yk-fn__ref, sup.fn > a {
	display: inline-block;
	margin: -.6em 0 -.6em .1em;      /* 負邊距：點擊範圍大，但不撐開行距 */
	padding: .6em .05em;             /* 加大手指可點的範圍 */
	text-indent: 0 !important;       /* 段落有首行縮排時，不要縮進注釋號裡 */
	letter-spacing: 0;
	font-family: var(--yk-mono, ui-monospace, monospace);
	font-size: .72em;
	font-weight: 700;
	line-height: 0;
	text-align: center;
	color: var(--yk-pink, #ff2a6d) !important;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.yk-fn__ref::before, sup.fn > a::before { content: "["; }
.yk-fn__ref::after,  sup.fn > a::after  { content: "]"; }
.yk-fn__ref:hover, .yk-fn__ref[aria-expanded="true"],
sup.fn > a:hover, sup.fn > a[aria-expanded="true"] {
	color: var(--yk-blue, #14588a) !important;
	background: var(--yk-yellow, #f4d35e);
}
.yk-fn__ref:focus-visible, sup.fn > a:focus-visible { outline: 2px solid var(--yk-blue, #14588a); outline-offset: 2px; }

/* 有 JavaScript 時才把頁尾的注釋清單藏起來（沒有 JS 的讀者仍然看得到） */
.yk-fn-ready .wp-block-footnotes { display: none; }

/* 彈出框 */
.yk-fn-pop {
	box-sizing: border-box;
	position: absolute;
	z-index: 99999;
	width: min(340px, calc(100vw - 32px));
	padding: 14px 40px 14px 16px;
	background: var(--yk-paper, #f2ecdf);
	color: var(--yk-ink, #17222c);
	border: 2px solid var(--yk-blue, #14588a);
	box-shadow: 6px 6px 0 var(--yk-yellow, #f4d35e);
	font-family: var(--yk-serif, serif);
	font-size: 15px;
	line-height: 1.85;
	text-align: left;
	text-indent: 0;
	letter-spacing: normal;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .15s ease, transform .15s ease;
}
.yk-fn-pop.is-open { opacity: 1; transform: none; }
.yk-fn-pop[hidden] { display: none; }
.yk-fn-pop__no {
	display: block;
	margin-bottom: 4px;
	font-family: var(--yk-mono, ui-monospace, monospace);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--yk-pink, #ff2a6d);
}
.yk-fn-pop__text a { color: var(--yk-blue, #14588a); text-decoration-color: var(--yk-pink, #ff2a6d); text-underline-offset: 3px; }
.yk-fn-pop__close {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--yk-blue, #14588a);
	font-size: 22px;
	line-height: 32px;
	cursor: pointer;
}
.yk-fn-pop__close:hover { color: var(--yk-pink, #ff2a6d); }
/* 小三角，指向注釋號 */
.yk-fn-pop__arrow {
	position: absolute;
	top: -9px;
	width: 14px;
	height: 14px;
	background: var(--yk-paper, #f2ecdf);
	border-left: 2px solid var(--yk-blue, #14588a);
	border-top: 2px solid var(--yk-blue, #14588a);
	transform: rotate(45deg);
}
.yk-fn-pop.is-above .yk-fn-pop__arrow { top: auto; bottom: -9px; transform: rotate(225deg); }

@media print {
	.yk-fn-ready .wp-block-footnotes { display: block; }
	.yk-fn-pop { display: none !important; }
}
