/* ==========================================================================
 * single-cpt_ailab.css
 * AI Lab 記事ページ専用スタイル（cpt_ailab）
 *
 * 設計方針:
 *   - メディア発信としての世界観を強調（YouTube 動画 + 配布資料 + 記事のセット）
 *   - 著者は出口さん固定
 *   - コラムの single-post とは別系統。共通 tokens / components / base のみ流用
 *   - 章番号付き h2、注意ボックス、コードブロックコピー、効果リスト等の AI Lab 特有要素を完全対応
 *   - SP の読みやすさ最優先（CLAUDE.md 1章末準拠）
 * ========================================================================== */

/* ============================================================
 * 1. レイアウト（コンテナ・サイドバー）
 * ============================================================ */

.single-ailab {
	background: var(--color-bg-base);
	color: var(--color-text-primary);
	min-height: 100vh;
}

.single-ailab__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--space-4);
	padding-top: var(--breadcrumb-top-offset, calc(var(--header-height, 64px) + var(--space-3)));
	padding-bottom: var(--space-6);
}

@media (min-width: 1024px) {
	.single-ailab__container {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--space-9);
		padding-inline: var(--space-6);
		padding-top: var(--breadcrumb-top-offset, calc(var(--header-height, 64px) + var(--space-4)));
		padding-bottom: var(--space-8);
		align-items: stretch;
	}
}

.single-ailab__main {
	min-width: 0;
}

.single-ailab__sidebar {
	display: flex;
	flex-direction: column;
}

/* ============================================================
 * 2. 読了進捗バー
 * ============================================================ */

.single-ailab__progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: transparent;
	z-index: 999;
	pointer-events: none;
}

.single-ailab__progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-intelligence) 100%);
	transition: width 0.1s ease-out;
}

/* ============================================================
 * 3. パンくず
 * ============================================================ */

.single-ailab__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	align-items: center;
}

.single-ailab__breadcrumb > * {
	white-space: nowrap;
}

.single-ailab__breadcrumb a {
	color: var(--color-text-secondary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.single-ailab__breadcrumb a:hover {
	color: var(--color-brand);
}

.single-ailab__breadcrumb-sep {
	color: var(--color-text-muted);
	font-size: 0.75em;
}

.single-ailab__breadcrumb [aria-current="page"] {
	color: var(--color-text-primary);
	font-weight: 600;
	white-space: normal;
	word-break: break-word;
}

/* ============================================================
 * 4. 動画ヒーロー（AI Lab 特有）
 * ============================================================ */

.single-ailab__video {
	margin: 0 0 var(--space-6);
	background: #000;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	position: relative;
}

.single-ailab__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.single-ailab__video-thumb {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	display: block;
	background: #000;
	overflow: hidden;
}

.single-ailab__video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--ease-out-expo);
}

.single-ailab__video-thumb:hover img {
	transform: scale(1.04);
}

.single-ailab__video-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}

.single-ailab__video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s var(--ease-out-expo);
}

.single-ailab__video-thumb:hover .single-ailab__video-play {
	transform: translate(-50%, -50%) scale(1.1);
}

.single-ailab__video-play svg {
	width: 32px;
	height: 32px;
	fill: var(--color-brand);
	margin-left: 4px;
}

.single-ailab__video-meta {
	position: absolute;
	bottom: var(--space-4);
	left: var(--space-4);
	right: var(--space-4);
	color: #FFFFFF;
	z-index: 1;
}

.single-ailab__video-channel {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.9;
}

.single-ailab__video-channel::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #FF0000;
}

.single-ailab__video-title {
	margin: var(--space-1) 0 0;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.4;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
	.single-ailab__video-title {
		font-size: var(--fs-lg);
	}
}

/* ============================================================
 * 5. 記事ヘッダー
 * ============================================================ */

.single-ailab__header {
	margin-bottom: var(--space-6);
}

.single-ailab__category {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 6px var(--space-3);
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
	border-radius: 999px;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-3);
	min-height: 28px;
	text-decoration: none;
}

.single-ailab__category::before {
	content: 'AI';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	font-size: 0.6rem;
	font-weight: 800;
}

.single-ailab__title {
	font-size: clamp(1.875rem, 6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin: 0 0 var(--space-4);
}

.single-ailab__lede {
	font-size: var(--fs-lg);
	line-height: 1.75;
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-4);
	max-width: 60ch;
}

.single-ailab__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-4);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	align-items: center;
	margin-bottom: var(--space-4);
}

