/* Cask flipbook — 절제된 단색 무대 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #14120F;          /* 생 블랙 대신 아주 어두운 웜 그레이 */
  overflow: hidden;
  /* 트랙패드 가로 스와이프가 브라우저 '뒤로/앞으로'로 새지 않게 */
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  font-family: "Space Mono", ui-monospace, Menlo, monospace;
}

/* ---------- 무대 ---------- */

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --spread-ar 은 app.js 가 pages.json 을 읽고 넣는다 (펼침 폭/높이 비율).
 * StPageFlip 이 마운트 요소(#book)에 인라인 width:100% 를 강제하므로
 * 크기 제약은 래퍼(#book-box)가 담당한다. */
#book-box {
  position: relative;
  z-index: 2;
  width: min(88vw, calc(80vh * var(--spread-ar, 3.14)));
  aspect-ratio: var(--spread-ar, 3.14);
}
#book { width: 100%; height: 100%; }

/* 모바일(한 장 모드): 화면을 더 넉넉히 쓴다 — --spread-ar 은 JS 가
 * 한 장 비율로 바꿔 넣으므로 같은 수식이 그대로 작동한다 */
@media (max-width: 940px), (max-height: 500px) {
  #book-box { width: min(94vw, calc(78vh * var(--spread-ar, 1.57))); }
}

/* 폰 가로: 한 장이 화면을 거의 가득 채우게 */
@media (max-height: 500px) {
  #book-box { width: min(97vw, calc(92vh * var(--spread-ar, 1.57))); }
}

/* 모바일 핀치 줌: 브라우저 기본 제스처 대신 우리가 다룬다 */
#stage { touch-action: none; }
#book-box { transform-origin: center center; }

/* 모바일 첫 진입 안내 — 잠깐 떴다가 사라진다 */
#device-note {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: rgba(238, 231, 218, 0.55);
  z-index: 30;
  transition: opacity 0.9s ease;
}
#device-note.gone { opacity: 0; }

/* 가로 폰 몰입모드 힌트 — 상단 중앙, 잠깐 떴다가 사라짐 */
#fs-hint {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: rgba(238, 231, 218, 0.55);
  z-index: 30;
  transition: opacity 0.7s ease;
  opacity: 1;
}
#fs-hint.gone { opacity: 0; }

/* 접지 입체감 — 무대에 얹지 않고 각 낱장의 '안쪽 모서리'에 붙인다.
 * 그래야 페이지가 넘어갈 때 음영도 종이와 함께 접히고 가려진다. */
.page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11%;
  pointer-events: none;
}
.page.--left::after {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.16));
}
.page.--right::after {
  left: 0;
  background: linear-gradient(270deg, transparent, rgba(0, 0, 0, 0.16));
}
/* 한 장씩 보는 모드(좁은 화면)에서는 접지가 없으므로 숨김 */
body.portrait .page::after { display: none; }

/* 책 아래 아주 옅고 넓은 그림자 하나 — 책 크기를 따라간다 */
#book-shadow { display: none; }
#book-box::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -5.5%;
  height: 9%;
  background: radial-gradient(ellipse closest-side, rgba(0,0,0,0.30), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* 페이지 이미지 */
.page {
  background: #14120F;
}
.page img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- UI (자동 숨김) ---------- */

.ui {
  transition: opacity 0.6s ease;
  opacity: 1;
}
body.idle .ui {
  opacity: 0;
  pointer-events: none;
}

.nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(238, 231, 218, 0.45);   /* 크림 톤, 옅게 */
  cursor: pointer;
  padding: 18px 14px;
  z-index: 10;
}
.nav:hover { color: rgba(238, 231, 218, 0.85); }
#nav-prev { left: 18px; }
#nav-next { right: 18px; }

#counter {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(238, 231, 218, 0.35);
  z-index: 10;
}

/* ---------- 하단 진행바 (드래그로 빠른 이동) ---------- */

#progress {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 46vw);
  height: 20px;                 /* 얇은 선 + 넉넉한 클릭 영역 */
  cursor: pointer;
  z-index: 10;
  touch-action: none;
}
#progress::before {             /* 트랙 */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(238, 231, 218, 0.16);
}
#progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  width: 0;
  background: rgba(238, 231, 218, 0.5);
  transition: width 0.3s ease;
}
#progress-knob {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 9px;
  margin-top: -4.5px;
  background: rgba(238, 231, 218, 0.75);
  transform: translateX(-1px);
  transition: left 0.3s ease;
}
#progress:hover #progress-fill,
#progress:hover #progress-knob { background: rgba(238, 231, 218, 0.9); }

/* 드래그 중에는 손끝을 즉시 따라오도록 트랜지션 해제 */
#progress.dragging #progress-fill,
#progress.dragging #progress-knob { transition: none; }

/* ---------- 자매 북 바로가기 (우상단, UI 자동 숨김에 함께 반응) ---------- */

#cross-link {
  position: fixed;
  top: 24px;
  right: 28px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: rgba(238, 231, 218, 0.35);
  z-index: 10;
}
#cross-link:hover { color: rgba(238, 231, 218, 0.9); }

/* ---------- 로딩 인디케이터 ---------- */

#loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  background: #14120F;
  transition: opacity 0.7s ease;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(238, 231, 218, 0.5);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.5); }
}