/* ===== わたしの本棚（index.html だけ）: 藍漆の造りつけ書架。見出しの欄・棚板と背板・背表紙・函・机の本の空き・本立て・整理の札・本を足す =====
   中身は js/bookshelf.js が描く（段は JS がデータの幅で割る: js/shelfStore.js packRows）。色はトークン（tokens.css: --lacquer*・--lapis*・--foil・--gold*・--parchment・--ink-page*・--on-vault*・--leather-*）。
   素材のタイルは assets/images/room（scripts/room-art/tiles.mjs）。昼 = light／paper、夜 = dark／indigo。
   スマホ: 机の下、段は折り返す（横に送らない）。PC（1100px 以上）: 右の列 440px、背は 1.1 倍、空の段で机の列の下端まで。
   文字は明朝 500 だけ（700 はスタートの分しか無い）。ラテン文字と数字は Cormorant 600。動きは無い（hover の 3px だけ、reduced motion で 0）。 */

.bookshelf {
  position: relative;
  z-index: 2;
  margin: 12px 8px 0;
  padding-bottom: 28px;
  container-type: inline-size;
  color: var(--on-vault);
  --books-px: 8px; /* .books の左右の余白（js/bookshelf.js が段の中の幅を測るのにも使う） */
  --row-h: 169px; /* 段の中身の高さ（一番高い物: 頻度順の函 160＋巻の頭 9） */
  --pad-t: 36px; /* 段の上の余白（整理の札が収まる） */
}

.bookshelf[hidden] {
  display: none;
}

.bookshelf .n,
.bookshelf .tcy {
  font-family: var(--font-num);
  font-variant-numeric: lining-nums proportional-nums;
}

.bookshelf .tcy {
  text-combine-upright: all;
}