.single-ailab__meta strong {
	color: var(--color-text-primary);
	font-weight: 600;
}

.single-ailab__updated strong {
	color: var(--color-brand);
}

.single-ailab__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.single-ailab__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px var(--space-3);
	background: var(--color-glass-brand);
	color: var(--color-brand);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	text-decoration: none;
	min-height: 28px;
	font-weight: 500;
}

.single-ailab__tag:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
}

/* ============================================================
 * 6. 著者ブロック（出口さん）
 * ============================================================ */

.single-ailab__author {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-4) 0;
	border-top: 1px solid var(--color-border-subtle);
	border-bottom: 1px solid var(--color-border-subtle);
	margin: var(--space-5) 0;
}

.single-ailab__author-avatar {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-intelligence) 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-dark-primary);
	font-family: var(--font-sans-latin);
	font-weight: 800;
	font-size: 1.25rem;
}

.single-ailab__author-avatar:has(img) {
	background: var(--color-bg-base);
	color: transparent;
}

.single-ailab__author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-ailab__author-body {
	flex: 1;
	min-width: 0;
}

.single-ailab__author-meta {
	display: flex;
	align-items: baseline;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.single-ailab__author-name {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--color-text-primary);
	margin: 0;
}

.single-ailab__author-role {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin: 0;
}

.single-ailab__author-bio {
	font-size: var(--fs-sm);
	line-height: 1.7;
	color: var(--color-text-secondary);
	margin: var(--space-2) 0 0;
}

.single-ailab__author--footer {
	flex-direction: column;
	align-items: flex-start;
	padding: var(--space-6);
	background: var(--color-bg-surface);
	border: 0;
	border-radius: var(--radius-lg);
	margin-top: var(--space-7);
	margin-bottom: var(--space-5);
	gap: var(--space-4);
}

@media (min-width: 600px) {
	.single-ailab__author--footer {
		flex-direction: row;
		align-items: flex-start;
	}
}

.single-ailab__author--footer .single-ailab__author-avatar {
	width: 80px;
	height: 80px;
	font-size: 1.75rem;
}

.single-ailab__author--footer .single-ailab__author-bio {
	font-size: var(--fs-base);
	line-height: 1.85;
}

.single-ailab__author-sns {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.single-ailab__author-sns a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-bg-base);
	color: var(--color-text-secondary);
	transition: all 0.2s;
}

.single-ailab__author-sns a:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
}

.single-ailab__author-sns svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ============================================================
 * 7. 配布資料 CTA（記事冒頭・AI Lab 特有）
 * ============================================================ */

.single-ailab__resource-cta {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-5);
	background: linear-gradient(135deg, var(--color-glass-brand), var(--color-glass-default));
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-lg);
	margin: var(--space-5) 0 var(--space-6);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: all 0.3s var(--ease-out-expo);
	position: relative;
	overflow: hidden;
}

.single-ailab__resource-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -10px rgba(6, 123, 123, 0.25);
}

.single-ailab__resource-cta-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--color-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-ailab__resource-cta-icon svg {
	width: 24px;
	height: 24px;
	fill: var(--color-text-dark-primary);
}

.single-ailab__resource-cta-body {
	flex: 1;
	min-width: 0;
}

.single-ailab__resource-cta-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.06em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.single-ailab__resource-cta-title {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.4;
	margin: 0 0 4px;
}

.single-ailab__resource-cta-desc {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.5;
}

.single-ailab__resource-cta-arrow {
	flex-shrink: 0;
	color: var(--color-brand);
	font-size: var(--fs-lg);
	font-weight: 700;
}

/* ============================================================
 * 8. 目次
 * ============================================================ */

.single-ailab__toc {
	padding: var(--space-4) 0;
	margin: var(--space-5) 0 var(--space-6);
	border-top: 1px solid var(--color-border-subtle);
	border-bottom: 1px solid var(--color-border-subtle);
}

.single-ailab__toc-title {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--space-3);
}

.single-ailab__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-ailab__toc-list li {
	margin: 0;
}

.single-ailab__toc-list li + li {
	margin-top: var(--space-2);
}

.single-ailab__toc-list a {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	color: var(--color-text-primary);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 500;
	line-height: 1.5;
	padding-block: var(--space-1);
	transition: color 0.2s;
}

.single-ailab__toc-list a:hover {
	color: var(--color-brand);
}

