/* 5ft.mag 웹진 — 세로 책장. 시즌 구분 없이 한 줄로, 올린 순서대로 눕혀 쌓는다(책등이 앞, 표지가 위).
   유료 이북은 양장(천 짜임 + 금박), 무료 웹진은 종이(크라프트 + 톤온톤 박). 책을 누르면 목록이 물러나고
   책이 일어서는 소개 화면으로 간다. 소개 화면에서 아래로 넘기면 다음 책, ← 나 Esc 로 목록.
   이전 코버플로우 책장은 css/webzine.css + js/webzine-page.js (books-classic.html) 에 그대로 있다. */
#themeBtn { display: none; }   /* 다크 고정이라 테마 버튼을 아예 뺀다 (빈 칸 없이) */
html {
  --wz-mark: url("../img/symbol-w.svg");
  --wz-base: #16121a;
  --wz-ink: #fff;
  --wz-ink-2: rgba(255, 255, 255, .74);
  --wz-ink-3: rgba(255, 255, 255, .48);
  --wz-ink-4: rgba(255, 255, 255, .26);
  --wz-line: rgba(255, 255, 255, .13);
  --wz-mood: #2a2430;                 /* 목록 가운데 책의 색. JS 가 바꾼다 */
  --wz-mood-a: 92%; --wz-mood-b: 44%;
  --wz-t: .56s;
  /* 들리고 내려앉는 짧은 스프링 */
  --wz-e: linear(0, 0.0873 4%, 0.282 8%, 0.5063 12%, 0.7115 15%, 0.8732 19%, 0.9847 23%, 1.05 27%, 1.0789 31%, 1.0827 35%, 1.0716 38%, 1.0539 42%, 1.0354 46%, 1.0193 50%, 1.0071 54%, 0.9991 58%, 0.9947 62%, 0.9931 65%, 0.9933 69%, 0.9945 73%, 0.996 77%, 0.9975 81%, 0.9988 85%, 0.9997 88%, 1.0002 92%, 1.0005 96%, 1);
  /* 일어설 때: 더 느리고 한 번만 살짝 넘친다 */
  --wz-t2: 1.35s;
  --wz-e2: linear(0, 0.045 5%, 0.17 11%, 0.38 18%, 0.6 26%, 0.78 34%, 0.91 43%, 0.985 52%, 1.02 61%, 1.026 68%, 1.017 77%, 1.006 86%, 1.001 93%, 1);
  --wz-weave: none;   /* 캔버스 생성(JS) */
  --wz-kraft: none;   /* 캔버스 생성(JS) */
  --wz-pages: repeating-linear-gradient(var(--pg-dir, to bottom), #f2ecdf 0 .6px, #dcd2bd .6px 1.1px, #c9bc9f 1.1px 1.6px, #f2ecdf 1.6px 2.6px);
  --wz-bg: var(--wz-base);
}
body { background: var(--wz-base); color: var(--wz-ink); overflow-x: hidden; }
body > header { background: var(--wz-base); border-bottom-color: transparent; }   /* 사이트 헤더만. .wz-intro 도 <header> 라 태그 선택자면 소개 영역이 검게 막힌다 */
footer { background: var(--wz-base); border-top-color: transparent; color: rgba(255, 255, 255, .8); position: relative; z-index: 1; }

/* 페이지 진입 veil: 밝은 화면에서 다크로 스르륵 */
.wz-veil { position: fixed; inset: 0; z-index: 2000; background: var(--wz-veil-bg, #fff); opacity: 0; pointer-events: none; }
.wz-veil.enter { animation: wzVeilOut .55s ease both; }
@keyframes wzVeilOut { from { opacity: 1; } to { opacity: 0; } }

/* 배경 색 번짐: 목록에서 화면 가운데 온 책의 색 */
.wz-mood { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 10%, color-mix(in srgb, var(--wz-mood) var(--wz-mood-a), transparent), transparent 70%),
    radial-gradient(110% 70% at 50% 70%, color-mix(in srgb, var(--wz-mood) var(--wz-mood-b), transparent), transparent 74%);
  transition: background .6s ease, opacity .35s ease; }
.wz-stage { position: relative; z-index: 1; min-height: calc(100vh - var(--header-h, 72px)); background: none; color: var(--wz-ink);
  transition: opacity .6s ease, transform .7s cubic-bezier(.3, .8, .3, 1); }   /* 소개 화면이 걷힐 때 천천히 떠오른다 */
body.wz-mode-detail .wz-stage, body.wz-mode-detail .wz-mood, body.wz-mode-detail > footer { opacity: 0; pointer-events: none; }
body.wz-mode-detail .wz-stage { transform: scale(.985); }
body.wz-mode-detail { overflow: hidden; }

/* 소개 영역도 <header> 라 공통 규칙대로 화면 위에 붙는다(sticky). 선은 지우고, 헤더 아래에 붙게 한 뒤,
   뒤로 지나가는 책을 블러와 어두운 그라데이션으로 눌러 글자가 읽히고 공간감이 생기게 한다. 아래 가장자리는 마스크로 부드럽게 푼다 */
.wz-intro { position: sticky; top: var(--header-h, 72px); z-index: 1000;   /* 책(z 100 이하)보다 위 */ padding: 52px 40px 30px; text-align: center; border: 0;
  background: linear-gradient(180deg, rgba(22, 18, 26, .62), rgba(22, 18, 26, .38) 70%, rgba(22, 18, 26, 0));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent); mask-image: linear-gradient(#000 calc(100% - 30px), transparent); }
body.webzine-page .announcement-bar { border-bottom-color: transparent; }
.wz-intro-inner { max-width: 660px; margin: 0 auto; }
.wz-kicker { display: block; font-size: 12px; font-weight: var(--fw-heading); letter-spacing: .24em; text-transform: uppercase; color: var(--wz-ink-3); margin-bottom: 16px; } /* ink-4(2.33:1) → ink-3 (#16121a 위 4.99:1) */
.wz-page-title { font-size: clamp(40px, 6vw, 66px); font-weight: var(--fw-heading); letter-spacing: -.03em; line-height: 1; margin: 0 0 18px; color: var(--wz-ink); }
.wz-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--wz-ink-2); margin: 0 0 12px; word-break: keep-all; }
.wz-howto { font-size: 14px; line-height: 1.65; color: var(--wz-ink-3); margin: 0; word-break: keep-all; }
.wz-empty { text-align: center; color: var(--wz-ink-3); padding: 80px 24px; }

/* ── 왼쪽 눈금: 책 수만큼. 지금 보이는 책이 길다. 목록에서도 소개 화면에서도 쓴다 ── */
.wz-marks { position: fixed; left: max(10px, 1.6vw); top: 50%; transform: translateY(-50%); z-index: 2130; display: flex; flex-direction: column; gap: 9px; padding-right: 40px; color: var(--wz-fg, var(--wz-ink)); }
.wz-mark { position: relative; width: 14px; height: 1.5px; color: inherit; background: currentColor; opacity: .3; border: 0; padding: 0; cursor: pointer; transition: width .35s cubic-bezier(.3, .8, .3, 1), opacity .25s; }
.wz-mark::before { content: ""; position: absolute; left: 0; right: -30px; top: -5px; bottom: -5px; }   /* 눈금 사이 빈틈에서도 마우스가 잡히게 */
.wz-mark.on { width: 24px; opacity: 1; }
/* 마우스를 대면 그 주변이 부채꼴로 길어지고(--x 는 JS), 옆에 제목이 뜬다 */
.wz-marks.is-hover .wz-mark { width: calc(14px + var(--x, 0) * 40px); opacity: calc(.3 + var(--x, 0) * .7); }
.wz-marks.is-hover .wz-mark.on { opacity: 1; }
.wz-mark-label { position: absolute; left: 70px; top: 0; color: inherit; transform: translateY(-50%); white-space: nowrap; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; opacity: 0; pointer-events: none; transition: opacity .2s, top .2s var(--wz-e); }
.wz-mark-label.show { opacity: 1; }
.wz-mark-label small { font-weight: 400; opacity: .6; margin-right: 8px; }
.wz-mark:focus-visible { outline: 2px solid #c9a227; outline-offset: 3px; }
.wz-library-link { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; margin: 24px 0 0 -12px; color: inherit; text-decoration: none; }
.wz-library-link::before { content: ""; position: absolute; top: -12px; left: 12px; width: 14px; height: 1px; background: currentColor; opacity: .3; }
.wz-library-icon { width: 20px; height: 20px; background: currentColor; -webkit-mask: url('/img/icons/library-big.svg') center / contain no-repeat; mask: url('/img/icons/library-big.svg') center / contain no-repeat; opacity: .65; transition: opacity .2s; }
.wz-library-tooltip { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); width: max-content; font-size: 13.5px; font-weight: 600; letter-spacing: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s; }
.wz-library-link:hover .wz-library-icon, .wz-library-link:focus-visible .wz-library-icon { opacity: 1; }
.wz-library-link:hover .wz-library-tooltip, .wz-library-link:focus-visible .wz-library-tooltip { opacity: 1; visibility: visible; }
.wz-library-link:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }
.wz-back { position: fixed; left: max(6px, calc(1.6vw - 6px)); top: 12px; z-index: 2130; width: 34px; height: 34px; border: 0; background: none;
  color: var(--wz-fg, var(--wz-ink)); font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
body.wz-mode-detail .wz-back { opacity: 1; visibility: visible; transition: opacity .3s; }
.wz-back:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 700px) { .wz-marks { display: none; } .wz-back { top: 12px; left: 10px; } }

