/* ひとひら ｜ 偶然でひらく、次の一篇
 * 冷たい器（無彩・建築的ホール × 鋼鉄の書架）× 温かい中身（写実的古書）。
 * 温度は色で表現し、書体は明朝で統一する。
 * ───────────────────────────────────────────────────────────── */

/* ===== トークン ============================================== */
:root {
  /* 器：冷たいグレー（青みの黒い影） */
  --cold-50:  #f3f4f6;
  --cold-100: #e8e8ea;
  --cold-200: #d6d8dd;
  --cold-300: #bcc0c8;
  --cold-400: #9aa0ab;
  --cold-500: #767d8a;
  --cold-600: #565d6a;
  --cold-700: #3b414c;
  --cold-800: #262a32;
  --cold-900: #1b1e24; /* 青みの黒 */
  --cold-950: #121419;

  --steel-lit:  #cfd3da; /* 鋼鉄ハイライト */
  --steel-base: #9ba0aa;
  --steel-deep: #4c515c;

  --shadow-blue: rgba(14, 18, 28, 0.55); /* 青みの黒い影 */
  --shadow-key:  rgba(8, 10, 16, 0.5);
  --hairline:    rgba(255, 255, 255, 0.06);
  --hairline-cold: rgba(20, 26, 38, 0.4);

  /* 中身：温かい古書（流用） */
  --paper-100: #f6efdf;
  --paper-200: #eadfc9;
  --paper-300: #d8c8aa;
  --paper-ink: #1f1712;
  --paper-ink-soft: rgba(31, 23, 18, 0.58);
  --ink-100: #f4eadc;
  --ink-200: #d9c9b2;
  --ink-300: #b9a993;
  --ink-400: #8a7a66;
  --accent-ember: #c8702f; /* 稀少な暖色アクセント＝灯り */

  /* 書体 */
  --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --leading-reading: 2.05;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.2em;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

/* ===== リセット ============================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--cold-900);
  /* iOS Safari の自動文字拡大を無効化（段落ごとに勝手に拡大されるのを防ぐ） */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-serif);
  color: var(--ink-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

button { font: inherit; color: inherit; }

.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  perspective: 1500px;
  isolation: isolate;
}

/* ===== 冷たい器：建築的ホール ================================ */
.hall {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -12%, var(--cold-700), transparent 60%),
    linear-gradient(180deg, var(--cold-800) 0%, var(--cold-900) 46%, var(--cold-950) 100%);
}
/* 奥行きの床面 */
.hall__floor {
  position: absolute;
  inset: 58% 0 0 0;
  background:
    linear-gradient(180deg, transparent, rgba(8, 10, 16, 0.6)),
    linear-gradient(180deg, var(--cold-800), var(--cold-950));
  transform: perspective(700px) rotateX(58deg);
  transform-origin: top center;
  opacity: 0.7;
}
/* 規則的グリッド（無人・modernist） */
.hall__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px),
    linear-gradient(180deg, var(--hairline) 1px, transparent 1px);
  background-size: 7vw 7vw;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 36%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 36%, #000 30%, transparent 78%);
  opacity: 0.7;
}
/* 硬い一点光（天窓） */
.hall__light {
  position: absolute;
  left: 50%;
  top: -28%;
  width: 70vw;
  height: 70vw;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(207, 211, 218, 0.16), transparent 70%);
  pointer-events: none;
}

/* フィルムグレイン */
.grain {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== ワードマーク ========================================= */
.plate {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
/* 棚前・立ち読みではワードマークを退ける（戻るボタンと重ねない） */
.app[data-view="aisle"] .plate { opacity: 0; }
.plate__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: 0.16em;
  color: var(--cold-100);
  text-shadow: 0 1px 10px var(--shadow-blue);
}

/* ===== STEP1：書架カルーセル ================================= */
.rotunda {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-inout), filter 0.7s var(--ease-out);
}
.rotunda__viewport {
  position: relative;
  z-index: 1; /* 棚モノリスを足元UI/ナビより下の層に閉じ込める */
  flex: 1;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}
.rotunda__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  outline: none;
  cursor: grab;
}
.rotunda__stage.is-grabbing { cursor: grabbing; }

