/* 9-A2：配置・寸法は仮。既存棚画像の中央1段をCSSで繰り返し、12段にする。 */
#book.view{padding:0 0 108px}
#book>.content{position:relative;max-width:680px;min-width:0;border:0;box-shadow:none;border-radius:0}
.shelf-tools{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:6px;padding:0 8px;flex-wrap:wrap}
.shelf-count,.shelf-tools button{font:inherit;color:#443c35;background:#f6f0e6 url('assets/felt/cloth.webp') center/240px;border:0;border-radius:9px;box-shadow:0 2px 3px #443c351b;padding:3px 8px;font-size:12px}
.shelf-count{margin-right:auto;font-variant-numeric:tabular-nums}
.shelf-tools button{min-height:44px;cursor:pointer}
#collection.collection-shelf{display:block;position:relative;width:100%;padding-top:44px;background:url('assets/book/shelf.webp') center top/100% auto;margin:0;isolation:isolate}
.shelf-row{position:relative;width:100%;aspect-ratio:4/1;background:url('assets/book/shelf.webp') center 42.857%/100% 800% no-repeat}
#bookMap[hidden],#collection[hidden]{display:none!important}
#bookMap{margin:0 10px 20px}
#bookMap>.return-gacha{margin:4px 6px 12px}
#collection .shelf-resident{position:absolute;display:block;width:20%;height:auto;bottom:8%;aspect-ratio:1;padding:0;margin:0;transform:translateX(-50%);border:0;background:none;box-shadow:none;cursor:pointer;min-width:0;border-radius:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#collection .shelf-resident::before{content:'';position:absolute;left:18%;right:18%;bottom:0;height:6%;border-radius:50%;background:#443c352e;filter:blur(2px);z-index:-1}
#collection .shelf-resident img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:translateY(var(--foot));pointer-events:none}
#collection .is-silhouette .shelf-character,#collection .background-missing,.collection-large.is-silhouette{filter:url(#shelfSilhouette);opacity:.35}
#collection .shelf-resident:focus-visible{outline:2px solid #789078;outline-offset:2px;border-radius:8px}
#collectionDialog[open] .collection-large{animation:shelfReveal .9s ease-out both}
@keyframes shelfReveal{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
#collectionDialog[open] .collection-large.is-silhouette{animation-name:shelfShadowReveal}
@keyframes shelfShadowReveal{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:.35;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){#collectionDialog[open] .collection-large{animation:none}}

/* 図鑑だけ帯を縮め、既存の点線パネルを解除する。寸法は仮。 */
body:has(#book.active) .topbar{padding:4px 8px;gap:2px 6px}
body:has(#book.active) .topbar .logo{font-size:13px}
body:has(#book.active) .topbar .counters{gap:4px}
body:has(#book.active) .topbar .pill{border:0;box-shadow:none;padding:2px 4px;font-size:10px;line-height:1.4}
body:has(#book.active) .topbar .pill b{font-size:13px}
body:has(#book.active) .topbar .ticket span{display:inline}
body:has(#book.active) .dock,#book .glass{border:0;box-shadow:none;border-radius:0}
#bookMap{padding-top:48px}
#collectionDialog .collection-large.is-silhouette{filter:url(#shelfSilhouette);opacity:.35}

#collection .is-silhouette::before{display:none}
#collectionDialog .collection-large.is-silhouette{background:none}

/* 背景だけ各マス内の背面に収め、棚・人物の寸法は保持。 */
#collection .shelf-resident .shelf-background{position:absolute;inset:5% 0 0;width:100%;height:90%;object-fit:contain;transform:none;z-index:0}
#collection .shelf-character{position:relative;z-index:1}