/* Adapted from the owner’s spa77k/mcsv-lab; refreshed against ad79467. See DESIGN.md. */
/* Source: global.css */
/* 2026-10-22 ダーク基調のチャットアプリ風。Discordの灰色とブラープルは使わず、少し青みのある独自の灰色と青緑にする（DESIGN.md） */
:root {
	color-scheme: dark;
	/* 暗い地の上の文字・アイコン・線に使うアクセント。--accent-dark は暗い地で強調する明るい側 */
	--accent: #4fb6cc;
	--accent-light: #7fd0e1;
	--accent-dark: #8fd8e8;
	/* 白い文字を載せるボタンの塗り（白文字とのコントラスト4.5以上） */
	--accent-fill: #267a8e;
	--accent-fill-hover: #1f6878;
	/* rgba()で濃さを変えて使うためのアクセント色。個別ファイルへの直書きをやめてここに集約する */
	--accent-rgb: 79, 182, 204;
	/* 本文の文字色。名前は移植元のまま */
	--black: 228, 233, 240;
	--gray: 150, 163, 180;
	--gray-light: 48, 58, 72;
	--gray-dark: 196, 205, 216;
	--bg: #171c24;
	--card-bg: #1f2630;
	--raised-bg: #252d39;
	--box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	--box-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45);

	/* 角丸。カード・タイルは控えめな角丸、ボタンは角丸の四角、チップは丸 */
	--radius-card: 10px;
	--radius-tile: 10px;
	--radius-btn: 8px;
	--radius-pill: 999px;

	/* アクセント色の淡い面と境界線 */
	--surface-soft: rgba(var(--accent-rgb), 0.08);
	--border-soft: #2e3846;

	/* 記事ページ用 */
	--article-text: #d3dae3;
	--article-heading: #f1f4f8;
	--article-border: #333d4b;
	--article-border-light: #2a323e;
	--article-sub-bg: #252d39;
	--article-radius: 8px;

	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Hiragino Kaku Gothic ProN', monospace;
}

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

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: rgb(var(--black));
	font-size: 17px;
	line-height: 1.8;
	letter-spacing: 0.01em;
	word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5rem 0;
	color: rgb(var(--black));
	line-height: 1.3;
	/* 固定ヘッダー(90px)に見出しが隠れないようにする */
	scroll-margin-top: 100px;
}

h1 { font-size: 2.1rem; }
h2 {
	font-size: 1.65rem;
	margin: 1rem 0 0.5rem 0;
}
h3 { font-size: 1.35rem; }
h4 { font-size: 1.18rem; }

a {
	color: var(--accent);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	a:hover {
		color: var(--accent-light);
	}
}

p {
	margin: 0 0 1em;
}

img {
	max-width: 100%;
	height: auto;
}

/* <picture> only chooses AVIF or WebP; the <img> keeps its own layout as if unwrapped. */
picture {
	display: contents;
}

strong, b {
	font-weight: 700;
}

code {
	padding: 2px 6px;
	background-color: rgb(var(--gray-light));
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: 0.875em;
}

blockquote {
	border-left: 4px solid var(--accent);
	padding: 0.5em 0 0.5em 1.25em;
	margin: 0 0 1em;
	color: rgb(var(--gray-dark));
	font-style: italic;
}

hr {
	border: none;
	border-top: 1px solid rgb(var(--gray-light));
	margin: 2em 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: 0.5em 0.75em;
	border: 1px solid rgb(var(--gray-light));
	text-align: left;
}

th {
	background: rgb(var(--gray-light));
}

ul, ol {
	padding-left: 1.5em;
}