.bookshelf .lat {
  font-family: var(--font-latin);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- 書架の箱 ---- */
.cabinet {
  position: relative;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 10px 18px 30px -10px rgba(var(--shadow-rgb), 0.55);
}

/* コーニス: 冠の縁・金の平縁・反曲・中央に線刻（子午線の弧と菱と三日月）・歯飾り（12px に伸ばし、下に落ち影） */
.cabinet__cornice {
  position: relative;
  height: 64px;
  border-radius: 2px 2px 0 0;
  background:
    linear-gradient(to bottom, var(--lacquer-lit) 0, var(--lacquer-lit) 1px, transparent 1px),
    linear-gradient(to bottom, transparent 5px, rgba(230, 200, 135, 0.7) 5px, rgba(230, 200, 135, 0.7) 6px, transparent 6px),
    linear-gradient(to bottom, #36416A 0, var(--lacquer) 5px, transparent 5px),
    linear-gradient(to bottom, transparent 6px, #3E4A70 6px, var(--lacquer-2) 13px, transparent 13px),
    linear-gradient(to bottom, transparent 45px, rgba(230, 200, 135, 0.6) 45px, rgba(230, 200, 135, 0.6) 46px, transparent 46px),
    url(../assets/images/room/dentil.svg) 0 47px / 12px 12px repeat-x,
    linear-gradient(to bottom, transparent 59px, rgba(0, 0, 0, 0.5) 59px, rgba(0, 0, 0, 0.16) 62px, transparent 65px),
    linear-gradient(to bottom, transparent 59px, #2E385A 59px, var(--lacquer-2) 63px, rgba(230, 200, 135, 0.45) 63px),
    linear-gradient(to bottom, var(--lacquer) 13px, var(--lacquer-2) 47px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, no-repeat, no-repeat, no-repeat;
}

.cabinet__frieze {
  position: absolute;
  left: 50%;
  top: 13px;
  width: 340px;
  max-width: calc(100% - 16px);
  height: 34px;
  transform: translateX(-50%);
  background: url(../assets/images/room/frieze.svg) center / contain no-repeat;
}

/* 見出しの欄: 「わたしの本棚」・整理・本を足す（2 行目は整理の形の一文）。藍の漆（なめらかな艶、ごく弱い木目が透ける） */
.cabinet__rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 8px;
  padding: 8px 12px 10px 16px;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 9px),
    linear-gradient(to top, rgba(230, 200, 135, 0.55) 0, rgba(230, 200, 135, 0.55) 1px, rgba(0, 0, 0, 0.5) 1px, transparent 4px),
    linear-gradient(100deg, rgba(190, 206, 245, 0) 8%, rgba(190, 206, 245, 0.07) 22%, rgba(190, 206, 245, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.14) 100%),
    url(../assets/images/room/tile-lacqh.webp) 0 0 / 512px 128px,
    linear-gradient(to bottom, var(--lacquer), var(--lacquer-2));
  background-blend-mode: normal, normal, normal, soft-light, normal;
}

.bookshelf__title {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 500 21px/1.3 var(--font-display);
  letter-spacing: 0.14em;
  color: var(--on-vault);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.bookshelf .find {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  color: var(--on-vault);
  font: 500 14px/1 var(--font-display);
  letter-spacing: 0.1em;
}

.find span {
  text-decoration: underline;
  text-decoration-color: rgba(230, 200, 135, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.find svg {
  width: 17px;
  height: 17px;
  color: var(--foil);
}

.bookshelf .find:hover {
  background: none;
}

.find:hover span {
  text-decoration-color: var(--foil);
}

.find:focus-visible {
  outline: 2px solid var(--on-vault);
  outline-offset: 2px;
}

/* 見出しの欄の右: 整理・本を足す（文字の下線ボタン）。2 行目（#shelfNote）は整理の形の一文と「元に戻す」 */
.rail__acts {
  display: flex;
  align-items: center;
  gap: 4px;
}

#bookFinderOpen svg {
  width: 12px;
  height: 12px;
}

.rail__note {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0;
  font: 500 13px/1.5 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--on-vault-2);
}

.rail__note .find {
  font-size: 13px;
}

/* 整理の形: 2 行目は 2 行ぶんの高さを最初から取る（下ろした・戻したの一文で段が動かない） */
.bookshelf[data-mode="tidy"] .rail__note {
  min-height: 3em;
}

/* 框（左右の柱）: 漆の艶と縦の木目、内側に金の細線 */
.cabinet__body {
  position: relative;
  padding: 0 12px;
  background:
    linear-gradient(90deg, rgba(190, 206, 245, 0.12) 0, rgba(190, 206, 245, 0) 2px, transparent 9px, rgba(230, 200, 135, 0.5) 9px, rgba(230, 200, 135, 0.5) 9.75px, rgba(0, 0, 0, 0.6) 10.5px, transparent 12px),
    linear-gradient(270deg, rgba(0, 0, 0, 0.45) 0, transparent 3px, transparent 9px, rgba(230, 200, 135, 0.4) 9px, rgba(230, 200, 135, 0.4) 9.75px, rgba(0, 0, 0, 0.6) 10.5px, transparent 12px),
    linear-gradient(90deg, rgba(190, 206, 245, 0.06), transparent 6px, transparent calc(100% - 6px), rgba(0, 0, 0, 0.2)),
    url(../assets/images/room/tile-lacqv.webp) 0 0 / 128px 512px,
    linear-gradient(90deg, var(--lacquer), var(--lacquer-2) 50%, var(--lacquer-2));
  background-blend-mode: normal, normal, normal, soft-light, normal;
}

.cabinet__plinth {
  height: 30px;
  background:
    linear-gradient(to bottom, rgba(230, 200, 135, 0.55) 0, rgba(230, 200, 135, 0.55) 1px, rgba(190, 206, 245, 0.2) 1px, transparent 3px),
    linear-gradient(to bottom, transparent 10px, rgba(0, 0, 0, 0.5) 10px, rgba(0, 0, 0, 0.5) 11px, rgba(190, 206, 245, 0.12) 11px, transparent 13px),
    url(../assets/images/room/tile-lacqh.webp) 0 0 / 512px 128px,
    linear-gradient(to bottom, var(--lacquer), var(--lacquer-2) 12px, var(--lacquer-3));
  background-blend-mode: normal, normal, soft-light, normal;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

/* ---- 段 ---- */
.shelf {
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 12px;
}

/* 背板: 棚板より暗い。縦の板の継ぎ目（暗い 1px＋明るい 1px）、上と左右の隅に強い陰。DOM は本 → 棚板（札）の順、見た目は同じ */
.shelf__in {
  order: 1;
  position: relative;
  z-index: 1;
  padding: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(0, 0, 0, 0.55) 63px 64px, rgba(160, 175, 220, 0.05) 64px 65px),
    linear-gradient(to bottom, #04060D, var(--lacquer-3) 34px, #0A0E1C);
  background-size: 100% calc(100% - 16px);
  background-repeat: no-repeat;
  box-shadow: inset 0 18px 22px -8px rgba(0, 0, 0, 0.8), inset 12px 0 14px -8px rgba(0, 0, 0, 0.65), inset -12px 0 14px -8px rgba(0, 0, 0, 0.65);
}

.books {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  box-sizing: content-box;
  height: var(--row-h);
  margin: 0;
  padding: var(--pad-t) var(--books-px) 16px;
  list-style: none;
}

.books > li {
  position: relative;
  flex: none;
  display: flex;
  align-items: flex-end;
}

/* 群の境目（函・目録の棚割り）は間を 10px に（段の頭は 0。js/shelfStore.js packRows と同じ値） */
.books > li.g {
  margin-left: 8px;
}

/* 棚板: 2 つの面。上面（4px、光を受ける）＋前面（16px。名札は無い）。前面の上に暖かい光、下の縁は暗く、背板へ影を落とす。
   次の段の本までは背板が 36px（PC は 30px）あく。段の高さは中身に依らず一定（--row-h） */
.shelf__board {
  order: 2;
  position: relative;
  z-index: 2;
  height: 20px;
  margin-top: -16px;
  background:
    linear-gradient(to bottom, #5A6794 0, #45507E 4px, rgba(4, 6, 12, 0.8) 4px, rgba(4, 6, 12, 0.8) 5px, rgba(255, 226, 186, 0.3) 5px, rgba(255, 226, 186, 0.3) 6px, rgba(255, 226, 186, 0.07) 6px, transparent 12px),
    linear-gradient(to top, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.6) 1.5px, rgba(0, 0, 0, 0.18) 1.5px, transparent 8px),
    linear-gradient(90deg, rgba(190, 206, 245, 0.07), transparent 26%, transparent 70%, rgba(0, 0, 0, 0.2)),
    url(../assets/images/room/tile-lacqh.webp) 0 0 / 512px 128px,
    linear-gradient(to bottom, var(--lacquer) 6px, var(--lacquer-2));
  background-blend-mode: normal, normal, normal, soft-light, normal;
  box-shadow: 0 9px 10px -3px rgba(0, 0, 0, 0.6);
}

/* ---- 背表紙: 丸背の陰影・しぼ・バンド・金箔の題。幅は 44／48／52（押せる幅 44 以上）、押せる高さは背の全高 ---- */
.bookshelf .spine {
  --w: 44px;
  --h: 130px;
  --c: var(--leather-walnut);
  --t: var(--foil);
  position: relative;
  width: var(--w);
  height: var(--h);
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2.5px 2.5px 1px 1px;
  cursor: pointer;
  color: var(--t);
  font: 500 15px/1.1 var(--font-display);
  background:
    linear-gradient(to bottom, rgba(255, 240, 210, 0.22) 0, rgba(255, 240, 210, 0) 3px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.1) 15%, rgba(255, 238, 205, 0.09) 36%, rgba(255, 238, 205, 0) 56%, rgba(0, 0, 0, 0.22) 80%, rgba(0, 0, 0, 0.66) 100%),
    linear-gradient(to bottom, transparent 7px, rgba(230, 200, 135, 0.78) 7px, rgba(230, 200, 135, 0.78) 7.8px, transparent 7.8px, transparent 9.4px, rgba(230, 200, 135, 0.78) 9.4px, rgba(230, 200, 135, 0.78) 10.2px, transparent 10.2px),
    linear-gradient(to bottom, transparent 15px, rgba(255, 235, 200, 0.3) 15px, rgba(255, 235, 200, 0.3) 16px, rgba(0, 0, 0, 0.15) 16px, rgba(0, 0, 0, 0.15) 18px, rgba(0, 0, 0, 0.55) 18px, rgba(0, 0, 0, 0.55) 19px, transparent 19px),
    linear-gradient(to top, transparent 15px, rgba(0, 0, 0, 0.55) 15px, rgba(0, 0, 0, 0.55) 16px, rgba(0, 0, 0, 0.15) 16px, rgba(0, 0, 0, 0.15) 18px, rgba(255, 235, 200, 0.3) 18px, rgba(255, 235, 200, 0.3) 19px, transparent 19px),
    linear-gradient(to top, transparent 7px, rgba(230, 200, 135, 0.78) 7px, rgba(230, 200, 135, 0.78) 7.8px, transparent 7.8px, transparent 9.4px, rgba(230, 200, 135, 0.78) 9.4px, rgba(230, 200, 135, 0.78) 10.2px, transparent 10.2px),
    url(../assets/images/room/tile-leather-soft.webp) 0 0 / 80px 80px,
    linear-gradient(to bottom, color-mix(in srgb, var(--c), #fff 4%), var(--c) 30%, color-mix(in srgb, var(--c), #000 18%));
  background-blend-mode: normal, normal, normal, normal, normal, normal, soft-light, normal;
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: transform 160ms ease, filter 160ms ease;
}

.bookshelf .spine:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

.spine::before,
.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
}

.spine__l,
.spine__v,
.box__l,
.box__n {
  z-index: 1;
}

.spine:focus-visible,
.box:focus-visible {
  outline: 2px solid var(--on-vault);
  outline-offset: 2px;
  transform: translateY(-3px);
}

/* 読み込み中（押した本のパックを読んでいる）: 薄い金の光 */
.bookshelf .spine[aria-busy="true"],
.bookshelf .box[aria-busy="true"] {
  filter: brightness(1.12) saturate(0.9);
  box-shadow: 0 0 0 1px rgba(243, 213, 138, 0.6), 0 0 14px rgba(243, 213, 138, 0.45);
}

.spine__l {
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  right: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  color: var(--t);
}

.spine__t {
  font: 500 15px/1.1 var(--font-display);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 -0.5px 0 rgba(255, 240, 200, 0.22);
  white-space: nowrap;
}

/* 巻・学年・上下巻を分ける副題: 13px（本を見分ける文字なので小さくしない） */
.spine__s {
  font: 500 13px/1.1 var(--font-display);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.spine .lat,
.box .lat {
  font: 600 15px/1 var(--font-latin);
  letter-spacing: 0.08em;
}

.spine--vol .spine__l {
  bottom: 38px;
}

.spine__v {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 21px;
  text-align: center;
  font: 600 14px/1 var(--font-latin);
  letter-spacing: 0.04em;
  color: #F0D9A0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* 布装（細かな綾）と、背の題箋（紙ラベル） */
.bookshelf .spine--cloth {
  background-image:
    linear-gradient(to bottom, rgba(255, 240, 210, 0.18) 0, rgba(255, 240, 210, 0) 3px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.06) 15%, rgba(255, 238, 205, 0.12) 36%, rgba(255, 238, 205, 0) 56%, rgba(0, 0, 0, 0.18) 80%, rgba(0, 0, 0, 0.6) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, color-mix(in srgb, var(--c), #fff 5%), var(--c) 40%, color-mix(in srgb, var(--c), #000 15%));
  background-blend-mode: normal;
}

.spine--label .spine__l {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  max-height: calc(100% - 28px);
  padding: 6px 0;
  left: 4px;
  right: 4px;
  color: var(--ink-page);
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.1)), url(../assets/images/room/tile-paper-soft.webp) 0 0 / 128px, #EEE5D0;
  background-blend-mode: normal, soft-light, normal;
  box-shadow: inset 0 0 0 0.75px rgba(90, 64, 34, 0.45), 0 1px 1px rgba(0, 0, 0, 0.4);
}

.spine--label .spine__t,
.spine--label .spine__s {
  text-shadow: none;
  letter-spacing: 0;
  line-height: 1;
}

.bookshelf .spine--vellum {
  --c: var(--leather-vellum);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 3px),
    linear-gradient(90deg, rgba(60, 40, 20, 0.4) 0%, rgba(60, 40, 20, 0.04) 12%, rgba(255, 252, 240, 0.3) 36%, rgba(255, 252, 240, 0) 56%, rgba(60, 40, 20, 0.08) 86%, rgba(60, 40, 20, 0.45) 100%),
    linear-gradient(to bottom, transparent 8px, rgba(110, 78, 30, 0.55) 8px, rgba(110, 78, 30, 0.55) 8.8px, transparent 8.8px),
    linear-gradient(to top, transparent 8px, rgba(110, 78, 30, 0.55) 8px, rgba(110, 78, 30, 0.55) 8.8px, transparent 8.8px),
    url(../assets/images/room/tile-paper-soft.webp) 0 0 / 128px 128px,
    linear-gradient(to bottom, #E9DCBE, #D6C4A0);
  background-blend-mode: normal, normal, normal, normal, soft-light, normal;
}

.spine--vellum .spine__l {
  background: transparent;
  box-shadow: inset 0 0 0 0.75px rgba(90, 64, 34, 0.5);
}

/* 長い題（6 字以上）: 少し小さく、字間 0。背の上下の余白も詰める */
.spine--long .spine__l {
  top: 18px;
  bottom: 18px;
}

/* 巻つき（vol:）で 6 字以上の題: 題を巻数（.spine__v、bottom 21px）の上に。いまのデータには無いが、SPINE に足したとき重ならないための保険 */
.spine--long.spine--vol .spine__l {
  bottom: 36px;
}
.spine--long .spine__t {
  font-size: 13.5px;
  letter-spacing: 0;
}

.spine--long .spine__s {
  font-size: 12px;
  letter-spacing: 0;
}

/* 題箋つきの長い題（英検 ライティング・漢文 句法と重要語）: ラベルは中央のまま。.spine--long の top/bottom だけが勝つと translateY(-50%) が残り、背の上にはみ出していた */
.spine--label.spine--long .spine__l {
  top: 50%;
  bottom: auto;
  max-height: calc(100% - 20px);
}

/* マイ単語帳: 仔牛皮紙の薄い帳面（背の文字は墨） */
.spine--my .spine__t {
  font-size: 13px;
}

/* いまのコースの函: 藍の絹のしおりが巻の頭から出て、題箋の右の縁（文字の箱に掛からない）に垂れる。紙の上なので見える（机の本のしおりと同じ藍） */
.box--reading::after {
  content: "";
  position: absolute;
  right: 7px;
  top: -6px;
  width: 5px;
  height: 50px;
  z-index: 2;
  background: linear-gradient(90deg, var(--lapis), var(--lapis-3) 45%, var(--lapis-2) 70%, var(--lapis));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}

/* 机の本の空き: 背板より暗い穴（左右の背の陰が落ちる）。棚板には本の立っていた跡の、ごく淡い埃の線だけ */
.slot {
  --w: 40px;
  --h: 128px;
  position: relative;
  display: block;
  width: var(--w);
  height: var(--h);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.8)), linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 14px 16px -6px rgba(0, 0, 0, 0.7);
}

.slot::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 190, 170, 0.22) 15%, rgba(200, 190, 170, 0.22) 85%, transparent);
}

/* 代本板: 空きに立つ仔牛皮紙の薄い板（本より低い・空きの幅いっぱい。明朝の字の箱は字より広いので、2 列の字が板の紙の上に収まる幅に）。
   縦書きで右に短い題、左に「机の上」（墨。紙の上で約 10:1）。夜は一段沈めた地で、夜の層（z 3）の上の z 4 */
.slot__card {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 16px;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  writing-mode: vertical-rl;
  border-radius: 1px 1px 0 0;
  color: var(--ink-page);
  background: url(../assets/images/room/tile-paper-soft.webp) 0 0 / 128px, var(--leather-vellum);
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 0 0.75px rgba(90, 64, 34, 0.45), 1px 0 3px rgba(4, 6, 12, 0.6);
}

.slot__t {
  font: 500 12px/1.1 var(--font-display);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.slot__s {
  margin-inline-start: 0.3em;
  font-size: 11px;
}

.slot__k {
  font: 500 13px/1.1 var(--font-display);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.slot__card .lat {
  font: 600 12px/1 var(--font-latin);
  letter-spacing: 0.04em;
}

/* 真鍮の本立て（L 字の板、光の側に鋭い反射） */
.bookend {
  position: relative;
  display: block;
  width: 26px;
  height: 74px;
  margin: 0 4px 0 2px;
}

.bookend::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 4px;
  border-radius: 1px;
  background: linear-gradient(to bottom, #F3D58A, #A97A32 60%, #5A3E16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.bookend::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 7px;
  height: 70px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #F6E2A8 0, #C9A35A 18%, #8A6A30 60%, #3E2C12 100%);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.55);
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}

/* ---- 函（コース）: 布張りの箱＋貼り題箋。上の口から巻の頭が段になってのぞく（花布と金の帯）。縁は左上に 1px の光 ---- */
.bookshelf .box {
  --w: 68px;
  --h: 148px;
  --c: var(--leather-slate);
  position: relative;
  width: var(--w);
  height: var(--h);
  margin: 9px 0 0;
  padding: 0;
  border: 0;
  border-radius: 1.5px;
  cursor: pointer;
  flex: none;
  color: var(--ink-page);
  font: 500 15px/1.1 var(--font-display);
  background:
    linear-gradient(90deg, rgba(255, 238, 205, 0.2) 0, rgba(255, 238, 205, 0.2) 1px, rgba(255, 255, 255, 0.05) 1px, transparent 6px, transparent calc(100% - 7px), rgba(0, 0, 0, 0.3) calc(100% - 3px), rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(255, 238, 205, 0.22) 0, rgba(255, 238, 205, 0.22) 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, color-mix(in srgb, var(--c), #fff 8%), var(--c) 40%, color-mix(in srgb, var(--c), #000 22%));
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.4), 1px 0 0 rgba(0, 0, 0, 0.6), 3px 0 5px -2px rgba(0, 0, 0, 0.5);
  transition: transform 160ms ease, filter 160ms ease;
}

.bookshelf .box:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
}

/* 巻の頭: 平らな段（花布の光と金の帯）。くすんだ革 */
.box__vols {
  position: absolute;
  left: 6px;
  right: 6px;
  top: -9px;
  height: 10px;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  z-index: 0;
}

.box__vols i {
  flex: 1;
  border-radius: 0;
  background:
    linear-gradient(to bottom, rgba(255, 238, 205, 0.26) 0, rgba(255, 238, 205, 0) 1px),
    linear-gradient(to bottom, transparent 3px, rgba(230, 200, 135, 0.7) 3px, rgba(230, 200, 135, 0.7) 3.75px, transparent 3.75px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.3)),
    var(--v, #3A2A1E);
  box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.6), inset -1px 0 0 rgba(0, 0, 0, 0.35);
}

/* 段差は 1px だけ（8／9）。くすんだ革 2 色＋牛血 */
.box__vols i:nth-child(1) { height: 8px; --v: #3A2A1E; }
.box__vols i:nth-child(2) { height: 9px; --v: #2B1F17; }
.box__vols i:nth-child(3) { height: 8px; --v: #4A2320; }
.box__vols i:nth-child(4) { height: 9px; --v: #2B1F17; }

.box__l {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 12px;
  bottom: 32px;
  padding: 6px 0;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  color: var(--ink-page);
  border-radius: 1px;
  background: url(../assets/images/room/tile-paper-soft.webp) 0 0 / 128px, #EEE5D0;
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 0 0.75px rgba(90, 64, 34, 0.5), inset 0 0 0 2.5px #EEE5D0, inset 0 0 0 3.25px rgba(90, 64, 34, 0.35), 0 1px 1px rgba(0, 0, 0, 0.4);
}

.box__l .spine__t {
  text-shadow: none;
  font-size: 15px;
}

.box__l .spine__s {
  text-shadow: none;
}

.box__n {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 9px;
  text-align: center;
  white-space: nowrap;
  font: 500 13px/1 var(--font-display);
  color: var(--foil);
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.box__n b {
  font: 600 16px/1 var(--font-latin);
  margin: 0 1px;
}

.box .lat {
  font: 600 13px/1 var(--font-latin);
  letter-spacing: 0.08em;
}

.box--long .spine__t {
  font-size: 14px;
  letter-spacing: 0;
}

/* ---- 本を足す（索引カードの引き出し）: 検索と棚ごとの畳んだ見出し。見出しと入力欄は固定、中身（.finder__body）だけ縦に送る ---- */
.bookshelf .finder {
  /* 窓の幅は自前の式で（ブラウザの dialog の既定 max-width: calc(100% - 6px - 2em) には頼らない）。左右 19px・上限 560px は表紙を入れる前に効いていた値 */
  --finder-w: min(560px, calc(100% - 38px));
  width: var(--finder-w);
  max-width: none;
  max-height: min(640px, calc(100% - 40px));
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-page);
  overflow: visible;
}

.finder::backdrop {
  background: radial-gradient(ellipse 80% 70% at 50% 42%, rgba(20, 14, 8, 0.5), rgba(20, 14, 8, 0.82));
}

.finder__card {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(640px, calc(100vh - 40px));
  max-height: min(640px, calc(100dvh - 40px)); /* 中身（.finder__body）だけ縦に送る */
  margin: 0;
  padding: 18px 20px 14px;
  border-radius: 2px;
  background: url(../assets/images/room/tile-paper-soft.webp) 0 0 / 256px, var(--parchment);
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 0 0.75px rgba(169, 122, 50, 0.55), inset 0 0 0 4px var(--parchment), inset 0 0 0 4.75px rgba(169, 122, 50, 0.35), 0 30px 60px -20px rgba(4, 6, 12, 0.8), 0 12px 24px -8px rgba(4, 6, 12, 0.6);
}

.finder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 0.75px solid rgba(42, 33, 25, 0.3);
}

.finder__head h2 {
  margin: 0;
  font: 500 21px/1.3 var(--font-display);
  letter-spacing: 0.14em;
  color: var(--ink-page);
}

.bookshelf .finder__close {
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 0;
  padding: 0;
  display: grid;
  place-content: center;
  border: 0;
  border-radius: 2px;
  background: none;
  cursor: pointer;
  color: var(--ink-page-2);
}

.finder__close svg {
  width: 14px;
  height: 14px;
}

.finder__field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 4px;
  border-bottom: 1px solid rgba(42, 33, 25, 0.55);
}

.finder__field svg {
  width: 17px;
  height: 17px;
  color: var(--ink-page-3);
  flex: none;
}

.finder__field input {
  flex: 1;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-page);
  font: 500 16px/1 var(--font-display);
  letter-spacing: 0.04em;
  box-shadow: none;
}

.finder__field input::placeholder {
  color: #5E5040; /* 昼夜とも羊皮紙の上で 4.5:1 以上（例はここにしか書いていない） */
}

.finder__field input:focus-visible {
  outline: none;
  border: 0;
  box-shadow: none;
}

.finder__field:focus-within {
  border-bottom-color: var(--ink-page);
  box-shadow: 0 1px 0 var(--ink-page);
}

.finder__field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.finder__hint {
  margin: 8px 0 2px;
  font: 500 12.5px/1.5 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--ink-page-3);
}

.finder__body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -6px;
  padding: 0 6px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 棚ごとの見出し（畳んだ details。開いた見出しは、閉じて開き直したら畳む） */
.cat {
  border-bottom: 0.75px solid rgba(42, 33, 25, 0.22);
}

.cat > summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-height: 48px;
  padding: 13px 22px 10px 2px;
  position: relative;
  list-style: none;
  cursor: pointer;
}

.cat > summary::-webkit-details-marker {
  display: none;
}

.cat__n {
  font: 500 16px/1.4 var(--font-display);
  letter-spacing: 0.06em;
  color: var(--ink-page);
}

.cat__m {
  font: 500 13px/1.4 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--ink-page-3);
}

