/* flipbook.css — visual chrome shared by the creator preview + standalone viewer */

.flip-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  overflow: visible; /* 3D 페이지 넘김 애니메이션이 경계 밖으로 나올 수 있어야 함 */
  padding: var(--space-8);
  transition: background var(--transition-interactive);
}

/* Persistent wrapper the engine renders into — keeps nav buttons/overlays,
   which live as siblings in .flip-stage, from being wiped by innerHTML resets. */
.flip-content {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* 책 컨테이너는 클리핑 금지 */
}

.flip-stage.backdrop-ivory {
  background: radial-gradient(ellipse at 50% 30%, var(--color-surface-2), var(--color-surface-offset-2) 78%);
}
.flip-stage.backdrop-wood {
  background: radial-gradient(ellipse at 50% 30%, #6b4a2d, #3a2716 78%);
}
.flip-stage.backdrop-dark {
  background: radial-gradient(ellipse at 50% 30%, #24211d, #0f0d0b 78%);
}

.flip-stage.empty-stage {
  align-items: center;
  justify-content: center;
}

/* Book frame drop shadow - use box-shadow to prevent 3D render context breakage */
#heyzine-flipbook,
#fliplink-flipbook {
  box-shadow: var(--shadow-lg);
}

/* Page surfaces */
.page,
.my-page {
  background: #fff;
  transform-style: preserve-3d;
  overflow: hidden;
}

/* turn.js (Heyzine) needs backface-visibility: visible for its specific peel effect */
.page {
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

.page-shell {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.page-shell img,
.my-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* Cover pages (hard) get a themed panel instead of plain white,
   so an uploaded page's white margins don't look like an empty cover. */
.page.hard .page-shell,
.my-page[data-density='hard'] .page-shell {
  background: linear-gradient(155deg, var(--flip-cover-a, #7a2331), var(--flip-cover-b, #43131b));
}
.page.hard .page-shell img,
.my-page[data-density='hard'] .page-shell img {
  object-fit: contain;
  background: var(--flip-cover-a, #7a2331);
}

.theme-cover-burgundy { --flip-cover-a: #7a2331; --flip-cover-b: #3f1017; }
.theme-cover-navy { --flip-cover-a: #1c3350; --flip-cover-b: #0d1b2c; }
.theme-cover-forest { --flip-cover-a: #2b4a34; --flip-cover-b: #142a1c; }
.theme-cover-charcoal { --flip-cover-a: #3a3532; --flip-cover-b: #1c1917; }

/* FlipLink (StPageFlip) — center-spine curvature shading */
.my-page {
  position: relative;
}
.my-page::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  z-index: 5;
  pointer-events: none;
}
.my-page:nth-child(even)::before {
  right: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16));
}
.my-page:nth-child(odd)::before {
  left: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16));
}

/* Heyzine (turn.js) — soft ambient corner hint so users know it's draggable 
   (REMOVED: User requested no motion/effects for classic viewer) */
/* .flip-heyzine .page:not(.hard)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.1) 51%, transparent 62%);
  pointer-events: none;
} */

/* Nav arrows shared by preview + viewer */
.flip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-surface-2) 90%, transparent);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 20;
  opacity: 0.15;
  transition: opacity 0.25s ease, background-color 0.2s ease, transform 0.2s ease;
}
/* Show nav buttons clearly when user hovers over the book container */
.flip-stage:hover .flip-nav {
  opacity: 0.85;
}
.flip-nav:hover {
  opacity: 1.0 !important;
  background: var(--color-surface-2);
  transform: translateY(-50%) scale(1.05);
}
.flip-nav.prev { left: var(--space-4); }
.flip-nav.next { right: var(--space-4); }
.flip-nav svg { width: 20px; height: 20px; }
.flip-nav[hidden] { display: none; }

.flip-page-indicator {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--color-surface-2) 85%, transparent);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  z-index: 20;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .flip-stage { padding: var(--space-2); }
  .flip-nav { 
    width: 36px; 
    height: 36px; 
    opacity: 0.35; 
    background: color-mix(in oklab, var(--color-surface-1) 75%, transparent);
  }
  .flip-nav svg { width: 16px; height: 16px; }
  .flip-nav.prev { left: var(--space-2); }
  .flip-nav.next { right: var(--space-2); }
}