:root { --maxw: 820px; --ink: #1a1a1a; --paper: #f8f5f2; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Chiron GoRound TC", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* 접근성: 건너뛰기 */
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus {
  left: 0; background: #fff; color: #000;
  padding: .5rem .75rem; border-radius: .5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* 헤더: '속삭이는' 제목 */
.page-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: center;
  padding: .75rem 1rem;
  background: linear-gradient(to bottom, rgba(247,246,243,.92), rgba(247,246,243,0));
  backdrop-filter: blur(2px);
}
.title {
  font-size: clamp(.8rem, 1.4vw, .95rem);
  letter-spacing: .02em;
  opacity: .22;
  transition: opacity .28s ease, transform .28s ease;
  user-select: none;
}
.page-header:hover .title,
.page-header:focus-within .title {
  opacity: .9;
}
.title:focus, .title:active { opacity: 1; transform: scale(1.01); }

/* 본문 너비/여백 */
main { width: min(92vw, var(--maxw)); margin: .25rem auto 2rem; }

/* 책장 배경 */
.shelf {
  position: relative;
  width: 100%;
  background: center / contain no-repeat url("../images/book-shelf.png"); /* book-shelf.png 경로 */
  aspect-ratio: 768 / 987;
  --padX: 8%;
  --rowH: 13.5%;

  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18))
          drop-shadow(0 20px 40px rgba(0, 0, 0, 0.10));
}

/* 선반(행) 공통 */
.shelf .row {
  list-style: none; margin: 0; padding: 0;
  position: absolute;
  left: var(--padX); right: var(--padX);
  height: var(--rowH);
  display: flex; align-items: flex-end; gap: 4%;
  justify-content: center;
}

/* 각 선반 위치 */
.shelf .r1 { top: var(--row1); transform: translateY(-50%); }
.shelf .r2 { top: var(--row2); transform: translateY(-50%); }
.shelf .r3 { top: var(--row3); transform: translateY(-50%); }
.shelf .r4 { top: var(--row4); transform: translateY(-50%); }

/* 책(정면 표지) */
.book { width: 15%; height: 100%; }
.book a { display: block; height: 100%; text-decoration: none; }
.book img {
  width: 100%; height: 100%; object-fit: cover;
  background: none;       /* ← 투명 여백을 흰색으로 메움 */
  border-radius: .28rem;        /* 둥근 모서리 유지 (표지형 감각) */
  box-shadow: 0 .35rem .8rem rgba(0,0,0,.18); /* 은은한 그림자 */
  display: block;
}
.book img:hover, .book a:focus img {
  transform: translateY(-2%);
  box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.22);
  filter: saturate(1.05);
}

/* 반응형 */
@media (max-width: 560px) {
  .shelf { --padX: 9.5%; --rowH: 15.5%; }
}