/* ==================================================================
   図書室(トップページ)
   横長の1枚の部屋を、横スクロールで見わたす。
   床の線を1本に決め、本棚(6段・高さ約2.4m相当=約724px)を基準に
   机・椅子・時計・植物をすべて同じ縮尺(1px≒3.3mm)で床に立たせる。
   すべてCSSで描く。画像は使わない。
   ================================================================== */
body.page-library { background: #241408; color: var(--lib-ink); }
.page-library main { max-width: none; padding: 0; }
.page-library .site-footer { margin-top: 0; }

.room { position: relative; }
.intro {
  margin: 0; font-size: 22px; font-family: var(--serif);
  color: #FBEBD2; text-shadow: 0 1px 2px rgba(40,20,5,.6);
}

/* ---- 部屋の入口の木の案内板（はじめての人が、部屋の操作を覚えずに始められる入口）----
   2026-08-15に追加。部屋の zoom(0.70) の外にあるので、字の大きさは実寸で書く。
   壁に掛けた木の板に見えるようにして、世界観を壊さないようにしている。 */
.annai { margin: 18px 0 0; }
/* カーソルを合わせたら下地と文字を入れ替える（「この本をひらく」と同じ考え方）。
   枠線は残す。入れ替えると下地が壁と近い色になって形が消えるため */

/* 画面が狭いときは、案内板を横いっぱいに広げて縦に積む
   (スマートフォンでは、これが最初に目に入る入口になる) */

/* ---- タイマーの窓(振り子時計をダブルクリックで開く) ----
   自主模擬テストの時間計り。窓は部屋の外(zoomの影響を受けない)に置いた
   浮いた窓で、上の帯をつかんで動かし、右下の角で大きさを変えられる。
   デジタルの数字だが、真鍮の枠・漆の文字盤・金の数字でアンティーク風にする。 */
.taimaa {
  position: fixed; top: 140px; right: 48px;
  width: 380px; height: 400px;   /* 自分で決める欄が増えたぶん高くした */
  /* これより小さくすると、ボタンの列が折り返して窓からはみ出す(実測) */
  min-width: 344px; min-height: 400px;
  max-width: 92vw; max-height: 92vh;
  z-index: 80;
  display: flex; flex-direction: column;
  background: linear-gradient(150deg, #8A5426 0%, #6B3E1B 45%, #4E2C12 100%);
  border: 2px solid #C9A468;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(20, 9, 2, .65), inset 0 0 0 6px rgba(60, 30, 10, .35);
  resize: both; overflow: hidden;       /* 右下の角で大きさを変えられる */
  container-type: inline-size;          /* 窓の幅に合わせて数字が大きくなる */
}
.taimaa[hidden] { display: none; }
.taimaa-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 16px;
  background: linear-gradient(180deg, #4E2C12 0%, #3A2110 100%);
  border-bottom: 1px solid rgba(201, 164, 104, .55);
  cursor: grab; user-select: none; touch-action: none;
  flex: 0 0 auto;
}
.taimaa-bar:active { cursor: grabbing; }
.taimaa-title {
  font-family: var(--serif); font-size: 18px; letter-spacing: .18em;
  color: #E0BE8A;
}
.taimaa-close {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(201, 164, 104, .5);
  background: none; color: #E0BE8A;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.taimaa-close:hover { background: rgba(201, 164, 104, .18); color: #FBEBD2; }
.taimaa-close:focus-visible { outline: 2px solid #F0C46A; outline-offset: 2px; }
/* 漆の文字盤(数字は taimaa.js が入れる) */
.taimaa-mado {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  margin: 12px 16px 8px;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255, 226, 180, .08) 0%, rgba(255, 226, 180, 0) 55%),
    linear-gradient(180deg, #241505 0%, #170D03 100%);
  border: 1px solid rgba(201, 164, 104, .5);
  border-radius: 6px;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .7);
  overflow: hidden;   /* からくりの光や部品を文字盤の中に収める */
  padding: 4px 0;
}
.taimaa-suji {
  font-family: var(--serif); font-weight: 700;
  font-variant-numeric: tabular-nums;   /* 数字の幅をそろえて、秒でガタつかない */
  font-size: 17cqw;                     /* 窓の幅の17%。窓を広げると数字も育つ */
  line-height: 1.1; letter-spacing: .04em;
  color: #F0C46A;
  text-shadow: 0 0 14px rgba(240, 196, 106, .45), 0 1px 2px rgba(0, 0, 0, .8);
}
.taimaa-owari {
  font-family: var(--serif); font-size: 7cqw; letter-spacing: .3em; text-indent: .3em;
  color: #F6DB96;
}
.taimaa-jikan .taimaa-suji, .taimaa-jikan .taimaa-owari { animation: taimaa-tenmetsu 1s step-end infinite; }
@keyframes taimaa-tenmetsu { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .taimaa-jikan .taimaa-suji, .taimaa-jikan .taimaa-owari { animation: none; }
}
/* 分の候補と操作(真鍮の札のボタン) */
.taimaa-btns, .taimaa-ugoki {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  padding: 4px 12px;
}
.taimaa-ugoki { padding-bottom: 14px; }
.taimaa-fun, .taimaa-start, .taimaa-modosu {
  min-height: 44px; padding: 4px 12px;
  font-family: var(--serif); font-size: 16px; letter-spacing: .04em;
  background: linear-gradient(180deg, #FBF4E6 0%, #EADCC0 100%);
  color: #5C3D18;
  border: 1px solid #C9A468; border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(20, 9, 2, .5);
}
.taimaa-fun:hover, .taimaa-start:hover, .taimaa-modosu:hover { background: #FFFCF4; }
.taimaa-fun:focus-visible, .taimaa-start:focus-visible, .taimaa-modosu:focus-visible {
  outline: 2px solid #F0C46A; outline-offset: 2px;
}
.taimaa-fun.erabi {
  background: linear-gradient(180deg, #6B3E1B 0%, #4E2C12 100%);
  color: #F6E7CB; border-color: #E0BE8A;
}
.taimaa-start { min-width: 130px; font-size: 18px; font-weight: 700; }
/* ---- 時間になると出てくる、英国のオルゴールのからくり ----
   オルゴール記念館の機械のイメージ: 回る猫の人形(部屋の猫と同じ影絵)・
   ピンを植えた真鍮の円筒・くし歯・歯車。全部CSSの動き(taimaa.js は出し入れだけ)。 */
.taimaa-bar-migi { display: flex; align-items: center; gap: 4px; }
.taimaa-oto {
  min-height: 44px; padding: 0 12px;
  background: none; border: 1px solid rgba(201, 164, 104, .5); border-radius: 3px;
  font-family: var(--serif); font-size: 14px; letter-spacing: .08em;
  color: #E0BE8A; cursor: pointer;
}
.taimaa-oto:hover { background: rgba(201, 164, 104, .18); color: #FBEBD2; }
.taimaa-oto[aria-pressed="false"] { opacity: .55; }
.taimaa-oto:focus-visible { outline: 2px solid #F0C46A; outline-offset: 2px; }

.taimaa-karakuri {
  position: relative;
  flex: 1 1 0;        /* 文字盤の残りの高さいっぱいに広がる */
  align-self: stretch;
  min-height: 0;
}
/* ※高さに cqh は使わない(この窓は幅だけを測る container のため、
   cqh が画面の高さ扱いになって部品が大はみ出しした。実際に起きた) */
.taimaa-karakuri[hidden] { display: none; }
/* 後光(金色のやわらかい光) */
.tk-hikari {
  position: absolute; left: 50%; top: 30%; width: 60cqw; height: 60cqw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(240, 196, 106, .30) 0%, rgba(240, 196, 106, 0) 65%);
  animation: tk-yurameki 2.6s ease-in-out infinite;
}
@keyframes tk-yurameki { 50% { opacity: .5; } }
/* 回る猫の人形(オルゴールの上でくるくる回る) */
.tk-neko {
  position: absolute; left: 50%; bottom: 46%;
  width: 17cqw; height: 17cqw; margin-left: -8.5cqw;
  background: var(--cat) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
  animation: tk-mawaru 4.2s linear infinite;
}
@keyframes tk-mawaru {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
/* 猫が乗る真鍮の台 */
.tk-dai {
  position: absolute; left: 50%; bottom: 42%;
  width: 22cqw; height: 4cqw; margin-left: -11cqw;
  border-radius: 50%;
  background: linear-gradient(180deg, #F6DB96 0%, #C9A468 45%, #8A6B3E 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
/* ピンを植えた円筒(回りながらピンが流れていく) */
.tk-shirinda {
  position: absolute; left: 8%; bottom: 18%;
  width: 62%; height: 20%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 240, 200, .55) 0 8%, transparent 9%),
    repeating-radial-gradient(circle at 0 0, rgba(60, 30, 10, .55) 0 1.2cqw, transparent 1.2cqw 3.4cqw),
    linear-gradient(180deg, #E8C87E 0%, #C9A468 40%, #7A5A2E 100%);
  background-size: auto, 7cqw 7cqw, auto;
  border: 1px solid rgba(60, 30, 10, .5);
  box-shadow: inset 0 -3px 8px rgba(60, 30, 10, .5), 0 3px 7px rgba(0, 0, 0, .5);
  animation: tk-nagareru 1.6s linear infinite;
}
@keyframes tk-nagareru {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 7cqw 0, 0 0; }
}
/* くし歯(円筒のピンをはじく板) */
.tk-kushi {
  position: absolute; left: 12%; bottom: 8%;
  width: 54%; height: 9%;
  background: repeating-linear-gradient(90deg,
    #E0BE8A 0 1.6cqw, rgba(60, 30, 10, .8) 1.6cqw 2.2cqw);
  border: 1px solid rgba(60, 30, 10, .6);
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}
/* 歯車2枚(互い違いに回る) */
.tk-haguruma {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle, #170D03 0 22%, transparent 23%),
    radial-gradient(circle, #C9A468 0 55%, transparent 56%),
    repeating-conic-gradient(#C9A468 0deg 22deg, transparent 22deg 45deg);
  animation: tk-haguruma-mawari 5s linear infinite;
}
.tk-h1 { right: 6%; bottom: 24%; width: 16cqw; height: 16cqw; }
.tk-h2 {
  right: 17%; bottom: 8%; width: 11cqw; height: 11cqw;
  animation-direction: reverse; animation-duration: 3.4s;
}
@keyframes tk-haguruma-mawari { to { transform: rotate(360deg); } }
/* からくりが出ている間は、数字を小さくし、分の候補ボタンを引っ込めて
   舞台に高さを譲る(リセットとスタートは残す。押せばからくりが引っ込む) */
.taimaa-jikan .taimaa-suji { font-size: 8cqw; }
.taimaa-jikan .taimaa-btns { display: none; }
/* パソコンの「アニメーションを表示する」がOFFのとき(prefers-reduced-motion)。
   ここは**止めない**。止めるとからくりが壊れて見える（実際に「何も動いてない」と
   指摘を受けた）。動きが苦手な人に配慮しつつ、からくりだと分かるよう
   3倍ほどゆっくりにする。点滅（下の .taimaa-jikan）だけは目に負担なので止める。 */
@media (prefers-reduced-motion: reduce) {
  .tk-neko { animation-duration: 13s; }
  .tk-shirinda { animation-duration: 5s; }
  .tk-h1 { animation-duration: 15s; }
  .tk-h2 { animation-duration: 10s; }
  .tk-hikari { animation-duration: 8s; }
}

/* 自分で分を決める欄(候補にない時間のため) */
.taimaa-jibun {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  padding: 2px 12px 4px;
}
.taimaa-jibun-label { font-size: 14px; letter-spacing: .06em; color: #E0BE8A; }
.taimaa-jibun-suji {
  width: 76px; min-height: 44px; padding: 4px 8px;
  font-family: var(--serif); font-size: 18px; text-align: right;
  color: #3A2410; background: var(--cream);
  border: 1px solid #C9A468; border-radius: 3px;
}
.taimaa-jibun-suji:focus-visible { outline: 2px solid #F0C46A; outline-offset: 2px; }
.taimaa-jibun-suji.taimaa-dame { border-color: #CE0000; background: #FDEDED; }
.taimaa-jibun-tani { font-size: 15px; color: #E0BE8A; }
.taimaa-jibun-btn {
  min-height: 44px; padding: 4px 12px;
  font-family: var(--serif); font-size: 15px; letter-spacing: .04em;
  background: linear-gradient(180deg, #FBF4E6 0%, #EADCC0 100%);
  color: #5C3D18; border: 1px solid #C9A468; border-radius: 3px; cursor: pointer;
  box-shadow: 0 2px 5px rgba(20, 9, 2, .5);
}
.taimaa-jibun-btn:hover { background: #FFFCF4; }
.taimaa-jibun-btn:focus-visible { outline: 2px solid #F0C46A; outline-offset: 2px; }
/* からくりが出ている間は、分の候補と一緒に引っ込める */
.taimaa-jikan .taimaa-jibun { display: none; }

/* 狭い画面では、窓を画面の中に収める(380pxのままだと左へはみ出す) */
@media (max-width: 480px) {
  .taimaa { top: 100px; right: 8px; max-width: calc(100vw - 16px); }
}

/* 右下の「大きさを変えられる」印(押せない飾り。実際のつまみはブラウザの角) */
.taimaa::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px;
  background: repeating-linear-gradient(135deg, rgba(224, 190, 138, .8) 0 2px, transparent 2px 5px);
  pointer-events: none;
}
/* ※ 時計(.wall-clock)の見た目は、下の「振り子時計」のところに全部まとめてある */

/* ---- 横スクロールの窓口 ---- */
/* レールを見落としても部屋をめくれるよう、床の左右端にも常設する。
   .room 内で絶対配置するため、横に長いステージと一緒には流れない。 */
.pano {
  overflow-x: auto; overflow-y: hidden;
  /* レールはHTMLの最初の描画から出しているため、標準スクロールバーも最初から隠す。
     これで読み込み後に横棒だけが消えるちらつきを防ぐ。 */
  cursor: grab;
  scrollbar-width: none;
  scrollbar-color: #8A5426 #3A2110;
}
.pano:focus-visible { outline: 3px solid #F0C46A; outline-offset: -3px; }
.pano::-webkit-scrollbar { height: 0; display: none; }
.pano::-webkit-scrollbar-track { background: #3A2110; }
.pano::-webkit-scrollbar-thumb { background: #8A5426; border-radius: 6px; }
/* JavaScriptが使えない場合だけ、topPage内の noscript が標準の横スクロールバーを戻す。 */
.pano.grabbing { cursor: grabbing; user-select: none; }

/* ---- 部屋の上の操作(真鍮のレールとつまみ。動きは pano.js) ---- */  /* レールの棒の中心(67.5px)に丸の中心を合わせる */  /* レールの棒の高さにそろえる */
/* つまみはレールの上を歩くメインクーン(ふさふさの尻尾・耳の飾り毛・胸の襟巻き) */
/* range の値を書き戻しても歩行コマが先頭へ戻らないよう、猫の絵だけを独立させる。
   left は pano.js が実際の部屋位置から更新する。操作は下の range がそのまま受け持つ。 */
/* 右向きの原画を、左へ進むときだけ中央を軸に反転する。 */
/* 操作方法にかかわらず、実際の横位置が変わっている間は6コマで歩き続ける。 */
@keyframes pano-neko-aruki {
  to { background-position: -384px 0; }
}
/* 停留所でしばらく待ったときだけ、1往復ぶん顔を洗う。 */
@keyframes pano-neko-kaoarai {
  to { background-position: -576px 0; }
}
/* 待機中の仕草。静止姿のまま小さく1回だけ跳ねる。
   向きごとに transform を書き、左向きの反転を途中で失わないようにする。 */
@keyframes pano-neko-jump-right {
  0%, 100% { transform: scaleX(1) translateY(0); }
  42% { transform: scaleX(1) translateY(-20px); }
}
@keyframes pano-neko-jump-left {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  42% { transform: scaleX(-1) translateY(-20px); }
}
/* 猫のつまみの使い方の案内(上下どちらのレールにも出す。下は1行だけ)。
   猫のとなりに矢印つきで置く。**左の位置は pano.js が猫に合わせて動かす**
   (案内はずっと出しっぱなしなので、置きっぱなしだと矢印がどこも指さなくなるため)。
   ※ レールは zoom 0.70 の中にあるので、字は大きめに書いてある */
/* 2行を縦に積む。矢印は1行目(猫と同じ高さ)に置く */
/* 2行目は添え書きなので、少し控えめにする */
/* 矢印は猫のいる側に向ける。ふだんは札が猫の右にあるので ←。
   猫が右端に近いときは札が猫の左へ回るので → に入れ替える(pano.js が付ける) */
/* 猫のどちら側にも札が入らないとき(狭い画面で猫がまん中にいるとき)は矢印を消す */
/* レールが狭くて停留所が鋲だけになるとき(.pano-byou)は、猫のとなりに置く場所が無い。
   棒の下の空きへ回す(鋲は棒の上に出るので、下は空いている)。位置は pano.js が left:4px にする */
/* 広い画面では長い文、狭い画面では短い文。画面からはみ出さないようにする。
   ※ 部屋を動かしても、消したり短くしたりはしない。ずっとこのまま出しておく
   （2026-08-15。「消す」「短い一行にする」を試したあと、ばっふぁさんの指示で
     全部そのまま残す形に決まった。迷ったらこの形に戻すこと） */

/* レールの停留所(名前は本棚の看板と同じ。長い名前は折り返す) */
/* ---- 部屋の下のレール(横スクロールバーの代わり) ----
   **上のレールと全く同じ姿**にする(猫のつまみ・◀▶・停留所・名前の札)。
   もとは名前を出さず鋲だけにして高さを抑えていたが、「上と同じにしてほしい」
   との指摘でそろえた。上書きは左右の余白だけ。
   読み上げとキーボードは今までどおり上のレールが受け持ち、下は
   aria-hidden＋tabindex=-1 のまま(同じ案内が2回読まれるのを防ぐ)。 */

/* ---- 部屋の拡大・縮小(アンティークのルーペのボタン) ----
   置き場所はヘッダーのサイト名の隣。文字が小さくて読めない人が
   まっさきに目にする場所にする。 */
.zoom {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  margin-left: 6px;  /* サイト名(とふりがな)のすぐ右隣に置く。離して右端に寄せない */
}
.zoom-btn {
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  border: 2px solid rgba(255, 214, 150, .45);
  background: #4E2C12; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(20, 9, 2, .5);
  transition: background .15s ease, opacity .15s ease;
}
.zoom-btn:hover { background: #6B3E1B; }
.zoom-btn:focus-visible { outline: 3px solid #F0C46A; outline-offset: 2px; }
.zoom-btn.at-end { opacity: .35; }
.zoom-btn svg { display: block; }
/* いまの大きさを出す真鍮の札(押すと100%に戻る) */
.zoom-now {
  min-width: 64px; height: 32px; padding: 0 10px;
  background: linear-gradient(180deg, #FBF4E6 0%, #EADCC0 100%);
  color: #5C3D18;
  border: 1px solid #C9A468; border-radius: 3px;
  font-family: var(--serif); font-size: 15px; letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(20, 9, 2, .5);
}
.zoom-now:hover { background: #FFFCF4; }
.zoom-now:focus-visible { outline: 3px solid #F0C46A; outline-offset: 2px; }
.zoom-fit {
  display: none;
  min-width: 58px; height: 44px; padding: 0 10px;
  border: 1px solid rgba(233, 193, 112, .72); border-radius: 4px;
  background: linear-gradient(180deg, #73451F, #3D210D);
  color: #FFF0C5; font-family: var(--serif); font-size: 15px; font-weight: 700;
  white-space: nowrap; cursor: pointer; box-shadow: 0 3px 8px rgba(20, 9, 2, .5);
}
.zoom-fit.is-active {
  border-color: #F0CE7E;
  background: linear-gradient(180deg, #A16C32, #603516);
  box-shadow: inset 0 0 0 2px rgba(255, 231, 172, .18), 0 3px 8px rgba(20, 9, 2, .5);
}
.zoom-fit:focus-visible { outline: 3px solid #F0C46A; outline-offset: 2px; }
.pano-fit-return[hidden] { display: none; }
.mobile-view-dialog {
  box-sizing: border-box; width: min(360px, calc(100vw - 32px));
  max-height: calc(100svh - 32px); overflow-y: auto;
  padding: 34px 22px 24px; border: 2px solid #B58A42; border-radius: 12px;
  background: linear-gradient(145deg, #523016, #291609); color: #FFF0C7;
  box-shadow: 0 12px 44px #0009; text-align: center;
}
.mobile-view-dialog::backdrop { background: #100902bd; }
.mobile-view-dialog h2 { margin: 4px 0 16px; font: 700 24px/1.5 var(--serif); }
.mobile-view-dialog p { font-size: 16px; line-height: 1.8; }
.mobile-view-dialog .mobile-view-icon { margin: 0; color: #EBC46E; font: 48px/1 sans-serif; }
.mobile-view-close {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px;
  border: 0; border-radius: 6px; background: transparent; color: #FFF0C7;
  font: 30px/1 sans-serif; cursor: pointer;
}
.mobile-view-continue, .pano-fit-return {
  min-height: 44px; padding: 10px 16px; border: 1px solid #C89E52; border-radius: 8px;
  background: linear-gradient(#764E27, #47290F); color: #FFF0C7;
  font: 700 15px/1.4 var(--serif); cursor: pointer;
}
.mobile-view-continue { width: 100%; margin-top: 8px; }
.mobile-view-close:focus-visible, .mobile-view-continue:focus-visible, .pano-fit-return:focus-visible {
  outline: 3px solid #F4D17B; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .zoom-btn { transition: none; }
}

/* 札の幅が足りないとき(pano.js が付ける)。文字は読み上げに残し、鋲だけ見せる */

/* 中くらいの画面: 停留所の名前を少し小さくして2行に収める */
@media (max-width: 860px) {
  /* 狭い画面でも右端に飛ばさない。サイト名が折り返したら、その真下に続けて置く */
  .zoom { margin-left: 0; }
  .zoom-btn { width: 44px; height: 44px; }
  /* 狭い画面では停留所の文字が重なるため、レール上の鋲だけにする
     (文字は読み上げには残る。押す範囲は鋲の下に確保) */
}
@media (max-width: 700px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width: 1000px) and (max-height: 700px) {
  .zoom-fit { display: block; }
}

/* ---- 部屋そのもの(横に長い舞台) ---- */
.stage {
  /* 部屋の絵はブラウザ100%だと大きすぎる寸法で設計してしまったので、常に70%で
     描く(JSはこの値を土台に、ルーペの倍率を掛けて上書きする)。この中のpxは
     設計時の値のまま。文字だけ約1.21倍にしてあり、掛け合わせで85%になる */
  zoom: var(--sg-stage-zoom, 0.70);
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 90px;
  /* --tenjo = 天井を持ち上げたぶん。本棚の段が増えて背が高くなったので足した。
     床に置くもの(机・映写機・窓・本棚)は下から測っているので動かない。
     壁に掛けるもの(額・カレンダー・試験日の札・時計・掲示板)は天井から測って、
     本棚のてっぺんの高さにそろえてある(--kamote)。 */
  --tenjo: 246px;
  /* 壁の掲示物の上端。ゾーンの上からの距離で、本棚のてっぺんとそろう値。
     (部屋の上端からは、この値＋stageの上の余白36px = 48px の位置になる) */
  --kamote: 12px;
  height: calc(900px + var(--tenjo));
  padding: 36px 140px 0 48px;
  /* 壁: 左は部屋の奥の暗がり、右へ行くほど窓の明かり */
  background: linear-gradient(94deg,
    #33200F 0%, #4A2C14 22%, #5C3819 44%, #6E441D 62%, #8A5A28 78%, #A97840 100%);
}
/* 壁紙の縦縞(ごく薄く) */
.stage::before {
  content: ""; position: absolute; inset: 0 0 170px 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(255,226,180,.045) 0 1px, rgba(255,226,180,0) 1px 38px);
}

/* ---- 天井の回り縁(部屋の全幅に1本。背が高くなった部屋の上の端を締める) ---- */

/* ---- 床(部屋の全幅に1本) ---- */
/* 床板の目地 */

/* ---- ゾーン共通 ---- */
.zone { position: relative; flex: 0 0 auto; height: 100%; }
/* 家具の接地影 */
.contact-shadow {
  position: absolute; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,9,2,.5) 0%, rgba(20,9,2,0) 70%);
  bottom: 96px;
}

/* ================= 壁ゾーン(額・カレンダー・試験日) ================= */
/* 額の列と、カレンダー・試験日の札の列を横に並べ、床には掛からないようにする */
.zone-wall {
  /* 幅は額の文章の量で決まる。額の列＋カレンダーの列＋すき間34px。
     文章を増やして額の列が縦に伸びると、下の「管理人」の額が床にめり込むので、
     文章を足すときは幅も一緒に広げること(使える高さは上端48pxから床976pxまでの907px)。
     800px→960pxにした(2026-08-14。サイトの紹介文を1文増やしたため) */
  width: 960px; padding-top: var(--kamote);
  display: flex; gap: 34px; align-items: flex-start;
}
/* 停留所「掲示」の目印(見た目には出ない)。pano.js の .case-plate 探索の
   フォールバックとして使う(zoneNoKijun 参照)。左端(0px)に置くことで、
   このゾーンへ移動したとき額の列が画面から見切れないようにする */
.zone-wall-shirushi { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.wall-col { flex: 1 1 0; min-width: 0; }
.wall-col-cal { flex: 0 0 330px; }
.picture-rail {
  position: absolute; top: calc(var(--kamote) - 18px); left: -26px; right: -26px; height: 7px;
  background: linear-gradient(180deg, #B07C46 0%, #8A5426 52%, #5C3617 100%);
  border-radius: 2px;
  box-shadow: 0 3px 6px rgba(20,9,2,.5);
}
/* 列のいちばん上のものだけ、上の余白を外して本棚のてっぺんに並べる */
.wall-col > :first-child { margin-top: 0; }
.wall-frame {
  position: relative;
  margin: 34px 0 0;
  padding: 17px;
  border-radius: 3px;
  background: linear-gradient(150deg, #C08A4E 0%, #9C6430 40%, #6B3E1B 100%);
  box-shadow:
    0 12px 22px rgba(20,9,2,.55),
    inset 0 0 0 2px rgba(255,214,150,.28),
    inset 0 0 0 8px rgba(60,30,10,.35);
}
.frame-wire {
  position: absolute; top: -24px; left: 50%; width: 78px; height: 26px;
  transform: translateX(-50%);
  border: 2px solid rgba(90,58,26,.85); border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.wall-frame-mat {
  background: linear-gradient(165deg, #FDF8EC 0%, #F1E6CE 100%);
  border: 12px solid #F7EFDD;
  border-radius: 2px;
  padding: 18px 22px;
  color: #3A2A1A;
  box-shadow: inset 0 0 0 1px rgba(150,115,66,.4), inset 0 2px 10px rgba(120,86,40,.16);
}
.wall-frame-mat h2 {
  margin: 0 0 11px; font-family: var(--serif); font-size: 30px;
  letter-spacing: .06em; color: #5C3D18;
  border-bottom: 1px solid #D9C7A0; padding-bottom: 10px;
}
.wall-frame-mat p { margin: 8px 0; font-size: 25.5px; line-height: 1.75; }
/* 管理人の自己紹介: 左に顔イラスト、右に名前(動画のサムネのような並び)。
   板そのものの見た目は .profile-board で作る(壁の額ではなく、床のイーゼルに載る板) */
.profile-row { display: flex; gap: 22px; align-items: center; }
.profile-icon {
  width: 145px; height: 145px; border-radius: 50%;
  border: 4px solid #F7EFDD; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(60, 30, 10, .35), 0 0 0 1px rgba(150, 115, 66, .5);
  background: #E4D4B4;
}
/* 顔イラストがまだ無いとき(丸い枠だけを置いて、並びが崩れないようにする) */
.profile-icon-nashi {
  display: block;
  background: radial-gradient(circle at 50% 38%, #D9C7A0 0%, #C4AF85 100%);
  position: relative;
}
.profile-icon-nashi::before {  /* 人の形の影 */
  content: ""; position: absolute; left: 50%; top: 26px; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: rgba(110, 87, 56, .45);
  box-shadow: 0 40px 0 -4px rgba(110, 87, 56, .45), 0 34px 0 6px rgba(110, 87, 56, .45);
}
.profile-text { min-width: 0; }
.profile-name {
  font-family: var(--serif); font-weight: 700;
  margin: 0 0 6px; font-size: 35px; letter-spacing: .06em;
}

/* 管理人の自己紹介(床置きのイーゼルスタンド。2026-08-16に壁掛けから変更)。
   写真つきの自己紹介は「壁に掛けた額」に見えず不自然、とのばっふぁさんの指摘から。
   .zone は position:relative なので、.zone-wall の床の上に絶対配置で置ける。 */
.profile-board {
  position: relative; z-index: 2;
  margin: 0 auto 96px;
  width: 100%;
  background: linear-gradient(165deg, #FDF8EC 0%, #F1E6CE 100%);
  border: 12px solid #F7EFDD;
  border-radius: 2px;
  padding: 18px 22px;
  color: #3A2A1A;
  box-shadow:
    0 12px 22px rgba(20,9,2,.55),
    inset 0 0 0 1px rgba(150,115,66,.4), inset 0 2px 10px rgba(120,86,40,.16);
}
.profile-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 11px; padding-bottom: 10px; border-bottom: 1px solid #D9C7A0;
}
.profile-board h2 {
  margin: 0; font-family: var(--serif); font-size: 30px;
  letter-spacing: .06em; color: #5C3D18; flex: 0 0 auto;
}
/* 管理人への連絡入口。リンク先にメールアドレスを置かず、フォームを開く。 */
.contact-open {
  min-height: 40px; padding: 7px 13px; border: 1px solid #8A642F; border-radius: 4px;
  font: 700 15px/1.35 var(--serif); letter-spacing: .02em; color: #FFF8E8;
  background: linear-gradient(180deg, #A9783E 0%, #70451F 100%);
  box-shadow: inset 0 1px 0 rgba(255,240,199,.35), 0 2px 3px rgba(60,30,10,.3);
  cursor: pointer;
}
.contact-open:hover, .contact-open:focus-visible {
  background: #FFF8E8; color: #5C3D18; outline: 2px solid #8A642F; outline-offset: 2px;
}
/* 自己紹介文(bio)。もとは既定の17pxのままだった(額の本文25.5pxより小さい抜け)。
   床置きになって縦の余裕もできたので、額の本文より大きい28pxに上げた(2026-08-16)。 */
.profile-board .profile-text p { margin: 8px 0; font-size: 24px; line-height: 1.65; }

/* 管理人へのメッセージ。Netlify Formsへ送信し、管理人のメールアドレスを公開しない。 */
.contact-dialog {
  width: min(calc(100vw - 32px), 680px); max-height: min(840px, calc(100vh - 32px));
  margin: auto; padding: 0; color: #3A2A1A; border: 10px solid #C08A4E; border-radius: 4px;
  background: linear-gradient(165deg, #FDF8EC 0%, #F1E6CE 100%);
  box-shadow: 0 22px 54px rgba(20,9,2,.62), inset 0 0 0 2px rgba(99,58,20,.35);
}
.contact-dialog::backdrop { background: rgba(28,13,4,.68); }
.contact-dialog-inner { position: relative; padding: 30px 34px 32px; }
.contact-dialog-close {
  position: absolute; top: 14px; right: 16px; width: 42px; height: 42px; padding: 0;
  border: 1px solid #8A642F; border-radius: 50%; font: 30px/1 sans-serif; color: #FFF8E8;
  background: #70451F; cursor: pointer;
}
.contact-dialog-close:hover, .contact-dialog-close:focus-visible { background: #FFF8E8; color: #5C3D18; outline: 2px solid #8A642F; outline-offset: 2px; }
.contact-dialog-kicker { margin: 0 0 5px; font-size: 14px; letter-spacing: .14em; color: #806039; }
.contact-dialog h2 { margin: 0 54px 12px 0; font: 700 30px/1.35 var(--serif); color: #5C3D18; }
.contact-dialog-note { margin: 0 0 20px; font-size: 16px; line-height: 1.7; }
.contact-form { display: grid; gap: 16px; }
.contact-field { display: grid; gap: 6px; font-size: 16px; font-weight: 700; }
.contact-required { margin-left: 8px; padding: 1px 6px; border-radius: 3px; font-size: 12px; color: #FFF8E8; background: #8E2F2F; }
.contact-field input, .contact-field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #9C8057; border-radius: 4px;
  background: rgba(255,255,255,.8); color: #2D2115; font: 16px/1.55 'Noto Sans JP', sans-serif;
}
.contact-field textarea { min-height: 150px; resize: vertical; }
.contact-field input:focus, .contact-field textarea:focus { outline: 3px solid rgba(151,105,45,.4); border-color: #6B3E1B; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 画面には出さず、読み上げソフトと検索エンジンにだけ伝える見出し。
   display:none だと読み上げからも消えるので、1pxに畳んで隠す。 */
.yomiage-dake {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.contact-privacy { margin: 0; padding: 12px 14px; border-left: 4px solid #A8783E; background: rgba(232,216,184,.52); font-size: 14px; line-height: 1.65; }
.contact-actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.contact-submit, .contact-cancel {
  min-height: 44px; padding: 9px 20px; border: 1px solid #6B3E1B; border-radius: 4px;
  font: 700 16px/1.35 var(--serif); cursor: pointer;
}
.contact-submit { color: #FFF8E8; background: linear-gradient(180deg, #A9783E 0%, #70451F 100%); }
.contact-cancel { color: #5C3D18; background: #FFF8E8; }
.contact-submit:hover, .contact-submit:focus-visible { background: #5C3617; outline: 2px solid #8A642F; outline-offset: 2px; }
.contact-cancel:hover, .contact-cancel:focus-visible { background: #EAD9B8; outline: 2px solid #8A642F; outline-offset: 2px; }
@media (max-width: 620px) {
  .profile-heading { align-items: flex-start; flex-direction: column; }
  .contact-open { width: 100%; font-size: 14px; }
  .contact-dialog-inner { padding: 26px 20px 24px; }
  .contact-dialog h2 { font-size: 26px; }
}

/* カレンダー(中身は koyomi.js が入れる) */
.wall-calendar {
  position: relative; margin: 30px auto 0; width: 330px;
  padding: 19px 18px 17px;
  border-radius: 4px;
  background: linear-gradient(150deg, #C08A4E 0%, #9C6430 42%, #6B3E1B 100%);
  box-shadow:
    0 12px 22px rgba(20,9,2,.55),
    inset 0 0 0 2px rgba(255,214,150,.26),
    inset 0 0 0 7px rgba(60,30,10,.32);
}
.wall-calendar[hidden] { display: none; }
.cal-ring {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  width: 27px; height: 27px; border-radius: 50%;
  border: 4px solid #8E6B26; border-bottom-color: transparent;
}
.cal-paper {
  background: linear-gradient(168deg, #FDF8EC 0%, #F0E4CB 100%);
  border-radius: 2px; padding: 14px 14px 17px;
  color: #3A2A1A; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(150,115,66,.42), inset 0 2px 10px rgba(120,86,40,.16);
}
.cal-day-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--serif);
  box-sizing: border-box;
  text-decoration: none;
}
.cal-day-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  width: 100%;
  color: #6C4B27;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.cal-year { color: #7C2F2A; }
.cal-month b { color: #7C2F2A; font-size: 1.5em; }
.cal-day-number {
  margin-top: 4px;
  color: #5D201C;
  font-size: 112px;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.cal-weekday {
  margin-top: 5px;
  color: #4B3925;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .16em;
}
.cal-weekday.sun { color: #A5342B; }
.cal-weekday.sat { color: #2E5B7A; }
.cal-month { margin: 0; font-family: var(--serif); font-weight: 700; color: #7C2F2A; line-height: 1; font-size: 27px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-w { font-size: 20.5px; font-weight: 700; color: #6B5233; padding-bottom: 5px; }
.cal-d { font-size: 21px; line-height: 1.9; color: #3A2A1A; border-radius: 50%; }
.cal-w.sun, .cal-d.sun { color: #A5342B; }
.cal-w.sat, .cal-d.sat { color: #2E5B7A; }

/* 試験日の木の札 */
.exam-plate {
  position: relative; margin: 40px auto 0; width: 330px;
  padding: 17px 20px 20px; text-align: center;
  border-radius: 4px;
  background: linear-gradient(160deg, #8A5426 0%, #6B3E1B 60%, #5C3617 100%);
  box-shadow:
    0 10px 18px rgba(20,9,2,.55),
    inset 0 0 0 2px rgba(255,214,150,.24),
    inset 0 0 0 5px rgba(60,30,10,.4);
  color: #F6E7CB;
}
.exam-plate::before {  /* 吊り紐 */
  content: ""; position: absolute; top: -20px; left: 50%; width: 88px; height: 24px;
  transform: translateX(-50%);
  border: 2px solid rgba(90,58,26,.9); border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* ※「第39回 社会福祉士国家試験」を1行で収める上限(実測21.5px。22pxで「試/験」に折れる)。
   ここだけは85%の計算値(23px)を使わず、札に収まる大きさを優先する */
.exam-label { margin: 0; font-size: 21.5px; letter-spacing: .06em; color: #E0BE8A; }
.exam-date { margin: 4px 0 0; font-family: var(--serif); font-size: 29px; font-weight: 700; }
.exam-days { margin: 9px 0 0; font-family: var(--serif); font-size: 25.5px; }
.exam-days b { font-size: 44px; color: #F0C46A; letter-spacing: .04em; }
.exam-days b.exam-today { font-size: 30px; }
.exam-days:empty { display: none; }

/* ================= 本棚ゾーン =================
   本棚は資格・テーマごとに1台(data/site.json の shelves の並びどおり)。
   開いている棚=6段・高さ約2.4m相当=約724px、幅約2.1m相当=660px。
   準備中の棚=低めの4段・幅400px。
   1段の内のりは約33cm(=104px)で、並ぶ本は高さ64〜102px(約21〜34cmの大判)。 */
.zone-case { padding-bottom: 120px; display: flex; align-items: flex-end; }
.cs-case { left: 4%; right: 4%; bottom: 100px; }

.bookcase {
  position: relative;
  width: 660px;
  background: linear-gradient(96deg, #5C3617 0%, #7A4A20 46%, #A96C33 100%);
  border: 11px solid #4E2C12;
  border-bottom-width: 15px;
  border-radius: 4px;
  box-shadow:
    0 10px 26px rgba(30,14,4,.5),
    inset 0 0 0 3px rgba(255,200,140,.14);
  padding: 10px;
  display: grid;
  gap: 10px;
}
/* 右から差す光を棚にもうっすら */
.bookcase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px; z-index: 2;
  background: linear-gradient(104deg, rgba(255,236,190,0) 52%, rgba(255,240,200,.12) 76%, rgba(255,244,214,.2) 100%);
}
.bookcase .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; position: relative; z-index: 1; }
/* 拡大した本を持ち上げているあいだは、その段を下の段より手前にする。
   段は横一列(1fr)しか置けないので、隣の段と重なるのは上下だけ。
   これが無いと、上の段の本の説明札(下へ回った側)が次の段の本に隠れて読めない。 */
.bookcase .row:has(.spine:hover), .bookcase .row:has(.spine:focus-visible) { z-index: 4; }

.cell {
  background: linear-gradient(180deg, #2E1A0B 0%, #4A2C13 22%, #5C3819 100%);
  border-radius: 2px;
  padding: 6px 10px 0;
  position: relative;
  display: flex; align-items: flex-end; gap: 6px;
  min-width: 0;
  min-height: 104px;
  box-shadow:
    inset 0 12px 16px rgba(20,9,2,.72),
    inset 8px 0 14px rgba(20,9,2,.45),
    inset -8px 0 14px rgba(20,9,2,.28);
}
.cell::after {  /* 棚板 */
  content: ""; position: absolute; left: -6px; right: -6px; bottom: -8px;
  height: 11px; border-radius: 2px;
  background: linear-gradient(180deg, #C08A4E 0%, #8A5426 46%, #5C3617 100%);
  box-shadow: 0 3px 6px rgba(20,9,2,.5);
}
.books { display: flex; align-items: flex-end; gap: 2px; min-width: 0; overflow: hidden; }

/* 飾りの本 */
.deco {
  --deco-base: #6B4B2B;
  border-radius: 2px 2px 0 0; flex: 0 0 auto;
  background:
    linear-gradient(90deg, rgba(54,26,8,.28) 0%, rgba(255,236,186,.16) 18%, transparent 42%, rgba(24,11,3,.24) 100%),
    repeating-linear-gradient(0deg, rgba(255,244,207,.07) 0 1px, rgba(70,35,12,.025) 1px 4px),
    var(--deco-base);
  background-blend-mode: multiply, soft-light, normal;
  border-left: 1px solid rgba(255,231,178,.26);
  box-shadow: inset -3px 0 0 rgba(0,0,0,.3), inset 2px 0 0 rgba(255,255,255,.12), 0 1px 2px rgba(20,9,2,.22);
}
.frame {
  flex: 0 0 auto; width: 52px; height: 64px; align-self: flex-end; margin-bottom: 2px;
  background: linear-gradient(160deg, #FBF4E6 0%, #E4D4B4 100%);
  border: 6px solid #B4783C; border-radius: 2px;
  box-shadow: 0 2px 5px rgba(20,9,2,.5), inset 0 0 0 2px rgba(120,70,30,.35);
  display: inline-block;
}
/* 本を支えるブックエンド(近衛兵・英国風の王様・女王)。
   通常の姿と仕草の姿を同じ位置に重ね、棚板から浮かせずに切り替える。 */
.bookend-figure {
  position: relative; flex: 0 0 auto; align-self: flex-end; display: block; cursor: pointer;
  width: 90px; height: 250px;
  transform: scale(1.6) translateY(4px); transform-origin: center bottom;
  /* 人形の再描画をこの枠内に閉じ込め、棚板や本の色を巻き込ませない。 */
  contain: layout paint style; isolation: isolate;
}
.bookend {
  position: absolute; inset: 0; display: block; width: 90px; height: 250px;
  object-fit: contain; object-position: center bottom;
  /* 透明PNGの影をGPU合成しない。仕草時に棚の色調が変わるのを防ぐ。 */
  filter: none; transform: none;
}
/* 両方の姿を同じ棚内レイヤーに保持し、準備完了後に透明度だけを即時に切り替える。
   display:noneからの再描画や、輪郭マスクの初回読込による一瞬の空白を防ぐ。 */
.bookend-idle { opacity: 1; }
.bookend-gesture { opacity: 0; pointer-events: none; }
.bookend-figure.is-gesturing .bookend-idle { opacity: 0; }
.bookend-figure.is-gesturing .bookend-gesture { opacity: 1; }
/* アンティーク版は元の透明素材を輪郭マスクとして残す。
   これにより生成画像の背景を棚へ持ち込まず、旧版へも画像参照だけですぐ戻せる。 */
.bookend-figure-ou .bookend-idle {
  -webkit-mask: url("../images/bookend-king.webp") center bottom / contain no-repeat;
  mask: url("../images/bookend-king.webp") center bottom / contain no-repeat;
}
.bookend-figure-ou .bookend-gesture {
  -webkit-mask: url("../images/bookend-king-banzai.webp") center bottom / contain no-repeat;
  mask: url("../images/bookend-king-banzai.webp") center bottom / contain no-repeat;
}
.bookend-figure-joou .bookend-idle {
  -webkit-mask: url("../images/bookend-queen.webp") center bottom / contain no-repeat;
  mask: url("../images/bookend-queen.webp") center bottom / contain no-repeat;
}
.bookend-figure-joou .bookend-gesture {
  -webkit-mask: url("../images/bookend-queen-curtsy.webp") center bottom / contain no-repeat;
  mask: url("../images/bookend-queen-curtsy.webp") center bottom / contain no-repeat;
}
/* 王女の生成素材は王様より横長で透明余白も広いため、同じ90px枠では背が低く見える。
   画像幅だけを補正し、中心と足元を保ったまま王冠の高さを王様と揃える。 */
.bookend.bookend-joou {
  left: -8px;
  right: auto;
  width: 106px;
  max-width: none;
}
/* クリックすると小さな仕掛けが動く対象。黄色い感嘆符で押せることを伝える。 */
.gimmick-clickable,
.shelf-carriage.gimmick-clickable {
  /* ギミック共通の約束。後続の部屋別cursor指定より常に優先する。 */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 C8 2 3 8 3 16 s5 14 13 14 13-6 13-14S24 2 16 2Z' fill='%23FFD84D' stroke='%23552F05' stroke-width='2'/%3E%3Cpath d='M13 8h6l-1 11h-4L13 8Z' fill='%23552F05'/%3E%3Ccircle cx='16' cy='23.5' r='2.2' fill='%23552F05'/%3E%3C/svg%3E") 16 16, pointer !important;
}

/* 押せる本・札・ギミックへ入った瞬間、真鍮色の光輪がカーソルへ収束する。 */
.pointer-converge-cue {
  position: fixed;
  z-index: 10040;
  left: 0;
  top: 0;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 2px solid rgba(255, 222, 111, .94);
  border-radius: 50%;
  box-shadow:
    0 0 0 4px rgba(93, 55, 10, .48),
    0 0 18px rgba(255, 204, 75, .84),
    inset 0 0 12px rgba(255, 235, 157, .38);
  opacity: 0;
  pointer-events: none;
  transform: scale(2.5);
  transform-origin: center;
  will-change: left, top, transform, opacity;
}
.pointer-converge-cue::before,
.pointer-converge-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  translate: -50% -50%;
}
.pointer-converge-cue::before {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 242, 184, .88);
  box-shadow: 0 0 8px rgba(255, 217, 91, .66);
}
.pointer-converge-cue::after {
  width: 6px;
  height: 6px;
  background: #FFE978;
  box-shadow: 0 0 10px 3px rgba(255, 215, 79, .78);
}
.pointer-converge-cue.is-converging {
  animation: pointer-cue-converge 2.4s cubic-bezier(.18,.66,.22,1) forwards;
}
@keyframes pointer-cue-converge {
  0% { opacity: 0; transform: scale(2.5); filter: brightness(1.08); }
  14% { opacity: 1; }
  78% { opacity: .94; }
  100% { opacity: 0; transform: scale(.12); filter: brightness(1.42); }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .pointer-converge-cue { display: none !important; }
}

/* ローカル検証用の文字・時計・ギミック配置調整。gimmick-layout.js が
   127.0.0.1 / localhost の ?verify=layout でだけ有効にする。 */
.sg-gimmick-layout-applied {
  translate: var(--sg-gimmick-x, 0px) var(--sg-gimmick-y, 0px);
  rotate: var(--sg-gimmick-rotation, 0deg);
  scale: var(--sg-gimmick-scale, 1);
}

/* Netlify Identityで本人確認した管理人だけが入る、公開配置の編集・公開室。 */
.admin-room-page {
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #5D3517 0%, #241005 55%, #120805 100%);
}
.admin-room { max-width: 820px; margin: 0 auto; padding: 70px 22px 94px; }
.admin-room-card {
  padding: clamp(26px, 5vw, 54px);
  border: 2px solid #C79439;
  border-radius: 10px;
  color: #3A2515;
  background: repeating-linear-gradient(0deg, rgba(106,66,25,.035) 0 1px, transparent 1px 4px), #FFF7E4;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .62), inset 0 0 0 6px rgba(191, 139, 55, .15);
}
.admin-room-kicker { margin: 0; color: #8A6028; font: 700 12px/1.4 "Noto Serif JP", serif; letter-spacing: .16em; }
.admin-room h1 { margin: 9px 0 18px; color: #603510; font-size: clamp(27px, 5vw, 44px); }
.admin-room h2 { margin: 28px 0 10px; color: #603510; font-size: 20px; }
.admin-room p { line-height: 1.85; }
.admin-room-status { padding: 12px 15px; border-left: 4px solid #B77A25; background: rgba(239, 214, 160, .45); }
.admin-room-form { display: grid; gap: 14px; max-width: 510px; }
.admin-room-form label { display: grid; gap: 5px; color: #56320F; font-weight: 700; }
.admin-room-form input { min-height: 42px; padding: 7px 10px; border: 1px solid #9C6C2A; border-radius: 4px; background: #FFFDF6; color: #2E1C0C; font: inherit; }
.admin-room-form button,
.admin-room-open,
.admin-room-logout button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid #8D5B20;
  border-radius: 4px;
  color: #FFF6DA;
  background: linear-gradient(#8C5922, #4A280D);
  box-shadow: inset 0 0 0 1px rgba(255,225,151,.25), 0 2px 5px rgba(25,10,2,.32);
  font: 700 15px/1.3 "Noto Sans JP", sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.admin-room-open { margin-top: 4px; }
.admin-room-logout { display: inline-block; margin: 0 0 0 10px; }
.admin-room-note { color: #725127; font-size: 13px; }
.admin-room [hidden] { display: none !important; }
.sg-gimmick-layout-panel {
  position: fixed;
  z-index: 10020;
  top: 12px;
  left: 50%;
  width: min(940px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 3px solid #D5A94D;
  border-radius: 8px;
  color: #3B2411;
  background: linear-gradient(150deg, #FFF8E7, #EBCF96);
  box-shadow: 0 12px 36px rgba(10, 4, 1, .72), inset 0 0 0 2px rgba(255,255,255,.58);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  translate: -50% 0;
}
.sg-gimmick-layout-panel[hidden],
.sg-gimmick-layout-overlay[hidden] { display: none; }
.sg-gimmick-layout-panel > strong {
  display: block;
  margin-bottom: 8px;
  color: #6A3B12;
  font-size: 18px;
  letter-spacing: .08em;
}
.sg-gimmick-layout-panel-title {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.sg-gimmick-layout-panel-title::after {
  content: "✥ ドラッグで移動";
  float: none;
  margin: 1px 0 0;
  color: #8A642F;
  font: 700 12px/1.4 "Noto Sans JP", sans-serif;
  letter-spacing: .04em;
}
.sg-gimmick-layout-panel.is-panel-dragging .sg-gimmick-layout-panel-title { cursor: grabbing; }
.sg-gimmick-layout-select { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sg-gimmick-layout-room-select,
.sg-gimmick-layout-category-select { margin-bottom: 7px; }
.sg-gimmick-layout-select select {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #9F6D2B;
  border-radius: 4px;
  background: #FFFCF2;
  color: #38210E;
  font: inherit;
}
.sg-gimmick-layout-fields,
.sg-gimmick-layout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}
.sg-gimmick-layout-fields label { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.sg-gimmick-layout-fields input {
  width: 76px;
  min-height: 32px;
  padding: 3px 6px;
  border: 1px solid #AA7934;
  border-radius: 3px;
  background: #FFFDF7;
  color: #2F1B0B;
  font: inherit;
}
.sg-gimmick-layout-text-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
}
.sg-gimmick-layout-text-editor[hidden] { display: none; }
.sg-gimmick-layout-text-editor input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid #AA7934;
  border-radius: 3px;
  background: #FFFDF7;
  color: #2F1B0B;
  font: inherit;
}
.sg-gimmick-layout-actions button,
.sg-gimmick-layout-move,
.sg-gimmick-layout-resize,
.sg-gimmick-layout-rotate {
  border: 1px solid #8D5B20;
  border-radius: 3px;
  color: #FFF4D4;
  background: linear-gradient(#885621, #4A280D);
  box-shadow: inset 0 0 0 1px rgba(255,225,151,.25), 0 2px 5px rgba(25,10,2,.32);
  font: 700 13px/1.3 "Noto Sans JP", sans-serif;
  cursor: pointer;
}
.sg-gimmick-layout-actions button { min-height: 34px; padding: 5px 10px; }
.sg-gimmick-layout-values { margin: 7px 0 0; color: #725127; font-size: 12px; }
.sg-gimmick-layout-overlay {
  position: fixed;
  z-index: 10010;
  box-sizing: border-box;
  border: 3px dashed #FFD84D;
  background: rgba(255, 216, 77, .08);
  box-shadow: 0 0 0 2px rgba(55, 30, 3, .92), 0 0 18px rgba(255, 216, 77, .82);
  pointer-events: none;
}
.sg-gimmick-layout-move {
  position: absolute;
  left: 50%;
  top: -100px;
  max-width: min(440px, 78vw);
  min-height: 30px;
  padding: 4px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  translate: -50% 0;
  pointer-events: auto;
  cursor: move;
}
.sg-gimmick-layout-resize,
.sg-gimmick-layout-rotate {
  /* 細い時計針や文字の位置合わせを隠すため、丸型ハンドルは表示しない。
     大きさと角度は上の数値欄、位置はドラッグと矢印キーで調整できる。 */
  display: none;
}
.is-gimmick-layout-adjusting [data-sg-layout-key] { cursor: move; }
/* 調整中は部屋単位の強制スナップを止め、選択対象を画面中央に留める。 */
.is-gimmick-layout-adjusting .pano { scroll-snap-type: none !important; }
.is-gimmick-layout-adjusting [data-sg-layout-key]:hover {
  outline: 2px dotted rgba(255, 216, 77, .72) !important;
  outline-offset: 2px;
}
.is-gimmick-layout-adjusting .is-sg-layout-selected {
  outline: 4px solid #FFD84D !important;
  outline-offset: 4px;
}
@media (max-width: 720px) {
  .sg-gimmick-layout-panel { top: 4px; width: calc(100vw - 8px); max-height: 45vh; overflow: auto; }
  .sg-gimmick-layout-fields input { width: 62px; }
}
/* 共通科目の固定棚に置く中世英国風の木彫り馬車。
   車体は一枚絵、車輪は独立した完全な円形画像なので、車輪だけをその場で回せる。 */
.shelf-carriage {
  position: relative; flex: 0 0 540px; width: 540px; height: 260px;
  align-self: flex-end; display: block; overflow: visible; margin: 0 auto 3px; cursor: pointer;
  filter: drop-shadow(2px 4px 4px rgba(20,9,2,.62));
  /* 6枚の馬車素材がそろうまで枠だけを確保する。読み込み途中の半分表示を防ぐ。 */
  visibility: hidden;
}
.shelf-carriage.is-ready { visibility: visible; }
.shelf-carriage-main {
  position: absolute; inset: 0; z-index: 2; display: block;
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  pointer-events: none;
}
/* 1頭立て馬車は車体・御者・馬体上部を固定し、通常・左足前・右足前の脚だけを瞬間切替する。 */
/* 馬の蹄と車輪の接地面を同じ高さにする。車輪は動かさず、馬車の絵だけを下げる。 */
.shelf-carriage-onehorse .shelf-carriage-main { transform: translateY(14px); }
.shelf-carriage-fixed { z-index: 3; visibility: visible; }
.shelf-carriage-legs { z-index: 2; visibility: hidden; }
.shelf-carriage-legs-idle { visibility: visible; }
/* 御者は胴体・頭・座り位置を固定し、両腕と長い鞭だけを小さく上へ動かす。 */
.shelf-carriage-coach { z-index: 4; visibility: hidden; }
.shelf-carriage-coach-idle { visibility: visible; }
.shelf-carriage-onehorse .shelf-carriage-coach-whip { transform: translateY(8px); }
/* 猫の歩行と同じく、複数コマを一定のテンポで切り替える。車体にはアニメーションを一切掛けない。 */
.shelf-carriage.is-driving .shelf-carriage-legs-idle,
.shelf-carriage.is-driving .shelf-carriage-coach-idle { animation: carriage-onehorse-idle 1s steps(1, end) 2 both; }
.shelf-carriage.is-driving .shelf-carriage-legs-walk-a { animation: carriage-onehorse-walk-a 1s steps(1, end) 2 both; }
.shelf-carriage.is-driving .shelf-carriage-legs-walk-b { animation: carriage-onehorse-walk-b 1s steps(1, end) 2 both; }
.shelf-carriage.is-driving .shelf-carriage-coach-whip { animation: carriage-coach-whip 1s steps(1, end) 2 both; }
@keyframes carriage-onehorse-idle {
  0%, 24.9%, 50%, 74.9%, 100% { visibility: visible; }
  25%, 49.9%, 75%, 99.9% { visibility: hidden; }
}
@keyframes carriage-onehorse-walk-a {
  0%, 24.9%, 50%, 100% { visibility: hidden; }
  25%, 49.9% { visibility: visible; }
}
@keyframes carriage-onehorse-walk-b {
  0%, 74.9%, 100% { visibility: hidden; }
  75%, 99.9% { visibility: visible; }
}
@keyframes carriage-coach-whip {
  0%, 24.9%, 50%, 74.9%, 100% { visibility: hidden; }
  25%, 49.9%, 75%, 99.9% { visibility: visible; }
}
.shelf-carriage-wheel {
  position: absolute; z-index: 1; display: block; height: auto; aspect-ratio: 1;
  transform-origin: 50% 50%; pointer-events: none;
}
/* 前輪は小さく御者のすぐ後ろ、後輪は大きく車体後部へ。左右の輪郭に十分なすき間を設け、重なりをなくす。 */
.shelf-carriage-onehorse .shelf-carriage-wheel-front { left: 43%; bottom: -1%; width: 20%; }
.shelf-carriage-onehorse .shelf-carriage-wheel-back { left: 70%; bottom: -3%; width: 28%; }
.shelf-carriage.is-driving .shelf-carriage-wheel { animation: carriage-wheel-spin 2s linear both; will-change: transform; }
@keyframes carriage-wheel-spin { from { transform: rotate(0deg); } to { transform: rotate(-720deg); } }
@media (prefers-reduced-motion: reduce) {
  .shelf-carriage.is-driving .shelf-carriage-wheel,
  .shelf-carriage.is-driving .shelf-carriage-legs-idle,
  .shelf-carriage.is-driving .shelf-carriage-legs-walk-a,
  .shelf-carriage.is-driving .shelf-carriage-legs-walk-b,
  .shelf-carriage.is-driving .shelf-carriage-coach-idle,
  .shelf-carriage.is-driving .shelf-carriage-coach-whip { animation: none; }
}
/* 札つきのブックエンド。札をこの位置から出すための入れもの
   (中の svg は上の .bookend のまま。枠は場所を取らない) */
.bookend-waku {
  position: relative; flex: 0 0 auto; align-self: flex-end;
  display: block; width: 90px; height: 250px;
}
.stack { flex: 0 0 auto; display: flex; flex-direction: column-reverse; gap: 2px; align-self: flex-end; }
.lay {
  --deco-base: #6B4B2B;
  display: block; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,239,194,.28), transparent 45%, rgba(35,16,4,.25)), var(--deco-base);
  background-blend-mode: soft-light, normal;
  border-left: 1px solid rgba(255,233,183,.3);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 1px 1px rgba(20,9,2,.25);
}
.plant { flex: 0 0 auto; align-self: flex-end; display: block; filter: drop-shadow(0 2px 4px rgba(20,9,2,.5)); }
/* 福祉・介護×AI の棚の飾り段に置く小物(レトロなパソコン・ブリキのロボット)。
   いまふうの機械にすると部屋から浮くので、どちらも古い時代の機械として描いてある */
.komono-pc, .komono-robot {
  flex: 0 0 auto; align-self: flex-end; display: block;
  filter: drop-shadow(0 2px 5px rgba(20,9,2,.55));
}
/* 窓辺の低い棚の上の鉢植えだけ大きく(本棚の飾り段の鉢植えは小さいまま) */
.sideboard-top .plant { width: 96px; height: 138px; }
.photo-stand {
  flex: 0 0 auto; align-self: flex-end; display: block;
  transform: rotate(-2deg);
  filter: drop-shadow(0 2px 5px rgba(20,9,2,.55));
}

/* 最上段(小物とフォトスタンドの段) */
.cell-kazari { justify-content: space-between; padding-left: 16px; padding-right: 16px; }
.cell-kazari .books { width: auto; }

/* 段の札(棚板の手前のラベル。棚板の真ん中に乗せる)。
   2026-08-14にばっふぁさんの指示で右端から左詰めに変えた。
   段の途中でブックエンドを挟んで中身が切り替わるときは、
   その位置にもう1枚の札(.shelf-plate-naka)が出る */
.shelf-plate {
  position: absolute; bottom: -15px; left: 20px;
  background: linear-gradient(180deg, #FBF4E6 0%, #EADCC0 100%);
  color: #5C3D18;
  border: 1px solid #C9A468; border-radius: 3px;
  font-size: 28px; letter-spacing: .08em; padding: 4px 19px;
  /* 1行の札なので行間を詰める。札は下端で位置が決まっているため、
     高さを詰めると上端が下がり、背表紙の題字にかぶらなくなる。
     ※「過去問（共通科目）」のように札が長いと、本の多い段では
     すき間に収まりきらず本の上に伸びる。下は次の段の本まで1pxしか
     余裕がないので、下げるのではなく高さで逃がしている */
  line-height: 1.15;
  box-shadow: 0 2px 5px rgba(20,9,2,.5);
  z-index: 3;
  white-space: nowrap;
}
/* 段の途中の札(ブックエンドの足もとから右へ伸びる)。
   ブックエンドは高さ250px・本は260pxで、下端は同じ棚板なので
   段の札と同じ -15px でそろう */
.shelf-plate-naka { left: 0; right: auto; }
.books.main-books { gap: 5px; width: 100%; overflow: visible; }  /* 本を持ち上げたとき頭が切れないように */
.fill {
  flex: 1 1 0; min-width: 0; width: 0; overflow: hidden;
  display: flex; align-items: flex-end; gap: 2px;
}

/* 棚の看板(上枠の中央の札)。棚が大きくなったのに合わせて、本の題字(22px)より
   大きな24pxにし、上枠の真ん中に乗るように置いた */
.case-plate {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #FBF4E6 0%, #EADCC0 100%);
  color: #5C3D18;
  border: 2px solid #C9A468; border-radius: 4px;
  font-family: var(--serif); font-weight: 700;
  font-size: 29px; letter-spacing: .12em; padding: 5px 30px;
  box-shadow: 0 4px 9px rgba(20, 9, 2, .55);
  z-index: 4; white-space: nowrap;
}
.case-plate-soon {
  margin-left: 14px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 20.5px; font-weight: 400; letter-spacing: .08em;
  color: #6E5233; border: 1px solid #C9A468; border-radius: 3px;
  padding: 1px 9px; vertical-align: 3px;
}
/* 準備中の棚(低めの4段) */
.bookcase-soon { width: 640px; }

/* 背の高い段(本の段と同じ高さにそろえる) */
.cell-takai { min-height: 266px; }

/* 準備中の段(札とカードだけの静かな棚) */
.cell-soon { gap: 12px; padding-left: 16px; }
.soon-card {
  flex: 0 0 auto; align-self: flex-end; margin-bottom: 2px;
  background: linear-gradient(180deg, #FBF4E6 0%, #E4D4B4 100%);
  color: #5C4A2E;
  border: 1px solid #B39A6E; border-radius: 2px;
  font-size: 23px; letter-spacing: .14em; padding: 10px 18px 9px;
  transform: rotate(-2.5deg);
  box-shadow: 0 2px 5px rgba(20,9,2,.5);
}
.dim-fill { opacity: .85; }

/* 背表紙
   本そのものは小さいままにして、カーソルを合わせた1冊だけを
   手前に持ち上げて拡大する(棚から抜き出したような見え方)。
   拡大は transform なので、まわりの本の位置はずれない。 */
.spine {
  --spine-base: #795536;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.3;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-weight: 600; font-size: 27px; letter-spacing: .02em;
  border: none; cursor: pointer; padding: 8px 0;
  border-radius: 2px 2px 0 0;
  text-decoration: none;
  position: relative; isolation: isolate;
  background:
    linear-gradient(90deg, rgba(52,25,7,.34) 0%, rgba(255,237,189,.18) 17%, rgba(255,247,211,.06) 45%, rgba(26,11,3,.3) 100%),
    repeating-linear-gradient(0deg, rgba(255,247,214,.075) 0 1px, rgba(73,38,13,.03) 1px 5px),
    linear-gradient(106deg, rgba(255,225,160,.08), transparent 40%, rgba(41,17,4,.15)),
    var(--spine-base);
  background-blend-mode: multiply, soft-light, overlay, normal;
  border-left: 1px solid rgba(255,232,180,.28);
  border-right: 1px solid rgba(39,17,4,.3);
  box-shadow:
    inset -3px 0 4px rgba(0,0,0,.34),
    inset 2px 0 0 rgba(255,255,255,.16),
    inset 0 0 0 1px rgba(255,221,153,.09),
    0 2px 5px rgba(20,9,2,.4);
  /* 影のアニメーションは棚段そのものを描き直すので使わない。
     transform だけは合成で済むため、ゆっくり動かしてよい。 */
  outline: 2px solid transparent; outline-offset: 2px;
  transition: transform .24s ease;
  flex: 0 0 auto;
}
/* 背表紙の題字は、必ずこの包みに入れて置く。
   .spine は flex の箱なので、題字を直に置くと、数字を正立させる .tcy の
   包みが「別々の部品」として並んでしまい、題字がばらばらに崩れる（実際に起きた）。
   ひとつの部品にまとめれば、中はふつうの文章として組まれ、| の改行も効く。
   取り出した本の表紙（.pulled-book span・.book-cover span）が最初から
   包んであるのは同じ理由。 */
.spine-moji {
  position: relative; z-index: 1; max-height: 100%;
  text-shadow: 0 1px 0 rgba(255,246,218,.18), 0 -1px 1px rgba(35,15,4,.24);
}
/* 長い題名を指定どおり2行にまとめる本だけ、縦方向に収まる文字サイズにする。 */
.spine.compact { font-size: 20px; letter-spacing: 0; }

/* 縦書きの中の数字を正立させる(縦中横)。「第38回」の 38 が寝ないようにする。
   1〜2桁だけに付く(build.js の tateNum が span で包む)。
   使えない古いブラウザでは、これまでどおり寝るだけで、崩れはしない。 */
.tcy { text-combine-upright: all; }

/* 本にカーソルを合わせた(またはキーボードで選んだ)ときに出る紙の札。
   押して窓を開く前に、その本が何なのかが分かるようにする。
   ※親の .spine は hover で1.5倍に拡大されるので、その逆(2/3)をかけて
     文字と札の大きさを元に戻している。中の数字は
     「部屋の70%×拡大1.5×逆倒し0.667」で、結局この値のまま画面に出る。 */
.spine-tip {
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  /* --tip-oshi は hondana.js が入れる「下へずらす量」。棚の上の段の本で
     札が部屋の枠から出てしまうときだけ、枠に収まるところまで下げる。 */
  transform: translateX(-50%) translateY(var(--tip-oshi, 0px)) scale(.6667);
  transform-origin: bottom center;
  writing-mode: horizontal-tb;   /* 親が縦書きなので横書きに戻す */
  /* 幅は中の文に合わせる(短い札は小さく、長い札は折り返す)。
     文の切れ目は site.json / build.js 側で \n を入れて決める */
  width: max-content; max-width: 720px;
  padding: 16px 24px;
  background: var(--cream);
  color: #3A2410;
  border: 2px solid #C9A468;   /* 真鍮色。棚の札と同じ系統で、暗い部屋の中でも締まって見える */
  border-radius: 3px;
  font-size: 31px; line-height: 1.5; letter-spacing: .02em; font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 16px rgba(20, 9, 2, .65);
  opacity: 0; visibility: hidden;
  /* 向きは hondana.js がカーソルの乗ったその場で決めきるので、
     待たずにすぐ出してよい(待たせると一瞬上に出てから下へ飛んで見えた) */
  transition: none;
  pointer-events: none;   /* 札の上にカーソルが乗って、ちらつくのを防ぐ */
  z-index: 7;
}
.spine:hover .spine-tip,
.spine:focus-visible .spine-tip { opacity: 1; visibility: visible; }
/* 準備中の本は拡大が1.45倍なので、打ち消しの値もそれに合わせる(1/1.45=.6897) */
.spine.closed .spine-tip { transform: translateX(-50%) translateY(var(--tip-oshi, 0px)) scale(.6897); }
@media (prefers-reduced-motion: reduce) {
  .spine-tip { transition: none; }
  /* 動きを止めるのではなく、ゆっくりにする（管理人のPCはこの設定） */
  .spine { transition: transform .45s ease; }
}

.spine::before, .spine::after {  /* 背の飾り罫 */
  content: ""; position: absolute; z-index: 1; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg, transparent, currentColor 15%, currentColor 85%, transparent);
  box-shadow: 0 1px 0 rgba(248,218,151,.35); opacity: .58;
}
.spine::before { top: 4px; }
.spine::after { bottom: 4px; }
/* 選んだ本は手前へ持ち上げて 1.5 倍に出す。どれを見ているかを一目で分かるようにする。
   .spine-tip の打ち消しは 1/1.5 = .6667。倍率を変えるときは札の値も必ず合わせること。 */
.spine:hover, .spine:focus-visible {
  transform: translateY(-22px) scale(1.5);
  transform-origin: bottom center;
  z-index: 6;
  outline-color: rgba(255,214,140,.9);
  box-shadow:
    inset -3px 0 4px rgba(0,0,0,.34),
    inset 2px 0 0 rgba(255,255,255,.16),
    0 6px 10px rgba(20,9,2,.6),
    0 0 14px rgba(255,214,140,.5);
  /* 拡大したときに題字がつぶれないよう、字間を少しゆるめる */
  letter-spacing: .06em;
}
.spine.wide { font-size: 25.5px; letter-spacing: 0; line-height: 1.22; }
.spine.closed {
  --spine-base: #A99B7B;
  cursor: default; color: #2E2718;
  position: relative; font-size: 25.5px; padding-bottom: 50px;
}
.spine.closed.wide { font-size: 24px; }
/* 準備中の本は 1.45 倍（札の打ち消しは 1/1.45 = .6897） */
.spine.closed:hover, .spine.closed:focus-visible {
  transform: translateY(-18px) scale(1.45);
  transform-origin: bottom center;
  z-index: 6;
  outline-color: rgba(255,214,140,.75);
  box-shadow: inset -3px 0 4px rgba(20,9,2,.34), 0 6px 10px rgba(20,9,2,.55);
}
.spine.closed::before { opacity: .3; }
.spine.closed::after { content: none; }
.obi {
  position: absolute; left: 4px; right: 4px; bottom: 8px; padding: 5px 0;
  writing-mode: horizontal-tb;
  background: var(--cream); border: 1px solid #B39A6E; border-radius: 2px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400;
  font-size: 24px; line-height: 1.4; text-align: center; color: #5C4A2E; letter-spacing: 0;
  z-index: 1;
}

/* ================= 机の上の壁掛け掲示板 =================
   上辺は本棚のてっぺん(--kamote)にそろえ、天井が高くなった部屋に合わせて 680×560px。
   中はコルク。付箋の文章は data/keiji.json、その日の1枚を koyomi.js が選ぶ。 */
.keiji {
  position: absolute; left: 56px; top: var(--kamote);
  width: 680px; height: 560px;
  padding: 24px;
  border-radius: 4px;
  background: linear-gradient(150deg, #B07C46 0%, #8A5426 44%, #5C3617 100%);
  box-shadow:
    0 20px 34px rgba(20, 9, 2, .55),
    inset 0 0 0 3px rgba(255, 214, 150, .26),
    inset 0 0 0 13px rgba(60, 30, 10, .34);
  z-index: 1;
}
.keiji-cork {
  position: relative; height: 100%;
  border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  background-color: #BE8B57;
  background-image:
    radial-gradient(circle, rgba(92, 54, 23, .42) 1px, rgba(92, 54, 23, 0) 1.7px),
    radial-gradient(circle, rgba(255, 228, 186, .32) 1px, rgba(255, 228, 186, 0) 1.7px);
  background-size: 22px 22px, 30px 30px;
  background-position: 0 0, 11px 15px;
  box-shadow: inset 0 5px 14px rgba(60, 30, 10, .45);
}
/* 付箋(その日の1枚だけが出る。JavaScriptが無いときは最初の1枚) */
.fusen {
  position: relative;
  width: 520px; min-height: 330px;
  padding: 46px 36px 32px;
  background: linear-gradient(168deg, #F6EAA8 0%, #EBDC90 100%);
  color: #3A2A1A;
  box-shadow: 5px 9px 16px rgba(40, 20, 5, .4);
  text-align: center;
}
.fusen[hidden] { display: none; }
.fusen-pin {  /* 画びょう */
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F0A6A0 0%, #C4483E 62%, #8E2F27 100%);
  box-shadow: 0 4px 7px rgba(40, 20, 5, .5);
}
.fusen-midashi {
  margin: 0 0 16px; font-size: 29px; letter-spacing: .14em; color: #7A5A2E;
  border-bottom: 1px solid rgba(122, 90, 46, .4); padding-bottom: 14px;
}
.fusen-honbun {
  margin: 0; font-family: var(--serif); font-size: 41px; line-height: 1.8;
  letter-spacing: .02em;
}
/* 語呂の下で、正式な用語だけをそっと答え合わせする。主役の本文より小さく、
   付箋の中で読み切れる1〜2行に限る（data/keiji.json の chushaku）。 */
.fusen-chushaku {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(82, 63, 35, .30);
  font-size: 30px; line-height: 1.45; letter-spacing: .01em;
  color: rgba(61, 48, 30, .78);
}

/* 掲示板の下に掛ける作品銘板。普通のWebボタンではなく、古い真鍮板として見せる。 */
.keiji-more {
  position: absolute; left: 50%; bottom: -70px; transform: translateX(-50%);
  width: 330px; min-height: 58px; padding: 8px 42px 7px;
  border: 2px solid #6A4618; border-radius: 3px;
  color: #2F210F; cursor: pointer;
  background:
    linear-gradient(100deg, rgba(255,255,255,.28), transparent 30% 72%, rgba(60,35,8,.2)),
    linear-gradient(180deg, #D9BC72 0%, #B58B3C 48%, #876123 100%);
  box-shadow:
    0 5px 10px rgba(20,9,2,.48),
    inset 0 0 0 2px rgba(255,232,160,.34),
    inset 0 -3px 5px rgba(62,36,8,.3);
  font-family: var(--serif); text-align: center;
  text-shadow: 0 1px rgba(255,239,183,.55);
  z-index: 4;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.keiji-more::before, .keiji-more::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F1D58A 0%, #8B6425 62%, #4B3212 100%);
  box-shadow: 0 1px 2px rgba(45,25,6,.65);
}
.keiji-more::before { left: 14px; }
.keiji-more::after { right: 14px; }
.keiji-more:focus-visible {
  outline: 4px solid #F5D989; outline-offset: 4px;
  transform: translateX(-50%) translateY(-5px) scale(1.025);
  filter: brightness(1.12) saturate(1.08);
}
.keiji-more-kazari {
  position: absolute; left: 32px; top: 17px; font-size: 13px; opacity: .62;
  transition: transform .22s ease;
}
@media (hover: hover) {
  .keiji-more:hover {
    transform: translateX(-50%) translateY(-5px) scale(1.025);
    filter: brightness(1.12) saturate(1.08);
    box-shadow:
      0 10px 17px rgba(20,9,2,.54),
      inset 0 0 0 2px rgba(255,239,179,.48),
      inset 0 -3px 5px rgba(62,36,8,.3);
  }
  .keiji-more:hover .keiji-more-kazari { transform: rotate(90deg) scale(1.08); }
}
.keiji-more:active { transform: translateX(-50%) translateY(1px) scale(.99); }
.keiji-more-main { display: block; font-size: 24px; font-weight: 700; letter-spacing: .14em; }
.keiji-more-soe {
  display: block; margin-top: 1px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 12px; letter-spacing: .08em;
}

/* ================= 机ゾーン ================= */
/* 縮尺: 1px≒3.3mm → 机の天板75cm=228px、椅子の背もたれ98cm=298px */
.zone-desk { width: 780px; }
.rug {
  position: absolute; left: -40px; right: -60px; bottom: 76px; height: 74px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(124,47,42,.5) 0%, rgba(124,47,42,.32) 58%, rgba(124,47,42,0) 78%);
}
.cs-desk { left: 40px; right: 40px; bottom: 104px; }

.desk { position: absolute; left: 96px; right: 0; bottom: 118px; height: 280px; z-index: 2; }
/* 天板の上のもの(机の上に置く=topがマイナス) */
.desk-lamp {
  position: absolute; right: 56px; top: -80px;
  width: 10px; height: 74px;
  background: linear-gradient(100deg, #8E6B26 0%, #C9A44E 100%);
  border-radius: 2px;
}
.desk-lamp::before {  /* 緑の笠 */
  content: ""; position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  width: 92px; height: 32px;
  background: linear-gradient(180deg, #4E7F5C 0%, #2A5439 100%);
  border-radius: 34px 34px 6px 6px;
  box-shadow: 0 3px 5px rgba(20,9,2,.5), inset 0 -3px 0 rgba(255,236,180,.35);
}
.desk-lamp::after {  /* 台座 */
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 48px; height: 11px; border-radius: 3px;
  background: linear-gradient(180deg, #C9A44E 0%, #8E6B26 100%);
}

/* ================= 映写機とスクリーン(机と窓の間) =================
   背景へ統合した映写機が「おすすめメディア」を映している。
   スクリーンはリンク1本(押すと別のサイトが新しいタブで開く)。JavaScriptは使わない。
   スクリーンの上辺は本棚のてっぺん(--kamote)にそろえ、600×640pxに広げた。 */
.zone-eisha { width: 1000px; }
/* レンズから出る明かり(スクリーンの左下へ少し上向きに伸びる。壁を横切る帯にはしない) */
.eisha-hikari {
  position: absolute; left: 296px; bottom: 405px;
  width: 100px; height: 150px; pointer-events: none; z-index: 1;
  clip-path: polygon(0 78%, 100% 6%, 100% 65%, 0 91%);
  background: linear-gradient(92deg,
    rgba(255, 232, 180, .34) 0%, rgba(255, 232, 180, .12) 58%, rgba(255, 232, 180, 0) 100%);
}
/* スクリーン(押せる) */
.osusume {
  position: absolute; right: 16px; top: var(--kamote);
  width: 600px; height: 640px; z-index: 2;
  display: block; text-decoration: none; color: #3A2A1A;
  border-radius: 2px;
  /* 左下(映写機のある側)がいちばん明るい */
  background:
    radial-gradient(ellipse at 16% 82%, rgba(255, 240, 200, .9) 0%, rgba(255, 240, 200, 0) 64%),
    linear-gradient(168deg, #F7EFDD 0%, #EDE0C4 100%);
  box-shadow:
    0 0 46px rgba(255, 214, 150, .18),
    0 14px 26px rgba(20, 9, 2, .5),
    inset 0 0 0 1px rgba(120, 80, 40, .28);
  transition: box-shadow .18s ease, filter .18s ease;
}
/* 映している中身(上から: 小さな見出し → サイト名(主役) → 説明 → ※補足 → 案内) */
.osusume-nuno {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 44px; text-align: center;
}
.osusume-midashi {
  font-size: 24px; line-height: 1.4;
  letter-spacing: .3em; text-indent: .3em; color: #6B5233;
  padding-bottom: 10px; border-bottom: 1px solid rgba(90, 60, 26, .45);
}
.osusume-name {
  font-family: var(--serif); font-size: 46px; line-height: 1.5;
  letter-spacing: .04em; color: #46301A; margin-top: 20px;
}
.osusume-setsumei {
  font-size: 24px; line-height: 1.65; letter-spacing: .02em;
  color: #4A3A28; margin-top: 20px;
}
.osusume-hosoku {  /* ※印の補足(パスワードの案内など) */
  font-size: 22px; line-height: 1.6; letter-spacing: .01em;
  color: #4A3A28; margin-top: 18px;
}
.osusume-go {  /* いちばん下の案内(押せることと、外のサイトへ出ることを字で伝える) */
  font-size: 27px; line-height: 1.5; letter-spacing: .02em;
  color: #4A3116; margin-top: 26px;
  padding: 13px 24px; border: 2px solid #8A5426; border-radius: 8px;
  background: rgba(255, 252, 244, .6);
}
.osusume:hover {
  box-shadow:
    0 0 60px rgba(255, 220, 160, .34),
    0 16px 30px rgba(20, 9, 2, .5),
    inset 0 0 0 1px rgba(120, 80, 40, .28);
  filter: brightness(1.05);
}
.osusume:hover .osusume-go { background: #FFFCF4; }
.osusume:focus-visible {
  outline: 3px solid #F0C46A; outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .osusume { transition: none; }
}

/* ================= 窓と低い棚 ================= */
.zone-window { width: 740px; }
/* 窓(床から90cm=282px。天井が高くなったのに合わせて 620×560px に拡大) */
.window {
  position: absolute; left: 20px; bottom: 440px; width: 660px; height: 600px;
  background: linear-gradient(160deg, #4E2C12 0%, #6B3E1B 100%);
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(20,9,2,.45), inset 0 0 0 2px rgba(255,214,150,.2);
}
.win-sky {
  position: absolute; inset: 12px;
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 30% 88%, rgba(255,196,120,.9) 0%, rgba(255,196,120,0) 55%),
    linear-gradient(180deg, #FCE9C0 0%, #F7CF8E 46%, #EFAF62 78%, #E29A50 100%);
  box-shadow: inset 0 0 30px rgba(200,120,50,.35);
}
.win-bar-v, .win-bar-h { position: absolute; background: linear-gradient(100deg, #6B3E1B 0%, #8A5426 100%); }
.win-bar-v { top: 12px; bottom: 12px; left: 50%; width: 12px; margin-left: -6px; }
.win-bar-h { left: 12px; right: 12px; top: 50%; height: 12px; margin-top: -6px; }
.win-sill {
  position: absolute; left: -18px; right: -18px; bottom: -16px; height: 16px;
  background: linear-gradient(180deg, #B0752F 0%, #7A4A20 60%, #523014 100%);
  border-radius: 3px;
  box-shadow: 0 4px 8px rgba(20,9,2,.5);
}
/* 低い棚(これからの資格) */
.sideboard { position: absolute; left: 10px; right: 10px; bottom: 118px; height: 270px; }
.cs-side { left: 20px; right: 20px; bottom: 104px; }
.sideboard-top {  /* 天板の上の飾り(鉢植えと積み本) */
  position: absolute; left: 24px; right: 24px; top: 0;
  display: flex; gap: 26px; align-items: flex-end; justify-content: flex-end;
  transform: translateY(-100%); padding-bottom: 2px;
}
.sideboard-body {
  position: absolute; inset: 0;
  background: linear-gradient(96deg, #5C3617 0%, #7A4A20 50%, #96602C 100%);
  border: 9px solid #4E2C12;
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(30,14,4,.5), inset 0 0 0 2px rgba(255,200,140,.14);
  display: flex; gap: 10px; padding: 12px;
}
.sb-door {
  flex: 1 1 0;
  background: linear-gradient(180deg, #4A2C13 0%, #6B4019 100%);
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(30,14,4,.5), inset 0 6px 10px rgba(20,9,2,.4);
  position: relative;
}
.sb-door::after {  /* つまみ */
  content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E5C06A 0%, #A8813A 70%);
}

/* ================= 振り子時計(カレンダーと本棚の間の壁) =================
   縮尺: 1px≒3.3mm → 八角振り子柱時計 高さ約1.3m=397px。壁の高い位置に掛ける。
   針は koyomi.js が合わせる。 */
.zone-clock { width: 406px; padding-top: var(--kamote); }
/* 時計の下の案内板(美術館の作品札ふう)。
   ダブルクリックでタイマーが開くことは言われないと気づけないので、
   絵の説明書きのように壁へ小さく掛ける。文言は site.json の tokeiFuda。
   ※文字は「設計値=画面上の1.21倍」の決まりに従う(画面上14〜19px相当) */
.tokei-fuda {
  width: 342px; margin: 46px auto 0;
  padding: 16px 20px 18px;
  color: #392512;
  background:
    repeating-linear-gradient(0deg, rgba(102, 73, 35, .035) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #FFF9EC 0%, #F3E7CE 54%, #E8D7B4 100%);
  border: 1px solid #876437;
  outline: 3px solid rgba(245, 233, 207, .84);
  outline-offset: -7px;
  box-shadow: 0 10px 19px rgba(18, 9, 2, .45), inset 0 0 0 1px rgba(255,255,255,.75);
  text-align: left;
}
.tf-midashi {
  margin: 0 0 10px;
  font-family: var(--serif); font-size: 25px; font-weight: 700;
  letter-spacing: .12em; color: #4B2F13;
  padding: 0 0 9px; border-bottom: 3px double #B99457;
}
.tf-honbun {
  margin: 0; font-size: 20px; font-weight: 600; line-height: 1.7; color: #352112;
}
.tf-soe {
  margin: 10px 0 0; padding: 7px 0 0 11px;
  border-left: 3px solid #B99457;
  font-size: 17px; font-weight: 600; line-height: 1.55; color: #654621;
}
/* 札の中の「タイマーを開く」ボタン。
   時計のダブルクリック(からくり)はそのまま残したうえで、
   スマートフォンの人と、初めて来た人のための押せる入口
   (2026-08-15にばっふぁさんの判断で追加)。
   ※ この札は部屋の中(zoom 0.70)にあるので、字は大きめに書いてある */
.tf-botan {
  display: block; width: 100%; margin: 15px 0 0;
  /* 部屋は zoom 0.70 で縮むので、指で押せる大きさを保つ。 */
  min-height: 64px; padding: 12px 20px;
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  letter-spacing: .1em; color: #FFF7E8;
  background: linear-gradient(135deg, #69411A 0%, #3C240E 52%, #5A3514 100%);
  border: 2px solid #8E6B34; border-radius: 1px;
  box-shadow: inset 0 1px 0 rgba(255,235,183,.26), 0 3px 0 #241305;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.tf-botan:hover, .tf-botan:focus-visible {
  color: #3B240E; background: linear-gradient(135deg, #FFF8EA, #E7CE9B);
  transform: translateY(-2px); outline: 3px solid #D7AD59; outline-offset: 3px;
}
/* 最初に改良した八角形の壁掛け振り子時計。針は koyomi.js が合わせる。 */
.wall-clock {
  position: relative; width: 250px; margin: 0 auto; padding-top: 44px; zoom: 1.4;
  filter: drop-shadow(9px 12px 14px rgba(15,7,1,.64));
  cursor: pointer;
  /* 鳩時計は押せるが、カーソルを重ねても本体は動かさない。 */
  transition: none;
}
.wall-clock:hover { transform: none; filter: drop-shadow(9px 12px 14px rgba(15,7,1,.64)); }
.wall-clock:focus-visible { outline: 3px solid #F0C46A; outline-offset: 6px; border-radius: 8px; }
.wc-head {
  display: block; position: relative; z-index: 1; width: 195px; height: 195px; margin: 0 auto;
  background:
    repeating-linear-gradient(90deg, rgba(255,203,113,.08) 0 1px, transparent 1px 8px),
    linear-gradient(118deg, #32180A 0%, #70401A 27%, #B07836 51%, #633314 76%, #2B1509 100%);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  box-shadow: inset 0 0 0 4px rgba(33,14,3,.72), inset 0 0 0 7px rgba(225,177,83,.26), 0 2px 0 rgba(245,195,96,.18);
}
.wc-head::after {
  content: ''; position: absolute; inset: 12px; pointer-events: none;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  border: 1px solid rgba(250,211,128,.55);
}
.wc-face {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 142px; height: 142px; border-radius: 50%;
  background: radial-gradient(circle at 35% 27%, #FFFDF4 0%, #F7EDD6 57%, #D9C59E 100%);
  border: 7px solid #B08D3C;
  box-shadow: inset 0 0 0 2px rgba(101,65,24,.45), inset 0 7px 12px rgba(255,255,255,.55), 0 0 0 3px rgba(63,31,6,.72);
}
/* 白い文字盤の外、時計上部の独立した小扉。正時と文字盤へのホバーで鳩が出る。 */
.wc-cuckoo {
  position: absolute; z-index: 4; left: 50%; top: 0;
  width: 52px; height: 48px; transform: translateX(-50%);
  pointer-events: none;
}
.wc-cuckoo-frame {
  position: absolute; inset: 0; border: 2px solid #C89B4B; border-radius: 28px 28px 4px 4px;
  background: linear-gradient(120deg, #2D1608 0%, #704018 53%, #321707 100%);
  box-shadow: inset 0 0 0 2px rgba(244,200,110,.2), 0 1px 0 rgba(25,11,2,.6);
}
.wc-cuckoo-door {
  position: absolute; z-index: 3; inset: 4px 4px 5px; border: 1px solid #B4863D;
  border-radius: 23px 23px 2px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(255,213,135,.11) 0 1px, transparent 1px 5px),
    linear-gradient(120deg, #3B1C0A 0%, #8A5120 49%, #2B1407 100%);
  box-shadow: inset 0 0 0 1px rgba(24,10,2,.48);
  transform-origin: left center;
}
.wc-cuckoo-bird {
  position: absolute; z-index: 2; left: 50%; top: 9px; width: 27px; height: 29px;
  border: 1px solid rgba(38,28,14,.65); border-radius: 55% 55% 48% 48%;
  background: linear-gradient(120deg, #DFE5DA 0%, #94A7A0 52%, #587068 100%);
  box-shadow: inset 4px 4px 4px rgba(255,255,255,.56), inset -4px -3px 4px rgba(42,58,51,.38);
  opacity: 0; transform: translate(-50%, -17px) scale(.72); transform-origin: center bottom;
}
.wc-cuckoo-bird::before {
  content: ''; position: absolute; left: 3px; bottom: 3px; width: 15px; height: 13px;
  border-radius: 70% 20% 60% 45%; background: linear-gradient(135deg, #7E9389, #455E59);
  transform: rotate(-15deg); opacity: .9;
}
.wall-clock.is-cuckooing .wc-cuckoo-door { animation: wc-cuckoo-door 1.72s ease-in-out both; }
.wall-clock.is-cuckooing .wc-cuckoo-bird { animation: wc-cuckoo-bird 1.72s cubic-bezier(.25,.73,.34,1) both; }
@keyframes wc-cuckoo-door {
  0%, 100% { transform: perspective(140px) rotateY(0deg); }
  16%, 80% { transform: perspective(140px) rotateY(-104deg); }
}
@keyframes wc-cuckoo-bird {
  0%, 12%, 87%, 100% { opacity: 0; transform: translate(-50%, -17px) scale(.72); }
  24%, 74% { opacity: 1; transform: translate(-50%, 1px) scale(1); }
  43% { opacity: 1; transform: translate(-50%, -3px) scale(1.03); }
  57% { opacity: 1; transform: translate(-50%, 1px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wall-clock.is-cuckooing .wc-cuckoo-door,
  .wall-clock.is-cuckooing .wc-cuckoo-bird { animation: none; }
}
/* 文字盤のローマ数字。時計の外周を一周させ、針より後ろに置いて読みやすくする。 */
.wc-roman {
  position: absolute; z-index: 1; transform: translate(-50%, -50%);
  font-family: var(--serif); font-size: 11px; font-weight: 700; line-height: 1;
  color: #4B3218; text-shadow: 0 1px 0 rgba(255,255,255,.68); pointer-events: none;
}
.wc-roman.n1 { left: 50%; top: 8%; }.wc-roman.n2 { left: 73%; top: 13%; }.wc-roman.n3 { left: 88%; top: 32%; }
.wc-roman.n4 { left: 93%; top: 53%; }.wc-roman.n5 { left: 84%; top: 76%; }.wc-roman.n6 { left: 65%; top: 90%; }
.wc-roman.n7 { left: 50%; top: 95%; }.wc-roman.n8 { left: 34%; top: 90%; }.wc-roman.n9 { left: 17%; top: 76%; }
.wc-roman.n10 { left: 7%; top: 53%; }.wc-roman.n11 { left: 12%; top: 32%; }.wc-roman.n12 { left: 27%; top: 13%; }
.wc-hand, .wc-center { z-index: 2; }
.wc-hand {
  position: absolute; left: 50%; bottom: 50%;
  background: #3A2A1A; border-radius: 2px; transform-origin: bottom center;
}
.wc-hour { width: 6px; height: 34px; transform: translateX(-50%) rotate(-60deg); }
.wc-min { width: 4px; height: 50px; transform: translateX(-50%) rotate(60deg); }
.wc-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F4D57B, #A87825 72%);
  box-shadow: 0 0 0 2px rgba(76,44,10,.45);
}
.wc-drop {
  display: block; position: relative; width: 114px; height: 132px; margin: -7px auto 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,205,120,.06) 0 1px, transparent 1px 7px),
    linear-gradient(100deg, #38200D 0%, #71411A 44%, #9B632D 54%, #4A260E 100%);
  box-shadow: inset 0 0 0 3px rgba(35,15,3,.66), inset 0 0 0 6px rgba(222,169,73,.16);
}
.wc-glass {
  position: absolute; inset: 14px 16px 11px;
  background: linear-gradient(135deg, rgba(25,13,5,.78) 0%, rgba(73,49,23,.48) 42%, rgba(24,12,4,.78) 100%);
  border: 2px solid #C29A48; border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(255,225,148,.34), inset 12px 0 14px rgba(255,232,172,.07);
  overflow: hidden;
}
.wc-pendulum {
  position: absolute; left: 50%; top: 3px; width: 5px; height: 68px; margin-left: -2.5px;
  background: linear-gradient(180deg, #C9A44E 0%, #8E6B26 100%);
  transform-origin: top center;
  animation: wc-swing 2.2s ease-in-out infinite;
}
.wc-bob {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F0CE7A 0%, #C9A44E 44%, #8E6B26 100%);
}
@keyframes wc-swing {
  0%, 100% { transform: rotate(9deg); }
  50% { transform: rotate(-9deg); }
}
.wc-finial {
  display: block; width: 23px; height: 24px; margin: 0 auto;
  background: linear-gradient(180deg, #C08B3B 0%, #6C3B16 65%, #38200D 100%);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  filter: drop-shadow(0 2px 1px rgba(20,9,2,.45));
}
@media (prefers-reduced-motion: reduce) {
  .wc-pendulum { animation-duration: 4.4s; }
}

/* ================= 掲示板の付箋(詳しい解説の窓) ================= */
.keiji-dialog {
  border: 1px solid #8C672D; border-radius: 8px; padding: 0;
  width: min(760px, calc(100vw - 32px));
  max-width: 760px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow: hidden; color: #382817;
  background: #F5E9CF;
  box-shadow: 0 28px 72px rgba(20, 9, 2, .72), inset 0 0 0 5px rgba(137, 96, 38, .14);
}
.keiji-dialog::backdrop { background: rgba(28, 15, 5, .72); }
.keiji-dialog-inner {
  position: relative; padding: 36px 48px 42px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  background:
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0) 90px),
    repeating-linear-gradient(0deg, rgba(115,81,38,.025) 0 1px, transparent 1px 5px),
    #F5E9CF;
}
.keiji-dialog-inner form { position: absolute; top: 8px; right: 8px; margin: 0; }
.keiji-dialog-close {
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: transparent; color: #684B28; cursor: pointer;
  font-size: 30px; line-height: 1;
}
.keiji-dialog-close:hover { background: rgba(104, 75, 40, .12); }
.keiji-dialog-close:focus-visible { outline: 3px solid #987031; outline-offset: 1px; }
.keiji-detail-kicker {
  margin: 0 56px 7px 0; color: #7A582C;
  font-size: 13px; font-weight: 700; letter-spacing: .28em;
}
.keiji-dialog h2 {
  margin: 0 56px 22px 0; font-family: var(--serif);
  font-size: 32px; line-height: 1.35; letter-spacing: .07em; color: #493117;
}
.keiji-detail-note {
  margin: 0 0 25px; padding: 22px 26px;
  border: 1px solid #C8A96A; border-radius: 2px;
  background: linear-gradient(165deg, #F8EDAC 0%, #EAD789 100%);
  box-shadow: 3px 5px 9px rgba(68, 43, 15, .2);
}
.keiji-detail-note p {
  margin: 0; font-family: var(--serif); font-size: 23px; line-height: 1.75;
  text-align: center; letter-spacing: .03em;
}
.keiji-detail-section { margin: 0; padding: 20px 0; border-top: 1px solid #D2BD91; }
.keiji-detail-section h3 {
  margin: 0 0 9px; font-family: var(--serif); font-size: 20px; letter-spacing: .08em;
  color: #66461E;
}
.keiji-detail-section p { margin: 0; font-size: 16px; line-height: 1.9; }
.keiji-detail-chushaku p { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.keiji-detail-exam {
  margin: 4px 0; padding: 20px 24px 21px;
  border: 1px solid #B88A3F; border-left-width: 6px;
  background: rgba(255, 247, 220, .72);
}
.keiji-detail-exam h3 { color: #7B3D20; }
.keiji-detail-exam ul { margin: 0; padding-left: 1.35em; }
.keiji-detail-exam li { padding-left: .15em; font-size: 16px; line-height: 1.75; }
.keiji-detail-exam li + li { margin-top: 5px; }
.keiji-detail-hosoku { margin-top: 16px; color: #5F503B; }

@media (max-width: 600px) {
  .keiji-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px);
  }
  .keiji-dialog-inner {
    padding: 28px 20px 30px;
    max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px);
  }
  .keiji-dialog h2 { margin-right: 46px; font-size: 26px; }
  .keiji-detail-note { padding: 18px 14px; }
  .keiji-detail-note p { font-size: 20px; }
  .keiji-detail-section { padding: 17px 0; }
  .keiji-detail-section p, .keiji-detail-exam li { font-size: 15px; }
  .keiji-detail-exam { padding: 17px 14px 18px; }
}

/* ================= 植物の隅 ================= */
/* 縮尺: 1px≒3.3mm → 大きな観葉植物 約1.3m=398px */
.zone-corner { width: 420px; }
.cs-corner { left: 50px; right: 60px; bottom: 100px; }

/* ================= 取り出した本の窓 ================= */
.book-dialog {
  border: none; border-radius: 12px; background: transparent;
  padding: 0; max-width: min(94vw, 1240px); width: 100%;
  /* ここは visible のまま。傾いた表紙(-9度)と、そのまわりの光のにじみを切らないため。
     縦スクロールは下の .pull-card 側で受ける。 */
  overflow: visible;
}
.book-dialog::backdrop { background: rgba(34, 18, 6, .62); }
.pulled { display: flex; gap: 52px; align-items: center; }
.pulled-book {
  flex: 0 0 auto;
  width: 240px; height: 352px; border-radius: 6px 18px 18px 6px;
  transform: rotate(-9deg);
  box-shadow:
    -10px 14px 26px rgba(20,9,2,.6),
    inset 12px 0 0 rgba(0,0,0,.22),
    inset -3px 0 0 rgba(255,255,255,.12),
    0 0 40px rgba(255,214,140,.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px 20px 38px;
}
.pulled-book span {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--serif); font-weight: 700;
  line-height: 1.35; letter-spacing: .1em; font-size: 31px;
  max-height: 100%;
}
.pull-card {
  background: linear-gradient(170deg, #FDF7EC 0%, #F3E8D2 100%);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,9,2,.5);
  padding: 40px 46px; flex: 1 1 auto; color: var(--lib-ink);
}
.pull-card h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 38px; letter-spacing: .04em; }
.pull-meta { margin: 0 0 10px; font-size: 23px; color: #6E5738; }
.pull-desc { margin: 18px 0 28px; font-size: 24px; line-height: 1.7; }
/* 窓の中の注意書き(自作アプリの本の「データはすべて架空です」など)。
   読み飛ばされては困る一文なので、本文と同じ大きさのまま、朱書きの札にして目立たせる。
   絵文字は使わず「※」と枠・帯だけで示す(部屋の世界観に合わせるため) */
.pull-chui {
  margin: 0 0 28px;
  padding: 16px 22px 16px 26px;
  font-size: 24px; line-height: 1.65; font-weight: 700;
  color: #6E2A10;
  background: #FBEADF;
  border: 1.5px solid #B4602E;
  border-left-width: 9px;
  border-radius: 4px;
}
.pull-actions { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.pull-actions form { margin: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 6px 22px; border-radius: 22px;
  font-family: inherit; font-size: 16px; cursor: pointer; text-decoration: none;
}
.pull-actions .btn {
  min-height: 64px; padding: 8px 36px; border-radius: 32px; font-size: 24px;
}
/* 「この本をひらく」。これは <a> なので、何もしないとサイト共通の
   a:hover の青がかかり、こげ茶の下地の上で字が読めなくなる。
   カーソルを合わせたら「下地と文字を入れ替える」形にする(ばっふぁさんの指示)。
   入れ替えると下地がカードと同じ色になって形が消えるので、枠線は残す。
   ふだんは枠線を下地と同じ色にしてあるので、大きさは変わらない */
.btn-go { background: #6B3E1B; color: #FBF4E6; border: 1.5px solid #6B3E1B; }
.btn-go:hover, .btn-go:focus-visible {
  background: #FBF4E6; color: #4E2C12; border-color: #4E2C12;
}
.btn-close { background: transparent; color: #6B3E1B; border: 1.5px solid #A97E4C; }
.btn-close:hover { background: rgba(169,126,76,.14); }

@media (max-width: 900px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width: 1000px) and (max-height: 700px) {
  .pulled { flex-direction: column; gap: 28px; }
  .pulled-book { transform: rotate(-5deg); width: 150px; height: 220px; }
  .pulled-book span { font-size: 21px; }
  .pull-card { padding: 26px 28px; }
  .pull-card h2 { font-size: 27px; }
  .pull-meta { font-size: 18px; }
  .pull-desc { font-size: 19px; }
  .pull-chui { font-size: 18px; padding: 12px 16px 12px 18px; margin-bottom: 20px; }
  .pull-actions .btn { min-height: 52px; padding: 6px 26px; font-size: 19px; }
}

/* ==================================================================
   図書室入口の展示 — 「このサイトについて」と管理人
   本棚・時計と同じ、木工の額縁／紙の繊維／真鍮金具をここでは少し強めに見せる。
   ================================================================== */
.zone-wall .wall-frame {
  margin-top: 38px;
  padding: 22px;
  overflow: visible;
  background:
    linear-gradient(90deg, rgba(48,22,6,.38) 0 5%, transparent 5% 13%, rgba(255,221,144,.16) 13% 16%, transparent 16% 82%, rgba(42,17,4,.34) 82% 100%),
    repeating-linear-gradient(0deg, rgba(255,226,157,.07) 0 1px, rgba(54,25,6,.05) 1px 6px),
    linear-gradient(135deg, #553016 0%, #A96C31 21%, #CF9853 49%, #8A4D20 77%, #4B270E 100%);
  border: 2px solid #4B270E;
  border-radius: 2px;
  box-shadow:
    0 15px 24px rgba(20,9,2,.58),
    0 3px 0 rgba(229,187,111,.48) inset,
    0 -5px 0 rgba(57,27,7,.38) inset,
    inset 0 0 0 7px rgba(71,33,8,.32);
}
.zone-wall .wall-frame::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(255,227,163,.43);
  box-shadow: inset 0 0 0 1px rgba(58,28,8,.36);
}
.zone-wall .wall-frame::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -8px; height: 9px;
  background: linear-gradient(180deg, #E5BC71 0%, #9A622A 50%, #4A240D 100%);
  border-radius: 0 0 3px 3px; box-shadow: 0 4px 5px rgba(20,9,2,.34);
}
.zone-wall .frame-wire {
  top: -27px; width: 92px; height: 30px;
  border-color: #7C592A; border-width: 3px;
  filter: drop-shadow(0 1px 0 rgba(250,216,144,.34));
}
.zone-wall .wall-frame-mat {
  position: relative; overflow: hidden;
  min-height: 0;
  padding: 22px 27px 24px;
  background:
    radial-gradient(ellipse at 84% 10%, rgba(255,255,255,.8), transparent 32%),
    repeating-linear-gradient(0deg, rgba(122,85,36,.042) 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #FFFDF3 0%, #F7ECD5 57%, #EAD7AF 100%);
  border: 10px solid #E9D7AE;
  box-shadow: inset 0 0 0 1px rgba(103,68,28,.48), inset 0 0 18px rgba(108,70,25,.18), 0 0 0 2px rgba(82,39,9,.4);
}
.zone-wall .wall-frame-mat::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(162,118,49,.42);
}
.zone-wall .wall-frame-mat h2 {
  position: relative; z-index: 1;
  margin-bottom: 15px; padding: 0 0 12px;
  font-size: 31px; color: #573617;
  border-bottom-color: #B88A47;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.zone-wall .wall-frame-mat h2::after {
  content: ""; position: absolute; right: 3px; bottom: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE29A 0 18%, #B6802E 42%, #70420F 100%);
  box-shadow: -16px 0 0 #C08A3B;
}
.zone-wall .wall-frame-mat p { position: relative; z-index: 1; font-size: 25px; line-height: 1.77; }

/* 管理人の紹介は、紙を木製イーゼルに載せた小さな肖像展示にする。 */
.profile-board {
  /* 猫のからくり(.cat-sake-scene、直径330px)は、押すと小さいアイコンの
     位置から板の外まで大きくせり出して見せる演出。overflow:hidden で
     囲むと下側が切れて隠れてしまうため、ここでは切らない。 */
  margin-bottom: 120px;
  padding: 22px 27px 24px;
  background:
    radial-gradient(ellipse at 14% 5%, rgba(255,255,255,.82), transparent 31%),
    repeating-linear-gradient(0deg, rgba(116,79,31,.045) 0 1px, transparent 1px 5px),
    linear-gradient(155deg, #FFFDF3 0%, #F7ECD5 57%, #EAD7AF 100%);
  border: 11px solid #E9D7AE;
  box-shadow:
    0 14px 24px rgba(20,9,2,.56),
    0 0 0 3px #704018,
    0 0 0 7px #C18A46,
    inset 0 0 0 1px rgba(103,68,28,.48),
    inset 0 0 18px rgba(108,70,25,.16);
}
.profile-board::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(162,118,49,.42);
}
.profile-heading {
  position: relative; z-index: 1;
  margin-bottom: 15px; padding-bottom: 12px;
  border-bottom-color: #B88A47;
}
.profile-board h2 {
  font-size: 31px; color: #573617;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.profile-heading::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 10px; height: 10px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE29A 0 18%, #B6802E 42%, #70420F 100%);
}
.profile-row { position: relative; z-index: 1; gap: 24px; }
.profile-icon {
  border: 7px double #8B5B27;
  outline: 2px solid #D8B46B; outline-offset: 3px;
  background: #E9D8B6;
  box-shadow: 0 5px 11px rgba(60,30,10,.38), 0 0 0 7px rgba(255,248,224,.58), inset 0 0 0 3px rgba(255,255,255,.45);
}
.profile-name { color: #553518; letter-spacing: .08em; }
.profile-board .profile-text p { font-size: 23.5px; line-height: 1.7; }
.contact-open {
  position: relative; overflow: hidden;
  min-height: 42px; border-color: #684018;
  background: linear-gradient(180deg, #D6AE62 0%, #A16A2B 44%, #613814 100%);
  box-shadow: inset 0 1px 0 rgba(255,242,194,.66), inset 0 -2px 0 rgba(70,37,9,.38), 0 2px 3px rgba(60,30,10,.30);
}
.contact-open::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,237,180,.45); border-radius: 2px; }
.contact-open:hover, .contact-open:focus-visible { background: #FFF3D7; color: #553617; }

/* 導線と左側展示の整列: 余計な見出しを外した分だけ上を詰め、
   紹介額の上辺をカレンダーにそろえる。管理人の展示板は少し下げて額との間に空気を作る。 */
.annai { margin-top: 11px; }
.zone-wall .wall-frame { margin-top: 30px; }
.profile-board { margin-bottom: 88px; }
/* 画面上の木枠上辺をカレンダーに合わせ、2枚の展示板の間に約1段ぶんの余白をつくる。 */
.zone-wall .wall-frame { margin-top: 15px; }
.profile-board { margin-bottom: 58px; }

/* ==================================================================
   今日の一枚 — 壁の掲示板と書斎机
   入口の展示額と同じ木工・羊皮紙・真鍮の語彙で、付箋を一枚の小作品として見せる。
   ================================================================== */
.keiji {
  padding: 29px;
  overflow: visible;
  border: 2px solid #4A260D;
  background:
    linear-gradient(90deg, rgba(54,25,6,.38) 0 5%, transparent 5% 12%, rgba(255,226,157,.16) 12% 15%, transparent 15% 84%, rgba(42,17,4,.34) 84% 100%),
    repeating-linear-gradient(0deg, rgba(255,226,157,.07) 0 1px, rgba(54,25,6,.05) 1px 6px),
    linear-gradient(135deg, #553016 0%, #A96C31 21%, #CF9853 49%, #8A4D20 77%, #4B270E 100%);
  box-shadow:
    0 20px 34px rgba(20,9,2,.58),
    0 3px 0 rgba(229,187,111,.48) inset,
    0 -5px 0 rgba(57,27,7,.38) inset,
    inset 0 0 0 8px rgba(71,33,8,.32);
}
.keiji::before {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(255,227,163,.42);
  box-shadow: inset 0 0 0 1px rgba(58,28,8,.34);
}
.keiji::after {
  content: ""; position: absolute; inset: 16px; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, #F5D687 0 3px, #845019 4px, transparent 5px),
    radial-gradient(circle at 100% 0, #F5D687 0 3px, #845019 4px, transparent 5px),
    radial-gradient(circle at 0 100%, #F5D687 0 3px, #845019 4px, transparent 5px),
    radial-gradient(circle at 100% 100%, #F5D687 0 3px, #845019 4px, transparent 5px);
  background-repeat: no-repeat;
}
.keiji-cork {
  z-index: 1;
  overflow: hidden;
  outline: 2px solid rgba(71,33,8,.56);
  outline-offset: 5px;
  background:
    radial-gradient(ellipse at 22% 15%, rgba(255,227,172,.20), transparent 34%),
    radial-gradient(ellipse at 78% 88%, rgba(67,34,11,.24), transparent 39%),
    radial-gradient(circle, rgba(83,45,14,.48) 1px, rgba(83,45,14,0) 1.8px),
    radial-gradient(circle, rgba(255,230,185,.38) 1px, rgba(255,230,185,0) 1.7px),
    linear-gradient(145deg, #D3A06B 0%, #B97C48 52%, #966038 100%);
  background-size: auto, auto, 22px 22px, 30px 30px, auto;
  background-position: center, center, 0 0, 11px 15px, center;
  box-shadow: inset 0 7px 18px rgba(59,28,8,.42), inset 0 0 0 1px rgba(255,221,157,.23);
}
/* 付箋は、ただの黄色い紙ではなく、机の上の一枚ものの羊皮紙カード。 */
.fusen {
  overflow: hidden;
  border: 1px solid rgba(141,100,38,.62);
  background:
    radial-gradient(ellipse at 16% 5%, rgba(255,255,236,.82), transparent 33%),
    repeating-linear-gradient(0deg, rgba(122,91,31,.045) 0 1px, transparent 1px 5px),
    linear-gradient(168deg, #FFF4B6 0%, #F3DF8A 55%, #E6C96B 100%);
  box-shadow: 7px 12px 20px rgba(35,16,4,.46), inset 0 0 0 1px rgba(255,255,232,.68), inset 0 -8px 14px rgba(130,91,25,.10);
}
.fusen::before {
  content: ""; position: absolute; right: 0; top: 0; width: 66px; height: 66px;
  background: linear-gradient(135deg, rgba(190,151,55,.25) 0 48%, rgba(255,247,195,.88) 49% 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  box-shadow: -3px 3px 5px rgba(89,55,12,.16);
}
.fusen > * { position: relative; z-index: 1; }
.fusen-pin {
  width: 32px; height: 32px;
  box-shadow: 0 4px 7px rgba(40,20,5,.52), inset 0 2px 2px rgba(255,219,204,.45);
}
.fusen-midashi { color: #705021; border-bottom-color: rgba(121,83,26,.50); }
.fusen-honbun { text-shadow: 0 1px 0 rgba(255,252,217,.66); }
.fusen-chushaku { border-top-color: rgba(100,70,24,.34); }

/* 机は明暗の木目、厚い天板、真鍮の引手で小さな書斎家具として見せる。 */
.rug { background: radial-gradient(ellipse at 50% 50%, rgba(121,55,38,.60) 0%, rgba(93,37,25,.34) 54%, rgba(93,37,25,0) 80%); }
.desk-lamp { box-shadow: 0 3px 5px rgba(27,13,3,.38), inset 2px 0 0 rgba(255,222,137,.38); }
.desk-lamp::before { border: 1px solid #173929; box-shadow: 0 3px 5px rgba(20,9,2,.52), inset 0 3px 0 rgba(141,191,136,.36), inset 0 -3px 0 rgba(12,41,26,.42); }
.desk-lamp::after { box-shadow: 0 2px 3px rgba(20,9,2,.42), inset 0 1px 0 rgba(255,227,145,.55); }

/* ==================================================================
   おすすめメディア — 映写幕と投影光
   白い幕は読みやすい紙のまま、投影光で部屋の展示品にする。
   ================================================================== */
.eisha-hikari {
  left: 290px; width: 128px; height: 164px;
  background:
    linear-gradient(92deg, rgba(255,238,180,.46) 0%, rgba(255,229,152,.20) 50%, rgba(255,229,152,0) 78%),
    radial-gradient(ellipse at 7% 82%, rgba(255,249,198,.38), transparent 60%);
  filter: blur(.2px);
}
.osusume {
  overflow: visible;
  border: 2px solid #B89150;
  background:
    radial-gradient(ellipse at 16% 82%, rgba(255,244,202,.88) 0%, rgba(255,244,202,0) 62%),
    radial-gradient(ellipse at 84% 7%, rgba(255,255,255,.72), transparent 36%),
    repeating-linear-gradient(0deg, rgba(126,88,37,.027) 0 1px, transparent 1px 5px),
    linear-gradient(168deg, #FFFDF3 0%, #F7EEDC 59%, #EBD9B9 100%);
  box-shadow:
    0 0 54px rgba(255,218,145,.26),
    0 16px 30px rgba(20,9,2,.54),
    inset 0 0 0 7px rgba(125,83,33,.08),
    inset 0 0 0 1px rgba(255,255,255,.74);
}
.osusume::before {
  content: ""; position: absolute; inset: 13px; pointer-events: none; z-index: 1;
  border: 1px solid rgba(152,111,53,.30);
  box-shadow: inset 0 0 18px rgba(119,76,25,.10);
}
.osusume::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 11px; height: 5px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 18% 80%, transparent);
}
.osusume-nuno { z-index: 2; padding: 45px 54px 41px; }
.osusume-midashi {
  color: #715226; padding: 4px 18px 12px;
  border-bottom-color: #B89355;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.osusume-name { color: #4B2F14; text-shadow: 0 1px 0 rgba(255,255,255,.74); }
.osusume-setsumei, .osusume-hosoku { color: #59422A; }
.osusume-go {
  position: relative; overflow: hidden;
  color: #4E3015; border-color: #714513;
  background:
    linear-gradient(100deg, rgba(255,255,255,.38), transparent 34% 70%, rgba(135,83,23,.13)),
    linear-gradient(165deg, #FFFDF4 0%, #F1E1BD 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), inset 0 -2px 0 rgba(126,77,21,.13), 0 3px 6px rgba(74,41,10,.14);
}
.osusume-go::before,
.osusume-go::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE59A 0 18%, #B47C29 42%, #68400E 100%);
}
.osusume-go::before { left: 10px; }
.osusume-go::after { right: 10px; }
.osusume:hover { filter: brightness(1.035); }
.osusume:hover .osusume-go { background: #FFF9E8; }

/* ==================================================================
   窓辺 — 柔らかな夕方の光、木製の腰棚、生活感のある本と植物
   壁の展示を主張しすぎず、部屋の奥行きを作る静かなコーナーとして整える。
   ================================================================== */
.window {
  border: 3px solid #3F1E0A;
  padding: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,221,145,.10) 0 2px, rgba(51,22,5,.07) 2px 12px, transparent 12px 27px),
    linear-gradient(122deg, #452009 0%, #92602B 24%, #C08B47 51%, #6E3715 76%, #351706 100%);
  box-shadow:
    0 13px 26px rgba(20,9,2,.54),
    0 2px 0 rgba(242,197,111,.42) inset,
    0 -5px 0 rgba(54,23,5,.35) inset,
    inset 0 0 0 7px rgba(65,28,7,.30);
}
.window::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(255,222,147,.52);
  box-shadow: inset 0 0 0 1px rgba(56,23,5,.44);
}
.win-sky {
  inset: 16px;
  background:
    linear-gradient(126deg, rgba(255,255,255,.46) 0 7%, transparent 7% 39%, rgba(255,244,207,.23) 39% 42%, transparent 42% 100%),
    radial-gradient(ellipse at 28% 88%, rgba(255,201,121,.92) 0%, rgba(255,201,121,0) 56%),
    linear-gradient(180deg, #FFF2CC 0%, #FAD99D 43%, #F1B86D 76%, #DD8D43 100%);
  box-shadow: inset 0 0 34px rgba(190,109,41,.36), inset 0 0 0 1px rgba(255,251,227,.70);
}
.win-bar-v, .win-bar-h {
  background:
    repeating-linear-gradient(90deg, rgba(255,220,142,.12) 0 1px, rgba(56,23,5,.10) 1px 7px, transparent 7px 15px),
    linear-gradient(100deg, #49210B 0%, #975B24 42%, #5D2C10 100%);
  box-shadow: 1px 0 0 rgba(255,225,150,.35) inset, -2px 0 3px rgba(51,20,4,.30);
}
.win-bar-v { top: 16px; bottom: 16px; }
.win-bar-h { left: 16px; right: 16px; }
.win-sill {
  left: -24px; right: -24px; bottom: -20px; height: 20px;
  border: 2px solid #452009;
  background:
    repeating-linear-gradient(90deg, rgba(255,222,144,.10) 0 2px, rgba(54,23,5,.08) 2px 14px, transparent 14px 27px),
    linear-gradient(180deg, #D09A4C 0%, #9A5A22 43%, #653014 75%, #44200B 100%);
  box-shadow: 0 6px 10px rgba(20,9,2,.54), inset 0 2px 0 rgba(255,226,150,.55), inset 0 -3px 0 rgba(51,22,5,.34);
}
.sideboard {
  filter: drop-shadow(0 9px 12px rgba(20,9,2,.22));
}
.sideboard::before {
  content: ""; position: absolute; z-index: 3; left: -10px; right: -10px; top: -13px; height: 17px;
  border: 2px solid #44200A; border-radius: 4px 4px 2px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(255,223,148,.10) 0 2px, rgba(54,23,5,.08) 2px 12px, transparent 12px 27px),
    linear-gradient(180deg, #D19A4C 0%, #9A5A22 42%, #5E2C10 100%);
  box-shadow: 0 4px 7px rgba(20,9,2,.46), inset 0 2px 0 rgba(255,224,148,.55);
}
.sideboard-top { z-index: 5; gap: 31px; }
.sideboard-top .stack { filter: drop-shadow(2px 3px 3px rgba(20,9,2,.34)); }
.sideboard-top .plant { filter: drop-shadow(3px 5px 5px rgba(20,9,2,.42)); }
.sideboard-body {
  border: 10px solid #47210B;
  background:
    repeating-linear-gradient(90deg, rgba(255,220,143,.08) 0 2px, rgba(53,22,5,.06) 2px 12px, transparent 12px 28px),
    linear-gradient(103deg, #49210B 0%, #8A4A1C 35%, #B36F2E 54%, #743714 76%, #3D1B08 100%);
  box-shadow:
    0 11px 23px rgba(30,14,4,.56),
    inset 0 2px 0 rgba(255,217,137,.37),
    inset 0 0 0 2px rgba(255,201,122,.16),
    inset 0 -5px 0 rgba(43,18,4,.30);
}
.sideboard-body::before,
.sideboard-body::after {
  content: ""; position: absolute; top: 9px; bottom: 9px; width: 4px;
  background: linear-gradient(180deg, rgba(255,218,139,.35), rgba(71,31,7,.25));
}
.sideboard-body::before { left: 12px; }
.sideboard-body::after { right: 12px; }
.sb-door {
  overflow: hidden;
  border: 1px solid #301406;
  background:
    repeating-linear-gradient(90deg, rgba(255,218,139,.07) 0 1px, rgba(45,17,3,.06) 1px 9px, transparent 9px 20px),
    linear-gradient(180deg, #5B2B0F 0%, #8A491A 58%, #51230C 100%);
  box-shadow: inset 0 0 0 2px rgba(38,14,3,.55), inset 0 2px 0 rgba(231,176,93,.17), inset 0 -8px 11px rgba(20,9,2,.26);
}
.sb-door::before {
  content: ""; position: absolute; inset: 15px 13px;
  border: 1px solid rgba(211,157,76,.48);
  box-shadow: inset 0 0 0 2px rgba(48,17,4,.25), inset 0 6px 10px rgba(255,216,136,.05);
}
.sb-door::after {
  width: 11px; height: 11px; right: 12px;
  background: radial-gradient(circle at 35% 30%, #FFE297 0 18%, #B27B29 48%, #633B0D 100%);
  box-shadow: 0 1px 2px rgba(29,12,2,.60);
}
/* ==================================================================
   図書室の床 — 長い木板、控えめな艶、家具の足元に落ちる影
   床だけが派手にならないよう、壁と家具を受け止める暗めの琥珀色に統一する。
   ================================================================== */
/* 幅広の床板。横の目地は板、縦の細い線は板の端を表す。 */
/* 壁際の二段巾木。床と壁の接点を締め、家具の基準線を一つにする。 */
/* 家具をただ置くのではなく、木床に接地させる柔らかな楕円の影に統一。 */
.contact-shadow {
  height: 31px;
  background: radial-gradient(ellipse, rgba(25,9,2,.58) 0%, rgba(25,9,2,.28) 42%, rgba(25,9,2,0) 74%);
  filter: blur(.25px);
}
/* 机・家具のまわりには、ごく薄い反射を加えて床の艶を感じさせる。 */
.cs-desk,
.cs-side,
.cs-corner {
  box-shadow: 0 2px 8px rgba(232,164,79,.10);
}

/* 紹介額・管理人展示の仕上げ: 見出しを外した紹介文は紙面を詰め、
   自己紹介板は上へ寄せてイーゼルの脚と台座を見せる。 */
.profile-board {
  /* 板を42px上げ、下にある木製イーゼルの脚・受け桟を見せる。 */
  margin-bottom: 108px;
}
/* 連絡口は説明の付属物ではなく、独立した真鍮のアクション札として十分に目立たせる。 */
.contact-open {
  min-height: 58px;
  padding: 10px 20px;
  border-width: 2px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: .045em;
  color: #FFF9E9;
  text-shadow: 0 1px 1px rgba(52,25,6,.62);
  box-shadow:
    inset 0 2px 0 rgba(255,242,194,.70),
    inset 0 -3px 0 rgba(70,37,9,.42),
    0 4px 6px rgba(50,23,5,.45),
    0 0 0 2px rgba(255,226,155,.20);
}
.contact-open::before { inset: 4px; }
.contact-open:hover, .contact-open:focus-visible {
  background: linear-gradient(180deg, #FFF7DD 0%, #EAC983 100%);
  color: #4A2A10;
}

/* ==================================================================
   今日の一枚の羊皮紙と、おすすめメディアの案内札
   付箋は新しい黄色い紙ではなく、手元で大切に使われた古い羊皮紙へ。
   スクリーン下の案内は、2行目まで必ず読める十分な領域を確保する。
   ================================================================== */
.fusen {
  color: #3F2A12;
  border: 2px solid rgba(117,77,27,.78);
  background:
    radial-gradient(ellipse at 7% 8%, rgba(115,67,19,.23) 0%, transparent 26%),
    radial-gradient(ellipse at 92% 88%, rgba(101,57,14,.24) 0%, transparent 30%),
    repeating-linear-gradient(4deg, rgba(96,62,23,.058) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(91deg, rgba(255,244,202,.080) 0 2px, rgba(104,65,18,.030) 2px 13px, transparent 13px 26px),
    linear-gradient(156deg, #F3E5B6 0%, #E6CE91 46%, #D3AF67 100%);
  box-shadow:
    7px 12px 20px rgba(35,16,4,.46),
    inset 0 0 0 2px rgba(255,244,204,.48),
    inset 0 0 22px rgba(95,55,13,.24),
    inset 0 -10px 17px rgba(90,51,10,.16);
}
/* 端の色むら。本文の下に敷き、読みにくくなるほど強くしない。 */
.fusen::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(92,52,11,.18), transparent 11% 88%, rgba(92,52,11,.16)),
    linear-gradient(180deg, rgba(255,248,211,.25), transparent 16% 84%, rgba(100,57,12,.19));
  box-shadow: inset 0 0 0 1px rgba(107,67,20,.33);
}
.fusen::before { z-index: 2; background: linear-gradient(135deg, rgba(111,70,19,.31) 0 48%, rgba(244,225,171,.92) 49% 100%); }
.fusen-midashi { color: #6A4518; border-bottom-color: rgba(106,69,23,.56); }
.fusen-honbun { color: #39230E; text-shadow: 0 1px 0 rgba(255,247,209,.72); }
.fusen-chushaku { color: rgba(67,41,16,.84); border-top-color: rgba(96,60,20,.46); }

/* 案内札を広げ、固定された改行の後半「新しいタブで開きます」まで見せる。 */
.osusume-nuno {
  padding: 34px 42px 58px;
  transform: translateY(-8px);
}
.osusume-go {
  align-self: stretch;
  width: 100%;
  max-width: 492px;
  min-height: 82px;
  margin-top: 19px;
  padding: 10px 31px 11px;
  font-size: 23px;
  line-height: 1.42;
  white-space: normal;
  overflow: visible;
}

/* 本物の古紙テクスチャを使い、黄色い付箋から厚手の羊皮紙へ置き換える。 */
.fusen {
  border: 2px solid rgba(86,54,18,.92);
  border-radius: 1.2% .7% 1.6% .8% / 1.1% .9% 1.5% .8%;
  background-color: #DFCC9B;
  background-image: url("../images/fusen-ancient-parchment.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow:
    8px 13px 22px rgba(30,13,3,.52),
    2px 3px 0 rgba(104,66,21,.78),
    inset 0 0 0 2px rgba(255,239,191,.20),
    inset 0 0 20px rgba(75,41,9,.20);
}
/* 生成した紙の縁を主役にするため、前の均一な色むらは薄く抑える。 */
.fusen::after {
  background:
    linear-gradient(90deg, rgba(68,38,9,.08), transparent 13% 87%, rgba(68,38,9,.08)),
    linear-gradient(180deg, rgba(255,247,207,.06), transparent 18% 82%, rgba(68,38,9,.07));
  box-shadow: inset 0 0 0 1px rgba(82,50,14,.32);
}
.fusen::before {
  opacity: .92;
  background: linear-gradient(135deg, rgba(80,48,12,.46) 0 48%, rgba(229,207,153,.94) 49% 100%);
}
.fusen-midashi { color: #5C3915; border-bottom-color: rgba(88,52,15,.58); }
.fusen-honbun { color: #2F1B09; text-shadow: 0 1px 0 rgba(255,243,202,.58); }
.fusen-chushaku { color: rgba(54,32,11,.88); border-top-color: rgba(82,48,13,.54); }

/* 右上の折れ目をなくし、虫食い・欠け・焦げ跡のある羊皮紙へ差し替える。 */
.fusen {
  background-image: url("../images/fusen-ancient-parchment-distressed.webp");
  border-color: rgba(74,45,13,.94);
  box-shadow:
    8px 13px 22px rgba(30,13,3,.54),
    2px 3px 0 rgba(87,52,14,.82),
    inset 0 0 0 2px rgba(255,239,191,.15),
    inset 0 0 20px rgba(63,34,6,.25);
}
/* 以前の紙の折り返し装飾は使わない。焦げ跡は背景素材の右上に残す。 */
.fusen::before { display: none; }

/* ==================================================================
   おすすめメディア — 無声映画の投影幕
   後半の題字を一行に保てる幅へ少し広げ、粒子・擦り傷・周辺減光を
   文字を妨げない薄さで重ねる。
   ================================================================== */
.osusume {
  width: 660px;
  background:
    radial-gradient(ellipse at 50% 47%, rgba(255,255,249,.92) 0%, rgba(239,235,220,.82) 57%, rgba(71,62,48,.28) 116%),
    repeating-linear-gradient(0deg, rgba(41,35,26,.028) 0 1px, transparent 1px 5px),
    linear-gradient(168deg, #E9E5D8 0%, #D8D3C5 55%, #BDB6A5 100%);
  box-shadow:
    0 0 42px rgba(249,240,207,.18),
    0 16px 30px rgba(20,9,2,.54),
    inset 0 0 0 7px rgba(54,47,36,.15),
    inset 0 0 38px rgba(31,27,21,.20),
    inset 0 0 0 1px rgba(255,255,255,.62);
}
.osusume-nuno {
  padding-left: 48px;
  padding-right: 48px;
  filter: grayscale(.45) sepia(.10) contrast(1.03);
}
/* 題字の後半「ちょっと違う角度から。」を、固定改行の後に一行で置く。 */
.osusume-name {
  font-size: 43px;
  line-height: 1.42;
  letter-spacing: .025em;
  white-space: nowrap;
}
/* 無声映画のフィルム粒子・細い擦り傷・周辺減光。本文はこの上に置く。 */
.osusume-nuno::before {
  content: ""; position: absolute; inset: 13px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 47%, transparent 42%, rgba(20,18,14,.18) 100%),
    repeating-linear-gradient(89deg, transparent 0 57px, rgba(28,24,18,.13) 58px 59px, transparent 60px 139px),
    repeating-linear-gradient(4deg, rgba(22,19,14,.075) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 17% 22%, rgba(28,24,18,.30) 0 1px, transparent 1.8px),
    radial-gradient(circle at 79% 68%, rgba(28,24,18,.24) 0 1px, transparent 1.6px),
    radial-gradient(circle at 43% 82%, rgba(28,24,18,.20) 0 1px, transparent 1.7px);
  opacity: .42;
  mix-blend-mode: multiply;
  animation: silent-film-grain 3.8s steps(2, end) infinite;
}
.osusume-nuno > span { position: relative; z-index: 2; }
.osusume-midashi,
.osusume-name,
.osusume-setsumei,
.osusume-hosoku { color: #332F29; text-shadow: 0 1px 0 rgba(255,255,255,.42); }
.osusume-go {
  color: #332F29;
  border-color: #625A4B;
  background: linear-gradient(165deg, rgba(255,255,250,.74), rgba(205,201,190,.70));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), inset 0 -2px 0 rgba(61,54,43,.18), 0 3px 6px rgba(33,29,22,.18);
}
.osusume-go::before,
.osusume-go::after { background: radial-gradient(circle at 35% 30%, #DED7B6 0 18%, #7D7460 42%, #3A352B 100%); }
@keyframes silent-film-grain {
  0%, 100% { opacity: .34; transform: translate(0, 0); }
  34% { opacity: .45; transform: translate(.5px, -.6px); }
  66% { opacity: .30; transform: translate(-.4px, .5px); }
}
@media (prefers-reduced-motion: reduce) {
  .osusume-nuno::before { animation: none; }
}

/* ==================================================================
   無声映画の投影感をもう一段深める。
   画面の左右にフィルム穴、内部に走査傷と投影の揺らぎを置くが、
   文字のある中央部は常に読める濃さに保つ。
   ================================================================== */
.osusume {
  animation: silent-projection-flicker 5.6s steps(2, end) infinite;
  transform-origin: 50% 50%;
}
/* フィルムの縦送り穴。小さな黒い穴が左右だけを流れる。 */
.osusume-nuno::after {
  content: ""; position: absolute; top: 24px; bottom: 25px; left: 13px; right: 13px;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 3px 5px at 50% 50%, rgba(23,21,18,.58) 0 55%, transparent 60%) left top / 9px 27px repeat-y,
    radial-gradient(ellipse 3px 5px at 50% 50%, rgba(23,21,18,.58) 0 55%, transparent 60%) right top / 9px 27px repeat-y;
  opacity: .46;
  animation: silent-film-sprocket 2.9s steps(2, end) infinite;
}
/* 投影中にときどき走る細い縦傷。中央の文章を隠さない低い不透明度にする。 */
.osusume-nuno::before {
  background:
    linear-gradient(90deg,
      transparent 0 10%, rgba(21,19,16,.10) 10.15% 10.3%, transparent 10.45% 35%,
      rgba(255,255,250,.18) 35.2% 35.35%, transparent 35.5% 68%,
      rgba(24,21,17,.13) 68.15% 68.28%, transparent 68.42% 90%,
      rgba(255,255,250,.13) 90.2% 90.32%, transparent 90.45%),
    radial-gradient(ellipse at 50% 46%, transparent 45%, rgba(18,16,13,.17) 100%),
    repeating-linear-gradient(4deg, rgba(22,19,14,.07) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 17% 22%, rgba(28,24,18,.30) 0 1px, transparent 1.8px),
    radial-gradient(circle at 79% 68%, rgba(28,24,18,.24) 0 1px, transparent 1.6px),
    radial-gradient(circle at 43% 82%, rgba(28,24,18,.20) 0 1px, transparent 1.7px);
  opacity: .46;
  animation: silent-film-grain 3.8s steps(2, end) infinite, silent-film-wander 7s ease-in-out infinite;
}
/* 投影機から出る光は、銀幕へ向かう少し冷たい白へ変える。 */
.eisha-hikari {
  background:
    linear-gradient(92deg, rgba(248,246,227,.60) 0%, rgba(221,218,196,.25) 52%, rgba(221,218,196,0) 82%),
    radial-gradient(ellipse at 7% 82%, rgba(255,255,243,.42), transparent 62%);
  filter: blur(.35px) grayscale(.45);
}
.osusume-name { text-shadow: -1px 0 rgba(42,38,31,.18), 1px 1px 0 rgba(255,255,255,.34); }
@keyframes silent-projection-flicker {
  0%, 100% { filter: brightness(1) contrast(1.02); }
  16% { filter: brightness(.975) contrast(1.04); }
  18% { filter: brightness(1.025) contrast(1.02); }
  48% { filter: brightness(.99) contrast(1.05); }
  50% { filter: brightness(1.018) contrast(1.02); }
  78% { filter: brightness(.982) contrast(1.04); }
}
@keyframes silent-film-sprocket {
  0%, 100% { background-position: left 0 top 0, right 0 top 0; opacity: .40; }
  50% { background-position: left 0 top -8px, right 0 top -8px; opacity: .52; }
}
@keyframes silent-film-wander {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(.55px, -.45px); }
  68% { transform: translate(-.45px, .35px); }
}
@media (prefers-reduced-motion: reduce) {
  .osusume, .osusume-nuno::after { animation: none; }
  .osusume-nuno::before { animation: none; }
}

/* 無声映画の上映中に時折起こる、古い映写機らしい短い明滅。
   7.2秒に数回だけ、短く暗く／明るく揺らす。高速点滅にはしない。 */
.osusume {
  animation: silent-projection-flicker 7.2s steps(1, end) infinite;
}
@keyframes silent-projection-flicker {
  0%, 18%, 22%, 51%, 56%, 78%, 82%, 100% {
    filter: brightness(1) contrast(1.03);
  }
  19%, 53%, 79% {
    filter: brightness(.91) contrast(1.06);
  }
  21%, 55%, 81% {
    filter: brightness(1.055) contrast(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .osusume { animation: none; }
}

/* 白黒映画の字幕カード。文章は投影された文字として、少しだけ揺らぐ。 */
.osusume-nuno {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 48% 44%, rgba(70,68,61,.82) 0%, rgba(33,32,29,.96) 54%, #151513 100%),
    repeating-linear-gradient(0deg, rgba(255,255,245,.025) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 0 18px rgba(8,8,7,.34), inset 0 0 58px rgba(0,0,0,.88);
  filter: none;
  animation: silent-intertitle-jitter 4.8s steps(1, end) infinite;
}
.osusume-nuno::before {
  inset: 12px;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: .40;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(245,241,222,.12) 12.15% 12.3%, transparent 12.45% 48%, rgba(245,241,222,.08) 48.12% 48.25%, transparent 48.4% 79%, rgba(245,241,222,.14) 79.15% 79.27%, transparent 79.42%),
    repeating-linear-gradient(6deg, rgba(242,238,220,.08) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 15% 21%, rgba(255,252,232,.42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 73%, rgba(255,252,232,.36) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(0,0,0,.58) 96%);
  animation: silent-film-grain 2.2s steps(2, end) infinite;
}
/* 縦送り穴は光の抜けた小窓のように、暗い映画画面の左右で目立たせる。 */
.osusume-nuno::after {
  top: 19px; bottom: 20px; left: 13px; right: 13px;
  z-index: 1; opacity: .68;
  background:
    radial-gradient(ellipse 3px 5px at 50% 50%, rgba(231,225,195,.84) 0 54%, transparent 61%) left top / 9px 27px repeat-y,
    radial-gradient(ellipse 3px 5px at 50% 50%, rgba(231,225,195,.84) 0 54%, transparent 61%) right top / 9px 27px repeat-y;
}
.osusume-nuno > span { color: #ECE7D4; text-shadow: 1px 1px 0 rgba(0,0,0,.82), -1px 0 rgba(0,0,0,.55); }
.osusume-midashi { color: #D9D4C2; border-bottom-color: rgba(219,213,191,.55); letter-spacing: .34em; }
.osusume-name { color: #F2EEDB; text-shadow: 1px 1px 0 #080807, -1px 0 rgba(255,255,250,.12); }
.osusume-setsumei, .osusume-hosoku { color: #DDD8C8; }
/* クリック案内も、ボタンではなく古い映画の字幕枠に見せる。 */
.osusume-go {
  color: #EDE8D5;
  border-color: rgba(224,217,193,.72);
  background: rgba(12,12,10,.33);
  box-shadow: inset 0 0 0 1px rgba(255,255,245,.13), 0 0 16px rgba(0,0,0,.32);
}
.osusume-go::before, .osusume-go::after { background: radial-gradient(circle at 35% 30%, #EEE8D0 0 18%, #8F8875 42%, #332F28 100%); }
@keyframes silent-intertitle-jitter {
  0%, 100% { transform: translate(0, 0); }
  17% { transform: translate(.7px, -.5px); }
  18% { transform: translate(-.4px, .35px); }
  52% { transform: translate(.4px, .3px); }
  53% { transform: translate(-.7px, -.2px); }
  84% { transform: translate(.3px, -.4px); }
}
@media (prefers-reduced-motion: reduce) {
  .osusume-nuno { animation: none; }
}

/* 字幕カードの文字組みはすべて画面中央へ。親の継承任せにせず、各要素にも明示する。 */
.osusume-nuno,
.osusume-midashi,
.osusume-name,
.osusume-setsumei,
.osusume-hosoku,
.osusume-go {
  text-align: center;
}
.osusume-go {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
}

/* ==================================================================
   映写距離を取った映画館の構図。
   映写機のレンズから銀幕へ、光の円錐がはっきり届くようにする。
   ================================================================== */
.zone-eisha { width: 1080px; }
/* レンズの高さから始まり、銀幕の中央へ大きく広がる投影光。 */
.eisha-hikari {
  left: 296px;
  bottom: 310px;
  width: 132px;
  height: 284px;
  z-index: 1;
  clip-path: polygon(0 52%, 100% 9%, 100% 91%, 0 58%);
  opacity: .92;
  background:
    linear-gradient(90deg, rgba(255,252,216,.78) 0%, rgba(255,248,202,.49) 24%, rgba(246,239,202,.23) 62%, rgba(246,239,202,0) 100%),
    radial-gradient(ellipse at 4% 55%, rgba(255,255,238,.66) 0%, rgba(255,248,190,.20) 42%, transparent 72%);
  box-shadow: 12px 0 28px rgba(255,242,184,.16);
  filter: blur(.8px) grayscale(.28);
  transform-origin: left 55%;
  animation: silent-projection-beam 3.2s steps(2, end) infinite;
}
/* 光の到着点は、字幕カードの左側に薄く滲む。文字を覆わず「映っている」感だけを残す。 */
.osusume-nuno::before {
  background:
    radial-gradient(ellipse 58% 54% at -10% 58%, rgba(255,252,214,.40) 0%, rgba(247,241,202,.16) 38%, transparent 70%),
    linear-gradient(90deg, transparent 0 12%, rgba(245,241,222,.12) 12.15% 12.3%, transparent 12.45% 48%, rgba(245,241,222,.08) 48.12% 48.25%, transparent 48.4% 79%, rgba(245,241,222,.14) 79.15% 79.27%, transparent 79.42%),
    repeating-linear-gradient(6deg, rgba(242,238,220,.08) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 15% 21%, rgba(255,252,232,.42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 73%, rgba(255,252,232,.36) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(0,0,0,.58) 96%);
}
@keyframes silent-projection-beam {
  0%, 100% { opacity: .92; transform: scaleY(1); }
  17% { opacity: .66; transform: scaleY(.985); }
  19% { opacity: 1; transform: scaleY(1.018); }
  54% { opacity: .76; transform: scaleY(.992); }
  57% { opacity: .96; transform: scaleY(1.01); }
}
@media (prefers-reduced-motion: reduce) {
  .eisha-hikari { animation: none; }
}

/* 光源はレンズに固定したまま、銀幕の中央寄りへ向けて明確に上向きにする。 */
.eisha-hikari {
  height: 420px;
  clip-path: polygon(0 73%, 100% 2%, 100% 59%, 0 80%);
  transform-origin: left 76%;
}
/* 銀幕側の到着光も、下端ではなく中央寄りに受ける。 */
.osusume-nuno::before {
  background:
    radial-gradient(ellipse 58% 54% at -10% 42%, rgba(255,252,214,.40) 0%, rgba(247,241,202,.16) 38%, transparent 70%),
    linear-gradient(90deg, transparent 0 12%, rgba(245,241,222,.12) 12.15% 12.3%, transparent 12.45% 48%, rgba(245,241,222,.08) 48.12% 48.25%, transparent 48.4% 79%, rgba(245,241,222,.14) 79.15% 79.27%, transparent 79.42%),
    repeating-linear-gradient(6deg, rgba(242,238,220,.08) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 15% 21%, rgba(255,252,232,.42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 73%, rgba(255,252,232,.36) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(0,0,0,.58) 96%);
}

/* 映写機を銀幕から離し、首を上げた向きと一致する長い投影線へ。 */
.zone-eisha { width: 1140px; }
.eisha-hikari {
  left: 281px;
  bottom: 300px;
  width: 205px;
  height: 270px;
  clip-path: polygon(0 41%, 100% 6%, 100% 54%, 0 51%);
  transform-origin: left 46%;
  background:
    linear-gradient(90deg, rgba(255,252,220,.74) 0%, rgba(255,248,202,.46) 31%, rgba(246,239,202,.20) 69%, rgba(246,239,202,0) 100%),
    radial-gradient(ellipse at 4% 46%, rgba(255,255,238,.62) 0%, rgba(255,248,190,.17) 44%, transparent 74%);
}

/* ==================================================================
   机上ランプ — ウェッジウッドのジャスパーウェアを思わせる陶器灯。
   青緑のマットな陶器、白いカメオ状のレリーフ、古い真鍮の灯具で仕立てる。
   ================================================================== */
.desk-lamp {
  right: 50px; top: -86px;
  width: 34px; height: 80px;
  border: 2px solid #41686C;
  border-radius: 44% 44% 30% 30% / 22% 22% 16% 16%;
  background:
    radial-gradient(ellipse at 50% 10%, #FFF0B6 0 9%, #B47B2D 10% 17%, transparent 18%),
    linear-gradient(90deg, #315E65 0%, #6E9CA0 18%, #A5C4C0 43%, #668F91 58%, #37646A 83%, #244C54 100%);
  box-shadow:
    0 5px 7px rgba(20,9,2,.46),
    inset 3px 0 2px rgba(255,255,255,.22),
    inset -4px 0 5px rgba(22,56,61,.36);
}
/* アイボリーの絹張りシェード。下帯の白いカメオがジャスパーウェアらしさを作る。 */
.desk-lamp::before {
  left: 50%; top: -44px; transform: translateX(-50%);
  width: 112px; height: 47px;
  border: 2px solid #88632A;
  border-radius: 56px 56px 12px 12px / 35px 35px 10px 10px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(249,247,234,.92) 0 15%, transparent 18%) 0 26px / 28px 14px repeat-x,
    linear-gradient(180deg, transparent 0 48%, rgba(86,130,132,.94) 49% 54%, rgba(245,244,232,.90) 55% 69%, rgba(84,126,129,.82) 70% 75%, transparent 76%),
    linear-gradient(95deg, #C7B17B 0%, #FFF4CD 18%, #FFFBE8 48%, #EBD9A8 79%, #B89150 100%);
  box-shadow:
    0 5px 8px rgba(20,9,2,.50),
    inset 0 3px 4px rgba(255,255,255,.84),
    inset 0 -6px 7px rgba(109,76,30,.20);
}
/* 幅のある陶器台座。下の真鍮リングで机の木肌へ落ち着かせる。 */
.desk-lamp::after {
  left: 50%; bottom: -12px; transform: translateX(-50%);
  width: 64px; height: 21px;
  border: 2px solid #41686C;
  border-radius: 50% 50% 24% 24% / 52% 52% 24% 24%;
  background:
    linear-gradient(180deg, #D7E5DD 0%, #85AAA9 25%, #547F83 61%, #315D63 100%);
  box-shadow:
    0 4px 5px rgba(20,9,2,.45),
    inset 0 3px 2px rgba(255,255,255,.55),
    0 5px 0 -2px #A87B33;
}

/* ==================================================================
   映画館の投影構図 — 映写機を離し、光を銀幕の全幅へ扇状に届かせる。
   ================================================================== */
/* レンズの細い出口から、銀幕の上端から下端までを覆う大きな光の扇。 */
.eisha-hikari {
  left: 198px;
  bottom: 88px;
  width: 292px;
  height: 654px;
  z-index: 1;
  clip-path: polygon(0 71%, 100% 6%, 100% 94%, 0 75%);
  opacity: .42;
  background:
    linear-gradient(90deg, rgba(255,253,222,.76) 0%, rgba(255,249,204,.43) 31%, rgba(248,240,203,.20) 70%, rgba(248,240,203,0) 100%),
    radial-gradient(ellipse at 3% 73%, rgba(255,255,240,.74) 0%, rgba(255,248,194,.19) 47%, transparent 75%);
  box-shadow: 20px 0 42px rgba(255,244,186,.18);
  filter: blur(1px) grayscale(.25);
  transform-origin: left 73%;
}
/* 黒い字幕カードも、映写光を受けて左から全体へごく薄く明るさが広がる。 */
.osusume-nuno::before {
  background:
    radial-gradient(ellipse 125% 104% at -12% 50%, rgba(255,252,216,.31) 0%, rgba(245,239,201,.14) 40%, transparent 72%),
    linear-gradient(90deg, transparent 0 12%, rgba(245,241,222,.12) 12.15% 12.3%, transparent 12.45% 48%, rgba(245,241,222,.08) 48.12% 48.25%, transparent 48.4% 79%, rgba(245,241,222,.14) 79.15% 79.27%, transparent 79.42%),
    repeating-linear-gradient(6deg, rgba(242,238,220,.08) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 15% 21%, rgba(255,252,232,.42) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 73%, rgba(255,252,232,.36) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(0,0,0,.58) 96%);
}

/* 投影光の頂点を、実測したレンズ中心と一致させる。 */
.eisha-hikari {
  /* 左端の頂点(99%)がレンズ中心に来て、右端が銀幕の上端から下端までを照らす。 */
  bottom: 440px;
  height: 654px;
  clip-path: polygon(0 98%, 100% 0%, 100% 97%, 0 100%);
  transform-origin: left 99%;
  background:
    linear-gradient(90deg, rgba(255,253,222,.72) 0%, rgba(255,249,204,.40) 31%, rgba(248,240,203,.18) 70%, rgba(248,240,203,0) 100%),
    radial-gradient(ellipse at 3% 99%, rgba(255,255,240,.68) 0%, rgba(255,248,194,.16) 47%, transparent 75%);
}

/* ==================================================================
   映写機のカチャカチャ感 — 明滅・コマ飛び・フィルム送りを強める。
   ================================================================== */
.osusume {
  animation: silent-projection-rattle 3.4s steps(1, end) infinite;
}
.osusume-nuno {
  animation: silent-intertitle-rattle 1.65s steps(1, end) infinite;
}
.osusume-nuno::before {
  opacity: .62;
  animation: silent-film-grain-rattle 1.15s steps(1, end) infinite;
}
.osusume-nuno::after {
  opacity: .82;
  animation: silent-film-sprocket-rattle 1.08s steps(1, end) infinite;
}
@keyframes silent-projection-rattle {
  0%, 9%, 15%, 32%, 38%, 54%, 61%, 77%, 84%, 100% { filter: brightness(1) contrast(1.08); }
  10%, 55%, 78% { filter: brightness(.72) contrast(1.16); }
  12%, 57%, 80% { filter: brightness(1.14) contrast(1.12); }
  33% { filter: brightness(.81) contrast(1.14); }
  35% { filter: brightness(1.09) contrast(1.11); }
}
@keyframes silent-intertitle-rattle {
  0%, 100% { transform: translate(0, 0); }
  11% { transform: translate(1.15px, -.8px); }
  13% { transform: translate(-.9px, .6px); }
  34% { transform: translate(.55px, -.35px); }
  36% { transform: translate(-1.25px, .45px); }
  58% { transform: translate(.85px, .55px); }
  60% { transform: translate(-.45px, -.75px); }
  81% { transform: translate(1px, -.3px); }
  83% { transform: translate(-1.1px, .65px); }
}
@keyframes silent-film-grain-rattle {
  0%, 100% { opacity: .54; transform: translate(0, 0); }
  12% { opacity: .76; transform: translate(2px, -1px); }
  14% { opacity: .38; transform: translate(-1px, 1px); }
  35% { opacity: .71; transform: translate(-2px, .5px); }
  37% { opacity: .42; transform: translate(1px, -1.5px); }
  59% { opacity: .78; transform: translate(1.5px, 1px); }
  61% { opacity: .46; transform: translate(-1.5px, -.5px); }
  82% { opacity: .73; transform: translate(2px, .5px); }
  84% { opacity: .44; transform: translate(-.5px, -1px); }
}
@keyframes silent-film-sprocket-rattle {
  0%, 100% { background-position: left 0 top 0, right 0 top 0; opacity: .66; }
  12% { background-position: left 0 top -13px, right 0 top -13px; opacity: .92; }
  14% { background-position: left 0 top -4px, right 0 top -4px; opacity: .54; }
  35% { background-position: left 0 top -21px, right 0 top -21px; opacity: .88; }
  37% { background-position: left 0 top -8px, right 0 top -8px; opacity: .58; }
  59% { background-position: left 0 top -29px, right 0 top -29px; opacity: .93; }
  61% { background-position: left 0 top -14px, right 0 top -14px; opacity: .60; }
  82% { background-position: left 0 top -37px, right 0 top -37px; opacity: .88; }
  84% { background-position: left 0 top -18px, right 0 top -18px; opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  .osusume, .osusume-nuno, .osusume-nuno::before, .osusume-nuno::after { animation: none; }
}

/* ==================================================================
   本棚の分類札 — 古い図書館の紙札と真鍮の留め具。
   ================================================================== */
.shelf-plate {
  border: 1px solid #855B27;
  border-radius: 2px;
  font-family: var(--serif);
  font-weight: 700;
  color: #482D16;
  background:
    radial-gradient(ellipse at 18% 25%, rgba(122,77,27,.16) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 78% 72%, rgba(122,77,27,.13) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(116,76,30,.055) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #C89B55 0%, #F7E9C4 9%, #F3E1B5 48%, #E4C98C 87%, #A77331 100%);
  box-shadow:
    0 3px 5px rgba(20,9,2,.55),
    inset 0 1px 0 rgba(255,249,218,.92),
    inset 0 -2px 0 rgba(111,68,22,.23),
    inset 5px 0 6px rgba(107,64,20,.10),
    inset -5px 0 6px rgba(88,50,15,.15);
  text-shadow: 0 1px 0 rgba(255,247,211,.72);
  transform: rotate(-.18deg);
}
/* 紙札の左右を真鍮画鋲で棚板へ留める。 */
.shelf-plate::before,
.shelf-plate::after {
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #F8DB83 0 17%, #B5812D 42%, #5C3614 100%);
  box-shadow: 0 1px 1px rgba(29,14,3,.58), inset 0 1px 0 rgba(255,237,163,.65);
}
.shelf-plate::before { left: 7px; }
.shelf-plate::after { right: 7px; }
/* 大きな分類札は少し厚い紙札にし、上下の縁と二つの真鍮鋲を見せる。 */
.case-plate {
  border: 2px solid #895A22;
  border-radius: 2px;
  color: #452811;
  background:
    repeating-linear-gradient(0deg, rgba(113,70,25,.05) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #B78138 0%, #F9E9BD 10%, #F4E2B6 50%, #E0BE79 89%, #9A672B 100%);
  box-shadow:
    0 5px 9px rgba(20,9,2,.62),
    inset 0 2px 0 rgba(255,249,221,.85),
    inset 0 -3px 0 rgba(108,65,20,.26),
    inset 7px 0 7px rgba(100,57,18,.12),
    inset -7px 0 7px rgba(92,50,15,.14);
  text-shadow: 0 1px 0 rgba(255,248,213,.78);
}
.case-plate::before,
.case-plate::after {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px;
  transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #FFE69A 0 16%, #BB852C 44%, #5A3512 100%);
  box-shadow: 0 1px 2px rgba(29,14,3,.62), inset 0 1px 0 rgba(255,239,169,.7);
}
.case-plate::before { left: 11px; }
.case-plate::after { right: 11px; }

/* ==================================================================
   棚札を白い象牙紙へ — 金色よりも、古い図書館の淡いカードを優先する。
   ================================================================== */
.shelf-plate {
  border-color: #9B907A;
  color: #40362A;
  background:
    radial-gradient(ellipse at 18% 25%, rgba(101,91,70,.12) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 78% 72%, rgba(101,91,70,.10) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(108,98,78,.045) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #CFC5AE 0%, #F8F4E5 9%, #F5F0DE 48%, #E7DEC6 87%, #BDB096 100%);
  box-shadow:
    0 3px 5px rgba(20,9,2,.52),
    inset 0 1px 0 rgba(255,255,246,.96),
    inset 0 -2px 0 rgba(100,88,64,.16),
    inset 5px 0 6px rgba(102,91,68,.07),
    inset -5px 0 6px rgba(83,72,52,.10);
  text-shadow: 0 1px 0 rgba(255,255,248,.82);
}
.shelf-plate::before,
.shelf-plate::after {
  background: radial-gradient(circle at 34% 28%, #FAF5DF 0 17%, #B4AA90 42%, #675D4A 100%);
  box-shadow: 0 1px 1px rgba(29,14,3,.48), inset 0 1px 0 rgba(255,255,244,.74);
}
.case-plate {
  border-color: #9B9079;
  color: #3D3327;
  background:
    repeating-linear-gradient(0deg, rgba(102,91,68,.042) 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #C9BEA5 0%, #FBF6E6 10%, #F5F0DF 50%, #E7DDC3 89%, #B8AA8E 100%);
  box-shadow:
    0 5px 9px rgba(20,9,2,.58),
    inset 0 2px 0 rgba(255,255,248,.92),
    inset 0 -3px 0 rgba(99,86,62,.18),
    inset 7px 0 7px rgba(99,87,64,.08),
    inset -7px 0 7px rgba(79,68,49,.10);
  text-shadow: 0 1px 0 rgba(255,255,248,.86);
}
.case-plate::before,
.case-plate::after {
  background: radial-gradient(circle at 35% 28%, #FFFBE9 0 16%, #BBB198 44%, #645A47 100%);
  box-shadow: 0 1px 2px rgba(29,14,3,.52), inset 0 1px 0 rgba(255,255,245,.80);
}

/* ==================================================================
   机上ランプをクラシックな木製テーブルランプへ。
   波打つ布シェード、挽物の木製支柱、段付きの角台座で「キノコ感」をなくす。
   ================================================================== */
.desk-lamp {
  right: 48px; top: -96px;
  width: 30px; height: 90px;
  border: none;
  border-radius: 18px 18px 14px 14px / 12px 12px 18px 18px;
  background:
    radial-gradient(ellipse 68% 9% at 50% 8%, rgba(255,220,160,.52) 0 34%, transparent 37%),
    radial-gradient(ellipse 90% 11% at 50% 22%, #3C1D0C 0 29%, #A86A34 31% 47%, #3B1C0B 49% 57%, transparent 59%),
    radial-gradient(ellipse 80% 10% at 50% 45%, #3B1C0B 0 28%, #B4773C 30% 49%, #3B1C0B 51% 60%, transparent 62%),
    radial-gradient(ellipse 94% 11% at 50% 69%, #351708 0 29%, #9C5D2A 31% 49%, #351708 51% 61%, transparent 63%),
    linear-gradient(90deg, #2F1507 0%, #6F3516 16%, #B7773D 42%, #D79B58 51%, #814018 66%, #2C1306 100%);
  box-shadow:
    0 5px 7px rgba(20,9,2,.52),
    inset 3px 0 2px rgba(255,220,160,.18),
    inset -4px 0 5px rgba(28,12,4,.42);
}
/* クリーム色の布を張った、ゆるく波打つランプシェード。 */
.desk-lamp::before {
  left: 50%; top: -48px; transform: translateX(-50%);
  width: 120px; height: 64px;
  border: 2px solid #7B4A22;
  border-radius: 40px 40px 33px 33px / 10px 10px 29px 29px;
  clip-path: polygon(12% 0, 88% 0, 96% 85%, 87% 96%, 76% 88%, 64% 99%, 50% 90%, 36% 99%, 24% 88%, 13% 96%, 4% 85%);
  background:
    linear-gradient(90deg, rgba(108,62,28,.22) 0 2%, transparent 3% 20%, rgba(112,64,28,.18) 21% 22%, transparent 23% 49%, rgba(112,64,28,.17) 50% 51%, transparent 52% 78%, rgba(108,62,28,.22) 79% 80%, transparent 81% 97%, rgba(92,47,19,.26) 98% 100%),
    linear-gradient(100deg, #C99557 0%, #F8E0A6 15%, #FFEFC4 46%, #F5D598 75%, #B87A3E 100%);
  box-shadow:
    0 6px 9px rgba(20,9,2,.56),
    inset 0 3px 4px rgba(255,250,224,.86),
    inset 0 -7px 8px rgba(103,57,22,.20);
}
/* 古い家具のような段付きの木台座。 */
.desk-lamp::after {
  left: 50%; bottom: -13px; transform: translateX(-50%);
  width: 72px; height: 25px;
  border: 1px solid #3A1A09;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255,210,142,.26) 0 12%, transparent 13% 42%, rgba(38,16,4,.33) 43% 54%, transparent 55% 74%, rgba(36,15,4,.42) 75% 100%),
    linear-gradient(90deg, #351807 0%, #6A3214 18%, #A5612C 49%, #783916 77%, #301506 100%);
  box-shadow:
    0 4px 5px rgba(20,9,2,.52),
    0 5px 0 -2px #351807,
    inset 0 2px 0 rgba(255,214,149,.24);
}

/* ==================================================================
   取り出した本の説明 — 白いカードではなく、羊皮紙の見開き本として読む。
   ================================================================== */
.pulled { gap: 34px; align-items: center; }
.pull-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  /* 説明の長い本でも、この見開きの中だけで下まで読めるようにする。
     窓(.book-dialog)側をスクロールにすると、傾いた表紙を切らないための余白が要り、
     そのぶん見開きの幅が細くなってしまう(2026-08-21 に一度そうして戻した)。
     幅を変えずに済むよう、スクロールはこの見開き自身が受ける。
     overscroll-behavior-y:contain … 下まで読み切っても、背景の図書室へ抜けない。 */
  max-height: calc(100vh - 96px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  /* スクロールが要る本だけ、細い真鍮色のバーが出る。
     太い既定のバーだと本文の幅をその分だけ削るので、羊皮紙に合う細さにしておく。 */
  scrollbar-width: thin;
  scrollbar-color: #9A7040 rgba(232,209,160,0);
  border: 1px solid #9A7040;
  border-radius: 7px 10px 10px 7px;
  color: #3D2A17;
  background: #E8D1A0;
  box-shadow:
    0 14px 30px rgba(20,9,2,.62),
    -5px 0 11px rgba(42,20,5,.30),
    inset 0 0 0 2px rgba(255,244,205,.38);
}
/* 中央の綴じ目。細い暗線と左右へ落ちる影で、本が開いている厚みを見せる。 */
.pull-card::before {
  content: ""; position: absolute; z-index: 4; top: 9px; bottom: 9px; left: 50%; width: 12px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, rgba(50,28,10,.28), rgba(255,239,194,.50) 37%, rgba(103,60,20,.25) 53%, rgba(38,20,7,.37));
  box-shadow: -10px 0 15px rgba(57,31,9,.13), 10px 0 15px rgba(57,31,9,.13);
}
.pull-card::after {
  content: ""; position: absolute; z-index: 3; inset: 10px; pointer-events: none;
  border: 1px solid rgba(103,69,30,.30);
  box-shadow: inset 0 0 24px rgba(83,48,15,.20);
}
.pull-page {
  position: relative; z-index: 2; min-height: 408px;
  box-sizing: border-box; padding: 42px 44px 47px;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(116,77,30,.13) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 81% 72%, rgba(115,75,27,.10) 0 1px, transparent 1.5px),
    repeating-linear-gradient(4deg, rgba(111,72,27,.045) 0 1px, transparent 1px 7px),
    linear-gradient(105deg, #CBA36D 0%, #F3E1B8 8%, #F8EBCB 48%, #E6C990 100%);
}
.pull-page-left {
  background:
    radial-gradient(ellipse at 16% 19%, rgba(115,74,28,.14) 0 1px, transparent 1.7px),
    repeating-linear-gradient(-5deg, rgba(112,72,25,.048) 0 1px, transparent 1px 7px),
    linear-gradient(100deg, #C39A63 0%, #EED8AA 10%, #F7E9C9 58%, #E9CE97 100%);
  box-shadow: inset -20px 0 24px rgba(76,42,12,.14), inset 2px 0 0 rgba(255,246,214,.46);
}
.pull-page-right {
  box-shadow: inset 20px 0 24px rgba(76,42,12,.16), inset -2px 0 0 rgba(255,246,214,.38);
}
.pull-page h2 {
  position: relative; z-index: 1; margin: 0 0 24px;
  font-family: var(--serif); font-size: 39px; line-height: 1.25; letter-spacing: .08em;
  color: #3A2412; text-shadow: 0 1px rgba(255,247,215,.75);
  border-bottom: 1px solid rgba(105,65,23,.48); padding-bottom: 13px;
}
.pull-page .pull-meta {
  position: relative; z-index: 1; margin: 0 0 18px;
  padding: 0 0 11px; font-size: 22px; line-height: 1.55; color: #624326;
  border-bottom: 1px solid rgba(115,74,29,.25);
}
.pull-page .pull-desc {
  position: relative; z-index: 1; margin: 2px 0 25px;
  font-size: 23px; line-height: 1.8; color: #3E2B19;
}
.pull-page .pull-chui { position: relative; z-index: 1; font-size: 21px; margin-bottom: 22px; }
.pull-page .pull-actions { position: relative; z-index: 2; gap: 14px; }
.pull-page .btn-go { background: #643817; border-color: #54300F; color: #FFF1C7; box-shadow: inset 0 1px 0 rgba(255,229,158,.25), 0 2px 3px rgba(51,24,6,.28); }
.pull-page .btn-close { border-color: #987141; color: #523617; background: rgba(255,247,215,.34); }
@media (max-width: 900px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width: 1000px) and (max-height: 700px) {
  .pulled { gap: 22px; }
  .pull-card { width: min(94vw, 720px); flex: 0 1 auto; }
  .pull-page { min-height: 330px; padding: 29px 29px 42px; }
  .pull-page h2 { font-size: 29px; margin-bottom: 16px; }
  .pull-page .pull-meta { font-size: 17px; margin-bottom: 12px; }
  .pull-page .pull-desc { font-size: 18px; line-height: 1.7; }
  .pull-page .pull-chui { font-size: 17px; }
  .pull-page .pull-actions .btn { min-height: 50px; padding: 6px 20px; font-size: 18px; }
}
@media (max-width: 900px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width: 1000px) and (max-height: 700px) {
  /* スマホ・タブレットでは、開いた本そのものを画面内で縦に読めるようにする。
     横向きでも外枠を固定し、内側だけを唯一のスクロール面にすることで、
     背景の図書室へスクロールが抜けず、最後の「棚にもどす」まで確実に届く。 */
  .book-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: calc(env(safe-area-inset-top) + 14px) 0 calc(env(safe-area-inset-bottom) + 28px);
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .pulled {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 0 24px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-x pan-y pinch-zoom;
  }
  .pull-card {
    margin: 0 auto;
    flex: 0 0 auto;
    /* 狭い画面は内側の .pulled だけを縦スクロール面にする。
       PC向けの見開き内スクロールを残すと、内外2面が指操作を奪い合い、
       羊皮紙の上では下端へ進めなくなるため、高さ制限ごと解除する。 */
    max-height: none;
    overflow: hidden;
    overscroll-behavior-y: auto;
  }
  /* 固定Topボタンは本文と指の通り道を覆い、スワイプ終了時に先頭へ
     戻す原因になる。開いた本は短い内側スクロールなので狭い画面では出さない。 */
  .mobile-top-button-dialog { display: none !important; }
}
/* 本を開いた時点のピンチ倍率を相殺し、見えている画面から読み始める。
   この倍率は閲覧中のピンチでは更新せず、利用者の拡大縮小をそのまま残す。 */
.book-dialog.book-viewport-fit {
  inset: auto; left: var(--book-view-left, 0px); top: var(--book-view-top, 0px);
  width: var(--book-view-width, 100vw); height: var(--book-view-height, 100dvh);
  max-width: none; max-height: none; margin: 0;
  transform: scale(var(--book-view-scale, 1)); transform-origin: 0 0;
}
@media (orientation: landscape) and (max-height: 700px) {
  /* 横向きの低い画面では飾りの表紙より、題名と説明を先に見せる。 */
  .book-dialog.book-viewport-fit .pulled-book { display: none; }
}
@media (max-width: 620px) {
  .pull-card {
    width: min(94vw, 560px);
    max-width: 94vw;
    grid-template-columns: 1fr;
  }
  .pull-page { min-height: auto; }
  /* 最初の羊皮紙はタイトルと年度一覧を落ち着いて見せる。操作ボタンの頁は次に送る。 */
  .pull-page-left { min-height: 400px; }
  .pull-card::before { display: none; }
  .pull-page-left { box-shadow: inset 0 -13px 18px rgba(76,42,12,.13); }
  .pull-page-right { box-shadow: inset 0 13px 18px rgba(76,42,12,.13); }
}

/* 本のモーダル中は背景の図書室を固定する。iOS Safariでも内側の本だけが動く。 */
html.book-dialog-page-locked { overflow: hidden !important; overscroll-behavior: none; }
.book-dialog-page-locked .pano-pan-cues { visibility: hidden; }
body.book-dialog-page-locked {
  position: fixed;
  top: var(--book-page-lock-top, 0);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ==================================================================
   羊皮紙の見開きをさらに古くする。煤けた縁、手垢、染み、虫食いを重ねる。
   ================================================================== */
.pull-page {
  background:
    radial-gradient(ellipse 90px 68px at 9% 13%, rgba(83,46,13,.22) 0%, rgba(130,79,25,.11) 34%, transparent 67%),
    radial-gradient(ellipse 130px 86px at 84% 90%, rgba(72,39,10,.20) 0%, rgba(134,80,25,.10) 38%, transparent 69%),
    radial-gradient(ellipse at 52% 49%, transparent 38%, rgba(85,45,12,.18) 100%),
    repeating-linear-gradient(6deg, rgba(100,60,19,.07) 0 1px, transparent 1px 5px),
    linear-gradient(105deg, #B47C3D 0%, #D9B276 7%, #EFCB8C 28%, #E7BC76 67%, #AD7134 100%);
}
/* 文字の下には届かない薄い汚れの層。読む邪魔はしないが、紙の整いすぎを消す。 */
.pull-page::before {
  content: ""; position: absolute; inset: 9px; z-index: 0; pointer-events: none;
  opacity: .82; mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 38px 25px at 13% 22%, rgba(75,39,10,.38) 0 30%, rgba(130,74,24,.16) 43%, transparent 72%),
    radial-gradient(ellipse 52px 26px at 78% 61%, rgba(91,47,11,.25) 0 27%, rgba(144,82,25,.13) 43%, transparent 72%),
    radial-gradient(ellipse 7px 5px at 8% 71%, rgba(48,22,5,.58) 0 46%, rgba(129,72,19,.38) 49% 63%, transparent 67%),
    radial-gradient(ellipse 5px 4px at 11% 75%, rgba(48,22,5,.54) 0 45%, rgba(129,72,19,.30) 48% 62%, transparent 66%),
    radial-gradient(ellipse 6px 4px at 91% 28%, rgba(48,22,5,.48) 0 45%, rgba(129,72,19,.29) 48% 62%, transparent 66%),
    radial-gradient(ellipse 4px 3px at 87% 32%, rgba(48,22,5,.50) 0 45%, rgba(129,72,19,.28) 48% 62%, transparent 66%),
    radial-gradient(ellipse 120px 48px at 49% 6%, rgba(75,39,10,.14) 0%, transparent 72%),
    radial-gradient(ellipse 110px 44px at 52% 98%, rgba(75,39,10,.17) 0%, transparent 74%);
}
/* 不規則な焦げ縁と、長年めくられた内側の手垢。 */
.pull-page::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(83,43,9,.35),
    inset 0 0 20px 7px rgba(72,35,7,.27),
    inset 11px 0 17px -10px rgba(58,28,5,.55),
    inset -12px 0 18px -10px rgba(58,28,5,.53),
    inset 0 7px 15px -12px rgba(47,21,4,.62),
    inset 0 -9px 17px -12px rgba(47,21,4,.68);
}
.pull-page-left {
  background:
    radial-gradient(ellipse 100px 70px at 7% 15%, rgba(76,39,9,.28) 0%, rgba(140,79,21,.13) 37%, transparent 70%),
    radial-gradient(ellipse 120px 70px at 88% 82%, rgba(75,39,9,.22) 0%, rgba(141,79,22,.10) 39%, transparent 72%),
    repeating-linear-gradient(-5deg, rgba(94,52,15,.07) 0 1px, transparent 1px 6px),
    linear-gradient(100deg, #A86C2E 0%, #D5A766 10%, #EDC783 54%, #D8A75E 100%);
}
.pull-page-right {
  background:
    radial-gradient(ellipse 110px 72px at 92% 13%, rgba(77,40,9,.26) 0%, rgba(140,80,22,.12) 38%, transparent 70%),
    radial-gradient(ellipse 115px 74px at 11% 87%, rgba(76,39,9,.20) 0%, rgba(140,80,22,.10) 39%, transparent 72%),
    repeating-linear-gradient(5deg, rgba(93,51,14,.065) 0 1px, transparent 1px 6px),
    linear-gradient(105deg, #BD833F 0%, #E3B66F 12%, #F0CF91 52%, #D39A54 100%);
}
.pull-page h2, .pull-page .pull-meta, .pull-page .pull-desc, .pull-page .pull-chui, .pull-page .pull-actions { z-index: 2; }

/* ==================================================================
   古い魔導書の損傷。焦げて破れた外縁、虫食い、剥がれた紙の暗い穴。
   ================================================================== */
.pull-card {
  background: #2E1306;
  border-color: #5A2D0E;
  box-shadow:
    0 16px 34px rgba(15,5,1,.78),
    -6px 0 15px rgba(30,10,2,.52),
    inset 0 0 0 2px rgba(203,130,49,.24);
}
.pull-page-left {
  clip-path: polygon(2% 0, 100% 0, 99% 100%, 3% 100%, 0 95%, 2% 87%, 0 78%, 1.5% 69%, 0 58%, 1% 46%, 0 34%, 2% 22%, 0 11%);
}
.pull-page-right {
  clip-path: polygon(0 0, 98% 0, 100% 7%, 98% 16%, 100% 27%, 98.5% 39%, 100% 51%, 98% 64%, 100% 76%, 98% 87%, 100% 96%, 96% 100%, 0 100%);
}
/* 外周の焼けを深くして、薄いノート紙のような均一さを消す。 */
.pull-page::after {
  z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(77,33,4,.55),
    inset 0 0 25px 9px rgba(57,22,3,.48),
    inset 15px 0 22px -10px rgba(35,10,1,.82),
    inset -16px 0 23px -10px rgba(35,10,1,.82),
    inset 0 10px 20px -12px rgba(29,8,1,.90),
    inset 0 -13px 23px -13px rgba(29,8,1,.92);
}
.pull-damage {
  position: absolute; z-index: 6; pointer-events: none; display: block;
  mix-blend-mode: multiply;
}
/* 左外縁：焼けた欠けと虫食いが紙の外へ続く。 */
.pull-damage-left {
  left: -9px; top: -7px; width: 126px; height: 150px;
  background:
    radial-gradient(ellipse 16px 23px at 9% 13%, #281003 0 42%, #6F3510 44% 58%, rgba(185,104,31,.56) 60% 70%, transparent 73%),
    radial-gradient(ellipse 7px 9px at 30% 7%, #301205 0 42%, #8B4C18 45% 61%, transparent 64%),
    radial-gradient(ellipse 5px 6px at 5% 47%, #251002 0 44%, #8A4A17 47% 62%, transparent 66%),
    radial-gradient(ellipse 8px 7px at 16% 72%, #2A1003 0 42%, #754014 45% 63%, transparent 67%),
    radial-gradient(ellipse 30px 12px at 17% 2%, rgba(58,21,3,.67) 0%, transparent 70%);
  filter: drop-shadow(1px 2px 1px rgba(8,2,0,.58));
}
/* 右外縁：大きめの焦げ穴と、紙が千切れた煤けた縁。 */
.pull-damage-right {
  right: -9px; bottom: -8px; width: 138px; height: 160px;
  background:
    radial-gradient(ellipse 21px 15px at 91% 87%, #271002 0 40%, #6E3410 42% 57%, rgba(192,111,34,.61) 59% 72%, transparent 75%),
    radial-gradient(ellipse 8px 11px at 75% 97%, #2A1103 0 42%, #834517 44% 62%, transparent 66%),
    radial-gradient(ellipse 6px 5px at 97% 51%, #291002 0 43%, #8B4A18 46% 62%, transparent 66%),
    radial-gradient(ellipse 9px 7px at 84% 28%, #2A1003 0 42%, #764014 45% 63%, transparent 67%),
    radial-gradient(ellipse 36px 15px at 94% 98%, rgba(52,18,2,.72) 0%, transparent 72%);
  filter: drop-shadow(-1px 2px 1px rgba(8,2,0,.60));
}
/* 本文の上層を明示的に保ち、損傷は余白で見せる。 */
.pull-page h2, .pull-page .pull-meta, .pull-page .pull-desc, .pull-page .pull-chui, .pull-page .pull-actions { position: relative; z-index: 4; }

/* ==================================================================
   魔導書の損傷はそのまま、羊皮紙の地色だけを淡い生成りへ戻す。
   ================================================================== */
.pull-page {
  background:
    radial-gradient(ellipse 90px 68px at 9% 13%, rgba(92,53,16,.18) 0%, rgba(145,89,30,.09) 34%, transparent 67%),
    radial-gradient(ellipse 130px 86px at 84% 90%, rgba(81,45,13,.16) 0%, rgba(141,85,27,.08) 38%, transparent 69%),
    radial-gradient(ellipse at 52% 49%, transparent 39%, rgba(92,52,15,.14) 100%),
    repeating-linear-gradient(6deg, rgba(110,71,29,.055) 0 1px, transparent 1px 5px),
    linear-gradient(105deg, #D1AD74 0%, #E9D0A0 7%, #F9E9C9 32%, #F4DCAA 68%, #CAA066 100%);
}
.pull-page-left {
  background:
    radial-gradient(ellipse 100px 70px at 7% 15%, rgba(87,47,12,.22) 0%, rgba(150,89,28,.10) 37%, transparent 70%),
    radial-gradient(ellipse 120px 70px at 88% 82%, rgba(83,45,11,.17) 0%, rgba(151,88,27,.08) 39%, transparent 72%),
    repeating-linear-gradient(-5deg, rgba(103,62,21,.06) 0 1px, transparent 1px 6px),
    linear-gradient(100deg, #C99E62 0%, #E8C891 10%, #FBEAC9 56%, #E4B977 100%);
}
.pull-page-right {
  background:
    radial-gradient(ellipse 110px 72px at 92% 13%, rgba(86,47,12,.20) 0%, rgba(151,90,28,.09) 38%, transparent 70%),
    radial-gradient(ellipse 115px 74px at 11% 87%, rgba(84,46,11,.15) 0%, rgba(151,90,28,.07) 39%, transparent 72%),
    repeating-linear-gradient(5deg, rgba(102,60,20,.055) 0 1px, transparent 1px 6px),
    linear-gradient(105deg, #D6B170 0%, #F0D7A5 13%, #FFF0CE 52%, #E7BD7C 100%);
}

/* ==================================================================
   焦げた魔導書の縁は残し、紙面中心だけを白っぽい古紙色へ。
   ================================================================== */
.pull-page-left {
  background:
    radial-gradient(ellipse 100px 70px at 7% 15%, rgba(87,47,12,.21) 0%, rgba(150,89,28,.09) 37%, transparent 70%),
    radial-gradient(ellipse 120px 70px at 88% 82%, rgba(83,45,11,.15) 0%, rgba(151,88,27,.06) 39%, transparent 72%),
    repeating-linear-gradient(-5deg, rgba(103,62,21,.047) 0 1px, transparent 1px 6px),
    linear-gradient(100deg, #D5AE76 0%, #EED5AA 10%, #FFF9E8 56%, #E7C38A 100%);
}
.pull-page-right {
  background:
    radial-gradient(ellipse 110px 72px at 92% 13%, rgba(86,47,12,.19) 0%, rgba(151,90,28,.08) 38%, transparent 70%),
    radial-gradient(ellipse 115px 74px at 11% 87%, rgba(84,46,11,.14) 0%, rgba(151,90,28,.06) 39%, transparent 72%),
    repeating-linear-gradient(5deg, rgba(102,60,20,.046) 0 1px, transparent 1px 6px),
    linear-gradient(105deg, #DFBF88 0%, #F5E2C0 13%, #FFFDF1 52%, #E9C990 100%);
}

/* ==================================================================
   窓の向こうのヨーロッパ
   景色は窓枠の内側だけに収め、クリックしたときだけ名所の紙札を開く。
   ================================================================== */
.world-window {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: content-box;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: initial;
  touch-action: manipulation;
}
/* 景色・ガラス反射・窓台は見た目専用。入力は常に親の窓全体が受け取る。 */
.world-window > .win-sky,
.world-window > .win-bar-v,
.world-window > .win-bar-h,
.world-window > .win-sill,
.world-window .win-sky * { pointer-events: none; }
.world-window:focus-visible {
  outline: 4px solid #FFE291;
  outline-offset: 10px;
}
.world-window .win-sky { overflow: hidden; }
.world-window-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: saturate(.88) sepia(.09) contrast(.98) brightness(1.03);
  /* 右壁の解説と同一フレームで切り替えるため、写真だけの遅いフェードは使わない。 */
  transition: none;
}
.world-window.has-landmark .world-window-image { opacity: 1; }
/* 名所が現れたら、景色を一枚の絵として見せるため中央の十字桟を外す。 */
.world-window.has-landmark .win-bar-v,
.world-window.has-landmark .win-bar-h { display: none; }
.world-window .win-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,250,225,.22) 0 15%, transparent 36% 73%, rgba(116,53,13,.11) 100%),
    linear-gradient(180deg, rgba(255,239,195,.09), rgba(73,31,8,.12));
  box-shadow: inset 0 0 34px rgba(125,54,10,.25), inset 0 0 0 1px rgba(255,249,224,.35);
}
.world-window .win-bar-v,
.world-window .win-bar-h { z-index: 2; }
.world-window .win-sill { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .world-window-image { transition: none; }
}

/* ==================================================================
   窓辺の旅 — 右壁の大きな羊皮紙
   写真は窓の外だけに置き、国名と解説は隣の壁の旅の案内書に記す。
   ================================================================== */
.zone-corner { width: 640px; }
.world-landmark-scroll {
  position: absolute;
  z-index: 6;
  top: 40px;
  left: -50px;
  width: 580px;
  height: 620px;
  /* 観光案内の羊皮紙は壁に対してまっすぐ掲げる。親要素のfilterは
     文字まで画像のように合成してにじませるため使わない。 */
  filter: none;
  transform: none;
  text-rendering: geometricPrecision;
}
.world-scroll-page {
  position: absolute;
  z-index: 1;
  inset: 17px 11px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 58px 45px 44px;
  color: #38200D;
  border: 2px solid #7A4B20;
  border-radius: 4px 5px 6px 5px;
  background:
    radial-gradient(ellipse at 10% 5%, rgba(255,255,255,.70), transparent 34%),
    radial-gradient(ellipse at 93% 91%, rgba(99,49,13,.22), transparent 43%),
    linear-gradient(103deg, #FDF5D9 0%, #F3E3B6 44%, #E8CC91 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,251,224,.62),
    inset 0 0 30px rgba(121,67,19,.18),
    0 0 0 1px rgba(72,35,8,.45),
    0 9px 14px rgba(36,16,3,.34);
}
.world-scroll-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 13px;
  opacity: .48;
  background:
    radial-gradient(ellipse at 12% 27%, rgba(90,43,11,.16) 0 1px, transparent 3px),
    radial-gradient(ellipse at 87% 77%, rgba(90,43,11,.14) 0 1px, transparent 3px),
    radial-gradient(ellipse at 61% 10%, rgba(90,43,11,.11) 0 1px, transparent 3px);
  background-size: 47px 39px, 61px 49px, 73px 57px;
}
.world-scroll-page::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 64px;
  height: 64px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: linear-gradient(135deg, rgba(108,60,18,.24) 0%, #F9EAC0 52%, #C79A57 53%, #EBD39C 100%);
  box-shadow: -4px 5px 7px rgba(64,29,5,.20);
}
.world-scroll-roll {
  position: absolute;
  z-index: 2;
  left: -7px;
  width: 594px;
  height: 28px;
  border: 2px solid #704116;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255,245,205,.78) 0 14%, rgba(194,142,70,.62) 15% 29%, #F4D89E 30% 53%, #B77435 54% 75%, #62320E 100%);
  box-shadow: 0 4px 6px rgba(40,17,3,.35), inset 0 2px 0 rgba(255,249,218,.72);
}
.world-scroll-roll::before,
.world-scroll-roll::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFE7A4 0 16%, #B57A35 36%, #60300D 77%);
  box-shadow: 0 1px 2px rgba(30,13,2,.5);
}
.world-scroll-roll::before { left: 9px; }
.world-scroll-roll::after { right: 9px; }
.world-scroll-roll-top { top: 0; }
.world-scroll-roll-bottom { bottom: 0; transform: rotate(180deg); }
.world-scroll-kicker {
  margin: 0 0 19px;
  color: #5C3413;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .22em;
}
.world-scroll-kicker::before {
  content: "✦";
  margin-right: 9px;
  color: #A46B27;
}
.world-scroll-country {
  display: inline-block;
  margin: 0 0 9px;
  padding: 4px 12px 5px;
  color: #FFF8E5;
  border: 1px solid #674019;
  border-radius: 999px;
  background: linear-gradient(180deg, #A67339, #673410);
  box-shadow: inset 0 1px 0 rgba(255,237,188,.50);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .07em;
}
.world-scroll-name {
  margin: 0 0 14px;
  padding-right: 25px;
  color: #2F1706;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .05em;
}
.world-scroll-category {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 11px;
  border: 1px solid rgba(108,64,23,.38);
  color: #59330F;
  background: rgba(255,252,235,.74);
  font-size: 16px;
  font-weight: 800;
}
.world-scroll-description {
  margin: 0;
  padding: 11px 0 0;
  border-top: 0;
  color: #3A210D;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.78;
  letter-spacing: .02em;
}
.world-scroll-credit {
  position: absolute;
  right: 45px;
  bottom: 28px;
  left: 45px;
  margin: 0;
  padding-top: 0;
  border-top: 0;
  color: #4A2B13;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.42;
}
.world-scroll-credit a { color: #542D0E; }
.world-scroll-credit a:hover { color: #8C4814; }
/* 名所が切り替わった後も、案内板は常に水平・垂直のままにする。 */
.world-landmark-scroll.is-filled { transform: none; }

/* ==================================================================
   窓下キャビネット — 左の観光地戸棚だけを操作可能にする。
   中央・右は旅行室の造作家具として、静かな閉じた扉を残す。
   ================================================================== */
.sb-cabinet-slot {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  perspective: 900px;
}
.sb-cabinet-slot .sb-door {
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: transform .52s cubic-bezier(.2,.75,.22,1), filter .18s ease;
  transform-style: preserve-3d;
}
.sb-cabinet-slot .sb-door:hover { filter: brightness(1.12); }
.sb-cabinet-slot .sb-door:focus-visible {
  outline: 4px solid #FFE291;
  outline-offset: 4px;
}
.sb-cabinet-map .sb-door { transform-origin: left center; }
.sb-cabinet-map.is-open .sb-door { transform: rotateY(-105deg); }
.sb-mini-display {
  position: absolute;
  z-index: 1;
  inset: 7px;
  overflow: hidden;
  opacity: 0;
  border: 1px solid #2D1205;
  border-radius: 1px;
  background: #2B1306;
  box-shadow: inset 0 0 0 2px rgba(255,220,143,.14), inset 0 0 18px rgba(0,0,0,.45);
  transition: opacity .18s ease .15s;
}
.sb-cabinet-slot.is-open .sb-mini-display { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sb-cabinet-slot .sb-door, .sb-mini-display { transition: none; }
}

/* ==================================================================
   窓下キャビネット（開いた左棚の城を押して観光地を巡る）
   閉じる専用ボタンは置かず、扉の再操作または10秒無操作で閉じる。
   ================================================================== */
.sideboard {
  left: 42px;
  right: 42px;
  bottom: 122px;
  height: 222px;
}
.sideboard-top {
  left: 16px;
  right: 16px;
  gap: 18px;
}
.sideboard-body {
  gap: 6px;
  padding: 7px;
  border-width: 7px;
}
.sb-cabinet-slot .sb-door {
  background:
    linear-gradient(90deg, rgba(255,214,141,.08), transparent 26%, rgba(33,13,3,.18) 72%),
    linear-gradient(180deg, #503014 0%, #70431B 50%, #47260F 100%);
  box-shadow:
    inset 0 0 0 2px rgba(32,13,3,.58),
    inset 0 8px 12px rgba(20,8,2,.30),
    inset 0 -7px 10px rgba(25,9,2,.34);
}
/* 閉じた扉は金具も文字もない、完全に無地の木製扉にする。 */
.sb-cabinet-slot .sb-door::after { display: none; }
.sb-mini-display {
  inset: 4px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: 5px;
  pointer-events: none;
  border: 1px solid #2B1104;
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 50% 19%, rgba(255,233,173,.28), transparent 44%),
    linear-gradient(180deg, #4B2A12 0%, #211005 100%);
  box-shadow: inset 0 0 0 2px rgba(255,220,143,.14), inset 0 0 18px rgba(0,0,0,.48);
  transition: opacity .18s ease .15s;
}
.sb-cabinet-slot.is-open .sb-mini-display {
  opacity: 1;
  pointer-events: auto;
}
.sb-mini-map {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,237,188,.34), transparent 45%),
    linear-gradient(180deg, #5F3A18, #291506 88%);
}
.sb-display-icon {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 1px;
  place-items: center;
  overflow: hidden;
  color: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}
.sb-display-icon::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2px 7px 1px;
  opacity: .45;
  border-bottom: 4px solid rgba(174,107,39,.52);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(14,5,1,.55), transparent 70%);
}
.sb-display-icon img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(17,5,1,.72));
  transition: transform .16s ease, filter .16s ease;
}
.sb-display-icon:hover img,
.sb-display-icon:focus-visible img {
  filter: brightness(1.10) saturate(1.04) drop-shadow(0 3px 4px rgba(17,5,1,.78));
  transform: scale(1.045);
}
.sb-display-icon:focus-visible {
  outline: 2px solid #FFE291;
  outline-offset: -2px;
}
.sb-cabinet-static .sb-door {
  pointer-events: none;
  cursor: default;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .sb-display-icon img,
  .sb-mini-display { transition: none; }
}

/* 後続の個別 cursor 指定より優先して、戸棚の全操作面に共通の黄色い感嘆符を出す。 */
.sb-cabinet-slot .gimmick-clickable {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 C8 2 3 8 3 16 s5 14 13 14 13-6 13-14S24 2 16 2Z' fill='%23FFD84D' stroke='%23552F05' stroke-width='2'/%3E%3Cpath d='M13 8h6l-1 11h-4L13 8Z' fill='%23552F05'/%3E%3Ccircle cx='16' cy='23.5' r='2.2' fill='%23552F05'/%3E%3C/svg%3E") 16 16, pointer;
}

/* 窓辺の旅: 待機中は欧州クラシックの厚手カーテンを閉じ、
   観光地を選んだ瞬間に左右へ開いて窓の向こうを見せる。 */
.world-window > .win-curtain-rod,
.world-window > .win-curtain,
.world-window > .win-curtain * { pointer-events: none; }
.world-window .win-curtain-rod {
  position: absolute;
  z-index: 8;
  top: 9px;
  left: 7px;
  right: 7px;
  height: 15px;
  border: 1px solid #4A230B;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,235,168,.95), rgba(192,128,43,.92) 30%, #81501B 62%, #D7A54D 100%);
  box-shadow: 0 2px 3px rgba(28,10,2,.60), inset 0 1px rgba(255,247,202,.88);
}
.world-window .win-curtain-rod::before,
.world-window .win-curtain-rod::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 20px;
  height: 20px;
  border: 1px solid #52270D;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF1AD, #D49A35 44%, #724011 76%);
  box-shadow: 0 1px 3px rgba(22,7,1,.65);
}
.world-window .win-curtain-rod::before { left: -5px; }
.world-window .win-curtain-rod::after { right: -5px; }
.world-window .win-curtain {
  position: absolute;
  z-index: 7;
  top: 18px;
  bottom: 17px;
  width: 50%;
  opacity: 1;
  border-top: 2px solid rgba(255,216,131,.78);
  border-bottom: 4px solid rgba(93,27,21,.82);
  background:
    radial-gradient(ellipse at 16% 12%, rgba(255,222,151,.27), transparent 32%),
    repeating-linear-gradient(90deg, rgba(47,7,12,.25) 0 7px, rgba(157,39,43,.13) 7px 13px, rgba(255,185,120,.17) 13px 16px, rgba(79,10,18,.22) 16px 25px),
    linear-gradient(90deg, #55131B 0%, #8D2930 20%, #B24744 47%, #6A1823 77%, #3B0B13 100%);
  box-shadow: inset 2px 0 8px rgba(255,208,130,.20), inset -4px 0 12px rgba(25,3,7,.54), 0 2px 5px rgba(20,5,2,.45);
  transition: transform .88s cubic-bezier(.2,.78,.20,1), filter .35s ease;
  will-change: transform;
}
.world-window .win-curtain-left {
  left: 7px;
  border-radius: 2px 0 11px 3px;
  transform-origin: left center;
}
.world-window .win-curtain-right {
  right: 7px;
  border-radius: 0 2px 3px 11px;
  transform-origin: right center;
  background:
    radial-gradient(ellipse at 84% 12%, rgba(255,222,151,.27), transparent 32%),
    repeating-linear-gradient(90deg, rgba(79,10,18,.22) 0 7px, rgba(255,185,120,.17) 7px 10px, rgba(157,39,43,.13) 10px 16px, rgba(47,7,12,.25) 16px 25px),
    linear-gradient(90deg, #3B0B13 0%, #6A1823 23%, #B24744 53%, #8D2930 80%, #55131B 100%);
  box-shadow: inset -2px 0 8px rgba(255,208,130,.20), inset 4px 0 12px rgba(25,3,7,.54), 0 2px 5px rgba(20,5,2,.45);
}
/* 画像を確定した同じ瞬間に、両側へたたみ込むようにカーテンを開く。 */
.world-window.has-landmark .win-curtain-left { transform: scaleX(.10); filter: brightness(1.08); }
.world-window.has-landmark .win-curtain-right { transform: scaleX(.10); filter: brightness(1.08); }
.world-window .win-sill { z-index: 9; }
@media (prefers-reduced-motion: reduce) {
  .world-window .win-curtain { transition: none; }
}

/* 窓辺右下のくつろぎ用家具。大きめのソファーを床へしっかり接地させる。 */
.floor-sofa {
  position: absolute;
  z-index: 1;
  left: 5px;
  bottom: 74px;
  width: 410px;
  height: 254px;
  filter: drop-shadow(8px 11px 13px rgba(20,9,2,.60)) saturate(.95);
  transform-origin: center bottom;
}

/* 管理人の猫: 額の猫を押すと、古いアニメの終わりのように丸窓から一杯やる。 */
.profile-cat-gimmick {
  position: relative;
  z-index: 1;
  flex: 0 0 118px;
  width: 118px;
  height: 118px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
/* クリック後にブラウザ既定の青い円を残さない。キーボード操作時は
   猫の絵そのものを淡く光らせ、別の円を足さずに位置を伝える。 */
.profile-cat-gimmick:focus { outline: none; }
.profile-cat-gimmick:focus-visible .profile-icon {
  filter: brightness(1.08) drop-shadow(0 0 5px rgba(255, 218, 113, .92));
}
.profile-cat-gimmick .profile-icon {
  display: block;
  width: 104px;
  height: 104px;
  transition: opacity 1.85s cubic-bezier(.22,.66,.28,1), transform 1.85s cubic-bezier(.22,.66,.28,1);
}
.profile-board.is-cat-sipping .profile-cat-gimmick .profile-icon {
  opacity: .16;
  transform: scale(.82);
}
/* 元画像は丸窓が完全に重なって消えるまで薄いまま維持する。
   演出終了後に is-cat-sipping が外れてから通常の濃さへ戻る。 */
.cat-sake-scene {
  position: absolute;
  z-index: 6;
  top: 92px;
  left: 18px;
  width: 330px;
  height: 330px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(42px) scale(.12) rotate(-7deg);
  transform-origin: 50% 76%;
}
.cat-sake-circle {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 5px double #8B5B27;
  border-radius: 50%;
  background: #E9D8B6;
  box-shadow: 0 8px 15px rgba(56,27,8,.48), 0 0 0 4px rgba(255,247,220,.74);
}
.cat-sake-circle { position: relative; transform-origin: 0 0; }
.cat-sake-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transform: scale(1.075);
  transform-origin: 50% 78%;
  backface-visibility: hidden;
  will-change: opacity;
}
.profile-board.is-cat-sipping .cat-sake-scene { animation: cat-sake-pop 11.6s cubic-bezier(.2,.74,.25,1) both; }
.profile-board.is-cat-sipping .cat-sake-circle { animation: cat-sake-circle-return 11.6s cubic-bezier(.22,.66,.28,1) both; }
/* 注ぐ場面は飲み始める前だけに限定し、その後は飲む→ため息だけを切り替える。 */
.profile-board.is-cat-sipping .cat-sake-frame-pour { z-index: 1; animation: cat-sake-pour 11.6s linear both; }
/* 絵は重ねず、前の場面をゆっくり消して間を置いてから次の場面をじわっと現す。 */
.profile-board.is-cat-sipping .cat-sake-frame-sip { z-index: 2; animation: cat-sake-sip 11.6s linear both; }
.profile-board.is-cat-sipping .cat-sake-frame-sigh { z-index: 3; animation: cat-sake-sigh 11.6s linear both; }
@keyframes cat-sake-pop {
  0% { opacity: 0; transform: translateY(42px) scale(.12) rotate(-7deg); }
  7% { opacity: 1; transform: translateY(-8px) scale(1.06) rotate(2deg); }
  11%, 96% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes cat-sake-circle-return {
  0%, 84% { transform: translate(0, 0) scale(1); }
  /* JavaScriptで測った元の小さい猫アイコンへ、最後の一枚だけを縮めて戻す。 */
  100% { transform: translate(var(--cat-return-x, -18px), var(--cat-return-y, -85px)) scale(var(--cat-return-scale, .3059)); }
}
@keyframes cat-sake-pour {
  0%, 20% { opacity: 1; }
  30%, 100% { opacity: 0; }
}
@keyframes cat-sake-sip {
  0%, 37% { opacity: 0; }
  58%, 62% { opacity: 1; }
  72%, 100% { opacity: 0; }
}
@keyframes cat-sake-sigh {
  0%, 74% { opacity: 0; }
  /* 終盤はこの一枚だけを残し、別の絵が差し込まないようにする。 */
  80%, 100% { opacity: 1; }
}
@media (max-width: 700px) {
  .cat-sake-scene { top: 84px; left: 14px; width: 286px; height: 286px; }
}

/* ==================================================================
   どの画面幅でも使えるページTop。書斎・本・過去問のどこにいても
   右下の青い栞から、現在のページの先頭へ戻れるようにする。
   ================================================================== */
.mobile-top-button {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 2147483000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 54px;
  padding: 9px 18px;
  border: 2px solid #E8F5FF;
  border-radius: 28px;
  color: #FFFFFF;
  background: linear-gradient(160deg, #3A9BE8 0%, #1870C4 55%, #0C488E 100%);
  box-shadow: 0 5px 13px rgba(8,45,92,.48), inset 0 1px 0 rgba(255,255,255,.55);
  font: 800 18px/1.2 var(--serif);
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.23,1,.32,1), box-shadow .16s cubic-bezier(.23,1,.32,1);
}
.mobile-top-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(8,45,92,.54), inset 0 1px 0 rgba(255,255,255,.55);
}
.mobile-top-button:active { transform: translateY(1px) scale(.97); }
.mobile-top-button:focus-visible { outline: 3px solid #FFDC70; outline-offset: 3px; }
@media (max-width: 700px) {
  /* 「管理人」と同じ大きさで、少し間を空けて右方向をはっきり示す。 */
  .profile-board h2 { display: flex; align-items: baseline; gap: 18px; flex-wrap: nowrap; white-space: nowrap; }
  .mobile-top-button {
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    min-width: 76px;
    min-height: 50px;
    padding: 8px 15px;
    font-size: 17px;
  }
  /* 模擬テストだけは下部に固定の採点欄があるため、Topボタンをその上へ逃がす。 */
  .page-moshi .mobile-top-button {
    bottom: calc(env(safe-area-inset-bottom) + 96px);
  }
}

/* 現在のページを離れてサイト入口へ戻るための、パンくず内の大きな道しるべ。 */
.breadcrumb .breadcrumb-site-top {
  min-height: 52px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: #FFFFFF;
  background: #B42329;
  border-radius: 4px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .02em;
  text-decoration: none;
  text-shadow: 0 1px rgba(70,14,17,.38);
  box-shadow: 0 2px 0 rgba(80,12,15,.34);
}
.breadcrumb .breadcrumb-site-top:hover {
  background: #971D22;
}
.breadcrumb .breadcrumb-site-top:focus-visible {
  outline: 3px solid #FFDC70;
  outline-offset: 3px;
}

/* スマホでは右壁の羊皮紙を、写真の下に浮かぶ小さな旅の案内書へ切り替える。
   横に長い書斎を動かさなくても、景色と説明を同じ画面で読めるようにする。 */
@media (max-width: 700px) {
  .world-landmark-scroll {
    position: fixed;
    z-index: 70;
    top: auto;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 120px);
    left: 12px;
    display: none;
    width: auto;
    height: min(250px, 31dvh);
    max-height: 250px;
  }
  .world-landmark-scroll.is-filled { display: block; }
  .world-scroll-page {
    inset: 12px 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 31px 24px 25px;
  }
  .world-scroll-roll {
    left: -5px;
    width: calc(100% + 10px);
    height: 22px;
  }
  .world-scroll-roll::before,
  .world-scroll-roll::after {
    top: 4px;
    width: 12px;
    height: 12px;
  }
  .world-scroll-kicker {
    margin: 0 0 7px;
    font-size: 13px;
    letter-spacing: .16em;
  }
  .world-scroll-kicker::before { margin-right: 5px; }
  .world-scroll-country {
    margin: 0 0 5px;
    padding: 2px 8px 3px;
    font-size: 13px;
  }
  .world-scroll-name {
    margin: 0 0 6px;
    padding-right: 14px;
    font-size: 24px;
    line-height: 1.22;
  }
  .world-scroll-category {
    margin: 0 0 7px;
    padding: 2px 7px;
    font-size: 12px;
  }
  .world-scroll-description {
    padding-top: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.65;
  }
  .world-scroll-credit {
    position: static;
    margin: 10px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(107,65,27,.30);
    font-size: 11px;
    line-height: 1.45;
  }
}

/* 窓辺の旧ソファーを、大きな三人掛けビロードソファーへ差し替える。 */
.floor-sofa {
  left: -20px;
  bottom: 58px;
  width: 700px;
  height: 394px;
  object-fit: contain;
  filter: drop-shadow(10px 14px 15px rgba(20, 9, 2, .64)) saturate(.98);
}
/* ==================================================================
   人形調の彫刻鳩時計 — 王様たちと同じ、木彫りと真鍮の小劇場として仕立て直す。
   時刻の針・ローマ数字・鳩の出現は従来のHTML/JSをそのまま重ねるため、
   見た目を刷新しても時刻表示とタイマー操作は変えない。
   ================================================================== */
.wall-clock {
  width: 278px;
  min-height: 456px;
  padding-top: 20px;
  zoom: 1.24;
  filter: drop-shadow(10px 14px 16px rgba(15,7,1,.60));
}
.wall-clock:hover { filter: drop-shadow(10px 14px 16px rgba(15,7,1,.60)); }
.wc-head {
  width: 278px;
  height: 417px;
  margin: 0 auto;
  background: none;
  clip-path: none;
  box-shadow: none;
  overflow: visible;
}
.wc-case-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.wc-face {
  z-index: 1;
  top: 45.4%;
  width: 144px;
  height: 144px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.wc-face::before { content: none; }
/* 旧八角時計の内枠は、新しい彫刻時計の周囲に細線として残るため消す。 */
.wc-head::after { content: none; }
.wc-roman {
  font-size: 10.5px;
  color: #44280F;
  text-shadow: 0 1px 0 rgba(255,255,255,.78), 0 0 2px rgba(76,39,10,.16);
}
.wc-hand {
  background: linear-gradient(90deg, #2A170C 0%, #583417 48%, #1E1008 100%);
  box-shadow: 1px 0 0 rgba(241,201,115,.35);
}
.wc-hour { width: 6px; height: 33px; }
.wc-min { width: 4px; height: 50px; }
.wc-center {
  width: 13px;
  height: 13px;
  background: radial-gradient(circle at 34% 28%, #FFF1B2 0 12%, #E6B94B 18% 43%, #8C521B 70%, #4E280C 100%);
  border: 1px solid #4E280C;
  box-shadow: 0 1px 2px rgba(26,11,2,.55), inset 0 1px 0 rgba(255,240,178,.72);
}
/* 下部の振り子は新しい時計ケース画像に入っているため、旧CSS部品は表示しない。 */
.wc-drop, .wc-finial { display: none; }
/* 鳩の扉は時計上部の彫刻扉と重ねる。扉が開くと、木彫りの鳩が前へ出る。 */
.wc-cuckoo {
  z-index: 4;
  top: 38px;
  width: 54px;
  height: 49px;
}
.wc-cuckoo-frame {
  border: 1px solid rgba(245,202,111,.60);
  border-radius: 22px 22px 5px 5px;
  background: linear-gradient(125deg, #2A1307 0%, #724018 52%, #321607 100%);
  box-shadow: inset 0 0 0 2px rgba(245,208,125,.22), 0 1px 2px rgba(20,8,1,.48);
}
.wc-cuckoo-door {
  inset: 3px 3px 4px;
  border: 1px solid #B98232;
  border-radius: 20px 20px 3px 3px;
  background:
    repeating-linear-gradient(90deg, rgba(255,219,145,.13) 0 1px, transparent 1px 5px),
    linear-gradient(120deg, #3B1B09 0%, #825022 50%, #2A1206 100%);
}
.wc-cuckoo-bird {
  left: 50%;
  top: 1px;
  width: 66px;
  height: 57px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.wc-cuckoo-bird::before { content: none; }
.wc-cuckoo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 860px) {
  .wall-clock { zoom: 1.05; min-height: 392px; }
}

/* 小さすぎたローマ数字を、象牙文字盤で読み取れる彫り文字へ整える。 */
.wc-roman {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 800;
  color: #331B0A;
  letter-spacing: -.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.88), 0 0 1px rgba(77,40,10,.30);
}

.desk-lamp { z-index: 5; }

/* 机の小物よりも、掲示板の「解説を見る」は常に前に出して読みやすくする。 */
.zone-desk .keiji { z-index: 3; }

/* 彫刻時計の文字盤を広げ、時計として一目で読める大きさへ整える。 */
.wc-face {
  width: 184px;
  height: 184px;
  top: 45.4%;
  border: 4px solid #8B5A20;
  background: radial-gradient(circle at 35% 27%, #FFFFFB 0%, #FFF8E9 59%, #EAD7AD 100%);
  box-shadow: inset 0 0 0 2px rgba(104,62,19,.48), inset 0 7px 12px rgba(255,255,255,.68), 0 0 0 2px rgba(240,202,108,.62), 0 3px 5px rgba(31,12,2,.42);
}
.wc-roman {
  font-size: 16px;
  font-weight: 800;
  color: #2D1608;
  letter-spacing: -.06em;
  text-shadow: 0 1px 0 rgba(255,255,255,.94);
}
.wc-roman.n1 { left: 50%; top: 9%; }.wc-roman.n2 { left: 72%; top: 15%; }.wc-roman.n3 { left: 86%; top: 30%; }
.wc-roman.n4 { left: 89%; top: 51%; }.wc-roman.n5 { left: 83%; top: 72%; }.wc-roman.n6 { left: 67%; top: 86%; }
.wc-roman.n7 { left: 50%; top: 91%; }.wc-roman.n8 { left: 34%; top: 86%; }.wc-roman.n9 { left: 18%; top: 72%; }
.wc-roman.n10 { left: 11%; top: 51%; }.wc-roman.n11 { left: 15%; top: 30%; }.wc-roman.n12 { left: 28%; top: 15%; }
.wc-hour { width: 7px; height: 42px; }
.wc-min { width: 5px; height: 64px; }
.wc-center { width: 15px; height: 15px; }

/* 透明余白を切り詰めた画像の下端を、天板の上面へそろえる。 */
/* 旧来の一式画像を参照するページが残っても、浮いて見える表示は出さない。 */

/* 「今日の一枚」の木枠は途中で色が切り替わらない、一続きの胡桃材へ統一する。 */
.keiji {
  background:
    repeating-linear-gradient(0deg, rgba(255,226,157,.055) 0 1px, rgba(54,25,6,.045) 1px 6px),
    linear-gradient(180deg, #6B3515 0%, #A4652D 18%, #B87838 48%, #8A4B1E 80%, #51270E 100%);
}

/* 机上は万年筆スタンドだけに整理。二本の万年筆を斜めに立て、低い台座の底を天板へ接地させる。 */
.desk-diagonal-pen-stand {
  position: absolute;
  right: 128px;
  top: -165px;
  width: 128px;
  height: auto;
  z-index: 4;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(3px 4px 3px rgba(26,10,2,.30));
}
@media (max-width: 860px) {
  .desk-diagonal-pen-stand { right: 92px; top: -119px; width: 92px; }
}

/* ランプと万年筆は机の天板上の物。コルクボードより必ず手前に重ねる。 */
.zone-desk .desk { z-index: 4; }
.zone-desk .keiji { z-index: 3; }

/* 直線的な事務机ではなく、胡桃材のライティングビューローを机本体として使う。 */
.desk-bureau {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(4px 7px 7px rgba(25,9,2,.38));
}
/* 書斎道具はビューローの天板とコルクボードの両方より手前に置く。 */
.zone-desk .desk-lamp { z-index: 5; }
.zone-desk .desk-diagonal-pen-stand { z-index: 4; }

/* 大航海時代の航海机を思わせる、真鍮子午線環つきの地球儀。台座の底を天板へそろえる。 */
.desk-navigation-globe {
  position: absolute;
  left: 30px;
  top: -152px;
  width: 120px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(3px 4px 4px rgba(25,10,2,.34));
}
@media (max-width: 860px) {
  .desk-navigation-globe { left: 22px; top: -110px; width: 87px; }
}

/* 地球儀は触れる小物として扱い、台座を固定したまま球体と真鍮の子午線環だけを回す。 */
.desk-navigation-globe.gimmick-clickable {
  pointer-events: auto;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 C8 2 3 8 3 16 s5 14 13 14 13-6 13-14S24 2 16 2Z' fill='%23FFD84D' stroke='%23552F05' stroke-width='2'/%3E%3Cpath d='M13 8h6l-1 11h-4L13 8Z' fill='%23552F05'/%3E%3Ccircle cx='16' cy='23.5' r='2.2' fill='%23552F05'/%3E%3C/svg%3E") 16 16, pointer;
}
.desk-navigation-globe:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 0 #FFE291) drop-shadow(0 0 5px rgba(255,226,145,.96));
}
.desk-globe-map-track {
  transform-box: view-box;
  transform-origin: 90px 61px;
  will-change: transform;
}
.desk-globe-photo { pointer-events: none; }
.desk-globe-map-window {
  opacity: .90;
  mix-blend-mode: multiply;
}
.desk-globe-map-window image {
  filter: sepia(1) saturate(1.55) brightness(.50) contrast(1.55);
}
.desk-navigation-globe.is-turning .desk-globe-map-track {
  animation: desk-globe-surface-drift 2.6s cubic-bezier(.22,.66,.28,1) both;
}
@keyframes desk-globe-surface-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-204px); }
}
@media (prefers-reduced-motion: reduce) {
  .desk-navigation-globe.is-turning .desk-globe-map-track { animation-duration: .01ms; }
}

/* スマホと縦向きタブレットでは、詳しい羊皮紙は出さず写真下部の国名と名称だけを添える。 */
.world-mobile-caption { display: none; }
@media (max-width: 860px) {
  .world-landmark-scroll,
  .world-landmark-scroll.is-filled { display: none !important; }
  .world-window.has-landmark .world-mobile-caption {
    position: absolute;
    z-index: 6;
    left: 11px;
    right: 11px;
    bottom: 12px;
    display: block;
    box-sizing: border-box;
    padding: 8px 12px 9px;
    border: 1px solid rgba(249,222,156,.72);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(38,18,7,.82), rgba(87,43,16,.76), rgba(38,18,7,.82));
    box-shadow: 0 2px 6px rgba(14,5,1,.56), inset 0 1px 0 rgba(255,238,185,.22);
    color: #FFF4D0;
    font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(14px, 3.5vw, 20px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .035em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.78);
  }
}

/* ==================================================================
   大図書館の玄関ホール（入口と共通ナビゲーション）
   背景の羊皮紙・扉・台帳と操作領域を同じ座標系に置き、背景そのものをUIにする。
   背景画像の構図を変更するときは、この3領域の割合も一緒に確認すること。
   ================================================================== */
.page-library .site-header {
  position: relative;
  z-index: 60;
  border-bottom: 1px solid #B68A48;
  box-shadow: 0 6px 20px rgba(8, 4, 1, .62), inset 0 -1px 0 rgba(255, 224, 158, .18);
}
.page-library .site-header-inner { max-width: none; padding-inline: 34px; }
.page-library .site-brand { letter-spacing: .075em; text-shadow: 0 2px 3px rgba(0,0,0,.72); }
.page-library .site-tag { color: #D9BD88; }

/* 館内移動は上の猫レールだけに集約する。建築の梁と同じ木・真鍮で空間につなぐ。 */

.zone-entrance {
  z-index: 2;
  width: 2037px;
  overflow: hidden;
  isolation: isolate;
  background: #140C07 url("../images/library-entrance-hall.webp") center / cover no-repeat;
  box-shadow: inset -34px 0 50px rgba(8,3,1,.52), 20px 0 36px rgba(8,3,1,.48);
}
.zone-entrance::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,222,164,.07), rgba(255,222,164,.015) 58%, transparent),
    radial-gradient(ellipse at 51% 53%, transparent 0 31%, rgba(11,5,2,.04) 59%, rgba(8,3,1,.16) 100%),
    linear-gradient(90deg, rgba(255,245,215,.10), transparent 19% 82%, rgba(3,1,0,.08));
}
/* pano.js がこの点を画面中央へ合わせる。見た目には出さない。 */
.entrance-focus { position: absolute; left: 50%; top: 52%; width: 1px; height: 1px; }

.entrance-title-plaque {
  position: absolute;
  z-index: 2;
  left: 51.6%;
  top: 6.8%;
  width: 24.5%;
  padding: 20px 30px 18px;
  color: #EBCB87;
  font-family: var(--serif);
  text-align: center;
  text-shadow: 0 2px 3px #080301, 0 0 14px rgba(209,165,79,.22);
  transform: translateX(-50%);
}
.entrance-title-plaque::before {
  content: none;
}
.entrance-title-plaque .entrance-eyebrow {
  margin: 0 0 5px;
  color: #C8A968;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2em;
}
.entrance-title-plaque h1 {
  margin: 0;
  color: #F5DEAA;
  font-family: var(--serif);
  font-size: 43px;
  line-height: 1.25;
  letter-spacing: .09em;
}
.entrance-title-plaque > p:last-child { margin: 6px 0 0; font-size: 20px; letter-spacing: .08em; }

.entrance-object {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #4A2F18;
  font-family: var(--serif);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .22s ease, box-shadow .22s ease;
}
.entrance-object-kicker { font-size: 20px; font-weight: 700; letter-spacing: .16em; }
.entrance-object-title { margin-top: 9px; font-size: 32px; font-weight: 700; letter-spacing: .06em; }
.entrance-object-note { margin-top: 12px; font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.entrance-object:focus-visible {
  outline: 5px solid #F1CB72;
  outline-offset: 7px;
  box-shadow: 0 0 0 10px rgba(39,20,7,.74), 0 0 30px rgba(255,215,125,.58);
}

/* 左の額装羊皮紙。司書の執務室から移した管理人肖像と詳細入口を重ねる。 */
.entrance-notice {
  /* 背景画像に描かれた掲示板の羊皮紙内寸へぴったり合わせる。 */
  left: 19.45%;
  top: 32.55%;
  width: 13.85%;
  height: 33.25%;
  padding: 16px 20px 18px;
  border: 0;
  background: transparent;
  appearance: none;
  overflow: hidden;
}
.entrance-portrait-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #60401F;
  box-shadow: inset 0 0 14px rgba(50, 25, 8, .46);
  filter: sepia(.1) saturate(.82) brightness(.9) contrast(1.05);
}
.entrance-portrait-crop img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}
.entrance-portrait-copy {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 38px 4px 6px;
  background: linear-gradient(180deg, transparent, rgba(19, 9, 3, .84) 55%, rgba(14, 7, 2, .96));
  text-shadow: 0 2px 4px #090301;
}
.entrance-notice .entrance-object-kicker { color: #D8B875; font-size: 15px; }
.entrance-notice .entrance-object-title { margin-top: 1px; color: #F2D99D; font-size: 26px; }
.entrance-notice .entrance-object-note {
  margin-top: 4px;
  padding: 3px 13px;
  border: 1px solid rgba(207, 164, 78, .56);
  color: #E8CD94;
  background: rgba(61, 29, 8, .62);
  font-size: 15px;
}

/* 中央の開いた扉。透明な領域の下端にだけ、実在する木札として行き先を置く。 */
.entrance-door {
  left: 40.5%;
  top: 23.5%;
  width: 22.7%;
  height: 64%;
  border: 0;
  background: transparent;
  color: #FFF0C7;
}
.entrance-door-plaque {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 36%;
  width: max-content;
  padding: 14px 33px 16px;
  border: 3px solid #C39348;
  background:
    repeating-linear-gradient(90deg, rgba(255,221,147,.045) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, rgba(89,49,20,.97), rgba(39,19,7,.98));
  box-shadow: inset 0 0 0 3px rgba(26,12,3,.42), 0 7px 14px rgba(5,2,0,.62);
  text-shadow: 0 2px 3px #100601;
  translate: -50% 0;
  white-space: nowrap;
  transition: transform .22s ease, border-color .22s ease;
}
.entrance-door .entrance-object-title { margin-top: 0; color: #FFF0C7; font-size: 38px; }

/* 右の閲覧台。文字は革表紙の上だけに収め、台座まで大きなカードで覆わない。 */
.entrance-catalogue {
  left: 71.4%;
  top: 46.5%;
  width: 17.7%;
  height: 36%;
  justify-content: flex-start;
  padding: 4% 18px 0;
  color: #F0D9A2;
  text-shadow: 0 2px 3px #130702;
  transform: rotate(.4deg);
}
.entrance-catalogue .entrance-object-kicker { color: #C9A96B; font-size: 17px; }
.entrance-catalogue .entrance-object-title { margin-top: 5px; font-size: 30px; }
.entrance-catalogue .entrance-object-note { margin-top: 7px; color: #DCC392; font-size: 16px; }

/* ページTopは全ページ共通の青いボタンに統一する(以前は入口だけ茶色にしていた)。
   色・形は基本の.mobile-top-buttonのままにし、入口だけ持つ「読み進めたら出す」
   スクロール連動の出し引きに要る transition だけをここで足す。 */
body.page-library > .mobile-top-button {
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
body.page-library > .mobile-top-button.is-page-top-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

@media (hover: hover) {
  .entrance-notice:hover {
    color: #2F1D0D;
    background: radial-gradient(ellipse, rgba(255,249,220,.28), transparent 72%);
    box-shadow: inset 0 0 0 5px rgba(174,126,52,.52), 0 0 28px rgba(255,220,137,.28);
  }
  .entrance-door:hover {
    color: #FFE16F;
    box-shadow: inset 0 0 60px rgba(255,210,116,.19), 0 0 30px rgba(255,207,108,.18);
  }
  .entrance-door:hover .entrance-door-plaque { transform: translateY(-6px); border-color: #FFE16F; }
  .entrance-door:hover .entrance-object-title {
    color: #FFE16F;
    text-shadow: 0 2px 3px #100601, 0 0 10px rgba(255, 225, 111, .45);
  }
  .entrance-catalogue:hover {
    color: #FFF0BC;
    filter: drop-shadow(0 0 13px rgba(255,211,113,.64));
  }
}

@media (max-width: 860px) {
  .page-library .site-header-inner { padding-inline: 16px; }
  .page-library .site-tag { display: none; }
  .entrance-title-plaque { left: 51.6%; width: 22.5%; padding-inline: 16px; }
  .entrance-title-plaque .entrance-eyebrow { font-size: 15px; }
  .entrance-title-plaque h1 { font-size: 39px; }
  .entrance-title-plaque > p:last-child { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .entrance-object,
  .entrance-door-plaque { transition: none; }
}

/* ==================================================================
   大図書館の内部空間（写実的な部屋単位の巡回）
   旧来の「一枚の長い壁へ家具を横並び」にせず、16:9の固定座標を持つ
   各部屋へ既存機能を一度ずつ収める。背景とHTML操作領域は同じ座標系。
   ================================================================== */
.page-library .pano {
  width: 100%;
  /* 保存済み倍率はhead内で先に反映し、pano.js読込前の初回描画も1室幅以下にする。 */
  max-width: var(--sg-pano-max-width, 1423px);
  margin-inline: auto;
  background: #0E0804;
  /* 横操作は pano.js が現在室の内側だけへ制限する。ネイティブ慣性で
     隣室との境界が出ないようにし、縦スワイプとピンチ拡大は残す。 */
  overflow-x: hidden;
  touch-action: pan-y pinch-zoom;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
}
.page-library .stage {
  --tenjo: 0px;
  --kamote: 0px;
  height: 1146px;
  padding: 0;
  gap: 0;
  align-items: stretch;
  background: #0E0804;
}
.page-library .stage::before { display: none; }

.page-library .library-scene {
  position: relative;
  flex: 0 0 2037px;
  width: 2037px;
  height: 1146px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background-color: #160D08;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset -32px 0 48px rgba(5,2,0,.40), 18px 0 34px rgba(5,2,0,.40);
}
.page-library .library-scene:not(.zone-entrance)::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,228,177,.08), rgba(255,211,141,.025) 57%, rgba(18,8,2,.05)),
    radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(5,2,0,.06) 67%, rgba(4,2,0,.20) 100%);
}
.page-library .zone-salon { background-image: url("../images/library-curator-salon-integrated-v11-local-composite.webp"); }
.page-library .zone-case-shakai { background-image: url("../images/library-social-built-in-v11-clean-even-light.webp"); }
.page-library .zone-case-ai { background-image: url("../images/library-ai-workshop-integrated-v7-social-tone.webp"); }
.page-library .zone-daily { background-image: url("../images/library-daily-reading-v3.webp"); }
.page-library .zone-gallery { background-image: url("../images/library-projection-gallery-bright-clean-v4.webp"); }
.page-library .zone-gallery::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  /* 現行v4の壁龕へ色調を合わせた剣礼状態を、壁龕ごと一枚で置き換える。 */
  background: center / cover no-repeat url("../images/library-projection-gallery-knight-salute-matched-v1.webp");
  clip-path: inset(21% 8% 16% 75%);
  transition: opacity .16s ease-out;
}
.page-library .zone-gallery.is-knight-saluting::after { opacity: 1; }
.page-library .zone-travel { background-image: url("../images/library-travel-salon.webp?v=20260824a"); }

.scene-composition {
  position: absolute;
  z-index: 3;
  inset: 0;
}
.scene-composition > .zone {
  position: absolute;
  height: auto;
  padding: 0;
}

/* ケアマネ側の説明札・次室札と同じ役割を、西洋の木札と真鍮へ翻訳する。 */
.scene-plaque {
  position: absolute;
  z-index: 28;
  top: 5.2%;
  left: 3.8%;
  width: 430px;
  padding: 17px 22px 18px;
  border: 2px solid #B98A45;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(255,229,171,.04) 0 1px, transparent 1px 10px),
    linear-gradient(145deg, rgba(100,58,25,.96), rgba(42,22,9,.98));
  box-shadow: inset 0 0 0 3px rgba(22,10,3,.48), 0 9px 20px rgba(4,2,0,.56);
  color: #F7E5BC;
  font-family: var(--serif);
  text-shadow: 0 2px 3px #130802;
}
.scene-plaque > span {
  display: block;
  color: #D1AE68;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .18em;
}
.scene-plaque h2 {
  margin: 4px 0 0;
  color: #FFE9B3;
  font-size: 32px;
  line-height: 1.28;
  letter-spacing: .06em;
}
.scene-plaque p {
  margin: 8px 0 0;
  color: #DDC79D;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}
.library-scene.zone-case-shakai > .scene-plaque {
  left: 50%;
  width: 500px;
  text-align: center;
  transform: translateX(-50%);
}
.scene-path {
  position: absolute;
  z-index: 29;
  right: 3.8%;
  bottom: 3.8%;
  min-width: 260px;
  min-height: 86px;
  padding: 13px 25px 14px;
  border: 2px solid #C1954E;
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(255,231,176,.1), transparent 20% 80%, rgba(0,0,0,.18)),
    linear-gradient(180deg, rgba(105,62,27,.98), rgba(46,24,9,.98));
  box-shadow: inset 0 0 0 3px rgba(28,13,4,.42), 0 7px 16px rgba(5,2,0,.58);
  color: #FFF0C9;
  font-family: var(--serif);
  text-align: left;
  text-shadow: 0 2px 3px #100601;
  cursor: pointer;
}
.scene-path:visited { color: #FFF0C9; }
.scene-path span { display: block; color: #D4B574; font-size: 16px; letter-spacing: .14em; }
.scene-path strong { display: block; margin-top: 3px; font-size: 25px; letter-spacing: .05em; }
.scene-path:focus-visible {
  outline: 5px solid #F2CD77;
  outline-offset: 5px;
  box-shadow: 0 0 0 10px rgba(25,12,4,.76), 0 0 30px rgba(255,215,127,.5);
}

@media (hover: hover) {
  .scene-path:hover {
    border-color: #F0CE7E;
    background: linear-gradient(180deg, #8E6030, #513019);
    color: #FFF0C9;
    transform: translateY(-4px);
  }
}

/* ---------- 司書の執務室 ----------
   背景が額・目録・暦・時計の外装を担当し、HTMLは文字と操作だけを重ねる。
   家具をDOMでもう一度描かない。 */
.zone-salon > .scene-plaque {
  top: 3.6%;
  left: 50%;
  width: 390px;
  padding: 11px 18px 12px;
  text-align: center;
  transform: translateX(-50%);
  background: linear-gradient(145deg, rgba(92, 52, 23, .86), rgba(38, 20, 9, .9));
  box-shadow: inset 0 0 0 2px rgba(22, 10, 3, .38), 0 5px 12px rgba(4, 2, 0, .38);
}
.zone-salon > .scene-plaque > span { font-size: 14px; }

/* 背景に描き込んだ小型掛け時計の文字盤を、現在時刻に連動する実針へ置き換える。 */
.salon-live-wall-clock {
  position: absolute;
  z-index: 6;
  /* 背景文字盤の円周から割り出した中心（x:1214 / y:321.5）へ針軸を合わせる。 */
  left: 68.88%;
  top: 27.55%;
  width: 7.45%;
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(12, 5, 1, .45));
}
.salon-live-wall-clock .wc-face {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.salon-live-wall-clock .wc-roman {
  display: none;
}
.salon-live-wall-clock .wc-hour {
  left: calc(50% - 3px);
  bottom: calc(50% - 2px);
  width: 4px;
  height: 25%;
}
.salon-live-wall-clock .wc-min {
  left: calc(50% - 3px);
  bottom: calc(50% - 3px);
  width: 3px;
  height: 36%;
}
.salon-live-wall-clock .wc-second {
  left: calc(50% - 2px);
  bottom: calc(50% - 2px);
  width: 1.5px;
  height: 39%;
  background: #7A2B1E;
}
.salon-live-wall-clock .wc-center {
  left: calc(50% - 2px);
  top: calc(50% + 3px);
  width: 9.536px;
  height: 9.536px;
}

/* 年配の司書を押すと、本人のそばから羊皮紙の吹き出しが現れる。 */
.librarian-quote-trigger {
  position: absolute;
  z-index: 18;
  left: 76.8%;
  top: 46.2%;
  width: 10.2%;
  height: 27.5%;
  padding: 0;
  border: 0;
  border-radius: 42% 42% 18% 18%;
  background: transparent;
  appearance: none;
}
.librarian-quote-trigger:focus-visible {
  outline: 5px solid #F2CD77;
  outline-offset: 7px;
  box-shadow: 0 0 0 10px rgba(28, 13, 4, .66), 0 0 30px rgba(255, 216, 110, .5);
}
.librarian-quote-bubble {
  --librarian-bubble-left: 35.8%;
  --librarian-bubble-bottom: 44%;
  --librarian-bubble-width: 40%;
  --librarian-bubble-min-height: 460px;
  --librarian-bubble-rotation: 0deg;
  --librarian-tail-reach: 145px;
  --librarian-tail-drop: -46px;
  --librarian-tail-root-drop: -6px;
  --librarian-tail-length: 150.4px;
  --librarian-tail-angle: -15.4deg;
  position: absolute;
  z-index: 34;
  left: var(--librarian-bubble-left);
  top: auto;
  bottom: var(--librarian-bubble-bottom);
  width: var(--librarian-bubble-width);
  height: auto;
  min-height: var(--librarian-bubble-min-height);
  box-sizing: border-box;
  padding: 29px 35px 26px;
  border: 5px solid #9B6A31;
  border-radius: 22px 22px 18px 22px;
  color: #3A2817;
  background:
    repeating-linear-gradient(0deg, rgba(108, 75, 34, .035) 0 1px, transparent 1px 5px),
    linear-gradient(150deg, #FFF8E8, #EED9AD 72%, #E4C88F);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .66),
    inset 0 0 28px rgba(102, 63, 20, .16),
    0 18px 42px rgba(15, 7, 2, .68);
  font-family: var(--serif);
  text-align: left;
  text-shadow: none;
  opacity: 0;
  transform: translateY(12px) scale(.98) rotate(var(--librarian-bubble-rotation));
  transform-origin: center;
  transition: opacity .18s ease, transform .18s ease;
}
.librarian-quote-bubble[hidden] { display: none; }
.librarian-quote-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--librarian-bubble-rotation));
}
.librarian-quote-tail {
  position: absolute;
  transform: rotate(var(--librarian-tail-angle));
  transform-origin: left center;
  right: calc(6px - var(--librarian-tail-length));
  bottom: calc(-20px - var(--librarian-tail-root-drop));
  width: var(--librarian-tail-length);
  height: 40px;
  background: #9B6A31;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(8px 8px 7px rgba(15, 7, 2, .42));
  pointer-events: none;
  transform-origin: left center;
}
.librarian-quote-tail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: calc(100% - 7px);
  height: 30px;
  background: #E4C88F;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  pointer-events: none;
}
.is-gimmick-layout-adjusting .librarian-quote-tail {
  pointer-events: auto;
  cursor: move;
}
.librarian-quote-close {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #815927;
  border-radius: 50%;
  color: #FFF5DA;
  background: #593316;
  font: 27px/1 sans-serif;
  cursor: pointer;
}
.librarian-quote-close:focus-visible,
.librarian-quote-next:focus-visible {
  outline: 4px solid #F2CD77;
  outline-offset: 3px;
}
.librarian-quote-kicker {
  margin: 0 52px 9px 0;
  color: #8A612C;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .18em;
}
.librarian-quote-speech { font-size: 20px; line-height: 1.72; }
.librarian-quote-lead,
.librarian-quote-closing { margin: 0; }
.librarian-quote-bubble blockquote {
  position: relative;
  margin: 17px 4px 15px;
  padding: 15px 22px 16px;
  border-block: 1px solid rgba(142, 94, 37, .46);
  color: #5B3516;
  background: rgba(255, 253, 241, .46);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}
.librarian-quote-bubble blockquote p { margin: 0; }
.librarian-quote-source {
  margin: 12px 0 0;
  color: #80623C;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 13px;
  line-height: 1.55;
}
.librarian-quote-next {
  display: block;
  min-width: 156px;
  margin: 18px auto 0;
  padding: 9px 18px 10px;
  border: 2px solid #A87834;
  border-radius: 2px;
  color: #FFF0C9;
  background: linear-gradient(180deg, #7A4D21, #47260F);
  box-shadow: inset 0 0 0 2px rgba(242, 204, 123, .13), 0 4px 8px rgba(33, 15, 3, .3);
  font: 700 17px/1.35 var(--serif);
  letter-spacing: .08em;
  cursor: pointer;
}
.librarian-quote-layout-tools {
  position: absolute;
  z-index: 5;
  top: 13px;
  right: 67px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}
.librarian-quote-layout-tools[hidden] { display: none; }
.librarian-quote-layout-tools button {
  min-height: 31px;
  padding: 4px 10px 5px;
  border: 1px solid #9B6A31;
  border-radius: 3px;
  color: #5A3518;
  background: rgba(255, 248, 229, .9);
  box-shadow: 0 2px 5px rgba(44, 22, 6, .24);
  font: 700 13px/1.2 var(--serif);
  cursor: pointer;
}
.librarian-quote-layout-tools button[hidden] { display: none; }
.librarian-quote-layout-tools button:focus-visible {
  outline: 3px solid #D69B29;
  outline-offset: 2px;
}
.librarian-quote-bubble.is-adjusting-bubble {
  outline: 4px dashed #F3C14F;
  outline-offset: 7px;
}
.librarian-quote-bubble.is-adjusting-bubble .librarian-quote-kicker {
  cursor: move;
  user-select: none;
}
.librarian-quote-bubble.is-adjusting-tail .librarian-quote-tail {
  filter: drop-shadow(8px 8px 7px rgba(15, 7, 2, .42)) drop-shadow(0 0 6px #78D7FF);
}
.librarian-quote-layout-handle {
  position: absolute;
  z-index: 7;
  display: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 3px solid #4E2C12;
  border-radius: 50%;
  background: #FFD95E;
  box-shadow: 0 0 0 3px rgba(255, 248, 221, .9), 0 3px 8px rgba(29, 13, 3, .5);
  appearance: none;
  touch-action: none;
}
.librarian-quote-layout-handle:focus-visible {
  outline: 4px solid #4FBCEB;
  outline-offset: 3px;
}
.librarian-quote-bubble.is-adjusting-bubble .librarian-quote-layout-handle-left,
.librarian-quote-bubble.is-adjusting-bubble .librarian-quote-layout-handle-top,
.librarian-quote-bubble.is-adjusting-bubble .librarian-quote-layout-handle-rotate,
.librarian-quote-bubble.is-adjusting-tail .librarian-quote-layout-handle-tail { display: block; }
.librarian-quote-layout-handle-left {
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}
.librarian-quote-layout-handle-top {
  left: 50%;
  top: -13px;
  transform: translateX(-50%);
  cursor: ns-resize;
}
.librarian-quote-layout-handle-rotate {
  left: 50%;
  top: -58px;
  transform: translateX(-50%);
  cursor: grab;
}
.librarian-quote-layout-handle-rotate:active { cursor: grabbing; }
.librarian-quote-layout-handle-rotate::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 19px;
  width: 3px;
  height: 34px;
  background: #F3C14F;
  box-shadow: 0 0 0 1px rgba(78, 44, 18, .72);
  transform: translateX(-50%);
  pointer-events: none;
}
.librarian-quote-layout-handle-tail {
  right: auto;
  bottom: calc(-11px - var(--librarian-tail-root-drop));
  left: calc(100% - 17px);
  background: #78D7FF;
  transform: rotate(var(--librarian-tail-angle)) translateX(var(--librarian-tail-length));
  transform-origin: center;
  cursor: move;
}
.librarian-quote-layout-hint {
  position: absolute;
  z-index: 6;
  right: 18px;
  bottom: 14px;
  display: none;
  margin: 0;
  padding: 5px 9px;
  color: #4C2C13;
  background: rgba(255, 248, 226, .93);
  border: 1px solid rgba(155, 106, 49, .7);
  font: 700 12px/1.4 "Noto Sans JP", sans-serif;
}
.librarian-quote-bubble.is-adjusting .librarian-quote-layout-hint { display: block; }
@media (hover: hover) {
  .librarian-quote-next:hover { border-color: #E7C36F; color: #FFF7DD; }
}
@media (prefers-reduced-motion: reduce) {
  .librarian-quote-bubble { transition: none; }
}

.zone-salon > .scene-plaque h2 { margin-top: 2px; font-size: 27px; }
.zone-salon > .scene-plaque p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.zone-salon .scene-composition-salon > .zone-wall {
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.zone-salon .picture-rail,
.zone-salon .zone-wall-shirushi,
.zone-salon .contact-shadow { display: none; }

/* 背景中央に彫り込まれた4本の目録札へ、4つの入口を一対一で重ねる。 */
.zone-salon .wall-col {
  position: absolute;
  left: 33.55%;
  top: 29.75%;
  width: 17.3%;
  height: 28.65%;
}
.zone-salon .library-quick-access {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.zone-salon .library-quick-access-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 19px);
  margin: 0;
  color: #E6C780;
  font: 700 19px/1.25 var(--serif);
  letter-spacing: .15em;
  text-align: center;
  text-shadow: 0 2px 3px #100601;
}
.zone-salon .library-quick-access a {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 8px;
  align-items: center;
  min-height: 0;
  padding: 5px 12px;
  border: 1px solid transparent;
  color: #F9E9BE;
  background: transparent;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 3px #110703;
}
.zone-salon .library-quick-access a strong { font: 700 17px/1.3 var(--serif); }
.zone-salon .library-quick-access a span { color: #D6BF8C; font-size: 13px; line-height: 1.3; }
.zone-salon .library-quick-access a:focus-visible {
  outline: 3px solid #F0CE7E;
  outline-offset: 2px;
  background: rgba(239, 198, 111, .12);
}
@media (hover: hover) {
  .zone-salon .library-quick-access a:hover {
    border-color: rgba(236, 199, 119, .65);
    background: rgba(239, 198, 111, .10);
  }
}

/* 左の大きな額は、通常時には短い紹介だけを置く。全文は押した先で読む。 */
.zone-salon .salon-about-open {
  width: 100%;
  height: 100%;
  padding: 0 10%;
  border: 0;
  color: #3A2817;
  background: transparent;
  font-family: var(--serif);
  text-align: center;
  cursor: pointer;
}
.zone-salon .salon-about-action { display: block; }
.zone-salon .salon-about-open strong {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5.5%;
  color: #2B190A;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: .08em;
  -webkit-text-stroke: .45px rgba(45, 22, 7, .72);
  text-shadow: 0 1px 0 rgba(255, 226, 173, .32), 0 0 1px rgba(45, 22, 7, .36);
  mix-blend-mode: multiply;
  filter: sepia(.14) contrast(1.06);
}
.zone-salon .salon-about-action {
  position: absolute;
  top: -3%;
  left: 50%;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  min-height: 76px;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 22px;
  border: 2px solid #A77B38;
  border-radius: 2px;
  color: #F8E6B8;
  background: linear-gradient(180deg, rgba(91, 53, 22, .88), rgba(43, 23, 9, .94));
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-align: center;
  /* 額の面だけが遠近に沿う。操作札はほかの室内ボタンと同じ水平表示にする。 */
  transform: translateX(-50%) skewX(-5.5deg);
  box-shadow: inset 0 0 0 2px rgba(236, 196, 111, .12), 0 3px 0 rgba(36, 19, 5, .9), 0 4px 8px rgba(15, 7, 2, .35);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.zone-salon .salon-about-open:focus-visible {
  outline: 4px solid #F0CE7E;
  outline-offset: -10px;
  background: rgba(255, 243, 207, .18);
}
@media (hover: hover) {
  .zone-salon .salon-about-open:hover { background: rgba(255, 243, 207, .12); }
  .zone-salon .salon-about-open:hover .salon-about-action {
    color: #3B240E;
    background: linear-gradient(135deg, #FFF8EA, #E7CE9B);
    box-shadow: inset 0 0 0 2px rgba(142, 107, 52, .16), 0 3px 0 rgba(36, 19, 5, .7), 0 4px 8px rgba(15, 7, 2, .28);
  }
}
.zone-salon .salon-about-open:focus-visible .salon-about-action {
  color: #3B240E;
  background: linear-gradient(135deg, #FFF8EA, #E7CE9B);
}

/* 背景に描いた二段の暦へ、日付と試験情報だけを流し込む。 */
.zone-salon .wall-col-cal {
  position: absolute;
  left: 55.9%;
  top: 28.7%;
  bottom: auto;
  width: 9.65%;
  height: 33.7%;
}
.zone-salon .wall-calendar {
  width: 100%;
  height: 64%;
  margin: 0;
  padding: 10% 8% 3%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.zone-salon .cal-ring { display: none; }
.zone-salon .cal-paper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
  color: #3A2A1A;
  background: transparent;
  box-shadow: none;
}
.zone-salon .cal-day-head {
  position: relative;
  top: -5.7px;
  gap: 10px;
  font-size: 14px;
  line-height: 1;
  transform: scale(1.254);
}
.zone-salon .cal-day-sheet { transform: translateY(6px); }
.zone-salon .cal-month b { font-size: 22px; }
.zone-salon .cal-year { font-size: 16px; font-weight: 700; }
.zone-salon .cal-day-number {
  position: relative;
  left: -1.4px;
  top: 7.5px;
  margin-top: 7px;
  font-size: 86px;
  line-height: .92;
}
.zone-salon .cal-weekday {
  position: relative;
  left: 1.5px;
  top: 28.6px;
  margin-top: 4px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: .12em;
  transform: scale(1.568);
}
.zone-salon .exam-plate {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 100%;
  height: 24%;
  min-height: 0;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  color: #F5E5BB;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.zone-salon .exam-plate::before { display: none; }
.zone-salon .exam-label { font-size: 12px; line-height: 1.25; }
.zone-salon .exam-date { margin-top: 2px; font-size: 15px; line-height: 1.2; }
.zone-salon .exam-days {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: 2px;
  width: 100%;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.15;
}
.zone-salon .exam-days-prefix { justify-self: end; }
.zone-salon .exam-days-suffix { justify-self: start; }
.zone-salon .exam-days b {
  justify-self: center;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.zone-salon .exam-days b.exam-today {
  grid-column: 1 / -1;
  justify-self: center;
}

/* 時計と学習タイマーは、司書の執務室ではなく社会福祉士の書架に置く。 */
.zone-case-shakai > .zone-clock {
  position: absolute;
  z-index: 18;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  pointer-events: none;
}
.zone-case-shakai .wall-clock {
  position: absolute;
  left: 78.05%;
  top: 13.35%;
  width: 12.1%;
  height: 80.5%;
  margin: 0;
  padding: 0;
  zoom: 1;
  filter: none;
  pointer-events: auto;
}
.zone-case-shakai .wc-cuckoo,
.zone-case-shakai .wc-case-image,
.zone-case-shakai .wc-drop,
.zone-case-shakai .wc-finial { display: none; }
.zone-case-shakai .wc-head {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  clip-path: none;
  box-shadow: none;
}
.zone-case-shakai .wc-head::after { display: none; }
.zone-case-shakai .wc-face {
  left: calc(50% - 2.4px);
  top: calc(19.7% + 1.1px);
  width: 60%;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.zone-case-shakai .wc-face::before,
.zone-case-shakai .wc-face::after {
  content: none;
  display: none;
}
.zone-case-shakai .wc-roman {
  display: none;
}
.zone-case-shakai .wc-hand {
  z-index: 2;
  background: linear-gradient(90deg, #241207 0%, #9A6B2D 48%, #211005 100%);
  border-radius: 60% 60% 2px 2px;
  box-shadow: 1px 0 0 rgba(245, 215, 143, .24), 0 0 1px rgba(20, 8, 2, .75);
}
.zone-case-shakai .wc-hour {
  /* 既存の針芯合わせ（-2.6px / +12.4px）を基準に、今回の微調整
     x: 0px / y: +1px だけを重ねる。 */
  left: calc(50% - 2.6px);
  bottom: calc(50% - 13.4px);
  width: 4px;
  height: 25%;
}
.zone-case-shakai .wc-min {
  /* 既存の針芯合わせ（+2.1px / +17.9px）へ、今回の
     x: -5.4px / y: -3.4px を加算する。 */
  left: calc(50% - 3.3px);
  bottom: calc(50% - 14.5px);
  width: 3px;
  height: 36%;
}
.zone-case-shakai .wc-center {
  left: calc(50% - 3.3px);
  top: calc(50% + 15.9px);
  z-index: 3;
  width: 8px;
  height: 8px;
  border: 1px solid #4A270D;
  background: radial-gradient(circle at 35% 30%, #F8DB7B 0 18%, #C28A2E 45%, #704016 76%, #321706 100%);
}
.zone-case-shakai .wall-clock:focus-visible {
  outline: 4px solid #F0CE7E;
  outline-offset: 7px;
}
.zone-case-shakai .tokei-fuda {
  position: absolute;
  left: 78.25%;
  top: 5.2%;
  width: 11.7%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.zone-case-shakai .tokei-fuda .tf-midashi,
.zone-case-shakai .tokei-fuda .tf-honbun,
.zone-case-shakai .tokei-fuda .tf-soe {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.zone-case-shakai .tf-botan {
  position: relative;
  left: 6.4px;
  top: 124.3px;
  min-height: 54px;
  margin: 0;
  padding: 8px 9px;
  border-color: #A77B38;
  border-radius: 2px;
  color: #F8E6B8;
  background: linear-gradient(180deg, rgba(91, 53, 22, .9), rgba(43, 23, 9, .94));
  font-size: 16px;
  box-shadow: inset 0 0 0 2px rgba(236, 196, 111, .12), 0 2px 5px rgba(15, 7, 2, .35);
  pointer-events: auto;
}

/* 額を押したときだけ開く、サイト説明と管理人紹介。 */
.salon-about-dialog {
  width: min(calc(100vw - 32px), 760px);
  max-height: min(860px, calc(100vh - 32px));
  margin: auto;
  padding: 0;
  border: 9px solid #9B6A31;
  border-radius: 4px;
  color: #342416;
  background:
    repeating-linear-gradient(0deg, rgba(111, 77, 38, .028) 0 1px, transparent 1px 5px),
    linear-gradient(150deg, #FFF9EC, #EEDDBB);
  box-shadow: 0 24px 58px rgba(15, 7, 2, .68), inset 0 0 0 2px rgba(255, 255, 255, .64);
}
.salon-about-dialog::backdrop { background: rgba(18, 9, 3, .74); }
.salon-about-dialog-inner { position: relative; padding: 30px 34px 34px; }
.salon-about-dialog-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #815927;
  border-radius: 50%;
  color: #FFF5DA;
  background: #593316;
  font: 28px/1 sans-serif;
  cursor: pointer;
}
.salon-about-dialog-kicker { margin: 0 54px 4px 0; color: #87642F; font-size: 14px; letter-spacing: .16em; }
.salon-about-dialog h2 { margin: 0 54px 20px 0; color: #5A3718; font: 700 31px/1.35 var(--serif); }
.salon-about-dialog h3 { margin: 0 0 10px; color: #5A3718; font: 700 23px/1.4 var(--serif); }
.salon-about-site { padding: 17px 19px; border: 1px solid #B69761; background: rgba(255, 252, 240, .5); }
.salon-about-site p { margin: 0; font-size: 16px; line-height: 1.85; }
.salon-about-dialog .profile-board {
  width: auto;
  margin: 20px 0 0;
  padding: 17px 19px;
  border: 1px solid #B69761;
  color: #342416;
  background: rgba(255, 252, 240, .5);
  box-shadow: none;
}
.salon-about-dialog .profile-heading { align-items: center; }
.salon-about-dialog .profile-heading h3 { margin: 0; }
.salon-about-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }
.salon-about-admin-link {
  display: inline-flex; align-items: center; min-height: 38px; padding: 6px 10px;
  border: 1px solid #9C7235; border-radius: 4px; color: #70451F;
  font: 700 14px/1.3 var(--serif); letter-spacing: .04em; text-decoration: none;
  background: linear-gradient(180deg, #FFF8E8, #EAD3A2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(58,29,9,.2);
}
.salon-about-admin-link:hover, .salon-about-admin-link:focus-visible {
  color: #FFF8E8; background: #70451F; outline: 2px solid #8A642F; outline-offset: 2px;
}
.salon-about-dialog .profile-icon { width: 104px; height: 104px; }
.salon-about-dialog .profile-name { font-size: 27px; }
.salon-about-dialog .profile-text p { font-size: 16px; line-height: 1.75; }
/* 管理人詳細では、丸い一杯ギミックを紹介欄の座標ではなく画面中央へ出す。
   transform は登場アニメーションが使うため、中央寄せは独立した translate で行う。 */
.salon-about-dialog .cat-sake-scene {
  position: fixed;
  z-index: 20;
  top: 50%;
  left: 50%;
  width: min(330px, calc(100vw - 64px), calc(100vh - 64px));
  height: min(330px, calc(100vw - 64px), calc(100vh - 64px));
  translate: -50% -50%;
}
dialog.dialog-fallback-open {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: block;
  overflow: auto;
  box-shadow: 0 0 0 100vmax rgba(18, 9, 3, .74), 0 24px 58px rgba(15, 7, 2, .68);
}
@media (max-width: 620px) {
  .salon-about-dialog-inner { padding: 26px 18px 24px; }
  .salon-about-dialog h2 { font-size: 26px; }
  .salon-about-dialog .profile-row { align-items: flex-start; }
  .salon-about-actions { flex-wrap: wrap; gap: 7px; }
}

/* ---------- 社会福祉士・福祉AIの書架 ---------- */
.page-library .library-scene.zone-case {
  display: block;
  align-items: initial;
}
.library-scene.zone-case .bookcase {
  position: absolute;
  z-index: 8;
  top: 13.5%;
  left: 50%;
  transform: translateX(-50%) scale(.84);
  transform-origin: top center;
  background: rgba(101,59,27,.62);
  border-color: rgba(68,35,13,.88);
  box-shadow: 0 17px 34px rgba(4,2,0,.48), inset 0 0 0 3px rgba(255,210,128,.12);
}
.library-scene.zone-case-ai .bookcase { transform: translateX(-50%) scale(.78); }
.library-scene.zone-case .cell {
  background: rgba(47,27,11,.64);
  box-shadow: inset 0 13px 20px rgba(3,1,0,.54), inset 9px 0 15px rgba(3,1,0,.30);
}
.library-scene.zone-case .cell::after {
  background: linear-gradient(180deg, rgba(166,104,47,.92), rgba(80,42,16,.98));
}
.library-scene.zone-case .case-plate {
  color: #FBE6B5;
  border-color: #C79B51;
  background: linear-gradient(180deg, #6F4623, #35200F);
  text-shadow: 0 2px 3px #110702;
}
.library-scene.zone-case .contact-shadow { display: none; }

/* ---------- 今日の一枚・閲覧室 ---------- */
.library-scene.zone-daily > .scene-plaque h2 {
  /* 室番号は左に残し、下段の部屋名だけ木札の左右中央へ置く。 */
  text-align: center;
}
.library-scene.zone-daily > .scene-plaque > span {
  translate: 155.4px -3.4px;
}
.library-scene.zone-daily > .scene-plaque > p {
  translate: 29.7px 1.1px;
}
.zone-daily .scene-composition-daily > .zone-desk {
  inset: 0;
  width: 100%;
  height: 100%;
}
.zone-daily .rug,
.zone-daily .desk-bureau,
.zone-daily .desk-lamp,
.zone-daily .desk-diagonal-pen-stand,
.zone-daily .cs-desk { display: none; }
.zone-daily .keiji {
  left: 43.5%;
  top: 8.9%;
  width: 760px;
  height: 590px;
  padding: 34px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: scale(1.02);
  transform-origin: top left;
}
.zone-daily .keiji::before,
.zone-daily .keiji::after {
  /* 額縁は背景画像に描かれているため、旧掲示板の二重内枠を重ねない。 */
  display: none;
}
.zone-daily .keiji-cork {
  border: 0;
  outline: 0;
  outline-offset: 0;
  background: rgba(184,132,76,.16);
  box-shadow: inset 0 0 22px rgba(47,23,8,.16);
}
.zone-daily .fusen-midashi {
  /* 額内では毎日の言葉そのものを主役にし、分類名は解説内だけに残す。 */
  display: none;
}
.zone-daily .fusen-pin {
  display: none;
}
.zone-daily .fusen:not([hidden]) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.zone-daily .fusen.gimmick-clickable {
  cursor: pointer;
  transform-origin: center;
  transition: translate .22s ease, scale .22s ease, filter .22s ease, box-shadow .22s ease;
}
.zone-daily .fusen.gimmick-clickable:focus-visible {
  outline: 4px solid #F5D989;
  outline-offset: 7px;
  translate: 0 -6px;
  scale: 1.012;
  filter: brightness(1.04);
  box-shadow: 7px 15px 24px rgba(35,16,4,.52);
}
@media (hover: hover) {
  .zone-daily .fusen.gimmick-clickable:hover {
    translate: 0 -6px;
    scale: 1.012;
    filter: brightness(1.04);
    box-shadow: 7px 15px 24px rgba(35,16,4,.52);
  }
}
.zone-daily .desk {
  /* この部屋では机の子要素を、背景画像と同じ全面座標で重ねる。 */
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.zone-daily .desk-navigation-globe {
  /* 写実素材と動く地図を重ね、背景の机に置かれた実物としてなじませる。 */
  left: 88.9%;
  top: 44.6%;
  bottom: auto;
  width: 250px;
  transform: none;
  transform-origin: center bottom;
  pointer-events: auto;
  filter:
    sepia(.12) saturate(.70) brightness(.76) contrast(1.16)
    drop-shadow(0 13px 10px rgba(8, 3, 1, .64));
}

@media (prefers-reduced-motion: reduce) {
  .zone-daily .fusen.gimmick-clickable,
  .keiji-more,
  .keiji-more-kazari { transition: none; }
  .zone-daily .fusen.gimmick-clickable:hover,
  .zone-daily .fusen.gimmick-clickable:focus-visible {
    translate: none;
    scale: 1;
  }
  .keiji-more:hover,
  .keiji-more:focus-visible,
  .keiji-more:active { transform: translateX(-50%); }
  .keiji-more:hover .keiji-more-kazari { transform: none; }
}
.zone-daily .desk-navigation-globe:focus-visible {
  filter:
    sepia(.12) saturate(.70) brightness(.76) contrast(1.16)
    drop-shadow(0 13px 10px rgba(8, 3, 1, .64))
    drop-shadow(0 0 5px rgba(255, 220, 132, .92));
}

/* ---------- 映写ギャラリー ---------- */
.zone-gallery .scene-composition-gallery > .zone-eisha,
.zone-gallery .scene-composition-gallery > .zone-knight {
  inset: 0;
  width: 100%;
  height: 100%;
}
.zone-gallery .scene-composition-gallery > .zone-knight { pointer-events: none; }
.zone-gallery .osusume {
  /* 背景画像に描かれた白い銀幕の内寸へ、投影映像だけを正確に重ねる。 */
  left: 26.9%;
  right: auto;
  top: 19.2%;
  width: 44.6%;
  height: 45%;
  border: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
/* 背景の映写機レンズから、背景の銀幕四隅まで届く投影光。 */
.zone-gallery .eisha-hikari {
  display: block;
  position: absolute;
  left: 15.8%;
  top: 19.2%;
  right: auto;
  bottom: auto;
  width: 55.7%;
  height: 45%;
  z-index: 1;
  pointer-events: none;
  opacity: .46;
  clip-path: polygon(0 87.5%, 19.8% 0, 100% 0, 100% 100%, 19.8% 100%, 0 91.5%);
  background:
    radial-gradient(circle at 0 89.5%, rgba(255,250,218,.68) 0 1.4%, rgba(255,244,196,.30) 5%, transparent 15%),
    radial-gradient(circle at 10% 70%, rgba(255,248,207,.28) 0 1px, transparent 1.7px),
    radial-gradient(circle at 15% 35%, rgba(255,248,207,.22) 0 1px, transparent 1.6px),
    linear-gradient(90deg, rgba(255,249,211,.52), rgba(255,241,188,.28) 42%, rgba(255,236,180,.10));
  box-shadow: none;
  /* 大きな光面の常時ぼかしを避け、横移動中の合成負荷を抑える。 */
  filter: none;
  transform: none;
  transform-origin: 0 89.5%;
  animation: gallery-projection-rattle 3.4s steps(1, end) infinite;
}
/* 銀幕の silent-projection-rattle と同じ拍で、光源側も暗転・増光する。 */
@keyframes gallery-projection-rattle {
  0%, 9%, 15%, 32%, 38%, 54%, 61%, 77%, 84%, 100% { opacity: .46; }
  10%, 55%, 78% { opacity: .25; }
  12%, 57%, 80% { opacity: .54; }
  33% { opacity: .30; }
  35% { opacity: .52; }
}
.zone-gallery .osusume-nuno {
  /* コマ揺れで白い下地が覗かないよう、映像面だけ内枠よりわずかに広げる。 */
  inset: -2px;
  padding: 22px 58px;
  background:
    radial-gradient(ellipse at 48% 44%, rgba(70,68,61,.88) 0%, rgba(33,32,29,.965) 54%, rgba(21,21,19,.985) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,245,.025) 0 1px, transparent 1px 4px);
}
.zone-gallery .osusume-name { font-size: 40px; }
.zone-gallery .osusume-setsumei,
.zone-gallery .osusume-hosoku { font-size: 20px; }
.zone-gallery .osusume-go { margin-top: 18px; font-size: 22px; }
.zone-gallery .knight-salute-trigger {
  position: absolute;
  z-index: 5;
  left: 77%;
  top: 24%;
  width: 13%;
  height: 57%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 46% 46% 16% 16% / 20% 20% 8% 8%;
  background: transparent;
  pointer-events: auto;
  clip-path: polygon(38% 0, 62% 0, 78% 11%, 86% 33%, 79% 46%, 90% 72%, 83% 100%, 17% 100%, 10% 72%, 21% 46%, 14% 33%, 22% 11%);
}
.zone-gallery .knight-salute-trigger:focus-visible {
  outline: 4px solid #F0C46A;
  outline-offset: 7px;
}
@media (hover: hover) {
  .zone-gallery .knight-salute-trigger:hover {
    background: radial-gradient(ellipse at center, rgba(255,226,149,.09), transparent 72%);
  }
}
/* ---------- 窓辺の旅行室 ---------- */
.zone-travel .scene-composition-travel > .zone-window,
.zone-travel .scene-composition-travel > .zone-corner {
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 後から重なる解説壁は面全体でクリックを受けず、紙面とリンクだけを有効にする。 */
.zone-travel .scene-composition-travel > .zone-corner { pointer-events: none; }
.zone-travel .world-landmark-scroll,
.zone-travel .world-landmark-scroll a { pointer-events: auto; }
.zone-travel .world-window {
  box-sizing: border-box;
  left: 14.65%;
  top: -1.4px;
  bottom: auto;
  width: 33.5%;
  height: 60.5%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* 旧来の木製窓用の内枠を、背景に窓枠が描かれた旅行室では重ねない。 */
.zone-travel .world-window::before { display: none; }
.zone-travel .win-sky {
  inset: 0;
  overflow: hidden;
  /* 旅先を選ぶ前は、生成背景に写る本物の窓景色をそのまま見せる。 */
  background: transparent;
  box-shadow: none;
}
.zone-travel .win-sky::after {
  /* 背景側に窓とガラスが描かれているため、汎用窓の長方形レイヤーは重ねない。 */
  display: none;
}
.zone-travel .world-window-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.76) brightness(.84) contrast(1.06);
}
/* 名所を表示している間は、背景に描かれた窓桟ごと景色で覆う。
   景色を90%の濃さにして、窓枠を10%だけうっすら残す。閉じれば従来の窓枠へ戻る。 */
.zone-travel .world-window.has-landmark .world-window-image {
  opacity: .9;
}
.zone-travel .win-curtain,
.zone-travel .win-curtain-rod,
.zone-travel .win-sill,
.zone-travel .win-bar-v,
.zone-travel .win-bar-h { display: none; }
.zone-travel .sideboard {
  left: 10.7%;
  right: auto;
  bottom: 9.8%;
  width: 44.4%;
  height: 25.5%;
}
.zone-travel .sideboard-body {
  border-color: rgba(49,26,11,.76);
  background: rgba(70,39,18,.75);
  box-shadow: inset 0 0 0 2px rgba(210,163,81,.08);
}
.zone-travel .world-landmark-scroll {
  position: absolute;
  left: 61.5%;
  top: 20%;
  width: 28%;
  transform: scale(.92);
  transform-origin: top left;
}
.zone-travel .floor-sofa,
.zone-travel .cs-corner,
.zone-travel .cs-side { display: none; }

.world-scroll-harbor {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(117, 72, 25, .28);
}
.world-scroll-harbor a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 13px;
  border: 1px solid rgba(126, 77, 25, .48);
  background: linear-gradient(180deg, rgba(255, 249, 224, .66), rgba(225, 191, 124, .28));
  color: #5a3014;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px rgba(255, 249, 221, .28), 0 2px 5px rgba(52, 25, 7, .16);
}
.world-scroll-harbor a > span:first-child {
  grid-column: 1 / -1;
  font-size: 11px;
  letter-spacing: .14em;
}
.world-scroll-harbor strong {
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  letter-spacing: .08em;
}
.world-scroll-harbor a:hover,
.world-scroll-harbor a:focus-visible {
  background: linear-gradient(180deg, rgba(255, 253, 235, .9), rgba(231, 195, 121, .48));
  outline: 2px solid #9a5a20;
  outline-offset: 3px;
}

/* ---------- 旅立ちの港 ---------- */
/* 全室の前室・次室導線は、ページ左右端の同じ通常ボタンにする。
   pano.js が室内から .room 直下へ移し、対応する部屋を見ている間だけ表示する。 */
.scene-path.scene-path-page-edge {
  position: fixed;
  z-index: 90;
  top: 50%;
  bottom: auto;
  width: 188px;
  min-width: 0;
  min-height: 62px;
  padding: 8px 12px 9px;
  background:
    linear-gradient(90deg, rgba(255, 231, 176, .08), transparent 22% 78%, rgba(0, 0, 0, .12)),
    linear-gradient(180deg, rgba(105, 62, 27, .72), rgba(46, 24, 9, .78));
  text-align: center;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 2px rgba(28,13,4,.30), 0 5px 13px rgba(5,2,0,.45);
  /* 固定ボタンの背後で舞台が動いても、ぼかし面を毎フレーム再計算させない。 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.scene-path.scene-path-page-edge[hidden] { display: none; }
.scene-path.scene-path-page-edge.scene-path-next {
  right: 14px;
  left: auto;
  border-radius: 6px 0 0 6px;
}
.scene-path.scene-path-page-edge.scene-path-previous {
  right: auto;
  left: 14px;
  border-radius: 0 6px 6px 0;
}
.scene-path.scene-path-page-edge.scene-path-next span::after {
  content: " →";
  color: #F0CE7E;
}
.scene-path.scene-path-page-edge.scene-path-previous span::before {
  content: "← ";
  color: #F0CE7E;
}
.scene-path.scene-path-page-edge strong {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.35;
}
.scene-path.scene-path-page-edge span { font-size: 12px; }

/* 司書の執務室から書架へ進む札は、行先を一行で読める横幅にする。 */
.scene-path.scene-path-page-edge[data-zone-target="case-shakai"] {
  width: 232px;
}
.scene-path.scene-path-page-edge[data-zone-target="case-shakai"] strong {
  white-space: nowrap;
}

@media (hover: hover) {
  .scene-path.scene-path-page-edge:hover {
    border-color: #F0CE7E;
    background: linear-gradient(180deg, rgba(142, 96, 48, .82), rgba(81, 48, 25, .86));
    transform: translateY(-50%);
  }
}

@media (max-width: 520px) {
  .scene-path.scene-path-page-edge {
    width: 150px;
    min-height: 56px;
    padding: 7px 9px 8px;
  }
  /* スマホでは室内の見通しを優先し、部屋移動は上部ナビで選ぶ。 */
  .scene-path.scene-path-page-edge { display: none; }
  .scene-path.scene-path-page-edge.scene-path-next { right: 8px; }
  .scene-path.scene-path-page-edge.scene-path-previous { left: 8px; }
  .scene-path.scene-path-page-edge span { font-size: 10px; }
  .scene-path.scene-path-page-edge strong { font-size: 14px; }
  .scene-path.scene-path-page-edge[data-zone-target="case-shakai"] { width: 198px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-path,
  .page-library .zone-gallery::after { transition: none; }
  .page-library .pano { scroll-behavior: auto; }
}

/* ==================================================================
   実在する書架に本を収める — 社会福祉士・福祉AIの入口
   ------------------------------------------------------------------
   クリックできる背表紙は従来の HTML のまま残し、棚板・木枠・上段の
   装飾は一枚の書架素材と一致させる。これにより「背景の上のカード」
   ではなく、各冊が大図書館の棚に収まって見えるようにする。
   ================================================================== */
.library-scene.zone-case-shakai .bookcase,
.library-scene.zone-case-ai .bookcase {
  width: 1865px !important;
  height: 1243px;
  top: 3.5%;
  padding: 0;
  display: block;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: url("../images/library-social-bookcase.webp") center / 100% 100% no-repeat;
  box-shadow: 0 28px 48px rgba(4, 2, 0, .48);
}
.library-scene.zone-case-shakai .bookcase::after,
.library-scene.zone-case-ai .bookcase::after { display: none; }

/* 素材の上段には古書と標本があるため、旧来の飾り本の段は重ねない。 */
.library-scene.zone-case-shakai .bookcase > .row:first-of-type,
.library-scene.zone-case-ai .bookcase > .row:first-of-type { display: none; }

.library-scene.zone-case-shakai .bookcase > .row,
.library-scene.zone-case-ai .bookcase > .row {
  position: absolute;
  left: 9.4%;
  right: 9.4%;
  display: block;
  height: auto;
  z-index: 2;
}
.library-scene.zone-case-shakai .bookcase > .row:nth-of-type(2),
.library-scene.zone-case-ai .bookcase > .row:nth-of-type(2) { top: 23.2%; bottom: 55.1%; }
.library-scene.zone-case-shakai .bookcase > .row:nth-of-type(3),
.library-scene.zone-case-ai .bookcase > .row:nth-of-type(3) { top: 49.7%; bottom: 32.1%; }
.library-scene.zone-case-shakai .bookcase > .row:nth-of-type(4),
.library-scene.zone-case-ai .bookcase > .row:nth-of-type(4) { top: 71.7%; bottom: 10.2%; }

.library-scene.zone-case-shakai .cell,
.library-scene.zone-case-ai .cell {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 26px 12px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.library-scene.zone-case-shakai .cell::after,
.library-scene.zone-case-ai .cell::after { display: none; }
.library-scene.zone-case-shakai .books,
.library-scene.zone-case-ai .books { overflow: visible; }
.library-scene.zone-case-shakai .books.main-books,
.library-scene.zone-case-ai .books.main-books { gap: 5px; }

/* 背表紙は棚の奥行きに合わせ、触れた一冊だけが手前へ抜け出す既存の動きを維持する。 */
.library-scene.zone-case-shakai .spine,
.library-scene.zone-case-ai .spine { width: 76px !important; height: 224px !important; font-size: 24px; }
.library-scene.zone-case-shakai .spine.wide,
.library-scene.zone-case-ai .spine.wide { font-size: 22px; }
.library-scene.zone-case-shakai .spine.compact,
.library-scene.zone-case-ai .spine.compact { font-size: 19px; }

/* 段札は素材の棚板に留めた象牙紙として見せる。 */
.library-scene.zone-case-shakai .shelf-plate,
.library-scene.zone-case-ai .shelf-plate {
  bottom: -11px;
  left: 13px;
  font-size: 23px;
  padding: 3px 15px;
  z-index: 7;
}
.library-scene.zone-case-shakai .case-plate,
.library-scene.zone-case-ai .case-plate {
  top: 11.5%;
  z-index: 9;
  min-width: 265px;
  padding: 7px 26px;
  text-align: center;
  color: #F7E6B2;
  border-color: #B88942;
  background: linear-gradient(180deg, rgba(103, 65, 29, .96), rgba(48, 27, 11, .98));
  box-shadow: 0 3px 7px rgba(12, 6, 1, .62), inset 0 1px 0 rgba(255, 224, 144, .28);
}

/* 王・女王と馬車は主役ではなく、棚の小さな木彫りの仕切り・模型へ抑える。 */
.library-scene.zone-case-shakai .bookend-figure,
.library-scene.zone-case-ai .bookend-figure {
  transform: scale(.78) translateY(7px);
  filter: sepia(.18) saturate(.76) contrast(.94);
}
.library-scene.zone-case-shakai .bookend-waku,
.library-scene.zone-case-ai .bookend-waku {
  transform: scale(.78) translateY(7px);
  transform-origin: center bottom;
  margin-inline: -9px;
}
.library-scene.zone-case-shakai .shelf-carriage {
  flex: 0 0 310px;
  width: 310px;
  height: 150px;
  margin: 0 0 1px auto;
  filter: sepia(.16) saturate(.72) brightness(.84) drop-shadow(2px 4px 4px rgba(20, 9, 2, .62));
}

@media (max-width: 700px) {
  .library-scene.zone-case-shakai .bookcase,
  .library-scene.zone-case-ai .bookcase { box-shadow: 0 18px 32px rgba(4, 2, 0, .42); }
}

/* ==================================================================
   社会福祉士・可動書架
   ------------------------------------------------------------------
   柱・梁・壁龕・台輪は部屋背景の建築、本・棚縁・飾りはHTMLの機能層とする。
   本だけが自然に手前へ抜け出し、書架全体は壁に造り付けられて見える構成。
   ================================================================== */
.library-scene.zone-case-shakai .bookcase.bookcase-constructed {
  /* 本・仕切り・馬車の実寸で組み、余白だけで幅を増やさない。 */
  width: 1428px !important;
  height: 1260px;
  /* 書架全体を室内の床面に据え付ける。背景の床より上に浮かせない。 */
  top: auto;
  bottom: 0;
  padding: 0;
  display: block;
  gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  /* 室内の机・窓・隣室の書架と同じ遠近感になる一回り小さい縮尺。 */
  transform: translateX(-50%) scale(.72);
  transform-origin: bottom center;
  filter: saturate(.90) brightness(.97);
  /* 外枠・背板・台輪は部屋背景の建築として描く。ここで箱を再描画すると
     書架がもう一台置かれたように見えるため、機能層は透明に保つ。 */
  background: transparent;
  box-shadow: none;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed::before {
  display: none;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed::after {
  display: none;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed > .row,
.library-scene.zone-case-shakai .bookcase.bookcase-constructed > .row:first-of-type {
  /* 背景の中間棚三枚と最下部の台輪へ、本の接地線を直接合わせる。 */
  position: absolute;
  left: 40px;
  right: 38px;
  bottom: auto;
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  z-index: 2;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed > .row:nth-of-type(1) { top: 0; height: 224px; }
.library-scene.zone-case-shakai .bookcase.bookcase-constructed > .row:nth-of-type(2) { top: 188px; height: 292px; }
.library-scene.zone-case-shakai .bookcase.bookcase-constructed > .row:nth-of-type(3) { top: 448px; height: 292px; }
.library-scene.zone-case-shakai .bookcase.bookcase-constructed > .row:nth-of-type(4) { top: 718px; height: 292px; }
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 12px 0 17px;
  overflow: visible;
  /* 壁龕の木目と奥行きは背景画像が担当する。段ごとの背板を重ねない。 */
  background: transparent;
  box-shadow: none;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell::after {
  /* 棚板は背景画像の建築部材。HTML側では二重に描かない。 */
  display: none;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari {
  padding-left: 0;
  padding-right: 0;
  gap: 4px;
  justify-content: flex-start;
  overflow: hidden;
  background: transparent;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari > .books {
  /* 小物はそのまま残し、本の束を可変幅にして棚の空白だけを埋める。 */
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari > .books .deco {
  /* 余った幅を隙間へ配らず、各冊を少しずつ太らせて端まで密に並べる。 */
  flex-grow: 1;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari > .books .deco,
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .fill:not(.carriage-fill) .deco {
  /* この書架では「本を抜いた隙間」と傾きによる楔形の空白を作らない。 */
  margin-right: 0 !important;
  transform: none !important;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .fill:not(.carriage-fill) {
  gap: 0;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .fill:not(.carriage-fill) .deco {
  /* 第3段の最長本も上の棚板へ出ない高さに収める。 */
  max-height: 240px;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .books { overflow: visible; }
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .books.main-books {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 5px;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .spine {
  width: 72px !important;
  height: 224px !important;
  font-size: 24px;
  /* 教材の識別色は革の染め色として残し、彩度だけを抑える。
     罫線・金箔題字・摩耗を重ねて、棚の古書と同じ素材感にそろえる。 */
  color: #F5E3B4 !important;
  padding: 11px 0;
  border-left: 2px solid rgba(242, 201, 118, .30);
  border-right: 2px solid rgba(31, 10, 2, .62);
  background:
    linear-gradient(90deg, rgba(17, 5, 1, .58), transparent 15%, rgba(255, 223, 151, .12) 47%, rgba(19, 5, 1, .66)),
    repeating-linear-gradient(0deg, rgba(255, 224, 160, .075) 0 1px, rgba(36, 10, 2, .10) 1px 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, rgba(255, 229, 169, .05) 0 2px, transparent 2px 7px),
    linear-gradient(106deg, rgba(12, 3, 1, .42), transparent 36%, rgba(255, 222, 145, .14) 55%, rgba(18, 4, 1, .40)),
    var(--spine-base);
  background-blend-mode: multiply, soft-light, overlay, multiply, normal;
  box-shadow:
    inset 3px 0 3px rgba(255, 226, 157, .13),
    inset -4px 0 5px rgba(10, 2, 0, .62),
    inset 0 0 0 1px rgba(241, 196, 106, .12),
    1px 3px 5px rgba(8, 2, 0, .65);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .spine-moji {
  text-shadow: 0 1px 0 rgba(255, 245, 210, .34), 0 -1px 1px rgba(45, 17, 2, .92), 1px 0 1px rgba(21, 6, 1, .56);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .spine::before,
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .spine::after {
  left: 12%;
  right: 12%;
  height: 3px;
  opacity: .86;
  background: linear-gradient(90deg, transparent, #8A551C 14%, #F2D187 48%, #8A551C 86%, transparent);
  box-shadow: 0 1px 0 rgba(22, 6, 1, .82);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .spine:hover,
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .spine:focus-visible {
  box-shadow:
    inset 3px 0 3px rgba(255, 226, 157, .16),
    inset -4px 0 5px rgba(10, 2, 0, .62),
    inset 0 0 0 1px rgba(250, 213, 133, .32),
    1px 7px 12px rgba(6, 1, 0, .78),
    0 0 17px rgba(224, 171, 76, .32);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .deco {
  border-radius: 1px 1px 0 0;
  border-left-color: rgba(224, 187, 112, .32);
  border-right: 1px solid rgba(18, 6, 1, .66);
  background:
    linear-gradient(180deg,
      transparent 0 11%, rgba(210, 169, 87, .30) 11% 14%, transparent 14% 82%,
      rgba(210, 169, 87, .26) 82% 85%, transparent 85%),
    linear-gradient(90deg, rgba(15, 4, 1, .52), rgba(255, 222, 151, .11) 38%, rgba(18, 5, 1, .58)),
    repeating-linear-gradient(0deg, rgba(242, 205, 132, .05) 0 1px, rgba(34, 10, 2, .08) 1px 5px),
    var(--deco-base);
  background-blend-mode: screen, multiply, soft-light, normal;
  box-shadow:
    inset 2px 0 2px rgba(244, 210, 142, .12),
    inset -3px 0 3px rgba(9, 2, 0, .56),
    1px 2px 3px rgba(7, 2, 0, .58);
  filter: sepia(.34) saturate(.58) brightness(.78) contrast(1.08);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari .photo-stand {
  width: 104px;
  height: 124px;
  filter: sepia(.34) saturate(.62) brightness(.80) contrast(1.08)
    drop-shadow(1px 3px 5px rgba(9, 3, 0, .66));
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari .plant {
  width: 94px;
  height: 138px;
  filter: sepia(.28) saturate(.64) brightness(.76) contrast(1.08)
    drop-shadow(1px 3px 5px rgba(9, 3, 0, .66));
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari .frame {
  width: 74px;
  height: 94px;
  margin-bottom: 2px;
  border-width: 8px;
  border-color: #76502C;
  background: linear-gradient(155deg, #E3D4B7, #BDAA86);
  filter: sepia(.36) saturate(.58) brightness(.80) contrast(1.08)
    drop-shadow(1px 3px 4px rgba(9, 3, 0, .62));
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari .stack {
  gap: 3px;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .cell-kazari .lay {
  height: 18px;
  border-radius: 1px;
  filter: sepia(.32) saturate(.60) brightness(.78) contrast(1.06);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .spine.wide { font-size: 22px; }
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .spine.compact { font-size: 19px; }
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .carriage-fill {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  overflow: visible;
  /* 最後の本とは接触させず、後輪が右側板からはみ出さない位置へ寄せる。 */
  margin-left: 0;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .shelf-plate {
  bottom: -14px;
  left: 14px;
  font-size: 23px;
  padding: 3px 15px;
  z-index: 8;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .case-plate {
  top: -29px;
  z-index: 8;
  min-width: 280px;
  padding: 8px 28px;
  color: #F7E6B2;
  border-color: #D4A35C;
  background: linear-gradient(180deg, #83501F, #3D1E09);
  box-shadow: 0 4px 9px rgba(12, 5, 1, .72), inset 0 1px 0 rgba(255, 226, 155, .34);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .bookend-figure {
  /* 棚の端を支える木彫り人形として、本より半段ぶん大きく見せる。 */
  transform: scale(1.22) translateY(3px);
  filter: sepia(.18) saturate(.76) contrast(.94);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .bookend-waku .bookend {
  /* 元画像に描き込まれた木製台座を切り離す。切り取った高さぶん人形本体を
     棚面へ戻し、札とは独立した木彫り人形として接地させる。 */
  clip-path: inset(0 0 22px 0);
  transform: translateY(22px);
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .bookend-waku {
  transform: scale(1.22) translateY(3px);
  transform-origin: center bottom;
  margin-inline: -2px;
  /* 拡大した人形枠は独立した重なり順になるため、枠ごと棚板より手前へ置く。 */
  z-index: 6;
  overflow: visible;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .bookend-waku .shelf-plate {
  box-sizing: border-box;
  /* 行頭の「過去問」札と同じ見かけ寸法になるよう、外側の人形拡大率を相殺する。 */
  width: 210px;
  height: 29px;
  bottom: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  z-index: 9;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .bookend-waku:has(.bookend-figure-ou) .shelf-plate {
  left: -6px;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .bookend-waku:has(.bookend-figure-joou) .shelf-plate {
  left: 34px;
  width: max-content;
  min-width: 0;
  padding-inline: 15px;
}
.library-scene.zone-case-shakai .bookcase.bookcase-constructed .shelf-carriage {
  position: relative;
  left: -21.4px;
  top: 1.4px;
  flex: 0 0 432px;
  width: 432px;
  height: 214px;
  margin: 0 0 1px 0;
  filter: sepia(.16) saturate(.72) brightness(.94) drop-shadow(2px 4px 4px rgba(20, 9, 2, .62));
}

@media (max-width: 700px) {
  .library-scene.zone-case-shakai .bookcase.bookcase-constructed {
    box-shadow: none;
  }
}

/* ==================================================================
   福祉・介護×AI・発明品キャビネット
   ------------------------------------------------------------------
   柱・棚板・背板・研究道具は背景画像の建築とし、HTML側には選べる
   アプリ／資料の本だけを残す。社会福祉士書架と同じ役割分担で、
   背景の前へ別の家具を重ねない。
   ================================================================== */
.library-scene.zone-case-ai > .scene-plaque {
  top: 2.2%;
  left: 35.5%;
  width: 500px;
  padding: 11px 20px 12px;
  text-align: center;
  transform: translateX(-50%);
  background: linear-gradient(145deg, rgba(88, 51, 23, .88), rgba(34, 18, 8, .92));
  box-shadow: inset 0 0 0 2px rgba(22, 10, 3, .40), 0 5px 12px rgba(4, 2, 0, .42);
}
.library-scene.zone-case-ai > .scene-plaque > span { font-size: 14px; }
.library-scene.zone-case-ai > .scene-plaque h2 { margin-top: 2px; font-size: 28px; }
.library-scene.zone-case-ai > .scene-plaque p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 研究工房の右壁：解析機関の設計図。背景へ焼き込まず、押せる額として重ねる。 */
.library-scene.zone-case-ai .ai-blueprint-frame {
  position: absolute;
  z-index: 14;
  left: 58.3%;
  top: 14.6%;
  width: 15.2%;
  display: block;
  line-height: 0;
  filter: sepia(.10) saturate(.82) brightness(.78)
    drop-shadow(0 10px 12px rgba(5, 2, 0, .64));
  transition: filter .24s ease, transform .24s ease;
}
.library-scene.zone-case-ai .ai-blueprint-frame img {
  display: block;
  width: 100%;
  height: auto;
}
@media (hover: hover) {
  .library-scene.zone-case-ai .ai-blueprint-frame:hover {
    filter: sepia(.06) saturate(.90) brightness(.92)
      drop-shadow(0 13px 16px rgba(5, 2, 0, .72));
  }
}
.library-scene.zone-case-ai .ai-blueprint-frame:focus-visible {
  outline: 4px solid #F0CE7E;
  outline-offset: 5px;
}

.library-scene.zone-case-ai .bookcase {
  position: absolute;
  inset: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  padding: 0;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
}
.library-scene.zone-case-ai .bookcase::after { display: none; }
/* 部屋名は上の室札へ一本化する。 */
.library-scene.zone-case-ai .bookcase > .case-plate { display: none; }
/* レトロPC・ロボット・設計図は、背景の上部展示棚へ実在物として描く。 */
.library-scene.zone-case-ai .bookcase > .row:first-of-type { display: none; }

.library-scene.zone-case-ai .bookcase > .row {
  position: absolute;
  left: 20.3%;
  right: 48.4%;
  bottom: auto;
  display: block;
  width: auto;
  min-width: 0;
  z-index: 2;
}
.library-scene.zone-case-ai .bookcase > .row:nth-of-type(2) {
  top: 28.1%;
  bottom: auto;
  height: 18.6%;
}
.library-scene.zone-case-ai .bookcase > .row:nth-of-type(3) {
  top: 47.3%;
  bottom: auto;
  height: 16.4%;
}
.library-scene.zone-case-ai .bookcase > .row:nth-of-type(4) {
  top: 64.2%;
  bottom: auto;
  height: 19.1%;
}
.library-scene.zone-case-ai .bookcase .cell {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* 棚画像の内縁と本の影を避け、実画面で本同士と同じ幅に見える余白を取る。 */
  padding: 0 0 7px 15px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.library-scene.zone-case-ai .bookcase .cell::after { display: none; }
.library-scene.zone-case-ai .bookcase .books { overflow: visible; }
.library-scene.zone-case-ai .bookcase .books.main-books {
  width: 100%;
  max-width: 94%;
  min-width: 0;
  gap: 7px;
  /* 3段とも一冊目を同じ柱位置へそろえ、冊数が少ない段だけ中央へずらさない。 */
  justify-content: flex-start;
}
.library-scene.zone-case-ai .bookcase .fill {
  /* 背景の空棚へ、押せない飾り本を重ねない。 */
  display: none;
}
.library-scene.zone-case-ai .bookcase > .row:nth-of-type(4) .fill {
  /* 参考資料の右端だけは、増冊欄と分かるよう落ち着いた古書で空きを納める。 */
  display: flex;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  padding-left: 2px;
  align-items: flex-end;
  overflow: hidden;
  filter: sepia(.18) saturate(.56) brightness(.72);
}
.library-scene.zone-case-ai .bookcase > .row:nth-of-type(4) .fill .deco {
  max-height: 148px;
  opacity: .58 !important;
}

/* 工房の本は、現代UI色ではなく革装の染め色として棚の古木へ馴染ませる。 */
.library-scene.zone-case-ai .bookcase .spine {
  /* 段に入る冊数は背景の棚の幅で決まる。84pxだと1段6冊で頭打ちになるため、
     社会福祉士の書架と同じ76pxに揃えて7冊目(申し送りノート)まで収める。 */
  width: 76px !important;
  height: 180px !important;
  padding: 10px 0;
  border-left: 2px solid rgba(231, 190, 105, .28);
  border-right: 2px solid rgba(27, 9, 2, .68);
  color: #F4DEAA !important;
  font-size: 21px;
  background:
    linear-gradient(90deg, rgba(16, 5, 1, .60), transparent 16%, rgba(255, 221, 143, .11) 47%, rgba(17, 4, 1, .68)),
    repeating-linear-gradient(0deg, rgba(247, 210, 137, .06) 0 1px, rgba(34, 10, 2, .10) 1px 4px, transparent 4px 8px),
    linear-gradient(106deg, rgba(11, 3, 1, .40), transparent 38%, rgba(255, 218, 136, .12) 56%, rgba(17, 4, 1, .42)),
    var(--spine-base);
  background-blend-mode: multiply, soft-light, multiply, normal;
  box-shadow:
    inset 3px 0 3px rgba(255, 224, 151, .12),
    inset -4px 0 5px rgba(9, 2, 0, .66),
    inset 0 0 0 1px rgba(225, 175, 84, .13),
    1px 3px 5px rgba(7, 2, 0, .68);
}
.library-scene.zone-case-ai .bookcase .spine.wide { font-size: 19px; }
.library-scene.zone-case-ai .bookcase .spine.compact { font-size: 17px; }
.library-scene.zone-case-ai .bookcase .spine-moji {
  text-shadow: 0 1px 0 rgba(255, 244, 202, .30), 0 -1px 1px rgba(41, 14, 2, .94), 1px 0 1px rgba(18, 5, 1, .62);
}
.library-scene.zone-case-ai .bookcase .spine::before,
.library-scene.zone-case-ai .bookcase .spine::after {
  left: 12%;
  right: 12%;
  height: 3px;
  opacity: .82;
  background: linear-gradient(90deg, transparent, #7C4B18 14%, #E8C879 48%, #7C4B18 86%, transparent);
  box-shadow: 0 1px 0 rgba(19, 5, 1, .84);
}
.library-scene.zone-case-ai .bookcase .bookend-figure {
  /* 本より少し大きい存在感は残し、熊皮帽が上の棚板へ突き抜けない高さに収める。 */
  transform: scale(1.30) translateY(7px);
  filter: sepia(.22) saturate(.70) brightness(.88) contrast(.98);
}
.library-scene.zone-case-ai .bookcase .bookend-figure-guard {
  position: relative;
  top: 6.9px;
}

/* 2026-08-26に配置調整モードから確定した文字位置。 */
.zone-salon .library-quick-access a:nth-of-type(2) > strong {
  position: relative;
  left: -1.8px;
  top: -1.1px;
}
.zone-salon .library-quick-access a:nth-of-type(4) > strong {
  position: relative;
  left: .7px;
  top: 1.4px;
}
.scene-path-next[data-zone-target="case-ai"] > strong {
  position: relative;
  top: -1px;
}

/* 段札も独立した白紙カードではなく、棚縁へ留めた真鍮・木の表示札にする。 */
.library-scene.zone-case-ai .bookcase .shelf-plate {
  top: -14px;
  bottom: auto;
  left: 10px;
  padding: 4px 15px;
  border: 1px solid #A67835;
  border-radius: 2px;
  color: #F3DCA5;
  background: linear-gradient(180deg, rgba(96, 57, 24, .96), rgba(40, 21, 8, .98));
  font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 222, 145, .22), 0 3px 6px rgba(12, 5, 1, .58);
  text-shadow: 0 1px 2px rgba(15, 5, 1, .92);
  z-index: 8;
}

@media (hover: hover) {
  .library-scene.zone-case-ai .bookcase .spine:hover {
    box-shadow:
      inset 3px 0 3px rgba(255, 226, 157, .16),
      inset -4px 0 5px rgba(10, 2, 0, .64),
      inset 0 0 0 1px rgba(245, 207, 124, .34),
      1px 7px 12px rgba(6, 1, 0, .80),
      0 0 17px rgba(210, 160, 70, .34);
  }
}
.library-scene.zone-case-ai .bookcase .spine:focus-visible {
  box-shadow:
    inset 0 0 0 2px rgba(255, 222, 145, .68),
    1px 7px 12px rgba(6, 1, 0, .80),
    0 0 18px rgba(224, 177, 83, .46);
}

/* ==================================================================
   大図書館の場所一覧
   ------------------------------------------------------------------
   ケアマネ「学びの屋敷」と同様に、横スライダーではなく現在地を示す
   簡潔な場所一覧と、各室内の道標で巡る。空間の横幅はそのまま保つ。
   ================================================================== */
.page-library .library-nav-frame {
  position: relative;
  z-index: 45;
}
.page-library .library-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 46px;
  padding: 7px max(18px, calc((100% - 1460px) / 2));
  overflow-x: auto;
  scrollbar-width: thin;
  background:
    linear-gradient(90deg, rgba(21, 9, 3, .76), rgba(77, 41, 17, .82) 18% 82%, rgba(21, 9, 3, .76)),
    linear-gradient(180deg, #6E3C19, #2A1206);
  border-top: 1px solid rgba(247, 211, 136, .28);
  border-bottom: 3px solid #170803;
  box-shadow: 0 6px 15px rgba(7, 2, 0, .38), inset 0 1px 0 rgba(255, 230, 173, .14);
}
.page-library .library-nav-more,
.page-library .pano-pan-cues,
.page-library .mobile-more-cue { display: none; }
.page-library .library-nav a {
  flex: 0 0 auto;
  padding: 7px 13px 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #EAD4A6;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.15;
  text-decoration: none;
  text-shadow: 0 1px 2px #160803;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.page-library .library-nav a.is-current,
.page-library .library-nav a[aria-current="location"] {
  color: #FFF4D2;
  border-color: rgba(238, 195, 109, .78);
  background: linear-gradient(180deg, rgba(176, 116, 49, .72), rgba(83, 42, 15, .80));
  box-shadow: inset 0 1px 0 rgba(255, 235, 175, .30), 0 1px 3px rgba(0, 0, 0, .32);
}
.page-library .library-nav .library-nav-catalogue {
  margin-left: 10px;
  color: #FFE6A6;
  border-color: rgba(217, 173, 89, .48);
  background: rgba(47, 23, 8, .66);
}
@media (hover: hover) {
  .page-library .library-nav a:hover {
    color: #FFF6D8;
    border-color: rgba(241, 204, 126, .72);
    background: rgba(160, 101, 41, .52);
  }
}
.page-library .library-nav a:focus-visible {
  outline: 3px solid #F4D17B;
  outline-offset: -1px;
}
@media (max-width: 700px), (hover: none) and (pointer: coarse), (orientation: landscape) and (max-width: 1000px) and (max-height: 700px) {
  /* 図書館では、上へ戻る操作を「部屋全体に戻る」にまとめる。 */
  .page-library .mobile-top-button { display: none; }
  .page-library .site-header-inner {
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    gap: 6px 12px;
  }
  .page-library .site-brand { font-size: 22px; }
  .page-library .site-tag { display: none; }
  .page-library .zoom { gap: 8px; margin-left: 0; }
  .page-library .zoom-btn { width: 44px; height: 44px; }
  .page-library .zoom-now { height: 44px; }
  /* 横向きでも部屋の中央を大きな前室・次室札で隠さない。移動は上の場所一覧で行う。 */
  .page-library .scene-path.scene-path-page-edge { display: none; }
  .page-library .library-nav {
    justify-content: flex-start; min-height: 43px; padding: 6px 10px;
    scrollbar-width: none;
  }
  .page-library .library-nav::-webkit-scrollbar { display: none; }
  .page-library .library-nav a { padding: 7px 11px 6px; font-size: 14px; }
  .page-library .library-nav .library-nav-catalogue { margin-left: 4px; }
  .page-library .library-nav-more {
    position: absolute; z-index: 3; top: 50%;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 43px; padding: 0;
    border: 0; color: #FFF0C5; font: 700 34px/1 var(--serif);
    background: linear-gradient(90deg, rgba(37, 16, 5, .98) 35%, rgba(72, 38, 14, .82) 72%, transparent);
    text-shadow: 0 1px 3px #120601; cursor: pointer;
    transform: translateY(-50%);
  }
  .page-library .library-nav-more-right {
    right: 0;
    background: linear-gradient(270deg, rgba(37, 16, 5, .98) 35%, rgba(72, 38, 14, .82) 72%, transparent);
  }
  .page-library .library-nav-more-left { left: 0; }
  .page-library .library-nav-more[hidden] { display: none; }
  .page-library .library-nav-more:focus-visible {
    outline: 3px solid #F4D17B; outline-offset: -3px;
  }

  .page-library .pano-pan-cues:not([hidden]) {
    position: fixed; z-index: 89;
    left: var(--sg-pan-viewport-left, 0); top: var(--sg-pan-viewport-top, 0);
    width: var(--sg-pan-viewport-width, 100vw);
    height: var(--sg-pan-viewport-height, 100vh);
    display: block; pointer-events: none;
    transform: scale(var(--sg-pan-viewport-scale, 1));
    transform-origin: 0 0;
  }
  .page-library .pano-pan-button {
    position: absolute; top: 52%;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 78px; padding: 0;
    border: 1px solid rgba(239, 199, 117, .76);
    color: #FFF1C8; font: 700 42px/1 var(--serif);
    background: linear-gradient(180deg, rgba(111, 67, 30, .90), rgba(47, 23, 8, .92));
    text-shadow: 0 1px 3px #130701;
    box-shadow: inset 0 0 0 2px rgba(255, 222, 151, .11), 0 4px 12px rgba(5, 2, 0, .48);
    transform: translateY(-50%); pointer-events: auto; cursor: pointer;
  }
  .page-library .pano-pan-left { left: 5px; border-radius: 0 8px 8px 0; }
  .page-library .pano-pan-right { right: 5px; border-radius: 8px 0 0 8px; }
  .page-library .pano-fit-return {
    position: absolute; right: max(10px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom)); pointer-events: auto;
    box-shadow: 0 3px 12px #0008; touch-action: manipulation;
  }
  .page-library .pano-pan-button[hidden] { display: none; }
  .page-library .pano-pan-button:focus-visible {
    outline: 3px solid #F4D17B; outline-offset: 2px;
  }

  .page-library .mobile-more-cue:not([hidden]) {
    position: fixed; z-index: 88;
    left: max(10px, env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom));
    display: block; padding: 8px 14px 9px;
    border: 1px solid rgba(235, 194, 111, .74); border-radius: 999px;
    color: #FFF0C7; background: rgba(48, 23, 8, .92);
    font: 700 14px/1.2 var(--serif); letter-spacing: .06em;
    text-shadow: 0 1px 2px #120601;
    box-shadow: 0 4px 12px rgba(5, 2, 0, .46);
    transform: none; pointer-events: none;
  }
}

/* 全体表示はブラウザーの操作バーが見えている高さを基準にする。
   svhならバーの出入りで部屋が伸縮しない。上部欄の高さはpano.jsの実測値。 */
.page-library .pano.is-fit {
  max-height: calc(100vh - var(--sg-pano-top, 0px) - 4px - env(safe-area-inset-bottom));
  max-height: calc(100svh - var(--sg-pano-top, 0px) - 4px - env(safe-area-inset-bottom));
}
.page-library .pano.is-fit .stage { vertical-align: top; }
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 700px), (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .page-library .site-header-inner { flex-wrap: nowrap; padding-block: 4px; gap: 8px; }
  .page-library .site-brand { min-width: 0; font-size: clamp(16px, 2.6vw, 22px); line-height: 1.3; }
  .page-library .zoom { margin-left: auto; gap: 6px; }
  .page-library .zoom-fit { padding-inline: 8px; font-size: 13px; }
}