/* ============================================================
   book.css — 名言集の本(v1.47)

   どのデザイン(シック・四つの世界・紙の道具)を選んでいても、名言集の画面だけは、
   古い革表紙の本の見た目にする(オーナーの決定 2026-11-05)。
   ・表紙: えんじの革に、金の二重の枠と箔押しの題
   ・頁:   古い紙に墨の明朝。ジャンルは朱、★は金茶
   ・書体: Shippori Mincho(css/worlds.css の @font-face。端末に無くても同梱の書体で出る)
   ★ 色は tokens.css の --book-*。文字の大きさは var(--fs-*) か calc(○px * var(--fs-scale))
   ============================================================ */

.book {
  --book-font: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 0;
  padding: var(--gutter) var(--gutter) calc(var(--gutter) * 2);
  background: var(--book-paper);
  color: var(--book-ink);
  font-family: var(--book-font);
  min-height: 100%;
}

/* 表紙 ------------------------------------------------------ */
.book-cover {
  position: relative;
  margin: 0 0 20px;
  padding: 34px 20px 26px;
  text-align: center;
  color: var(--book-gold);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(160deg, var(--book-leather), var(--book-leather-2));
  border-radius: 4px 10px 10px 4px;
  box-shadow: inset 6px 0 0 var(--book-leather-2), 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* 金の二重の枠 */
.book-cover::before,
.book-cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--book-gold);
  border-radius: 2px;
}
.book-cover::before { inset: 10px 10px 10px 16px; }
.book-cover::after  { inset: 14px 14px 14px 20px; opacity: 0.55; }

.book-cover__ornament {
  margin: 0;
  font-size: var(--fs-sm);
  letter-spacing: 0.6em;
  text-indent: 0.6em;
}
.book-cover__title {
  margin: 8px 0 4px;
  font-family: var(--book-font);
  font-weight: 700;
  font-size: 40px;               /* 飾りの大きな字(30px 以上は固定でよい) */
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: var(--book-gold);
}
.book-cover__sub {
  margin: 0 0 18px;
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
}
.book-cover__add {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--book-gold);
  border-radius: 999px;
  color: var(--book-gold);
  font-size: var(--fs-sm);
  text-decoration: none;
  letter-spacing: 0.08em;
}
.book-cover__add:focus-visible,
.book-chip:focus-visible,
.book-star:focus-visible,
.book-entry__link:focus-visible,
.book-more:focus-visible,
.book-save:focus-visible,
.book-delete:focus-visible,
.book-search__btn:focus-visible {
  outline: 2px solid var(--book-rubric);
  outline-offset: 2px;
}

/* 目次(しぼりこみ) ---------------------------------------- */
.book-index {
  padding: 14px 0 6px;
  border-top: 3px double var(--book-rule);
  border-bottom: 1px solid var(--book-rule);
  margin-bottom: 8px;
}
.book-search {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.book-search__input,
.book-input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 8px 12px;
  border: 1px solid var(--book-rule);
  border-radius: 4px;
  background: var(--book-paper-2);
  color: var(--book-ink);
  font-family: var(--book-font);
  font-size: var(--fs-md);
}
.book-search__input::placeholder,
.book-input::placeholder { color: var(--book-ink-sub); }
.book-search__btn {
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--book-rule);
  border-radius: 4px;
  background: var(--book-leather);
  color: var(--book-gold);
  font-family: var(--book-font);
  font-size: var(--fs-sm);
}
.book-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.book-chip {
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--book-rule);
  border-radius: 999px;
  background: transparent;
  color: var(--book-ink-sub);
  font-family: var(--book-font);
  font-size: var(--fs-xs);
}
.book-chip.is-active {
  background: var(--book-leather);
  border-color: var(--book-leather);
  color: var(--book-gold);
}
.book-index__count {
  margin: 4px 0 0;
  text-align: right;
  color: var(--book-ink-sub);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
}