.single-ailab__toc-list a::before {
	content: attr(data-num);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	border-radius: 6px;
	background: var(--color-glass-brand);
	color: var(--color-brand);
	font-size: var(--fs-xs);
	font-weight: 800;
	font-family: var(--font-mono, monospace);
}

/* ============================================================
 * 9. 本文（ai-lab-* 独自 class 完全対応）
 * ============================================================ */

.single-ailab__body {
	font-size: 1.0625rem;
	line-height: 1.95;
	letter-spacing: 0.02em;
	color: var(--color-text-primary);
	max-width: 760px;
}

@media (max-width: 767px) {
	.single-ailab__body {
		font-size: 1rem;
		line-height: 1.75;
		letter-spacing: 0.015em;
	}
}

.single-ailab__body > * + * {
	margin-top: var(--space-4);
}

.single-ailab__body p,
.single-ailab__sidebar p {
	max-width: none;
}

/* ─── h2：章番号 + 大型タイトル ───────────────────────── */
.single-ailab__body h2,
.single-ailab__body .ai-lab-section h2 {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
	font-size: clamp(1.625rem, 5vw, 2.125rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--color-text-primary);
	margin-top: var(--space-9);
	margin-bottom: var(--space-4);
	padding-top: var(--space-5);
	padding-bottom: var(--space-2);
	border-top: 1px solid var(--color-border-subtle);
	letter-spacing: -0.02em;
	scroll-margin-top: calc(var(--header-height, 64px) + var(--space-3));
}

.single-ailab__body .ai-lab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 56px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-intelligence) 100%);
	color: var(--color-text-dark-primary);
	font-family: var(--font-mono, monospace);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.single-ailab__body h2 {
		font-size: 1.5rem;
		gap: var(--space-2);
	}
	.single-ailab__body .ai-lab-num {
		min-width: 48px;
		height: 48px;
		font-size: 1.25rem;
	}
}

/* ─── h3 ──────────────────────────────────────────────── */
.single-ailab__body h3 {
	position: relative;
	font-size: clamp(1.125rem, 3.2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-text-primary);
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid rgba(6, 123, 123, 0.18);
	letter-spacing: -0.01em;
	scroll-margin-top: calc(var(--header-height, 64px) + var(--space-3));
}

/* ─── h4 ──────────────────────────────────────────────── */
.single-ailab__body h4 {
	font-size: var(--fs-lg);
	font-weight: 700;
	color: var(--color-text-primary);
	margin-top: var(--space-6);
	margin-bottom: var(--space-3);
	letter-spacing: -0.01em;
}

/* ─── h5 サブステップ ─────────────────────────────────── */
.single-ailab__body h5,
.single-ailab__body .ai-lab-substep {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-top: var(--space-5);
	margin-bottom: var(--space-2);
}

/* ─── 段落 ────────────────────────────────────────────── */
.single-ailab__body p {
	margin-bottom: var(--space-4);
}

.single-ailab__body strong {
	font-weight: 700;
	color: var(--color-text-primary);
	background: linear-gradient(transparent 65%, rgba(244, 163, 64, 0.28) 65%);
}

/* ─── リード文 ────────────────────────────────────────── */
.single-ailab__body .ai-lab-lede {
	font-size: var(--fs-lg);
	line-height: 1.75;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-4);
}

/* ─── メタ情報 ────────────────────────────────────────── */
.single-ailab__body .ai-lab-meta {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-3);
}

/* ─── 動画リンク ──────────────────────────────────────── */
.single-ailab__body .ai-lab-video-link {
	font-size: var(--fs-sm);
	margin-bottom: var(--space-5);
}

.single-ailab__body .ai-lab-video-link a {
	font-weight: 700;
}