.cat > summary svg {
  position: absolute;
  right: 4px;
  top: 20px;
  width: 14px;
  height: 9px;
  color: var(--ink-page-3);
  transition: transform 160ms ease;
}

.cat[open] > summary svg {
  transform: rotate(90deg);
}

.cat > summary:hover .cat__n {
  text-decoration: underline;
  text-decoration-color: rgba(169, 122, 50, 0.7);
  text-underline-offset: 4px;
}

.cat > summary:focus-visible {
  outline: 2px solid var(--ink-page);
  outline-offset: -2px;
}

.cat__h {
  margin: 10px 0 0;
  font: 500 12.5px/1.5 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--ink-page-3);
}

.finder__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cat .finder__list {
  padding-bottom: 6px;
}

/* 行: 左に題と meta の 2 行、右に「棚に足す」（縮まない）。行のどこを押してもボタンと同じ（Tab で止まるのはボタン） */
.finder__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 0;
  border-top: 0.75px solid rgba(42, 33, 25, 0.12);
  cursor: pointer;
}

/* 行の左の小さな表紙（js/covers.js の表・scripts/build-covers.mjs の絵 48×64）。表紙のある本は絵、無い本は背と同じ革の無地（金の細線）。
   箱の大きさは決まっていて（読む前から: CLS 0）、読めなかった絵は JS が外して無地にする。高さ 32 は行の中身（題＋meta 39.5px）より低く、行は高くならない */