/* ── 목록: 눕힌 책을 세로로 쌓는다 ── */
.wz-stack { padding: clamp(60px, 11vw, 130px) max(16px, 3vw) max(clamp(40px, 6vw, 70px), var(--wz-scroll-tail, 0px)); display: flex; flex-direction: column; align-items: center; gap: clamp(44px, 6.4vw, 84px); }
.wz-row {
  /* 책 높이(책등 길이)만 화면에 따라 정한다. 가로는 책마다 다른 비율(--ar = 표지 가로/세로), 두께는 높이의 10%(종이) / 13%(양장) */
  --w: min(640px, 82vw);
  --ar: .707;
  --th: calc(var(--w) * .10);
  --d: calc(var(--w) * var(--ar));
  --ov: 2px;
  --lift: 0px; --tiltx: -6deg; --fwd: 0px;
  --sweep: 28%;
  position: relative; width: var(--w); height: var(--th);
  perspective: 1500px; perspective-origin: 50% 60%;
  cursor: pointer;
  scroll-margin-top: var(--wz-scroll-inset, 0px);
}
.wz-row.cloth { --th: calc(var(--w) * .13); --ov: 3px; }
.wz-row .wz-book { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translate3d(0, var(--lift), var(--fwd)) rotateX(calc(var(--tiltx) + var(--lift-deg, 0deg)));
  transition: transform var(--wz-t) var(--wz-e); }
