/* 검은 우화 / Dark Fables — shared stylesheet
   기존 디자인의 톤(다크, 세리프, 레드 액센트)을 그대로 유지한 정적 페이지용 스타일 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;700;900&family=Gowun+Batang:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

:root{
  --bg: #08080a;
  --bg-soft: #0c0b0d;
  --bg-radial: #16131a;
  --text: #e8e4dd;
  --text-strong: #ece7dd;
  --text-body: #c8c2b8;
  --muted: #8b867c;
  --dim: #6f6a61;
  --accent: #b8453c;
  --accent-2: #4f6f8c;
  --accent-3: #5f7a4f;
  --italic: #a7a097;
  --line: rgba(255,255,255,.1);

  --font-display: 'Noto Serif KR', serif;
  --font-body: 'Gowun Batang', serif;
  --font-ui: 'Noto Sans KR', sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#fff; }

a{ color:inherit; }
a.btn, a.btn-outline, button.btn, button.btn-outline{ text-decoration:none; }

.container{ max-width:1080px; margin:0 auto; padding:0 7vw; }
.container-narrow{ max-width:680px; margin:0 auto; padding:0 7vw; }

/* ---------- top nav ---------- */
.site-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 7vw;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-dot{ width:9px; height:9px; background:var(--accent); border-radius:50%; box-shadow:0 0 14px var(--accent); }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.34em; color:#cfc9bf; }
.nav-cta{
  text-decoration:none; font-size:12.5px; letter-spacing:.22em; color:var(--muted);
  border:1px solid rgba(255,255,255,.14); padding:9px 18px; border-radius:2px; white-space:nowrap;
  font-family:var(--font-ui);
}

/* ---------- breadcrumbs ---------- */
.crumbs{ font-family:var(--font-ui); font-size:11.5px; letter-spacing:.18em; color:var(--dim); padding:18px 7vw 0; }
.crumbs a{ text-decoration:none; color:var(--dim); }
.crumbs a:hover{ color:var(--muted); }

