/* 手書きの丸（info-design-circle）— 文字の一部に付ける書式 <mark class="nk-circle">。
   JS 無し・エディター: ::after に circle.svg を mask にして静止の丸を出す。
   JS あり（フロント）: mark に inline SVG を入れて（.is-live）stroke を一筆書きで伸ばす（.is-drawn）。
   色はテーマのアクセント色。変えるときはテーマ側で --nk-circle-color を上書きする。 */
.nk-circle {
	position: relative;
	background: none;
	color: inherit;
	--nk-circle-color: var(--wp--preset--color--accent, #ba263b);
	/* 文字の箱からのはみ出し（負の値で外へ）。右は書き終わりが尖るぶん広め、下は字の下に食い込むぶん広め */
	--nk-circle-top: -0.3em;
	--nk-circle-right: -0.5em;
	--nk-circle-bottom: -0.32em;
	--nk-circle-left: -0.38em;
	--nk-circle-tilt: -5deg; /* 右上がりに少し傾ける（手描きの勢い） */
	--nk-circle-width: max(1px, 0.025em); /* 線の太さ（画面 px 相当）。inline SVG では JS が倍率で割って user 単位にする */
	--nk-circle-duration: 0.7s;
	--nk-circle-delay: 0.15s;
}
.nk-circle::after {
	content: "";
	position: absolute;
	inset: var(--nk-circle-top) var(--nk-circle-right) var(--nk-circle-bottom) var(--nk-circle-left);
	pointer-events: none;
	transform: rotate(var(--nk-circle-tilt));
	background: var(--nk-circle-color);
	-webkit-mask: url(circle.svg) center / 100% 100% no-repeat;
	mask: url(circle.svg) center / 100% 100% no-repeat;
}
.nk-circle.is-live::after {
	display: none;
}
/* 置換要素（svg）は inset だけでは伸びない（width/height auto は固有の比率になる）ので、幅と高さを明示する */
.nk-circle__svg {
	position: absolute;
	top: var(--nk-circle-top);
	left: var(--nk-circle-left);
	width: calc(100% - var(--nk-circle-left) - var(--nk-circle-right));
	height: calc(100% - var(--nk-circle-top) - var(--nk-circle-bottom));
	overflow: visible;
	pointer-events: none;
	transform: rotate(var(--nk-circle-tilt));
}
.nk-circle__svg path {
	fill: none;
	stroke: var(--nk-circle-color);
	stroke-width: 2.4; /* user 単位の既定（JS が --nk-circle-width ÷ 横の倍率 で上書きする）。
	                      vector-effect: non-scaling-stroke は使わない: pathLength と併用すると Chrome が dash を画面座標で計り、線が途中（倍率ぶん）で止まる（2026-10-17 に実測） */
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	visibility: hidden; /* 描き始めるまで隠す（長さ 0 の dash でも丸い線端が点として見えるため） */
	transition: stroke-dashoffset var(--nk-circle-duration) cubic-bezier(0.4, 0, 0.2, 1) var(--nk-circle-delay);
}
.nk-circle.is-drawn .nk-circle__svg path {
	stroke-dashoffset: 0;
	visibility: visible;
}
.nk-circle.is-rewind .nk-circle__svg path {
	transition: none;
}
@media (prefers-reduced-motion: reduce) {
	.nk-circle__svg path { transition: none; }
}