.wz-row:hover, .wz-row:focus-within { --fwd: 26px; --lift: -2px; --sweep: 88%; }
/* 소개 화면으로 갈 때 들렸다가, 돌아올 때 다시 내려앉는다 */
.wz-row.lifted { --lift-deg: -52deg; --fwd: 80px; --lift: -14px; --sweep: 88%; }
.wz-row.lifted .wz-book, .wz-row.settling .wz-book { transition-duration: calc(var(--wz-t) * 1.8); }
.wz-row .wz-hit { position: absolute; inset: -6px 0; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; z-index: 9; transform: translateZ(calc(var(--d) / 2 + 2px)); }
.wz-row .wz-hit:focus-visible { outline: 2px solid #c9a227; outline-offset: 8px; border-radius: 4px; }
/* 접지 그림자 */
.wz-row .wz-book::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 22px; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .7), transparent 72%);
  transform: translateZ(calc(var(--d) / -2 + 20px)) translateY(8px) rotateX(18deg); filter: blur(2px); opacity: .7; }

.wz-b { position: absolute; backface-visibility: hidden; overflow: hidden; pointer-events: none; }
/* 책등 — 정면 */
.wz-spine { left: 0; top: 0; width: var(--w); height: var(--th); transform: translateZ(calc(var(--d) / 2)); background: var(--c); color: var(--ct);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 clamp(14px, 2.6vw, 30px); }
.wz-spine .wz-pub { font-size: max(9px, calc(var(--w) * .021)); letter-spacing: .01em; justify-self: start; font-style: italic; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-spine .wz-title { font-size: max(10px, calc(var(--w) * .027)); font-weight: 600; letter-spacing: -.005em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wz-spine .wz-mark5 { justify-self: end; width: calc(var(--w) * .034); height: calc(var(--w) * .034); background: currentColor; -webkit-mask: var(--wz-mark) center / contain no-repeat; mask: var(--wz-mark) center / contain no-repeat; opacity: .85; }
.wz-spine .wz-issue { font-size: max(8px, calc(var(--w) * .015)); letter-spacing: .18em; opacity: .55; margin-left: 10px; white-space: nowrap; }
@media (max-width: 560px) { .wz-spine .wz-issue { display: none; } }
.wz-spine::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 22%, rgba(0, 0, 0, .04) 60%, rgba(0, 0, 0, .26) 100%); }
/* 표지 — 윗면(눕힌 책의 앞표지). 머리가 왼쪽 */
.wz-cover { left: 0; top: calc(-1 * var(--d)); width: var(--w); height: var(--d); transform-origin: 50% 100%; transform: translateZ(calc(var(--d) / 2)) rotateX(90deg); background: var(--c); }
.wz-cover img { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--w); transform: translate(-50%, -50%) rotate(-90deg); object-fit: cover; object-position: center top; display: block; -webkit-user-drag: none; }
.wz-cover .wz-plain { --sweep: inherit; position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--w); transform: translate(-50%, -50%) rotate(-90deg);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 22px 26px; color: var(--ct); }
.wz-cover .wz-plain b { font-size: calc(var(--w) * .044); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; word-break: keep-all; }
.wz-cover .wz-plain span { font-size: 10px; letter-spacing: .22em; opacity: .55; text-transform: uppercase; margin-top: 8px; }
.cloth .wz-cover::before { z-index: 2; }
.cloth .wz-cover::after {
  background:
    linear-gradient(0deg, rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, 0) 4%,
      rgba(0, 0, 0, 0) 5.2%, rgba(0, 0, 0, .1) 6.4%, rgba(0, 0, 0, 0) 8%),
    linear-gradient(90deg, rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, 0) 10px),
    linear-gradient(270deg, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, 0) 10px),
    linear-gradient(0deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .22) 100%),
    linear-gradient(105deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .08) 100%) !important; }
.cloth .wz-spine::after { background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .04) 14%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .06) 72%, rgba(0, 0, 0, .26) 100%) !important; }
/* 누운 책의 모서리를 둥글게: 책등 네 모서리를 깎고, 책등 위·아래 가장자리와 양 끝에 둥근 면이 빛을 받고 꺾이는 명암을 준다.
   이음새(책등 윗변)는 표지 쪽으로만 1px 덮어 틈이 안 보이게 한다(아래쪽엔 덮지 않는다) */
.wz-spine { border-radius: calc(var(--th) * .09); box-shadow: 0 -1px 0 var(--c); }
.wz-cover { border-radius: calc(var(--th) * .09) calc(var(--th) * .09) 0 0; }
.wz-spine::before { border-radius: inherit; }
.wz-spine::after { border-radius: inherit; }
.wz-row .wz-spine::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, 0) 1.4%, rgba(0, 0, 0, 0) 98.6%, rgba(0, 0, 0, .22) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .13) 0, rgba(255, 255, 255, .05) 9%, rgba(255, 255, 255, 0) 26%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, .1) 86%, rgba(0, 0, 0, .3) 100%) !important; }
.wz-cover::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, 0) 5%),
    linear-gradient(90deg, rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, 0) 10px),
    linear-gradient(270deg, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, 0) 10px),
    linear-gradient(0deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .26) 100%),
    linear-gradient(105deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .08) 100%); }