/* ---------- typography ---------- */
.eyebrow{ font-family:var(--font-ui); font-size:12px; letter-spacing:.46em; color:var(--dim); }
h1,h2,h3{ font-family:var(--font-display); color:var(--text-strong); margin:0; }
h1{ font-weight:900; font-size:clamp(34px,7vw,84px); line-height:1.08; }
h2{ font-weight:900; font-size:clamp(28px,5vw,48px); line-height:1.18; }
h3{ font-weight:700; font-size:23px; }
p.lede{ font-family:var(--font-body); font-size:clamp(15px,2.1vw,20px); color:var(--muted); line-height:1.85; }
.divider{ width:1px; height:64px; background:linear-gradient(180deg,var(--accent),transparent); margin:46px auto; }
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); margin:40px 0; border:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; cursor:pointer; border:none; background:var(--accent); color:#fff;
  font-family:var(--font-ui); font-size:14px; letter-spacing:.08em; padding:15px 34px; border-radius:2px;
}
.btn:hover{ background:#a23a32; }
.btn-outline{
  display:inline-block; border:1px solid rgba(255,255,255,.22); color:#cfc9bf; background:transparent;
  font-family:var(--font-ui); font-size:14px; letter-spacing:.08em; padding:15px 34px; border-radius:2px;
}
.btn-outline:hover{ border-color:var(--accent); color:var(--text-strong); }

/* ---------- catalog cards ---------- */
.catalog{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:42px 36px; }
.card{ display:flex; flex-direction:column; }
.card-cover{ position:relative; aspect-ratio:2/3; border:1px solid rgba(255,255,255,.07); overflow:hidden; background:#0e0d10; }
.card-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-cover .spine{ position:absolute; left:0; top:0; bottom:0; width:3px; }
.spine-now{ background:var(--accent); box-shadow:0 0 18px rgba(184,69,60,.6); }
.spine-blue{ background:var(--accent-2); }
.spine-green{ background:var(--accent-3); }
.tag{ position:absolute; top:14px; right:14px; font-size:10.5px; letter-spacing:.24em; padding:5px 10px; border-radius:1px; font-family:var(--font-ui); }
.tag-now{ color:#efe9df; background:rgba(184,69,60,.92); }
.tag-soon{ color:#cfc9bf; border:1px solid rgba(255,255,255,.25); }
.card h3{ margin:20px 0 0; }
.card p{ font-family:var(--font-body); font-size:14px; color:var(--muted); margin:9px 0 0; line-height:1.7; }
.card .btn-outline, .card .soon-label{ margin-top:18px; align-self:flex-start; font-size:13px; padding:11px 24px; }
.soon-label{ font-size:12px; letter-spacing:.18em; color:var(--dim); font-family:var(--font-ui); }

/* ---------- reading body (prologue / chapter) ---------- */
.reader{ font-family:var(--font-body); display:flex; flex-direction:column; }
.reader p{ color:var(--text-body); font-size:clamp(16.5px,2.1vw,19px); line-height:2.05; margin:0 0 22px; }
.reader p.voice{ font-style:italic; color:var(--italic); text-align:center; font-size:clamp(18px,2.4vw,22px); line-height:1.85; margin:34px 0; }
.reader p.sms{
  align-self:flex-start; max-width:76%; background:rgba(184,69,60,.12); border:1px solid rgba(184,69,60,.32);
  color:#e6cdc6; border-radius:3px 15px 15px 15px; padding:12px 17px; margin:6px 0; font-family:var(--font-ui); font-size:15px; line-height:1.6;
}
.section-mark{ text-align:center; color:var(--accent); font-size:17px; letter-spacing:.3em; margin:58px 0 46px; opacity:.7; }
.chapter-mark{ display:flex; align-items:center; gap:18px; margin:64px 0 40px; }
.chapter-mark span{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--accent); letter-spacing:.1em; }
.chapter-mark .line{ flex:1; height:1px; background:var(--line); }

/* scroll reveal (progressively enhanced; visible by default for no-JS) */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* ---------- progress bar ---------- */
.progress-track{ position:fixed; top:0; left:0; right:0; z-index:40; height:3px; background:rgba(255,255,255,.06); }
.progress-fill{ height:100%; background:var(--accent); box-shadow:0 0 10px rgba(184,69,60,.8); width:0%; }

/* ---------- fixed chrome buttons ---------- */
.chrome-btn{
  position:fixed; z-index:41; background:rgba(8,8,10,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12); color:#cfc9bf; font-family:var(--font-ui); font-size:12px;
  letter-spacing:.14em; padding:9px 16px; border-radius:2px; cursor:pointer; text-decoration:none;
}

/* ---------- FAQ ---------- */
.faq dt{ font-family:var(--font-display); font-weight:700; color:var(--text-strong); margin:28px 0 8px; font-size:17px; }
.faq dd{ font-family:var(--font-body); color:var(--muted); margin:0; line-height:1.8; }

/* ---------- subscribe form ---------- */
.subscribe-form{ display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; }
.subscribe-form input{
  flex:1; min-width:200px; background:#101013; border:1px solid rgba(255,255,255,.16); color:var(--text);
  padding:14px 16px; font-size:14px; font-family:var(--font-ui); border-radius:2px; outline:none;
}
.subscribe-form input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.subscribe-note{ font-family:var(--font-body); font-size:15px; color:var(--accent); padding:10px 0; }

/* ---------- footer ---------- */
.site-footer{ text-align:center; padding:34px; font-size:11px; letter-spacing:.2em; color:#56524a; border-top:1px solid rgba(255,255,255,.05); font-family:var(--font-ui); }

/* ---------- 3D book (hero) ---------- */
@keyframes bf-float{ 0%,100%{ transform:translateY(0) rotateZ(-.5deg); } 50%{ transform:translateY(-16px) rotateZ(.5deg); } }
.book3d-wrap{ width:300px; margin:0 auto; perspective:1700px; perspective-origin:50% 42%; touch-action:none; }
.book3d-float{ animation:bf-float 7s ease-in-out infinite; transform-style:preserve-3d; }
.book3d{ position:relative; width:300px; height:450px; transform-style:preserve-3d; transform:rotateX(6deg) rotateY(-30deg); cursor:grab; transition:transform .12s ease-out; }
.book3d:active{ cursor:grabbing; }
.book3d-face{ position:absolute; top:50%; left:50%; backface-visibility:hidden; box-sizing:border-box; }
.book3d-front{ width:300px; height:450px; transform:translate(-50%,-50%) translateZ(24px); border-radius:2px 5px 5px 2px; overflow:hidden; background:#0e1014; }
.book3d-front img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.book3d-back{ width:300px; height:450px; transform:translate(-50%,-50%) rotateY(180deg) translateZ(24px); border-radius:5px 2px 2px 5px; background:linear-gradient(135deg,#0c0e13,#070809); padding:34px 30px; color:#b8b2a8; }
.book3d-back .tag{ font-family:var(--font-ui); font-size:10px; letter-spacing:.34em; color:var(--dim); margin-bottom:20px; }
.book3d-back .pitch{ font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.55; color:#ddd6cb; margin:0 0 18px; }
.book3d-back .blurb{ font-family:var(--font-body); font-size:11.5px; line-height:1.95; color:var(--muted); margin:0; }
.book3d-back .meta{ position:absolute; left:30px; right:30px; bottom:30px; }
.book3d-back .meta-rule{ height:1px; background:rgba(255,255,255,.12); margin-bottom:14px; }
.book3d-back .meta-row{ display:flex; justify-content:space-between; align-items:flex-end; font-family:var(--font-ui); font-size:10px; letter-spacing:.1em; color:var(--dim); }
.book3d-back .barcode{ width:46px; height:24px; background:repeating-linear-gradient(90deg,#cfc9bf 0,#cfc9bf 1px,transparent 1px,transparent 3px); opacity:.5; }
.book3d-spine{ width:48px; height:450px; transform:translate(-50%,-50%) rotateY(-90deg) translateZ(150px); background:linear-gradient(90deg,#05060a,#11141b 45%,#0a0c11); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:22px 0; }
.book3d-spine span{ writing-mode:vertical-rl; font-family:var(--font-ui); letter-spacing:.3em; color:var(--dim); font-size:8.5px; }
.book3d-spine span.title{ font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.18em; color:var(--text-strong); }
.book3d-pages-right{ width:48px; height:450px; transform:translate(-50%,-50%) rotateY(90deg) translateZ(150px); background:repeating-linear-gradient(90deg,#efe9da 0,#efe9da 1px,#cdc3ad 1px,#cdc3ad 2.4px); }
.book3d-pages-top{ width:300px; height:48px; transform:translate(-50%,-50%) rotateX(90deg) translateZ(225px); background:repeating-linear-gradient(90deg,#efe9da 0,#efe9da 1px,#cdc3ad 1px,#cdc3ad 2.4px); }
.book3d-pages-bottom{ width:300px; height:48px; transform:translate(-50%,-50%) rotateX(-90deg) translateZ(225px); background:repeating-linear-gradient(90deg,#efe9da 0,#efe9da 1px,#cdc3ad 1px,#cdc3ad 2.4px); }
.book3d-hint{ font-family:var(--font-ui); font-size:10.5px; letter-spacing:.24em; color:var(--dim); text-align:center; margin-top:20px; }
@media (prefers-reduced-motion: reduce){
  .book3d-float{ animation:none; }
  .book3d{ transition:none; }
}

/* ---------- accessibility ---------- */
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ transition:none; opacity:1; transform:none; }
}

/* ---------- sections / hero spacing ---------- */
.hero{ text-align:center; padding:9vh 7vw 7vh; }
.section{ padding:8vh 7vw; }
.section-narrow{ max-width:680px; margin:0 auto; padding:8vh 7vw; text-align:center; }