/* Source: Header.astro */

	body.mobile-menu-open {
		overflow: hidden;
	}

	/* スキップリンク */
	.skip-link {
		position: fixed;
		top: -100%;
		left: 1rem;
		background: var(--raised-bg);
		color: var(--accent-dark);
		padding: 0.5rem 1rem;
		border-radius: 0 0 var(--radius-card) var(--radius-card);
		font-size: 0.85rem;
		font-weight: 600;
		z-index: 200;
		text-decoration: none;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	}
	.skip-link:focus {
		top: 0;
	}

	header {
		background-color: var(--card-bg);
		border-bottom: 1px solid var(--border-soft);
		position: sticky;
		top: 0;
		z-index: 100;
	}
	.inner {
		max-width: 1300px;
		margin: 0 auto;
		padding: 0 1.25rem;
		display: flex;
		align-items: center;
		gap: 1.25rem;
		height: 100px;
	}

	/* ロゴ */
	.logo {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		text-decoration: none;
		flex-shrink: 0;
		margin-right: auto;
	}
	.logo-text {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		line-height: 1.25;
	}
	/* src/lib/logo.ts のSVG（viewBox 210×48）。文字は本文色、マークと「ラボ」はアクセント色 */
	.logo-wordmark {
		display: block;
		color: rgb(var(--black));
		line-height: 0;
	}
	.logo-svg {
		display: block;
		width: auto;
		height: 38px;
	}
	/* 説明文はマークの右、文字の頭（viewBoxの60/48×高さ）にそろえる */
	.logo-tagline {
		padding-left: 47.5px;
		font-size: 0.76rem;
		color: rgb(var(--gray));
		letter-spacing: 0.02em;
	}

	/* デスクトップナビ */
	.site-nav {
		display: flex;
		align-items: center;
		gap: 0.35rem;
	}
	.nav-link {
		position: relative;
		color: rgb(var(--gray-dark));
		padding: 0.45em 0.7em;
		border-radius: var(--radius-pill);
		font-size: 0.98rem;
		font-weight: 500;
		text-decoration: none;
		transition: color 0.15s, background 0.15s;
		white-space: nowrap;
	}
	.nav-link.active {
		color: var(--accent-dark);
		font-weight: 700;
	}
	.nav-link.active::after {
		content: '';
		position: absolute;
		left: 0.7em;
		right: 0.7em;
		bottom: 0.1em;
		height: 2px;
		border-radius: var(--radius-pill);
		background: var(--accent);
	}
	@media (hover: hover) and (pointer: fine) {
		.nav-link:hover {
			color: var(--accent-dark);
			background: var(--surface-soft);
		}
	}

	/* ヘッダー右側 */
	.header-actions {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		flex-shrink: 0;
	}
	.icon-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: var(--radius-pill);
		color: var(--accent-dark);
		background: var(--surface-soft);
		text-decoration: none;
		transition: background 0.15s, color 0.15s;
	}
	@media (hover: hover) and (pointer: fine) {
		.icon-button:hover {
			background: rgba(var(--accent-rgb), 0.15);
			color: var(--accent-dark);
		}
	}
	.header-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 0.55rem 1.35rem;
		border-radius: var(--radius-btn);
		background: var(--accent-fill);
		color: #fff;
		font-size: 0.95rem;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
		transition: background 0.15s, transform 0.15s;
	}
	@media (hover: hover) and (pointer: fine) {
		.header-cta:hover {
			background: var(--accent-fill-hover);
			color: #fff;
			transform: translateY(-1px);
		}
	}

	.mobile-menu {
		display: none;
	}

	/* カテゴリへの近道（スマホ・タブレットのみ） */
	.quick-nav {
		display: none;
		background: var(--card-bg);
		border-bottom: 1px solid var(--border-soft);
	}
	.quick-nav-inner {
		display: flex;
		max-width: 1300px;
		margin: 0 auto;
		padding: 0 0.5rem;
	}
	.quick-link {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		gap: 0.1rem;
		padding: 0.4rem 0.25rem 0.45rem;
		color: rgb(var(--gray-dark));
		text-decoration: none;
		position: relative;
		min-width: 0;
	}
	.quick-link + .quick-link::before {
		content: '';
		position: absolute;
		left: 0;
		top: 22%;
		bottom: 22%;
		width: 1px;
		background: var(--border-soft);
	}
	.quick-icon {
		display: inline-flex;
		color: var(--accent);
	}
	.category-icon {
		display: inline-block;
		width: 24px;
		height: 24px;
		flex-shrink: 0;
		background-color: currentColor;
		-webkit-mask-image: var(--category-icon);
		mask-image: var(--category-icon);
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
	.quick-label {
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.02em;
	}

	/* カテゴリ画像帯を使わず、アイコンの近道を常時表示する */
	.quick-nav.quick-nav-always {
		display: block;
	}
	/* スマホ幅では6カテゴリが収まらないので、横スクロールで崩れを防ぐ */
	@media (max-width: 640px) {
		.quick-nav-inner {
			overflow-x: auto;
			scrollbar-width: none;
		}
		.quick-nav-inner::-webkit-scrollbar {
			display: none;
		}
		.quick-link {
			flex: 0 0 auto;
			min-width: 4.8rem;
			padding-left: 0.6rem;
			padding-right: 0.6rem;
		}
		.quick-label { white-space: nowrap; }
	}

	/* 1024px以下はナビをたたんでハンバーガーへ */
	@media (max-width: 1024px) {
		.site-nav {
			display: none;
		}
		.mobile-menu {
			display: block;
			position: relative;
		}
		.quick-nav {
			display: block;
		}
	}

	@media (max-width: 640px) {
		.inner {
			height: 60px;
			padding: 0 1rem;
			gap: 0.4rem;
		}
		.logo-svg {
			height: 30px;
		}
		.logo-tagline {
			display: none;
		}
		.header-cta {
			display: none;
		}
	}

	/* ハンバーガーとスライドインパネル */
	@media (max-width: 1024px) {
		.mobile-menu > .mobile-menu-backdrop,
		.mobile-menu > .mobile-menu-panel {
			display: block;
		}
		.mobile-menu > summary {
			list-style: none;
			position: relative;
			z-index: 135;
		}
		.mobile-menu > summary::-webkit-details-marker {
			display: none;
		}
		.menu-toggle {
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 0.28rem;
			width: 44px;
			height: 44px;
			padding: 0;
			border: none;
			background: transparent;
			cursor: pointer;
		}
		.menu-toggle:focus-visible {
			outline: 2px solid rgba(var(--accent-rgb), 0.6);
			outline-offset: 2px;
		}
		.menu-toggle-bar {
			display: block;
			width: 20px;
			height: 2px;
			border-radius: var(--radius-pill);
			background: var(--accent-dark);
			transition: transform 0.15s ease, opacity 0.15s ease;
		}
		.mobile-menu[open] .menu-toggle-bar:nth-child(1) {
			transform: translateY(6px) rotate(45deg);
		}
		.mobile-menu[open] .menu-toggle-bar:nth-child(2) {
			opacity: 0;
		}
		.mobile-menu[open] .menu-toggle-bar:nth-child(3) {
			transform: translateY(-6px) rotate(-45deg);
		}
		.mobile-menu-backdrop {
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.55);
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.2s ease;
			z-index: 130;
		}
		.mobile-menu-panel {
			position: fixed;
			top: 0;
			right: 0;
			width: min(300px, calc(100vw - 2.5rem));
			height: 100dvh;
			padding: calc(1rem + env(safe-area-inset-top)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
			background: var(--card-bg);
			box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
			display: flex;
			flex-direction: column;
			overflow-y: auto;
			transform: translateX(100%);
			transition: transform 0.24s ease;
			pointer-events: none;
			z-index: 140;
		}
		.mobile-menu[open] .mobile-menu-backdrop {
			opacity: 1;
			pointer-events: auto;
		}
		.mobile-menu[open] .mobile-menu-panel {
			transform: translateX(0);
			pointer-events: auto;
		}
		.mobile-menu-close {
			align-self: flex-end;
			width: 44px;
			height: 44px;
			padding: 0;
			border: none;
			background: transparent;
			color: rgb(var(--gray));
			font: inherit;
			font-size: 1.6rem;
			line-height: 1;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			margin-bottom: 1.25rem;
			flex-shrink: 0;
		}
		.mobile-menu-close:hover {
			color: rgb(var(--black));
		}
		.mobile-nav {
			display: flex;
			flex-direction: column;
		}
		.mobile-nav .nav-link {
			display: block;
			width: 100%;
			padding: 0.85rem 0;
			border-radius: 0;
			text-align: left;
			color: rgb(var(--gray-dark));
			background: transparent;
			border-bottom: 1px solid var(--article-border-light);
			font-size: 0.95rem;
			font-weight: 500;
		}
		.mobile-nav .nav-link:first-of-type {
			border-top: 1px solid var(--article-border-light);
		}
		.mobile-nav .nav-link.active {
			color: var(--accent-dark);
			font-weight: 700;
			background: transparent;
		}
		.mobile-nav .nav-link.active::after {
			display: none;
		}
		@media (hover: hover) and (pointer: fine) {
			.mobile-nav .nav-link:hover {
				color: var(--accent-dark);
				background: transparent;
			}
		}
		.mobile-cta {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 46px;
			margin-top: 1.5rem;
			padding: 0.6rem 1.2rem;
			border-radius: var(--radius-btn);
			background: var(--accent-fill);
			color: #fff;
			font-size: 0.9rem;
			font-weight: 700;
			text-align: center;
			text-decoration: none;
		}
	}

/* Source: cards.css */
/* ===== カード共通スタイル ===== */
@keyframes cardFadeUp {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.card {
	display: block;
	background: var(--card-bg);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--box-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	color: inherit;
	text-decoration: none;
	margin-bottom: 1.15rem;
}
.card:last-child { margin-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
	.card:hover {
		transform: translateY(-3px);
		box-shadow: var(--box-shadow-hover);
		border-color: rgba(var(--accent-rgb), 0.28);
	}
}

/* 横カード */
.card-h {
	display: flex;
	flex-direction: row;
}
.card-h .card-img {
	width: 340px;
	min-width: 340px;
	height: auto;
	aspect-ratio: 40 / 21;
	object-fit: contain;
	border-radius: calc(var(--radius-card) - 1px) 0 0 calc(var(--radius-card) - 1px);
	display: block;
	flex-shrink: 0;
	background: rgb(var(--gray-light));
}
.card-h .card-img-placeholder {
	background: rgb(var(--gray-light));
	width: 340px;
	min-width: 340px;
	aspect-ratio: 40 / 21;
	flex-shrink: 0;
}
.card-h .card-body {
	padding: 1.1rem 1.4rem;
	flex: 1;
	min-width: 0;
}
.card-h .card-title {
	font-size: 1.08rem;
	line-height: 1.4;
	margin-bottom: 0.4rem;
	overflow-wrap: anywhere;
}
.card-h .card-desc {
	font-size: 0.92rem;
	line-height: 1.5;
	margin-bottom: 0.42rem;
	overflow-wrap: anywhere;
}
.card-h .card-meta {
	font-size: 0.85rem;
	line-height: 1.45;
	margin-top: 0.1rem;
}

/* 縦カード */
.card-v {
	display: flex;
	flex-direction: column;
}
.card-v .card-img {
	width: 100%;
	height: auto;
	aspect-ratio: 40 / 21;
	object-fit: contain;
	border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
	background: rgb(var(--gray-light));
	display: block;
}
.card-v .card-img-placeholder {
	background: rgb(var(--gray-light));
	width: 100%;
	aspect-ratio: 40 / 21;
}
.card-v .card-body {
	padding: 1.15rem;
	flex: 1;
}

/* カード内テキスト */
.card-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: rgb(var(--black));
	line-height: 1.4;
	margin: 0 0 0.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.card-desc {
	font-size: 0.9rem;
	color: rgb(var(--gray));
	margin: 0 0 0.4rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.5;
}
.card-meta {
	font-size: 0.85rem;
	color: rgb(var(--gray));
	margin: 0;
}
.card-category {
	color: var(--accent-dark);
	font-weight: 600;
}

/* カードアニメーション（検索結果用） */
.card-animate {
	animation: cardFadeUp 0.22s ease both;
}

/* レスポンシブ */
@media (max-width: 640px) {
	.card-h { flex-direction: column; }
	.card-h .card-img,
	.card-h .card-img-placeholder {
		width: 100%;
		min-width: unset;
		height: auto;
		aspect-ratio: 40 / 21;
		border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
	}
}

/* Source: index.astro */

	.page-wrap {
		max-width: 1300px;
		margin: 0 auto;
		padding: 2rem 1.25rem 2.5rem;
	}
	.section-title {
		font-size: 1.4rem;
		font-weight: 700;
		color: rgb(var(--black));
		margin: 0 0 1.15rem;
		display: flex;
		align-items: center;
		gap: 0.6rem;
		letter-spacing: 0.01em;
	}
	.section-title::before {
		content: '';
		width: 4px;
		height: 1.05em;
		border-radius: var(--radius-pill);
		background: var(--accent);
		flex-shrink: 0;
	}
	/* 状況別ナビ */
	.purpose-nav { margin-bottom: 3rem; }
	.entry-links {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
	.entry-link {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		padding: 1.35rem;
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-card);
		background: var(--card-bg);
		box-shadow: var(--box-shadow);
		transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
		color: rgb(var(--gray-dark));
		font-size: 0.9rem;
		line-height: 1.7;
		text-decoration: none;
	}
	.entry-link-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 10px;
		background: var(--surface-soft);
		color: var(--accent);
		flex-shrink: 0;
	}
	.entry-link-head {
		display: flex;
		align-items: center;
		gap: 0.35rem;
	}
	.entry-link-title {
		color: var(--article-heading);
		font-size: 1rem;
		font-weight: 700;
		min-width: 0;
	}
	.entry-link-chevron {
		color: var(--accent);
		flex-shrink: 0;
		transition: transform 0.18s ease;
	}
	.entry-link:focus-visible {
		border-color: var(--accent-dark);
		outline: 2px solid rgba(var(--accent-rgb), 0.6);
		outline-offset: 2px;
		color: rgb(var(--gray-dark));
	}
	@media (hover: hover) and (pointer: fine) {
		.entry-link:hover {
			transform: translateY(-3px);
			box-shadow: var(--box-shadow-hover);
			border-color: rgba(var(--accent-rgb), 0.28);
			color: rgb(var(--gray-dark));
		}
		.entry-link:hover .entry-link-chevron {
			transform: translateX(3px);
		}
	}

	/* はじめての人の順路 */
	.beginner-steps {
		margin-bottom: 3rem;
		scroll-margin-top: 120px;
	}
	.step-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
	.step-item {
		margin: 0;
		min-width: 0;
	}
	.step-card { margin-bottom: 0; height: 100%; }
	.step-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin-bottom: 0.5rem;
		border: 1.5px solid rgba(var(--accent-rgb), 0.35);
		border-radius: var(--radius-pill);
		color: var(--accent-dark);
		font-size: 0.85rem;
		font-weight: 700;
	}

	/* 1週間の進め方の入口。元サイトの「ゲームから探す」と同じ形 */
	.game-nav { margin-bottom: 3rem; }
	.game-nav-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	.game-nav-card {
		display: inline-flex;
		align-items: baseline;
		gap: 0.6rem;
		padding: 0.7rem 1.25rem;
		border: 1.5px solid var(--border-soft);
		border-radius: var(--radius-pill);
		background: var(--card-bg);
		box-shadow: var(--box-shadow);
		text-decoration: none;
		transition: border-color 0.15s, background 0.15s, transform 0.18s ease, box-shadow 0.18s ease;
	}
	.game-nav-name {
		font-size: 1rem;
		font-weight: 700;
		color: rgb(var(--black));
	}
	.game-nav-count {
		font-size: 0.82rem;
		color: rgb(var(--gray-dark));
	}
	.game-nav-chevron {
		align-self: center;
		color: var(--accent);
		flex-shrink: 0;
		transition: transform 0.18s ease;
	}
	@media (hover: hover) and (pointer: fine) {
		.game-nav-card:hover {
			border-color: var(--accent);
			background: var(--surface-soft);
			transform: translateY(-2px);
			box-shadow: var(--box-shadow-hover);
		}
		.game-nav-card:hover .game-nav-chevron {
			transform: translateX(3px);
		}
	}

	/* カテゴリ別一覧 */
	.category-section { margin-bottom: 3rem; }
	.category-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}
	.category-grid .card { margin-bottom: 0; }
	.category-grid .card-body { padding: 0.95rem 1rem; }
	.category-grid .card-title { font-size: 0.95rem; }

	/* 2カラムレイアウト */
	.content-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 3.75rem;
		align-items: start;
	}
	.content-main {
		min-width: 0;
	}

	.post-list-more {
		margin: 1.5rem 0 0;
		text-align: center;
	}
	.post-list-more a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 0.55rem 1.6rem;
		border: 1.5px solid var(--accent);
		border-radius: var(--radius-btn);
		color: var(--accent-dark);
		font-size: 0.9rem;
		font-weight: 700;
		text-decoration: none;
	}
	@media (hover: hover) and (pointer: fine) {
		.post-list-more a:hover {
			background: var(--accent-fill);
			border-color: var(--accent-fill);
			color: #fff;
		}
	}

	/* レスポンシブ */
	@media (min-width: 901px) and (max-width: 1100px) {
		.content-main .category-grid,
		.content-main .entry-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media (max-width: 900px) {
		.content-row { grid-template-columns: minmax(0, 1fr); }
		.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media (max-width: 640px) {
		.page-wrap { padding: 1.25rem 1rem 2rem; }
		.section-title { font-size: 1.25rem; }
		.entry-links {
			grid-template-columns: 1fr;
			gap: 0.75rem;
		}
		.entry-link {
			display: grid;
			grid-template-columns: 40px 1fr;
			column-gap: 0.85rem;
			row-gap: 0.3rem;
			padding: 1rem 1.1rem;
			align-items: start;
		}
		.entry-link-icon {
			grid-row: span 2;
			align-self: start;
			width: 40px;
			height: 40px;
		}
		.step-list { grid-template-columns: 1fr; }
		.category-grid { grid-template-columns: 1fr; }
	}

/* Source: CategoryHubSection.astro（記事一覧のカテゴリ別の入口） */

	.category-hub-section {
		margin: 0 0 2.5rem;
	}

	.category-hub-title {
		font-size: 1.3rem;
		font-weight: 700;
		color: rgb(var(--black));
		margin: 0 0 1.15rem;
		display: flex;
		align-items: center;
		gap: 0.6rem;
		letter-spacing: 0.01em;
	}

	.category-hub-title::before {
		content: '';
		width: 4px;
		height: 1.05em;
		border-radius: var(--radius-pill);
		background: var(--accent);
		flex-shrink: 0;
	}

	.category-hub-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}

	/* 元サイトはカテゴリ名を画像に焼いている。ここではアイコンと名前をHTMLで同じ配置に置く */
	.tile {
		position: relative;
		display: flex;
		align-items: center;
		gap: 0.9rem;
		aspect-ratio: 16 / 9;
		padding: 1rem 1.1rem 1.4rem;
		border-radius: var(--radius-tile);
		overflow: hidden;
		background: var(--card-bg);
		border: 1px solid var(--border-soft);
		color: var(--accent-dark);
		text-decoration: none;
		box-shadow: var(--box-shadow);
		transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.15s;
	}

	@media (hover: hover) and (pointer: fine) {
		.tile:hover {
			transform: translateY(-3px);
			background: var(--raised-bg);
			box-shadow: var(--box-shadow-hover);
			color: var(--accent-dark);
		}
	}

	.tile-icon {
		display: inline-flex;
		flex-shrink: 0;
		color: var(--accent);
	}
	.tile-icon svg, .tile-icon .category-icon {
		width: 72px;
		height: 72px;
		stroke-width: 1.5;
	}

	.tile-name {
		flex: 1;
		min-width: 0;
		font-size: 1.15rem;
		font-weight: 700;
		line-height: 1.45;
		text-align: center;
	}

	/* 本数だけ右下に小さく重ねる */
	.tile-count {
		position: absolute;
		right: 0.6rem;
		bottom: 0.5rem;
		font-size: 0.7rem;
		font-weight: 700;
		color: rgb(var(--gray));
	}

	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	@media (max-width: 900px) {
		.category-hub-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
		}
		.tile { gap: 0.6rem; padding: 0.8rem 0.8rem 1.3rem; }
		.tile-icon svg, .tile-icon .category-icon { width: 48px; height: 48px; }
		.tile-name { font-size: 0.95rem; }
	}
	/* スマホ幅はアイコンを上、名前を下に積んで本数と重ねない */
	@media (max-width: 560px) {
		.tile { flex-direction: column; justify-content: center; gap: 0.35rem; aspect-ratio: auto; min-height: 8.5rem; padding: 0.8rem 0.6rem 1.5rem; }
		.tile-icon svg, .tile-icon .category-icon { width: 36px; height: 36px; }
		.tile-name { flex: 0 0 auto; font-size: 0.85rem; }
	}

