/* =========================================================================
   운필 — 연애 소설 랜딩 (운필_연애ver.html 전용) · A안 "전부 밝게"
   원칙: 배경은 처음부터 끝까지 크림 원고지 한 장(내 서재·리더와 같은 톤) /
        책은 전자책 회색 오브젝트 / 제목·버튼은 잉크 퍼플 하나 / 코랄은 글자 강조만 /
        오행색은 원국 칸·막대 안에서만 / 예고편 느낌은 어둠이 아니라 움직임(글자 돌기·타이핑·책 펼침).
   모바일(375px) 기준, 640·1000px에서 확장.
   ========================================================================= */

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

:root {
  /* 종이 — 배경은 --sheet 하나, 카드는 --card.
     --sheet #F7F3EA는 랜딩 배경색으로 확정(2026-10-25, DESIGN.md 7절) — 바꾸지 말 것 */
  --sheet: #F7F3EA;
  --card:  #FFFDF7;
  --rule:  #D8C6A2;
  --rule-soft: #E6DCC6;
  --rule-ink:  #2C2C2A;

  /* 잉크 */
  --ink:      #2C2C2A;
  --ink-soft: #5A564E;
  --muted:    #6E695F;          /* 작은 글자 대비 4.9:1 */
  --purple:   #26215C;          /* 잉크 퍼플 — 제목·버튼 */
  --purple-2: #3A3480;
  --coral:    #D85A30;          /* 큰 글자 강조 */
  --coral-ink: #B8461F;         /* 작은 코랄 글자 (4.8:1) */

  /* 전자책 회색 */
  --eink:       #DEDCD5;        /* 표지 */
  --eink-page:  #EDEBE5;        /* 안쪽 면 */
  --eink-edge:  #B9B6AD;
  --eink-spine: #C9C6BD;
  --eink-ink:   #2F2E2A;
  --eink-soft:  #5F5C55;

  /* 오행 — 종이 위 (minumsa.css 값) */
  --el-wood:  #3F6B5E;
  --el-fire:  #D85A30;
  --el-earth: #B8863B;
  --el-metal: #8C8A82;
  --el-water: #26215C;
  /* 오행 — 회색 표지 위 (컬러 전자잉크처럼 채도·밝기 낮춤, 큰 글자 3:1 이상) */
  --gl-wood:  #3F6B5E;
  --gl-fire:  #B8461F;
  --gl-earth: #84601E;
  --gl-metal: #55534D;
  --gl-water: #26215C;

  --f-serif: 'Noto Serif KR', serif;
  --f-num:   'Cormorant Garamond', 'Noto Serif KR', serif;

  --g: 20px;
  --maxw: 1120px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--sheet); color: var(--ink);
  font-family: var(--f-serif); font-size: 16px; line-height: 1.75;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--g); padding-right: var(--g); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kicker, .ch-no, .b-issue, .pg-kicker, .pg-folio, .st-no {
  font-family: var(--f-num); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: lining-nums;
}

/* 버튼 — 잉크 퍼플 하나 */
.btn, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; cursor: pointer;
  font-family: var(--f-serif); font-size: 15px; font-weight: 600; letter-spacing: .03em;
  transition: background .2s, color .2s, border-color .2s;
}
.btn { background: var(--purple); color: var(--sheet); border: 1px solid var(--purple); }
.btn:hover { background: var(--purple-2); border-color: var(--purple-2); }
.btn .arrow { font-family: var(--f-num); transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-line { background: transparent; color: var(--purple); border: 1px solid var(--purple); }
.btn-line:hover { background: var(--purple); color: var(--sheet); }
.link-btn {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid currentColor;
}
.link-btn:hover { color: var(--purple); }
.btn:focus-visible, .btn-line:focus-visible, .link-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.tbd {
  display: inline-block; margin-left: 6px; padding: 0 6px; vertical-align: middle;
  font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1.7;
  color: var(--coral-ink); border: 1px dashed var(--coral-ink);
}

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

/* =========================================================================
   1. 첫 화면 — 회색 전자책 한 권
   ========================================================================= */
.hero {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  padding-top: 28px; padding-bottom: 56px;
}
.hero-book { display: flex; flex-direction: column; align-items: center; gap: 14px; perspective: 1400px; }

.book {
  --t: 20px;                                   /* 책 두께 */
  position: relative; padding-left: var(--t);
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(24deg);
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.book:hover { transform: rotateX(4deg) rotateY(14deg); }
.book.open { transform: rotateX(3deg) rotateY(6deg); }
.b-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: var(--eink-spine); color: var(--eink-soft); border: 1px solid var(--eink-edge);
}
.b-spine span { writing-mode: vertical-rl; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; white-space: nowrap; }
.book::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);
}