/* 頁(1篇ずつ) ---------------------------------------------- */
.book-pages { margin: 0; }
.book-entry {
  padding: 18px 4px 20px;
  border-bottom: 1px solid var(--book-rule);
}
.book-entry:last-child { border-bottom: 0; }
/* 篇と篇のあいだの小さな飾り */
.book-entry + .book-entry::before {
  content: "◇";
  display: block;
  margin: -30px auto 12px;
  width: 2em;
  text-align: center;
  background: var(--book-paper);
  color: var(--book-rule);
  font-size: var(--fs-2xs);
}

.book-stars {
  display: inline-flex;
  gap: 2px;
  margin-left: -6px;
}
.book-star {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--book-rule);
  font-size: calc(22px * var(--fs-scale));
  line-height: 1;
}
.book-star.is-on { color: var(--book-star); }

.book-entry__genre,
.book-page__genre {
  margin: 4px 0 2px;
  color: var(--book-rubric);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
}
.book-entry__region {
  margin-left: 0.8em;
  color: var(--book-ink-sub);
  letter-spacing: 0.1em;
}
.book-entry__region::before { content: "／"; margin-right: 0.4em; }

.book-entry__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.book-entry__author {
  display: block;
  margin-bottom: 6px;
  color: var(--book-ink);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
}
.book-entry__text {
  display: block;
  color: var(--book-ink);
  font-size: var(--fs-lg);
  line-height: 1.95;
  letter-spacing: 0.04em;
  text-indent: -0.5em;
  padding-left: 0.5em;
}
.book-entry__text::before { content: "「"; }
.book-entry__text::after  { content: "」"; }

.book-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--book-ink-sub);
  font-size: var(--fs-md);
}
.book-more,
.book-save,
.book-delete {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin-top: 16px;
  border-radius: 4px;
  font-family: var(--book-font);
  font-size: var(--fs-md);
  letter-spacing: 0.1em;
}
.book-more,
.book-delete {
  border: 1px solid var(--book-rule);
  background: transparent;
  color: var(--book-ink);
}
.book-save {
  border: 1px solid var(--book-leather);
  background: var(--book-leather);
  color: var(--book-gold);
}
.book-save:disabled { opacity: 0.6; }
.book-delete { color: var(--book-rubric); }

/* 1篇を開いたときの頁 ---------------------------------------- */
.book-page {
  position: relative;
  margin: 4px 0 20px;
  padding: 30px 22px 24px;
  border: 1px solid var(--book-rule);
  outline: 1px solid var(--book-rule);
  outline-offset: -6px;
  background: var(--book-paper);
  text-align: center;
}
.book-page__quote {
  margin: 16px 0;
  color: var(--book-ink);
  font-size: var(--fs-xl);
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-align: left;
}
.book-page__author {
  margin: 0;
  color: var(--book-ink);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.12em;
  text-align: right;
}
.book-page__author::before { content: "── "; color: var(--book-rule); }
/* 名言を聞く(v1.52) */
.book-listen {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); margin-top: 18px; padding: 0 18px;
  border: 1px solid var(--book-rule); border-radius: 999px;
  background: transparent; color: var(--book-ink);
  font-family: var(--book-font); font-size: var(--fs-sm); letter-spacing: 0.1em;
}
.book-listen[aria-pressed="true"] { background: var(--book-leather); border-color: var(--book-leather); color: var(--book-gold); }
.book-listen:focus-visible { outline: 2px solid var(--book-rubric); outline-offset: 2px; }

/* 直す・書き加える -------------------------------------------- */
.book-form {
  border-top: 3px double var(--book-rule);
  padding-top: 12px;
}
.book-field {
  display: block;
  margin-bottom: 14px;
}
.book-field__label {
  display: block;
  margin-bottom: 4px;
  color: var(--book-rubric);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
}
.book-field .book-input { width: 100%; }
.book-input--text {
  line-height: 1.8;
  resize: vertical;
}
.book-note,
.book-msg {
  margin: 8px 0 0;
  color: var(--book-ink-sub);
  font-size: var(--fs-xs);
}
.book-msg { color: var(--book-rubric); }