/* pageflip.css — 本・手帳のページめくり（pageflip.js）の形。図鑑（base.css にも同じ物）とホームで使う */
.pf-book { position: relative; width: 100%; aspect-ratio: 1000 / 680; touch-action: pan-y; user-select: none; -webkit-user-select: none; font-size: calc(var(--pf-W, 500px) / 33); outline: none; }
.pf-book:focus-visible { box-shadow: 0 0 0 4px var(--focus); border-radius: 6px; }
.pf-book.pf-single { aspect-ratio: 500 / 830; overflow: hidden; font-size: calc(var(--pf-W, 360px) / 24); }
.pf-stage { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.pf-single .pf-stage { left: -100%; width: 200%; }
.pf-page { position: absolute; top: 0; bottom: 0; width: 50%; box-sizing: border-box; overflow: hidden; }
.pf-at-L { left: 0; } .pf-at-R { left: 50%; }
.pf-turn { position: absolute; inset: 0; pointer-events: none; }
.pf-clip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pf-flapwrap { position: absolute; inset: 0; filter: drop-shadow(0 6px 14px rgba(40, 25, 5, .45)); }
.pf-flap { transform-origin: 0 0; }
.pf-band { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pf-dog { position: absolute; right: 0; bottom: 0; width: 2.3em; height: 2.3em; pointer-events: none; background: linear-gradient(135deg, transparent 50%, var(--dog1) 50%, var(--dog2) 100%); box-shadow: -2px -2px 6px rgba(60, 40, 10, .25); }
.pf-blank { position: absolute; inset: 0; }

.pf-dog { --dog1: #E9E2CC; --dog2: #D9CFB2; }