/* 책배(뒤) · 옆면(페이지 결). 오버행: 표지보다 작다 */
.wz-fore { left: 0; top: var(--ov); width: var(--w); height: calc(var(--th) - var(--ov) * 2); transform: translateZ(calc(var(--d) / -2 + var(--ov))) rotateY(180deg); background: var(--wz-pages); --pg-dir: to bottom; }
.wz-side-l { left: 0; top: var(--ov); width: calc(var(--d) - var(--ov)); height: calc(var(--th) - var(--ov) * 2); transform-origin: 0 50%; transform: translateZ(calc(var(--d) / 2 - var(--ov))) rotateY(-90deg); background: var(--wz-pages); --pg-dir: to bottom; }
.wz-side-r { right: 0; top: var(--ov); width: calc(var(--d) - var(--ov)); height: calc(var(--th) - var(--ov) * 2); transform-origin: 100% 50%; transform: translateZ(calc(var(--d) / 2 - var(--ov))) rotateY(90deg); background: var(--wz-pages); --pg-dir: to bottom; }
.wz-fore::after, .wz-side-l::after, .wz-side-r::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .02) 30%, rgba(0, 0, 0, .34)); }
.wz-back-cover { left: 0; top: var(--th); width: var(--w); height: var(--d); transform-origin: 50% 0; transform: translateZ(calc(var(--d) / 2)) rotateX(-90deg); background: var(--c); }

/* ── 박 후가공 글자: 금속 그라데이션을 글자에 클립하고, 책이 움직일 때(--sweep) 하이라이트가 훑고 지나간다 ── */
.wz-foil {
  background-image: linear-gradient(100deg,
    color-mix(in srgb, var(--foil) 72%, #1a1206) 0%, var(--foil) 30%, color-mix(in srgb, var(--foil) 28%, #fff) 48%,
    var(--foil) 64%, color-mix(in srgb, var(--foil) 72%, #1a1206) 100%);
  background-size: 260% 100%; background-position: var(--sweep, 28%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .6px 0 rgba(0, 0, 0, .5));
  transition: background-position .8s var(--wz-e);
}
.wz-row.cloth, .wz-dpage.cloth { --foil: #d9bd6e; }                                   /* 양장 기본: 금박 */
.wz-row.kraft, .wz-dpage.kraft { --foil: color-mix(in srgb, var(--c) 28%, #fff); }    /* 종이 기본: 그 책 색의 톤온톤 박 */
/* 표지가 있으면 JS 가 표지에서 바탕색과 다른 눈에 띄는 색을 뽑아 --foil 을 덮어쓴다(해소의 바다는 빨강, Sun Dust People 은 하늘색) */
.wz-spine .wz-mark5, .wz-sp-mark { color: var(--foil); }

/* ── 재질 ── */
.cloth .wz-mat::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--wz-weave); background-size: 72px 72px; mix-blend-mode: multiply; opacity: .55; }
.cloth .wz-mat.has-img::before { opacity: .42; }   /* 천에 인쇄한 표지: 그림 위로도 결이 비친다 */
.cloth .wz-f-front.has-img img, .cloth .wz-cover.has-img img { filter: saturate(.92) contrast(.96); }
.cloth .wz-spine .wz-title, .cloth .wz-spine .wz-pub, .cloth .wz-sp-title, .cloth .wz-sp-pub, .cloth .wz-meta h2 { font-family: Georgia, "Times New Roman", "Apple SD Gothic Neo", serif; }
.cloth .wz-spine .wz-title { font-weight: 600; letter-spacing: 0; }
.kraft .wz-mat::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--wz-kraft); background-size: 160px 160px; mix-blend-mode: multiply; opacity: .5; }
.kraft .wz-mat.has-img::before { opacity: .12; }
.kraft .wz-spine .wz-pub, .kraft .wz-sp-pub { font-style: normal; font-weight: 600; }
.kraft .wz-spine .wz-title, .kraft .wz-sp-title { font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }

/* ── 소개 화면: 책이 일어서고 오른쪽에 소개. 아래로 넘기면 다음 책 ── */
.wz-detail { position: fixed; inset: 0; z-index: 2120; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scroll-snap-type: y proximity; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
.wz-detail.on { opacity: 1; visibility: visible; transition: opacity .4s ease; }
/* 닫을 때: 책이 눕는 동안 서서히 걷힌다(목록과 교차 페이드) */
.wz-detail.on.closing { opacity: 0; pointer-events: none; transition: opacity .75s cubic-bezier(.4, 0, .2, 1) .12s; }
.wz-dpage {
  position: relative;
  --H: clamp(280px, 37vw, 495px); --ar: .707; --W: calc(var(--H) * var(--ar)); --T: calc(var(--H) * .10); --ov: 2px;
  --sweep: 4%;
  min-height: 100vh; min-height: 100svh; scroll-snap-align: start;
  background: color-mix(in srgb, var(--c) var(--wz-mood-a), var(--wz-base)); color: var(--wz-fg);
  display: grid; place-items: center; padding: 70px max(18px, 5vw) 60px;
}
.wz-dpage.cloth { --T: calc(var(--H) * .13); --ov: 3px; }
.wz-dpage.on { --sweep: calc(62% + var(--mx, 0) * 34%); }
.wz-dpage.settled .wz-foil { transition-duration: .35s; transition-timing-function: ease-out; }
.wz-page-in { width: min(1080px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.wz-stage3d { position: relative; perspective: 1600px; perspective-origin: 50% 45%; display: grid; place-items: center; min-height: calc(var(--H) + 40px); }
.wz-sbook {
  /* 누운 자세: 목록과 같다. rotateZ(-90) 으로 책등을 아래로 돌린 뒤 rotateX(84) 로 눕히면 책등이 앞을 보고 표지가 위로 간다(목록의 -6deg 시점 포함) */
  --ry: 0deg; --rx: 84deg; --rz: -90deg; --ty: 0px;
  position: relative; width: var(--W); height: var(--H); transform-style: preserve-3d;
  transform: translateY(var(--ty)) rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz)) scale(var(--sc, 1));
  transition: transform var(--wz-t2) var(--wz-e2);
}
.wz-dpage.on .wz-sbook { --ry: 30deg; --rx: 0deg; --rz: 0deg; --ty: 0px; }
/* 일어설 때는 스프링, 누울 때는 부드럽게 가라앉는다 */
.wz-dpage:not(.on) .wz-sbook { transition: transform .8s cubic-bezier(.4, 0, .25, 1); }
.wz-dpage.reset .wz-sbook, .wz-dpage.reset .wz-sshadow, .wz-dpage.reset .wz-foil { transition: none; }   /* 열 때 눕힌 자세에서 다시 시작 */
/* 마우스를 따라 살짝 기우는 겉 껍질. 일어서는 스프링과 분리한다 */
.wz-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--mx, 0) * 9deg)) rotateX(calc(var(--my, 0) * -6deg)); transition: transform .3s ease-out; }
.wz-sshadow { position: absolute; left: 4%; right: 4%; bottom: -5%; height: 12%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%); filter: blur(12px);
  opacity: 0; transform: translateY(24px) scaleX(.6); transition: opacity var(--wz-t2) ease, transform var(--wz-t2) var(--wz-e2); }