/* ─── リンク（btn 系除外） ────────────────────────────── */
.single-ailab__body a:not([class*="btn"]) {
	color: var(--color-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(6, 123, 123, 0.4);
	transition: color 0.2s, text-decoration-color 0.2s;
	word-break: break-word;
	font-weight: 600;
}

.single-ailab__body a:not([class*="btn"]):hover {
	color: #C4781E;
	text-decoration-color: currentColor;
}

/* ─── リスト ──────────────────────────────────────────── */
.single-ailab__body ul,
.single-ailab__body ol,
.single-ailab__body .ai-lab-list {
	margin: var(--space-3) 0;
	padding-left: var(--space-5);
}

.single-ailab__body .ai-lab-list li {
	margin-bottom: var(--space-2);
	line-height: 1.85;
}

.single-ailab__body .ai-lab-list--ordered {
	list-style: decimal;
}

/* ─── 区切り線 ────────────────────────────────────────── */
.single-ailab__body .ai-lab-hr {
	border: 0;
	border-top: 1px dashed var(--color-border-default);
	margin: var(--space-7) 0;
	background: transparent;
	height: 0;
}

/* ─── 注意ボックス ────────────────────────────────────── */
.single-ailab__body .ai-lab-caution {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4) var(--space-5);
	background: rgba(244, 163, 64, 0.08);
	border-radius: var(--radius-md);
	margin: var(--space-4) 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.single-ailab__body .ai-lab-caution__label {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	background: var(--color-action);
	color: var(--color-text-primary);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ─── ハイライト（強調引用風） ────────────────────────── */
.single-ailab__body .ai-lab-highlight {
	position: relative;
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--color-brand);
	background: transparent;
	font-size: var(--fs-lg);
	font-weight: 600;
	line-height: 1.65;
	color: var(--color-text-primary);
	margin: var(--space-5) 0;
}

/* ─── スクリーンショット ──────────────────────────────── */
.single-ailab__body .ai-lab-screenshot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-4) 0;
	padding: 0;
}

.single-ailab__body .ai-lab-screenshot a {
	display: block;
	flex: 1 1 240px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	transition: all 0.3s var(--ease-out-expo);
	text-decoration: none;
}

.single-ailab__body .ai-lab-screenshot a:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.12);
	border-color: var(--color-border-brand);
}

.single-ailab__body .ai-lab-screenshot img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ─── 出典キャプション ────────────────────────────────── */
.single-ailab__body .ai-lab-caption {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin: var(--space-2) 0 var(--space-4);
	line-height: 1.6;
}

/* ─── テーブル ────────────────────────────────────────── */
.single-ailab__body .ai-lab-table {
	margin: var(--space-4) 0;
	overflow-x: auto;
}

.single-ailab__body .ai-lab-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-bg-base);
	border-radius: var(--radius-md);
	overflow: hidden;
	font-size: var(--fs-sm);
}

.single-ailab__body .ai-lab-table thead {
	background: linear-gradient(135deg, var(--color-glass-brand), var(--color-glass-default));
}

.single-ailab__body .ai-lab-table th {
	padding: var(--space-3);
	text-align: left;
	font-weight: 700;
	color: var(--color-text-primary);
	border-bottom: 2px solid var(--color-border-brand);
	font-size: var(--fs-sm);
}

.single-ailab__body .ai-lab-table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border-subtle);
	color: var(--color-text-secondary);
}

.single-ailab__body .ai-lab-table tbody tr:last-child td {
	border-bottom: 0;
}

/* ─── 効果リスト（OK / Warn） ─────────────────────────── */
.single-ailab__body .ai-lab-effects {
	list-style: none;
	margin: var(--space-3) 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.single-ailab__body .ai-lab-effects li {
	position: relative;
	padding-left: 28px;
	line-height: 1.7;
	font-size: var(--fs-sm);
}

.single-ailab__body .ai-lab-effects__ok::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.single-ailab__body .ai-lab-effects__warn::before {
	content: '!';
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-action);
	color: var(--color-text-primary);
	font-size: 0.75rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ─── コードブロック（コピーボタン付き） ──────────────── */
.single-ailab__body .ai-lab-code-wrap {
	position: relative;
	background: #14201F;
	border-radius: var(--radius-md);
	overflow: hidden;
	margin: var(--space-4) 0;
	border: 1px solid rgba(6, 123, 123, 0.25);
}

.single-ailab__body .ai-lab-copy-btn {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	padding: 8px var(--space-3);
	background: var(--color-bg-base);
	color: var(--color-text-primary);
	border: 0;
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	cursor: pointer;
	z-index: 2;
	transition: all 0.2s;
	min-height: 32px;
	font-family: inherit;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.single-ailab__body .ai-lab-copy-btn:hover {
	background: var(--color-action);
}

.single-ailab__body .ai-lab-copy-btn.is-copied {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
}

.single-ailab__body .ai-lab-code-wrap .hcb_wrap {
	overflow-x: auto;
	padding: var(--space-5);
	padding-top: calc(var(--space-5) + 28px);
}

.single-ailab__body .ai-lab-code-wrap pre {
	margin: 0;
	background: transparent;
	color: #E8F0F0;
	font-family: var(--font-mono, "JetBrains Mono", Consolas, Menlo, monospace);
	font-size: 0.85rem;
	line-height: 1.7;
	white-space: pre;
	tab-size: 2;
}

.single-ailab__body .ai-lab-code-wrap code {
	font-family: inherit;
	color: inherit;
	background: transparent;
	padding: 0;
}

/* ─── 参考・出典セクション ────────────────────────────── */
.single-ailab__body .ai-lab-references {
	margin-top: var(--space-7);
	padding: var(--space-5);
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
}

.single-ailab__body .ai-lab-references h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	font-size: var(--fs-xl);
}

.single-ailab__body .ai-lab-references .ai-lab-num {
	min-width: 40px;
	height: 40px;
	font-size: var(--fs-base);
}

.single-ailab__body .ai-lab-references ul {
	margin: var(--space-3) 0 0;
}

/* ============================================================
 * 10. 文中インライン CTA / シェア / CTAカード
 *    （コラム single-post と機能同等。BEM だけ書き換え）
 * ============================================================ */

.single-ailab__inline-cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	background: linear-gradient(135deg, var(--color-glass-brand), transparent);
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-md);
	margin: var(--space-6) 0;
}

