/*
Theme Name: engineer-media
Theme URI: https://github.com/0xItoHub/engineer-media
Author: 0xItoHub
Author URI: https://github.com/0xItoHub
Description: AI特化のオウンドニュースメディア用 FSE ブロックテーマ。サイバネティック・モノクロ(黒基調×シルバー)。
Version: 0.23.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: engineer-media
Tags: full-site-editing, block-styles, news, dark, blog
*/

/*
 * スタイルの大半は theme.json で管理。ここには theme.json で表現しづらい
 * モノクロの質感(グリッド・ボーダー・ホバー)のみ記述する。
 * 彩度のある色は使わない — 白/黒/グレーの階調だけで構成する。
 */

/* ===== 背景: ごく薄い白のトップライト(ネオン系グローは廃止) ===== */
body {
	position: relative;
	background-color: var(--wp--preset--color--base);
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(70vw 40vw at 50% -10%, rgba(255, 255, 255, 0.05), transparent 60%);
}

/* 薄いグリッド線(サイバネティックの気配。上部のみ、下へフェードアウト) */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 72%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 72%);
}
.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* ===== ロゴとタグライン ===== */
.em-logo a {
	text-decoration: none;
}
.em-tagline {
	margin-top: 0;
}

/* ===== ヘッダー: 半透明+ぼかしで上部固定 ===== */
.em-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10, 10, 11, 0.72) !important;
	backdrop-filter: blur(14px) saturate(110%);
	-webkit-backdrop-filter: blur(14px) saturate(110%);
}

/* ===== カード: マット黒+細ボーダー。ホバーで白く締まる ===== */
.is-style-em-card {
	background: rgba(18, 19, 22, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.is-style-em-card img {
	border-radius: 0;
	/* 写真を活かすため彩度は軽く抑える程度に(ホバーでフルカラー) */
	filter: grayscale(0.25) contrast(1.02);
	transition: filter 0.35s ease;
}
.is-style-em-card:hover {
	border-color: rgba(255, 255, 255, 0.42);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.18),
		0 14px 44px rgba(0, 0, 0, 0.6);
	transform: translateY(-3px);
}
.is-style-em-card:hover img {
	filter: grayscale(0) contrast(1);
}

/* ===== カテゴリラベル: モノクロのアウトライン型(モノスペース・大文字) ===== */
.em-term-label a {
	display: inline-block;
	padding: 0.28em 0.85em;
	border-radius: 3px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.04);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.em-term-label a:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #0a0a0b;
}

/* ===== シルバーグラデ文字(セクション見出し・ロゴ用) ===== */
.em-gradient-text {
	background: linear-gradient(135deg, #ffffff 0%, #b9bdc7 55%, #8b8f98 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ===== ヒーロー: 黒く沈めて文字を立てる ===== */
.em-hero {
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.1),
		0 24px 70px rgba(0, 0, 0, 0.55);
}
.em-hero .wp-block-cover__background {
	opacity: 0.9;
}
.em-hero img {
	filter: grayscale(0.2) contrast(1.03);
}

/* ===== セクション見出しのキッカー(// LATEST_FEED) ===== */
.em-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* キッカー頭のピクセルドット(右へ減衰する3粒) */
.em-kicker::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 0.7em;
	vertical-align: middle;
	background: rgba(255, 255, 255, 0.85);
	box-shadow:
		8px 0 0 rgba(255, 255, 255, 0.45),
		16px 0 0 rgba(255, 255, 255, 0.18);
}

/* ===== ピクセル・ディテール(サイバネティックの signature) ===== */

/* ヒーロー左上・右下のピクセル階段コーナー */
.em-hero::before,
.em-hero::after {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	z-index: 2;
	pointer-events: none;
}
.em-hero::before {
	top: 12px;
	left: 12px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow:
		7px 0 0 rgba(255, 255, 255, 0.4),
		0 7px 0 rgba(255, 255, 255, 0.4),
		14px 0 0 rgba(255, 255, 255, 0.15),
		0 14px 0 rgba(255, 255, 255, 0.15);
}
.em-hero::after {
	bottom: 12px;
	right: 12px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow:
		-7px 0 0 rgba(255, 255, 255, 0.4),
		0 -7px 0 rgba(255, 255, 255, 0.4),
		-14px 0 0 rgba(255, 255, 255, 0.15),
		0 -14px 0 rgba(255, 255, 255, 0.15);
}