.wz-dpage.on .wz-sshadow { opacity: .8; transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wz-detail { scroll-snap-type: none; }
    .wz-dpage { view-timeline: --wz-book block; }
    .wz-detail.on:not(.closing) .wz-dpage.is-near:not(.opening) .wz-sbook {
      animation: wzBookScrollPose linear both;
      animation-duration: auto;
      animation-timeline: --wz-book;
      animation-range: cover 0% cover 100%;
      transition: none;
    }
    .wz-detail.on:not(.closing) .wz-dpage.is-near:not(.opening) .wz-stage3d {
      animation: wzBookScrollTravel linear both;
      animation-duration: auto;
      animation-timeline: --wz-book;
      animation-range: cover 0% cover 100%;
      transition: none;
    }
    .wz-detail.on:not(.closing) .wz-dpage.is-near:not(.opening) .wz-sshadow {
      animation: wzBookScrollShadow linear both;
      animation-duration: auto;
      animation-timeline: --wz-book;
      animation-range: cover 0% cover 100%;
      transition: none;
    }
    .wz-detail.closing .wz-sbook, .wz-detail.closing .wz-stage3d, .wz-detail.closing .wz-sshadow,
    .wz-dpage.opening .wz-sbook, .wz-dpage.opening .wz-stage3d, .wz-dpage.opening .wz-sshadow { animation: none; }
    .wz-dpage.opening .wz-sbook { transition: transform .38s cubic-bezier(.3, .7, .3, 1); }
    .wz-dpage.opening .wz-stage3d { transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
    .wz-detail.closing .wz-sbook, .wz-detail.closing .wz-stage3d { transition: transform .8s cubic-bezier(.4, 0, .25, 1); }
    .wz-detail.closing .wz-sshadow { transition: opacity .8s ease, transform .8s ease; }
  }
}
@keyframes wzBookScrollPose {
  entry 0% { transform: translateY(0px) rotateY(0deg) rotateX(84deg) rotateZ(-90deg) scale(.96); }
  entry 85%, exit 15% { transform: translateY(0px) rotateY(30deg) rotateX(0deg) rotateZ(0deg) scale(1); }
  exit 100% { transform: translateY(0px) rotateY(0deg) rotateX(84deg) rotateZ(-90deg) scale(.96); }
}
@keyframes wzBookScrollTravel {
  entry 0% { transform: translateY(var(--wz-entry-shift, 0px)); }
  entry 85%, exit 15% { transform: translateY(0px); }
  exit 100% { transform: translateY(0px); }
}
@keyframes wzBookScrollShadow {
  entry 0%, exit 100% { opacity: 0; transform: translateY(0px) scaleX(.6); }
  entry 85%, exit 15% { opacity: .8; transform: translateY(0px) scaleX(1); }
}
.wz-f { position: absolute; backface-visibility: hidden; overflow: hidden; }
.wz-f-front { inset: 0; background: var(--c); }
/* 앞표지는 책등 쪽 경첩을 축으로 열리는 한 장(.wz-leaf). 바깥은 표지, 안쪽은 면지. 그 밑에 첫 페이지 */
.wz-leaf { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 50%;
  transform: translateZ(calc(var(--T) / 2)) rotateY(var(--open, 0deg)); transition: transform .5s cubic-bezier(.45, 0, .2, 1); }
