/* ==========================================================================
   コラム一覧（/column/）Figma「10 コラム一覧」
   ========================================================================== */

/* カテゴリーの絞り込み（見出し帯の続き） */
.column-filter {
	margin-top: -33px;
	padding: 0 max(var(--gutter), calc((100% - var(--width-narrow)) / 2)) 64px;
	background: var(--bg-base);
}

.column-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
}

.column-filter__chip {
	display: block;
	padding: 6px 11px;
	background: var(--bg-white);
	border: 1px solid var(--line-base);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 0.04em;
	transition: border-color 0.2s, color 0.2s;
}

.column-filter__chip:hover {
	color: var(--accent-rose);
	border-color: var(--line-rose);
}

.column-filter__chip.is-current {
	color: var(--text-on-accent);
	background: var(--accent-rose);
	border-color: var(--line-strong);
}

/* 記事一覧 */
.column-list {
	padding: 80px max(var(--gutter), calc((100% - var(--width-narrow)) / 2));
}

.column-list__items {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.column-card__link {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px;
	background: var(--bg-white);
	border: 1px solid var(--line-base);
	transition: border-color 0.2s;
}

.column-card__link:hover {
	border-color: var(--line-rose);
}

.column-card__thumb {
	flex-shrink: 0;
}

/* サムネイルは Figma の 96×72px の枠にそろえて切り抜く（画像ごとに幅が変わるとタイトルの位置がそろわないため） */
.column-card__thumb img {
	display: block;
	width: 96px;
	height: 72px;
	object-fit: cover;
}

.column-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.column-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	color: var(--text-secondary);
	font-size: 12px;
	line-height: normal;
	letter-spacing: 0.04em;
}

.column-card__cat {
	color: var(--text-accent);
}

.column-card__title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.04em;
	transition: color 0.2s;
}

.column-card__link:hover .column-card__title {
	color: var(--accent-rose);
}

/* ページ送り */
.pager {
	margin-top: 24px;
}

.pager__list {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.pager .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var(--bg-white);
	border: 1px solid var(--line-base);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: border-color 0.2s;
}

.pager a.page-numbers:hover {
	border-color: var(--line-rose);
}

.pager .page-numbers.current {
	color: var(--text-on-accent);
	background: var(--accent-rose);
}

.pager .page-numbers.dots {
	background: none;
	border: 0;
}

@media (max-width: 767px) {
	.column-filter {
		margin-top: -14px;
		padding: 0 20px 32px;
	}

	.column-filter__chip {
		font-size: 13px;
	}

	.column-list {
		padding: 48px 20px;
	}

	.column-list__items {
		gap: 16px;
	}

	.column-card__meta {
		font-size: 11px;
	}

	.column-card__title {
		font-size: 14px;
	}

	.pager {
		margin-top: 16px;
	}
}

/* SP では文字を 1px 大きくする（PC の大きさのまま SP にも効いていたもの。SP 用の指定は各所で +1px 済み） */
@media (max-width: 767px) {
	.pager .page-numbers {
		font-size: 15px;
	}
}