/* カードホバーで右上にピクセルクラスタが点灯 */
.is-style-em-card {
	position: relative;
}
.is-style-em-card::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 4px;
	height: 4px;
	z-index: 2;
	pointer-events: none;
	background: #ffffff;
	box-shadow:
		-6px 0 0 rgba(255, 255, 255, 0.55),
		0 6px 0 rgba(255, 255, 255, 0.3);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.is-style-em-card:hover::after {
	opacity: 1;
}
.em-light .is-style-em-card::after {
	background: #0a0a0b;
	box-shadow:
		-6px 0 0 rgba(10, 10, 11, 0.55),
		0 6px 0 rgba(10, 10, 11, 0.3);
}

/* ===== ニュースティッカー(白帯・無限マーキー) ===== */
.em-ticker {
	overflow: hidden;
	white-space: nowrap;
	background: #f2f3f5;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	padding: 0.55rem 0;
}
.em-ticker p {
	display: inline-block;
	white-space: nowrap;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #0a0a0b;
	animation: em-ticker-scroll 78s linear infinite;
}
.em-ticker:hover p {
	animation-play-state: paused;
}
@keyframes em-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ===== カルーセル(横スクロール + スナップ) ===== */
.em-carousel .wp-block-post-template {
	display: flex !important;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 1.25rem;
	scroll-snap-type: x mandatory;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: rgba(10, 10, 11, 0.45) transparent;
}
.em-carousel .wp-block-post-template > li {
	flex: 0 0 320px;
	max-width: 320px;
	scroll-snap-align: start;
	margin: 0;
}
/* カードの等高化: 日付を下端に固定し、行数差のでこぼこを解消 */
.em-carousel .wp-block-post-template > li {
	display: flex;
}
.em-carousel .is-style-em-card,
.is-layout-grid .is-style-em-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.em-carousel .is-style-em-card > .wp-block-group,
.is-layout-grid .is-style-em-card > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.em-carousel .is-style-em-card .wp-block-post-date,
.is-layout-grid .is-style-em-card .wp-block-post-date {
	margin-top: auto;
	padding-top: 0.6rem;
}
.em-carousel .wp-block-post-template::-webkit-scrollbar {
	height: 6px;
}
.em-carousel .wp-block-post-template::-webkit-scrollbar-thumb {
	background: rgba(10, 10, 11, 0.4);
	border-radius: 999px;
}

/* ===== ホワイトセクション(反転帯) ===== */
.em-light {
	background: #f2f3f5;
	color: #0a0a0b;
}
.em-light .em-kicker {
	color: #565b66;
}
.em-light .em-kicker::before {
	background: rgba(10, 10, 11, 0.8);
	box-shadow:
		8px 0 0 rgba(10, 10, 11, 0.45),
		16px 0 0 rgba(10, 10, 11, 0.18);
}
.em-light h2,
.em-light .wp-block-post-title,
.em-light .wp-block-post-title a {
	color: #0a0a0b;
}
.em-light .wp-block-post-title a:hover {
	color: #565b66;
}
.em-light .is-style-em-card {
	background: #ffffff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 1px solid rgba(10, 10, 11, 0.14);
}
.em-light .is-style-em-card:hover {
	border-color: #0a0a0b;
	box-shadow:
		0 0 0 1px #0a0a0b,
		0 14px 40px rgba(10, 10, 11, 0.16);
}
.em-light .em-term-label a {
	border-color: rgba(10, 10, 11, 0.4);
	background: rgba(10, 10, 11, 0.03);
	color: #0a0a0b;
}
.em-light .em-term-label a:hover {
	background: #0a0a0b;
	border-color: #0a0a0b;
	color: #ffffff;
}
.em-light .wp-block-post-date {
	color: #565b66;
}

/* ===== アーカイブ見出し(タグ/カテゴリ/検索) ===== */
.em-archive-head {
	padding: 1.5rem 1.6rem;
	background:
		radial-gradient(80% 120% at 100% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
		rgba(18, 19, 22, 0.55);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	position: relative;
	overflow: hidden;
}
.em-archive-head::before {
	content: "";
	position: absolute;
	top: 14px; right: 14px;
	width: 5px; height: 5px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: -7px 0 0 rgba(255,255,255,0.4), 0 7px 0 rgba(255,255,255,0.4), -14px 0 0 rgba(255,255,255,0.15), 0 14px 0 rgba(255,255,255,0.15);
}
[data-theme="light"] .em-archive-head {
	background: radial-gradient(80% 120% at 100% 0%, rgba(10,10,11,0.05), transparent 55%), #ffffff;
}
[data-theme="light"] .em-archive-head::before { background: rgba(10,10,11,0.6); }
.em-archive-head__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem);
	line-height: 1.15;
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--contrast);
}
.em-archive-head__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--muted);
	margin: 0.5rem 0 0;
}
.em-archive-head__desc {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	margin-top: 0.7rem;
}