.finder__cov {
  flex: none;
  width: 24px;
  height: 32px;
  overflow: hidden;
  border-radius: 1px 2px 2px 1px;
  background: var(--c, #2B1F17);
  box-shadow: 1px 1px 0 0 #D9CCAE, 1.5px 2px 3px -1px rgba(var(--shadow-rgb), 0.55);
}

.finder__cov img {
  display: block;
  width: 100%;
  height: 100%;
}

.finder__cov--plain {
  background:
    linear-gradient(90deg, rgba(var(--shadow-rgb), 0.5), transparent 3px, transparent calc(100% - 2px), rgba(var(--shadow-rgb), 0.35)),
    url(../assets/images/room/tile-leather.webp) 0 0 / 60px 60px,
    var(--c);
  background-blend-mode: normal, soft-light, normal;
  outline: 0.75px solid rgba(201, 163, 90, 0.55);
  outline-offset: -4px;
}

html:is([data-theme="dark"], [data-theme="indigo"]) .finder__cov img {
  filter: brightness(0.9); /* 夜の頁（羊皮紙が 1 段暗い）に合わせる */
}

/* 360px 未満では出さない（display:none の loading=lazy は読みにも行かない）。360〜600px 未満は表紙の幅（21＋間 7 = 28px）を、
   窓の幅（表紙を入れる前の --finder-w より 18px 広く: 左右の外の余白 19 → 10px。上限 560 → 578px）と札の内側の余白（20 → 15px: 10px）から取る。
   どの幅（小数の幅も）でも題と meta の列の幅は表紙を入れる前と同じ（書名の行数が変わらない）。600px 以上は列の余りから取る（24＋間 10 = 34px）。
   境目は小数の幅で抜けないよう 359.98px／599.98px（ほかの所と同じ形）。
   (359.98, 360)・(599.98, 600) の 0.02px の抜けは残す: 範囲の書き方 (width < 360px) は Safari 16.4 から（アプリの器は iOS 15 から・iOS 16.3 以前の Safari も直してきた） */
@media (max-width: 359.98px) {
  .finder__cov {
    display: none;
  }
}

@media (min-width: 360px) and (max-width: 599.98px) {
  .bookshelf .finder {
    width: calc(var(--finder-w) + 18px);
  }

  .finder__card {
    padding-right: 15px;
    padding-left: 15px;
  }

  .finder__cov {
    width: 21px;
    height: 28px;
    margin-right: -3px;
  }
}

.finder__txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.finder__t {
  font: 500 15px/1.4 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--ink-page);
}

