/* 밤의 서재 — 공통 스타일 (책장 `/`, 책 `/<slug>`, 404). 토큰은 SHELF.SPEC §5 */
:root{
  --wall:#14100d; --ink:#e9d6ae; --ink-dim:rgba(233,214,174,.58); --gold:#e6c88a; --amber:#E8A33D; --dark:#2B1F17;
  --wood-1:#3b2618; --wood-2:#2a1a10; --wood-3:#1c120b; --board:#5a3a24; --board-edge:#7a5134;
  --row-h:240px;
  --strip-bg:#1b1411; --end-bg:#120c0a;   /* 책 화면에서 book.js 가 책마다 덮어씀 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--wall);scroll-behavior:smooth}
body{min-height:100vh;background:var(--wall);color:var(--ink);font-family:'Gowun Batang',serif;word-break:keep-all;
  -webkit-text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ── 책장·404 공통 배경: 왼쪽 위 스탠드 불빛 + 벽지 결 ─────────────── */
.page-shelf,.page-404{overflow-x:hidden;
  background:
    radial-gradient(ellipse 80% 55% at 12% -5%, rgba(255,186,104,.20), transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(255,186,104,.06), transparent 70%),
    var(--wall)}
.page-shelf:before,.page-404:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 7px)}

/* ── 버튼 (책 끝 카드·표지·404 공통) ──────────────────────────────── */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:26px;
  font:700 17px 'Gowun Batang',serif;text-decoration:none;letter-spacing:.04em;-webkit-tap-highlight-color:transparent}
.btn[hidden]{display:none}
.btn.pri{background:var(--amber);color:var(--dark);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.btn.sec{border:1.5px solid rgba(230,200,138,.55);color:var(--gold)}
.btn small{font:500 13px 'Gowun Batang',serif;opacity:.8}
.btns{display:flex;flex-direction:column;gap:10px;margin-top:26px;width:min(100%,300px)}

/* ═══ 책장 화면 `/` ═════════════════════════════════════════════════ */
.mast{position:relative;padding:44px 20px 26px;text-align:center}
.name{font:600 italic 27px/1.18 'Cormorant Garamond',serif;letter-spacing:.02em;color:var(--ink);text-wrap:balance;
  text-shadow:0 0 18px rgba(255,186,104,.25)}
.sub{margin-top:10px;font-size:13px;letter-spacing:.42em;padding-left:.42em;color:var(--ink-dim)}
.orn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;color:var(--gold);opacity:.7}
.orn i{display:block;width:54px;height:1px;background:currentColor}
.orn b{width:7px;height:7px;transform:rotate(45deg);border:1px solid currentColor}

.case{position:relative;margin:0 auto;max-width:980px;padding:0 14px 40px}
.frame{position:relative;padding:14px 16px 0;border-radius:4px 4px 0 0;
  background:linear-gradient(90deg,var(--wood-2),var(--wood-1) 12%,var(--wood-1) 88%,var(--wood-2));
  box-shadow:0 30px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,170,.08)}
.frame:before{content:'';position:absolute;left:0;right:0;top:0;height:14px;border-radius:4px 4px 0 0;
  background:linear-gradient(var(--board-edge),var(--board))}
