@charset "utf-8";

/*
 * PDF変換ブラウザの外観。
 * アドレスバー・進み具合のゲージ・表示窓・下の操作、という並び。
 * ブラウザの窓に見えるように、全体を一枚の枠でくくる。
 */

.cv {
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	overflow: hidden;
	background-color: #FFFFFF;
	margin: 1em 0;
}

/* ---- 入力の種類の切替。ブラウザのタブに見立てる ---- */

.cv-modes {
	display: flex;
	gap: 1px;
	background-color: var(--surface-sunken);
	padding: 4pt 4pt 0 4pt;
	border-bottom: 1px solid var(--line-strong);
}
div.content .cv-modes a.cv-mode:link,
div.content .cv-modes a.cv-mode:visited,
div.content .cv-modes a.cv-mode:active {
	padding: 5pt 11pt;
	border-radius: var(--r-md) var(--r-md) 0 0;
	background-color: var(--surface-sunken);
	color: var(--ink-muted);
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}
div.content .cv-modes a.cv-mode:hover { background-color: var(--accent-soft); color: #000; }
div.content .cv-modes a.cv-mode[aria-selected="true"]:link,
div.content .cv-modes a.cv-mode[aria-selected="true"]:visited,
div.content .cv-modes a.cv-mode[aria-selected="true"]:active {
	background-color: #FFFFFF;
	color: var(--ink);
}

/* ---- アドレスバー ---- */

.cv-bar-row {
	display: flex;
	align-items: center;
	gap: 6pt;
	padding: 7pt 8pt;
	background-color: var(--surface-muted);
	border-bottom: 1px solid var(--line);
}
.cv-input { flex: 1 1 auto; min-width: 0; }
.cv-input[hidden] { display: none; }
.cv-input input[type="url"],
.cv-input input[type="text"] {
	inline-size: 100%;
	width: 100%;
	box-sizing: border-box;
	padding: 5pt 8pt;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	font-size: 15px;
	font-family: inherit;
}
.cv-input input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.cv-input input[type="file"] { display: none; }

#cv-drop {
	display: flex;
	align-items: center;
	gap: 8pt;
	padding: 4pt 8pt;
	border: 1px dashed var(--line-strong);
	border-radius: var(--r-full);
	background-color: #FFFFFF;
	font-size: 13px;
	color: var(--ink-muted);
}
/* 対応する形式は長いので、狭い画面では省いて折り返さない */
#cv-file-hint {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
#cv-file-name { font-weight: 700; color: var(--ink); }

#cv-go {
	flex: 0 0 auto;
	padding: 6pt 16pt;
	border: none;
	border-radius: var(--r-full);
	background-color: var(--accent);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	cursor: pointer;
}
#cv-go:disabled { background-color: var(--line-strong); cursor: default; }

/* ---- 進み具合 ---- */

#cv-progress {
	padding: 5pt 10pt 7pt;
	border-bottom: 1px solid var(--line);
	background-color: var(--surface-muted);
}
#cv-progress[hidden] { display: none; }
.cv-track {
	height: 5pt;
	border-radius: var(--r-full);
	background-color: var(--surface-sunken);
	overflow: hidden;
}
#cv-bar {
	height: 100%;
	width: 0;
	background-color: var(--accent);
	/* 数字が動いたときに跳ねないよう、少しだけ滑らせる */
	transition: width .25s linear;
}
/* 棒の下は Copper の注意があるときだけ。無ければ場所も取らない */
#cv-status {
	display: block;
	margin-top: 3pt;
	font-size: 12px;
	color: var(--ink-muted);
}
#cv-status:empty { display: none; }

#cv-error {
	margin: 0;
	padding: 8pt 10pt;
	background-color: var(--danger-soft);
	border-bottom: 1px solid var(--line);
	border-left: 4pt solid var(--danger);
	font-size: 13px;
	color: var(--danger);
}
#cv-error[hidden] { display: none; }

/* ---- 表示窓 ---- */

.cv-view {
	position: relative;
	background-color: #2A322D;
}
#cv-frame {
	display: block;
	width: 100%;
	/* 画面の高さに合わせて伸ばす。PDFを読むための窓なので広いほどよい */
	height: min(76vh, 1100px);
	min-height: 380px;
	border: none;
	background-color: #2A322D;
}
#cv-frame[hidden] { display: none; }
#cv-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: min(76vh, 1100px);
	min-height: 380px;
	color: var(--ink-faint);
	font-size: 15px;
	text-align: center;
	padding: 0 2em;
	line-height: 1.8;
}
#cv-placeholder[hidden] { display: none; }

/* ---- 下の操作 ---- */

