:root{--paper:#fffdf8;--ink:#2f2a24;--accent:#6a4a2f;--line:#d8cdbc}*{box-sizing:border-box}html,body{margin:0}body{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:radial-gradient(circle at top,#f8f2e6,#e8dece)}
.site-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px clamp(16px,4vw,48px);background:rgba(255,253,248,.9);border-bottom:1px solid #dbcfc0}.eyebrow{margin:0 0 2px;font-size:.78rem;letter-spacing:.18em;color:#756a5e}.site-head h1{margin:0;font-family:serif}.issue{margin:4px 0 0;color:#76695d}.back-link{color:var(--accent);text-decoration:none;border:1px solid var(--line);background:#fff;padding:9px 13px;border-radius:999px}
main{padding:24px 10px 40px}.library-main{max-width:1280px;margin:auto}.intro{text-align:center;padding:18px}.kicker{font-size:.8rem;letter-spacing:.18em;color:#8a6c52}.intro h2{font-family:serif}.bookshelf{padding:26px 22px 0;border-radius:18px 18px 8px 8px;background:linear-gradient(180deg,#7a5135,#4b2d1c);box-shadow:0 22px 45px #49311f2c}.books-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 24px;align-items:end}.book-link{text-decoration:none;color:inherit}.book-cover-wrap{position:relative;width:min(100%,220px);margin:auto;aspect-ratio:.707/1;transition:.2s}.book-link:hover .book-cover-wrap{transform:translateY(-6px)}.book-cover{width:100%;height:100%;object-fit:cover;border-radius:4px 8px 8px 4px;box-shadow:8px 8px 18px #0004}.book-spine{position:absolute;left:0;top:0;bottom:0;width:10px;z-index:2;background:linear-gradient(90deg,#0005,#fff2,#0002)}.book-meta{text-align:center;color:#fff8ef;padding:12px 4px 18px}.book-meta strong{display:block;font-family:serif}.book-meta span{font-size:.78rem;color:#e7d6c6}.shelf-board{height:24px;margin:0 -22px;background:linear-gradient(#b78660,#73482f 45%,#5b3723);box-shadow:0 -4px 10px #0003}
.viewer-wrap{max-width:1280px;margin:auto}.book-shell{display:grid;grid-template-columns:52px 1fr 52px;gap:10px;align-items:center}.book{display:grid;grid-template-columns:1fr 1fr;max-width:1100px;margin:auto;aspect-ratio:1.414/1;filter:drop-shadow(0 18px 25px #422f2028)}.page-slot{background:var(--paper);overflow:hidden;display:flex;align-items:center;justify-content:center}.page-slot img{width:100%;height:100%;object-fit:contain}.blank{background:linear-gradient(135deg,#fffdf8,#f4eee4)}.nav{width:48px;height:72px;border:0;border-radius:14px;background:#65472f;color:#fff;font-size:2.3rem}.nav:disabled{opacity:.25}.controls{display:flex;justify-content:center;gap:16px;align-items:center;margin:18px}.controls button{border:1px solid var(--line);background:white;border-radius:999px;padding:9px 14px}.hint{text-align:center;color:#756a5e}.empty{max-width:700px;margin:50px auto;background:white;padding:25px;border-radius:14px}footer{text-align:center;padding:0 10px 30px;color:#887a6c}
@media(max-width:900px){.books-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.books-grid{grid-template-columns:repeat(2,1fr);gap:20px 14px}.book-shell{display:block}.book{display:block;aspect-ratio:auto;filter:none}.page-slot{display:none;width:100%;aspect-ratio:.707/1}.page-slot.active-mobile{display:flex}.nav{position:fixed;z-index:20;bottom:70px;width:46px;height:46px;border-radius:50%}.nav.prev{left:14px}.nav.next{right:14px}.hint{padding:0 55px}.site-head{align-items:flex-start}.back-link{font-size:.8rem}}