/* flipbook.css — 모듈 B: 알라딘식 책 오브젝트 스타일.
 * 밝은 스크림 + blur 오버레이, 중앙 스테이지의 spread(section) 하나,
 * 반쪽 leaf 2장의 rotateY 넘김(90°에서 opacity 교차, 구간별 easing),
 * FLIP 진입/퇴장용 표지 카드. 색/시간/이징은 tokens.css 변수만 사용.
 * 애니메이션은 transform/opacity만 건드린다 (두께 스트라이프의 width 전환은
 * 절대배치된 수 px 장식 요소라 레이아웃 영향이 없다). */

/* ---------- 오버레이 · 스테이지 ---------- */

.fb-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  font-family: var(--font-ui);
  touch-action: none; /* 회전/스크럽 제스처를 브라우저 스크롤에 뺏기지 않는다 */
  overscroll-behavior: contain;
}

.fb-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 340ms ease;
}

.fb-overlay.is-open .fb-scrim {
  opacity: 1;
}

.fb-overlay.is-closing .fb-scrim {
  opacity: 0;
  transition: opacity var(--dur-open) ease;
}

.fb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 책 (spread 컨테이너) ---------- */

.fb-book {
  position: relative;
  perspective: var(--flip-perspective);
  background: var(--page-cream);
  border-radius: 3px;
  box-shadow: var(--shadow-book);
  cursor: pointer;
  transition: opacity 160ms ease;
}

.fb-book.is-vanishing {
  opacity: 0;
}

/* 표지 상태(section 0): 책은 아직 닫혀 있다 — 표지 왼쪽에 종이는 존재하지 않는다.
 * 컨테이너의 배경·그림자를 걷어내고 오른쪽 반쪽(표지)만 홀로 세운다.
 * 표지가 넘어가는 동안(leaf 회전 중)에도 is-cover가 유지되므로,
 * 낱장이 왼쪽에 착지해 section이 커밋되기 전까지 왼쪽은 빈 공간이다. */
.fb-book.is-cover {
  background: transparent;
  box-shadow: none;
}

.fb-book.is-cover .fb-page.is-left {
  visibility: hidden;
}

.fb-book.is-cover .fb-page.is-right {
  box-shadow: var(--shadow-book);
}

/* ---------- section = 양면 spread, 한 번에 하나만 ---------- */

.fb-section {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 1;
  pointer-events: none; /* 클릭/iframe 이벤트는 오버레이가 좌표로 판정 */
}

.fb-section.is-shown {
  display: block;
}

.fb-page {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  background: var(--page-cream);
  container-type: size; /* EPUB 조판이 cqh로 페이지 크기를 따라온다 */
}

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

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

.fb-page > * {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* gutter 쪽 은은한 페이지 그늘 */
.fb-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fb-page.is-left::after {
  background: linear-gradient(to left, rgba(40, 30, 18, 0.09), rgba(40, 30, 18, 0) 11%);
}

.fb-page.is-right::after {
  background: linear-gradient(to right, rgba(40, 30, 18, 0.09), rgba(40, 30, 18, 0) 11%);
}

/* ---------- 중앙 gutter / 표지 상태의 스파인 밴드 ---------- */

.fb-gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(40, 30, 18, 0) 0%,
    rgba(40, 30, 18, 0.14) 50%,
    rgba(40, 30, 18, 0) 100%
  );
  transition: opacity 280ms ease;
}

/* section0(표지 spread): 3D 앞면과의 픽셀 일치가 목표 — 책등 밴드·gutter 그늘
 * 같은 spread 디테일은 넣지 않는다. 크로스페이드 순간 표지 왼편에 음영이
 * 튀면 심리스가 깨진다. 표지가 넘어가 내지가 되면(is-cover 해제) gutter가
 * 제 transition으로 은은하게 돌아온다. */
.fb-book.is-cover .fb-gutter {
  opacity: 0;
  transition: none;
}

.fb-book.is-cover .fb-page.is-right::after {
  background: none;
}

/* ---------- 페이지 단면 두께 스트라이프 (좌우 바깥, 절제된 표현) ---------- */

.fb-edge {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 5px;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.32) 0 1px,
      rgba(255, 255, 255, 0) 1px 2px
    ),
    linear-gradient(90deg, #e9ddc9, #d9c9b1);
  transition: width 320ms ease;
}

.fb-edge.is-left {
  right: 100%;
  margin-right: -1px;
  border-radius: 2px 0 0 2px;
  box-shadow: -1px 2px 6px rgba(40, 30, 18, 0.1);
}

.fb-edge.is-right {
  left: 100%;
  margin-left: -1px;
  border-radius: 0 2px 2px 0;
  box-shadow: 1px 2px 6px rgba(40, 30, 18, 0.1);
}

/* ---------- 낱장 leaf (양면 3D — 진짜 종이처럼 앞뒤가 있다) ---------- */

.fb-leaf3 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 4;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform;
}

