/* 依頼書516：関連記事のご案内（読者側）＝モック画面6の構造。
 *
 * 見た目はテーマが最終決定する（依頼書516 §0）。ここではモックの生値（#93C5FD 等）を1つも持ち込まず、
 *   ・色は currentColor（本文の文字色）から作る
 *   ・文字サイズ・行間・角丸・余白はテーマが上書きできる変数にする
 * だけにする。テーマ側で --uai-relguide-* を定義すれば、そのまま馴染む。
 */
.uai-relguide {
	margin: var(--uai-relguide-gap, 1em) 0;
	padding: var(--uai-relguide-pad, .7em 1em);
	border: 1px solid var(--uai-relguide-border, color-mix(in srgb, currentColor 25%, transparent));
	border-radius: var(--uai-relguide-radius, 8px);
	background: var(--uai-relguide-bg, color-mix(in srgb, currentColor 4%, transparent));
	font-size: var(--uai-relguide-fs, inherit);
	line-height: var(--uai-relguide-lh, inherit);
}

/* 誘導先のご案内は、記事のご案内と見分けが付く程度に差を付ける（色はテーマ任せ）。 */
.uai-relguide--lp {
	border-color: var(--uai-relguide-lp-border, color-mix(in srgb, currentColor 40%, transparent));
	background: var(--uai-relguide-lp-bg, color-mix(in srgb, currentColor 7%, transparent));
}

.uai-relguide-a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.uai-relguide-a:hover .uai-relguide-t { text-decoration: underline; }

.uai-relguide-lead { opacity: .8; }
.uai-relguide-t { font-weight: 700; }

/* color-mix が使えない環境（古いブラウザ）でも枠と地色が消えないようにする。 */
@supports not (color: color-mix(in srgb, currentColor 25%, transparent)) {
	.uai-relguide { border-color: currentColor; background: transparent; }
	.uai-relguide--lp { border-color: currentColor; }
}