/* =========================================================================
   운필 — 연애 소설 한 권 (draft-book_민음사ver.html 전용). minumsa.css(토큰·크림 바탕) 다음에 불러온다.
   14장: 표지 · 목차 · [장 표제지 · 본문] × 5 · 끝 · 뒷표지(덮기).
   처음 리더처럼 한 장이 화면을 가득 채우는 평평한 전자책 면 — 책등·종이 단면·기울기·둥근 모서리 없이.
   표지·뒷표지는 그 면 가운데 놓인 2:3 표지 한 장. 한 장씩 좌우로 넘기고, 긴 본문은 그 장 안에서 위아래로 읽는다.
   ========================================================================= */

:root { --purple: #26215C; --coral-ink: #B8461F; }

/* 책 테마 — 종이 색·글자 색·책등 색·종이 단면 색 */
.device { --scr: #E9E7E1; --txt: #2B2A27; --soft: #5F5C55; --line: #C9C6BD; --spine: #C9C6BD; --edge1: #F1EFEA; --edge2: #CFCBC2; }
.device[data-th="sepia"] { --scr: #F3EADB; --txt: #26241F; --soft: #6B6253; --line: #D9CBB0; --spine: #CBB994; --edge1: #F8F1E4; --edge2: #D9CBB0; }
.device[data-th="paper"] { --scr: #FDFBF6; --txt: #23221F; --soft: #6E695F; --line: #E2DBCB; --spine: #D6CFBF; --edge1: #FFFFFF; --edge2: #E2DBCB; }
.device[data-th="night"] { --scr: #22201C; --txt: #D8D1C3; --soft: #9C9587; --line: #3A352E; --spine: #14120F; --edge1: #3A352E; --edge2: #1B1916; }

/* ---------- 화면 가득 — 머리(얇게) · 책(남은 높이 전부) · 아래 조작(한 줄) ---------- */
.bk-body { height: 100vh; height: 100svh; min-height: 0; overflow: hidden; }
.bk-head {
  flex: none; width: 100%; padding: 10px 18px 6px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px;
}
.bk-head .brand { font-size: 17px; font-weight: 700; letter-spacing: .1em; }
.bk-head .bk-name { justify-self: center; font-size: 12.5px; color: var(--ink-soft); }
.bk-head .shelf-link { font-size: 12.5px; color: var(--ink-soft); border-bottom: 1px solid currentColor; }
.bk-head .shelf-link:hover { color: var(--purple); }

/* ---------- 면 — 머리와 아래 조작 사이를 가득, 평평하게 ---------- */
.bk-wrap { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.bk-stage { flex: 1; min-height: 0; width: 100%; display: flex; }
.device { flex: 1; min-width: 0; display: flex; transition: opacity .5s ease; }
.screen {
  position: relative; flex: 1; overflow: hidden;
  background: var(--scr); color: var(--txt);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* 한 장 — 지금 장만 보인다. 긴 장은 그 안에서 위아래로 */
.pg {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 48px 22px 40px; background: var(--scr);
  visibility: hidden;
  container-type: inline-size;
}
.pg.on { visibility: visible; z-index: 2; }
.pg.leaving { visibility: visible; z-index: 3; pointer-events: none; }
.pg-in { max-width: 620px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.pnum { margin-top: auto; padding-top: 32px; text-align: center; font-family: var(--f-num); font-size: 12px; color: var(--soft); font-variant-numeric: lining-nums; }

/* 넘김 — 옆으로 살짝 밀리며 바뀐다 */
.pg.out-next { animation: out-next .35s ease forwards; }
.pg.in-next  { animation: in-next .35s ease both; }
.pg.out-prev { animation: out-prev .35s ease forwards; }
.pg.in-prev  { animation: in-prev .35s ease both; }
@keyframes out-next { to { transform: translateX(-3%); opacity: 0; } }
@keyframes in-next  { from { transform: translateX(3%); opacity: 0; } }
@keyframes out-prev { to { transform: translateX(3%); opacity: 0; } }
@keyframes in-prev  { from { transform: translateX(-3%); opacity: 0; } }

/* ---------- 1. 표지 — 면 가운데 회색 표지 한 장(2:3, 평평하게) ---------- */
.pg-cover, .pg-back { padding: 0; container-type: size; display: grid; place-items: center; }
.cv, .bc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  width: min(100cqw - 32px, (100cqh - 40px) * 2 / 3); aspect-ratio: 2 / 3;
  padding: clamp(20px, 8%, 40px);
  background: #DEDCD5; color: #2F2E2A; border: 1px solid #C9C6BD;
  container-type: inline-size;
}
.cv-issue { font-family: var(--f-num); font-weight: 600; font-size: 12px; letter-spacing: .2em; color: #5F5C55; }
.cv-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 360px; margin-top: 28px; }
.cv-pillars .pl { text-align: center; font-size: 12px; color: #5F5C55; }
.cv-pillars .g {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(18px, 8.5cqw, 40px); font-weight: 700; line-height: 1;
  border: 1px solid #B9B6AD; background: rgba(255,255,255,.2);
}
.cv-pillars .me { border: 2px solid #26215C; }
.cv-pillars .w { color: #3F6B5E; } .cv-pillars .f { color: #B8461F; } .cv-pillars .e { color: #84601E; } .cv-pillars .m { color: #55534D; }
.cv-title-row { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cv-title { font-size: clamp(26px, 11cqw, 52px); font-weight: 700; line-height: 1.22; color: #26215C; letter-spacing: -.02em; }
.cv-stamp { flex: none; writing-mode: vertical-rl; letter-spacing: .12em; line-height: 1; padding: 8px 6px; border: 2px solid #B8461F; color: #B8461F; font-size: 15px; font-weight: 700; }
.cv-foot { margin-top: 16px; padding-top: 10px; border-top: 1px solid #B9B6AD; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: #5F5C55; }
.cv-open { position: relative; z-index: 1; border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--f-serif); font-size: 12.5px; font-weight: 600; color: #26215C; border-bottom: 1px solid currentColor; }

/* ---------- 2. 목차 — 판권 + 차례(쪽수) ---------- */
.kicker { font-family: var(--f-num); font-weight: 600; font-size: 12px; letter-spacing: .2em; color: var(--soft); padding-bottom: 8px; border-bottom: 1px solid var(--txt); }
.colo { margin-bottom: 30px; }
.colo div { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.colo dt { width: 3em; color: var(--soft); }
.colo dd { font-weight: 600; }
.toc { list-style: none; }
.toc li { border-bottom: 1px solid var(--line); }
.toc button {
  width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 13px 0;
  border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
  font-family: var(--f-serif); font-size: 16px;
}
.toc button:hover { color: var(--purple); }
.toc .rn { min-width: 22px; font-family: var(--f-num); font-weight: 600; color: var(--soft); }
.toc .dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.toc .pno { font-family: var(--f-num); font-weight: 600; font-variant-numeric: lining-nums; color: var(--soft); }
.toc .toc-end button { color: var(--soft); font-size: 14.5px; }

/* ---------- 장 표제지 ---------- */
/* 표제지·끝 — 글은 면 가운데, 쪽수는 아래 */
.pg-title .pg-in, .pg-end .pg-in { text-align: center; }
.pg-title .pg-in > :first-child, .pg-end .pg-in > :first-child { margin-top: auto; }
.ct-no { font-family: var(--f-num); font-weight: 600; font-size: 15px; letter-spacing: .3em; color: var(--soft); }
.ct-title { margin-top: 14px; font-size: clamp(22px, 8cqw, 40px); font-weight: 600; line-height: 1.35; letter-spacing: -.015em; }
.ct-rule { width: 40px; height: 1px; margin: 26px auto; background: var(--txt); opacity: .5; }
.ct-topics { font-size: 14px; line-height: 1.8; color: var(--soft); }

/* ---------- 장 본문 — 책 조판 ---------- */
.cb-head { padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--line); font-family: var(--f-num); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--soft); }
.prose p { margin: 0; text-indent: 1em; }
.prose p:has(> .dropcap) { text-indent: 0; display: flow-root; margin-bottom: .2em; }
.prose .dropcap { float: left; margin: .1em .14em 0 0; font-size: 3.3em; line-height: .86; font-weight: 700; }
.prose .say { text-indent: 0; padding-left: 1em; margin: .5em 0; }
.prose .scene-mark { text-align: center; margin: 1.6em 0; font-size: 22px; line-height: 1; opacity: .55; text-indent: 0; }
.cb-next { display: block; margin: 40px auto 0; padding: 10px 18px; border: 1px solid var(--txt); background: none; color: inherit; cursor: pointer; font-family: var(--f-serif); font-size: 14px; }
.cb-next:hover { background: var(--txt); color: var(--scr); }

/* ---------- 끝 ---------- */
.end-mark { font-size: clamp(36px, 14cqw, 64px); font-weight: 700; letter-spacing: .2em; }
.end-line { margin-top: 18px; font-size: 16px; line-height: 1.9; }
.end-sign { margin-top: 8px; font-size: 13.5px; color: var(--soft); }
.end-next {
  display: block; margin: 36px auto 0; max-width: 360px; padding: 16px 18px; text-align: left;
  border: 1px solid var(--line); background: rgba(255,255,255,.35);
}
.device[data-th="night"] .end-next { background: rgba(255,255,255,.04); }
.end-next small { display: block; font-size: 11.5px; letter-spacing: .08em; color: var(--soft); }
.end-next b { display: block; margin-top: 4px; font-size: 16px; color: var(--purple); }
.device[data-th="night"] .end-next b { color: #CFC9F0; }
.end-next span { display: block; margin-top: 2px; font-size: 13px; color: var(--soft); }

/* ---------- 뒷표지 — 띠지 문구, 덮기 ---------- */
.bc-quote { margin-top: 14px; font-size: clamp(15px, 5cqw, 22px); font-weight: 600; line-height: 1.7; color: #26215C; }
.bc-text { margin-top: 12px; font-size: clamp(12.5px, 3.4cqw, 14.5px); line-height: 1.85; color: #4A4740; }
.bc-band { margin-top: auto; padding: 12px 14px; background: #F2E2C8; border: 1px solid #D8C6A2; font-size: 13.5px; font-weight: 600; text-align: center; color: #2C2C2A; }
.bc-foot { position: relative; z-index: 1; margin-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.bc-brand { font-size: 20px; font-weight: 700; letter-spacing: .14em; color: #26215C; }
.bc-brand small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; letter-spacing: .04em; color: #5F5C55; }
.bc-code { width: 92px; height: 34px; background: repeating-linear-gradient(90deg, #2F2E2A 0 2px, transparent 2px 4px, #2F2E2A 4px 5px, transparent 5px 8px); opacity: .7; }
.bc-btns { position: relative; z-index: 1; margin-top: 16px; display: flex; gap: 8px; }
.bc-btns button { flex: 1; height: 44px; cursor: pointer; font-family: var(--f-serif); font-size: 14px; font-weight: 600; }
.bc-close { background: #26215C; color: #F7F3EA; border: 1px solid #26215C; }
.bc-again { background: transparent; color: #26215C; border: 1px solid #26215C; }

/* 책 덮기 — 면이 흐려지며 내 서재로 */
.device.closing { opacity: 0; }

/* ---------- 아래 조작 — 한 줄: 이전 · 쪽 · 다음 · 테마, 위에 진행 막대 ---------- */
.bk-bar { flex: none; width: min(96vw, 900px); padding: 6px 0 10px; }
.bk-prog { height: 2px; background: var(--rule); }
.bk-prog i { display: block; height: 100%; width: 0; background: var(--purple); transition: width .4s ease; }
.bk-ctrl { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; margin-top: 8px; }
.bk-ctrl > button {
  height: 38px; border: 1px solid var(--rule-ink); background: transparent; cursor: pointer;
  font-family: var(--f-num); font-size: 20px; line-height: 1; color: var(--ink);
}
.bk-ctrl > button:hover:not(:disabled) { color: var(--purple); border-color: var(--purple); }
.bk-ctrl > button:disabled { opacity: .3; cursor: default; }
.pg-info { text-align: center; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-info b { font-family: var(--f-num); font-weight: 600; font-size: 14px; color: var(--ink); font-variant-numeric: lining-nums; }
.bk-ctrl .seg { grid-column: 1 / -1; justify-self: center; display: inline-flex; border: 1px solid var(--rule-ink); }
.bk-ctrl .seg button { border: 0; background: transparent; padding: 3px 10px; cursor: pointer; font-family: var(--f-serif); font-size: 11.5px; color: var(--ink-soft); }
.bk-ctrl .seg button + button { border-left: 1px solid var(--rule-ink); }
.bk-ctrl .seg button.on { background: var(--purple); color: #F7F3EA; }
@media (min-width: 640px) {
  .bk-ctrl { grid-template-columns: 40px 1fr 40px auto; }
  .bk-ctrl .seg { grid-column: auto; }
}

button:focus-visible, .end-next:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* 본문 글자 — 좁은 면(폰)에선 조금 작게 */
.prose p { font-size: clamp(15px, 4.4cqw, 17px); line-height: 1.95; }

@media (prefers-reduced-motion: reduce) {
  .pg.out-next, .pg.in-next, .pg.out-prev, .pg.in-prev { animation: none; }
  .device { transition: none; }
}