/* =============================================================
   NU-VEDA — 3D 책 (공용 모듈)
   index.html / shop/ebook.html / shop/paperbook.html 에서 공용 사용
   컨테이너에 .book3d-stage 클래스를 주면 무대가 됩니다.
   ============================================================= */

@property --p {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

/* 무대 — 원근 컨테이너. 책은 바닥 선에 발을 딛고 회전 */
.book3d-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
  perspective: 1500px;
  perspective-origin: 50% 38%;
  --p: 0;                     /* JS가 갱신하는 일어서기 진행도 0~1 */
  --bw: 236px;
  --bh: 338px;                /* 표지 비율 856:1224 ≈ 1:1.43 */
  --bd: 34px;                 /* 옆면 두께 126/856 ≈ 0.147 */
}

.book3d-floor {
  position: relative;
  width: var(--bw);
  height: var(--bh);
}

/* 바닥 그림자 — 누웠을 땐 길고 옅게, 섰을 땐 짧고 단단하게 */
.book3d-shadow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: calc(var(--bw) * (1.05 + (1 - var(--p)) * 0.85));
  height: calc(18px + (1 - var(--p)) * 78px);
  transform: translate(-50%, 36%);
  background: radial-gradient(
    ellipse at center,
    rgba(20, 28, 23, calc(0.30 + (1 - var(--p)) * 0.05)) 0%,
    rgba(20, 28, 23, 0.12) 45%,
    transparent 72%
  );
  filter: blur(calc(7px + (1 - var(--p)) * 12px));
  z-index: 0;
  pointer-events: none;
}

.book3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  z-index: 1;
}

/* 회전하는 본체 — 바닥(하단 모서리)을 축으로 일어선다. 회전값은 JS가 매 프레임 설정 */
.book3d__box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: translateY(10px) rotateX(82deg) rotateY(-22deg) rotateZ(-4deg);
  cursor: pointer;
  touch-action: pan-y;
  /* 모바일 렌더 안정화 — 회전 중 텍스처가 깨지지/흐려지지 않도록 레이어 고정 */
  will-change: transform;
  -webkit-transform-style: preserve-3d;
}

.book3d__face {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0;
  /* 면을 단단한 레이어로 고정해 회전 중 텍스처 깨짐 방지 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* 앞·뒤 (표지 면) — 원래 크기 (튀어나옴 없음) */
.book3d__front,
.book3d__back { width: var(--bw); height: var(--bh); }
/* 책등 */
.book3d__spine { width: var(--bd); height: var(--bh); }
/* 책배 (우측 페이지 단면) */
.book3d__fore { width: var(--bd); height: var(--bh); }
/* 위·아래 페이지 면 */
.book3d__top,
.book3d__bottom { width: var(--bw); height: var(--bd); }

.book3d__front  { transform: translateZ(calc(var(--bd) / 2)); }
.book3d__back   { transform: rotateY(180deg) translateZ(calc(var(--bd) / 2)); }
.book3d__spine  { transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.book3d__fore   { transform: rotateY(90deg) translateZ(calc(var(--bw) / 2)); }
.book3d__top    { transform: rotateX(90deg) translateZ(calc(var(--bh) / 2)); }
.book3d__bottom { transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2)); }

/* 표지 면 공통 — 실제 이미지 */
.book3d__front,
.book3d__back {
  background: #10223a;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(16, 26, 22, 0.30);
}
.book3d__front img,
.book3d__back img,
.book3d__spine img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.book3d__front,
.book3d__back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* 표지 광택 — 부드러운 사선 빛 */
.book3d__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 22%,
    transparent 44%,
    transparent 72%,
    rgba(7, 14, 24, 0.18) 100%
  );
}

/* 뒷면 — 음영만 */
.book3d__back {
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.22),
    0 24px 50px rgba(16, 26, 22, 0.30);
}

/* 책등 — 제본부. 실제 옆면 이미지 + 양끝 입체 음영 */
.book3d__spine {
  background: #0c1d39;
  overflow: hidden;
  /* 좌·우(앞/뒤 표지와 맞닿는 면)만 navy로 메움 — 위·아래로는 삐져나오지 않음 */
  box-shadow:
    1.4px 0 0 #10223a,
    -1.4px 0 0 #10223a,
    inset 7px 0 14px rgba(0, 0, 0, 0.40),
    inset -7px 0 14px rgba(0, 0, 0, 0.40);
}
/* 책배 — 페이지 단면 (앞으로 보이는 종이 더미) */
.book3d__fore {
  background:
    repeating-linear-gradient(
      to right,
      #efe9d9 0px,
      #efe9d9 1px,
      #ddd5c0 1px,
      #ddd5c0 2.4px
    );
  box-shadow:
    inset 2px 0 4px rgba(0, 0, 0, 0.10),
    inset -2px 0 4px rgba(0, 0, 0, 0.10);
}
/* 위·아래 페이지 면 */
.book3d__top,
.book3d__bottom {
  background:
    repeating-linear-gradient(
      to right,
      #f2ecdd 0px,
      #f2ecdd 1px,
      #e2dac5 1px,
      #e2dac5 2.4px
    );
}
.book3d__top { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12); }
.book3d__bottom { box-shadow: inset 0 -2px 6px rgba(0, 0, 0, 0.16); }

/* E-book 배지 — 전자책 페이지에서 무대 좌상단에 고정 (책은 돌아도 제자리) */
.book3d__ebook-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(247, 244, 236, 0.92);
  border: 1px solid rgba(45, 74, 58, 0.22);
  border-radius: 5px;
  color: #2d4a3a;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(16, 26, 22, 0.10);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}
.book3d__ebook-badge svg { display: block; width: 11px; height: 11px; }

/* 모바일 — 책 크기 약 +15% */
@media (max-width: 640px) {
  .book3d-stage {
    --bw: 225px;
    --bh: 322px;
    --bd: 33px;
  }
}