#cv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8pt;
	align-items: center;
	padding: 8pt 10pt;
	background-color: var(--surface-muted);
	border-top: 1px solid var(--line);
}
/* 携帯のブラウザ向け。iframeの代わりにこれを出す。 */
#cv-open {
	/* iframe が入るはずだった場所をそのまま使う。釦が上に浮かないよう
	   同じ高さを取って真ん中へ寄せる。 */
	min-height: min(76vh, 1100px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s4);
	padding: var(--s6) var(--s5);
	text-align: center;
}
#cv-open[hidden] { display: none; }
#cv-open-lead { margin: 0; color: #C2CEC6; font-size: 14px; line-height: 1.8; }
div.content #cv-open a:link,
div.content #cv-open a:visited,
div.content #cv-open a:active {
	display: inline-block;
	min-width: 200px;
	padding: 10pt 20pt;
	border-radius: var(--r-full);
	background-color: var(--accent);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
}
div.content #cv-open a#cv-open-docs:link,
div.content #cv-open a#cv-open-docs:visited,
div.content #cv-open a#cv-open-docs:active {
	background-color: transparent;
	border: 1px solid var(--line-strong);
	color: #C2CEC6;
	font-weight: normal;
}

#cv-actions[hidden] { display: none; }
/* 変換にかかった時間と頁数。表示の釦がある行の右端に小さく。
   押せるものではないので色を落とす。空なら場所も取らない */
#cv-stat {
	flex: 0 0 auto;
	display: inline-block;
	color: var(--ink-faint);
	font-size: 11px;
	line-height: 1.3;
	text-align: end;
	white-space: pre-line;	/* 改行で 2 行に畳む(1頁目まで／全体) */
}
#cv-stat:empty { display: none; }
div.content #cv-actions a:link,
div.content #cv-actions a:visited,
div.content #cv-actions a:active {
	padding: 5pt 12pt;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background-color: #FFFFFF;
	color: var(--ink);
	font-size: 13px;
	text-decoration: none;
}
div.content #cv-actions a:hover { background-color: var(--accent-soft); }
/* 全画面のときは黒地に置く。紙の白が浮いて見えるように */
#cv-frame:fullscreen, .cv-view:fullscreen { background-color: #111111; }
div.content #cv-actions a#cv-download:link,
div.content #cv-actions a#cv-download:visited,
div.content #cv-actions a#cv-download:active {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #FFFFFF;
	font-weight: bold;
}

/* ---- 指定の欄 ---------------------------------------------------
   名札を上、操作を下に置いて縦に組む。横一列に「名札 操作 名札 操作」と
   並べると、どの名札がどの操作のものか目で追う必要がある。
   幅に応じて折り返す格子にして、増えても崩れないようにする。 */

/* 開くまでは畳んでおく。ほとんどの変換はアドレスを入れて押すだけで
   済むので、常に見えている必要は無い。畳んだぶんは表示窓が使う。 */
#cv-settings {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--s2) var(--s4);
	padding: var(--s2) var(--s4);
	background-color: var(--surface-muted);
	border-bottom: 1px solid var(--line);
}
#cv-settings[hidden] { display: none; }

/* 名札は上、操作は下。横一列に「名札 操作 名札 操作」と並べると、
   どの名札がどの操作のものか目で追う必要がある。
   幅で折り返すので、増えても崩れない。 */
.cv-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--s2) var(--s4);
	min-width: 0;
}
.cv-fields[hidden] { display: none; }
/* 組版の指定と PDF の指定は、出力の指定と地続きに見えないよう、細い罫で分ける */
#cv-book-options, #cv-pdf-options {
	padding-inline-start: var(--s4);
	border-inline-start: 1px solid var(--line-strong);
}
/* 群の名札(「PDF」)。欄の名札と同じ姿で、欄の並びの頭に */
.cv-group-label {
	align-self: flex-end;
	padding-block-end: 7px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ink-muted);
}

.cv-field {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 0 1 auto;
	min-width: 0;
	max-inline-size: 200px;
}
/* display を書いた要素には hidden 属性が効かない。
   PDFを出せない本(nopdf=1)では、選べる形が1つしか無いので欄ごと消す */
.cv-field[hidden] { display: none; }
.cv-field-wide { flex-basis: 100%; max-inline-size: none; }
.cv-field-label {
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--ink-faint);
}

/* 択一。ブラウザ既定の見た目を外し、右端に山形を置く */
.cv-select { position: relative; display: block; }
.cv-select::after {
	content: "";
	position: absolute;
	inset-inline-end: 9px;
	inset-block-start: 50%;
	inline-size: 7px;
	block-size: 7px;
	margin-block-start: -5px;
	border-inline-end: 1.5px solid var(--ink-faint);
	border-block-end: 1.5px solid var(--ink-faint);
	transform: rotate(45deg);
	pointer-events: none;
}
.cv-select select {
	appearance: none;
	-webkit-appearance: none;
	inline-size: 100%;
	block-size: 28px;
	padding: 0 26px 0 9px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background-color: var(--surface);
	color: var(--ink);
	font-size: 12px;
	line-height: 26px;
	cursor: pointer;
	text-overflow: ellipsis;
}
.cv-select select:hover { border-color: var(--ink-faint); }