/* 표지 바깥면과 같은 자리에 두면 사파리가 앞뒤를 헷갈려 겹쳐 그린다. 안쪽면은 살짝 뒤로 */
.wz-f-inside { inset: 0; transform: translateZ(-1.5px) rotateY(180deg); background: color-mix(in srgb, var(--c) 55%, #efe8da);
  box-shadow: inset -18px 0 30px -18px rgba(0, 0, 0, .35); }
/* 첫 페이지: 표지 바로 뒤 1px 이면 표지 위로 비쳐 뿌옇게 보였다. 판지 두께만큼 물리고, 표지가 열리기 전엔 숨긴다 */
.wz-f-page { top: var(--ov); bottom: var(--ov); left: 0; right: var(--ov); transform: translateZ(calc(var(--T) / 2 - 4px)); backface-visibility: hidden;
  visibility: hidden; transition: visibility 0s .3s;
  background: linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 9%), #f4efe4; }
/* 읽기로 들어갈 때: 정면으로 돌아서며 조금 커지고(.35s), 앞표지가 열린 뒤(.5s) 리더가 이어진다 */
.wz-dpage.opening .wz-sbook { --ry: 0deg; --sc: 1.1; transition: transform .38s cubic-bezier(.3, .7, .3, 1); }
.wz-dpage.opening .wz-tilt { transform: none; }
/* 펼친 양면이 화면 가운데 오도록 책을 옮긴다(--shift 는 JS 가 책등이 화면 가운데 오게 잰다) */
.wz-stage3d { transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.wz-dpage.opening .wz-stage3d { transform: translate(var(--shift-x, 0px), var(--shift-y, 0px)); }
.wz-dpage.opening .wz-leaf { --open: -158deg; transition-delay: .3s; }
.wz-dpage.opening .wz-f-page { visibility: visible; transition-delay: .28s; }
/* 면지는 뒤집힌 면이라 숨김 처리에 기대지 않고, 표지가 90도를 넘긴 뒤에만 보인다(닫혀 있을 땐 앞표지 위로 비치던 것) */
.wz-f-inside { visibility: hidden; transition: visibility 0s; }
.wz-dpage.opening .wz-f-inside { visibility: visible; transition-delay: .52s; }
.wz-dpage.opening .wz-acts { pointer-events: none; }
.wz-opening-status { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid currentColor; font-size: 13px; color: inherit; }
.wz-opening-status[hidden], .wz-opening-hint[hidden] { display: none; }
.wz-opening-status.is-floating { position: fixed; z-index: 20; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 20px; right: 20px; max-width: 480px; margin: 0 auto; background: var(--wz-bg); }
.wz-opening-status p { margin: 0; line-height: 1.5; }
.wz-opening-status strong { font-weight: 600; }
.wz-opening-hint { display: block; font-size: 12px; opacity: .8; }
.wz-cancel-read { flex: 0 0 auto; min-height: 32px; padding: 4px 0 4px 8px; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wz-cancel-read:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wz-dpage.preparing .wz-acts { visibility: hidden; }
.wz-meta { transition: opacity .3s ease, transform .3s ease; }
.wz-start-over { display: block; margin-top: 12px; border: 0; padding: 6px 0; background: none; color: inherit; font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wz-start-over[hidden] { display: none; }
.wz-continue { display: inline-block; max-width: 100%; margin-top: 16px; color: inherit; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 4px; }
/* 중앙으로 펼치는 동안 설명이 표지 위에 겹치지 않게, 공간은 유지한다. */
.wz-dpage.opening .wz-meta { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
/* 표지가 반쯤 열려 첫 페이지가 드러나는 순간부터 리더가 겹쳐 떠오른다(표지는 그 아래서 마저 열린다) */
.wz-reader { animation: wzReaderIn .55s cubic-bezier(.3, 0, .2, 1) both; }
/* 유료: 다른 페이지로 넘어가므로 같은 타이밍에 어둡게 덮은 뒤 이동한다 */
.wz-pagefade { position: fixed; inset: 0; z-index: 2300; background: #0b0a0d; pointer-events: none; animation: wzReaderIn .45s cubic-bezier(.3, 0, .2, 1) both; }
.wz-pagefade.out { animation: none; opacity: 0; transition: opacity .45s ease; }
@keyframes wzReaderIn { from { opacity: 0; } to { opacity: 1; } }
.wz-f-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; -webkit-user-drag: none; }
.wz-f-front img, .wz-cover img { opacity: 0; transition: opacity .16s ease; }
.cover-ready .wz-f-front img, .cover-ready .wz-cover img { opacity: 1; }
.cover-ready .wz-cover-fallback { visibility: hidden; }
.wz-f-front .wz-plain2 { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 8% 9%; color: var(--ct); }
.wz-f-front .wz-plain2 b { font-size: calc(var(--W) * .07); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; word-break: keep-all; }
.wz-f-front .wz-plain2 span { font-size: 10px; letter-spacing: .22em; opacity: .55; text-transform: uppercase; margin-top: 8px; }
.wz-f-front::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .02) 2.5%, rgba(255, 255, 255, .14) 4%, rgba(255, 255, 255, 0) 7%),
    linear-gradient(118deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .16) 100%); }
/* 양장: 책등에서 조금 떨어진 곳에 판지가 접히는 경첩 홈이 세로로 파여 있고, 판지 가장자리는 살짝 둥글게 빛을 받는다 */
.cloth .wz-f-front::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22) 0, rgba(0, 0, 0, .04) 2%, rgba(255, 255, 255, .05) 3.4%, rgba(255, 255, 255, 0) 4.8%,
      rgba(0, 0, 0, 0) 5.4%, rgba(0, 0, 0, .16) 6.5%, rgba(0, 0, 0, .05) 7.4%, rgba(255, 255, 255, .06) 8.2%, rgba(255, 255, 255, 0) 10.5%),
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, 0) 1.4%),
    linear-gradient(0deg, rgba(0, 0, 0, .12) 0, rgba(0, 0, 0, 0) 1.6%),
    linear-gradient(270deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 1.8%),
    linear-gradient(118deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .12) 100%); }