.finder__m {
  font: 500 12.5px/1.4 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--ink-page-3);
}

.finder__row:hover .finder__t {
  text-decoration: underline;
  text-decoration-color: rgba(169, 122, 50, 0.7);
  text-underline-offset: 4px;
}

/* 「棚に足す」: 0.75px の金の罫・角 2px（題箋）・左に ＋（線 1.15）。「棚にある」は罫を外し、金の押し点 */
.bookshelf .finder__act {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 2px;
  background: none;
  box-shadow: inset 0 0 0 0.75px rgba(169, 122, 50, 0.55);
  cursor: pointer;
  color: var(--ink-page);
  font: 500 14px/1 var(--font-display);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.finder__act svg {
  width: 11px;
  height: 11px;
}

.bookshelf .finder__act:hover {
  background: rgba(201, 163, 90, 0.14);
}

.bookshelf .finder__act--on {
  box-shadow: none;
  cursor: default;
  color: var(--ink-page-3);
  font-size: 13px;
}

.bookshelf .finder__act--on:hover {
  background: none;
}

.finder__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E9C979, #8A6A30 75%);
}

.finder__act:focus-visible,
.finder__close:focus-visible {
  outline: 2px solid var(--ink-page);
  outline-offset: 2px;
}

/* ---- 夜（dark／indigo）: 炎は左上（机のろうそく）、月は左上の窓の高み。背 1 本ごとに 3 層 = 頭に月光の 1px（冷）・左の丸みにろうそくの縁（暖、1px の芯＋6px の裾）・右へ行くほど沈む（li の位置）。
   文字（.spine__l）は z 1 で層の上。題箋は沈め、背板はさらに暗く ---- */
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .spine::before,
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .box::before {
  background:
    linear-gradient(to bottom, rgba(143, 163, 217, 0.34) 0, rgba(143, 163, 217, 0.1) 1.5px, rgba(143, 163, 217, 0) 3.5px),
    linear-gradient(90deg, rgba(255, 184, 104, 0.78) 0, rgba(255, 184, 104, 0.4) 1.5px, rgba(255, 184, 104, 0.1) 5px, rgba(255, 184, 104, 0) 9px, rgba(4, 3, 2, 0.26) 10px, rgba(4, 3, 2, 0.46) 100%),
    linear-gradient(rgba(4, 3, 2, var(--sink-li, 0)), rgba(4, 3, 2, var(--sink-li, 0)));
}

