/*
Theme Name: Bookish Library(ブッキッシュ・ライブラリー)
Theme URI: https://example.com/
Author: Library Builder
Description: 図書館をモチーフにした、明るく現代的なデザインの、本の要約サイト向けWordPressテーマ。付箋マーカーのカテゴリ、開いた本の背景イラスト、書誌情報、目次、読書進捗バー、マイ本棚、ダークモード、構造化データを備えています。
Version: 1.3.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bookish-library
Tags: blog, one-column, two-columns, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready, japanese
*/

/* ==========================================================
   1. Tokens
   ========================================================== */
:root {
	--bg: #f6f8f4;
	--surface: #ffffff;
	--text: #26322d;
	--muted: #5d6b64;
	--line: #dfe7e1;
	--primary: var(--bl-primary-custom, #1a7f67);
	--primary-deep: color-mix(in srgb, var(--primary) 82%, #000);
	--on-primary: #ffffff;
	--accent: var(--bl-accent-custom, #b5532f);
	--link: #17705a;
	--wood: #d9bd97;
	--wood-light: #ead7ba;
	--stamp: #e0644a;
	--star: #f0a81e;
	--shadow: 0 1px 2px rgba(30, 60, 50, .06), 0 8px 24px rgba(30, 60, 50, .07);
	--radius: 12px;

	--header-bg: var(--surface);
	--header-text: var(--text);
	--hero-bg: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, #ffffff) 0%, color-mix(in srgb, var(--primary) 5%, #ffffff) 55%, color-mix(in srgb, var(--accent) 10%, #ffffff) 100%);
	--hero-text: var(--text);
	--footer-bg: color-mix(in srgb, var(--primary) 10%, #ffffff);
	--footer-text: var(--text);

	--sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", Meiryo, sans-serif;
	--serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "BIZ UDPMincho", "MS PMincho", serif;
	--font-body: var(--sans);
	--font-head: var(--sans);

	--sticky-1: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 2.5h18v12.8L15.3 21H3z%27 fill=%27%23ffe27a%27/%3E%3Cpath d=%27M21 15.3L15.3 21v-5.7z%27 fill=%27%23000%27 fill-opacity=%27.2%27/%3E%3Cpath d=%27M6.5 7h11M6.5 10.5h11%27 stroke=%27%23000%27 stroke-opacity=%27.18%27 stroke-width=%271.3%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
	--sticky-2: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 2.5h18v12.8L15.3 21H3z%27 fill=%27%23ffb3c1%27/%3E%3Cpath d=%27M21 15.3L15.3 21v-5.7z%27 fill=%27%23000%27 fill-opacity=%27.2%27/%3E%3Cpath d=%27M6.5 7h11M6.5 10.5h11%27 stroke=%27%23000%27 stroke-opacity=%27.18%27 stroke-width=%271.3%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
	--sticky-3: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 2.5h18v12.8L15.3 21H3z%27 fill=%27%239ddcf0%27/%3E%3Cpath d=%27M21 15.3L15.3 21v-5.7z%27 fill=%27%23000%27 fill-opacity=%27.2%27/%3E%3Cpath d=%27M6.5 7h11M6.5 10.5h11%27 stroke=%27%23000%27 stroke-opacity=%27.18%27 stroke-width=%271.3%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
	--sticky-4: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M3 2.5h18v12.8L15.3 21H3z%27 fill=%27%23b9e6a1%27/%3E%3Cpath d=%27M21 15.3L15.3 21v-5.7z%27 fill=%27%23000%27 fill-opacity=%27.2%27/%3E%3Cpath d=%27M6.5 7h11M6.5 10.5h11%27 stroke=%27%23000%27 stroke-opacity=%27.18%27 stroke-width=%271.3%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");

	--bl-illust-opacity: .07;
	--wrap: 1120px;
	--header-h: 64px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #121816;
		--surface: #1b2420;
		--text: #e8ece9;
		--muted: #a4b0aa;
		--line: #33413a;
		--primary: #2f9e83;
		--on-primary: #0f1a16;
		--accent: #f0a37f;
		--link: #7fd1b9;
		--wood: #4a3a2c;
		--wood-light: #5d4a38;
		--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
		--header-bg: #172019;
		--header-text: #e8ece9;
		--hero-bg: linear-gradient(135deg, #1a2d26 0%, #17231f 60%, #2a2320 100%);
		--hero-text: #e8ece9;
		--footer-bg: #0f1613;
		--footer-text: #dfe6e2;
	}
	:root:not([data-theme="light"]) .bl-article::before { filter: invert(1); }
}
:root[data-theme="dark"] {
	--bg: #121816;
	--surface: #1b2420;
	--text: #e8ece9;
	--muted: #a4b0aa;
	--line: #33413a;
	--primary: #2f9e83;
	--on-primary: #0f1a16;
	--accent: #f0a37f;
	--link: #7fd1b9;
	--wood: #4a3a2c;
	--wood-light: #5d4a38;
	--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
	--header-bg: #172019;
	--header-text: #e8ece9;
	--hero-bg: linear-gradient(135deg, #1a2d26 0%, #17231f 60%, #2a2320 100%);
	--hero-text: #e8ece9;
	--footer-bg: #0f1613;
	--footer-text: #dfe6e2;
}
:root[data-theme="dark"] .bl-article::before { filter: invert(1); }

/* ==========================================================
   2. Base
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.85;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}
img, svg, video, iframe { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.5; font-weight: 700; margin: 0 0 .6em; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.4em; }
table { border-collapse: collapse; max-width: 100%; }
th, td { border: 1px solid var(--line); padding: .5em .8em; }
blockquote { margin: 1.5em 0; padding: .6em 1.2em; border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
pre, code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
pre { overflow-x: auto; padding: 1em; background: color-mix(in srgb, var(--text) 6%, transparent); }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.bl-skip {
	position: absolute; left: .5rem; top: -4rem; z-index: 200; background: var(--surface); color: var(--text);
	padding: .7rem 1rem; border: 2px solid var(--accent); font-family: var(--sans);
}
.bl-skip:focus { top: .5rem; }

.bl-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1rem; }
.bl-narrow { max-width: 820px; margin-inline: auto; padding-inline: 1rem; }
.bl-main { min-height: 60vh; padding-bottom: 3rem; }

.bl-btn, .wp-block-button__link, .comment-form .submit {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.4rem;
	background: var(--primary); color: var(--on-primary); border: 0; border-radius: 10px;
	font-family: var(--sans); font-size: .95rem; font-weight: 700; text-decoration: none; cursor: pointer;
	box-shadow: 0 2px 6px rgba(26, 127, 103, .25);
}
.bl-btn:hover { background: var(--primary-deep); color: var(--on-primary); }

/* ==========================================================
   3. Header
   ========================================================== */
.bl-progress {
	position: fixed; inset: 0 auto auto 0; height: 3px; width: 0; z-index: 120;
	background: var(--accent); transition: width .1s linear;
}
.bl-header {
	position: sticky; top: 0; z-index: 100; background: var(--header-bg); color: var(--header-text);
	border-top: 4px solid var(--primary); border-bottom: 1px solid var(--line);
	box-shadow: 0 6px 20px rgba(30, 60, 50, .06);
}
.bl-header-inner {
	max-width: var(--wrap); margin-inline: auto; padding: .5rem 1rem; min-height: var(--header-h);
	display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.bl-brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; min-width: 0; flex: 1 1 0; }
.bl-stamp {
	flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; background: var(--stamp);
	color: #ffffff; font-weight: 700; font-size: 1.35rem; line-height: 1; border-radius: 10px; transform: rotate(-5deg);
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), inset 0 0 0 4px var(--stamp), inset 0 0 0 5px rgba(255, 255, 255, .35);
}
.bl-logo img { display: block; width: 44px; height: auto; }
.bl-brand-text { display: flex; flex-direction: column; min-width: 0; }
.bl-site-title { font-size: 1.15rem; font-weight: 800; letter-spacing: .03em; line-height: 1.3; }
.bl-site-desc { font-size: .78rem; color: var(--muted); line-height: 1.4; font-family: var(--sans); }
.bl-tools { display: flex; gap: .25rem; margin-left: auto; flex: none; }
@media (max-width: 520px) { .bl-site-desc { display: none; } }
.bl-icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px; background: transparent; color: inherit;
	border: 0; border-radius: 50%; cursor: pointer;
}
.bl-icon-btn:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.bl-nav { flex-basis: 100%; display: none; font-family: var(--sans); }
.bl-nav.is-open { display: block; }
.bl-menu, .bl-menu ul { list-style: none; margin: 0; padding: 0; }
.bl-menu a { display: flex; align-items: center; min-height: 46px; padding: 0 .5rem; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.bl-menu a:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.bl-menu .current-menu-item > a, .bl-menu .current_page_item > a { box-shadow: inset 0 -3px 0 var(--primary); font-weight: 700; }
.bl-menu .sub-menu a { padding-left: 1.6rem; font-size: .92rem; }
.bl-search-panel { background: var(--surface); border-bottom: 1px solid var(--line); padding: .9rem 0; }
.bl-search-panel[hidden] { display: none; }

@media (min-width: 900px) {
	.bl-nav-toggle { display: none; }
	.bl-header-inner { flex-wrap: nowrap; }
	.bl-brand { flex: 0 1 auto; }
	.bl-tools { margin-left: 0; order: 3; }
	.bl-nav { display: block; flex-basis: auto; margin-left: auto; order: 2; }
	.bl-menu { display: flex; gap: .25rem; }
	.bl-menu a { border-top: 0; padding: 0 .9rem; }
	.bl-menu > li { position: relative; }
	.bl-menu .sub-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 12rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
	.bl-menu li:hover > .sub-menu, .bl-menu li:focus-within > .sub-menu { display: block; }
	.bl-menu .sub-menu a { padding-left: .9rem; border-top: 1px solid var(--line); }
}

/* ==========================================================
   4. Forms
   ========================================================== */
.bl-searchform { display: flex; gap: .5rem; max-width: 640px; }
.bl-searchfield, .bl-form input[type="text"], .bl-form input[type="email"], .bl-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; min-height: 46px; padding: .55rem .8rem; background: var(--surface); color: var(--text);
	border: 2px solid var(--line); border-radius: var(--radius); font: inherit; font-family: var(--sans); font-size: 1rem;
}
.bl-searchfield { flex: 1; min-width: 0; }
.bl-form label, .comment-form label { display: block; font-family: var(--sans); font-size: .9rem; font-weight: 600; margin-bottom: .25rem; }
.bl-hp { position: absolute; left: -9999px; }
.bl-alert { padding: .8rem 1rem; border-left: 5px solid; font-family: var(--sans); font-size: .95rem; }
.bl-alert--ok { border-color: #3f7d5a; background: rgba(63, 125, 90, .12); }
.bl-alert--ng { border-color: var(--stamp); background: rgba(181, 65, 47, .1); }

/* ==========================================================
   5. 付箋マーカー(黒丸の代わりに付箋イラスト)
   ========================================================== */
.bl-cat-list, .widget_categories ul, .entry-cats, .widget_categories .children { list-style: none; margin: 0; padding: 0; }
.bl-cat-list li, .widget_categories li, .entry-cats li {
	position: relative; padding-left: 1.9em; margin: 0; line-height: 1.7;
}
.bl-cat-list li::before, .widget_categories li::before, .entry-cats li::before {
	content: ""; position: absolute; left: 0; top: .28em; width: 1.4em; height: 1.4em;
	background: var(--sticky-1) center / contain no-repeat;
	transform: rotate(-6deg);
	filter: drop-shadow(0 1px 1px rgba(60, 40, 10, .35));
}
.bl-cat-list li:nth-child(4n+2)::before, .widget_categories li:nth-child(4n+2)::before, .entry-cats li:nth-child(4n+2)::before { background-image: var(--sticky-2); transform: rotate(4deg); }
.bl-cat-list li:nth-child(4n+3)::before, .widget_categories li:nth-child(4n+3)::before, .entry-cats li:nth-child(4n+3)::before { background-image: var(--sticky-3); transform: rotate(-3deg); }
.bl-cat-list li:nth-child(4n+4)::before, .widget_categories li:nth-child(4n+4)::before, .entry-cats li:nth-child(4n+4)::before { background-image: var(--sticky-4); transform: rotate(6deg); }
.widget_categories .children { padding-left: .4rem; margin-top: .2rem; }

.bl-cat-list a, .widget_categories a, .entry-cats a { color: inherit; text-decoration: none; display: inline-block; padding: .35em 0; }
.bl-cat-list a:hover, .widget_categories a:hover, .entry-cats a:hover { text-decoration: underline; }
.bl-count { color: var(--muted); font-size: .85em; font-family: var(--sans); }

.bl-cat-list--board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .15rem 1rem; }
.bl-cat-list--footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.entry-cats { display: flex; flex-wrap: wrap; gap: 0 1.2rem; margin-bottom: .5rem; font-family: var(--sans); font-size: .85rem; }
.entry-cats li { padding-left: 1.7em; }
.entry-cats a { padding: .4em 0; min-height: 28px; }

@media (min-width: 600px) { .bl-cat-list--board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .bl-cat-list--board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: no-preference) {
	.bl-cat-list li::before, .widget_categories li::before, .entry-cats li::before { transition: transform .18s ease; }
	.bl-cat-list li:hover::before, .widget_categories li:hover::before, .entry-cats li:hover::before { transform: translateY(-3px) rotate(0deg); }
}

/* ==========================================================
   6. Hero(図書館のエントランス)
   ========================================================== */
.bl-hero { position: relative; background: var(--hero-bg); color: var(--hero-text); padding: 2.4rem 0 3.8rem; text-align: left; }
.bl-hero::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 18px;
	background: repeating-linear-gradient(90deg, #f4b8a8 0 14px, #ffe27a 14px 20px, #a8dcc8 20px 38px, #c6c0ec 38px 50px, #a9cdee 50px 62px, #f3b6cf 62px 80px, #b9e6a1 80px 92px);
	border-top: 2px solid rgba(255, 255, 255, .7);
	opacity: .9;
}
.bl-hero-title { font-size: clamp(1.6rem, 5.4vw, 2.7rem); font-weight: 800; letter-spacing: .03em; margin-bottom: .5em; }
.bl-hero-text { max-width: 36em; color: var(--muted); font-size: 1rem; margin-bottom: 1.4rem; }
.bl-hero-search {
	max-width: 680px; padding: .8rem; background: var(--surface); color: var(--text);
	border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
}
.bl-hero-search .bl-searchform { max-width: none; }

/* ==========================================================
   7. Sections / home
   ========================================================== */
.bl-home { padding-top: 2rem; }
.bl-sec { margin-bottom: 2.6rem; }
.bl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bl-sec-title {
	font-size: 1.3rem; letter-spacing: .03em; margin-bottom: .9rem; padding-bottom: .35rem;
	border-bottom: 2px solid var(--line); position: relative;
}
.bl-sec-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 4.5rem; height: 2px; background: var(--accent); }
.bl-sec-head .bl-sec-title { flex: 1; min-width: 10rem; }
.bl-sec-more { font-family: var(--sans); font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }

.bl-board { background: var(--surface); border: 1px solid var(--line); padding: 1rem 1.1rem; border-radius: var(--radius); box-shadow: var(--shadow); }

/* 本棚(背表紙) */
.bl-shelf { overflow-x: auto; padding-top: .5rem; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.bl-spines {
	list-style: none; margin: 0; padding: 18px 16px 0; display: flex; align-items: flex-end; gap: 4px; width: max-content; min-width: 100%;
	background: linear-gradient(var(--surface), color-mix(in srgb, var(--wood) 16%, var(--surface)));
	border-bottom: 16px solid var(--wood); box-shadow: 0 5px 0 var(--wood-light) inset, 0 6px 12px rgba(80, 60, 30, .12);
}
.bl-spine { height: 210px; width: 46px; flex: none; }
.bl-spine:nth-child(5n+2) { height: 232px; width: 52px; }
.bl-spine:nth-child(5n+3) { height: 196px; width: 42px; }
.bl-spine:nth-child(5n+4) { height: 222px; width: 48px; }
.bl-spine:nth-child(5n+5) { height: 204px; width: 56px; }
.bl-spine a {
	display: block; height: 100%; padding: 14px 0; color: #26322d; text-decoration: none;
	writing-mode: vertical-rl; text-align: start; font-size: .92rem; letter-spacing: .1em; line-height: 46px; line-height: 1.5;
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 3px 3px 0 0;
	border-top: 4px solid rgba(255, 255, 255, .55); border-left: 2px solid rgba(255, 255, 255, .35); border-right: 2px solid rgba(0, 0, 0, .08);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
	padding-inline: 0; text-align: center;
}
.bl-spine span { display: block; padding-inline: .1rem; }
.bl-spine a:hover, .bl-spine a:focus-visible { filter: brightness(1.18); }
.bl-spine--1 a { background: #f4b8a8; }
.bl-spine--2 a { background: #a8dcc8; }
.bl-spine--3 a { background: #c6c0ec; }
.bl-spine--4 a { background: #f7dc8b; }
.bl-spine--5 a { background: #a9cdee; }
.bl-spine--6 a { background: #f3b6cf; }
.bl-shelf:focus-visible { outline-offset: 4px; }

/* ブックカード */
.bl-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.bl-card {
	display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 1rem; padding: 1rem;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); position: relative;
}
.bl-card-cover { display: block; align-self: start; }
.bl-cover-img, .bl-cover-ph { display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 4px 8px 8px 4px; box-shadow: 2px 3px 6px rgba(0, 0, 0, .3), inset 3px 0 0 rgba(255, 255, 255, .25); }
.bl-cover-ph { background: linear-gradient(135deg, #2f9e83, #1a7f67); color: #ffffff; display: grid; place-items: center; padding: .4rem; text-align: center; font-size: .78rem; line-height: 1.4; font-weight: 700; }
.bl-card-title { font-size: 1.08rem; margin: 0 0 .3em; line-height: 1.5; }
.bl-card-title a { color: inherit; text-decoration: none; }
.bl-card-title a::after { content: ""; position: absolute; inset: 0; }
.bl-card-title a:hover { text-decoration: underline; }
.bl-card-book { margin: 0 0 .3em; font-size: .85rem; color: var(--muted); font-family: var(--sans); }
.bl-card-rating { margin: 0 0 .3em; }
.bl-card-excerpt { margin: 0 0 .4em; font-size: .92rem; line-height: 1.75; color: var(--text); }
.bl-card-meta { margin: 0; font-size: .8rem; color: var(--muted); font-family: var(--sans); }
.bl-card .entry-cats { position: relative; z-index: 2; margin-bottom: .2rem; }
.bl-card:hover { border-color: var(--primary); }

@media (min-width: 640px) { .bl-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bl-layout .bl-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-home .bl-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bl-card { grid-template-columns: 84px minmax(0, 1fr); } }

/* 星 */
.bl-stars { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.bl-star { font-size: 1.05rem; }
.bl-star.is-full { color: var(--star); }
.bl-star.is-empty { color: var(--line); }
.bl-star.is-half { background: linear-gradient(90deg, var(--star) 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bl-stars-num { margin-left: .4em; font-family: var(--sans); font-size: .85rem; color: var(--muted); }

/* ランキング */
.bl-ranking { list-style: none; margin: 0; padding: 0; counter-reset: rank; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bl-ranking li { counter-increment: rank; position: relative; }
.bl-ranking a { display: block; color: inherit; text-decoration: none; }
.bl-rank-cover { display: block; position: relative; }
.bl-rank-cover::before {
	content: counter(rank); position: absolute; z-index: 2; left: -6px; top: -8px; width: 32px; height: 32px; display: grid; place-items: center;
	background: var(--stamp); color: #fbeed8; font-family: var(--font-head); font-weight: 700; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .5);
}
.bl-rank-title { display: block; margin-top: .5rem; font-size: .92rem; line-height: 1.55; font-weight: 700; }
.bl-ranking a:hover .bl-rank-title { text-decoration: underline; }
@media (min-width: 640px) { .bl-ranking { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.bl-rank-list { margin: 0; padding-left: 1.6em; }
.bl-rank-list li { margin-bottom: .4rem; }
.bl-new-list { list-style: none; margin: 0; padding: 0; }
.bl-new-list a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .7rem; align-items: center; color: inherit; text-decoration: none; padding: .35rem 0; }
.bl-new-list .bl-mini-title { font-size: .9rem; line-height: 1.5; }

/* 特集棚・著者 */
.bl-series { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.bl-series a { display: flex; flex-direction: column; justify-content: space-between; min-height: 88px; padding: .8rem 1rem; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-bottom: 6px solid var(--wood); border-radius: var(--radius); box-shadow: var(--shadow); }
.bl-series a:hover { border-bottom-color: var(--accent); }
.bl-series-name { font-weight: 700; line-height: 1.5; }
.bl-series-count { font-family: var(--sans); font-size: .82rem; color: var(--muted); }
@media (min-width: 720px) { .bl-series { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.bl-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; font-family: var(--sans); font-size: .9rem; }
.bl-chips a:hover { border-color: var(--accent); }

/* ==========================================================
   8. Layout & page heads
   ========================================================== */
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: .5rem; }
@media (min-width: 960px) { .bl-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.bl-page-head { margin-bottom: 1.4rem; }
.bl-page-kind { margin: 0 0 .2rem; font-family: var(--sans); font-size: .85rem; color: var(--accent); font-weight: 700; }
.bl-page-title { font-size: clamp(1.5rem, 4.6vw, 2.1rem); margin-bottom: .3em; letter-spacing: .02em; }
.bl-page-desc { color: var(--muted); }
.bl-empty { padding: 1.4rem; background: var(--surface); border: 1px dashed var(--line); text-align: center; color: var(--muted); }
.bl-empty-lead { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.bl-empty--search .bl-cat-list { text-align: left; display: inline-grid; grid-template-columns: repeat(2, auto); gap: .1rem 1.4rem; }

.bl-breadcrumb { padding: .8rem 0 .3rem; font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.bl-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: .15rem .4rem; }
.bl-breadcrumb li + li::before { content: "›"; margin-right: .4rem; color: var(--muted); }
.bl-breadcrumb a { color: inherit; display: inline-block; padding: .3em 0; }

/* sidebar / widgets */
.bl-sidebar .widget, .bl-footer .widget { margin-bottom: 1.8rem; }
.widget-title { font-size: 1.05rem; letter-spacing: .08em; margin-bottom: .7rem; padding-bottom: .3rem; border-bottom: 2px solid var(--line); }
.bl-sidebar ul, .bl-footer ul { padding-left: 1.2em; }
.bl-sidebar .bl-widget { background: var(--surface); border: 1px solid var(--line); padding: 1rem 1.1rem; border-radius: var(--radius); }
.bl-sidebar .widget_categories ul, .bl-sidebar .bl-new-list { padding-left: 0; }

/* pagination */
.navigation.pagination { margin: 2rem 0; font-family: var(--sans); }
.nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 .8rem; border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; border-radius: var(--radius); }
.page-numbers.current { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
a.page-numbers:hover { border-color: var(--accent); }

/* ==========================================================
   9. Single / article(背景に開いた本のイラスト)
   ========================================================== */
.bl-single { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-top: .4rem; }
.bl-single.has-toc .bl-toc-wrap { order: -1; }
@media (min-width: 1000px) {
	.bl-single.has-toc { grid-template-columns: minmax(0, 1fr) 270px; gap: 1.6rem; align-items: start; }
	.bl-single.has-toc .bl-toc-wrap { order: 0; position: sticky; top: calc(var(--header-h) + 18px); max-height: calc(100vh - var(--header-h) - 40px); overflow: auto; }
}
.bl-article {
	position: relative; isolation: isolate; background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.1rem 1.6rem; overflow: hidden;
}
.bl-article::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url("assets/img/open-book.svg") center top / min(760px, 130%) auto repeat-y;
	opacity: var(--bl-illust-opacity);
}
.bl-article--page { margin-block: 1rem 2rem; }
@media (min-width: 700px) { .bl-article { padding: 2.2rem 2.4rem 2.4rem; } }
.bl-article-head { margin-bottom: 1.2rem; }
.bl-article-title { font-size: clamp(1.55rem, 5.2vw, 2.25rem); line-height: 1.45; letter-spacing: .01em; margin-bottom: .5rem; }
.bl-article-meta { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; margin: 0; font-family: var(--sans); font-size: .82rem; color: var(--muted); }
.bl-pr-notice { display: inline-block; margin: 0 0 1rem; padding: .3rem .8rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 10%, transparent); font-family: var(--sans); font-size: .82rem; }

.entry-content { font-size: 1.04rem; line-height: 2; }
.entry-content > * { max-width: 100%; }
.entry-content h2 { font-size: 1.45rem; margin: 2.4em 0 .8em; padding: .35em .2em .35em .8em; border-left: 6px solid var(--primary); border-bottom: 1px solid var(--line); }
.entry-content h3 { font-size: 1.2rem; margin: 2em 0 .6em; padding-bottom: .2em; border-bottom: 2px dotted var(--accent); }
.entry-content h4 { font-size: 1.05rem; margin: 1.6em 0 .5em; }
.entry-content ul { list-style: square; }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption, .wp-caption-text { font-size: .85rem; color: var(--muted); text-align: center; font-family: var(--sans); }
.entry-content .alignwide { max-width: 100%; }
.entry-content .wp-block-table { overflow-x: auto; }

/* 書誌情報 */
.bl-bookinfo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem; margin: 0 0 1.2rem; padding: 1.1rem; background: color-mix(in srgb, var(--surface) 88%, var(--bg)); border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: var(--radius); position: relative; }
.bl-bookinfo-label { margin: 0 0 .1rem; font-family: var(--sans); font-size: .78rem; color: var(--accent); font-weight: 700; }
.bl-bookinfo-title { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.bl-dl { margin: 0 0 .8rem; font-family: var(--sans); font-size: .9rem; }
.bl-dl > div { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: .6rem; padding: .35rem 0; border-bottom: 1px dotted var(--line); }
.bl-dl dt { color: var(--muted); }
.bl-dl dd { margin: 0; }
@media (min-width: 640px) { .bl-bookinfo { grid-template-columns: 130px minmax(0, 1fr); } }

/* マイ本棚ボタン */
.bl-shelf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.2rem; font-family: var(--sans); }
.bl-shelf-btn { min-height: 44px; padding: 0 1.1rem; background: var(--surface); color: var(--text); border: 2px solid var(--line); border-radius: 999px; font: inherit; font-size: .92rem; cursor: pointer; }
.bl-shelf-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.bl-shelf-link { font-size: .88rem; min-height: 44px; display: inline-flex; align-items: center; }

/* 目次 */
.bl-toc { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--primary); border-radius: var(--radius); font-family: var(--sans); }
.bl-toc summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 0 1rem; font-weight: 700; list-style-position: inside; }
.bl-toc nav { padding: 0 1rem 1rem; }
.bl-toc ol { list-style: none; margin: 0; padding: 0; font-size: .9rem; line-height: 1.55; }
.bl-toc li { margin: 0; }
.bl-toc li.lv3 { padding-left: 1em; font-size: .86rem; }
.bl-toc a { display: block; padding: .5em .6em; color: inherit; text-decoration: none; border-left: 3px solid transparent; }
.bl-toc a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bl-toc a.is-active { border-left-color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* 注意書き・プロフィール */
.bl-notice, .bl-profile { margin-top: 2rem; padding: 1rem 1.1rem; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 85%, var(--bg)); font-size: .9rem; line-height: 1.8; border-radius: var(--radius); }
.bl-notice { border-left: 5px solid var(--accent); }
.bl-notice p, .bl-profile p { margin-bottom: .4em; }
.bl-notice-title, .bl-profile-name { font-weight: 700; font-family: var(--sans); }

.bl-related { margin-top: 2.4rem; }
.post-navigation { margin: 2rem 0; font-family: var(--sans); }
.post-navigation .nav-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; justify-content: stretch; }
.post-navigation a { display: block; min-height: 44px; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; border-radius: var(--radius); line-height: 1.5; }
.post-navigation .nav-sub { display: block; font-size: .78rem; color: var(--muted); }
@media (min-width: 700px) { .post-navigation .nav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-navigation .nav-next { text-align: right; } }

/* コメント */
.bl-comments { margin: 2.4rem 0; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.bl-comment-list { list-style: none; padding: 0; }
.bl-comment-list .comment-body { padding: .8rem 0; border-bottom: 1px dotted var(--line); font-size: .95rem; }
.comment-form p { margin-bottom: 1rem; }

/* フォーム・404・マイ本棚 */
.bl-404 { text-align: center; padding: 2.4rem 0 1rem; }
.bl-404-code { font-size: clamp(4rem, 20vw, 7rem); font-weight: 700; line-height: 1; margin: 0; color: var(--accent); opacity: .55; letter-spacing: .1em; }
.bl-404 .bl-searchform { margin: 1.2rem auto; }
.bl-404 .bl-cat-list { display: inline-grid; grid-template-columns: repeat(2, auto); gap: .1rem 1.6rem; text-align: left; margin-bottom: 1.4rem; }
.bl-tabs { display: flex; gap: .4rem; margin-bottom: 1rem; font-family: var(--sans); }
.bl-tab { min-height: 44px; padding: 0 1.1rem; background: var(--surface); color: var(--text); border: 2px solid var(--line); border-radius: 999px; font: inherit; font-size: .92rem; cursor: pointer; }
.bl-tab.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.bl-mybook-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bl-mybook-item { background: var(--surface); border: 1px solid var(--line); padding: .7rem; border-radius: var(--radius); display: flex; flex-direction: column; gap: .5rem; }
.bl-mybook-item a { color: inherit; text-decoration: none; font-weight: 700; font-size: .92rem; line-height: 1.5; }
.bl-mybook-item .bl-cover-ph, .bl-mybook-item img { width: 100%; }
.bl-mybook-status { font-family: var(--sans); font-size: .78rem; color: var(--accent); font-weight: 700; }
.bl-mybook-item button { min-height: 40px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-family: var(--sans); font-size: .82rem; cursor: pointer; }
@media (min-width: 640px) { .bl-mybook-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bl-note { font-size: .85rem; color: var(--muted); }


/* ==========================================================
   9b. Kindle Unlimited 案内枠(広告)
   ========================================================== */
.bl-ku { position: relative; margin: 2rem 0; padding: 1.1rem 1.2rem 1rem; background: color-mix(in srgb, var(--surface) 90%, var(--bg)); border: 2px dashed var(--accent); border-radius: var(--radius); font-family: var(--sans); }
.bl-ku--top { margin: 0 0 2rem; }
.bl-ku-badge { display: inline-block; margin: 0 0 .5rem; padding: .1rem .6rem; background: var(--accent); color: var(--surface); font-size: .75rem; font-weight: 700; letter-spacing: .1em; border-radius: 2px; }
.bl-ku-title { margin: 0 0 .4rem; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; line-height: 1.5; }
.bl-ku-text { margin: 0 0 .8rem; font-size: .9rem; line-height: 1.8; }
.bl-ku-action { margin: 0 0 .6rem; }
.bl-ku-disclosure { margin: 0; font-size: .75rem; color: var(--muted); line-height: 1.6; }

/* ==========================================================
   10. Footer
   ========================================================== */
.bl-footer { background: var(--footer-bg); color: var(--footer-text); border-top: 1px solid var(--line); padding: 2.2rem 0 1.4rem; font-family: var(--sans); font-size: .92rem; line-height: 1.7; }
.bl-footer a { color: var(--link); }
.bl-footer .bl-cat-list a, .bl-footer .bl-footer-menu a { color: var(--footer-text); }
.bl-footer .widget-title { border-color: var(--line); color: inherit; }
.bl-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
@media (min-width: 800px) { .bl-footer-grid { grid-template-columns: 1fr 1.3fr 1fr; } }
.bl-footer .bl-footer-menu, .bl-footer .bl-cat-list { list-style: none; margin: 0; padding-left: 0; }
.bl-footer-menu a { display: inline-flex; align-items: center; min-height: 40px; }
.bl-operator { opacity: .85; margin-top: .6rem; }
.bl-copy { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); text-align: center; }
.bl-totop { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; width: 48px; height: 48px; display: grid; place-items: center; background: var(--primary); color: var(--on-primary); border: 0; border-radius: 50%; cursor: pointer; box-shadow: var(--shadow); }
.bl-totop[hidden] { display: none; }

/* ==========================================================
   11. WordPress core classes
   ========================================================== */
.alignleft { float: left; margin: .3em 1.2em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.2em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.sticky, .bypostauthor { display: block; }
.gallery { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gallery-item { margin: 0; }
@media (max-width: 520px) { .alignleft, .alignright { float: none; display: block; margin: 1em auto; } }

/* ==========================================================
   12. Motion preferences
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}