/* 電子書籍販売所。読み物を売る場所なので、字は大きめ・行間は広めにする。 */
:root {
	--bg: #fbfaf7;
	--fg: #1c1b19;
	--muted: #6b6862;
	--line: #e0dcd3;
	--card: #ffffff;
	--accent: #7a4a2b;
	--accent-fg: #ffffff;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
	line-height: 1.9;
	font-size: 16px;
}

header.site {
	background: var(--card);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 10;
}

header.site .inner,
main {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
}

header.site .inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 60px;
	flex-wrap: wrap;
}

header.site h1 {
	font-size: 20px;
	margin: 0;
	letter-spacing: 0.08em;
}

/* 店のロゴ。開いた本の記号＋字面(JINKEN.TV / 電子書籍)。
   記号は currentColor なので、白抜きにしたい場所では color を変えるだけでよい。
   字面は既存のものをそのまま使い、行を2段に積んで記号と釣り合う塊にする。 */
header.site h1.logo {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

header.site h1.logo .mark-link {
	display: block;
	flex: none;
	line-height: 0;
}

header.site h1.logo .mark {
	display: block;
	width: 1.65em;
	height: 1.15em;
}

header.site h1.logo .mark path {
	fill: currentColor;
}

header.site h1.logo .words {
	display: flex;
	flex-direction: column;
	line-height: 1.12;
}

/* 字間を空けた分、最後の字の後ろに空きが残って中心がずれる。
   同じ幅を頭に入れて釣り合わせる */
header.site h1.logo .ja {
	letter-spacing: 0.34em;
	text-indent: 0.34em;
}

header.site h1 a {
	color: inherit;
	text-decoration: none;
}

header.site nav {
	margin-left: auto;
	display: flex;
	gap: 18px;
	font-size: 14px;
	font-family: system-ui, sans-serif;
}

a {
	color: var(--accent);
}

main {
	padding-top: 28px;
	padding-bottom: 64px;
}

.preview-note {
	background: #fff6e5;
	border: 1px solid #e8d5a8;
	padding: 10px 16px;
	font-size: 13px;
	font-family: system-ui, sans-serif;
	color: #6a5220;
	margin-bottom: 24px;
}

.books {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 28px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.book-card {
	background: var(--card);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
}

/* 表紙は切り抜かない。本ごとに縦横比が違う(5:8 など)ので、枠に収めて
   余りは地の色で埋める */
.book-card a.thumb {
	display: block;
	aspect-ratio: 2 / 3;
	background: #efece5;
	overflow: hidden;
}

.book-card a.thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.book-card .no-cover {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--muted);
	font-size: 13px;
	padding: 12px;
	text-align: center;
}

.book-card .body {
	padding: 12px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
}

.book-card h2 {
	font-size: 16px;
	margin: 0;
	line-height: 1.5;
}

.book-card h2 a {
	color: inherit;
	text-decoration: none;
}

/* 内容紹介の頭だけ。全文は詳細画面にある */
.book-card .summary {
	margin: 4px 0 8px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.book-card .author,
.book-card .price {
	font-size: 13px;
	color: var(--muted);
	font-family: system-ui, sans-serif;
}

.book-card .price {
	margin-top: auto;
	color: var(--fg);
}

.owned {
	display: inline-block;
	font-size: 12px;
	font-family: system-ui, sans-serif;
	background: #eef3ec;
	border: 1px solid #cddcc6;
	color: #3f5c36;
	padding: 1px 8px;
}

.detail {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 36px;
	align-items: start;
}

/* 詳細では表紙を元の縦横比のまま全部見せる。表紙が無いときだけ枠を取る */
.detail .cover {
	border: 1px solid var(--line);
	background: #efece5;
}

.detail .cover:empty {
	aspect-ratio: 2 / 3;
}

.detail .cover img {
	width: 100%;
	height: auto;
	display: block;
}

.detail h1 {
	font-size: 26px;
	margin: 0 0 8px;
	line-height: 1.5;
}

.detail .author {
	color: var(--muted);
	margin: 0 0 20px;
}

.detail .description {
	white-space: pre-wrap;
}

.price-tag {
	font-size: 22px;
	font-family: system-ui, sans-serif;
	margin: 24px 0 12px;
}

button,
.button {
	font-family: system-ui, sans-serif;
	font-size: 15px;
	padding: 10px 22px;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--accent-fg);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

button.quiet,
.button.quiet {
	background: transparent;
	color: var(--accent);
}

button:disabled {
	opacity: 0.5;
	cursor: default;
}

.message {
	font-family: system-ui, sans-serif;
	font-size: 14px;
	padding: 10px 14px;
	margin: 16px 0;
	border: 1px solid var(--line);
	background: var(--card);
}

.message.error {
	border-color: #d9b3b3;
	background: #fdf3f3;
	color: #8a2b2b;
}

.message.done {
	border-color: #b9d3ae;
	background: #f2f8ef;
	color: #34602a;
}

#payment-element {
	margin: 18px 0;
	max-width: 460px;
}

table.admin {
	width: 100%;
	border-collapse: collapse;
	font-family: system-ui, sans-serif;
	font-size: 14px;
	background: var(--card);
}

table.admin th,
table.admin td {
	border: 1px solid var(--line);
	padding: 6px 10px;
	text-align: left;
	vertical-align: top;
}

/* 見出しは折らない。「売上」が2行に割れて行の高さが倍になっていた */
table.admin th {
	white-space: nowrap;
}

table.admin input[type="text"],
table.admin input[type="number"],
table.admin textarea {
	width: 100%;
	font: inherit;
	padding: 4px 6px;
	border: 1px solid var(--line);
}

form.upload {
	background: var(--card);
	border: 1px solid var(--line);
	padding: 20px;
	margin-bottom: 32px;
	font-family: system-ui, sans-serif;
	font-size: 14px;
	display: grid;
	gap: 12px;
	max-width: 620px;
}

form.upload label {
	display: grid;
	gap: 4px;
}

form.upload input,
form.upload textarea {
	font: inherit;
	padding: 6px 8px;
	border: 1px solid var(--line);
}

/* EPUB の置き場。label なので、押せば普通のファイル選択が開く */
.dropzone {
	justify-items: center;
	text-align: center;
	gap: 6px;
	padding: 28px 16px;
	border: 2px dashed var(--line);
	background: var(--bg);
	cursor: pointer;
}

.dropzone.over {
	border-color: var(--accent);
	border-style: solid;
}

/* 入力欄そのものは隠さない。隠すとキーボードから辿れなくなる */
form.upload .dropzone input[type="file"] {
	border: 0;
	padding: 0;
	font-size: 12px;
}

.dropzone-lead {
	font-size: 14px;
}

.dropzone-or {
	color: var(--muted);
	padding: 0 4px;
}

.dropzone-file {
	font-size: 13px;
	color: var(--muted);
}

/* 読み取った表紙の下読み */
.preview {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
}

/* display を書くと hidden 属性が効かなくなる。EPUB を選ぶまでは出さない */
.preview[hidden] {
	display: none;
}

.preview img {
	width: 90px;
	height: auto;
	border: 1px solid var(--line);
}

.preview .message {
	margin: 0;
}

footer.site {
	border-top: 1px solid var(--line);
	font-size: 13px;
	font-family: system-ui, sans-serif;
	color: var(--muted);
	padding: 20px;
	text-align: center;
}

@media (max-width: 640px) {
	.detail {
		grid-template-columns: 1fr;
	}

	.detail .cover {
		max-width: 220px;
	}
}

/* 特定商取引法に基づく表記の表 */
table.sct {
	border-collapse: collapse;
	max-width: 720px;
	font-family: system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.8;
}

table.sct th,
table.sct td {
	border: 1px solid var(--line);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

table.sct th {
	background: var(--card);
	white-space: nowrap;
	font-weight: 700;
	width: 1%;
}

/* 購入証明。印刷して残せるようにする */
.receipt {
	background: var(--card);
	border: 1px solid var(--line);
	padding: 32px;
	max-width: 720px;
}

.receipt h2 {
	margin: 0;
	font-size: 22px;
	letter-spacing: 0.2em;
}

.receipt-no {
	font-family: system-ui, sans-serif;
	font-size: 13px;
	color: var(--muted);
	margin: 4px 0 20px;
}

.receipt-amount {
	font-family: system-ui, sans-serif;
	font-size: 30px;
	margin: 0 0 20px;
	border-bottom: 2px solid var(--fg);
	display: inline-block;
	padding: 0 12px 4px 0;
}

/* 発行者の欄は改行をそのまま出す */
.receipt table.sct td {
	white-space: pre-line;
}

.receipt .no-print {
	margin-top: 24px;
	display: flex;
	gap: 12px;
}

@media print {
	.no-print { display: none !important; }
	body { background: #fff; }
	.receipt { border: 0; padding: 0; }
}

/* ---------------------------------------------------------------- 本の立体

   展開したカバー1枚を、表1・背・表4 の三つの面へ当てて箱に組む
   (jacket.js)。部品は読み込まず、CSS の3D変換だけで作る。

   面の大きさは --w(表紙の幅・px) から出す。translateZ に百分率は使えない
   ので、入れ物の幅を測って px で入れてある。 */

.cover.cover-3d {
	border: 0;
	background: none;
	aspect-ratio: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.book3d {
	--w: 200px;
	--ratio-h: 1.632;
	--ratio-d: 0.158;
	width: 100%;
	height: calc(var(--w) * var(--ratio-h));
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1600px;
	cursor: grab;
	touch-action: pan-y;
	position: relative;
}

.book3d.is-turning {
	cursor: grabbing;
}

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

.book3d-box {
	position: relative;
	width: var(--w);
	height: calc(var(--w) * var(--ratio-h));
	transform-style: preserve-3d;
	/* 掴んで回している間は追従、離したときだけ滑らかに */
	transition: transform 120ms ease-out;
	/*
	 * 影は filter で付けない。filter を掛けた要素は preserve-3d を失って
	 * 平らに潰れ、六つの面が重なった板になる(実測)。面ごとの box-shadow と、
	 * 下に敷く影(.book3d::after)で立体のまま影を出す。
	 */
}

.book3d.is-turning .book3d-box {
	transition: none;
}

.book3d-face {
	position: absolute;
	background-repeat: no-repeat;
	/* 裏返った面は見せない。preserve-3d の箱では裏面が手前に来ることがある */
	backface-visibility: hidden;
}

.book3d-front,
.book3d-back {
	width: var(--w);
	height: calc(var(--w) * var(--ratio-h));
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

/* 机に落ちる影。箱の外に置くので、立体の組み立てには関わらない */
.book3d::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4%;
	width: calc(var(--w) * 0.92);
	height: 10px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center,
		rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0) 72%);
	pointer-events: none;
}

.book3d-front {
	transform: translateZ(calc(var(--w) * var(--ratio-d) / 2));
}

.book3d-back {
	transform: translateZ(calc(var(--w) * var(--ratio-d) / -2)) rotateY(180deg);
}

/* 背は表1の右。右綴じなので綴じ側が右になる */
.book3d-spine,
.book3d-edge {
	width: calc(var(--w) * var(--ratio-d));
	height: calc(var(--w) * var(--ratio-h));
	left: calc((var(--w) - var(--w) * var(--ratio-d)) / 2);
}

.book3d-spine {
	transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
}

/* 小口。刷られていないので紙の色。本文の束が見えるよう細い縞を敷く */
.book3d-edge {
	transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
	background-color: #efeade;
	background-image: repeating-linear-gradient(to right,
		rgba(0, 0, 0, 0.10) 0 0.5px, rgba(0, 0, 0, 0) 0.5px 2px);
}

.book3d-top,
.book3d-bottom {
	width: var(--w);
	height: calc(var(--w) * var(--ratio-d));
	top: calc((var(--w) * var(--ratio-h) - var(--w) * var(--ratio-d)) / 2);
	background-color: #efeade;
	background-image: repeating-linear-gradient(to right,
		rgba(0, 0, 0, 0.07) 0 0.5px, rgba(0, 0, 0, 0) 0.5px 2px);
}

.book3d-top {
	transform: rotateX(90deg) translateZ(calc(var(--w) * var(--ratio-h) / 2));
}

.book3d-bottom {
	transform: rotateX(-90deg) translateZ(calc(var(--w) * var(--ratio-h) / 2));
}

.cover-hint {
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: 12px;
	color: var(--muted);
}

/* 動きを減らす設定の人には、回さずに正面で見せる */
@media (prefers-reduced-motion: reduce) {
	.book3d-box {
		transition: none;
	}
}

/* ---------------------------------------------------------------- 支払い */

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0;
}

button.small,
.button.small {
	font-size: 13px;
	padding: 6px 14px;
}

.sample-note {
	font-family: system-ui, sans-serif;
	font-size: 13px;
	color: var(--muted);
	margin: 4px 0 0;
	line-height: 1.8;
}

.btc {
	border: 1px solid var(--line);
	background: var(--card);
	padding: 20px;
	margin: 18px 0;
	max-width: 520px;
	font-family: system-ui, sans-serif;
	font-size: 14px;
}

.btc-head {
	display: flex;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
}

.btc-qr {
	width: 148px;
	height: 148px;
	border: 1px solid var(--line);
	background: #ffffff;
	/* QR は SVG。にじませない */
	image-rendering: pixelated;
}

.btc-figures {
	flex: 1;
	min-width: 180px;
}

.btc-amount {
	font-size: 22px;
	margin: 0 0 4px;
	word-break: break-all;
}

.btc-yen,
.btc-sats {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}

.btc-label {
	margin: 18px 0 6px;
	font-size: 13px;
	color: var(--muted);
}

.btc-address-row {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

/* アドレスは一字違えば別の宛先。折り返しても読めるよう等幅で、字間を空ける */
.btc-address {
	flex: 1;
	min-width: 240px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	letter-spacing: 0.04em;
	word-break: break-all;
	background: var(--bg);
	border: 1px solid var(--line);
	padding: 8px 10px;
}

.btc-status {
	margin: 16px 0 0;
	padding: 10px 12px;
	background: var(--panel-soft, #f2f5f1);
	border: 1px solid var(--line);
}

.btc-guide {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.8;
}

/* ---------------------------------------------------------------- 管理画面 */

.field-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.field-row > label {
	flex: 1;
	min-width: 150px;
}

.jacket-fields {
	border: 1px solid var(--line);
	padding: 16px;
	display: grid;
	gap: 12px;
}

.jacket-fields legend {
	font-size: 13px;
	padding: 0 6px;
}

.jacket-fields .message {
	margin: 0;
	border: 0;
	background: none;
	padding: 0;
	color: var(--muted);
}

.jacket-dims > label {
	min-width: 92px;
	font-size: 13px;
}

.dropzone.small {
	padding: 14px 12px;
}

/* 展開カバーの下読み。入れた寸法で切る位置に線を重ねる */
.jacket-stage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	border: 1px solid var(--line);
	background: #ffffff;
}

.jacket-stage img {
	display: block;
	max-width: 100%;
	height: auto;
}

.jacket-guides {
	position: absolute;
	inset: 0;
}

.jacket-guide {
	position: absolute;
	border: 1px solid rgba(192, 57, 43, 0.9);
	box-sizing: border-box;
}

.jacket-guide span {
	position: absolute;
	top: 0;
	left: 0;
	font-family: system-ui, sans-serif;
	font-size: 10px;
	line-height: 1.4;
	padding: 1px 4px;
	background: rgba(192, 57, 43, 0.9);
	color: #ffffff;
	white-space: nowrap;
}

.jacket-editor {
	display: grid;
	gap: 10px;
	padding: 12px 0;
}

.jacket-row > td {
	background: var(--bg);
}

/* 書名の列に余りを全部渡し、ほかの列は中身の幅で止める。
   こうしないと、細い列が均等に広がって表が横に伸びる */
table.admin td.book-title {
	width: 100%;
	min-width: 220px;
}

table.admin td.book-title .author {
	color: var(--muted);
	font-size: 13px;
}

/* 書名の下へ畳んだ値段と試し読み */
table.admin td.book-title .facts {
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
}

/* 公開か否か。字だけだと本文に紛れるので、小さな札にする */
table.admin td.state {
	white-space: nowrap;
}

table.admin td.state .badge {
	display: inline-block;
	padding: 1px 8px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.7;
}

table.admin td.state .badge.on {
	border-color: #b9cbb4;
	background: #f1f6ef;
	color: #3f5c37;
}

table.admin td.state .badge.off {
	color: var(--muted);
}

table.admin td.book-title .desc {
	color: var(--muted);
	font-size: 12px;
	margin-top: 4px;
	max-height: 4.5em;
	overflow: hidden;
}

table.admin code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	word-break: break-all;
}

.preview-meta {
	margin: 0 0 8px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 12px;
	font-size: 13px;
}

.preview-meta dt {
	color: var(--muted);
}

.preview-meta dd {
	margin: 0;
}

/* お支払い待ちの申し込み */
.pending-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
	font-family: system-ui, sans-serif;
	font-size: 14px;
}

