/* 3D 책 미리보기 — js/book-preview.js 와 함께 사용 */

html.bp-lock { overflow: hidden; }

.bp {
  --bp-ease: cubic-bezier(.645, .045, .355, 1);
  --bp-paper: #fbfaf6;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity .25s ease;
}
.bp[hidden] { display: none; }
.bp.is-open { opacity: 1; }

.bp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, .88);
  backdrop-filter: blur(6px);
}

.bp button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.bp-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: transparent;
}
.bp-close:hover { border-color: #fff; }

.bp-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-bottom: 64px;
}

.bp-hint {
  margin: 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}

.bp-bar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.bp-nav,
.bp-mode {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: transparent;
}
.bp-nav { width: 40px; font-size: 1rem; }
.bp-mode { padding: 0 18px; font-size: .85rem; }
.bp-nav:hover:not(:disabled),
.bp-mode:hover { border-color: #fff; }
.bp-nav:disabled { opacity: .3; cursor: default; }
.bp-nav[hidden] { display: none; }
.bp-status {
  min-width: 84px;
  text-align: center;
  font-size: .8rem;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}
.bp-status:empty { display: none; }
.bp :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.bp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- 표지 보기: 3D 책 ---------- */
.bp-scene {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  perspective: 1800px;
  transform: scale(.86); /* 기울였을 때 가까운 모서리가 화면 밖으로 나가지 않게 */
}
.bp-scene::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -34px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  filter: blur(14px);
  z-index: -1;
}
.bp-object {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: none;
  outline: none;
}
.bp-object.is-dragging { cursor: grabbing; }
.bp-side {
  position: absolute;
  backface-visibility: hidden;
  overflow: hidden;
}
.bp-side--front,
.bp-side--back { inset: 0; }
.bp-side--front { transform: translateZ(calc(var(--pd) / 2)); }
.bp-side--back { transform: rotateY(180deg) translateZ(calc(var(--pd) / 2)); }
.bp-side--spine,
.bp-side--edge {
  top: 0;
  left: calc(50% - var(--pd) / 2);
  width: var(--pd);
  height: 100%;
}
.bp-side--spine { transform: rotateY(-90deg) translateZ(calc(var(--pw) / 2)); }
.bp-side--edge {
  transform: rotateY(90deg) translateZ(calc(var(--pw) / 2));
  background: repeating-linear-gradient(90deg, #f4f1e8 0 1px, #dcd7c9 1px 2px);
}
.bp-side--top,
.bp-side--bottom {
  left: 0;
  top: calc(50% - var(--pd) / 2);
  width: 100%;
  height: var(--pd);
  background: repeating-linear-gradient(0deg, #f4f1e8 0 1px, #dcd7c9 1px 2px);
}
.bp-side--top { transform: rotateX(90deg) translateZ(calc(var(--ph) / 2)); }
.bp-side--bottom { transform: rotateX(-90deg) translateZ(calc(var(--ph) / 2)); }

/* ---------- 펼쳐 보기: 넘기는 책 ---------- */
.bp-reader {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  perspective: 2600px;
  touch-action: pan-y;
  user-select: none;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45));
}
.bp-reader.is-spread { width: calc(var(--pw) * 2); }
.bp-shelf {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateX(calc(var(--shift, 0) * var(--pw)));
}
.bp-leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pw);
  height: var(--ph);
  transform-origin: left center;
  transform-style: preserve-3d;
}
.is-spread .bp-leaf { left: var(--pw); }
.bp-leaf.is-flipped { transform: rotateY(-180deg); }
.bp-shelf.is-animating,
.bp-shelf.is-animating .bp-leaf { transition: transform .7s var(--bp-ease); }

.bp-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bp-paper);
  backface-visibility: hidden;
}
.bp-page--back { transform: rotateY(180deg); }
/* 제본 쪽 그림자 */
.is-spread .bp-page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  pointer-events: none;
}
.is-spread .bp-page--front::after { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .16), transparent); }
.is-spread .bp-page--back::after { right: 0; background: linear-gradient(-90deg, rgba(0, 0, 0, .16), transparent); }
.is-spread .bp-page.is-cover::after { display: none; }
.bp-face-inner { width: 100%; height: 100%; }

.bp-paper { background: var(--bp-paper); }
.bp-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9em;
  padding: 12%;
  text-align: center;
  color: #1a1a1a;
  word-break: keep-all;
}
.bp-note p { margin: 0; }
.bp-note-title { font-size: clamp(.9rem, calc(var(--pw) / 22), 1.15rem); font-weight: 600; }
.bp-note-body { font-size: clamp(.72rem, calc(var(--pw) / 32), .85rem); color: #6b6b6b; line-height: 1.7; }
.bp-cta { background: #cfe0a4; }
.bp-cta-title { font-size: clamp(1rem, calc(var(--pw) / 17), 1.45rem); font-weight: 700; line-height: 1.45; }
.bp-cta-book { margin-top: 1.4em !important; font-size: clamp(.75rem, calc(var(--pw) / 30), .9rem); line-height: 1.6; }
.bp-cta-author { font-size: clamp(.72rem, calc(var(--pw) / 32), .85rem); color: #3c4a2a; }
.bp-cta-publisher { margin-top: 2em !important; font-size: .7rem; letter-spacing: .12em; color: #3c4a2a; }

/* ---------- 라이브러리 카드의 미리보기 트리거 ---------- */
.book-card .book-cover--preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.book-preview-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, .82);
  color: #fff;
  font-size: .75rem;
  letter-spacing: .02em;
  transition: background .2s ease;
}
.book-cover--preview:hover .book-preview-badge,
.book-cover--preview:focus-visible .book-preview-badge { background: var(--accent-color); }
.book-card button.book-link { border: 0; font: inherit; font-size: .8rem; cursor: pointer; }
.book-card button.book-link.outline { border: 1px solid var(--accent-color); }

@media (prefers-reduced-motion: reduce) {
  .bp { transition: none; }
}