/* WN News List */
.wnnl {
	--wnnl-accent: #3b7ddd;
	--wnnl-badge-bg: color-mix(in srgb, var(--wnnl-accent) 10%, #fff);
	--wnnl-text: #222;
	--wnnl-muted: #8a8f98;
	--wnnl-line: #e6e8eb;
	container-type: inline-size;
	color: var(--wnnl-text);
	font-size: 14px;
	line-height: 1.7;
}

.wnnl *,
.wnnl *::before,
.wnnl *::after {
	box-sizing: border-box;
}

.wnnl__heading {
	margin: 0 0 1em;
	font-size: 1.4em;
}

/* タブ */
.wnnl__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2.5em;
	border-bottom: 1px solid var(--wnnl-line);
	margin: 0;
	padding: 0 0 0 .2em;
}

.wnnl__tabs[hidden] {
	display: none;
}

.wnnl__tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin: 0 0 -1px;
	padding: .9em 0;
	font: inherit;
	font-size: 14px;
	color: #555;
	cursor: pointer;
	transition: color .15s;
}

.wnnl__tab:hover {
	color: var(--wnnl-accent);
}

.wnnl__tab.is-active {
	color: var(--wnnl-accent);
	font-weight: 700;
}

.wnnl__tab:focus-visible {
	outline: 2px solid var(--wnnl-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* リスト */
.wnnl__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wnnl__item {
	display: grid;
	grid-template-columns: 7.5em 1fr;
	gap: 1.5em;
	align-items: start;
	margin: 0;
	padding: 1.8em .2em;
	border-bottom: 1px solid var(--wnnl-line);
}

.wnnl__item[hidden] {
	display: none;
}

.wnnl__badge {
	display: inline-block;
	padding: .25em 1em;
	border-radius: 999px;
	background: var(--wnnl-badge-bg);
	color: var(--wnnl-accent);
	font-size: 12px;
	line-height: 1.6;
	white-space: nowrap;
}

.wnnl__body {
	min-width: 0;
}

.wnnl__date {
	display: inline-block;
	color: var(--wnnl-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
}

.wnnl__new {
	display: inline-block;
	margin-left: .6em;
	color: #d6455d;
	font-size: 10px;
	font-weight: 700;
	vertical-align: 1px;
}

.wnnl__title {
	display: block;
	margin-top: .5em;
	color: var(--wnnl-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.wnnl__title:hover {
	color: var(--wnnl-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wnnl__title:focus-visible {
	outline: 2px solid var(--wnnl-accent);
	outline-offset: 2px;
}

.wnnl__empty {
	margin: 0;
	padding: 2em .2em;
	color: var(--wnnl-muted);
}

/* ラベル非表示時 */
.wnnl__item:not(:has(.wnnl__label)) {
	grid-template-columns: 1fr;
}

/* 狭い場所（スマホ・サイドバー）では縦積み */
@container (max-width: 480px) {
	.wnnl__tabs {
		gap: 0 1.5em;
	}
	.wnnl__item {
		grid-template-columns: 1fr;
		gap: .6em;
		padding: 1.2em .2em;
	}
	.wnnl__label:not(:has(.wnnl__badge)) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wnnl__tab {
		transition: none;
	}
}