/* @page {
	size: A4;
	margin: 2cm;
}

body {
	font-family: "YuGothic", sans-serif;
	line-height: 1.6;
} */

/* ベース：本文フォント */
:root {
	--font-main: "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
}

html,
body {
	font-family: var(--font-main);
	line-height: 1.8;
	color: #222;
	margin: 0;
	padding: 0;
}

/* ===== ページ設定 =====
   A4縦 / 余白 / 柱・ノンブル  */
@page {
	size: A4 portrait;
	margin: 20mm 18mm 20mm 18mm;

	/* フッター中央にページ番号 */
	@bottom-center {
		content: counter(page);
		font-size: 10pt;
		color: #666;
	}
}

/* 偶奇ページで柱（Running header）を分ける例 */
@page: left {
	@top-left {
		content: string(chapterTitle);
		font-size: 9pt;
		color: #888;
	}
}

@page: right {
	@top-right {
		content: string(chapterTitle);
		font-size: 9pt;
		color: #888;
	}
}

/* 章タイトルを柱文字列にセット */
.chapter>h1 {
	string-set: chapterTitle content();
	break-before: page;
	/* 各章は新ページから */
	margin: 0 0 12pt;
	font-size: 20pt;
}

.chapter h2 {
	margin: 16pt 0 6pt;
	font-size: 14pt;
}

/* 本文レイアウト */
p {
	margin: 0 0 10pt;
	font-size: 11pt;
}

/* ===== 表紙 ===== */
.cover {
	break-after: page;
	/* 表紙は独立ページ */
	display: grid;
	place-items: center;
	height: 100vh;
	/* 見開き時も全面に */
	text-align: center;
	background: #f6f7fb;
}

.cover-art img {
	width: 60%;
	max-width: 500px;
	display: block;
	margin: 0 auto 16pt;
}

.book-title {
	font-size: 28pt;
	margin: 8pt 0 4pt;
	letter-spacing: .03em;
}

.book-subtitle {
	font-size: 14pt;
	color: #666;
	margin: 0 0 12pt;
}

.book-meta {
	font-size: 10pt;
	color: #999;
}

/* ===== 目次 ===== */
.toc {
	break-after: page;
}

.toc h1 {
	font-size: 18pt;
	margin: 0 0 12pt;
}

.toc ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

.toc li {
	display: grid;
	grid-template-columns: 1fr auto;
	/* 左：項目 右：ページ番号 */
	gap: 8pt;
	align-items: baseline;
	padding: 4pt 0;
	border-bottom: 1px dotted #ddd;
}

.toc a {
	text-decoration: none;
	color: #222;
}

.toc .toc-page::after {
	/* data-target="#id" → その要素のページ番号を表示 */
	content: target-counter(attr(data-target), page);
	color: #666;
	font-variant-numeric: tabular-nums;
}

/* ===== ノート、脚注などの例 ===== */
.note {
	border-left: 3px solid #ccc;
	padding: 6pt 10pt;
	background: #fafafa;
	margin: 10pt 0;
}

/* 印刷時の見開き（お好みで） */
@media print {
	html {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}