@media (min-width: 600px) {
	.single-ailab__inline-cta {
		flex-direction: row;
		align-items: center;
		gap: var(--space-4);
	}
}

.single-ailab__inline-cta__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 4px;
}

.single-ailab__inline-cta__title {
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.4;
	margin: 0 0 4px;
}

.single-ailab__inline-cta__desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.5;
}

.single-ailab__inline-cta__body {
	flex: 1;
}

.single-ailab__inline-cta__btn {
	flex-shrink: 0;
	align-self: stretch;
	font-size: var(--fs-base);
}

@media (min-width: 600px) {
	.single-ailab__inline-cta__btn {
		align-self: center;
	}
}

/* ─── シェアボタン ────────────────────────────────────── */
.single-ailab__share {
	margin: var(--space-6) 0;
}

.single-ailab__share-title {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--space-3);
}

.single-ailab__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	padding: 0;
	margin: 0;
}

.single-ailab__share-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: var(--color-bg-base);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	color: var(--color-text-primary);
	font-size: var(--fs-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	min-height: 48px;
	transition: all 0.2s;
}

.single-ailab__share-btn:hover {
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
	border-color: var(--color-brand);
}

.single-ailab__share-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ─── CTAカード3枚（記事末尾） ────────────────────────── */
.single-ailab__cta-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin: var(--space-7) 0;
}

@media (min-width: 768px) {
	.single-ailab__cta-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.single-ailab__cta-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.single-ailab__cta-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-5);
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: all 0.3s;
	min-height: 200px;
}

.single-ailab__cta-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px -8px rgba(6, 123, 123, 0.18);
}

.single-ailab__cta-card-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--color-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-3);
}

.single-ailab__cta-card-icon svg {
	width: 22px;
	height: 22px;
	fill: var(--color-text-dark-primary);
}

.single-ailab__cta-card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	margin: 0 0 var(--space-2);
	line-height: 1.4;
}

.single-ailab__cta-card-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: 1.6;
	margin: 0 0 var(--space-3);
	flex: 1;
}

.single-ailab__cta-card-arrow {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-brand);
}

/* ============================================================
 * 11. 次に読む / 関連記事（AI Lab 内完結）
 * ============================================================ */

.single-ailab__next {
	margin: var(--space-7) 0;
}

.single-ailab__next-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--space-3);
}

.single-ailab__next-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text-primary);
	transition: all 0.3s;
}

@media (min-width: 600px) {
	.single-ailab__next-card {
		grid-template-columns: 240px 1fr;
	}
}

.single-ailab__next-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.15);
}

.single-ailab__next-card-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	position: relative;
}

.single-ailab__next-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-ailab__next-card-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.4) 100%);
}

.single-ailab__next-card-body {
	padding: var(--space-4) var(--space-5);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.single-ailab__next-card-cat {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.06em;
	margin: 0 0 var(--space-2);
}

.single-ailab__next-card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

/* ─── 関連記事グリッド ────────────────────────────────── */
.single-ailab__related {
	margin: var(--space-7) 0;
}

.single-ailab__related-title {
	font-size: var(--fs-xl);
	font-weight: 800;
	color: var(--color-text-primary);
	margin: 0 0 var(--space-4);
	letter-spacing: -0.01em;
}

.single-ailab__related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 600px) {
	.single-ailab__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.single-ailab__related-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.single-ailab__related-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: var(--color-text-primary);
	transition: all 0.3s;
}

.single-ailab__related-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.12);
}