/* ===== トピックカード(4カテゴリ紹介) ===== */
.em-topics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.em-topic {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.4rem 1.4rem 1.2rem;
	background: rgba(18, 19, 22, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 12px;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
}
.em-topic::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.06), transparent 60%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.em-topic:hover {
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-3px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.em-topic:hover::after {
	opacity: 1;
}
.em-topic__kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.em-topic__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
}
.em-topic__desc {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	flex: 1;
}
.em-topic__more {
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
}
[data-theme="light"] .em-topic {
	background: #ffffff;
	border-color: rgba(10, 10, 11, 0.12);
}
[data-theme="light"] .em-topic:hover {
	border-color: rgba(10, 10, 11, 0.6);
	box-shadow: 0 14px 36px rgba(10, 10, 11, 0.14);
}
[data-theme="light"] .em-topic::after {
	background: radial-gradient(120% 80% at 100% 0%, rgba(10, 10, 11, 0.05), transparent 60%);
}
@media (max-width: 900px) {
	.em-topics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.em-topics { grid-template-columns: 1fr; }
}

/* --- 署名カラー: 各トピックの雰囲気に合わせたアクセント(背景は黒のまま) --- */
.em-topic {
	--em-topic-accent: #ffffff;
}
.em-topic .em-topic__kicker { color: var(--em-topic-accent); opacity: 0.9; }
.em-topic .em-topic__more { color: var(--em-topic-accent); }
.em-topic:hover {
	border-color: color-mix(in srgb, var(--em-topic-accent) 55%, transparent);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5),
		0 0 0 1px color-mix(in srgb, var(--em-topic-accent) 30%, transparent);
}
.em-topic::after {
	background: radial-gradient(120% 90% at 100% 0%,
		color-mix(in srgb, var(--em-topic-accent) 22%, transparent), transparent 62%);
}

/* Anthropic: クレイ(暖色)+ 左アクセントバー */
.em-topic--anthropic { --em-topic-accent: #D97757; }
.em-topic--anthropic::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, #D97757, transparent);
	opacity: 0.85;
}

