:root {
  --bg: #f7f3ea;
  --fg: #2b2620;
  --muted: #8a8174;
  --line: #e2dbcc;
  --accent: #3b5b8c;
  --font-size: 20px;
  --font: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}
:root[data-theme="white"] { --bg: #ffffff; --fg: #222; --muted: #888; --line: #e6e6e6; }
:root[data-theme="dark"] { --bg: #1d1d1f; --fg: #d8d4cc; --muted: #8b877f; --line: #34343a; --accent: #8fb0e0; }
:root[data-font="gothic"] { --font: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- ホーム ---------- */
#home { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }
.app-title { font-family: var(--font); font-weight: normal; font-size: 26px; margin: 0 0 24px; }
h2 { font-size: 14px; color: var(--muted); font-weight: normal; margin: 28px 0 8px; }
.help { font-size: 14px; line-height: 1.8; margin: 0 0 12px; }
.help a, .add-link { color: var(--accent); }
.add {
  padding: 10px 18px; font-size: 15px;
  border: 1px solid var(--accent); border-radius: 8px; background: transparent; color: var(--accent);
}
.add-link { margin-left: 14px; font-size: 14px; }
body.dragging #home { outline: 3px dashed var(--accent); outline-offset: -12px; }
.shelf-item { display: flex; align-items: stretch; }
.shelf-item .remove {
  flex: none; width: auto; padding: 0 10px; color: var(--muted); opacity: 0; font-size: 16px;
}
.shelf-item:hover .remove { opacity: 1; }
.status { color: var(--muted); font-size: 13px; min-height: 1em; }
.list { list-style: none; margin: 0; padding: 0; }
.list button {
  display: block; width: 100%; text-align: left; padding: 10px 4px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
}
.list button:hover, .continue-card:hover { background: rgba(127, 127, 127, .08); }
.work-title { font-family: var(--font); font-size: 17px; }
.work-sub { font-size: 13px; color: var(--muted); margin-left: .5em; }
.work-author { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.continue-card {
  display: block; width: 100%; text-align: left; padding: 16px;
  background: none; border: 1px solid var(--line); border-radius: 10px;
}

/* ---------- 読書画面 ---------- */
#reader { position: fixed; inset: 0; background: var(--bg); }
#bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; font-size: 13px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity .2s;
}
#reader.show-bar #bar { opacity: 1; }
#bar button { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; }
#bar-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#pageno { color: var(--muted); }
.bar-tools { display: flex; gap: 6px; }

/* ページ: 縦書きの本文を「1段＝1ページ」の段組みにして、1段ずつ表示する */
#page {
  position: absolute; top: 48px; bottom: 40px; left: 56px; right: 56px;
  overflow: hidden;
}
#flow {
  writing-mode: vertical-rl;
  height: 100%;
  width: 100%;
  column-fill: auto;
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.85;
  text-align: justify;
  /* column-width と column-gap はページの大きさに合わせて JS で設定する */
}
#progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
#progress-fill { height: 100%; width: 0; background: var(--accent); opacity: .5; }
#reader-status { position: absolute; inset: 45% 0 auto; text-align: center; }

/* 青空文庫の本文の書式 */
#flow .title { font-size: 1.5em; margin-inline-start: 3em; }
#flow .subtitle { font-size: 1.1em; margin-inline-start: 4em; }
#flow .author { font-size: 1.1em; margin-inline-start: 8em; }
#flow h1, #flow h2, #flow h3, #flow h4 { font-weight: bold; margin: 0; margin-block: 1em; }
#flow .o-midashi { font-size: 1.3em; }
#flow .naka-midashi { font-size: 1.15em; }
#flow .ko-midashi { font-size: 1em; }
#flow p { margin: 0; }
#flow ruby rt { font-size: .5em; }
#flow .gaiji-alt { font-size: .6em; color: var(--muted); }
#flow .notes { font-size: .75em; color: var(--muted); }
#flow .sesame_dot { text-emphasis: sesame; }
#flow .tcy, #flow .tatechuyoko { text-combine-upright: all; }
#flow a { color: inherit; text-decoration: none; pointer-events: none; }
#flow .bibliographical_information {
  break-before: column;
  font-size: .75em; color: var(--muted);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
}
#flow .bibliographical_information hr { display: none; }
#flow .end-mark { break-before: column; color: var(--muted); margin-inline-start: 4em; }