/* Source: HubPageIntro.astro */

	.hub-page-intro {
		margin-bottom: 2.25rem;
		padding: 0 0 0.25rem;
		border-bottom: none;
	}

	.hub-page-intro-title {
		margin: 0 0 0.7rem;
		font-size: 2.35rem;
		font-weight: 700;
		line-height: 1.3;
		color: rgb(var(--black));
		letter-spacing: -0.01em;
	}

	.hub-page-intro-description {
		margin: 0;
		max-width: 46em;
		font-size: 1.05rem;
		line-height: 1.85;
		color: rgb(var(--gray-dark));
	}

	@media (max-width: 640px) {
		.hub-page-intro {
			margin-bottom: 1.75rem;
		}
		.hub-page-intro-title {
			font-size: 1.7rem;
		}
	}

/* Source: BlogPost.astro */

	/* レイアウト */
	.article-page.page-wrap {
		max-width: 1300px;
		margin: 0 auto;
		padding: 0 1.25rem;
	}
	.article-page .content-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 3.75rem;
		align-items: start;
	}
	main { min-width: 0; }
	/* 記事タイトルの上余白（.article-header の padding-top）に合わせて開始位置を揃える */
	.article-page .sidebar {
		padding-top: 1.75rem;
	}

	/* 記事ヘッダー */
	.article-header {
		max-width: 800px;
		margin: 0 auto;
		padding: 1.75rem 0 1.5rem;
		border-bottom: 1px solid var(--article-border-light);
	}
	.date-block {
		font-size: 0.9rem;
		color: rgb(var(--gray));
		font-weight: 500;
		margin: 0 0 0.75rem;
		letter-spacing: 0.04em;
	}
	.article-header-body {
		min-width: 0;
	}
	.article-page h1 {
		font-size: 32px;
		line-height: 1.4;
		font-weight: 700;
		letter-spacing: 0.01em;
		color: var(--article-heading);
		margin: 0 0 0.6rem;
	}
	.article-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35rem 0.5rem;
		align-items: center;
		font-size: 0.86rem;
		color: rgb(var(--gray));
		margin: 0;
		line-height: 1.6;
	}
	.meta-separator {
		color: var(--article-border);
	}
	.meta-category {
		color: var(--accent-dark);
		font-weight: 700;
		text-decoration: none;
	}
	@media (hover: hover) and (pointer: fine) {
		.meta-category:hover {
			text-decoration: underline;
		}
	}
	.meta-tag {
		color: rgb(var(--gray-dark));
		text-decoration: none;
	}
	@media (hover: hover) and (pointer: fine) {
		.meta-tag:hover {
			color: var(--accent-dark);
			text-decoration: underline;
		}
	}
	.meta-promotion {
		font-size: 0.78rem;
		color: rgb(var(--gray));
	}

	/* アフィリエイトボタン（サバメモのAffiliateButtonに合わせる） */
	.affiliate-btn-wrap {
		text-align: center;
		margin: 1.75rem 0;
	}
	.affiliate-btn-note {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin: 0 0 0.5rem;
		font-size: 0.82rem;
		color: rgb(var(--gray-dark));
		line-height: 1.5;
	}
	.affiliate-btn-note span {
		font-weight: 700;
	}
	.affiliate-btn {
		position: relative;
		overflow: hidden;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		max-width: 100%;
		padding: 0.95rem 2.25rem;
		border-radius: var(--radius-pill);
		background: #2ea56b;
		color: #fff;
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.3;
		text-decoration: none;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
		transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	}
	.prose .affiliate-btn,
	.prose .affiliate-btn:visited {
		color: #fff;
		text-decoration: none;
	}
	.affiliate-btn-arrow {
		font-size: 1.1em;
		transition: transform 0.15s ease;
	}
	@media (hover: hover) and (pointer: fine) {
		.affiliate-btn:hover {
			opacity: 0.9;
			transform: translateY(-2px);
			box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
		}
		.affiliate-btn:hover .affiliate-btn-arrow {
			transform: translateX(3px);
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.affiliate-btn,
		.affiliate-btn-arrow {
			transition: none;
		}
	}

	/* ヒーロー画像 */
	.hero-img {
		display: block;
		width: 100%;
		max-width: 800px;
		height: auto;
		margin: 21px auto 0;
	}

	/* テキスト選択 */
	::selection {
		background: rgba(var(--accent-rgb), 0.25);
		color: var(--article-heading);
	}

	/* 記事末フッター（.proseの外に置いてリンク色の干渉を防ぐ） */
	.article-footer {
		padding: 0 0 3rem;
		max-width: 800px;
		margin: 0 auto;
	}

	.prose .toc {
		border: 1px solid var(--border-soft);
		border-radius: var(--radius-card);
		padding: 1.15rem 1.5rem 1.35rem;
		margin: 0 0 2rem;
		background: var(--surface-soft);
	}
	.prose .toc-summary {
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--article-heading);
		cursor: pointer;
		padding: 0 0 0.6rem;
		border-bottom: 1px solid var(--border-soft);
		margin-bottom: 0.75rem;
		list-style: none;
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
	.prose .toc-summary::-webkit-details-marker {
		display: none;
	}
	.prose .toc-summary::after {
		content: '';
		margin-left: auto;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid rgb(var(--gray));
		border-bottom: 1.5px solid rgb(var(--gray));
		transform: rotate(-135deg);
		transition: transform 0.15s;
	}
	.prose .toc:not([open]) .toc-summary {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.prose .toc:not([open]) .toc-summary::after {
		transform: rotate(45deg);
	}
	.prose .toc-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.prose .toc-main,
	.prose .toc-sub {
		margin-bottom: 0.35rem;
		line-height: 1.5;
	}
	.prose .toc-main a,
	.prose .toc-sub a {
		font-size: 0.88rem;
		color: rgb(var(--gray-dark));
		text-decoration: none;
	}
	@media (hover: hover) and (pointer: fine) {
		.prose .toc-main a:hover,
		.prose .toc-sub a:hover {
			color: var(--accent);
			text-decoration: underline;
			text-underline-offset: 0.15em;
		}
	}
	.prose .toc-sub {
		padding-left: 1.25rem;
	}
	.prose .toc-sub a {
		font-size: 0.83rem;
		color: rgb(var(--gray));
	}

	/* 本文 */
	.prose {
		padding: 2.25rem 0 1.5rem;
		color: var(--article-text);
		font-size: 15.5px;
		line-height: 1.75;
		max-width: 800px;
		margin: 0 auto;
	}
	/* 見出しはサバメモ独自。角丸の淡いティール地 */
	.prose h2 {
		position: relative;
		font-size: 22px;
		font-weight: 700;
		color: var(--article-heading);
		background: var(--surface-soft);
		border-radius: 12px;
		padding: 0.6em 1em;
		margin: 34px 0 18px;
		border-bottom: none;
		letter-spacing: 0.01em;
		line-height: 1.55;
	}
	/* h3はマイクラのブロックを思わせる小さな四角を先頭に置く */
	.prose h3 {
		position: relative;
		font-size: 19px;
		font-weight: 700;
		color: var(--article-heading);
		margin: 32px 0 12px;
		padding: 0 0 0.45em 1.15em;
		border-bottom: 2px solid var(--border-soft);
		line-height: 1.6;
	}
	.prose h3::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.5em;
		width: 11px;
		height: 11px;
		border-radius: 3px;
		background: var(--accent);
	}
	.prose h4 {
		font-size: 17px;
		font-weight: 700;
		color: var(--article-heading);
		margin: 24px 0 8px;
		padding-left: 0.7rem;
		border-left: 4px solid rgba(var(--accent-rgb), 0.45);
		line-height: 1.7;
	}
	.prose p {
		margin: 0 0 22px;
	}
	.prose ul {
		list-style: none;
		padding-left: 1.25em;
	}
	.prose ul li {
		position: relative;
	}
	.prose ul li::before {
		content: '';
		position: absolute;
		left: -1em;
		top: 0.7em;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--accent);
	}
	.prose ol {
		padding-left: 1.5em;
	}
	.prose ol li::marker {
		color: var(--accent);
		font-weight: 700;
	}
	.prose ul,
	.prose ol {
		margin-bottom: 1em;
	}
	.prose li {
		line-height: 1.7;
		margin-bottom: 0.5em;
	}
	.prose strong {
		font-weight: 700;
		color: var(--article-heading);
		background: linear-gradient(transparent 60%, rgba(var(--accent-rgb), 0.26) 60%);
		padding-bottom: 0.05em;
	}
	.prose a strong,
	.prose h2 strong,
	.prose h3 strong,
	.prose h4 strong {
		background: none;
		color: inherit;
	}
	.prose a {
		color: var(--accent-dark);
		text-decoration: underline;
		text-decoration-color: rgba(var(--accent-rgb), 0.4);
		text-underline-offset: 0.2em;
		text-decoration-thickness: 1px;
		transition: text-decoration-color 0.15s;
	}
	@media (hover: hover) and (pointer: fine) {
		.prose a:hover {
			text-decoration-color: var(--accent-dark);
		}
	}
	.prose figure {
		margin: 2rem 0;
	}
	.prose img {
		display: block;
		max-width: 100%;
		height: auto;
	}
	/* 図解と挿絵：diagram.py と illustration.py が 1200×800 で描き、AVIF/WebPで配る画像。本文幅いっぱいに出し、PCでは720pxで止める */
	.prose figure.diagram,
	.prose figure.illustration {
		margin: 1.75rem auto 2rem;
		max-width: 720px;
	}
	.prose figure.diagram img,
	.prose figure.illustration img {
		display: block;
		width: 100%;
		height: auto;
	}
	/* 図解の枠は画像に描いたアクセント色の線（diagram.py の FRAME_RADIUS＝28px/1200×800）。角の外側を同じ半径で切る */
	.prose figure.diagram img {
		border-radius: 2.33% / 3.5%;
	}
	/* 実際のDiscord画面：screenshot.py。撮影時の大きさを上限にし、拡大してぼかさない */
	.prose figure.screenshot {
		margin: 1.25rem auto 1.75rem;
		width: fit-content;
		max-width: 100%;
	}
	.prose figure.screenshot img {
		display: block;
		max-width: min(100%, 560px);
		height: auto;
		border: 1px solid var(--article-border);
		border-radius: 8px;
	}
	.prose hr {
		border: none;
		height: 1px;
		background: linear-gradient(to right, transparent, var(--article-border), transparent);
		margin: 2.5rem 0;
	}
	.prose table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.95rem;
		margin: 2rem 0;
	}
	.prose th,
	.prose td {
		border: 1px solid var(--article-border);
		padding: 0.75rem 1rem;
		text-align: left;
		vertical-align: top;
	}
	.prose th {
		background: var(--article-sub-bg);
		font-weight: 700;
		color: var(--article-heading);
	}
	.prose code:not(.expressive-code code) {
		font-family: var(--font-mono);
		font-size: 0.9em;
		background: var(--article-border-light);
		padding: 0.15em 0.4em;
		border-radius: 3px;
		color: var(--article-heading);
		overflow-wrap: anywhere;
	}
	/* 表のセル内のコードは単語の途中で折り返さない。
	   ポート番号のような短い値が1文字ずつ縦に割れるのを防ぐ。 */
	.prose th code:not(.expressive-code code),
	.prose td code:not(.expressive-code code) {
		overflow-wrap: normal;
		word-break: keep-all;
	}
	.prose blockquote {
		margin: 1.75rem 0;
		padding: 1rem 1.25rem;
		border-left: 4px solid var(--accent);
		border-radius: 0 var(--radius-card) var(--radius-card) 0;
		background: var(--surface-soft);
		color: var(--article-text);
		font-style: normal;
	}
	/* レスポンシブ */
	@media (max-width: 900px) {
		.article-page .content-row { grid-template-columns: minmax(0, 1fr); }
		.article-page .sidebar {
			padding-top: 1.5rem;
			border-top: 1px solid var(--article-border);
		}
	}
	@media (max-width: 640px) {
		/* スマホはタイトル・画像・本文の左端を16pxの余白1本にそろえる。 */
		.article-page.page-wrap { padding: 0 1rem; }
		.article-header { padding: 1.25rem 0 1rem; }
		.prose { padding: 1.5rem 0 2rem; font-size: 16px; line-height: 1.8; }
		.article-footer { padding: 0 0 2rem; }
		/* 記事タイトルを本文の見出しより一段大きくする。 */
		.article-page h1 { font-size: 1.5rem; line-height: 1.45; }
		.prose h2 { font-size: 19px; padding: 0.55em 0.85em; margin: 32px 0 16px; }
		.prose h3 { font-size: 17px; }
		.hero-img { margin-top: 16px; border-radius: var(--radius-card); }

		/* 表は本文と同じ幅に揃え、入らない表だけ横スクロールさせる。 */
		.prose table {
			display: block;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			width: 100%;
			font-size: 0.82rem;
		}
		.prose th,
		.prose td {
			padding: 0.5rem;
		}
		/* 1列目が2〜3文字幅まで潰れて縦に割れるのを防ぐ。 */
		.prose th:first-child,
		.prose td:first-child {
			min-width: 6.5em;
		}
		/* 列の多い比較表は1文字ずつ縦に割れないよう幅を保ち、横スクロールで読ませる。 */
		.prose td {
			min-width: 7.5em;
		}
	}