.pending-list li {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	background: var(--card);
	border: 1px solid var(--line);
	padding: 12px 16px;
}

.pending-title {
	font-weight: 700;
}

.pending-amount {
	color: var(--muted);
}

.pending-note {
	flex-basis: 100%;
	color: var(--muted);
	font-size: 13px;
}

/* ---- 管理画面の一覧と、押したときだけ開く欄 ----
   一覧は見るためだけにし、直す欄は「新しい本を登録」「編集」を押して開く。
   欄が常に開いていると、どこを触ると何が変わるのかが分かりにくい。 */

.admin-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.panel {
	background: var(--card);
	border: 1px solid var(--line);
	padding: 16px 20px 4px;
	margin-bottom: 24px;
}

.panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: system-ui, sans-serif;
}

.panel-head h3 {
	margin: 0;
	font-size: 17px;
}

.panel form.upload {
	border: 0;
	padding: 12px 0 16px;
	margin: 0;
	max-width: none;
}

table.admin td.num {
	white-space: nowrap;
	text-align: right;
}

table.admin td.actions {
	/*
	 * **表のセルへ戻す。** 詳細画面の釦の並び用に `.actions { display: flex }`
	 * があり、同じ名前のこのセルまで flex の入れ物になっていた。子が
	 * ブロックへ倒れて釦が縦に積まれ、行の高さが倍になっていた。
	 */
	display: table-cell;
	margin: 0;
	white-space: nowrap;
	vertical-align: middle;
	/* 中身の幅で止める。書名の列に余りを渡すため */
	width: 1%;
}