html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .books > li:nth-child(n + 7) {
  --sink-li: 0.08;
}

html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .books > li:nth-child(n + 11) {
  --sink-li: 0.16;
}

/* 夜: ろうそくに近い左の 4 冊は金がよく光る（右へ行くほど沈む） */
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .books > li:nth-child(-n + 4) .spine {
  --t: #F8E6B0;
}

html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .books > li:nth-child(n + 9) .spine {
  --t: #E3C98A;
}

html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .spine--label .spine__l,
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .box__l {
  filter: brightness(0.86) sepia(0.15);
}

html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .shelf__in {
  background: repeating-linear-gradient(90deg, transparent 0 63px, rgba(0, 0, 0, 0.6) 63px 64px, rgba(255, 190, 120, 0.03) 64px 65px), linear-gradient(to bottom, #020306, #04060C 30px, #070A14);
  background-size: 100% calc(100% - 16px);
  background-repeat: no-repeat;
}

/* 仔牛皮紙（墨の文字・題箋が透ける）: 月光と暖かい縁だけ。黒は掛けない（段の右の沈み .34 と重なると墨が 4.5:1 を切る。実測: マイ単語帳 2.6:1 → 掛けずに 4.8）。
   下の段（--sink）は紙の地を沈みのぶん白へ寄せる（紙は革より光を返す。沈めた後の墨が 4.5:1 を切らない: 小学算数 4.2 → 4.8 以上） */
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .spine--vellum::before {
  background:
    linear-gradient(to bottom, rgba(143, 163, 217, 0.34) 0, rgba(143, 163, 217, 0.1) 1.5px, rgba(143, 163, 217, 0) 3.5px),
    linear-gradient(90deg, rgba(255, 184, 104, 0.78) 0, rgba(255, 184, 104, 0.4) 1.5px, rgba(255, 184, 104, 0.1) 5px, rgba(255, 184, 104, 0) 9px);
}

html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .spine--vellum {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 3px),
    linear-gradient(90deg, rgba(60, 40, 20, 0.4) 0%, rgba(60, 40, 20, 0.04) 12%, rgba(255, 252, 240, 0.3) 36%, rgba(255, 252, 240, 0) 56%, rgba(60, 40, 20, 0.08) 86%, rgba(60, 40, 20, 0.45) 100%),
    linear-gradient(to bottom, transparent 8px, rgba(110, 78, 30, 0.55) 8px, rgba(110, 78, 30, 0.55) 8.8px, transparent 8.8px),
    linear-gradient(to top, transparent 8px, rgba(110, 78, 30, 0.55) 8px, rgba(110, 78, 30, 0.55) 8.8px, transparent 8.8px),
    url(../assets/images/room/tile-paper-soft.webp) 0 0 / 128px 128px,
    linear-gradient(to bottom, color-mix(in srgb, #E9DCBE, #fff calc(var(--sink, 0) * 200%)), color-mix(in srgb, #D6C4A0, #fff calc(var(--sink, 0) * 200%)));
  background-blend-mode: normal, normal, normal, normal, soft-light, normal;
}

html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .shelf__board {
  background:
    linear-gradient(to bottom, #4A3E30 0, #2A2C40 4px, rgba(0, 0, 0, 0.85) 4px, rgba(0, 0, 0, 0.85) 5px, rgba(255, 186, 112, 0.3) 5px, rgba(255, 186, 112, 0.3) 6px, rgba(255, 186, 112, 0.05) 6px, transparent 12px),
    linear-gradient(to top, rgba(0, 0, 0, 0.65) 0, rgba(0, 0, 0, 0.65) 1.5px, rgba(0, 0, 0, 0.2) 1.5px, transparent 8px),
    linear-gradient(90deg, rgba(255, 176, 96, 0.08), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.3)),
    url(../assets/images/room/tile-lacqh.webp) 0 0 / 512px 128px,
    linear-gradient(to bottom, var(--lacquer) 6px, var(--lacquer-2));
  background-blend-mode: normal, normal, normal, soft-light, normal;
}

html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .cabinet__cornice,
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .cabinet__plinth {
  filter: brightness(0.62);
}

/* 夜: コーニスの上辺に月光（親の brightness(.62) が掛かるので α は 1/.62 で割った値） */
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .cabinet__cornice::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(143, 163, 217, 0.18), rgba(143, 163, 217, 0.55) 35%, rgba(143, 163, 217, 0.3) 100%);
}