/* 入切。四角い既定の箱ではなく、押せる札にする */
.cv-toggles { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cv-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	block-size: 28px;
	padding: 0 var(--s3) 0 var(--s2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background-color: var(--surface);
	color: var(--ink-muted);
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}
.cv-toggle input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}
.cv-toggle-box {
	position: relative;
	flex: 0 0 auto;
	inline-size: 15px;
	block-size: 15px;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--r-sm);
	background-color: var(--surface);
}
.cv-toggle-box::after {
	content: "";
	position: absolute;
	inset-block-start: 1px;
	inset-inline-start: 4px;
	inline-size: 4px;
	block-size: 8px;
	border-inline-end: 2px solid var(--accent-ink);
	border-block-end: 2px solid var(--accent-ink);
	transform: rotate(45deg);
	opacity: 0;
}
.cv-toggle:hover { border-color: var(--ink-faint); }
.cv-toggle input:checked ~ .cv-toggle-box {
	background-color: var(--accent);
	border-color: var(--accent);
}
.cv-toggle input:checked ~ .cv-toggle-box::after { opacity: 1; }
.cv-toggle input:checked ~ .cv-toggle-text { color: var(--ink); font-weight: 700; }
.cv-toggle input:focus-visible ~ .cv-toggle-box {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* ---- 狭い画面 ----

   携帯では**アドレス欄と変換の釦だけ**を出し、指定は畳んでおく
   (開いたままだと画面をまるごと埋めて、結果が押し出される)。
   出すものは指で押せて字が読める大きさにする。目安は高さ40px以上、
   入力欄は16px——iOSは16px未満の欄に触れると画面を勝手に拡大する。 */

@media (max-width: 640px) {
	.cv-bar-row { flex-wrap: wrap; gap: 7pt; }
	.cv-input input[type="url"],
	.cv-input input[type="text"] { font-size: 16px; padding: 8pt 12pt; }
	/* アドレス欄は一行を使い、その下に 変換・中断、詳細、文字の大きさ */
	.cv-input { flex: 1 1 100%; }
	.cv-go-row { flex: 1 1 auto; }
	#cv-go { flex: 1 1 auto; font-size: 17px; padding: 9pt 16pt; }
	#cv-abort { font-size: 14px; padding: 7pt 12pt; }

	#cv-frame, #cv-placeholder { height: 60vh; min-height: 300px; }

	/* 入力の切替。3つとも見えていないと切り替えようがない */
	.cv-modes { flex-wrap: wrap; gap: 2px; padding: 4pt 5pt 0; }
	div.content .cv-modes a.cv-mode:link,
	div.content .cv-modes a.cv-mode:visited,
	div.content .cv-modes a.cv-mode:active { padding: 7pt 9pt; font-size: 13px; }
	#cv-help-btn { inline-size: 34px; block-size: 34px; font-size: 17px; }

	#cv-more { font-size: 14px; padding: 7pt 12pt; }
	#cv-drop { padding: 7pt 10pt; font-size: 14px; }
	#cv-file-pick { font-size: 14px; padding: 6pt 12pt; }

	/* 開いたときは、一列に1〜2欄。小さく並べても押せない。
	   **箱の中で送れるようにする**——道具の頁は全体の高さが決まっていて、
	   はみ出した分は切り落とされる。そのままだと下の欄に手が届かない。 */
	#cv-settings {
		gap: var(--s3) var(--s4);
		padding: var(--s3) var(--s4);
		max-block-size: 46vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.cv-field { flex: 1 1 45%; max-inline-size: none; }
	.cv-field-label { font-size: 12px; }
	.cv-select select { block-size: 40px; line-height: 38px; font-size: 15px; }
	.cv-toggle { padding: 6pt 10pt; }

	#cv-actions { gap: 7pt; padding: 8pt; }
	div.content #cv-actions a:link,
	div.content #cv-actions a:visited,
	#cv-actions button { font-size: 15px; padding: 8pt 14pt; }
	#cv-stat { font-size: 12px; }
}

/* 帯にタブ3つと使い方の釦が収まらない幅では、銘は落とす。
   同じものが頁の上にも足にもある。 */
@media (max-width: 430px) {
	div.content .cv-modes a.cv-brand:link,
	div.content .cv-modes a.cv-brand:visited,
	div.content .cv-modes a.cv-brand:active { display: none; }
	/* 指定は一行に一つ。二列に詰めると「新書判…」「源暎…」と
	   途中で切れて、何を選んでいるのか読めない。 */
	.cv-field { flex-basis: 100%; }
}

/* 詳細の釦の肩。畳んでいても、指定が入っていることが分かる */
.cv-more-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 16px;
	block-size: 16px;
	margin-inline-start: 5px;
	padding: 0 4px;
	border-radius: var(--r-full);
	background-color: var(--accent);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.cv-more-n[hidden] { display: none; }


/* ---- 使い方。入力の切替の右端に釦を置き、覆いかぶせて開く ---- */

.cv-modes { position: relative; }
#cv-help-btn {
	flex: 0 0 auto;
	margin-inline-start: auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	margin-bottom: 4px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--r-full);
	background-color: transparent;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
#cv-help-btn:hover { background-color: var(--surface); border-color: var(--line-strong); }
#cv-help-btn[aria-expanded="true"] {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #FFFFFF;
}