.single-ailab__related-card-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	position: relative;
}

.single-ailab__related-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-ailab__related-card-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%);
	z-index: 1;
}

.single-ailab__related-card-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.single-ailab__related-card-play svg {
	width: 16px;
	height: 16px;
	fill: var(--color-brand);
	margin-left: 2px;
}

.single-ailab__related-card-body {
	padding: var(--space-4);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}

.single-ailab__related-card-cat {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.06em;
}

.single-ailab__related-card-title {
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.single-ailab__related-card-meta {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	margin-top: auto;
}

/* ============================================================
 * 12. サイドバー（AI Lab 専用構成）
 * ============================================================ */

@media (min-width: 1024px) {
	.single-ailab__sidebar {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
	}
}

.ailab-sidebar-block {
	background: var(--color-bg-surface);
	border-radius: var(--radius-md);
	padding: var(--space-4);
}

.ailab-sidebar-block__title {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 var(--space-3);
}

/* ─── 検索 ───────────────────────────────────────────── */
.ailab-sidebar-search-block {
	background: linear-gradient(135deg, var(--color-brand) 0%, #054F4F 100%);
	color: var(--color-text-dark-primary);
	padding: var(--space-4);
	border-radius: var(--radius-md);
}

.ailab-sidebar-search-block .ailab-sidebar-block__title {
	color: rgba(255, 255, 255, 0.85);
}

.ailab-sidebar-search {
	display: flex;
	gap: 4px;
	align-items: stretch;
}

.ailab-sidebar-search__input {
	flex: 1;
	min-width: 0;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	font-size: var(--fs-base);
	background: rgba(255, 255, 255, 0.95);
	color: var(--color-text-primary);
	min-height: 44px;
}

.ailab-sidebar-search__btn {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: var(--color-action);
	color: var(--color-text-primary);
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ailab-sidebar-search__btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ─── 動画リスト ─────────────────────────────────────── */
.ailab-sidebar-videos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ailab-sidebar-videos li {
	margin: 0;
}

.ailab-sidebar-video {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: opacity 0.2s;
}

.ailab-sidebar-video:hover {
	opacity: 0.8;
}

.ailab-sidebar-video__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: #000;
	position: relative;
}

.ailab-sidebar-video__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ailab-sidebar-video__title {
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ─── 記事リスト ─────────────────────────────────────── */
.ailab-sidebar-recent {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ailab-sidebar-recent li {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
	padding-bottom: var(--space-3);
}

.ailab-sidebar-recent li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ailab-sidebar-recent a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color 0.2s;
}

.ailab-sidebar-recent a:hover {
	color: var(--color-brand);
}

.ailab-sidebar-recent__date {
	font-size: var(--fs-xs);
	font-weight: 500;
	color: var(--color-text-muted);
	letter-spacing: 0.04em;
}

/* ─── ラボの棚 / LINE 誘導 ────────────────────────────── */
.ailab-sidebar-resource {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4);
	background: linear-gradient(135deg, var(--color-glass-brand), var(--color-glass-default));
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--color-text-primary);
	transition: all 0.3s var(--ease-out-expo);
}

.ailab-sidebar-resource:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -6px rgba(6, 123, 123, 0.18);
}