.row{position:relative;height:var(--row-h);
  background:linear-gradient(var(--wood-3),#24170e 70%,#2c1c11);
  box-shadow:inset 0 14px 22px rgba(0,0,0,.55), inset 8px 0 14px rgba(0,0,0,.35), inset -8px 0 14px rgba(0,0,0,.35)}
.board{position:relative;height:16px;margin:0 -16px;z-index:3;
  background:linear-gradient(var(--board-edge),var(--board) 40%,#3e2717);
  box-shadow:0 8px 14px rgba(0,0,0,.55)}
.plate{position:absolute;left:50%;top:2px;transform:translateX(-50%);padding:0 9px;height:12px;border-radius:2px;
  background:linear-gradient(#cfa968,#9c7638);color:#2a1a0e;font:600 10px/12px 'Cormorant Garamond',serif;letter-spacing:.2em;
  box-shadow:0 1px 0 rgba(0,0,0,.4)}
.books{position:absolute;left:10px;right:10px;bottom:0;height:100%;display:flex;align-items:flex-end;gap:2px;overflow:hidden;padding-top:12px}

/* 장식 책 */
.fill{flex:none;position:relative;border-radius:2px 2px 0 0;filter:brightness(.78) saturate(.85)}
.fill:before,.fill:after{content:'';position:absolute;left:0;right:0;height:3px;background:rgba(230,200,138,.35)}
.fill:before{top:12%}
.fill:after{bottom:10%}
.bookend{flex:none;width:12px;height:46%;background:linear-gradient(90deg,#6b6b6b,#3a3a3a);border-radius:2px 6px 0 0;opacity:.8}

/* 진짜 책 (책등) */
.book{flex:none;position:relative;cursor:pointer;border-radius:3px 3px 0 0;text-decoration:none;-webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;align-items:center;padding:12px 0 0;
  box-shadow:inset 3px 0 6px rgba(0,0,0,.45), inset -3px 0 6px rgba(0,0,0,.35), 0 0 22px rgba(255,186,104,.22);
  transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.book:hover,.book:focus-visible,.book.pulled{transform:translateY(-10px)}
.book:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.book .band{width:100%;height:2px;background:var(--fg);opacity:.75;margin:3px 0}
.book .mk{width:30px;margin:6px 0}
.book .t{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:3px;color:var(--fg);text-shadow:0 1px 0 rgba(0,0,0,.5)}
.book .t span{writing-mode:vertical-rl;text-orientation:upright;font:700 14px/1 'Gowun Batang',serif;letter-spacing:0}
.book .t span.s{font-size:10px;font-weight:400;letter-spacing:.12em;opacity:.85;margin-top:2px}
.book .lab{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:4px 5px;background:#efe3c8;color:#2a1a0e;
  font:600 11px/1 'Cormorant Garamond',serif;letter-spacing:.06em;font-variant-numeric:lining-nums;border-radius:1px;white-space:nowrap}
/* 책갈피 리본: 눌러 볼 수 있는 책이라는 표시 */
.book .rib{position:absolute;top:-2px;right:9px;width:7px;height:22px;background:#9c2f2a;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);transform-origin:top;animation:sway 3.6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(4deg)}}

/* 예약 자리 */
.slot{flex:none;width:46px;height:78%;border:1.5px dashed rgba(233,214,174,.22);border-bottom:0;border-radius:3px 3px 0 0;
  display:flex;align-items:center;justify-content:center}
.slot span{writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;color:rgba(233,214,174,.38)}

/* 폭이 모자란 칸: 그 칸만 옆으로 밀어 보기 */
.books.scroll{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent)}
.books.scroll::-webkit-scrollbar{display:none}
.books.scroll .book,.books.scroll .slot{scroll-snap-align:start}

.hint{text-align:center;margin-top:22px;font-size:13px;color:var(--ink-dim);letter-spacing:.06em}
.hint b{color:var(--gold);font-weight:400}

/* ═══ 책 화면 `/<slug>` ═════════════════════════════════════════════ */
/* 위 막대 — 내려 읽을 때 숨고, 올리면 나타남 */
.bar{position:fixed;left:0;right:0;top:0;z-index:20;height:calc(48px + env(safe-area-inset-top));display:flex;align-items:center;
  justify-content:space-between;padding:env(safe-area-inset-top) 14px 0;background:rgba(20,16,13,.82);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(233,214,174,.12);transition:transform .3s}
.bar.hide{transform:translateY(-100%)}
.bar a{color:var(--ink);text-decoration:none;font-size:14px;display:flex;align-items:center;gap:6px;
  min-height:44px;-webkit-tap-highlight-color:transparent}
.bar .co{font:600 13px 'Cormorant Garamond',serif;letter-spacing:.12em;color:var(--gold);border:1px solid rgba(230,200,138,.5);
  padding:2px 8px;font-variant-numeric:lining-nums}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* 표지 */
.cover{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:72px 24px 40px;text-align:center;
  background:radial-gradient(ellipse 90% 60% at 30% 10%,rgba(255,186,104,.16),transparent 65%),var(--wall)}
.tome{position:relative;width:min(62vw,300px);aspect-ratio:800/1184;border-radius:3px 7px 7px 3px;
  box-shadow:0 26px 44px rgba(0,0,0,.6),0 0 0 1px rgba(233,214,174,.12);transform:perspective(900px) rotateY(-8deg);transform-origin:left center}
.tome img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.tome:before{content:'';position:absolute;left:0;top:0;bottom:0;width:14px;z-index:2;border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,255,255,.1) 60%,rgba(0,0,0,.25))}
.tome:after{content:'';position:absolute;right:-7px;top:6px;bottom:6px;width:7px;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(#efe3c8 0 2px,#cdbd9b 2px 3px)}
.kd{margin-top:30px;font-size:12px;letter-spacing:.5em;padding-left:.5em;color:var(--gold)}
.tt{margin-top:8px;font:700 22px/1.35 'Gowun Batang',serif}
.la{font:500 italic 16px 'Cormorant Garamond',serif;letter-spacing:.12em;color:var(--ink-dim);margin-top:2px}
.bl{margin-top:14px;font-size:14px;line-height:1.75;color:var(--ink-dim);max-width:22em;text-wrap:balance}
.down{margin-top:26px;color:var(--ink-dim);font-size:12px;letter-spacing:.2em;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* 웹툰 — 조각을 틈 없이 쌓는다 (SPEC §8: line-height 0, 조각 사이 margin·border·공백 없음) */
.gap{height:40px;background:linear-gradient(var(--wall),var(--strip-bg))}
.strip{max-width:800px;margin:0 auto;background:var(--strip-bg);line-height:0;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.strip img{display:block;width:100%;height:auto;-webkit-user-drag:none;-webkit-touch-callout:none}

/* 끝 카드 */
.end{background:var(--end-bg);padding:64px 24px 80px;text-align:center}
.end .fin{font:500 italic 22px 'Cormorant Garamond',serif;letter-spacing:.3em;color:var(--gold)}
.end p{margin-top:14px;font-size:14px;color:var(--ink-dim)}
.end p.fin{margin-top:0}
.end .btns{margin:30px auto 0}
.end .home{display:inline-block;margin-top:26px;color:var(--ink-dim);font-size:13px;text-decoration:none;border-bottom:1px solid rgba(233,214,174,.3)}

/* ═══ 404 / 못 찾은 책 ══════════════════════════════════════════════ */
.nf{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:40px 24px;text-align:center}
.nf-co{padding:12px 20px 12px calc(20px + .14em);background:#efe3c8;color:#2a1a0e;border-radius:2px;
  font:600 44px/1 'Cormorant Garamond',serif;letter-spacing:.14em;font-variant-numeric:lining-nums;
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 28px rgba(255,186,104,.18)}
.nf-tx{font-size:15px;line-height:1.7;color:var(--ink-dim)}
.nf .btn{width:min(100%,240px);margin-top:6px}

@media (min-width:760px){
  :root{--row-h:250px}
  .name{font-size:40px}
  .mast{padding-top:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .book .rib,.down{animation:none}
  .book,.bar{transition:none}
}