/* 夜（スマホ）: 本棚は机のろうそくの下にあり、下へ行くほど暗い。背板と本だけを沈める（名札は沈めない）。左はろうそくで暖かく、右は沈む。炎から 700px 下なので揺らさない */
@media (max-width: 1099px) {
  html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .shelf__in::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  }
  html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .shelf__in::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: soft-light;
    /* 右端の黒は .2 まで（.35 だと横に送る行の右端で切れて見える題箋の墨が 3.0:1 に落ちる。反証レビュー S1） */
    background: linear-gradient(90deg, rgba(255, 176, 96, 0.3) 0, rgba(255, 176, 96, 0.08) 28%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.2) 100%);
  }
}

/* ---- 中くらいの幅（タブレット）: 本棚は机と同じ幅に ---- */
@media (min-width: 600px) and (max-width: 1099px) {
  .bookshelf {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- PC（机は左、本棚は右の列 440px）: 最初の棚板の上面を机の天板の線に。背は 1.1 倍。空の段で机の列の下端まで伸ばす（段の数は js/bookshelf.js） ---- */
@media (min-width: 1100px) {
  .bookshelf {
    --books-px: 10px;
    --row-h: 176px;
    --pad-t: 30px;
    margin: 84px 0 0; /* 最初の棚板の上面を机の天板の線（--desk-top 398px）に */
    padding-bottom: 40px;
  }
  .cabinet__rail {
    padding-top: 6px;
    padding-bottom: 4px;
  }
  .bookshelf .find {
    min-height: 40px;
  }
  .cabinet__cornice {
    height: 58px;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 -8px, 0 39px, 0 -8px, 0 -8px, 0 0;
  }
  .cabinet__frieze {
    top: 12px;
    height: 30px;
  }
  .books > li > .spine {
    height: calc(var(--h) * 1.1);
  }
  /* 夜: 本棚はろうそく（左の机）から照らされる。暖める層だけを箱全体に掛けて揺らす（壁の溜まり・机の本と同じ room-flicker、同位相。黒は掛けない = 名札は昼と同じ） */
  html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .cabinet::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background: linear-gradient(90deg, rgba(255, 176, 96, 0.62) 0, rgba(255, 176, 96, 0.22) 18%, rgba(255, 176, 96, 0) 40%);
    animation: room-flicker 4.2s infinite;
  }
  /* 夜: 沈みは段ごとの背板の中（.shelf__in は z 1 の重ね合わせ文脈。棚板 z 2 は外）。右へ沈み、炎から遠い下の段ほど沈む（--sink。自分の本をたくさん足すと下が暗い） */
  html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .shelf__in::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: multiply;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.18) 70%, rgba(0, 0, 0, 0.34) 100%),
      linear-gradient(rgba(0, 0, 0, var(--sink)), rgba(0, 0, 0, var(--sink)));
  }
  html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .shelf {
    --sink: 0;
  }
  html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .shelf:nth-child(n + 4) {
    --sink: 0.08;
  }
  html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .shelf:nth-child(n + 7) {
    --sink: 0.16;
  }
  html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .cabinet::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 170, 90, 0.1), rgba(255, 170, 90, 0.5) 30%, rgba(255, 170, 90, 0.35) 55%, rgba(255, 170, 90, 0.08));
  }
}

/* PC の背の低い画面: 部屋の帯が縮むぶん、棚板の上面を机の天板に合わせ直す */
@media (min-width: 1100px) and (max-height: 820px) {
  .bookshelf {
    margin-top: 24px;
  }
}