/* OpenAI: ティール(緑)+ 上グラデーションライン */
.em-topic--openai { --em-topic-accent: #10A37F; }
.em-topic--openai::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 3px;
	background: linear-gradient(90deg, #10A37F, transparent);
	opacity: 0.85;
}

/* 基盤: スチールブルー + 右上ピクセルコーナー */
.em-topic--infra { --em-topic-accent: #5B9BD5; }
.em-topic--infra::before {
	content: "";
	position: absolute;
	top: 12px; right: 12px;
	width: 4px; height: 4px;
	background: #5B9BD5;
	box-shadow:
		-6px 0 0 rgba(91, 155, 213, 0.55),
		0 6px 0 rgba(91, 155, 213, 0.3),
		-6px 6px 0 rgba(91, 155, 213, 0.2);
}

/* 日常: アンバー + 下から柔らかいグロー */
.em-topic--life { --em-topic-accent: #E0A458; }
.em-topic--life::before {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 55%;
	background: radial-gradient(120% 100% at 50% 100%, rgba(224, 164, 88, 0.14), transparent 70%);
	pointer-events: none;
}
/* ホバー時にタイトルへ署名カラーをほのかに乗せる */
.em-topic:hover .em-topic__title {
	color: color-mix(in srgb, var(--em-topic-accent) 40%, var(--wp--preset--color--contrast));
}

/* ===== フッター: サイトタグラインの余白調整 ===== */
footer .wp-block-site-tagline {
	margin: 0;
}

/* ===== ヘッドライン一覧(トップ右カラム・速報リスト) ===== */
.em-headlines {
	background: rgba(18, 19, 22, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	padding: 1.25rem 1.4rem;
	height: 100%;
}
/* ランキング番号のカウンター */
.em-headlines .wp-block-post-template {
	counter-reset: em-rank;
	list-style: none;
	margin: 0;
	padding: 0;
}
.em-headline-item {
	counter-increment: em-rank;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* WPレイアウトエンジンが注入する margin-block-start を無効化(下寄りの根本原因) */
.em-headline-item > *,
.em-headline-body > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.em-headlines .wp-block-post-template > li:last-child .em-headline-item {
	border-bottom: none;
	padding-bottom: 0;
}
/* 番号(01, 02, …) */
.em-headline-item::before {
	content: counter(em-rank, decimal-leading-zero);
	flex: none;
	width: 1.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--muted);
	text-align: right;
}
/* 上位3件の番号を白く強調 */
.em-headlines .wp-block-post-template > li:nth-child(-n+3) .em-headline-item::before {
	color: var(--wp--preset--color--contrast);
}
/* 小サムネ */
.em-headline-thumb {
	flex: none;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
}
.em-headline-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.3) contrast(1.02);
}
.em-headline-body {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.2rem;
}
.em-headline-body > * {
	margin: 0 !important;
}
.em-headline-cat {
	line-height: 1.3;
}
.em-headline-cat,
.em-headline-cat a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.em-headline-cat a:hover {
	color: var(--wp--preset--color--contrast);
}
.em-headline-title {
	font-size: 0.86rem !important;
	line-height: 1.4;
	font-weight: 600;
	margin: 0.15rem 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.em-headline-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.em-headline-title a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* ===== ページネーション(数字・矢印のブランド化) ===== */
.wp-block-query-pagination {
	font-family: var(--wp--preset--font-family--mono);
	align-items: center;
	gap: 0.9rem;
}
.wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.3em;
	height: 2.3em;
	padding: 0 0.4em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.wp-block-query-pagination-numbers a.page-numbers:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}
.wp-block-query-pagination-numbers .page-numbers.dots {
	border: none;
	min-width: auto;
	padding: 0 0.1em;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	height: 2.3em;
	padding: 0 1em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
	font-size: 0.9em;
}

/* ===== スムーススクロール(目次ジャンプ用) ===== */
html {
	scroll-behavior: smooth;
}
/* アンカー着地時に固定ヘッダーで隠れないように */
#latest-feed {
	scroll-margin-top: 110px;
}

/* ===== 自動目次(TOC) ===== */
.em-toc {
	background: rgba(18, 19, 22, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2.5rem;
}
.em-toc__title {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.75rem;
}
.em-toc__list {
	margin: 0;
	padding-left: 1.25rem;
}
.em-toc__item {
	margin: 0.35rem 0;
	font-size: 0.9rem;
}
.em-toc__item--h3 {
	margin-left: 1.1rem;
	font-size: 0.84rem;
}
.em-toc__item a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	transition: border-color 0.2s ease, color 0.2s ease;
}
.em-toc__item a:hover {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

/* ===== 記事タグ(チップ型) ===== */
.em-article-tags .em-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}
.em-article-tags .em-tags a {
	display: inline-block;
	padding: 0.3em 0.8em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.em-article-tags .em-tags a::before { content: "#"; opacity: 0.5; margin-right: 0.15em; }
.em-article-tags .em-tags a:hover {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* ===== 出典(記事末尾の small/muted 段落を清書) ===== */
.wp-block-post-content > .has-small-font-size.has-muted-color:last-child,
.wp-block-post-content > .has-small-font-size.has-muted-color:has(a[rel]) {
	border-left: 2px solid var(--wp--preset--color--border);
	padding: 0.4rem 0 0.4rem 0.9rem;
	line-height: 1.9;
}
.wp-block-post-content .has-small-font-size.has-muted-color a {
	color: var(--wp--preset--color--muted);
	text-underline-offset: 2px;
}
.wp-block-post-content .has-small-font-size.has-muted-color a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ===== 前後記事ナビ(小サムネ付きカード・等高) ===== */
.em-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: stretch;
}
.em-nav-card {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.8rem;
	height: 100%;
	background: rgba(18, 19, 22, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 10px;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.em-nav-card--next { flex-direction: row-reverse; text-align: right; }
.em-nav-card--fallback { opacity: 0.72; }
.em-nav-card:hover {
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.em-nav-card:hover.em-nav-card--fallback { opacity: 1; }
.em-nav-card__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	filter: grayscale(0.3) contrast(1.02);
}
.em-nav-card__thumb--ph {
	background:
		radial-gradient(60% 90% at 70% 20%, rgba(255,255,255,0.06), transparent 60%),
		var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
}
.em-nav-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.em-nav-card__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.25rem;
}
.em-nav-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.86rem;
	line-height: 1.4;
	/* タイトルが1行でも2行分の高さを確保しカード高を揃える */
	min-height: 2.4em;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}
[data-theme="light"] .em-nav-card { background: #ffffff; border-color: rgba(10,10,11,0.12); }
[data-theme="light"] .em-nav-card:hover { border-color: rgba(10,10,11,0.6); }
@media (max-width: 560px) {
	.em-post-nav { grid-template-columns: 1fr; }
}

/* ===== 検索(全ブロック共通 — 白かぶり対策でテーマ配色を強制) ===== */
.wp-block-search .wp-block-search__input {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	padding: 0.55rem 0.8rem;
}
.wp-block-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
}
.wp-block-search .wp-block-search__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.wp-block-search .wp-block-search__button {
	background: var(--wp--preset--color--contrast) !important;
	border: 1px solid var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 6px;
}
.wp-block-search .wp-block-search__inside-wrapper {
	border: none;
	padding: 0;
	gap: 0.5rem;
}
/* ボタン内包型(ヘッダー)は枠を1つに統一 */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0 0.2rem 0 0;
}
.wp-block-search__button-inside .wp-block-search__input {
	background: transparent;
	border: none;
}
.wp-block-search__button-inside .wp-block-search__button {
	background: transparent !important;
	border: none !important;
	color: var(--wp--preset--color--muted) !important;
	padding: 0 0.4rem;
}
.wp-block-search__button-inside .wp-block-search__button:hover {
	color: var(--wp--preset--color--contrast) !important;
}
[data-theme="light"] .wp-block-search .wp-block-search__input,
[data-theme="light"] .wp-block-search__button-inside .wp-block-search__inside-wrapper {
	background: rgba(10, 10, 11, 0.04);
}

/* ==========================================================================
 * 記事内リッチ引用(X風カード / リンクカード / 動画)— 外部JS不要
 * ========================================================================== */

/* X(Twitter)風引用カード */
.em-x-quote {
	margin: 2.2rem 0;
	padding: 1.4rem 1.6rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}
.em-x-quote__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}
.em-x-quote__avatar {
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: linear-gradient(135deg, #3a3d45, #16171a);
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
	flex: none;
}
.em-x-quote__name {
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}
.em-x-quote__handle {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
}
.em-x-quote__logo {
	margin-left: auto;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--wp--preset--color--muted);
}
.em-x-quote__text {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.9rem;
}
.em-x-quote__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.em-x-quote__meta a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.em-x-quote__meta a:hover {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: var(--wp--preset--color--contrast);
}