/* 앞표지 — 펼치면 왼쪽으로 넘어간다 */
.b-cover, .b-page { width: min(232px, 62vw); aspect-ratio: 2 / 3; }
.b-cover {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; padding: 16px 16px 14px;
  background: var(--eink); color: var(--eink-ink); border: 1px solid var(--eink-edge);
  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);
}
.book.open .b-cover { transform: rotateY(-165deg); }
.b-cover::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(47,46,42,.18); pointer-events: none; }
.b-issue { font-size: 10.5px; letter-spacing: .18em; color: var(--eink-soft); }

/* 안쪽 면 — 1장 첫 문단 */
.b-page {
  position: absolute; top: 0; left: var(--t);
  display: flex; flex-direction: column; padding: 18px 16px 12px;
  background: var(--eink-page); color: var(--eink-ink); border: 1px solid var(--eink-edge);
  box-shadow: 14px 22px 34px -18px rgba(60,50,30,.45);
}
.pg-kicker { font-size: 10px; letter-spacing: .14em; color: var(--eink-soft); }
.pg-body { margin-top: 10px; font-size: clamp(11.5px, 3.2vw, 13px); line-height: 1.8; }
.pg-body .dropcap { float: left; font-weight: 700; font-size: 2.9em; line-height: .86; margin: .12em .1em 0 0; color: var(--purple); }
.pg-folio { margin-top: auto; align-self: center; font-size: 10px; color: var(--eink-soft); }
/* 책날개 — 주인공 소개 */
.b-flap { gap: 0; }
.fl-name { margin-top: 12px; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--purple); }
.fl-day { margin-top: 4px; font-size: 12px; color: var(--eink-soft); }
.fl-line { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--eink-edge); font-size: clamp(11.5px, 3.2vw, 13px); line-height: 1.75; }
.fl-trap { margin-top: 10px; font-size: clamp(11px, 3vw, 12.5px); line-height: 1.7; color: var(--eink-soft); }
.fl-trap b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--coral-ink); }

