/* ============================================================
   Cover Reveal Reader — sv-rp-* (reader page)
   커버를 벗기면서 읽는 아날로그 감성 페이지 시스템
   ============================================================ */

/* 페이지 래퍼 — 뷰포트 실측 분할 */
.sv-reader-paginate-root {
  position: relative;
}

.sv-rp-wrap {
  position: relative;
  box-sizing: border-box;
}

/* 페이지 사이 — 뷰포트 min-height 없이 콘텐츠 높이만 사용 */
.sv-reader-paginate-root .sv-rp-wrap + .sv-rp-wrap {
  margin-top: 20px;
}

.sv-reader-paginate-root .sv-rp-wrap:first-child {
  margin-top: 0;
}

section.sv-rp-page {
  position: relative;
  min-height: 60px;
}

/* 페이지 텍스트 영역 */
.sv-rp-text {
  padding: 0;
}

.sv-rp-text p:last-child {
  margin-bottom: 0;
}

.sv-reader-paginate-root .sv-reader-node__label {
  margin-top: 12px !important;
  margin-bottom: 6px !important;
}

/* ── 커버 패널 (해당 페이지 본문 영역만 덮음) ── */
.sv-rp-cover {
  position: absolute;
  top: 0;
  left: -20px;
  right: -20px;
  bottom: 0;
  min-height: 72px;
  z-index: 10;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;

  /* 양피지/크래프트지 그라디언트 */
  background: linear-gradient(145deg, #faf4e8 0%, #f0e6cc 40%, #ede4c8 100%);
  /* 수평 규칙선 패턴 */
  background-image:
    linear-gradient(145deg, #faf4e8 0%, #f0e6cc 40%, #ede4c8 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 27px,
      rgba(139, 105, 20, 0.07) 27px,
      rgba(139, 105, 20, 0.07) 28px
    );
  background-blend-mode: multiply;

  border-top: 1px solid rgba(139, 105, 20, 0.18);
  border-bottom: 1px solid rgba(139, 105, 20, 0.18);
  box-shadow:
    0 -2px 12px rgba(0, 0, 0, 0.06),
    0 4px 24px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(139, 105, 20, 0.08);

  transform-origin: top center;
  transition: box-shadow 0.2s ease, filter 0.2s ease;

  /* lift 애니메이션용 */
  will-change: transform, opacity;
}

.sv-rp-cover:hover {
  filter: brightness(1.04);
  box-shadow:
    0 -2px 16px rgba(0, 0, 0, 0.09),
    0 6px 32px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sv-rp-cover:focus-visible {
  outline: 2px solid rgba(139, 105, 20, 0.5);
  outline-offset: -2px;
}

/* 장식선 */
.sv-rp-cover__line {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 105, 20, 0.45), transparent);
}

/* 넘기기 텍스트 */
.sv-rp-cover__label {
  color: #8b6914;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-style: italic;
  white-space: nowrap;
}

/* ── 커버 들어올리기 애니메이션 ── */
@keyframes sv-rp-lift {
  0%   { transform: perspective(900px) rotateX(0deg);   opacity: 1; }
  55%  { transform: perspective(900px) rotateX(-55deg); opacity: 0.55; }
  100% { transform: perspective(900px) rotateX(-90deg); opacity: 0; }
}

.sv-rp-cover--lifting {
  animation: sv-rp-lift 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}

/* 완전히 열린 커버 (애니메이션 끝 / 복원 시) */
.sv-rp-cover--open,
.sv-rp-cover--silent-open {
  display: none !important;
}

/* ── 다크 모드 ── */
@media (prefers-color-scheme: dark) {
  .sv-rp-cover {
    background: linear-gradient(145deg, #2a2318 0%, #221c12 40%, #1e190f 100%);
    background-image:
      linear-gradient(145deg, #2a2318 0%, #221c12 40%, #1e190f 100%),
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 27px,
        rgba(200, 165, 80, 0.06) 27px,
        rgba(200, 165, 80, 0.06) 28px
      );
    border-top-color: rgba(200, 165, 80, 0.14);
    border-bottom-color: rgba(200, 165, 80, 0.14);
    box-shadow:
      0 -2px 12px rgba(0, 0, 0, 0.3),
      0 4px 24px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .sv-rp-cover__line {
    background: linear-gradient(90deg, transparent, rgba(200, 165, 80, 0.35), transparent);
  }

  .sv-rp-cover__label {
    color: #c4a455;
  }
}

/* 앱 테마 CSS 변수 기반 다크모드 지원 (prefers-color-scheme 미지원 기기용 fallback) */
[data-theme="dark"] .sv-rp-cover,
.sv-app--dark .sv-rp-cover {
  background: linear-gradient(145deg, #2a2318 0%, #221c12 40%, #1e190f 100%);
  border-top-color: rgba(200, 165, 80, 0.14);
  border-bottom-color: rgba(200, 165, 80, 0.14);
  box-shadow:
    0 -2px 12px rgba(0, 0, 0, 0.3),
    0 4px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .sv-rp-cover__label,
.sv-app--dark .sv-rp-cover__label {
  color: #c4a455;
}

[data-theme="dark"] .sv-rp-cover__line,
.sv-app--dark .sv-rp-cover__line {
  background: linear-gradient(90deg, transparent, rgba(200, 165, 80, 0.35), transparent);
}