table.admin td.actions button,
table.admin td.actions .button {
	/* 横並びを明示する。継承だけに任せると縦に積まれ、行が倍の高さになる */
	display: inline-block;
	font-size: 13px;
	/*
	 * **行の高さを明示して、釦とリンクの背を揃える。**
	 * 「編集」は button で行の高さが normal、「見る」は a なので本文から
	 * 1.9 を継ぐ。同じ padding でも 28.8px と 34.3px になり、背が揃わず
	 * 下端もずれていた。vertical-align も baseline から middle へ。
	 */
	line-height: 20px;
	vertical-align: middle;
	padding: 4px 12px;
}

table.admin td.actions > * + * {
	margin-left: 6px;
}

table.admin tr.editing > td {
	background: #f4efe6;
}

table.admin tr.edit-row > td {
	background: var(--bg);
	padding: 16px;
}

.edit-panel {
	/* 編集欄の入力部品の幅で一覧表を押し広げない。 */
	contain: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	justify-items: start;
}

.edit-section {
	display: grid;
	gap: 10px;
	justify-items: start;
	width: 100%;
	max-width: 620px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.edit-section h4 {
	margin: 0;
	font-size: 14px;
}

.edit-section .message {
	margin: 0;
}

.edit-section .field-row > label {
	display: grid;
	gap: 4px;
}

.edit-section .field-row input[type="number"],
.edit-section .field-row select {
	min-width: 0;
	width: 100%;
	font: inherit;
	padding: 4px 6px;
	border: 1px solid var(--line);
}

.edit-section label.check {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 0;
}

.edit-section form {
	display: grid;
	gap: 10px;
	width: 100%;
}

.edit-section .field-row,
.edit-section .message {
	width: 100%;
	box-sizing: border-box;
}

.btc-details {
	margin-top: 32px;
	font-family: system-ui, sans-serif;
	font-size: 14px;
}

.btc-details summary {
	cursor: pointer;
	color: var(--muted);
}

/* 一覧から直に「読む」「試し読み」 */
.book-card .body button.small {
	align-self: flex-start;
	font-size: 13px;
	padding: 5px 14px;
	margin-top: 8px;
}

.book-card .card-message .message {
	margin: 8px 0 0;
	font-size: 13px;
}

/* 「購入する」のあとに出す支払い方法の選択 */
.pay-methods {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 16px 0;
}

.pay-methods-lead {
	flex-basis: 100%;
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: 14px;
}

/* JINKEN.TV の一部であることをヘッダとフッタで示す */
header.site h1 a.brand {
	font-family: system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: 0.04em;
	font-size: 0.72em;
	color: var(--accent);
}

footer.site .operator {
	margin: 0 0 6px;
}

/* カード入力欄(PAY.JP の部品)。枠が無いと入力する所だと分からない */
#payment-element {
	max-width: 440px;
	margin: 8px 0 12px;
	padding: 12px 14px;
	border: 1px solid var(--line);
	background: var(--card);
}