/* 動き: hover の持ち上がりだけ。reduced motion で 0 */
@media (prefers-reduced-motion: reduce) {
  .bookshelf *,
  .bookshelf *::before,
  .bookshelf *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- 少ない棚の一文（3 点以下）: リストの外。最後の段の本立ての右の残り（≥1100 は最初の空の段の中央）に js/bookshelf.js が置く ---- */
.shelf-hint {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  height: var(--row-h);
  margin: 0;
  padding: 0 2px;
  font: 500 14px/1.7 var(--font-display);
  letter-spacing: 0.04em;
  color: var(--on-vault-2);
  text-shadow: 0 1px 0 rgba(4, 6, 12, 0.6);
}

.shelf-hint > span {
  display: block;
  width: 100%;
  text-wrap: pretty;
  word-break: auto-phrase; /* 日本語は文節で折る（「ここ／に並ぶ」にしない） */
}

.shelf-hint--center > span {
  text-align: center;
}

.bookshelf .shelf-hint__add {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px 0;
  padding: 0 2px;
  border: 0;
  background: none;
  cursor: pointer;
  vertical-align: baseline;
  color: var(--on-vault);
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(230, 200, 135, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.bookshelf .shelf-hint__add:hover {
  background: none;
  text-decoration-color: var(--foil);
}

.shelf-hint__add:focus-visible {
  outline: 2px solid var(--on-vault);
  outline-offset: 2px;
}

/* ---- 整理の形: 背・函は押せない絵（名前は残す）。下ろせる物の頭に、仔牛皮紙の細い札「下ろす」 ----
   札は背（函）の頭から 24px 上に出て 22px 差し込む（段の上の余白の中に収まる）。押せる範囲は札の高さ 46px × その背の幅（隣の背には掛けない）。
   夜の層（.shelf__in::before／::after の z 3）より上の z 4 */
.bookshelf[data-mode="tidy"] .spine,
.bookshelf[data-mode="tidy"] .box {
  cursor: default;
}

.bookshelf[data-mode="tidy"] .spine:hover,
.bookshelf[data-mode="tidy"] .box:hover {
  transform: none;
  filter: none;
}

.bookshelf .slip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 22px);
  z-index: 4;
  height: 46px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  transition: transform 160ms ease;
}

.books > li[data-course] > .slip {
  bottom: calc(100% - 31px); /* 函は巻の頭の 9px 下から */
}

.slip__paper {
  position: absolute;
  left: 50%;
  top: 0;
  width: 28px;
  height: 46px;
  margin-left: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  white-space: nowrap;
  font: 500 13px/1 var(--font-display);
  letter-spacing: 0.02em;
  color: var(--ink-page);
  border-radius: 1px;
  background: url(../assets/images/room/tile-paper-soft.webp) 0 0 / 128px, var(--leather-vellum);
  background-blend-mode: soft-light, normal;
  box-shadow: inset 0 0 0 0.75px rgba(90, 64, 34, 0.45), 1px 2px 3px rgba(var(--shadow-rgb), 0.5);
  transform: rotate(-2deg);
}

.bookshelf .slip:hover {
  background: none;
  transform: translateY(-3px);
}

.slip:focus-visible {
  outline: none;
}

.slip:focus-visible .slip__paper {
  outline: 2px solid var(--on-vault);
  outline-offset: 2px;
}

/* 下ろした物: 「終わる」まで同じ場所に暗く残る（札は「戻す」）。名前は札と img の読み上げが言う */
.books > li.is-dropped > .spine,
.books > li.is-dropped > .box {
  filter: brightness(0.34) saturate(0.6);
}

/* 窓で足した物: 背（函）の頭に金の押し点（次に棚を描き直すまで。動きは無い） */
.books > li.is-new::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  z-index: 4;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F3D58A, #8A6A30 75%);
  box-shadow: 0 0 0 1px rgba(4, 6, 12, 0.45);
}

/* ---- 腰の扉（≥1100 の少ない棚）: 空の段 1 枚より下を、書架の腰の閉じた扉 2 枚で机の列の下端まで（藍漆の框・沈んだ鏡板と金の細線・真鍮の取っ手）。飾り（aria-hidden）。
   高さは js/bookshelf.js が机の列の下端までの残りで入れる ---- */
.shelf-doors {
  position: relative;
  display: flex;
  gap: 3px;
  box-sizing: border-box;
  padding: 9px 1px 6px;
  background: linear-gradient(to bottom, rgba(4, 6, 12, 0.75), rgba(4, 6, 12, 0.2) 9px, transparent 9px), var(--lacquer-3);
}

.shelf-doors > i {
  position: relative;
  flex: 1;
  border-radius: 1px;
  background:
    linear-gradient(90deg, rgba(190, 206, 245, 0.12) 0, transparent 2px, transparent calc(100% - 3px), rgba(4, 6, 12, 0.55)),
    linear-gradient(to bottom, rgba(190, 206, 245, 0.14) 0, transparent 2px, transparent calc(100% - 3px), rgba(4, 6, 12, 0.6)),
    url(../assets/images/room/tile-lacqv.webp) 0 0 / 128px 512px,
    linear-gradient(100deg, var(--lacquer), var(--lacquer-2) 70%);
  background-blend-mode: normal, normal, soft-light, normal;
  box-shadow: 0 1px 0 rgba(4, 6, 12, 0.7);
}

.shelf-doors > i::before {
  content: "";
  position: absolute;
  inset: 18px 14px;
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(4, 6, 12, 0.4), rgba(4, 6, 12, 0.1) 24px, rgba(190, 206, 245, 0.04) 60%, rgba(4, 6, 12, 0.25));
  box-shadow: inset 0 0 0 0.75px rgba(230, 200, 135, 0.45), inset 2px 3px 6px rgba(4, 6, 12, 0.55), 0 1px 0 rgba(190, 206, 245, 0.1);
}

.shelf-doors > i::after {
  content: "";
  position: absolute;
  top: 26px;
  width: 6px;
  height: 26px;
  border-radius: 3px;
  background: linear-gradient(90deg, #F6E2A8 0, #C9A35A 30%, #8A6A30 70%, #3E2C12);
  box-shadow: 1px 2px 3px rgba(4, 6, 12, 0.6);
}

.shelf-doors > i:first-child::after {
  right: 5px;
}

.shelf-doors > i:last-child::after {
  left: 5px;
}

/* 夜: 代本板の地を一段落とす（紙の質感の暗い点でも墨が 4.5:1 を切らない明るさ） */
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .slot__card {
  background: url(../assets/images/room/tile-paper-soft.webp) 0 0 / 128px, #B3A68D;
  background-blend-mode: soft-light, normal;
}

/* 夜: 札の地を一段落とす（背が沈むのに札だけ昼の明るさで光らない）。字は夜の --ink-page（約 6.9:1） */
html:is([data-theme="dark"], [data-theme="indigo"]) .bookshelf .slip__paper {
  background: url(../assets/images/room/tile-paper-soft.webp) 0 0 / 128px, #A99C84;
  background-blend-mode: soft-light, normal;
}

/* ---- 細い幅（320〜359）と PC の細い列（1100〜1179: 列 340〜419px）: 見出しの欄を 1 行に（見出し 19px・字間 .06em・ボタンの余白 4px・「本を足す」の ＋ を隠す） ---- */
@media (max-width: 359px), (min-width: 1100px) and (max-width: 1179px) {
  .bookshelf__title {
    font-size: 19px;
    letter-spacing: 0.06em;
  }
  .bookshelf .find {
    padding: 0 4px;
  }
  #bookFinderOpen svg {
    display: none;
  }
}