/* Source: Footer.astro */

	footer {
		margin-top: 3rem;
		padding: 2.75rem 1.25rem 3.5rem;
		background: var(--card-bg);
		border-top: 1px solid var(--border-soft);
		color: rgb(var(--gray-dark));
	}
	.footer-inner {
		max-width: 1300px;
		margin: 0 auto;
	}

	.footer-brand {
		margin-bottom: 2rem;
	}
	.footer-logo {
		margin: 0;
		font-size: 1.3rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--accent-dark);
	}
	.footer-tagline {
		margin: 0.1rem 0 0;
		font-size: 0.88rem;
		color: rgb(var(--gray));
	}

	.footer-cols {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.75rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid var(--article-border-light);
	}
	.footer-col-title {
		margin: 0 0 0.75rem;
		font-size: 0.95rem;
		font-weight: 700;
		color: var(--article-heading);
	}
	.footer-col ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	.footer-col a {
		font-size: 0.92rem;
		color: rgb(var(--gray-dark));
		text-decoration: none;
		transition: color 0.15s;
	}
	@media (hover: hover) and (pointer: fine) {
		.footer-col a:hover {
			color: var(--accent);
		}
	}

	.footer-bottom {
		padding-top: 1.75rem;
	}
	.disclaimer-note {
		font-size: 0.83rem;
		line-height: 1.7;
		color: rgb(var(--gray));
		margin: 0 0 0.6rem;
	}
	.copyright {
		margin: 1rem 0 0;
		font-size: 0.88rem;
		color: rgb(var(--gray));
	}

	/* 4列だとタブレット幅で「セキュリティ・荒らし対策」などが折り返すので2列へ落とす */
	@media (max-width: 900px) {
		.footer-cols {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 640px) {
		footer {
			padding: 2.25rem 1.25rem 3rem;
		}
		.footer-cols {
			grid-template-columns: 1fr;
			gap: 1.5rem;
		}
	}

/* Source: Sidebar.astro (complete component styles) */

	.sidebar {
		display: flex;
		min-width: 0;
		flex-direction: column;
		gap: 1.5rem;
	}
	.sidebar-search-form {
		display: flex;
		min-width: 0;
		gap: 0.4rem;
	}
	.sidebar-search-input {
		flex: 1;
		min-width: 0;
		padding: 0.5em 0.8em;
		border: 1.5px solid var(--border-soft);
		border-radius: var(--radius-pill);
		font-size: 0.95rem;
		font-family: inherit;
		background: var(--bg);
		color: rgb(var(--gray-dark));
		outline: none;
		transition: border-color 0.15s, box-shadow 0.15s;
	}
	.sidebar-search-input::placeholder {
		color: rgb(var(--gray));
	}
	.sidebar-search-input:focus {
		border-color: var(--accent);
		box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
	}
	.sidebar-search-btn {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: none;
		border-radius: var(--radius-btn);
		background: var(--accent-fill);
		color: #fff;
		cursor: pointer;
		transition: background 0.15s;
	}
	@media (hover: hover) and (pointer: fine) {
		.sidebar-search-btn:hover {
			background: var(--accent-fill-hover);
		}
	}
	.profile-widget {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.5rem;
	}
	.profile-icon {
		width: 96px;
		height: 96px;
		border-radius: 50%;
		object-fit: cover;
		border: 4px solid var(--card-bg);
		box-shadow: 0 0 0 3px var(--accent);
	}
	.profile-name {
		font-weight: 700;
		font-size: 1.1rem;
		margin: 0;
		color: rgb(var(--gray-dark));
	}
	.profile-title {
		font-size: 0.85rem;
		color: var(--accent);
		margin: 0.1rem 0 0;
	}
	.profile-bio {
		font-size: 0.92rem;
		color: rgb(var(--gray));
		margin: 0;
		line-height: 1.5;
	}
	.profile-link {
		display: inline-block;
		font-size: 0.92rem;
		color: var(--accent-dark);
		border: 1.5px solid var(--accent);
		border-radius: var(--radius-btn);
		padding: 0.25em 1em;
		text-decoration: none;
		transition: background 0.15s, color 0.15s;
		margin-top: 0.25rem;
	}
	@media (hover: hover) and (pointer: fine) {
		.profile-link:hover {
			background: var(--accent-fill);
			border-color: var(--accent-fill);
			color: #fff;
		}
	}
	.community-kicker {
		margin: 0;
		font-size: 0.72rem;
		font-weight: 700;
		line-height: 1.3;
		color: var(--accent);
	}
	.community-title {
		margin: 0.25rem 0 0;
		font-size: 1.08rem;
		font-weight: 700;
		line-height: 1.5;
		color: var(--article-heading);
	}
	.community-lead {
		margin: 0.55rem 0 0;
		font-size: 0.93rem;
		line-height: 1.65;
		color: rgb(var(--gray-dark));
	}
	.community-link {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 1rem;
		padding: 0.75rem 0.9rem;
		border-radius: var(--radius-btn);
		background: var(--accent-fill);
		color: #fff;
		font-size: 0.95rem;
		font-weight: 700;
		line-height: 1.4;
		text-decoration: none;
		transition: background 0.15s, transform 0.15s;
	}
	@media (hover: hover) and (pointer: fine) {
		.community-link:hover {
			background: var(--accent-fill-hover);
			transform: translateY(-1px);
		}
	}
	.widget {
		background: var(--card-bg);
		border-radius: var(--radius-card);
		padding: 1.4rem 1.35rem;
		border: 1px solid var(--border-soft);
		box-shadow: var(--box-shadow);
	}
	.widget-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 1.02rem;
		font-weight: 700;
		color: var(--article-heading);
		border-bottom: 1px solid var(--article-border-light);
		padding-bottom: 0.6rem;
		margin-bottom: 1rem;
	}
	.widget-title::before {
		content: '';
		width: 3px;
		height: 0.95em;
		border-radius: var(--radius-pill);
		background: var(--accent);
		flex-shrink: 0;
	}
	.featured-post-widget {
		padding: 1.25rem;
	}
	@media (max-width: 900px) {
		.featured-post-widget {
			order: -1;
		}
	}
	.featured-post-card {
		display: block;
		color: inherit;
		text-decoration: none;
		transition: transform 0.18s ease;
	}
	@media (hover: hover) and (pointer: fine) {
		.featured-post-card:hover {
			transform: translateY(-2px);
		}
	}
	.featured-post-heading {
		position: relative;
		margin: 0 0 0.7rem;
		padding-left: 0.8rem;
		font-size: 0.88rem;
		font-weight: 700;
		line-height: 1.5;
		color: rgb(var(--gray-dark));
		transition: color 0.15s;
	}
	.featured-post-heading::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.2rem;
		bottom: 0.2rem;
		width: 4px;
		border-radius: var(--radius-pill);
		background: var(--accent);
	}
	@media (hover: hover) and (pointer: fine) {
		.featured-post-card:hover .featured-post-heading {
			color: rgb(var(--gray-dark));
		}
	}
	.featured-post-frame {
		overflow: hidden;
		border-radius: calc(var(--radius-card) - 4px);
	}
	.featured-post-thumb {
		width: 100%;
		aspect-ratio: 40 / 21;
		display: block;
		object-fit: contain;
		background: rgb(var(--gray-light));
	}
	.category-list,
	.recent-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	.tag-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.tag-chip {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.3em 0.5em 0.3em 0.8em;
		border: 1px solid rgb(var(--gray-light));
		border-radius: var(--radius-pill);
		font-size: 0.9rem;
		color: rgb(var(--gray-dark));
		text-decoration: none;
		transition: background 0.15s, color 0.15s;
	}
	@media (hover: hover) and (pointer: fine) {
		.tag-chip:hover {
			background: rgba(var(--accent-rgb), 0.1);
			color: var(--accent);
		}
	}
	.category-list li a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.4em 0.7em;
		border-radius: var(--radius-pill);
		font-size: 0.97rem;
		color: rgb(var(--gray-dark));
		transition: background 0.15s, color 0.15s;
	}
	@media (hover: hover) and (pointer: fine) {
		.category-list li a:hover {
			background: rgba(var(--accent-rgb), 0.1);
			color: var(--accent);
		}
	}
	.count {
		font-size: 0.8rem;
		background: rgb(var(--gray-light));
		color: rgb(var(--gray-dark));
		padding: 1px 8px;
		border-radius: var(--radius-pill);
	}
	.recent-list li a {
		display: block;
		font-size: 0.95rem;
		color: rgb(var(--gray-dark));
		padding: 0.3em 0;
		border-bottom: 1px solid var(--article-border-light);
		line-height: 1.45;
		transition: color 0.15s;
	}
	.recent-list li:last-child a {
		border-bottom: none;
	}
	@media (hover: hover) and (pointer: fine) {
		.recent-list li a:hover {
			color: var(--accent);
		}
	}