.cloth .wz-f-spine::after { background: linear-gradient(90deg, rgba(0, 0, 0, .2), rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .02) 50%, rgba(0, 0, 0, .08) 78%, rgba(0, 0, 0, .24)); }
.wz-stage3d.is-link { cursor: pointer; }
.wz-stage3d.is-link:focus-visible { outline: 2px solid #c9a227; outline-offset: 6px; border-radius: 6px; }
.wz-f-back { inset: 0; transform: translateZ(calc(var(--T) / -2)) rotateY(180deg); background: var(--c); }
.wz-f-spine { left: 0; top: 0; width: var(--T); height: var(--H); transform-origin: 0 50%; transform: translateZ(calc(var(--T) / -2)) rotateY(-90deg); background: var(--c);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0 12px; color: var(--ct); }
.wz-f-spine::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .02) 40%, rgba(0, 0, 0, .3)); }
.wz-f-spine .wz-sp-pub, .wz-f-spine .wz-sp-title { writing-mode: vertical-rl; text-orientation: sideways; white-space: nowrap; }
.wz-f-spine .wz-sp-pub { font-size: clamp(8px, calc(var(--T) * .17), 11px); letter-spacing: .04em; opacity: .85; font-style: italic; }
.wz-f-spine .wz-sp-title { font-size: clamp(9px, calc(var(--T) * .22), 15px); font-weight: 600; flex: 1; display: flex; align-items: center; margin: 12px 0; overflow: hidden; text-overflow: ellipsis; }
.wz-f-spine .wz-sp-mark { width: calc(var(--T) * .32); height: calc(var(--T) * .32); background: currentColor; -webkit-mask: var(--wz-mark) center / contain no-repeat; mask: var(--wz-mark) center / contain no-repeat; opacity: .8; }
.wz-f-fore { right: 0; top: var(--ov); width: calc(var(--T) - var(--ov) * 2); height: calc(var(--H) - var(--ov) * 2); transform-origin: 100% 50%; transform: translateZ(calc(var(--T) / -2 + var(--ov))) rotateY(90deg); background: var(--wz-pages); --pg-dir: to bottom; }
.wz-f-top { left: 0; top: var(--ov); width: calc(var(--W) - var(--ov)); height: calc(var(--T) - var(--ov) * 2); transform-origin: 50% 0; transform: translateZ(calc(var(--T) / -2 + var(--ov))) rotateX(90deg); background: var(--wz-pages); --pg-dir: to bottom; }
.wz-f-bottom { left: 0; bottom: var(--ov); width: calc(var(--W) - var(--ov)); height: calc(var(--T) - var(--ov) * 2); transform-origin: 50% 100%; transform: translateZ(calc(var(--T) / -2 + var(--ov))) rotateX(-90deg); background: var(--wz-pages); --pg-dir: to bottom; }
.wz-f-fore::after, .wz-f-top::after, .wz-f-bottom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .02) 30%, rgba(0, 0, 0, .3)); }

