/* =========================================================================
   운필 — 문고본 리뉴얼 시안 · 소설 리더 (draft_민음사ver.html 전용)
   minumsa.css(토큰·바탕) 다음에 불러온다.
   2026-10-25부터 소설은 한 권짜리 draft-book_민음사ver.html(css/book-reader.css)로 읽는다.
   이 파일은 장별 페이지(draft~draft-5_민음사ver.html, 직접 주소로만)용 — 머리의 "표지와 차례"는 그 책의 목차로 간다.
   페이지 바탕은 다른 페이지와 같은 크림(#F7F3EA). 본문만 전자책 화면처럼 테두리(베젤) 안에 —
   화면 색은 고른 테마(기본 전자책 회색 #E9E7E1). 강조는 잉크 퍼플, 코랄은 낙관에만.
   본문: 책처럼 첫 줄 들여쓰기. 모바일 기준 → 넓은 화면 확장.
   ========================================================================= */

.rdr-col { max-width: 640px; margin: 0 auto; padding: 0 var(--g); }

/* ---------- 머리 ---------- */
.rdr-top {
  display: flex; justify-content: space-between; align-items: baseline;
  height: 56px; padding-top: 18px;
}
.rdr-top .brand { font-size: 18px; font-weight: 700; letter-spacing: .1em; }
.rdr-top .meta { font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid currentColor; }
.rdr-top .meta:hover { color: #26215C; }

/* 머리 — 1~5장 공통: 운필 · 표지와 차례 · 내 서재 */
.rdr-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px;
  width: 100%; max-width: 760px; margin: 0 auto; padding: 18px var(--g) 14px;   /* body가 세로 flex라 너비를 정해 줘야 퍼진다 */
}
.rdr-head .brand { font-size: 18px; font-weight: 700; letter-spacing: .1em; }
.rh-book { justify-self: center; font-size: 13px; color: var(--ink-soft); border-bottom: 1px solid currentColor; }
.rh-shelf { font-size: 13px; color: var(--ink-soft); }
.rh-book:hover, .rh-shelf:hover { color: #26215C; }

/* =========================================================================
   표지 — 전자책 회색 책. 앞표지가 왼쪽으로 넘어가며 안쪽 면(판권·차례)이 드러난다
   ========================================================================= */
.rdr-cover { overflow-x: clip; padding-bottom: 40px; }
.rb-stage { display: flex; justify-content: center; padding: 28px 0 8px; perspective: 1600px; }
.rbook {
  --t: 20px; --w: min(300px, 80vw);
  position: relative; padding-left: var(--t);
  transform-style: preserve-3d; transform: rotateX(6deg) rotateY(20deg);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.rbook.open { transform: rotateX(2deg) rotateY(4deg); }
.rb-spine {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--t);
  transform-origin: right center; transform: rotateY(-90deg);
  display: flex; align-items: center; justify-content: center;
  background: #C9C6BD; color: #5F5C55; border: 1px solid #B9B6AD;
}
.rb-spine span { writing-mode: vertical-rl; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; white-space: nowrap; }
.rbook::before {                                /* 위쪽 종이 단면 */
  content: ''; position: absolute; left: var(--t); right: 0; top: calc(var(--t) * -1); height: var(--t);
  transform-origin: bottom center; transform: rotateX(90deg);
  background: repeating-linear-gradient(to bottom, #F4F2EC 0 2px, #DAD7CF 2px 3px);
}
.rb-cover, .rb-page { width: var(--w); aspect-ratio: 2 / 3; }
.rb-cover {
  position: relative; z-index: 1; display: flex; flex-direction: column; padding: 18px 18px 16px;
  background: #DEDCD5; color: #2F2E2A; border: 1px solid #B9B6AD;
  box-shadow: 14px 22px 34px -18px rgba(60,50,30,.45);
  transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 1.1s cubic-bezier(.3,.6,.2,1);
}
.rbook.open .rb-cover { transform: rotateY(-165deg); }
.rb-cover::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(47,46,42,.18); pointer-events: none; }
.rb-issue { font-family: var(--f-num); font-weight: 600; font-size: 11px; letter-spacing: .18em; color: #5F5C55; }
.rb-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 16px; }
.rb-pillars .pl { font-size: 10.5px; text-align: center; color: #5F5C55; }
.rb-pillars .g {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(18px, 6vw, 26px); font-weight: 700; line-height: 1;
  border: 1px solid #B9B6AD; background: rgba(255,255,255,.18);
}
.rb-pillars .g.me { border: 1.5px solid #26215C; }
.rb-pillars .w { color: #3F6B5E; } .rb-pillars .f { color: #B8461F; } .rb-pillars .e { color: #84601E; }
.rb-pillars .m { color: #55534D; } .rb-pillars .wa { color: #26215C; }
.rb-title-row { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.rb-title { font-size: clamp(22px, 6.6vw, 28px); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: #26215C; }
.rb-stamp {
  flex: none; writing-mode: vertical-rl; letter-spacing: .12em; line-height: 1;
  padding: 6px 5px; border: 1.5px solid #B8461F; color: #B8461F; font-size: 12px; font-weight: 700;
}
.rb-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid #B9B6AD; font-size: 11px; color: #5F5C55; }

/* 안쪽 면 — 판권·차례 */
.rb-page {
  position: absolute; top: 0; left: var(--t);
  display: flex; flex-direction: column; padding: 20px 20px 14px;
  background: #EDEBE5; color: #2F2E2A; border: 1px solid #B9B6AD;
  box-shadow: 14px 22px 34px -18px rgba(60,50,30,.45);
}
.rb-kicker { font-family: var(--f-num); font-weight: 600; font-size: 11px; letter-spacing: .18em; color: #5F5C55; padding-bottom: 6px; border-bottom: 1px solid #9E9A90; }
.rb-ck { margin-top: 16px; }
.rb-meta div { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid #D3D0C7; font-size: 12.5px; }
.rb-meta dt { width: 3em; color: #5F5C55; }
.rb-meta dd { font-weight: 600; }
.rb-toc { list-style: none; }
.rb-toc li { border-bottom: 1px solid #D3D0C7; }
.rb-toc a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; font-size: 13.5px; transition: color .15s; }
.rb-toc a:hover { color: #26215C; }
.rb-toc span { min-width: 18px; font-family: var(--f-num); font-weight: 600; color: #5F5C55; }

.rb-ctrl { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; font-size: 13.5px; }
.rb-toggle { border: 1px solid #B9B6AD; background: transparent; padding: 4px 12px; cursor: pointer; font-family: var(--f-serif); font-size: 12.5px; color: var(--ink-soft); }
.rb-toggle:hover { border-color: #26215C; color: #26215C; }
.rb-start { font-weight: 600; color: #26215C; border-bottom: 1px solid currentColor; }
.rdr-lede { margin: 26px auto 0; max-width: 520px; text-align: center; font-size: 15px; line-height: 1.9; color: var(--ink-soft); }

/* =========================================================================
   리더 — 테마 바 + 본문
   ========================================================================= */
.reader-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px var(--g); font-size: 12.5px;
  border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink);
}
.reader-bar > span:first-child { font-weight: 600; }
.reader-bar .seg2 { display: inline-flex; border: 1px solid currentColor; }
.reader-bar .seg2 button {
  appearance: none; border: 0; background: transparent; color: inherit;
  font-family: var(--f-serif); font-size: 11.5px; padding: 4px 10px; cursor: pointer;
}
.reader-bar .seg2 button + button { border-left: 1px solid currentColor; }
.reader-bar .seg2 button.on { background: #26215C; color: #F7F3EA; }
.reader-bar .prog { margin-left: auto; font-family: var(--f-num); font-weight: 600; font-size: 14px; letter-spacing: .1em; font-variant-numeric: lining-nums tabular-nums; }
.progbar { height: 2px; }
.progbar i { display: block; height: 100%; background: #26215C; }

/* 본문 — 전자책 화면: 둥근 화면 + 베젤 두 겹 + 그림자. 베젤 색은 테마를 따른다 */
.rdr-body {
  --bezel: #DEDCD5; --bezel-edge: #B9B6AD;
  margin: 22px 12px 120px; padding: 44px 0 56px; border-radius: 14px;
  box-shadow: 0 0 0 10px var(--bezel), 0 0 0 11px var(--bezel-edge), 0 26px 44px -22px rgba(60,50,30,.5);
  animation: screen-on .7s ease both;
}
@keyframes screen-on { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .rdr-body { animation: none; } }
.ch-kicker {
  font-family: var(--f-num); font-weight: 600; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.ch-title {
  margin: 8px 0 32px; padding-bottom: 22px; border-bottom: 1px solid var(--rule-ink);
  font-size: clamp(26px, 7.4vw, 34px); font-weight: 600; line-height: 1.35; letter-spacing: -.015em;
}

/* 본문 — 문단 사이를 띄우지 않고 첫 줄 들여쓰기 (책 조판) */
.ch-prose p { margin: 0; font-size: 17px; line-height: 2; text-indent: 1em; }
.ch-prose p:has(> .dropcap) { text-indent: 0; display: flow-root; margin-bottom: .2em; }
.ch-prose .dropcap {
  float: left; margin: .1em .14em 0 0; padding: 0;
  font-size: 3.3em; line-height: .86; font-weight: 700; color: inherit;
}
.ch-prose .say { text-indent: 0; padding-left: 1em; margin: .5em 0; }
.rdr-body .backlink {
  display: inline-block; margin-top: 48px; padding-top: 14px; border-top: 1px solid currentColor;
  font-size: 14px; font-weight: 600; transition: color .15s;
}
.rdr-body .backlink:hover { color: #26215C; }
.scene-mark { text-align: center; margin: 1.6em 0; font-size: 22px; line-height: 1; user-select: none; opacity: .55; }

/* ---------- 테마 (값은 2~5장 리더와 같게) ---------- */
/* 전자책 — 기본 테마. 내 서재에서 소설을 펼치면 전자잉크 같은 회색 화면에서 시작한다 */
.reader[data-th="eink"] .rdr-body { background: #E9E7E1; color: #2B2A27; }
.reader[data-th="eink"] .reader-bar,
.reader[data-th="eink"] .rdr-navbar,
.reader[data-th="eink"] .nav-toc-panel { background: #DEDCD5; color: #2B2A27; border-color: #B9B6AD; }
.reader[data-th="eink"] .ch-title { border-color: #9E9A90; }
.reader[data-th="eink"] .ch-kicker { color: #5F5C55; }
.reader[data-th="eink"] .reader-bar .seg2 { border-color: #9E9A90; }

.reader[data-th="sepia"] .rdr-body { background: #F3EADB; color: #26241F; --bezel: #E2D6BF; --bezel-edge: #CFC1A6; }
.reader[data-th="sepia"] .reader-bar,
.reader[data-th="sepia"] .rdr-navbar,
.reader[data-th="sepia"] .nav-toc-panel { background: #EDE2CF; color: #26241F; }

.reader[data-th="paper"] .rdr-body { background: #FDFBF6; color: #23221F; --bezel: #E9E4D8; --bezel-edge: #D6CFBF; }
.reader[data-th="paper"] .reader-bar,
.reader[data-th="paper"] .rdr-navbar,
.reader[data-th="paper"] .nav-toc-panel { background: #F5F1E8; color: #23221F; }

.reader[data-th="night"] .rdr-body { background: #22201C; color: #D8D1C3; --bezel: #191713; --bezel-edge: #4A443A; }
.reader[data-th="night"] .reader-bar,
.reader[data-th="night"] .rdr-navbar,
.reader[data-th="night"] .nav-toc-panel { background: #191713; color: #D8D1C3; border-color: #4A443A; }
.reader[data-th="night"] .ch-title { border-color: #4A443A; }
.reader[data-th="night"] .ch-kicker { color: #9C9587; }
.reader[data-th="night"] .reader-bar .seg2 button.on { background: #D8D1C3; color: #191713; }
.reader[data-th="night"] .nav-toc-item.active { color: #CFC9F0; }
.reader[data-th="night"] .progbar i { background: #CFC9F0; }

/* ---------- 장 이동 — 하단 고정 띠 (네모, 그림자 없음) ---------- */
.rdr-navbar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100;
  display: flex; align-items: stretch;
  background: var(--sheet); border: 1px solid var(--rule-ink);
}
.nav-arrow {
  width: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-num); font-size: 22px; line-height: 1; color: inherit; transition: color .15s;
}
.nav-arrow:first-child { border-right: 1px solid currentColor; }
.nav-arrow:last-child { border-left: 1px solid currentColor; }
.nav-arrow:hover:not(.disabled) { color: #26215C; }
.nav-arrow.disabled { opacity: .3; pointer-events: none; }
.nav-toc { position: relative; }
.nav-toc-btn {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 0; background: transparent; color: inherit; cursor: pointer; white-space: nowrap;
  font-family: var(--f-serif); font-size: 13px; font-weight: 600;
}
.nav-toc-caret { font-size: 10px; opacity: .6; transition: transform .15s; }
.nav-toc-btn[aria-expanded="true"] .nav-toc-caret { transform: rotate(180deg); }
.nav-toc-panel {
  position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  min-width: 240px; display: grid;
  background: var(--sheet); border: 1px solid var(--rule-ink);
}
.nav-toc-panel[hidden] { display: none; }
.nav-toc-item { display: block; padding: 11px 16px; font-size: 14.5px; transition: color .15s; }
.nav-toc-item + .nav-toc-item { border-top: 1px solid var(--rule); }
.reader[data-th="night"] .nav-toc-item + .nav-toc-item { border-color: #302C26; }
.nav-toc-item:hover { color: #26215C; }
.nav-toc-item.active { font-weight: 700; color: #26215C; }
.nav-toc-front { font-size: 13px; color: var(--ink-soft); }

/* =========================================================================
   넓은 화면
   ========================================================================= */
@media (min-width: 640px) {
  :root { --g: 40px; }
  .rdr-top { height: 64px; padding-top: 22px; }
  .rdr-cover { padding-bottom: 56px; }
  .rbook { --w: 320px; }
  .rb-stage { padding-top: 40px; }
  .rdr-body { max-width: 760px; margin: 40px auto 150px; padding: 64px 0 72px; border-radius: 18px; box-shadow: 0 0 0 14px var(--bezel), 0 0 0 15px var(--bezel-edge), 0 30px 50px -24px rgba(60,50,30,.5); }
  .ch-prose p { font-size: 17.5px; }
}