#cv-help {
	position: absolute;
	z-index: 10;
	inset-block-start: 100%;
	inset-inline-end: 6pt;
	inline-size: min(30em, calc(100% - 12pt));
	max-block-size: 460px;
	overflow-y: auto;
	padding: 10pt 14pt 12pt;
	background-color: #FFFFFF;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-lg);
	box-shadow: 0 4pt 14pt rgba(0, 0, 0, .18);
	font-size: 13px;
	line-height: 1.7;
	text-align: start;
}
#cv-help[hidden] { display: none; }
#cv-help h3 {
	margin: .8em 0 .3em;
	padding: 0;
	border: none;
	font: bold 10pt/1.4 sans-serif;
	color: var(--ink);
}
#cv-help h3:first-of-type { margin-top: 0; }
#cv-help p { margin: .3em 0; }
#cv-help dl { margin: .3em 0; }
#cv-help dt { font-weight: bold; margin-top: .5em; color: var(--ink); }
#cv-help dd { margin: 0 0 0 1em; color: var(--ink-muted); }
#cv-help .cv-help-foot { margin-top: .8em; color: var(--ink-faint); }
#cv-help-close {
	float: inline-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-full);
	inline-size: 18pt;
	block-size: 18pt;
	margin-inline-start: 8pt;
	border: none;
	background: none;
	color: var(--ink-faint);
	font: 12pt/1 sans-serif;
	cursor: pointer;
}
#cv-help-close:hover { color: var(--ink); }

@media (max-width: 640px) {
	#cv-help { inline-size: calc(100% - 12pt); max-block-size: 320px; }
}

/* ---- 中断・メッセージ・ドロップ ---- */

#cv-more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background-color: var(--surface);
	color: var(--ink-muted);
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}
#cv-more:hover { border-color: var(--ink-faint); color: var(--ink); }
/* 変換と中断は一組。狭い画面でも横に並ぶ */
.cv-go-row { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6pt; }
#cv-more[aria-expanded="true"] {
	background-color: var(--accent-soft);
	border-color: var(--accent);
	color: var(--ink);
}
.cv-caret {
	inline-size: 6px;
	block-size: 6px;
	margin-block-start: -3px;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
}
#cv-more[aria-expanded="true"] .cv-caret {
	margin-block-start: 2px;
	transform: rotate(225deg);
}

#cv-abort {
	flex: 0 0 auto;
	padding: var(--s2) var(--s4);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-full);
	background-color: var(--surface);
	color: var(--ink-muted);
	font-size: 13px;
	cursor: pointer;
}
#cv-abort:disabled { opacity: .45; cursor: default; border-color: var(--line-strong); color: var(--ink-faint); }
#cv-abort:hover { border-color: var(--danger); color: var(--danger); }

.cv-view { overflow: hidden; }
#cv-frame, #cv-placeholder { height: 100%; }

#cv-drop-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(31, 168, 74, .90);
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	pointer-events: none;
}
#cv-drop-overlay[hidden] { display: none; }

/* 広告は表示窓の中央へ重ねる。流れの中に置くと、その高さのぶんだけ
   結果の見える量が減る。変換を始めたら引っ込める。 */
#cv-placeholder {
	flex-direction: column;
	gap: var(--s5);
	padding: var(--s4);
}
#cv-placeholder p { margin: 0; }
#cv-ad {
	max-inline-size: 100%;
	overflow: hidden;
}
#cv-ad[hidden] { display: none; }

/* ---- 画面に収める ----
   .cv が残りの高さを全部取り、その中で表示窓が残りを全部取る。 */

body.tool .cv {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
}
body.tool .cv-view {
	flex: 1;
	min-height: 0;
	height: auto;
}
body.tool #cv-frame,
body.tool #cv-placeholder { height: 100%; }
/* 道具の頁では表示窓の高さを親が決める。読み器も同じに合わせる。
   合わせないと頁の下が切れる。 */
body.tool .rd { height: 100%; min-height: 0; }

/* ワードマーク。道具の並びの左端に置いて溶かす */
div.content .cv-modes a.cv-brand:link,
div.content .cv-modes a.cv-brand:visited,
div.content .cv-modes a.cv-brand:active {
	align-self: center;
	margin: 0 var(--s4) 4pt var(--s2);
	padding: 0;
	border: none;
	background: none;
	color: var(--ink);
	font-size: 20px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: -.03em;
	line-height: 1;
	text-decoration: none;
}
div.content .cv-modes a.cv-brand:hover { color: var(--accent); }

/* ---- 画面の中で読む(PagedSVG) ---- */

/* iframeが入るはずだった場所に、そのまま収まる大きさにする。
   地は読書の研究に沿ってやや暖色へ寄せた暗色。 */
