/**
 * No.09 メタ情報マーカー / No.11 セパレーター。
 * Figma: marker-text（549:13286）、icon--separator（724:8964）。
 * Figma の fontSizes/text-xxs（12）は theme.json の text-xs に対応。
 */

.marker-text,
a.marker-text {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--custom--atom--xs);
	max-width: 100%;
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--narrow);
	letter-spacing: var(--wp--custom--letter-spacing--none);
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.marker-text[data-marker="icon"] .icon {
	/* 親 .marker-text の font-size（text-xs）に連動。1.5em ≈ 1.125rem */
	inline-size: var(--wp--custom--icon--size, 1.5em);
	block-size: var(--wp--custom--icon--size, 1.5em);
}

.marker-text__prefix,
.marker-text__label {
	flex-shrink: 0;
}

.marker-text time {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

a.marker-text:focus {
	outline: none;
}

a.marker-text:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.icon-separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: var(--wp--custom--icon--size, 1.5em);
	block-size: var(--wp--custom--icon--size, 1.5em);
	font-family: var(--wp--preset--font-family--jp-sans);
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1;
	color: inherit;
}

.icon-separator .icon {
	inline-size: 100%;
	block-size: 100%;
}

.inline-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 100%;
}

.inline-list[data-separator="gap"] {
	gap: var(--wp--custom--atom--xxl);
}

/*
 * slash / arrow-right: 先頭アイコン（or #）＋リンクリストを横並び。
 * 折り返し時もテキスト列だけが下がるよう __body でラップ。
 */
.inline-list[data-separator="slash"],
.inline-list[data-separator="arrow-right"] {
	flex-wrap: nowrap;
	align-items: flex-start;
	column-gap: var(--wp--custom--atom--xs);
	row-gap: var(--wp--custom--atom--rg);
}

.inline-list[data-separator="slash"] > .icon,
.inline-list[data-separator="slash"] > .marker-text__prefix,
.inline-list[data-separator="arrow-right"] > .icon,
.inline-list[data-separator="arrow-right"] > .marker-text__prefix {
	flex-shrink: 0;
}

.inline-list[data-separator="slash"] > .icon,
.inline-list[data-separator="arrow-right"] > .icon {
	/* 親の text-xs を基準に 1.5em 連動（光学中央揃え用に rem 換算も保持） */
	font-size: var(--wp--preset--font-size--text-xs);
	--inline-list-icon-size: var(--wp--custom--icon--size, 1.5em);
	--inline-list-line-size: calc(
		var(--wp--preset--font-size--text-xs) * var(--wp--custom--line-height--narrow, 1.25)
	);
	inline-size: var(--inline-list-icon-size);
	block-size: var(--inline-list-icon-size);
	/* 1行目テキストと光学中央揃え（flex-start 時の上寄せ補正） */
	margin-block-start: calc((var(--inline-list-line-size) - 1.5 * var(--wp--preset--font-size--text-xs)) / 2);
}

.inline-list[data-separator="slash"] > .marker-text__prefix,
.inline-list[data-separator="arrow-right"] > .marker-text__prefix {
	line-height: var(--wp--custom--line-height--narrow, 1.25);
	font-size: var(--wp--preset--font-size--text-xs);
}

.inline-list__body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 1 1 auto;
	min-inline-size: 0;
	row-gap: var(--wp--custom--atom--rg);
}

/*
 * link-list: 外部リンク等のマーカーをまとめる。
 * PC 横並び / SP 縦並び。
 */
.link-list {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--wp--custom--atom--rg, 0.5rem);
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
}

.link-list > .marker-text,
.link-list > a.marker-text {
	min-inline-size: 0;
	max-inline-size: 100%;
}

@media (min-width: 768px) {
	.link-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		column-gap: var(--wp--custom--atom--xxl, 1rem);
		row-gap: var(--wp--custom--atom--rg, 0.5rem);
	}
}

.page-header .inline-list[data-separator="slash"],
.page-header .inline-list[data-separator="arrow-right"],
.sidebar .inline-list[data-separator="slash"],
.sidebar .inline-list[data-separator="arrow-right"],
.card .inline-list[data-separator="slash"],
.card .inline-list[data-separator="arrow-right"],
.page-header .inline-list__body,
.sidebar .inline-list__body,
.card .inline-list__body {
	row-gap: var(--wp--custom--atom--xs, 0.25rem);
}