.ailab-sidebar-resource__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-brand);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ailab-sidebar-resource__title {
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.ailab-sidebar-resource__desc {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	line-height: 1.5;
	margin: 0;
}

.ailab-sidebar-line {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	background: #06C755;
	color: #FFFFFF;
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: opacity 0.2s;
}

.ailab-sidebar-line:hover {
	opacity: 0.9;
}

.ailab-sidebar-line__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ailab-sidebar-line__icon svg {
	width: 22px;
	height: 22px;
	fill: #FFFFFF;
}

.ailab-sidebar-line__title {
	font-size: var(--fs-sm);
	font-weight: 700;
	margin: 0;
}

.ailab-sidebar-line__desc {
	font-size: var(--fs-xs);
	opacity: 0.92;
	margin: 0;
}

/* ─── sticky 追従ゾーン ──────────────────────────────── */
.ailab-sidebar-sticky-zone {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.ailab-sidebar-sticky-zone {
		position: sticky;
		top: calc(var(--header-height, 64px) + var(--space-3));
	}
}

/* ============================================================
 * 13. アクセシビリティ
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.single-ailab__video-thumb img,
	.single-ailab__video-play,
	.single-ailab__cta-card,
	.single-ailab__related-card,
	.single-ailab__resource-cta,
	.ailab-sidebar-resource,
	.single-ailab__progress-bar {
		transition: none !important;
		animation: none !important;
	}
}

@media (hover: none) {
	.single-ailab__cta-card:hover,
	.single-ailab__related-card:hover,
	.single-ailab__resource-cta:hover,
	.ailab-sidebar-resource:hover,
	.single-ailab__next-card:hover {
		transform: none;
		box-shadow: none;
	}
}

/* ============================================================
 * 14. h1 の小見出し（サブタイトル）
 * ============================================================ */

.single-ailab__title-sub,
.single-resource__title-sub {
	display: block;
	margin-top: var(--space-2);
	font-size: 0.55em;
	font-weight: 600;
	color: var(--color-text-secondary);
	letter-spacing: 0;
}

/* ============================================================
 * 15. SWELL 由来 class への互換スタイル
 *    （WP 化時に the_content フィルターで coletlab-* に置換予定。
 *     preview ではこのまま legacy class で表示される）
 * ============================================================ */

/* 注意ボックス（is-style-big_icon_caution → coletlab-callout--caution） */
.single-ailab__body .is-style-big_icon_caution,
.single-ailab__body .coletlab-callout--caution {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding: var(--space-4) var(--space-5);
	background: rgba(244, 163, 64, 0.08);
	border-radius: var(--radius-md);
	margin: var(--space-4) 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
	position: relative;
}

.single-ailab__body .is-style-big_icon_caution::before,
.single-ailab__body .coletlab-callout--caution::before {
	content: '注意';
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 2px var(--space-2);
	background: var(--color-action);
	color: var(--color-text-primary);
	border-radius: var(--radius-sm);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	height: fit-content;
}

/* ポイントボックス（is-style-big_icon_point → coletlab-callout--point） */
.single-ailab__body .is-style-big_icon_point,
.single-ailab__body .coletlab-callout--point {
	position: relative;
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--color-brand);
	background: var(--color-glass-brand);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--fs-base);
	line-height: 1.75;
	color: var(--color-text-primary);
	margin: var(--space-5) 0;
}

.single-ailab__body .is-style-big_icon_point::before,
.single-ailab__body .coletlab-callout--point::before {
	content: 'POINT';
	display: block;
	font-size: var(--fs-xs);
	font-weight: 800;
	color: var(--color-brand);
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}

/* マーカー（swl-marker mark_yellow → coletlab-marker--amber） */
.single-ailab__body .swl-marker.mark_yellow,
.single-ailab__body .coletlab-marker--amber {
	background: linear-gradient(transparent 60%, rgba(244, 163, 64, 0.32) 60%);
	font-weight: 700;
	padding: 0 2px;
}

/* リスト（-list-under-dashed → coletlab-list--under-dashed） */
.single-ailab__body .-list-under-dashed,
.single-ailab__body .coletlab-list--under-dashed {
	list-style: none;
	padding-left: 0;
}

.single-ailab__body .-list-under-dashed > li,
.single-ailab__body .coletlab-list--under-dashed > li {
	position: relative;
	padding: var(--space-2) 0 var(--space-2) var(--space-5);
	border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
	line-height: 1.85;
}

.single-ailab__body .-list-under-dashed > li::before,
.single-ailab__body .coletlab-list--under-dashed > li::before {
	content: '';
	position: absolute;
	left: 6px;
	top: calc(0.95em + var(--space-2));
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-brand);
}

/* FAQ（swell-block-faq → coletlab-faq） */
.single-ailab__body .swell-block-faq,
.single-ailab__body .coletlab-faq {
	margin: var(--space-5) 0;
	border-top: 1px solid var(--color-border-subtle);
}

.single-ailab__body .swell-block-faq__item,
.single-ailab__body .coletlab-faq__item {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border-subtle);
}

.single-ailab__body .faq_q,
.single-ailab__body .coletlab-faq__q {
	position: relative;
	padding-left: 36px;
	margin: 0 0 var(--space-3);
	font-size: var(--fs-base);
	font-weight: 700;
	color: var(--color-text-primary);
	line-height: 1.6;
	border: 0;
}

.single-ailab__body .faq_q::before,
.single-ailab__body .coletlab-faq__q::before {
	content: 'Q';
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-brand);
	color: var(--color-text-dark-primary);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	font-weight: 800;
}

.single-ailab__body .faq_a,
.single-ailab__body .coletlab-faq__a {
	position: relative;
	padding-left: 36px;
	color: var(--color-text-secondary);
	font-size: var(--fs-sm);
	line-height: 1.85;
}

