.bookshelf-intro { color: #666; font-size: 14px; margin-top: -0.8rem; margin-bottom: 1.5rem; }
.book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 26px; }
.book { appearance: none; display: block; border: 0; padding: 0; width: 100%; margin: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.book-face { position: relative; height: 183px; display: flex; align-items: flex-end; justify-content: center; padding: 0 2px 13px; }
.book-face::after { content: ''; position: absolute; bottom: 0; left: -13px; right: -13px; border-bottom: 1px solid #ddd; }
.book:nth-child(4n+1) .book-face::after { left: 0; }
.book:nth-child(4n) .book-face::after { right: 0; }
.book-cover { display: block; max-width: 100%; max-height: 170px; width: auto; height: auto; object-fit: contain; box-shadow: 1px 2px 4px #00000018; transition: transform 160ms ease, box-shadow 160ms ease; }
.book:hover .book-cover, .book:focus-visible .book-cover { transform: translateY(-4px); box-shadow: 1px 4px 7px #0000001b; }
.book-caption { display: block; padding-top: 12px; min-height: 64px; }
.book-title { display: block; font-size: 13px; line-height: 1.35; }
.book-author { display: block; font-size: 12px; line-height: 1.4; color: #777; margin-top: 5px; }
.cover-fallback { width: 109px; height: 164px; background: #f3f2ef; border: 1px solid #e5e3df; padding: 13px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; line-height: 1.35; color: #555; }
.dialog-open { overflow: hidden; }
.book-dialog { box-sizing: border-box; border: 1px solid #e2e2e2; border-radius: 2px; background: #fff; color: #1a1a1a; padding: 0; width: min(650px, calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: hidden; box-shadow: 0 16px 60px #00000020; }
.book-dialog::backdrop { background: #0000005c; }
.close-detail { position: absolute; top: 8px; right: 8px; appearance: none; background: transparent; border: 0; font: 25px Arial, sans-serif; color: #777; cursor: pointer; width: 40px; height: 40px; z-index: 1; }
.close-detail:hover { color: #111; }
.close-detail:focus-visible { outline: 1px solid #888; outline-offset: -5px; }
.detail-layout { box-sizing: border-box; display: grid; grid-template-columns: 166px 1fr; gap: 37px; padding: 50px 38px 42px; align-items: center; max-height: calc(100svh - 34px); overflow: auto; overscroll-behavior: contain; }
.detail-cover { display: flex; align-items: center; justify-content: center; min-width: 0; }
.detail-cover img { max-width: 166px; max-height: 250px; width: auto; height: auto; display: block; object-fit: contain; box-shadow: 1px 3px 7px #00000016; }
.detail-cover .cover-fallback { width: 166px; height: 250px; font-size: 22px; padding: 20px; }
.detail-info h2 { font-size: 24px; font-weight: 400; line-height: 1.22; margin: 0 0 11px; text-wrap: balance; }
.detail-author { color: #666; font-size: 16px; line-height: 1.45; margin-bottom: 0; }
.detail-edition { border-top: 1px solid #ededed; margin-top: 23px; padding-top: 18px; font-size: 13px; line-height: 1.6; color: #666; }
.detail-edition p { margin: 0 0 8px; }
.detail-edition p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 28px; }
  .book-face { height: 206px; padding-bottom: 14px; }
  .book-cover { max-height: 192px; }
  .book-title { font-size: 14px; }
  .book-author { font-size: 12px; }
  .book-face::after { left: -14px; right: -14px; }
  .book:nth-child(2n+1) .book-face::after { left: 0; }
  .book:nth-child(2n) .book-face::after { right: 0; }
  .book-caption { min-height: 54px; }
  .detail-layout { grid-template-columns: 1fr; padding: 46px 28px 30px; gap: 24px; }
  .detail-cover img { max-height: 198px; max-width: 136px; }
  .detail-cover .cover-fallback { width: 120px; height: 180px; font-size: 17px; }
  .detail-info h2 { font-size: 24px; }
  .detail-author { font-size: 16px; margin-bottom: 0; }
  .detail-edition { font-size: 13px; margin-top: 20px; padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .book-cover { transition: none; } }