/* 書架モノリス（冷たい鋼鉄キャビネット） */
.monolith {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--mw, 240px);
  height: var(--mh, 460px);
  margin: calc(var(--mh, 460px) / -2) 0 0 calc(var(--mw, 240px) / -2);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.monolith__cabinet {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background:
    linear-gradient(90deg,
      var(--steel-deep) 0 3%, var(--steel-base) 8%,
      var(--steel-lit) 50%, var(--steel-base) 92%, var(--steel-deep) 97% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 8px rgba(8, 10, 16, 0.5),
    0 30px 60px -20px var(--shadow-blue);
  overflow: hidden;
}
/* 内側に温かい背表紙がぎっしり（漏れる温もり） */
.monolith__books {
  position: absolute;
  inset: 10px 14px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,
      var(--warm-a, #5b4635) 0 5px,
      var(--warm-b, #6d2225) 5px 9px,
      #2c1d12 9px 12px,
      var(--warm-c, #284f4c) 12px 18px,
      #3a2a1d 18px 21px,
      var(--warm-a, #5b4635) 21px 27px,
      #241008 27px 30px);
  box-shadow: inset 0 0 22px 6px rgba(6, 8, 14, 0.85);
  filter: brightness(0.42) saturate(0.62);
  transition: filter 0.5s var(--ease-out);
}
/* 段板（規則的な水平棚） */
.monolith__shelves {
  position: absolute;
  inset: 6px 10px;
  border-radius: 2px;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 calc(var(--gap, 88px) - 6px),
      rgba(10, 13, 20, 0.7) calc(var(--gap, 88px) - 6px) var(--gap, 88px),
      var(--steel-lit) var(--gap, 88px) calc(var(--gap, 88px) + 2px),
      rgba(8, 10, 16, 0.4) calc(var(--gap, 88px) + 2px) calc(var(--gap, 88px) + 5px));
  pointer-events: none;
}
/* ガラスの映り込み */
.monolith__glare {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0 12%, transparent 30% 70%, rgba(255, 255, 255, 0.06) 92%);
  pointer-events: none;
}
/* 中央（選択中）の棚：温もりが少し露出する */
.monolith.is-center .monolith__books { filter: brightness(0.6) saturate(0.78); }
.monolith.is-center .monolith__cabinet {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 8px rgba(8, 10, 16, 0.5),
    0 40px 80px -22px var(--shadow-blue),
    0 0 0 1px rgba(200, 112, 47, 0.18);
}

/* 左右ナビ */
.rot-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 46px;
  height: 64px;
  border: 1px solid var(--hairline-cold);
  border-radius: 2px;
  background: rgba(27, 30, 36, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cold-200);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.rot-nav:hover { background: rgba(59, 65, 76, 0.6); color: var(--cold-50); border-color: var(--cold-500); }
.rot-nav--prev { left: 10px; }
.rot-nav--next { right: 10px; }

/* 足元 UI */
.rotunda__foot {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 0 max(34px, env(safe-area-inset-bottom));
}
.rotunda__hint {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-wide);
  color: var(--cold-500);
}
.rotunda__links {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--cold-600);
}
.rotunda__links a {
  color: var(--cold-500);
  text-decoration: none;
  transition: color 0.25s;
}
.rotunda__links a:hover { color: var(--cold-100); }
.rotunda__copy {
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--cold-600, rgba(120, 128, 140, 0.7));
}

/* ===== STEP2：棚前 ========================================== */
.aisle {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.9);
  filter: saturate(0.2) brightness(1.4); /* 冷たい開始状態 */
  pointer-events: none;
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-inout), filter 0.9s var(--ease-out);
}
.aisle[hidden] { display: none; }
.aisle__chrome {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 18px 12px;
  background: linear-gradient(180deg, rgba(18, 20, 25, 0.9), transparent);
}
.aisle__back {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30;
  border: 1px solid var(--hairline-cold);
  border-radius: 2px;
  background: rgba(27, 30, 36, 0.6);
  color: var(--cold-200);
  padding: 10px 18px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: color 0.25s, border-color 0.25s;
}
.aisle__back:hover { color: var(--cold-50); border-color: var(--cold-500); }
.aisle__label {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--cold-100);
  font-size: 0.92rem;
}