/* 원국 — 時日月年, 위 천간 / 아래 지지 */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 14px; }
.pl-lbl { font-size: 10px; text-align: center; letter-spacing: .06em; color: var(--eink-soft); }
.pl-lbl small { margin-left: 2px; font-size: 10px; }
.gl {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(17px, 5.4vw, 22px); font-weight: 700; line-height: 1;
  border: 1px solid var(--eink-edge); color: var(--eink-ink); background: rgba(255,255,255,.18);
  cursor: pointer; transition: background .2s;
}
.gl.me { border: 1.5px solid var(--purple); }                  /* 일간 = 나 */
.gl.spin { color: #8E8A80; cursor: default; }                   /* 입력 전 — 글자가 돈다 */
.gl.unknown { color: #77736A; border-style: dashed; }
.gl:not(.spin):hover, .gl.on { background: rgba(255,255,255,.6); }
.gl:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
.gl[data-el="wood"]  { color: var(--gl-wood); }
.gl[data-el="fire"]  { color: var(--gl-fire); }
.gl[data-el="earth"] { color: var(--gl-earth); }
.gl[data-el="metal"] { color: var(--gl-metal); }
.gl[data-el="water"] { color: var(--gl-water); }
.gl.land { animation: land .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes land { from { transform: scale(1.25); background: rgba(255,255,255,.9); } }

.b-title-row { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.b-title { font-size: 19px; font-weight: 700; line-height: 1.32; color: var(--purple); }
.b-stamp {
  flex: none; writing-mode: vertical-rl; letter-spacing: .12em; line-height: 1;
  padding: 5px 4px; border: 1.5px solid var(--coral-ink); color: var(--coral-ink);
  font-size: 11px; font-weight: 700;
}
.b-meta { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--eink-edge); font-size: 10.5px; color: var(--eink-soft); }

.book-cap { width: min(300px, 86vw); min-height: 3.3em; text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.book-cap b { display: block; font-weight: 600; color: var(--ink); }
.book-toggle {
  background: none; border: 1px solid var(--rule); padding: 4px 12px; cursor: pointer;
  font-size: 12.5px; color: var(--ink-soft);
}
.book-toggle:hover { border-color: var(--purple); color: var(--purple); }
.book-toggle[hidden] { display: none; }

/* --- 헤드라인 · 예고편 --- */
.kicker-line { font-size: 13px; letter-spacing: .12em; color: var(--muted); }
.hero h1 {
  margin-top: 10px; color: var(--purple);
  font-size: clamp(30px, 8.6vw, 44px); font-weight: 600; line-height: 1.3; letter-spacing: -.025em;
}
.hero h1 em { font-style: normal; color: var(--coral); }
.hero-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.hero-sub strong { color: var(--ink); font-weight: 700; }

.trailer { margin-top: 18px; padding: 12px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); min-height: 4.6em; }
.tr-hint { font-size: 14px; color: var(--muted); }
.tr-line { font-size: 14.5px; line-height: 1.8; color: var(--ink); }
.tr-line + .tr-line { margin-top: 2px; }
.tr-line.typing::after { content: '▍'; margin-left: 1px; color: var(--purple); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* --- 입력 — 생년월일·시간 --- */
.preview { margin-top: 18px; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
.chip-group { display: inline-flex; border: 1px solid var(--rule); background: var(--card); }
.chip-group button {
  border: 0; background: none; padding: 6px 14px; cursor: pointer;
  font-size: 13.5px; color: var(--muted);
}
.chip-group button + button { border-left: 1px solid var(--rule); }
.chip-group button.active { color: var(--sheet); background: var(--purple); }
.chip-group button:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
.pv-row { display: grid; grid-template-columns: 1.75fr 1fr; gap: 8px; }
.pv-row label { display: block; min-width: 0; }
.pv-row input {
  width: 100%; height: 48px; padding: 0 12px; min-width: 0;
  background: var(--card); color: var(--ink); border: 1px solid #CFC6B4; border-radius: 0;
  font-family: var(--f-serif); font-size: 15px; -webkit-appearance: none; appearance: none;
}
.pv-row input::placeholder, .sheet-panel input::placeholder { color: #8E887C; }
.pv-row input:focus { outline: none; border-color: var(--purple); }
.pv-row input:disabled { background: #EFEBE2; color: #A39D90; }
.pv-row .is-err { border-color: var(--coral); }
.f-btn { grid-column: 1 / -1; }
.f-unknown { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.f-unknown input { width: 16px; height: 16px; accent-color: var(--purple); }
.pv-note { margin-top: 8px; font-size: 12px; color: var(--muted); }
.pv-note.err { color: var(--coral-ink); }
.preview[hidden], .result[hidden] { display: none; }

/* --- 결과 · 2단계 --- */
.result { margin-top: 18px; padding: 18px 18px 16px; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--purple); animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.rs-kicker { font-size: 12px; letter-spacing: .12em; color: var(--muted); }
.rs-head { margin-top: 6px; font-size: 20px; font-weight: 600; line-height: 1.45; }
.rs-han { color: var(--purple); margin-right: 4px; }
.rs-line { margin-top: 4px; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.rs-btns { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rs-btns .btn { flex: 1 1 220px; }

/* --- 이름 창 — 모바일은 아래에서 올라오는 시트, 넓은 화면은 가운데 --- */
.sheet {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: 100%;
  padding: 0; border: 0; background: transparent; color: var(--ink);
}
.sheet::backdrop { background: rgba(44,44,42,.45); }
.sheet[open] .sheet-panel { animation: sheet-up .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.sheet-panel {
  position: relative; display: grid; gap: 10px;
  padding: 24px var(--g) calc(22px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 3px solid var(--purple);
}
.sheet-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 24px; line-height: 1; color: var(--ink-soft); }
.sheet-x:hover { color: var(--purple); }
.sheet-kicker { font-size: 12px; letter-spacing: .08em; color: var(--muted); padding-right: 40px; }
.sheet-panel h3 { font-size: 20px; font-weight: 600; color: var(--purple); }
.sheet-lead { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 4px; }
.sheet-panel input {
  width: 100%; height: 48px; padding: 0 12px;
  background: #fff; color: var(--ink); border: 1px solid #CFC6B4; border-radius: 0;
  font-family: var(--f-serif); font-size: 15px; -webkit-appearance: none; appearance: none;
}
.sheet-panel input:focus { outline: none; border-color: var(--purple); }
.sheet-panel .btn { margin-top: 4px; }
.rs-note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.rs-note:empty { display: none; }

/* =========================================================================
   공통 섹션 머리
   ========================================================================= */
.sec-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.kicker { font-size: 14px; color: var(--muted); }
.sec-head h2 { font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; color: var(--purple); }
.sec-head h2 .tbd { font-size: 11px; }
.about, .books, .trust, .finale { padding-top: 64px; padding-bottom: 72px; border-top: 1px solid var(--rule); }

/* =========================================================================
   2. 운필이란
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.eq { display: flex; align-items: center; gap: 10px; }
.eq .han { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-ink); font-size: 30px; font-weight: 700; }
.eq .op { font-family: var(--f-num); font-size: 24px; color: var(--ink-soft); }
.eq strong { font-size: 28px; color: var(--purple); letter-spacing: .04em; }
.eq-read { margin-top: 10px; font-size: 14px; color: var(--muted); }
.about-body { margin-top: 16px; font-size: 16px; line-height: 1.95; }
.steps { list-style: none; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 16px; background: var(--card); border: 1px solid var(--rule-soft); }
.st-no { font-size: 22px; color: var(--purple); line-height: 1.2; letter-spacing: 0; }
.steps b { font-size: 16px; font-weight: 600; }
.steps p { margin-top: 2px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.diff { list-style: none; margin-top: 36px; border-top: 1px solid var(--rule-ink); }
.diff li { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.diff b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }

/* =========================================================================
   3. 두 권 나란히 — 소설 | 리포트. 넓은 화면은 양옆, 좁은 화면은 탭
   ========================================================================= */
.books-lead { margin-top: -12px; margin-bottom: 24px; font-size: 15px; color: var(--ink-soft); }
.book-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; border: 1px solid var(--rule); background: var(--card); }
.book-tabs button {
  height: 46px; border: 0; background: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--muted);
}
.book-tabs button + button { border-left: 1px solid var(--rule); }
.book-tabs button.active { background: var(--purple); color: var(--sheet); }
.book-tabs button:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
.book-cols { display: grid; grid-template-columns: 1fr; gap: 40px; }
.bcol-non { display: none; }
.book-cols.show-non .bcol-fic { display: none; }
.book-cols.show-non .bcol-non { display: block; }

.bcol-head { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.bcol-head h3 { font-size: 20px; font-weight: 600; color: var(--purple); }
.bcol-meta { margin-top: 2px; font-size: 12.5px; letter-spacing: .04em; color: var(--muted); }
.bcol-desc { margin-top: 8px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.vol-book {
  position: relative; aspect-ratio: 2 / 3; display: flex; flex-direction: column; padding: 9px 8px 8px 14px;
  background: var(--eink); border: 1px solid var(--eink-edge); color: var(--eink-ink);
  box-shadow: 8px 12px 20px -12px rgba(60,50,30,.5);
}
.vol-book::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--eink-spine); border-right: 1px solid var(--eink-edge); }
.vb-tag { align-self: flex-start; padding: 0 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; border: 1px solid currentColor; }
.vol-fic .vb-tag { color: var(--coral-ink); }
.vol-non .vb-tag { color: var(--purple); }
.vb-title { margin-top: auto; font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--purple); }
.vb-meta { margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--eink-edge); font-size: 9px; color: var(--eink-soft); }

/* 2권(리포트) 표지 — 내 책 소개·내 서재 공용. 고딕은 Pretendard를 불러온 페이지에서만 적용 */
.r-cover {
  position: relative; width: min(160px, 40vw); aspect-ratio: 2 / 3;
  display: flex; flex-direction: column; padding: 12px 12px 10px;
  background: #E9E7E1; border: 1px solid var(--eink-edge); color: var(--eink-ink);
  box-shadow: 12px 18px 28px -18px rgba(60,50,30,.45);
  font-family: 'Pretendard', var(--f-serif);
}
.r-cover::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--purple); }
.r-issue { margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--eink-soft); }
.r-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.r-grid i { height: 14px; border: 1px solid var(--eink-edge); background: rgba(255,255,255,.35); }
.r-grid i:nth-child(1), .r-grid i:nth-child(4) { background: rgba(38,33,92,.14); }
.r-title { margin-top: auto; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--purple); }
.r-meta { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--eink-edge); font-size: 10px; color: var(--eink-soft); }

/* 견본 — 소설은 책 조판(들여쓰기·대사), 리포트는 문서(막대·소제목) */
.sample { margin-top: 20px; padding: 18px 18px 16px; background: var(--card); border: 1px solid var(--rule-soft); }
.sp-tag { display: block; margin-bottom: 10px; font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.sample-fic p { font-size: 15px; line-height: 1.95; text-indent: 1em; }
.sample-fic p.say { text-indent: 0; padding-left: 1em; color: var(--ink-soft); }
.sample-non .rp-head { margin-top: 14px; font-size: 15.5px; font-weight: 700; line-height: 1.6; color: var(--purple); }
.sample-non p:not(.rp-head) { margin-top: 6px; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }
.bars { list-style: none; display: grid; gap: 5px; }
.bars li { display: grid; grid-template-columns: 20px 1fr 14px; align-items: center; gap: 8px; font-size: 13px; }
.bars span { font-weight: 700; color: var(--c); }
.bars i { display: block; height: 7px; width: calc(var(--n) / 3 * 100%); min-width: 2px; background: var(--c); }
.bars b { font-family: var(--f-num); font-weight: 600; font-variant-numeric: lining-nums; text-align: right; color: var(--ink-soft); }

/* 차례(소설) · 목차(리포트) */
.toc-h { margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-ink); font-size: 16px; font-weight: 600; color: var(--purple); }
.toc-lead { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.chapters { list-style: none; margin-top: 6px; }
.chapters li { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 10px; padding: 14px 0 16px; border-bottom: 1px solid var(--rule-soft); }
.ch-no { font-size: 12px; color: var(--coral-ink); letter-spacing: .04em; padding-top: 3px; }
.ch-txt h5 { font-size: 16.5px; font-weight: 600; line-height: 1.45; }
.ch-txt p { margin-top: 3px; font-size: 14px; line-height: 1.8; color: var(--ink-soft); }
.chapters li.locked .ch-txt p { filter: blur(5px); user-select: none; -webkit-user-select: none; }
.chapters li.locked::after, .rtoc li.locked::after {
  content: '잠긴 장'; position: absolute; right: 0; top: 14px; padding: 1px 8px;
  font-size: 11px; color: var(--muted); border: 1px solid var(--rule); background: var(--sheet);
}
.rtoc { margin-top: 6px; }
.rpart { padding: 12px 0 10px; border-bottom: 1px solid var(--rule-soft); }
.rp-no { font-family: var(--f-num); font-size: 15px; color: var(--purple); }
.rp-no b { font-family: var(--f-serif); font-size: 15.5px; font-weight: 600; margin-left: 4px; }
.rtoc ol { list-style: none; margin-top: 6px; }
.rtoc li { position: relative; display: flex; gap: 10px; padding: 4px 0; font-size: 14px; color: var(--ink-soft); }
.rtoc li span { flex: none; width: 22px; font-family: var(--f-num); font-weight: 600; color: var(--muted); font-variant-numeric: lining-nums; }
.rtoc li.locked { color: transparent; text-shadow: 0 0 6px rgba(44,44,42,.55); user-select: none; -webkit-user-select: none; }
.rtoc li.locked::after { top: 3px; text-shadow: none; }
.books-cta { margin-top: 36px; }

/* =========================================================================
   5. 후기 — 왼쪽에서 오른쪽으로 흐르는 띠 · 자주 묻는 질문
   ========================================================================= */
.marquee {
  overflow: hidden; padding: 4px 0 8px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.mq-track { list-style: none; display: flex; gap: 14px; width: max-content; padding-left: 14px; animation: mq 60s linear infinite; }
.marquee:hover .mq-track, .marquee:focus-within .mq-track, .marquee.paused .mq-track { animation-play-state: paused; }
@keyframes mq { from { transform: translateX(-50%); } to { transform: translateX(0); } }   /* 왼쪽 → 오른쪽 */
.review { flex: none; width: 280px; padding: 18px 18px 16px; background: var(--card); border: 1px solid var(--rule-soft); }
.review p { font-size: 15px; line-height: 1.8; }
.review span { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }

.faq { margin-top: 48px; border-top: 1px solid var(--rule-ink); }
.faq-h { padding: 16px 0 6px; font-size: 18px; font-weight: 600; color: var(--purple); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-family: var(--f-num); font-size: 22px; line-height: 1; color: var(--ink-soft); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.faq details p { padding: 0 0 18px; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft); }

/* =========================================================================
   6. 마지막 CTA
   ========================================================================= */
.finale-form { max-width: 560px; margin-top: 0; }
.finale-in h2 { margin: 10px 0 26px; font-size: clamp(30px, 8.6vw, 48px); font-weight: 600; line-height: 1.3; color: var(--purple); letter-spacing: -.02em; }
.next-vol { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--rule-soft); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--muted); }
.next-vol .link-btn.done { color: var(--purple); border-bottom-color: transparent; cursor: default; }

.site-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; padding-bottom: 36px; border-top: 1px solid var(--rule-ink); font-size: 12.5px; color: var(--muted); }
.brand-sm { font-weight: 700; letter-spacing: .14em; color: var(--purple); font-size: 14px; }

/* 모바일 하단 고정 CTA */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--g) calc(10px + env(safe-area-inset-bottom));
  background: rgba(247,243,234,.97); border-top: 1px solid var(--rule);
  transform: translateY(110%); transition: transform .3s ease;
}
.sticky-cta.show { transform: none; }
.sc-txt { font-size: 13px; color: var(--ink-soft); }
.sticky-cta .btn { min-height: 44px; flex: 0 1 220px; }

