/**
 * Column一覧・詳細（MASTER_SPEC第29〜30項）。
 * デザイン性より探しやすさ・読みやすさを優先する。
 */
.column-search {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-6);
	max-width: 28rem;
}

.column-search input {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	border: var(--border-hairline);
	background: var(--color-surface);
}

.column-search button {
	padding: var(--space-3) var(--space-5);
	border: var(--border-frame);
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.column-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin-top: var(--space-6);
	padding-bottom: var(--space-5);
	border-bottom: var(--border-hairline);
}

.column-filter__link {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-ink-soft);
	border-bottom: 1px solid transparent;
}

.column-filter__link:hover,
.column-filter__link:focus-visible {
	color: var(--color-ink);
}

.column-filter__link.is-active {
	color: var(--color-ink);
	border-bottom-color: var(--color-accent);
}

.column-list {
	display: flex;
	flex-direction: column;
	margin-top: var(--space-6);
}

.column-list__item {
	border-top: 1px solid var(--color-line);
}

.column-list__item:last-child {
	border-bottom: 1px solid var(--color-line);
}

.column-list__link {
	display: flex;
	align-items: baseline;
	gap: var(--space-5);
	padding-block: var(--space-4);
}

.column-list__link:hover .column-list__title,
.column-list__link:focus-visible .column-list__title {
	color: var(--color-accent);
}

.column-list__title {
	flex: 1;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-lead);
	transition: color var(--duration-fast) var(--ease-standard);
}

/**
 * Column詳細
 */
.column-meta {
	display: flex;
	gap: var(--space-4);
	margin-top: var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	color: var(--color-ink-faint);
}

.column-toc {
	margin-top: var(--space-7);
	padding: var(--space-5);
	border: var(--border-hairline);
}

.column-toc ol {
	margin-top: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.column-toc__h3 {
	padding-inline-start: var(--space-4);
}

.column-toc a:hover,
.column-toc a:focus-visible {
	color: var(--color-accent);
}

.share-links {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: var(--border-hairline);
}

.share-links a {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide);
	color: var(--color-ink-soft);
}

.share-links a:hover,
.share-links a:focus-visible {
	color: var(--color-accent);
}

.related-articles {
	margin-top: var(--space-8);
}

/**
 * TOPのBLOGセクション（Featured×1 + Latest×3）。画面いっぱいの高さを確保する。
 */
.column-top {
	min-height: 100svh;
	padding-block: var(--space-10);
	border-top: var(--border-hairline);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.column-top__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--space-8);
	margin-top: var(--space-7);
}

.column-top__featured-thumb {
	aspect-ratio: 16 / 9;
	background: var(--color-surface);
	border: var(--border-hairline);
	overflow: hidden;
}

.column-top__featured-title {
	font-size: var(--fs-h2);
	line-height: var(--lh-snug);
	margin-top: var(--space-3);
	transition: color var(--duration-fast) var(--ease-standard);
}

.column-top__featured:hover .column-top__featured-title,
.column-top__featured:focus-visible .column-top__featured-title {
	color: var(--color-accent);
}

.column-top__latest {
	display: flex;
	flex-direction: column;
}

.column-top__latest li {
	border-top: 1px solid var(--color-line);
}

.column-top__latest li:last-child {
	border-bottom: 1px solid var(--color-line);
}

.column-top__latest a {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-block: var(--space-4);
}

.column-top__latest a:hover .column-list__title,
.column-top__latest a:focus-visible .column-list__title {
	color: var(--color-accent);
}

@media (max-width: 767px) {
	.column-top__grid {
		grid-template-columns: 1fr;
	}
}