/* 本人認証（3Dセキュア）に要る欄。カードの欄は番号しか預からないので、
   名義と連絡先はこちらで受け取る。 */
.pay-who {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}
.pay-who input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--line-strong, #c8ccd0);
	border-radius: var(--r-sm, 4px);
	font: inherit;
	font-size: 15px;
}

/* 読み器の紹介と、困ったときの連絡先。売り場の入口の、本の一覧の下。 */
.reader-note {
	margin: 40px 0 8px;
	padding: 24px;
	border: 1px solid var(--line, #dde1e4);
	border-radius: var(--r-md, 8px);
	background-color: var(--surface-muted, #F4F7F5);
}
.reader-note h2 {
	margin: 0 0 12px;
	font-size: 18px;
}
.reader-note p { margin: 0 0 12px; }
.reader-note ul {
	margin: 0 0 16px;
	padding-inline-start: 1.3em;
}
.reader-note li { margin-bottom: 4px; }
/* 連絡先は囲って目立たせる。ここだけは読み飛ばされたくない */
.reader-help {
	margin: 0;
	padding: 16px;
	border-radius: var(--r-sm, 4px);
	background-color: #FFFFFF;
	border: 1px solid var(--line, #dde1e4);
}
.reader-help .button { margin: 8px 8px 0 0; }
.reader-help-hint {
	display: inline-block;
	font-size: 13px;
	color: var(--ink-faint, #6b7280);
}

/* 足元の並び。特商法表記とお問い合わせを横に並べる */
.foot-links a { margin-inline-end: 1.2em; }

/* 携帯では**棚のように二列**に並べる。
   `minmax(200px, 1fr)` だと携帯の幅では一列にしか割れず、一冊ずつ縦に
   積まれて探しにくかった(利用者「スマホだと本を探しにくい」)。
   冊数が見渡せることを、一冊あたりの情報量より採る。 */
@media (max-width: 640px) {
	table.admin td.book-title {
		min-width: 0;
	}

	.books {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
	.book-card .body {
		padding: 10px 10px 12px;
		gap: 2px;
	}
	.book-card h2 {
		font-size: 14px;
		line-height: 1.4;
		/* 書名は二行まで。三行目からは棚が揃わなくなる */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
	/* 紹介文は落とす。二列の幅では読める分量が入らず、棚の高さだけが伸びる。
	   読みたい人は表紙を押せば詳細に出る */
	.book-card .summary { display: none; }
	.book-card .author,
	.book-card .price { font-size: 12px; }
	.book-card .author {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		overflow: hidden;
	}
	.card-message button { width: 100%; }
}