/* ghosts.css — 모듈 F: 인-씬 고스트 스타일.
 * 고스트 레이어는 서가 위·오버레이(--z-overlay:100) 아래의 유리판 —
 * 포인터는 전부 통과시킨다(내 조작 방해 금지). 3D 포즈/미니 spread의
 * 위치·크기는 ghosts.js가 매 프레임 인라인 transform으로 넣는다.
 * 주의: .fb-b3d의 preserve-3d를 깨지 않게 고스트 조상에는 filter를 두지 않는다
 * (탈색은 leaf 노드인 .fb-b3d-img에만). 색/이징은 tokens.css 변수 사용. */

.v4-ghosts {
  position: fixed;
  inset: 0;
  z-index: 90; /* 서가 위, .fb-overlay(100) 아래 */
  pointer-events: none;
}

.v4-ghost {
  position: absolute;
  inset: 0;
  opacity: 0.92;
  pointer-events: none;
}

/* 고스트의 3D 책은 절대 입력을 받지 않는다 (book3d 기본 pointer-events:auto 무력화) */
.v4-ghost .fb-b3d {
  pointer-events: none !important;
  cursor: default;
}

/* "남의 손" 티 — 살짝 바랜 표지 (leaf 노드라 preserve-3d 안전) */
.v4-ghost .fb-b3d-img {
  filter: saturate(0.82);
}

/* ---------- 미니 spread (원격 reading 재생) ---------- */

.v4-ghost-spread {
  position: absolute;
  left: 0;
  top: 0;
  perspective: 1200px;
  background: var(--page-cream);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(40, 30, 18, 0.22), 0 3px 9px rgba(40, 30, 18, 0.14);
  opacity: 0;
  transition: opacity 200ms ease;
  will-change: transform;
}

.v4-ghost-spread.is-open {
  opacity: 1;
}

.v4-ghost-page {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  /* 글줄 결 종이 — 콘텐츠는 로드하지 않는다, 움직임이 콘텐츠다 */
  padding: 11% 9%;
  background:
    repeating-linear-gradient(
        180deg,
        rgba(40, 30, 18, 0.07) 0 1px,
        transparent 1px 9px
      )
      content-box,
    var(--page-cream);
}

.v4-ghost-page.is-left {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.v4-ghost-page.is-right {
  right: 0;
  border-radius: 0 3px 3px 0;
}

/* 중앙 gutter 그늘 */
.v4-ghost-spread::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 5px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    rgba(40, 30, 18, 0) 0%,
    rgba(40, 30, 18, 0.16) 50%,
    rgba(40, 30, 18, 0) 100%
  );
  pointer-events: none;
}

/* ---------- 고스트 낱장 (넘김/스크럽/휘리릭) ---------- */

.v4-ghost-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 2;
  transform-style: preserve-3d;
  will-change: transform;
}

.v4-ghost-leaf.is-right {
  left: 50%;
  transform-origin: left center;
}

.v4-ghost-leaf.is-left {
  left: 0;
  transform-origin: right center;
}

.v4-ghost-leaf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 11% 9%;
  background:
    repeating-linear-gradient(
        180deg,
        rgba(40, 30, 18, 0.07) 0 1px,
        transparent 1px 9px
      )
      content-box,
    var(--page-cream);
  box-shadow: 0 3px 10px rgba(40, 30, 18, 0.12);
}

.v4-ghost-leaf-face.is-back {
  transform: rotateY(180deg);
}

.v4-ghost-leaf.is-turn-next {
  animation: v4GhostLeafNext 420ms var(--ease-flip-out, ease-out) forwards;
}

.v4-ghost-leaf.is-turn-prev {
  animation: v4GhostLeafPrev 420ms var(--ease-flip-out, ease-out) forwards;
}

.v4-ghost-leaf.is-riffle {
  animation-duration: 260ms;
}

.v4-ghost-leaf.is-easing {
  transition: transform 320ms var(--ease-flip-out, ease-out);
}

@keyframes v4GhostLeafNext {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-180deg); }
}

@keyframes v4GhostLeafPrev {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(180deg); }
}

/* ---------- identity 모드 (기본 off — 익명, 움직임만) ---------- */

.v4-ghost-tag {
  display: none;
}

.v4-ghosts.show-identity .v4-ghost .fb-b3d-face--front,
.v4-ghosts.show-identity .v4-ghost-spread {
  box-shadow: 0 0 22px 5px color-mix(in srgb, var(--ghost-color, #8c6a4a) 55%, transparent);
}

/* 위치(left/top)는 ghosts.js가 매 프레임 책 앵커를 따라 넣는다 */
.v4-ghosts.show-identity .v4-ghost-tag:not(:empty) {
  display: block;
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ghost-color, #8c6a4a) 82%, black);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .v4-ghost-leaf,
  .v4-ghost-spread {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}