.rd {
	position: relative;
	display: flex;
	flex-direction: column;
	height: min(76vh, 1100px);
	min-height: 380px;
	background-color: #2A2622;
	outline: none;
	overflow: hidden;
}
.rd:fullscreen { height: 100%; min-height: 0; }
.rd-strip {
	/* offsetLeft の基準になるので position を持たせる */
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	/* 吸着は「近ければ」にする。必ず吸着(mandatory)だと、組み上がる途中で
	   頁が足されるたびにブラウザが吸着し直し、スクロールの最中に最寄りの
	   頁へ引き戻された(利用者の「変換中にスクロールすると頁が飛ぶ」) */
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.rd-strip::-webkit-scrollbar { display: none; }
/* 右綴じは右から左へ並べる。direction で並べれば、置いた直後の位置が
   最初の頁(右端)になり、スクリプトが動かす前に最後の頁を見せない。 */
.rd-rtl .rd-strip { direction: rtl; }
/* 全画面の印。窓の右上。全画面(広げた状態)では同じ場所が「戻る」になる。
   読み器そのものは消さない——消すと画面の中の表示まで消え、次に全画面に
   できなかった */
.rd-fs {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(20, 18, 16, .74);
	color: #F2EDE6;
	cursor: pointer;
	transition: opacity .25s ease;
}
.rd-fs:hover { background-color: rgba(60, 56, 50, .9); }
.rd-fs svg { display: block; width: 18px; height: 18px; margin: auto; }
.rd-quiet .rd-fs { opacity: 0; pointer-events: none; }
/* リンクを踏んで移った先から、元の文書へ戻る釦。全画面の印と対になる位置 */
.rd-back {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 12px;
	height: 36px;
	padding: 0 14px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(20, 18, 16, .74);
	color: #F2EDE6;
	font-size: 13px;
	cursor: pointer;
	transition: opacity .25s ease;
}
.rd-back:hover { background-color: rgba(60, 56, 50, .9); }
.rd-quiet .rd-back { opacity: 0; pointer-events: none; }
/* マウスで引きずってめくる。引きずっている間は吸着と文字の選択を切る */
@media (hover: hover) { .rd-strip { cursor: grab; } }
.rd-drag .rd-strip { scroll-snap-type: none; cursor: grabbing; }
/* 組み上がるのを待っている間(頁が足されていく間)は吸着しない */
.rd-pending .rd-strip { scroll-snap-type: none; }
.rd-drag .rd-text, .rd-drag .rd-page { user-select: none; -webkit-user-select: none; }
/* 横組みは頁を縦に積んで縦スクロール。縦組み(右綴じ)だけが横に並ぶ。 */
.rd-vert .rd-strip {
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-x: auto;
	overscroll-behavior-y: contain;
	scroll-snap-type: y proximity;
}
.rd-page {
	flex: 0 0 auto;
	scroll-snap-align: center;
	background-color: #FFFFFF;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
	overflow: hidden;
}
.rd-page svg { display: block; width: 100%; height: 100%; }
/* 頁は画像(SVG を blob で渡したもの)。ブラウザが一度描いて持つ */
.rd-page img.rd-img {
	display: block;
	width: 100%;
	height: 100%;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}
.rd-note {
	margin: auto;
	color: var(--ink-faint);
	font-size: 14px;
}

/* 操作部。読んでいる間は消える。 */
.rd-bar {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background-color: rgba(20, 18, 16, .74);
	transition: opacity .25s ease;
}
.rd-quiet .rd-bar { opacity: 0; pointer-events: none; }
.rd-bar button {
	flex: 0 0 auto;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.rd-bar button:hover { background-color: rgba(255, 255, 255, .22); }
.rd-count {
	flex: 0 0 auto;
	min-width: 5.5em;
	color: #D8D0C6;
	font-size: 12px;
	text-align: end;
	font-variant-numeric: tabular-nums;
}
.rd-seek {
	flex: 1 1 auto;
	min-width: 60px;
	accent-color: var(--accent);
}
/* 右綴じでは頁は右から左へ進む。つまみも同じ向きに動かす。 */
.rd-rtl .rd-seek { direction: rtl; }
/* 横組み(頁を縦に積む)では、つまみも縦に。右端に立て、上が最初の頁。
   帯の中の横のつまみだと、上下に動く頁と向きが合わない(利用者の指摘) */
/* 物理の right/top/bottom で置く。論理の inset-* はこの要素自身の
   writing-mode(縦)で解釈されて、横に寝てしまう */
.rd-vert .rd-seek {
	position: absolute;
	right: 6px;
	top: 56px;
	bottom: 62px;
	width: auto;
	height: auto;
	min-width: 0;
	writing-mode: vertical-lr;
	direction: ltr;
}
.rd-vert .rd-bar { justify-content: center; }
.rd-quiet .rd-seek { opacity: 0; pointer-events: none; }
.rd-seek { transition: opacity .25s ease; }
/* 表示の設定。メニューの「表示」から開く板。

   **窓の上端に札を出しっぱなしにするのをやめた**(2026-09-12)。札は窓を
   基準に置かれるので、紙のどこに載るかが頁の収まり方で変わり、本文の上に
   載ることがあった。板は開いている間だけで、そのとき人は読んでいない。
   休んでいるときに占めるのは操作帯の中の釦ひとつぶん。

   開く向きは上。操作帯のすぐ上に出すので、押した指から近い。 */
.rd-panel {
	position: absolute;
	inset-inline-start: 12px;
	bottom: 62px;
	display: grid;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	background-color: rgba(20, 18, 16, .92);
	color: #D8D0C6;
	font-size: 12px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
	transition: opacity .25s ease;
}
.rd-panel[hidden] { display: none; }
.rd-quiet .rd-panel { opacity: 0; pointer-events: none; }
.rd-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.rd-row[hidden] { display: none; }
.rd-row-label { white-space: nowrap; }
.rd-size {
	height: 28px;
	padding: 0 8px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 13px;
	cursor: pointer;
}
.rd-size:hover { background-color: rgba(255, 255, 255, .22); }
.rd-size option { color: #10201A; background-color: #FFFFFF; }

/* 広げた状態。「閉じる」で画面の中の表示へ戻れる。
   **画面の幅で切ってはいけない。** 以前はこの指定が
   `@media (max-width: 640px)` の中だけにあり、PC では広げた印だけ
   付いて見た目が何も変わらなかった。 */
.rd.rd-expanded, body.tool .rd.rd-expanded {
	position: fixed;
	inset: 0;
	height: auto;
	min-height: 0;
	z-index: 90;
}

/* 広げる釦は狭い画面(携帯)だけに出す。
   携帯は窓が道具の並びに挟まれて頁が小さいので、広げる意味がある。
   PC は窓がそのまま大きく、ブラウザの全画面も使わなくなったので、
   この釦の出番がない(利用者「PCでも全画面アイコンが表示されて
   しまっています。これはスマホだけにしよう」)。
   広げたまま窓が広くなったときだけは、戻る手だてとして残す。 */
@media (min-width: 641px) {
	.rd:not(.rd-expanded) .rd-fs { display: none; }
}

/* 狭い画面では読み器を画面いっぱいにする。道具の並びに挟まれた
   窓では、頁が親指の爪ほどにしかならず読めない。 */
@media (max-width: 640px) {
	/* 携帯の頁送りは指で払う。前後の釦は場所を取るだけで、そのぶん
	   **閉じる釦が帯から押し出されて読書から戻れなくなっていた**。
	   残すのは、つまみ・頁数・閉じるの3つ。 */
	.rd-nav { display: none; }
	.rd-bar {
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
	}
	.rd-bar button { min-width: 44px; height: 44px; }
	.rd-count { min-inline-size: 0; font-size: 12px; }
	.rd-seek { min-width: 40px; }
	.rd-vert .rd-seek { min-width: 0; bottom: calc(72px + env(safe-area-inset-bottom)); }
	.rd-menu,
	.rd-tocbox { bottom: calc(76px + env(safe-area-inset-bottom)); }
	.rd-panel { bottom: calc(76px + env(safe-area-inset-bottom)); }
	.rd-fs { inset-block-start: calc(8px + env(safe-area-inset-top)); width: 44px; height: 44px; }
	.rd-vert .rd-seek { top: calc(60px + env(safe-area-inset-top)); }
	.rd-size { height: 36px; }
}

/* 選んで写せる文字の層。頁のJSONの文字を透明で重ねる。
   **SVGの字は選ばせない**——中身は私用領域の符号なので、写しても
   意味を成さないうえ、縦組みでは選択の枠が半文字ずれる。 */
.rd-page { position: relative; }
.rd-page svg {
	user-select: none;
	-webkit-user-select: none;
}
.rd-text {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	/* リンクと図版の層と同じ理由で物理の座標。綴じ方の `rtl` を持ち込むと、
	   横に組んだ塊(柱など)が右から左へ並び、塊の中の位置が合わなくなる */
	direction: ltr;
	transform-origin: 0 0;
	line-height: 1;
	color: transparent;
	font-family: serif;
	/* 下の字が透けるように、選択の色は薄く敷く */
	-webkit-text-fill-color: transparent;
}
/* 塊(行)1 つにつき span 1 つ。**直の子だけを置く。**
   当たりの字は内側の span でくるむので、子孫まで絶対配置にすると
   印が塊の左上へ集まってしまう。 */
.rd-text > span {
	position: absolute;
	white-space: pre;
	transform-origin: 0 0;
	line-height: 1;
}
.rd-text ::selection { background-color: rgba(70, 130, 240, .32); }
.rd-text ::-moz-selection { background-color: rgba(70, 130, 240, .32); }

/* 踏めるリンクの層。頁 JSON の links の字箱に <a> を重ねる。

   **文字の層より上に置く。** 下に置くと選択用の透明な字が押さえてしまい
   踏めない。代わりにリンクの字だけは選んで写せなくなるが、踏めることを
   採る(リンクは版面のごく一部で、PDFの読み器も同じ順に重ねている)。
   重なりは **DOM の順**で決める(buildWords が文字の層の後ろへ押し出す)。
   z-index は使えない——付けると重なりの群が閉じ、下の頁の画像と色を
   混ぜられなくなって、青が字ではなく箱として乗る。
   引きずってめくっている間は素通りさせる(リンクが引きずりを飲まない)。 */
.rd-links {
	position: absolute;
	/* **物理の座標で置く。** 右綴じでは読み器が direction: rtl を敷くので、
	   inset-inline-start は右端になり、層ごと頁の外へずれる(実測) */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	direction: ltr;
	/* **transform は掛けない。** 掛けると重なりの群が閉じて、下の頁の画像と
	   色を混ぜられなくなる(青が字ではなく箱として乗る)。倍率は箱ごとに
	   px で入れる(reader.js の placeLinks) */
}
.rd-drag .rd-link { pointer-events: none; }
.rd-link {
	position: absolute;
	display: block;
	box-sizing: border-box;
	background-color: transparent;
	text-decoration: none;
	cursor: pointer;
}
/* 字を青くする。版面の字は画像なので色は変えられないが、青を敷いて
   lighten で混ぜると、白い地はそのまま(白のほうが明るい)、黒い字だけが
   青くなる。 */
.rd-link::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #1A5FB4;
	mix-blend-mode: lighten;
	pointer-events: none;
}
/* 下線。横組みは字の下、縦組みは字の左(縦組みで下線が引かれる側)。
   混色の外なので、白い地の上でも青い線としてそのまま見える。 */
.rd-link-h { border-bottom: 1px solid #1A5FB4; }
.rd-link-v { border-left: 1px solid #1A5FB4; }
@media (hover: hover) {
	.rd-link:hover { background-color: rgba(26, 95, 180, .16); }
}
.rd-link:focus-visible { outline: 2px solid rgba(26, 95, 180, .8); }

/* ---------------- 本文の検索 ----------------
   頁は画像なのでブラウザの検索が届かない。頁 JSON の文字から探し、
   当たりの塊に薄く色を敷く(reader.js の markHits)。 */
/* メニューの釦(操作帯の右)。目次・検索・表示をここから開く */
.rd-menu-btn {
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	cursor: pointer;
}
.rd-menu-btn:hover { background-color: rgba(255, 255, 255, .22); }
.rd-menu-btn svg { display: block; width: 18px; height: 18px; margin: auto; }
.rd-menu-btn[aria-expanded="true"] { background-color: rgba(255, 255, 255, .3); }

/* メニュー。操作帯の右端の上に開く。項目を選ぶと畳まれて、その板が開く */
.rd-menu {
	position: absolute;
	z-index: 4;
	inset-inline-end: 12px;
	bottom: 62px;
	display: grid;
	min-width: 10em;
	padding: 6px;
	border-radius: 14px;
	background-color: rgba(20, 18, 16, .96);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.rd-menu[hidden] { display: none; }
.rd-quiet .rd-menu { opacity: 0; pointer-events: none; }
.rd-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: none;
	border-radius: 9px;
	background: none;
	color: #F2EDE6;
	font: inherit;
	font-size: 14px;
	text-align: start;
	cursor: pointer;
}
.rd-menu-item[hidden] { display: none; }
.rd-menu-item:hover,
.rd-menu-item:focus-visible { background-color: rgba(255, 255, 255, .12); outline: none; }
.rd-menu-item svg { flex: none; width: 18px; height: 18px; }

/* 目次の板。題は折り返して全部見せ、読んでいる所に印を付ける。
   長い本は板の中で送る(窓の高さの6割まで)。 */
.rd-tocbox {
	position: absolute;
	z-index: 3;
	inset-inline-end: 12px;
	bottom: 62px;
	width: min(24em, calc(100% - 24px));
	max-height: 60%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	border-radius: 14px;
	background-color: rgba(20, 18, 16, .96);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
	transition: opacity .25s ease;
}
.rd-tocbox[hidden] { display: none; }
.rd-quiet .rd-tocbox { opacity: 0; pointer-events: none; }
.rd-toclist { margin: 0; padding: 0; list-style: none; }
.rd-toclink {
	display: flex;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	padding: 7px 10px 7px calc(10px + var(--depth, 0) * 1em);
	border: none;
	border-radius: 8px;
	background: none;
	color: #D8D0C6;
	font: inherit;
	font-size: 13px;
	line-height: 1.5;
	text-align: start;
	cursor: pointer;
}
.rd-toclink:hover,
.rd-toclink:focus-visible { background-color: rgba(255, 255, 255, .1); outline: none; }
.rd-tocname { flex: 1 1 auto; }
.rd-tocpage {
	flex: none;
	color: #A89F94;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}
.rd-here > .rd-toclink { background-color: rgba(255, 255, 255, .14); color: #F2EDE6; }

/* 検索の板。操作帯と同じ場所に開く(利用者の希望で流れの中に置いたまま)。

   **操作帯より上に重ねる。** 操作帯は `position: absolute` で浮いていて、
   板は流れの中の要素なので、何もしないと操作帯が板の上に描かれる。
   板の中の打ち込む欄にも操作帯の地(黒 74%)とつまみが被さり、欄そのものが
   半透明に見えていた——欄に地の色を入れても直らなかったのはこのため
   (利用者「テキストフィールドが半透明になる」)。読むのをやめてしばらく
   すると操作帯が消える(`.rd-quiet`)ので、そのときだけ欄がはっきり見えた
   (利用者「カーソルを外してしばらくすると透明でなくなる」)。

   板を位置付きにして層を上げ、地も不透明にする。検索している間は操作帯を
   隠すことになるが、頁を送る釦は板の中にある。 */
.rd-find {
	position: relative;
	z-index: 3;
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background-color: #141210;
	border-block-start: 1px solid rgba(255, 255, 255, .12);
}
/* **`display` を書いた要素には hidden 属性が効かない。**
   板は `display: flex` なので、`panel.hidden` を立てても消えなかった。
   操作帯が上に被さっていた間は、隠れているのと見分けがつかなかったが、
   板を上の層へ移したとたん、最初から開きっぱなしで×でも閉じない板に
   なった(利用者「最初からテキスト検索が出ていて、×で閉じられません」)。
   他の板(.rd-panel .rd-menu .rd-tocbox .rd-row)には元からこの一行がある。 */
.rd-find[hidden] { display: none; }
/* 打ち込む欄。**背景は不透明にする。**
   半透明(白 8%)にしていたら、下の操作帯のつまみや頁が透けて、
   欄そのものが薄く見えていた(利用者「テキストフィールドが半透明になる」)。
   字を打つ場所は、下が何であってもはっきり見えていなければならない。 */
.rd-find-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: var(--r-sm, 4px);
	background-color: #2B2720;
	color: #F5F1EA;
	font: inherit;
	font-size: 14px;
}
.rd-find-input:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .6);
	background-color: #332E26;
}
.rd-find-input::placeholder { color: rgba(242, 237, 230, .5); }
.rd-find-stat {
	flex: none;
	min-inline-size: 4.5em;
	text-align: center;
	color: rgba(242, 237, 230, .8);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.rd-find-nav,
.rd-find-close {
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.rd-find-nav:hover,
.rd-find-close:hover { background-color: rgba(255, 255, 255, .24); }
.rd-find-nav:disabled { opacity: .4; cursor: default; }

/* 当たりの塊。**字は透明のまま**なので、敷いた色だけが見える。
   下の頁の字と混ざるよう、濃さは控えめにする */
/* 検索で当たった字に敷く印。塊の中の位置は reader.js が頁の座標で入れる。
   絶対配置なので、組みの流れには入らない(字の並びを乱さない)。 */
.rd-text .rd-hit {
	position: absolute;
	background-color: rgba(255, 214, 0, .38);
	border-radius: 2px;
}
/* いま送っている当たり。‹ › で移っている一つだけ色を変える。
   全部同じ色だと、どれを見せられているのか分からない。 */
.rd-text .rd-hit-now {
	background-color: rgba(150, 226, 60, .55);
}

/* ---------------- 図版のポップアップ ----------------
   頁は画像なので、中の図版はそれ以上大きくならない。透明な釦を重ね、
   押したら図版だけを画面いっぱいに出す(reader.js の figs)。 */
.rd-figs {
	position: absolute;
	/* リンクの層と同じ理由で物理の座標。層に transform は掛けない */
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	direction: ltr;
}
/* 図版の釦。図版そのものの上に透明に重ねる。

   **サイト共通の `button` の見た目を断つ。** style.css の裸の `button` は
   角を 999px 丸め、指を載せると地を薄い灰色(`--surface-muted`)にする。
   `.rd-fig` は地を透明にしていたが、丸みは消し忘れていたうえ、
   `button:hover` のほうが `.rd-fig` より細かい規則なので、指を載せた
   ときだけ灰色が戻っていた——図版の上に灰色の角丸矩形が出る、の正体
   (利用者「カーソルを載せると灰色の角丸矩形が出てしまいます」)。
   hover の並びまで含めて断ち切る。 */
.rd-fig,
.rd-fig:hover,
.rd-fig:focus {
	box-sizing: border-box;
	padding: 0;
	border: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
}
.rd-fig {
	position: absolute;
	display: block;
	cursor: zoom-in;
}
/* 指を載せたときの合図。**図版の上に色を被せない。**
   何かを敷けば、その下の図版はその分だけ見えなくなる。
   代わりに縁だけを内側になぞる。図版そのものは何も遮らない。 */
@media (hover: hover) {
	.rd-fig:hover {
		outline: 2px solid rgba(26, 95, 180, .6);
		outline-offset: -2px;
	}
}
.rd-fig:focus-visible { outline: 2px solid rgba(26, 95, 180, .9); }

.rd-fig-view {
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(12, 11, 10, .92);
	cursor: zoom-out;
}
.rd-fig-view img {
	/* 寸法は reader.js が入れる(取得元の 3 倍まで引き伸ばす)。
	   ここは入る大きさを超えないための歯止め */
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background-color: #FFFFFF;
	box-shadow: 0 4px 30px rgba(0, 0, 0, .6);
}
.rd-fig-close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .16);
	color: #F2EDE6;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.rd-fig-close:hover { background-color: rgba(255, 255, 255, .3); }

/* 電子書籍の販売所から開いたとき(store=1)。本を読みに来た人には、
   サイトの上下と読み器の道具(アドレス欄・詳細・案内)は要らない。
   本と、めくる・文字の大きさなどの読書窓の札だけを残す。 */
body.store-reader div.head,
body.store-reader div.foot,
body.store-reader .cv-modes,
body.store-reader .cv-bar-row,
body.store-reader #cv-settings,
body.store-reader #cv-help {
	display: none !important;
}