/* TL;DR(AIO向け冒頭サマリー) */
.em-tldr {
	margin: 1.8rem 0 2.4rem;
	padding: 1.2rem 1.5rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}
[data-theme="light"] .em-tldr { background: rgba(10, 10, 11, 0.04); }
.em-tldr__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.6rem;
}
.em-tldr__list {
	margin: 0;
	padding-left: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.em-tldr__list li {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
}

/* ソーシャル引用カード(Reddit/X汎用) */
.em-social {
	margin: 2.2rem 0;
	padding: 1.3rem 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}
.em-social__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}
.em-social__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.85rem;
	flex: none;
}
.em-social--reddit .em-social__logo { background: #ff4500; color: #fff; }
.em-social__handle { font-weight: 700; font-size: 0.86rem; color: var(--wp--preset--color--contrast); }
.em-social__src { margin-left: auto; font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; color: var(--wp--preset--color--muted); }
.em-social__text { font-size: 1rem; line-height: 1.75; color: var(--wp--preset--color--contrast); margin: 0 0 0.8rem; }
.em-social__link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.em-social__link:hover { color: var(--wp--preset--color--contrast); border-bottom-color: var(--wp--preset--color--contrast); }

/* 外部記事リンクカード */
.em-link-card {
	display: block;
	margin: 2.2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.em-link-card:hover {
	border-color: rgba(255, 255, 255, 0.45);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
	transform: translateY(-2px);
}
[data-theme="light"] .em-link-card:hover {
	border-color: rgba(10, 10, 11, 0.6);
	box-shadow: 0 10px 30px rgba(10, 10, 11, 0.12);
}
.em-link-card__domain {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem;
}
.em-link-card__domain::before {
	content: "↗ ";
}
.em-link-card__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.35rem;
}
.em-link-card__desc {
	display: block;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* 動画埋め込み(YouTube等) */
.wp-block-embed {
	margin: 2.2rem 0;
}
.wp-block-embed__wrapper {
	position: relative;
}
.wp-block-embed iframe {
	max-width: 100%;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border);
	background: #000;
}

/* ===== スクロールドリブン: カードがスクロールで浮き上がる(対応ブラウザのみ) ===== */
@supports (animation-timeline: view()) {
	.wp-block-post-template > li {
		animation: em-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 55%;
	}
	/* 横スクロールのカルーセルは対象外(縦スクロールと軸が合わないため) */
	.em-carousel .wp-block-post-template > li {
		animation: none;
	}
}
@keyframes em-rise {
	from {
		opacity: 0.12;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ===== アクセシビリティ: 動きを減らす設定を尊重 ===== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.em-ticker p {
		animation: none;
	}
	.wp-block-post-template > li {
		animation: none;
	}
	.is-style-em-card,
	.is-style-em-card img,
	.is-style-em-card::after {
		transition: none;
	}
	.is-style-em-card:hover {
		transform: none;
	}
}

/* ===== ヒーロー: アイキャッチ未設定時のフォールバック背景 ===== */
.em-hero {
	background-color: #121316;
	background-image:
		radial-gradient(60% 90% at 75% 10%, rgba(255, 255, 255, 0.06), transparent 60%),
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: auto, 34px 34px, 34px 34px;
}

/* ==========================================================================
 * ライトモード([data-theme="light"])
 * プリセットカラー変数を上書きし、ダーク前提のコンポーネントを反転する
 * ========================================================================== */
[data-theme="light"] body {
	--wp--preset--color--base: #F5F6F8;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--border: #D9DBE0;
	--wp--preset--color--contrast: #16181D;
	--wp--preset--color--muted: #5A5F6A;
	--wp--preset--color--accent: #0A0A0B;
	--wp--preset--color--accent-2: #4B4F58;
	background-color: #F5F6F8;
	color: #16181D;
}
[data-theme="light"] body::before {
	background: radial-gradient(70vw 40vw at 50% -10%, rgba(10, 10, 11, 0.05), transparent 60%);
}
[data-theme="light"] body::after {
	background-image:
		linear-gradient(rgba(10, 10, 11, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10, 10, 11, 0.045) 1px, transparent 1px);
}
[data-theme="light"] .em-header {
	background: rgba(245, 246, 248, 0.82) !important;
}
[data-theme="light"] .em-header,
[data-theme="light"] .em-header * {
	color: #16181D;
}
[data-theme="light"] .is-style-em-card {
	background: #FFFFFF;
	border-color: rgba(10, 10, 11, 0.12);
}
[data-theme="light"] .is-style-em-card:hover {
	border-color: rgba(10, 10, 11, 0.7);
	box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.5), 0 14px 44px rgba(10, 10, 11, 0.14);
}
[data-theme="light"] .is-style-em-card::after {
	background: #0a0a0b;
	box-shadow: -6px 0 0 rgba(10, 10, 11, 0.55), 0 6px 0 rgba(10, 10, 11, 0.3);
}
[data-theme="light"] .em-term-label a {
	border-color: rgba(10, 10, 11, 0.4);
	background: rgba(10, 10, 11, 0.03);
	color: #16181D;
}
[data-theme="light"] .em-term-label a:hover {
	background: #0a0a0b;
	border-color: #0a0a0b;
	color: #ffffff;
}
[data-theme="light"] .em-kicker::before {
	background: rgba(10, 10, 11, 0.8);
	box-shadow: 8px 0 0 rgba(10, 10, 11, 0.45), 16px 0 0 rgba(10, 10, 11, 0.18);
}
[data-theme="light"] .em-gradient-text {
	background: linear-gradient(135deg, #16181D 0%, #4B4F58 60%, #7A7F8A 100%);
	-webkit-background-clip: text;
	background-clip: text;
}
[data-theme="light"] .em-headlines {
	background: #FFFFFF;
	border-color: rgba(10, 10, 11, 0.12);
}
[data-theme="light"] .em-headline-item {
	border-bottom-color: rgba(10, 10, 11, 0.1);
}
[data-theme="light"] .em-toc {
	background: #FFFFFF;
	border-color: rgba(10, 10, 11, 0.12);
}
[data-theme="light"] .em-toc__item a {
	border-bottom-color: rgba(10, 10, 11, 0.25);
}
[data-theme="light"] .em-ticker {
	background: #0A0A0B;
	border-color: rgba(10, 10, 11, 0.2);
}
[data-theme="light"] .em-ticker p {
	color: #F2F3F5;
}
/* ライト時は「反転帯」を黒に(白黒の関係を維持) */
[data-theme="light"] .em-light {
	background: #0E0E10;
	color: #F2F3F5;
}
[data-theme="light"] .em-light h2,
[data-theme="light"] .em-light .wp-block-post-title,
[data-theme="light"] .em-light .wp-block-post-title a {
	color: #F2F3F5;
}
[data-theme="light"] .em-light .em-kicker {
	color: #9CA0A8;
}
[data-theme="light"] .em-light .em-kicker::before {
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 8px 0 0 rgba(255, 255, 255, 0.45), 16px 0 0 rgba(255, 255, 255, 0.18);
}
[data-theme="light"] .em-light .is-style-em-card {
	background: rgba(18, 19, 22, 0.85);
	border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .em-light .em-term-label a {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.04);
	color: #F2F3F5;
}
[data-theme="light"] .em-light .wp-block-post-date {
	color: #9CA0A8;
}
[data-theme="light"] .wp-block-button__link {
	background: #0A0A0B !important;
	color: #ffffff !important;
	border-color: #0A0A0B !important;
}
[data-theme="light"] .wp-block-button__link:hover {
	background: transparent !important;
	color: #0A0A0B !important;
}
[data-theme="light"] .em-search .wp-block-search__input {
	background: rgba(10, 10, 11, 0.04);
	color: #16181D;
}
[data-theme="light"] .em-bot__bubble {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(10, 10, 11, 0.3);
	color: #16181D;
}
/* ライト時のホバー: 白文字指定を黒系に差し替え(白かぶり対策) */
[data-theme="light"] .em-headline-title a:hover,
[data-theme="light"] .em-headline-cat a:hover,
[data-theme="light"] .em-toc__item a:hover,
[data-theme="light"] .em-post-nav a:hover {
	color: #0a0a0b;
}
[data-theme="light"] .em-toc__item a:hover {
	border-bottom-color: #0a0a0b;
}

/* ===== 記事本文の余白(読み疲れ対策) ===== */
.wp-block-post-content {
	--wp--style--block-gap: 1.9rem;
}
.wp-block-post-content p {
	line-height: 1.95;
}
.wp-block-post-content h2 {
	margin-top: 3.4rem;
	margin-bottom: 0.4rem;
}
.wp-block-post-content h3 {
	margin-top: 2.4rem;
}
.wp-block-post-content li {
	margin: 0.5rem 0;
}
.wp-block-post-content .em-x-quote,
.wp-block-post-content .em-link-card,
.wp-block-post-content .em-note,
.wp-block-post-content .wp-block-embed {
	margin-top: 2.6rem;
	margin-bottom: 2.6rem;
}

/* ===== テーブル(core/table のテーマスタイル) ===== */
.wp-block-table {
	margin: 2.6rem 0;
	overflow-x: auto;
}
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.88rem;
	border: none;
}
.wp-block-table th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: left;
	padding: 0.7rem 0.9rem;
	background: rgba(255, 255, 255, 0.04);
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.wp-block-table td {
	padding: 0.75rem 0.9rem;
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	line-height: 1.6;
}
.wp-block-table tr:hover td {
	background: rgba(255, 255, 255, 0.025);
}
.wp-block-table figcaption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	margin-top: 0.6rem;
	text-align: left;
}
[data-theme="light"] .wp-block-table th {
	background: rgba(10, 10, 11, 0.04);
	border-bottom-color: rgba(10, 10, 11, 0.45);
}
[data-theme="light"] .wp-block-table tr:hover td {
	background: rgba(10, 10, 11, 0.025);
}