/* Source: RelatedArticlesSection.astro */

	.related-posts {
		margin-top: 3.25rem;
	}

	.related-posts-list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem 0.85rem;
		margin-top: 1.1rem;
	}

	.related-post-card {
		display: flex;
		flex-direction: column;
		gap: 0;
		text-decoration: none !important;
		color: inherit;
		transition: opacity 0.15s ease;
	}

	@media (hover: hover) and (pointer: fine) {
		.related-post-card:hover {
			opacity: 0.76;
		}
	}

	.related-post-card-thumb {
		line-height: 0;
		border-radius: 4px;
		overflow: hidden;
		background: rgb(var(--gray-light));
	}

	.related-post-card-thumb > picture,
	.related-post-card-thumb > img {
		display: block;
		width: 100%;
	}

	.related-post-card-thumb img {
		width: 100%;
		display: block;
		height: auto;
		border-radius: 4px;
	}

	.related-post-card-body {
		min-width: 0;
		display: flex;
		flex-direction: column;
		padding-top: 0.3rem;
	}

	.related-post-card-category {
		display: inline-block;
		font-size: 0.68rem;
		color: var(--accent);
		font-weight: 600;
		margin-bottom: 0.15rem;
		line-height: 1.3;
	}

	.related-post-card-title {
		display: block;
		font-size: 0.84rem;
		font-weight: 700;
		line-height: 1.55;
		color: var(--article-heading);
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden;
	}

	@media (max-width: 980px) {
		.related-posts-list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 640px) {
		.related-posts-list {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 0.6rem 0.5rem;
		}

		.related-post-card-category {
			font-size: 0.62rem;
		}

		.related-post-card-title {
			font-size: 0.75rem;
		}
	}