/* 鋼鉄の書架フレーム＋段 */
.aisle__case {
  flex: 1;
  margin: 0 auto;
  width: min(940px, 100%);
  padding: 18px clamp(14px, 4vw, 40px) max(40px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  outline: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--cold-600) transparent;
}
.aisle__case::-webkit-scrollbar { width: 8px; }
.aisle__case::-webkit-scrollbar-thumb { background: var(--cold-600); border-radius: 8px; }

/* 一段（鋼鉄レール上に本が立つ） */
.shelf-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0;
  min-height: 178px;
  padding: 0 10px;
  margin-bottom: 26px;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(10, 13, 20, 0.5), rgba(8, 10, 16, 0.1) 30%),
    linear-gradient(180deg, var(--cold-800), var(--cold-900));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
/* 棚板（前縁の鋼鉄リップ） */
.shelf-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 7px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, var(--steel-lit), var(--steel-base) 40%, var(--steel-deep));
  box-shadow: 0 6px 14px -4px var(--shadow-blue);
}
.shelf-row::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

/* ===== 本（背表紙）— applyLook() が seed から装飾する =========== */
.book {
  position: relative;
  flex: 0 0 auto;
  width: var(--w, 26px);
  height: var(--h, 150px);
  align-self: flex-end;
  margin-right: var(--mr, 1px);
  border: none;
  padding: 0;
  border-radius: 1px 2px 0 0;
  background:
    var(--wear, linear-gradient(transparent, transparent)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0, transparent 16%, transparent 84%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, var(--c1, #5b4635), var(--c2, #6d2225) 58%, var(--c3, #33271f));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.35),
    2px 3px 7px -2px var(--shadow-key);
  filter: var(--cond, none);
  transform: rotate(var(--tilt, 0deg)) translateY(0);
  transform-origin: bottom center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s, filter 0.32s;
}
.book:hover,
.book:focus-visible {
  transform: rotate(var(--tilt, 0deg)) translateY(-14px);
  box-shadow: 2px 6px 16px -2px var(--shadow-key), 0 0 0 1px rgba(200, 112, 47, 0.3);
  filter: var(--cond, none) brightness(1.08);
  z-index: 5;
  outline: none;
}
/* 背バンド（盛り上がった綴じ目） */
.book::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bands, none);
  mix-blend-mode: overlay;
  opacity: 0.8;
  pointer-events: none;
}
/* 素材：布クロス */
.book.is-cloth {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 2px),
    var(--wear, linear-gradient(transparent, transparent)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0, transparent 16%, transparent 84%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(180deg, var(--c1, #5b4635), var(--c2, #6d2225) 58%, var(--c3, #33271f));
}
/* 素材：革（ひび＋艶） */
.book.is-leather {
  background-image:
    radial-gradient(120% 8% at 50% 12%, rgba(255, 255, 255, 0.1), transparent 60%),
    var(--wear, linear-gradient(transparent, transparent)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, var(--c1, #5b4635), var(--c2, #6d2225) 58%, var(--c3, #33271f));
}
/* 空白の背ラベル（タイトルは決して書かない） */
.book.has-label .label {
  position: absolute;
  left: 16%;
  right: 16%;
  top: var(--label-top, 30%);
  height: var(--label-h, 20%);
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(246, 239, 223, 0.82), rgba(216, 200, 170, 0.7));
  box-shadow: inset 0 0 0 0.5px rgba(80, 60, 40, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* 角の欠け */
.book.is-chipped { clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 92%); }

/* 面陳（表紙見せ・約20冊に1冊） */
.book--face {
  border-radius: 1px;
  background:
    var(--wear, linear-gradient(transparent, transparent)),
    radial-gradient(140% 100% at 28% 14%, rgba(255, 255, 255, 0.1), transparent 52%),
    linear-gradient(150deg, var(--c1, #5b4635), var(--c2, #6d2225) 60%, var(--c3, #33271f));
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.4),
    3px 5px 12px -3px var(--shadow-key);
}
.book--face::before {
  /* 空押しの飾り枠（文字なし） */
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 1px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), inset 0 0 0 3px rgba(0, 0, 0, 0.18);
  background: none;
  mix-blend-mode: normal;
  opacity: 1;
}
.book--face:hover,
.book--face:focus-visible { transform: translateY(-12px) rotate(0deg); }

/* ===== ビュー遷移：冷暖ドリーイン =========================== */
.app[data-view="aisle"] .rotunda {
  opacity: 0;
  transform: scale(1.45);
  filter: blur(7px);
  pointer-events: none;
}
.app[data-view="aisle"] .aisle {
  opacity: 1;
  transform: none;
  filter: none; /* → 温まる */
  pointer-events: auto;
}
.app[data-view="aisle"] .hall { filter: brightness(0.7); }

/* ===== 立ち読み（縦書きリーダー） ============================ */
.reader {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--cold-950), #0d0a07);
  animation: fade-in 0.4s var(--ease-out);
}
.reader[hidden] { display: none; }
.reader__chrome {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 18px 12px;
  color: var(--ink-200);
}
.reader__close {
  border: 1px solid rgba(246, 239, 223, 0.18);
  border-radius: 2px;
  background: rgba(20, 14, 10, 0.6);
  color: var(--ink-100);
  padding: 10px 18px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: border-color 0.25s, color 0.25s;
}
.reader__close:hover { border-color: var(--accent-ember); color: #fff; }
.reader__page {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.reader__paper {
  flex: 1;
  margin: 4px clamp(10px, 3vw, 40px) 8px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, var(--paper-200), var(--paper-100) 4% 96%, var(--paper-200)),
    var(--paper-100);
  box-shadow: 0 24px 60px -24px #000, inset 0 0 60px rgba(120, 90, 50, 0.08);
  overflow-x: auto;
  overflow-y: hidden;
  writing-mode: vertical-rl;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--paper-300) transparent;
}
.reader__paper::-webkit-scrollbar { height: 8px; }
.reader__paper::-webkit-scrollbar-thumb { background: var(--paper-300); border-radius: 8px; }
.reader__text {
  height: 100%;
  padding: clamp(22px, 5vw, 48px) clamp(20px, 5vw, 56px);
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.2vw + 0.8rem, 1.42rem);
  line-height: var(--leading-reading);
  letter-spacing: 0.03em;
  color: var(--paper-ink);
  text-align: justify;
}
.reader__para {
  margin: 0;
  /* 縦書きでは block 方向（＝水平）に段落が積まれる。原文に全角字下げが
     含まれるので text-indent は付けず、段落間に僅かな空きだけ与える。 */
  padding-block-start: 0.35em;
}
.reader__para:first-child { padding-block-start: 0; }
.reader__text.is-loading {
  writing-mode: horizontal-tb;
  display: grid;
  place-items: center;
  color: var(--paper-ink-soft);
  letter-spacing: var(--tracking-wide);
}
.reader__text.is-loading .reader__para { padding-block-start: 0; }
.reader__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px clamp(10px, 3vw, 40px) max(12px, env(safe-area-inset-bottom));
}
.reader__pager {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.reader__turn {
  border: 1px solid rgba(246, 239, 223, 0.18);
  border-radius: 2px;
  background: rgba(20, 14, 10, 0.6);
  color: var(--ink-100);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: border-color 0.25s, color 0.25s, opacity 0.25s;
}
.reader__turn:hover { border-color: var(--accent-ember); color: #fff; }
.reader__turn[disabled] { opacity: 0.32; pointer-events: none; }

/* ===== 蔵書カード（正体パネル） ============================= */
.reveal {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.reveal[hidden] { display: none; }
.reveal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in 0.35s var(--ease-out);
}
.reveal__card {
  position: relative;
  width: min(440px, calc(100vw - 48px));
  min-width: 0;
  flex: 0 0 auto;
  padding: 26px 28px 24px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(31, 23, 18, 0.07) 33px 34px),
    linear-gradient(180deg, var(--paper-100), var(--paper-200));
  color: var(--paper-ink);
  box-shadow: 0 40px 90px -30px #000, 0 0 0 1px rgba(31, 23, 18, 0.12);
  animation: card-in 0.5s var(--ease-out) both;
}
.reveal__card::before {
  /* 目録カードの綴じ穴 */
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 10, 16, 0.5), rgba(8, 10, 16, 0.2) 60%, transparent);
}
.reveal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(31, 23, 18, 0.25);
}
.reveal__caption {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-wider);
  font-size: 0.74rem;
  color: var(--paper-ink-soft);
}
.reveal__callno {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--paper-ink-soft);
  font-variant-numeric: tabular-nums;
}
.reveal__cardlink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(31, 23, 18, 0.4);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.reveal__cardlink:hover {
  color: var(--accent-ember);
  text-decoration-color: var(--accent-ember);
}
.reveal__titlelink {
  color: inherit;
  text-decoration: none;
  text-decoration-color: var(--accent-ember);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.reveal__titlelink:hover { text-decoration: underline; }
.reveal__body { padding: 18px 0 6px; }
.reveal__author {
  margin: 0 0 8px;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: rgba(31, 23, 18, 0.72);
}
.reveal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.reveal__tags {
  margin: 12px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--paper-ink-soft);
}
.reveal__rule {
  height: 1px;
  margin: 16px 0;
  background: repeating-linear-gradient(90deg, rgba(31, 23, 18, 0.4) 0 5px, transparent 5px 9px);
}
.reveal__progress {
  margin: 0 0 20px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--paper-ink);
}
.reveal__progress b { font-size: 1.15em; color: var(--accent-ember); }
.reveal__actions { display: flex; gap: 10px; }
.btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 2px;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.25s, border-color 0.25s, color 0.25s;
}
.btn:active { transform: translateY(1px); }
.btn--share {
  border: 1px solid rgba(31, 23, 18, 0.3);
  background: transparent;
  color: var(--paper-ink);
}
.btn--share:hover { background: rgba(31, 23, 18, 0.08); border-color: var(--paper-ink); }
.btn--next {
  border: 1px solid var(--paper-ink);
  background: var(--paper-ink);
  color: var(--paper-100);
}
.btn--next:hover { background: #000; border-color: #000; }

/* ===== ローディング ========================================= */
.loading {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--cold-900);
  transition: opacity 0.6s var(--ease-out);
}
.loading[hidden] { display: none; }
.loading.is-out { opacity: 0; pointer-events: none; }
.loading__bar {
  width: 150px;
  height: 1px;
  background: var(--cold-700);
  position: relative;
  overflow: hidden;
}
.loading__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--cold-200);
  animation: sweep 1.3s var(--ease-inout) infinite;
}
.loading p {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: var(--tracking-wide);
  color: var(--cold-500);
}

