/*
 * 一覧ページ（カテゴリ・タイプ・検索・記事一覧・404）
 *
 * 見出し帯はカテゴリ色（--fk-chip-bg / --fk-chip-dot）か
 * タイプ色（--fk-type-color / --fk-type-accent）で塗る。
 */

/* ==========================================================================
   見出し帯
   ========================================================================== */

.fk-archive-head {
	padding-block: var(--fk-space-5) var(--fk-space-6);
	background:
		radial-gradient(circle at 92% 0%, rgba(255, 255, 255, .7), transparent 40%),
		linear-gradient(135deg, var(--fk-chip-bg, #FFE6F0) 0%, rgba(255, 255, 255, .5) 100%),
		var(--fk-bg);
}

.fk-archive-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fk-chip-dot, var(--fk-accent));
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
}

.fk-archive-head__eyebrow::before {
	content: '';
	width: 14px;
	height: 3px;
	border-radius: 999px;
	background-color: currentColor;
}

.fk-archive-head__title {
	margin-top: var(--fk-space-1);
	font-size: clamp(1.5rem, 6vw, 2.25rem);
	line-height: 1.4;
}

.fk-archive-head__lead {
	max-width: 40em;
	margin-top: var(--fk-space-2);
	color: var(--fk-ink-soft);
	font-size: 13px;
	line-height: 1.8;
}

.fk-archive-head__count {
	display: inline-flex;
	margin-top: var(--fk-space-3);
	padding: 2px 12px;
	background-color: rgba(255, 255, 255, .85);
	border-radius: 999px;
	font-size: var(--fk-text-xs);
	font-weight: 700;
}

.fk-archive {
	padding-block: var(--fk-space-5) var(--fk-space-2);
}

/* ==========================================================================
   タイプ別ピラーの見出し
   ========================================================================== */

.fk-type-head {
	position: relative;
	overflow: hidden;
	padding-block: var(--fk-space-6) var(--fk-space-5);
	background: linear-gradient(135deg, var(--fk-type-color) 0%, var(--fk-type-accent) 100%);
}

.fk-type-head::after {
	content: '';
	position: absolute;
	top: -30%;
	right: -10%;
	width: min(60vw, 420px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .4);
	pointer-events: none;
}

.fk-type-head .fk-container {
	position: relative;
	z-index: 1;
}

.fk-type-head__eyebrow {
	display: inline-flex;
	padding: 2px 10px;
	background-color: rgba(255, 255, 255, .75);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
}

.fk-type-head__title {
	margin-top: var(--fk-space-2);
	line-height: 1.2;
}

.fk-type-head__code {
	display: block;
	font-size: clamp(2.75rem, 14vw, 4.5rem);
	letter-spacing: .08em;
}

.fk-type-head__label {
	display: block;
	margin-top: var(--fk-space-1);
	font-size: var(--fk-text-xl);
}

.fk-type-head__catch {
	margin-top: var(--fk-space-2);
	font-size: var(--fk-text-sm);
}

.fk-type-head__siblings {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--fk-space-4);
}

.fk-type-head__siblings a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding-inline: 14px;
	background-color: rgba(255, 255, 255, .75);
	border-radius: 999px;
	color: var(--fk-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
}

.fk-type-head__siblings a:hover {
	background-color: #FFFFFF;
	color: var(--fk-ink);
}

.fk-type-head__siblings a.is-current {
	background-color: var(--fk-ink);
	color: #FFFFFF;
}