/* Discord-specific template adapters. Photo credits are collected on /credits/. */
.article-list { list-style:none;padding:0;margin:0 }
.article-list>li { margin-bottom:1.15rem }
.card-v .card-img { flex-shrink:0 }
.article-page { background:var(--bg) }
.article-page article { min-width:0 }
.info { max-width:800px }
.search { display:block;width:100%;padding:.8rem 1rem;font:inherit;border:1px solid var(--border-soft);border-radius:var(--radius-btn);background:var(--card-bg);color:rgb(var(--black));scroll-margin-top:120px }
.search::placeholder { color:rgb(var(--gray)) }
#search-status { font-size:.9rem;color:rgb(var(--gray));margin:.6rem 0 }
[hidden] { display:none!important }
:focus-visible { outline:3px solid var(--accent);outline-offset:4px }
@media(max-width:640px) { .article-page .sidebar { padding:1.5rem 0 } .info { padding-top:.5rem } .info h1 { font-size:1.5rem;line-height:1.45 } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*::before,*::after { transition:none!important;animation:none!important } }

/* Editorial thumbnails: exact 40:21 ratio prevents clipping and layout shifts. */
.article-thumbnail { margin: 0 auto; max-width: 800px; }
.article-thumbnail img { aspect-ratio: 40 / 21; }