/* ===== アニメーション ======================================= */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ===== PC 拡張 ============================================== */
@media (min-width: 820px) {
  .plate__name { font-size: 1.5rem; }
  .monolith { top: 46%; }
  .rot-nav { width: 54px; height: 76px; }
  .shelf-row { min-height: 210px; }
}

/* ===== モーション軽減 ======================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.12s !important;
  }
  .rotunda, .aisle { transition-duration: 0.18s !important; }
}

/* ===== ドキュメントページ（about / privacy） =============== */
.doc {
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--cold-950), #0d0a07);
  display: flex;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 18px max(40px, env(safe-area-inset-bottom));
}
.doc__sheet {
  width: min(720px, 100%);
  background: linear-gradient(180deg, var(--paper-100), var(--paper-200));
  color: var(--paper-ink);
  border-radius: 4px;
  box-shadow: 0 30px 80px -30px #000, inset 0 0 60px rgba(120, 90, 50, 0.06);
  padding: clamp(28px, 5vw, 56px);
}
.doc__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0;
  color: var(--paper-ink);
  text-decoration: none;
}
.doc__catch {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  color: var(--paper-ink-soft);
}
.doc__rule { height: 1px; background: rgba(31, 23, 18, 0.16); margin: 24px 0 28px; }
.doc h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  margin: 0 0 18px;
}
.doc h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: 0.06em;
  margin: 30px 0 10px;
  color: var(--paper-ink);
}
.doc p, .doc li {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.95;
  color: rgba(31, 23, 18, 0.86);
}
.doc ol, .doc ul { margin: 8px 0; padding-inline-start: 1.3em; }
.doc li { margin: 4px 0; }
.doc__meta { font-size: 0.82rem; color: var(--paper-ink-soft); }
.doc a { color: var(--accent-ember); text-underline-offset: 2px; }
.doc__back {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--paper-ink-soft);
  text-decoration: none;
}
.doc__back:hover { color: var(--accent-ember); }
.doc__foot {
  margin-top: 28px;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--paper-ink-soft);
}