/* 소개 */
.wz-meta { position: relative; max-width: 480px; }
.wz-meta .wz-kind { display: inline-block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--wz-fg) 45%, transparent); margin-bottom: 18px; }
.wz-meta h2 { margin: 0 0 6px; font-size: 30px; font-weight: var(--fw-heading); letter-spacing: 0; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
.wz-book-info, .wz-access-note { margin: 12px 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.wz-price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wz-owned { padding: 2px 6px; border: 1px solid currentColor; border-radius: 3px; font-size: 12px; line-height: 1.4; font-weight: 600; }
.wz-meta .wz-by { margin: 0 0 22px; font-size: 14px; font-style: italic; color: color-mix(in srgb, var(--wz-fg) 74%, transparent); }
.wz-meta .wz-rule { width: 44px; height: 1px; background: color-mix(in srgb, var(--wz-fg) 50%, transparent); margin: 0 0 22px; }
/* 소개글: 폰은 3줄, PC 는 화면 높이에 따라 9~14줄. 넘치면 "더 보기" 로 펼친다 */
.wz-desc { --lines: 9; margin: 0; font-size: 14.5px; line-height: 1.75; color: color-mix(in srgb, var(--wz-fg) 82%, transparent); word-break: keep-all; white-space: pre-line;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines); overflow: hidden; }
.wz-desc.is-open { -webkit-line-clamp: unset; display: block; }
@media (min-height: 900px) { .wz-desc { --lines: 14; } }
.wz-more { display: none; margin: 8px 0 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.wz-more.show { display: inline-block; }
.wz-action-area { display: grid; margin-top: 28px; }
.wz-acts { display: grid; grid-area: 1 / 1; }
.wz-act { display: grid; grid-template-columns: 1fr 44px; border: 1px solid color-mix(in srgb, var(--wz-fg) 55%, transparent); margin-top: -1px; color: inherit; text-decoration: none;
  font-size: 14px; font-weight: 600; background: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.wz-act span { padding: 12px 14px; min-width: 0; overflow-wrap: anywhere; }
.wz-act span b { font-weight: 500; margin-left: 8px; opacity: .8; }
.wz-act i { font-style: normal; display: grid; place-items: center; border-left: 1px solid color-mix(in srgb, var(--wz-fg) 55%, transparent); font-size: 13px; }
.wz-act:hover { background: color-mix(in srgb, var(--wz-fg) 8%, transparent); }
.wz-act:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; }
.wz-act[hidden] { display: none; }
.wz-side-acts { display: flex; gap: 8px; margin-top: 14px; }
.wz-side-act { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--wz-fg) 35%, transparent); background: none; color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.wz-side-act:hover { background: color-mix(in srgb, var(--wz-fg) 8%, transparent); }
.wz-side-act.is-on { background: var(--wz-fg); color: var(--c); border-color: var(--wz-fg); }

@media (max-width: 760px) {
  .wz-intro { padding: 28px 20px 24px; }
  .wz-dpage { --H: clamp(210px, 64vw, 325px); padding-top: 56px; }
  .wz-page-in { grid-template-columns: 1fr; gap: 26px; }
  .wz-stage3d { min-height: calc(var(--H) + 30px); }
  .wz-meta { max-width: none; }
  .wz-meta h2 { font-size: 22px; }
  .wz-desc { --lines: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .wz-veil { display: none; }
  .wz-row .wz-book, .wz-row .wz-book::after, .wz-sbook, .wz-sshadow, .wz-mark, .wz-mood, .wz-stage, .wz-detail, .wz-foil, .wz-tilt { transition-duration: .01ms !important; }
}

/* ── 책 읽기(flipbook 리더, webzine-reader.js) ── */
.wz-reader { position: fixed; inset: 0; z-index: 2200; background: #0b0a0d; display: flex; flex-direction: column; }
.wz-reader.is-preparing { visibility: hidden; pointer-events: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .wz-f-front img, .wz-cover img { transition: none; } }
/* 유료 미리보기의 구매 영역(ebook-read.html 과 같은 모양). 본문을 가리지 않는 고정 높이 */
.wz-reader-cta-wrap { order: 2; flex: 0 0 auto; height: calc(104px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.wz-reader:has(.wz-reader-cta-wrap) .wz-reader-stage { min-height: 0; }
.wz-reader-cta-note { margin: 0; font-size: 13px; line-height: 20px; font-weight: 600; color: #fff; }
.wz-reader-cta { font: inherit; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0; width: min(100%, 340px); min-height: 44px;
  padding: 11px 16px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .5); background: transparent; color: #fff; cursor: pointer; }
.wz-reader.is-preview-end .wz-reader-cta { background: var(--accent, #c9a227); color: #111; border-color: var(--accent, #c9a227); }
.wz-reader-cta:hover { border-color: var(--accent, #c9a227); }
.wz-reader-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wz-reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.wz-reader-title { font-size: 14px; font-weight: var(--fw-heading); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-reader-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.wz-reader-pageno { font-size: 12px; opacity: .7; min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.wz-reader-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.wz-reader-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.wz-reader-stage { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 16px; touch-action: none; }
.wz-reader-loading, .wz-reader-error { position: absolute; color: rgba(255, 255, 255, .72); font-size: 14px; text-align: center; }
.wz-reader-error a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wz-reader-zoom { transform-origin: center center; will-change: transform; }
.wz-reader.is-zoomed .wz-reader-stage { cursor: grab; }
.wz-reader-book { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6)); }
.wz-reader-book .wz-page { background: #fff; overflow: hidden; }
.wz-reader-book .wz-page canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 600px) {
  .wz-reader-title { display: none; }
  .wz-reader-bar { padding: 10px 12px; }
  .wz-reader-tools { gap: 6px; }
  .wz-reader-btn { width: 34px; height: 34px; font-size: 17px; }
  .wz-reader-pageno { min-width: 50px; }
}

/* nav-account 메뉴 / 모바일 nav 색상 (웹진 한정, 다크 톤 강제) */
body.webzine-page .nav-account-menu { background: #1a1a1a; border-color: #303030; color: #f0f0f0; }
body.webzine-page .nav-account-menu a, body.webzine-page .nav-account-menu button { color: #f0f0f0; }
body.webzine-page .nav-account-menu a:hover, body.webzine-page .nav-account-menu button:hover { background: rgba(255, 255, 255, .08); }
body.webzine-page .mobile-nav { background: #0e0c10; border-bottom-color: #303030; }
body.webzine-page .mobile-nav a { color: #f0f0f0; border-bottom-color: #1f1d24; }