/* Source: NextReadSection.astro */

	.next-read {
		margin-top: 1rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--article-border);
	}

	.next-read-label {
		font-size: 0.8rem;
		font-weight: 700;
		color: rgb(var(--gray));
		text-transform: uppercase;
		letter-spacing: 0.08em;
		margin: 0 0 0.75rem;
	}

	.next-read-buttons {
		display: flex;
		flex-direction: column;
		gap: 0.6rem;
	}

	.next-read-btn {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 1rem 1.25rem;
		border: 2px solid var(--accent);
		border-radius: var(--radius-btn);
		background: var(--card-bg);
		color: var(--accent-dark);
		text-decoration: none;
		font-weight: 700;
		transition: background 0.15s, color 0.15s;
	}

	@media (hover: hover) and (pointer: fine) {
		.next-read-btn:hover {
			background: var(--accent-fill);
			border-color: var(--accent-fill);
			color: #fff;
		}
	}

	.next-read-btn-title {
		flex: 1;
		font-size: 0.92rem;
		line-height: 1.5;
	}

	.next-read-btn-arrow {
		flex-shrink: 0;
		font-size: 1.05rem;
	}

	.next-read-btn--back {
		background: var(--accent-fill);
		border-color: var(--accent-fill);
		color: #fff;
	}

	@media (hover: hover) and (pointer: fine) {
		.next-read-btn--back:hover {
			background: var(--accent-fill-hover);
			border-color: var(--accent-fill-hover);
		}
	}

	.next-read-more {
		display: inline-block;
		margin-top: 0.9rem;
		font-size: 0.82rem;
		color: rgb(var(--gray));
		text-decoration: none;
		transition: color 0.15s;
	}

	@media (hover: hover) and (pointer: fine) {
		.next-read-more:hover {
			color: var(--accent-dark);
		}
	}

	.next-read-revenue {
		margin-top: 1.25rem;
		padding: 1.1rem 1.25rem;
		border: 1px solid var(--article-border);
		border-radius: var(--radius-card);
		background: var(--card-bg);
	}

	.next-read-revenue-note {
		margin: 0 0 0.75rem;
		font-size: 0.85rem;
		line-height: 1.6;
		color: rgb(var(--gray));
	}

	.next-read-revenue-link {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		font-weight: 700;
		font-size: 0.92rem;
		color: var(--accent-dark);
		text-decoration: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.next-read-revenue-link:hover {
			text-decoration: underline;
		}
	}

	.next-read-revenue-title {
		flex: 1;
	}

.credit-list { list-style: none; padding-left: 0; }
.credit-item { border-top: 1px solid var(--article-border); padding: .75rem 0; }
.credit-item p { margin: 0; }
.credit-detail { font-size: .875rem; color: rgb(var(--gray)); }

/* Source: FaqSection.astro at ad79467 */

  .faq-item {
    border: 1px solid var(--article-border);
    border-radius: var(--article-radius);
    margin: 1.25rem 0;
    overflow: hidden;
  }

  .faq-q,
  .faq-a {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    align-items: flex-start;
  }

  .faq-q {
    background: var(--article-sub-bg);
    cursor: pointer;
    list-style: none;
  }

  .faq-q::-webkit-details-marker {
    display: none;
  }

  .faq-q::after {
    content: '+';
    color: rgb(var(--gray));
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
    margin-left: auto;
    padding-left: 0.5rem;
  }

  .faq-item[open] .faq-q {
    border-bottom: 1px solid var(--article-border-light);
  }

  .faq-item[open] .faq-q::after {
    content: '−';
  }

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

  @media (hover: hover) and (pointer: fine) {
    .faq-q:hover {
      filter: brightness(1.12);
    }
  }

  .faq-label {
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    min-width: 1.25rem;
    line-height: 1.6;
  }

  .faq-label--q {
    color: var(--accent);
  }

  .faq-label--a {
    color: rgb(var(--gray));
  }

  .faq-q-text,
  .faq-a-text {
    margin: 0;
    line-height: 1.6;
  }

  .faq-q-text {
    font-weight: 600;
  }

/* Source: Note.astro at ad79467 */

  .note-block {
    background: var(--article-sub-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--article-radius);
    padding: 0.875rem 1.25rem;
    margin: 1.2rem 0;
  }

  .note-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
  }

  .note-icon {
    color: var(--accent);
    flex-shrink: 0;
  }

  .note-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-dark);
    letter-spacing: 0.05em;
  }

  .note-title {
    font-weight: 700;
    line-height: 1.5;
    color: var(--accent-dark);
  }

  .note-content p {
    margin: 0;
  }

  .note-content p + p {
    margin-top: 0.6em;
  }

  .note-content ul,
  .note-content ol {
    margin: 0.4em 0;
    padding-left: 1.5em;
  }

  .note-content li {
    margin: 0;
  }

/* 運営者の体験を本文と分けて見せる吹き出し */

  .owner-voice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.4rem 0;
  }

  .owner-voice-person {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width: 3.5rem;
  }

  .owner-voice-avatar {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 2px solid var(--border-soft);
    object-fit: cover;
  }

  .owner-voice-bubble {
    position: relative;
    flex: 1;
    min-width: 0;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--article-radius);
    padding: 0.75rem 1rem;
  }

  .owner-voice-bubble::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    left: -0.45rem;
    width: 0.8rem;
    height: 0.8rem;
    background: inherit;
    border-left: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    transform: rotate(45deg);
  }

  .owner-voice-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-dark);
  }

  .owner-voice-bubble p {
    margin: 0;
  }

  .owner-voice-bubble p + p {
    margin-top: 0.5em;
  }

/* Source: HighlightBox.astro at ad79467 */

  .highlight-box {
    background: var(--surface-soft);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--article-radius);
    padding: 1rem 1.2rem;
    margin: 1.2rem 0;
  }

  .highlight-box p {
    margin: 0;
  }

  .highlight-box p + p {
    margin-top: 0.7em;
  }

  .highlight-box ul,
  .highlight-box ol {
    margin: 0.4em 0 0;
    padding-left: 1.45em;
  }

  .highlight-box li {
    margin: 0.1em 0;
  }
  .highlight-box .highlight-box-title {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0 0 0.5em;
    font-weight: 700;
    line-height: 1.5;
    color: var(--article-heading);
  }

  .highlight-box-icon {
    flex-shrink: 0;
    margin-top: 0.15em;
    color: var(--accent);
  }

  .highlight-box--danger {
    background: #2c1e23;
    border-color: #5c2d35;
  }

  .highlight-box--danger .highlight-box-title {
    color: #ffa4a4;
  }

  .highlight-box--danger .highlight-box-icon {
    color: #f07a7a;
  }

  .highlight-box--caution {
    background: #2b2619;
    border-color: #5a4a1f;
  }

  .highlight-box--caution .highlight-box-title {
    color: #f3d27f;
  }

  .highlight-box--caution .highlight-box-icon {
    color: #e2ac35;
  }

  .highlight-box--info .highlight-box-title {
    color: var(--accent-dark);
  }

/* Keep sentence-paragraph spacing inside answers and explanatory boxes. */
.prose .faq-a-text p,
.prose .note-content p,
.prose .highlight-box > p:not(.highlight-box-title) { margin: 0 0 22px; }
.prose .faq-a-text p:last-child,
.prose .note-content p:last-child,
.prose .highlight-box > p:last-child { margin-bottom: 0; }
.prose .lead-problems { margin-top: 0; }

/* 1週間の進め方：カテゴリページの段階表示 */
.section-lead { margin: -0.4rem 0 1rem; color: rgb(var(--gray-dark)); font-size: 0.92rem; line-height: 1.8; }
.stage-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0; }
.stage-steps a { display: inline-block; padding: 0.15rem 0.7rem; border: 1px solid var(--article-border-light); border-radius: var(--radius-pill); color: rgb(var(--gray-dark)); font-size: 0.8rem; text-decoration: none; }
.stage-steps a.current { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; font-weight: 700; }
.stage-next { margin: 1.5rem 0 0; font-weight: 700; }

/* カード型リンクはホバーで文字色を変えず、浮き上がりと影だけで反応する */
@media (hover: hover) and (pointer: fine) {
	a.entry-link:hover { color: rgb(var(--gray-dark)); }
	a.card:hover, a.featured-post-card:hover, a.related-post-card:hover { color: inherit; }
}

/* Commands and config files: shown verbatim, scroll sideways instead of wrapping. */
.prose .code-block {
	margin: 0 0 22px;
	border: 1px solid var(--article-border);
	border-radius: 6px;
	background: var(--article-sub-bg);
	overflow: hidden;
}
.prose .code-label {
	padding: 6px 14px;
	border-bottom: 1px solid var(--article-border);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--article-heading);
	overflow-wrap: anywhere;
}
.prose .code-block pre {
	margin: 0;
	padding: 14px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
}
.prose .code-block pre code {
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: inherit;
	color: var(--article-heading);
	overflow-wrap: normal;
	white-space: pre;
}
.prose .code-block--text pre code {
	font-family: inherit;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

/* 記事一覧の「最新順の記事」。元サイトnew.astroの見出し（右へ伸びる線） */
.section-title.list-title { font-size: 1.2rem; gap: 0.75rem; margin-bottom: 1rem; }
.section-title.list-title::before { display: none; }
.section-title.list-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(var(--accent-rgb), 0.4), transparent); }
.list-title + .sr-only + .search { margin-bottom: 0.2rem; }