/* ===== 横棒グラフ(CSSのみ・.em-bars) ===== */
.em-bars {
	margin: 2.6rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.em-bar__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.35rem;
}
.em-bar__head span:last-child {
	color: var(--wp--preset--color--muted);
}
.em-bar__track {
	height: 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 3px;
	overflow: hidden;
}
.em-bar__fill {
	display: block;
	height: 100%;
	min-width: 3px;
	background: linear-gradient(90deg, #ffffff, #8b8f98);
}
[data-theme="light"] .em-bar__track {
	background: rgba(10, 10, 11, 0.05);
}
[data-theme="light"] .em-bar__fill {
	background: linear-gradient(90deg, #0a0a0b, #4b4f58);
}
.em-bars__caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	margin: 0.2rem 0 0;
}

/* ===== 図解(フロー図・.em-flow) ===== */
.em-flow {
	margin: 2.6rem auto;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}
.em-flow__node {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 0.85rem 1.1rem;
	text-align: center;
}
.em-flow__node--accent {
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
[data-theme="light"] .em-flow__node--accent {
	border-color: rgba(10, 10, 11, 0.65);
	box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.2);
}
.em-flow__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.25rem;
}
.em-flow__text {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}
.em-flow__sub {
	display: block;
	font-size: 0.78rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.2rem;
}
.em-flow__arrow {
	text-align: center;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1;
	padding: 0.45rem 0;
	user-select: none;
}
.em-flow__row {
	display: flex;
	gap: 0.6rem;
}
.em-flow__row .em-flow__node {
	flex: 1;
	padding: 0.6rem 0.5rem;
}
.em-flow__row .em-flow__text {
	font-size: 0.8rem;
}
.em-flow__caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
	margin: 0.8rem 0 0;
	text-align: center;
}