.fb-leaf3.is-right {
  left: 50%;
  transform-origin: left center;
}

.fb-leaf3.is-left {
  left: 0;
  transform-origin: right center;
}

.fb-leaf3-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--page-cream);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 18px rgba(40, 30, 18, 0.14);
  container-type: size;
}

.fb-leaf3-face.is-back {
  transform: rotateY(180deg);
}

.fb-leaf3-face > * {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

/* 접히는 동안 gutter 쪽이 깊어지는 주름 그늘 (면마다 gutter 방향이 다르다) */
.fb-leaf3-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fb-leaf3.is-right .fb-leaf3-face.is-front::after {
  background: linear-gradient(90deg, rgba(40, 30, 18, 0.15), rgba(40, 30, 18, 0) 45%);
}

.fb-leaf3.is-right .fb-leaf3-face.is-back::after {
  background: linear-gradient(-90deg, rgba(40, 30, 18, 0.15), rgba(40, 30, 18, 0) 45%);
}

.fb-leaf3.is-left .fb-leaf3-face.is-front::after {
  background: linear-gradient(-90deg, rgba(40, 30, 18, 0.15), rgba(40, 30, 18, 0) 45%);
}

.fb-leaf3.is-left .fb-leaf3-face.is-back::after {
  background: linear-gradient(90deg, rgba(40, 30, 18, 0.15), rgba(40, 30, 18, 0) 45%);
}

/* 0→50% 종이 저항(--ease-flip-in), 50→100% 사뿐한 착지(--ease-flip-out) —
 * 낱장 하나가 0→±180°를 끝까지 돌며 양면을 다 보여준다. */
.fb-leaf3.is-turn-next {
  animation: fbLeafNext var(--dur-flip) forwards;
}

.fb-leaf3.is-turn-prev {
  animation: fbLeafPrev var(--dur-flip) forwards;
}

@keyframes fbLeafNext {
  0% {
    transform: rotateY(0deg);
    animation-timing-function: var(--ease-flip-in);
  }
  50% {
    transform: rotateY(-90deg);
    animation-timing-function: var(--ease-flip-out);
  }
  100% {
    transform: rotateY(-180deg);
  }
}

@keyframes fbLeafPrev {
  0% {
    transform: rotateY(0deg);
    animation-timing-function: var(--ease-flip-in);
  }
  50% {
    transform: rotateY(90deg);
    animation-timing-function: var(--ease-flip-out);
  }
  100% {
    transform: rotateY(180deg);
  }
}

/* 스크럽(손끝 넘김) 완료/취소 전환 — duration은 JS가 남은 각도에 맞춰 넣는다 */
.fb-leaf3.is-easing {
  transition: transform var(--dur-flip) var(--ease-flip-out);
}

/* 휘리릭(riffle): 얇은 낱장 무리가 짧은 주기·스태거로 쏟아지며 왼쪽에 착지한다.
 * animation-delay는 JS가 낱장마다 인라인으로 넣는다. */
.fb-leaf3.is-riffle {
  animation-duration: var(--dur-riffle);
}

.fb-leaf3.is-riffle .fb-leaf3-face {
  box-shadow: 0 3px 12px rgba(40, 30, 18, 0.12);
}

/* ---------- 페이지 콘텐츠 공통 ---------- */

.fb-blank {
  width: 100%;
  height: 100%;
  background: var(--page-cream);
}

/* 글줄 결이 흐르는 종이 — 콘텐츠가 준비되기 전의 낱장/자리채움.
 * content-box 반복 그라디언트가 여백 안쪽에만 흐릿한 글줄을 그린다. */
.fb-paper {
  width: 100%;
  height: 100%;
  padding: 13% 11%;
  background:
    repeating-linear-gradient(
        180deg,
        rgba(40, 30, 18, 0.06) 0 1px,
        transparent 1px 13px
      )
      content-box,
    var(--page-cream);
}

.fb-cover-img {
  background: var(--page-cream);
  user-select: none;
  -webkit-user-select: none;
}

.fb-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10%;
  text-align: center;
}

.fb-cover-fallback-title {
  font-family: var(--font-title);
  font-size: clamp(16px, 2.4vh, 26px);
  line-height: 1.5;
  word-break: keep-all;
}

/* ---------- 페이지 배지 ---------- */

.fb-badge {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 6;
  padding: 4px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  box-shadow: var(--shadow-spine);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 300ms ease;
}

/* 배지는 reading 단계에서만 (inspect에서는 3D 책 캡션이 대신한다) */
.fb-overlay.is-reading .fb-badge {
  opacity: 1;
}

.fb-overlay.is-closing .fb-badge {
  opacity: 0;
}

/* ---------- 모션 최소화 환경 ---------- */

@media (prefers-reduced-motion: reduce) {
  .fb-scrim,
  .fb-badge,
  .fb-book,
  .fb-leaf3,
  .fb-edge,
  .fb-gutter {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}