/* 画像のスケルトンローディング（元サイトglobal.css b46d714） */
img[data-skeleton]:not(.is-loaded) {
	background: linear-gradient(90deg, rgb(var(--gray-light)) 25%, #3a4556 50%, rgb(var(--gray-light)) 75%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	img[data-skeleton]:not(.is-loaded) { animation: none; }
}

/* チャットアプリ風の部品（2026-10-22）。HTMLは変えず、CSSだけで形を寄せる */

/* カテゴリとタグはチャンネル名のように「#」を頭に付ける。アイコンのある近道には付けず、印を二重にしない */
.category-list li a::before,
.tag-chip::before {
	content: '#';
	margin-right: 0.25em;
	color: rgb(var(--gray));
	font-weight: 700;
}
.category-list li a {
	justify-content: flex-start;
	border-radius: 6px;
}
.category-list li a .count { margin-left: auto; }
.tag-chip { border-radius: 6px; background: var(--raised-bg); border-color: transparent; }
.count { background: var(--bg); }

/* サイドバーの見出しは、チャンネル一覧の分類名のように小さく控えめにする */
.widget-title {
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: rgb(var(--gray));
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0.75rem;
}
.widget-title::before { display: none; }

/* spaの吹き出しは、アイコンの横に名前と本文が続くメッセージの形にする */
.owner-voice {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 0.85rem;
	align-items: start;
	margin: 1.4rem 0;
	padding: 0.75rem 1rem;
	border-radius: var(--article-radius);
	background: var(--card-bg);
}
.owner-voice-person { display: contents; }
.owner-voice-person > picture,
.owner-voice-avatar { grid-row: 1 / span 2; grid-column: 1; }
.owner-voice-avatar {
	width: 2.75rem;
	height: 2.75rem;
	border: none;
}
.owner-voice-name {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--accent-dark);
}
.owner-voice-bubble {
	grid-column: 2;
	grid-row: 2;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0.15rem 0 0;
}
.owner-voice-bubble::before { display: none; }

/* 補足の枠は左にアクセントの帯を付ける */
.note-block,
.highlight-box {
	border-left-width: 4px;
	border-left-color: var(--accent);
}
.highlight-box--danger { border-left-color: #f07a7a; }
.highlight-box--caution { border-left-color: #e2ac35; }

/* 明暗の差は変数に集約し、OS指定と手動指定で同じ値を使う。 */
:root[data-theme="light"] {
	color-scheme: light;
	--accent: #347687;
	--accent-light: #4a9ab0;
	--accent-dark: #255868;
	--accent-fill: #347687;
	--accent-fill-hover: #255868;
	--accent-rgb: 52, 118, 135;
	--black: 30, 30, 30;
	--gray: 100, 116, 139;
	--gray-light: 226, 232, 240;
	--gray-dark: 51, 65, 85;
	--bg: #f6f7f9;
	--card-bg: #ffffff;
	--raised-bg: #f1f5f9;
	--box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
	--box-shadow-hover: 0 10px 28px rgba(15, 23, 42, 0.1);
	--surface-soft: rgba(var(--accent-rgb), 0.07);
	--border-soft: rgba(var(--accent-rgb), 0.16);
	--article-text: #3c3c3c;
	--article-heading: #1a1a1a;
	--article-border: #e0e0e0;
	--article-border-light: #f0f0f0;
	--article-sub-bg: #f8f9fa;
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;
		--accent: #347687;
		--accent-light: #4a9ab0;
		--accent-dark: #255868;
		--accent-fill: #347687;
		--accent-fill-hover: #255868;
		--accent-rgb: 52, 118, 135;
		--black: 30, 30, 30;
		--gray: 100, 116, 139;
		--gray-light: 226, 232, 240;
		--gray-dark: 51, 65, 85;
		--bg: #f6f7f9;
		--card-bg: #ffffff;
		--raised-bg: #f1f5f9;
		--box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
		--box-shadow-hover: 0 10px 28px rgba(15, 23, 42, 0.1);
		--surface-soft: rgba(var(--accent-rgb), 0.07);
		--border-soft: rgba(var(--accent-rgb), 0.16);
		--article-text: #3c3c3c;
		--article-heading: #1a1a1a;
		--article-border: #e0e0e0;
		--article-border-light: #f0f0f0;
		--article-sub-bg: #f8f9fa;
	}
}

.theme-toggle { border: 0; padding: 0; cursor: pointer; font: inherit; }
.theme-toggle span { display: flex; }
.theme-toggle .theme-moon, .diagram .diagram-light { display: none; }
:root[data-theme="light"] {
	.theme-toggle .theme-sun, .diagram .diagram-dark { display: none; }
	.theme-toggle .theme-moon { display: flex; }
	.diagram .diagram-light { display: contents; }
}
/* JavaScriptが動かない場合も図解と部品をOSの設定に合わせる。 */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		.theme-toggle .theme-sun, .diagram .diagram-dark { display: none; }
		.theme-toggle .theme-moon { display: flex; }
		.diagram .diagram-light { display: contents; }
	}
}

/* 直書きの暗色もライトでは元の淡色に戻す。 */
:root[data-theme="light"] {
	--danger-bg: #fdf1f1; --danger-border: #f1c6c6; --danger-title: #9f2a2a; --danger-icon: #c93b3b;
	--caution-bg: #fff8e6; --caution-border: #f0dca6; --caution-title: #7a5200; --caution-icon: #c98a00;
	--skeleton-mid: #f1f5f9; --faq-hover: 0.98;
	--count-bg: rgb(var(--gray-light)); --voice-bg: var(--surface-soft);
	--skip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	--menu-backdrop: rgba(15, 23, 42, 0.32); --menu-shadow: -8px 0 24px rgba(15, 23, 42, 0.1);
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--danger-bg: #fdf1f1; --danger-border: #f1c6c6; --danger-title: #9f2a2a; --danger-icon: #c93b3b;
		--caution-bg: #fff8e6; --caution-border: #f0dca6; --caution-title: #7a5200; --caution-icon: #c98a00;
		--skeleton-mid: #f1f5f9; --faq-hover: 0.98;
		--count-bg: rgb(var(--gray-light)); --voice-bg: var(--surface-soft);
		--skip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		--menu-backdrop: rgba(15, 23, 42, 0.32); --menu-shadow: -8px 0 24px rgba(15, 23, 42, 0.1);
	}
}
.highlight-box--danger { background: var(--danger-bg, #2c1e23); border-color: var(--danger-border, #5c2d35); border-left-color: var(--danger-icon, #f07a7a); }
.highlight-box--danger .highlight-box-title { color: var(--danger-title, #ffa4a4); }
.highlight-box--danger .highlight-box-icon { color: var(--danger-icon, #f07a7a); }
.highlight-box--caution { background: var(--caution-bg, #2b2619); border-color: var(--caution-border, #5a4a1f); border-left-color: var(--caution-icon, #e2ac35); }
.highlight-box--caution .highlight-box-title { color: var(--caution-title, #f3d27f); }
.highlight-box--caution .highlight-box-icon { color: var(--caution-icon, #e2ac35); }
img[data-skeleton]:not(.is-loaded) { background-image: linear-gradient(90deg, rgb(var(--gray-light)) 25%, var(--skeleton-mid, #3a4556) 50%, rgb(var(--gray-light)) 75%); }
@media (hover: hover) and (pointer: fine) { .faq-q:hover { filter: brightness(var(--faq-hover, 1.12)); } }
.count { background: var(--count-bg, var(--bg)); }
.owner-voice { background: var(--voice-bg, var(--card-bg)); }
.skip-link { box-shadow: var(--skip-shadow, 0 2px 8px rgba(0, 0, 0, 0.4)); }
@media (max-width: 1024px) {
	.mobile-menu-backdrop { background: var(--menu-backdrop, rgba(0, 0, 0, 0.55)); }
	.mobile-menu-panel { box-shadow: var(--menu-shadow, -8px 0 24px rgba(0, 0, 0, 0.45)); }
}