/* ===== 商品リンクカード(.em-product) ===== */
.em-product {
	margin: 2.6rem 0;
	padding: 1.3rem 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}
.em-product__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.64rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.45rem;
}
.em-product__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 0.4rem;
}
.em-product__desc {
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	margin: 0 0 1rem;
}
.em-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}
.em-product__btn {
	display: inline-block;
	padding: 0.55em 1.3em;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid;
	transition: background 0.2s ease, color 0.2s ease;
}
.em-product__btn--amazon {
	color: #ff9900;
	border-color: rgba(255, 153, 0, 0.6);
}
.em-product__btn--amazon:hover {
	background: #ff9900;
	color: #0a0a0b;
	border-color: #ff9900;
}
.em-product__btn--rakuten {
	color: #ff4d4d;
	border-color: rgba(255, 77, 77, 0.55);
}
.em-product__btn--rakuten:hover {
	background: #bf0000;
	color: #ffffff;
	border-color: #bf0000;
}
[data-theme="light"] .em-product__btn--amazon {
	color: #b36b00;
	border-color: rgba(179, 107, 0, 0.6);
}
[data-theme="light"] .em-product__btn--amazon:hover {
	background: #ff9900;
	color: #0a0a0b;
}
[data-theme="light"] .em-product__btn--rakuten {
	color: #bf0000;
	border-color: rgba(191, 0, 0, 0.5);
}
[data-theme="light"] .em-product__btn--rakuten:hover {
	background: #bf0000;
	color: #ffffff;
}

