@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;
}
.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; }
/* 目次。本に目次があるときだけ出る(EPUBの nav、manifest の toc)。
   帯の中で場所を取りすぎないよう幅を絞り、題は省略記号で切る。 */
.rd-toc {
	flex: 0 1 auto;
	max-width: 12em;
	height: 34px;
	padding: 0 8px;
	border: none;
	border-radius: var(--r-full);
	background-color: rgba(255, 255, 255, .12);
	color: #F2EDE6;
	font-size: 12px;
	text-overflow: ellipsis;
	cursor: pointer;
}
.rd-toc:hover { background-color: rgba(255, 255, 255, .22); }
.rd-toc option { color: #10201A; background-color: #FFFFFF; }
.rd-toc[hidden] { display: none; }
/* 文字の大きさ。読書窓の上に重ねる札(下の帯は窮屈なので上に)。
   何の選択肢か分かるよう「文字の大きさ」の字を添える。帯と一緒に消える */
.rd-top {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: var(--r-full);
	background-color: rgba(20, 18, 16, .74);
	color: #D8D0C6;
	font-size: 12px;
	transition: opacity .25s ease;
}
.rd-top[hidden] { display: none; }
.rd-quiet .rd-top { opacity: 0; pointer-events: none; }
.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) {
	/* 広げているときだけ。「閉じる」で画面の中の表示へ戻れる */
	.rd.rd-expanded, body.tool .rd.rd-expanded {
		position: fixed;
		inset: 0;
		height: auto;
		min-height: 0;
		z-index: 90;
	}
	/* 携帯の頁送りは指で払う。前後の釦は場所を取るだけで、そのぶん
	   **閉じる釦が帯から押し出されて読書から戻れなくなっていた**。
	   残すのは、つまみ・頁数・閉じるの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-toc { max-width: 6em; height: 44px; }
	.rd-top { inset-block-start: calc(8px + env(safe-area-inset-top)); }
	.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;
	transform-origin: 0 0;
	line-height: 1;
	color: transparent;
	font-family: serif;
	/* 下の字が透けるように、選択の色は薄く敷く */
	-webkit-text-fill-color: transparent;
}
.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); }