/* =========================================================================
   태블릿 이상
   ========================================================================= */
@media (min-width: 640px) {
  :root { --g: 40px; }
  .masthead { padding-top: 22px; }
  .pv-row { grid-template-columns: 1.4fr 1fr auto; }
  .f-btn { grid-column: auto; }
  .steps { grid-template-columns: 1fr; }
  .diff { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
  .diff li { border-bottom: 0; padding-right: 8px; }
  .review { width: 320px; }
  .bcol-head { grid-template-columns: 110px 1fr; }
}

@media (min-width: 860px) {
  .book-tabs { display: none; }
  .book-cols, .book-cols.show-non { grid-template-columns: 1fr 1fr; gap: 48px; }
  .book-cols .bcol-fic, .book-cols .bcol-non,
  .book-cols.show-non .bcol-fic, .book-cols.show-non .bcol-non { display: block; }
  .bcol-non { padding-left: 48px; border-left: 1px solid var(--rule-soft); }
}

@media (min-width: 1000px) {
  .hero { grid-template-columns: 380px 1fr; gap: 72px; padding-top: 36px; padding-bottom: 88px; min-height: calc(100vh - 60px); }
  .b-cover, .b-page { width: 268px; }
  .gl { font-size: 25px; }
  .b-title { font-size: 22px; }
  .pg-body { font-size: 13.5px; }
  .hero h1 { font-size: clamp(44px, 4.4vw, 58px); }
  .tr-line { font-size: 15.5px; }
  .sec-head { flex-direction: row; align-items: baseline; gap: 24px; margin-bottom: 40px; }
  .sec-head h2 { font-size: 30px; }
  .about, .books, .trust, .finale { padding-top: 104px; padding-bottom: 104px; }
  .about-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .books-lead { margin-top: -24px; margin-bottom: 40px; }
  .book-cols, .book-cols.show-non { gap: 64px; }
  .bcol-non { padding-left: 64px; }
  .faq { max-width: 760px; margin-top: 64px; }
  .sticky-cta { display: none; }
  .sheet { margin: auto; max-width: 440px; }
  .sheet-panel { padding: 28px 28px 26px; border: 1px solid var(--rule); border-top: 3px solid var(--purple); }
}

/* 동작 줄이기 — 글자 돌기·타이핑·띠 흐름을 끄고, 띠는 손으로 넘긴다 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}