/* ===== 用語解説ボックス(初心者向け・記事内) ===== */
.em-note {
	margin: 2rem 0;
	padding: 1.1rem 1.4rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid rgba(255, 255, 255, 0.7);
	border-radius: 8px;
}
[data-theme="light"] .em-note {
	border-left-color: rgba(10, 10, 11, 0.75);
}
.em-note__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.64rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.4rem;
}
.em-note__term {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.35rem;
}
.em-note__text {
	font-size: 0.88rem;
	line-height: 1.75;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* ===== アイキャッチ無し時のフォールバック表示 ===== */
.em-thumb-fallback {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	background-color: var(--wp--preset--color--surface);
	background-image:
		radial-gradient(60% 90% at 75% 10%, rgba(255, 255, 255, 0.05), transparent 60%),
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: auto, 34px 34px, 34px 34px;
	overflow: hidden;
}
[data-theme="light"] .em-thumb-fallback {
	background-image:
		radial-gradient(60% 90% at 75% 10%, rgba(10, 10, 11, 0.04), transparent 60%),
		linear-gradient(rgba(10, 10, 11, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10, 10, 11, 0.045) 1px, transparent 1px);
}
.em-thumb-fallback::before,
.em-thumb-fallback::after {
	content: "";
	position: absolute;
	width: 5px;
	height: 5px;
	background: rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .em-thumb-fallback::before,
[data-theme="light"] .em-thumb-fallback::after {
	background: rgba(10, 10, 11, 0.6);
}
.em-thumb-fallback::before {
	top: 10px;
	left: 10px;
	box-shadow: 7px 0 0 rgba(128, 128, 136, 0.4), 0 7px 0 rgba(128, 128, 136, 0.4);
}
.em-thumb-fallback::after {
	bottom: 10px;
	right: 10px;
	box-shadow: -7px 0 0 rgba(128, 128, 136, 0.4), 0 -7px 0 rgba(128, 128, 136, 0.4);
}
.em-thumb-fallback__logo {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--contrast);
}
.em-thumb-fallback__sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.58rem;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--muted);
}
a.em-thumb-fallback-link {
	display: block;
	text-decoration: none;
}

/* ===== モード切替ボタン ===== */
.em-mode-toggle {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--muted);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.38em 0.9em;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.em-mode-toggle:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
}

/* ===== PULSE-BOT(巡回ドット絵マスコット) ===== */
.em-bot {
	position: fixed;
	bottom: 10px;
	left: 0;
	z-index: 90;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
.em-bot__sprite {
	width: 4px;
	height: 4px;
	background: transparent;
}
.em-bot__bubble {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	background: rgba(18, 19, 22, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	padding: 0.35em 0.75em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--contrast);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.em-bot__bubble.is-visible {
	opacity: 1;
	visibility: visible;
}
.em-bot:hover .em-bot__sprite {
	filter: brightness(1.25);
}

/* ===== ボタン: 白ベタ×黒文字。ホバーで反転 ===== */
.wp-block-button__link {
	background: #ffffff !important;
	color: #0a0a0b !important;
	border: 1px solid #ffffff !important;
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.wp-block-button__link:hover {
	background: transparent !important;
	color: #ffffff !important;
}