.single-ailab__body .faq_a::before,
.single-ailab__body .coletlab-faq__a::before {
	content: 'A';
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-action);
	color: var(--color-text-primary);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	font-weight: 800;
}

.single-ailab__body .faq_a p,
.single-ailab__body .coletlab-faq__a p {
	margin: 0;
}

/* WP 画像（wp-block-image） */
.single-ailab__body .wp-block-image {
	margin: var(--space-5) 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
}

.single-ailab__body .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.single-ailab__body .wp-block-image figcaption {
	padding: var(--space-2) var(--space-4);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	background: var(--color-bg-surface);
	margin: 0;
}

/* WP 標準リスト（wp-block-list） */
.single-ailab__body ul.wp-block-list:not(.-list-under-dashed):not(.coletlab-list--under-dashed) {
	list-style: disc;
	padding-left: var(--space-5);
	margin: var(--space-3) 0;
}

.single-ailab__body ol.wp-block-list:not(.-list-under-dashed):not(.coletlab-list--under-dashed) {
	list-style: decimal;
	padding-left: var(--space-5);
	margin: var(--space-3) 0;
}

.single-ailab__body ul.wp-block-list li,
.single-ailab__body ol.wp-block-list li {
	margin-bottom: var(--space-2);
	line-height: 1.85;
}

/* SP では padding-left を縮小 */
@media (max-width: 767px) {
	.single-ailab__body .-list-under-dashed > li,
	.single-ailab__body .coletlab-list--under-dashed > li {
		padding-left: var(--space-4);
	}
	.single-ailab__body .-list-under-dashed > li::before,
	.single-ailab__body .coletlab-list--under-dashed > li::before {
		left: 4px;
	}
}

/* ════════════════════════════════════════════════════════════════
 * ACF 連動ブロック（AI Lab 限定）
 *  - TL;DR : 記事冒頭の要約
 *  - YouTube : 連動動画埋め込み
 *  - related_resource : CTA カード3枚目を個別資料リンクへ差し替え
 * ════════════════════════════════════════════════════════════════ */

.single-post--ailab .single-post__tldr {
	margin: var(--space-5) 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	background: linear-gradient(180deg, rgba(6, 123, 123, 0.06), rgba(6, 123, 123, 0.02));
	border-left: 3px solid var(--color-brand);
	border-radius: 0 8px 8px 0;
}

.single-post--ailab .single-post__tldr-label {
	display: inline-block;
	margin: 0 0 var(--space-2);
	padding: 2px 10px;
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-brand);
	background: rgba(6, 123, 123, 0.12);
	border-radius: 4px;
}

.single-post--ailab .single-post__tldr-body {
	margin: 0;
	font-size: var(--fs-md);
	line-height: 1.85;
	color: var(--color-text-primary);
}

@media (max-width: 767px) {
	.single-post--ailab .single-post__tldr {
		margin: var(--space-4) 0 var(--space-5);
		padding: var(--space-3) var(--space-4);
	}
	.single-post--ailab .single-post__tldr-body {
		font-size: var(--fs-sm);
	}
}

.single-post--ailab .single-post__youtube {
	margin: var(--space-6) 0;
}

.single-post--ailab .single-post__youtube-label {
	margin: 0 0 var(--space-3);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary);
}

.single-post--ailab .single-post__youtube-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: var(--color-bg-surface);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.single-post--ailab .single-post__youtube-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 767px) {
	.single-post--ailab .single-post__youtube {
		margin: var(--space-5) 0;
	}
	.single-post--ailab .single-post__youtube-frame {
		border-radius: 8px;
	}
}

.single-post--ailab .single-post__cta-card--resource {
	background: linear-gradient(135deg, rgba(6, 123, 123, 0.08), rgba(6, 123, 123, 0.02));
	border-color: rgba(6, 123, 123, 0.25);
}

.single-post--ailab .single-post__cta-card--resource:hover {
	border-color: var(--color-brand);
}

.single-post--ailab .single-post__cta-card--resource .single-post__cta-card-icon {
	color: var(--color-brand);
}

/* 記事画像の角丸を 2px に統一（継承ルール2「角丸長方形にしない」準拠・2026-06-01） */
.single-ailab__body .wp-block-image,
.single-ailab__body .wp-block-image img,
.single-ailab__body .ai-lab-screenshot a,
.single-ailab__body .ai-lab-screenshot img {
	border-radius: var(--radius-sm);
}