/* 지면 뷰어 — standalone (direct link) and embedded in the site. Colours follow the theme tokens (--bg, --ink, --line…). */
.pv {
	--pv-bg: #e6e8ec; --pv-sheet: #fff; --pv-chrome: rgba(255, 255, 255, .86); --pv-shadow: 0 10px 40px rgba(10, 14, 22, .22);
	position: relative; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); background: var(--pv-bg); color: var(--ink);
	font-family: var(--sans); height: 100dvh; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none;
}
.pv.embed { height: min(86dvh, 980px); border: 1px solid var(--line); }
.pv:fullscreen { height: 100vh; border: 0; }

/* ── top bar ── */
.pv-top, .pv-bottom { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--pv-chrome); z-index: 5; }
.pv-top { border-bottom: 1px solid var(--line); }
.pv-bottom { border-top: 1px solid var(--line); padding: 8px 14px; }
.pv-title { flex: 1 1 0; min-width: 0; margin-right: auto; line-height: 1.2; }
.pv-title b, .pv-title small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-title b { font-size: 15px; letter-spacing: -.02em; }
.pv-title small { font-size: 12px; color: var(--sub); }
/* inside the site on a phone the site header already has the theme button */
@media (max-width: 560px) { .pv.embed .pv-title small, .pv.embed .pv-btn.pv-theme { display: none; } .pv-top { padding: 6px 6px 6px 12px; } }
.pv.embed { touch-action: pan-y; }
/* the page itself takes every finger (swipe, pinch, double tap); a vertical drag on it scrolls the site (done in paper.js) */
.pv.embed .pv-stage { touch-action: none; }
@media (max-width: 420px) { .pv-btn { width: 34px; height: 36px; } .pv-count { padding: 0 2px; font-size: 12px; } }
.pv.embed.zoomed, .pv.embed:fullscreen { touch-action: none; }
.pv-count { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--sub); padding: 0 6px; white-space: nowrap; }
.pv-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; transition: background .2s; }
.pv-btn:hover, .pv-btn[aria-pressed="true"] { background: var(--soft); }
.pv-btn svg { width: 21px; height: 21px; }
.pv-exit { display: none; }
.pv:fullscreen .pv-exit { display: inline-grid; }
.pv:fullscreen .pv-full { display: none; }

/* ── stage ── */
.pv-stage { position: relative; overflow: hidden; container-type: size; perspective: 2600px; }
.pv-book { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: center; will-change: transform; }
.pv-book.anim { transition: transform .32s var(--ease); }
.pv-sheet { position: relative; aspect-ratio: var(--pw) / var(--ph); height: calc(min(96cqh, 96cqw * var(--ph) / var(--pw)) * var(--z, 1)); background: var(--pv-sheet); box-shadow: var(--pv-shadow); flex: none; contain: layout paint; }
/* smoother motion: the moving parts live on their own GPU layer, and the blurred bars stop re-blurring while a page moves */
.pv-track, .pv-leaf { will-change: transform; backface-visibility: hidden; }
.pv-sheet img { image-rendering: auto; }
.pv-sheet img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; pointer-events: none; }
.pv-sheet.empty { visibility: hidden; }
/* pages warmed up behind the scenes: kept in the layout so they are decoded and ready, but clipped to a 2px strip (a whole faint page showed through on the empty left of the cover) */
.pv-sheet.warm { position: absolute; left: 0; top: 0; opacity: 0.01; pointer-events: none; z-index: -1; clip-path: inset(0 0 0 calc(100% - 2px)); }
.pv-sheet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .09), transparent 7%); pointer-events: none; opacity: 0; }

/* two pages side by side on a wide screen */
.pv.spread .pv-sheet { height: calc(min(96cqh, 48cqw * var(--ph) / var(--pw)) * var(--z, 1)); }
.pv.spread .pv-sheet.right::after { opacity: 1; }
.pv.spread .pv-sheet.left::after { opacity: 1; background: linear-gradient(270deg, rgba(0, 0, 0, .09), transparent 7%); }

/* single page: a track of prev / current / next that follows the finger */
.pv-track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pv-track .pv-sheet { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.pv-track .pv-sheet.prev { left: -50%; }
.pv-track .pv-sheet.next { left: 150%; }
.pv-track.anim { transition: transform .42s var(--ease); }

/* turning leaf (wide screens): front = page you see now, back = page underneath */
.pv-leaf { position: absolute; top: 50%; translate: 0 -50%; height: min(96cqh, calc(48cqw * var(--ph) / var(--pw))); aspect-ratio: var(--pw) / var(--ph); transform-style: preserve-3d; z-index: 3; pointer-events: none; }
.pv-leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--pv-sheet); overflow: hidden; }
.pv-leaf .face img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pv-leaf .back { transform: rotateY(180deg); }
.pv-leaf .face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 40%); opacity: var(--shade, 0); transition: opacity .3s; }
.pv-leaf.fwd { left: 50%; transform-origin: left center; animation: pvFlipF .62s var(--ease) forwards; }
.pv-leaf.bwd { right: 50%; transform-origin: right center; animation: pvFlipB .62s var(--ease) forwards; }
@keyframes pvFlipF { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes pvFlipB { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.pv.spread .pv-book.flipping .pv-sheet { transition: none; }

/* edge arrows (wide screens) */
.pv-arrow { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--pv-chrome); color: var(--ink); box-shadow: 0 2px 12px rgba(0, 0, 0, .18); display: none; place-items: center; cursor: pointer; z-index: 4; opacity: .9; transition: opacity .2s, scale .2s; }
.pv-arrow:hover { scale: 1.06; opacity: 1; }
.pv-arrow:disabled { opacity: .25; cursor: default; }
.pv-arrow.l { left: 14px; } .pv-arrow.r { right: 14px; }
.pv-arrow svg { width: 24px; height: 24px; }
@media (hover: hover) and (min-width: 700px) { .pv-arrow { display: grid; } }

/* bottom: slider */
.pv-slider { flex: 1; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 2px; background: var(--line); outline: 0; }
.pv-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 3px solid var(--bg); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: pointer; }
.pv-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 3px solid var(--bg); cursor: pointer; }
.pv-hint { font-size: 12px; color: var(--mute); white-space: nowrap; }
@media (max-width: 520px) { .pv-hint { display: none; } }

/* thumbnails drawer */
.pv-thumbs { position: absolute; inset: 0; z-index: 6; background: var(--pv-chrome); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: auto; padding: 14px; display: none; touch-action: pan-y; }
.pv-thumbs.open { display: block; }
.pv-thumbs .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 10px; max-width: 1100px; margin: 0 auto; }
.pv-thumbs button { border: 0; padding: 0; background: none; color: var(--sub); font-size: 12px; cursor: pointer; display: grid; gap: 5px; }
.pv-thumbs img { width: 100%; aspect-ratio: var(--pw) / var(--ph); object-fit: cover; background: var(--pv-sheet); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s, translate .2s; }
.pv-thumbs button:hover img { translate: 0 -2px; }
.pv-thumbs button.on img { outline-color: var(--brand); }
.pv-thumbs button.on { color: var(--brand); font-weight: 700; }

/* toast + loading */
.pv-toast { position: absolute; left: 50%; bottom: 72px; translate: -50% 0; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; z-index: 7; }
.pv-toast.show { opacity: 1; translate: -50% -6px; }
.pv-sheet.loading { background: var(--pv-sheet) linear-gradient(110deg, transparent 30%, rgba(127, 134, 146, .15) 50%, transparent 70%) 0 0 / 200% 100%; animation: pvShimmer 1.2s linear infinite; }
@keyframes pvShimmer { to { background-position: -200% 0; } }

.pv.zoomed .pv-arrow, .pv.zoomed .pv-sheet::after { opacity: 0; }
.pv.zoomed .pv-track .prev, .pv.zoomed .pv-track .next { visibility: hidden; }
.pv.zoomed .pv-book { cursor: grab; }
.pv.zoomed.dragging .pv-book { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
	.pv-leaf { animation-duration: .01s !important; }
	.pv-track.anim { transition: none; }
	.pv-sheet.loading { animation: none; }
}

/* ── page picker: big page box, table of contents, every page ── */
.pv-pick { max-width: 1100px; margin: 0 auto; }
.pv-goto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 22px; }
.pv-goto label { display: flex; align-items: center; gap: 12px; }
.pv-goto label span { font-size: 15px; font-weight: 700; }
.pv-goto input { width: 150px; height: 64px; font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); outline: 0; -moz-appearance: textfield; }
.pv-goto input::-webkit-outer-spin-button, .pv-goto input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pv-goto input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 20%, transparent); }
.pv-goto button { height: 64px; padding: 0 26px; border: 0; border-radius: 14px; background: var(--brand); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; }
.pv-goto-max { color: var(--sub); font-size: 15px; }
.pv-h { font-size: 14px; color: var(--sub); margin: 18px 0 10px; letter-spacing: .04em; }
.pv-toc { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 20px; }
.pv-toc button { width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; text-align: left; border: 0; border-bottom: 1px dotted var(--line); background: none; padding: 9px 4px; color: var(--ink); cursor: pointer; border-radius: 6px; }
.pv-toc button:hover { background: var(--soft); }
.pv-toc button b { font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.pv-toc button small { grid-column: 1; color: var(--sub); font-size: 12px; }
.pv-toc button i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-variant-numeric: tabular-nums; color: var(--sub); font-size: 14px; }
.pv-toc button.on { color: var(--brand); } .pv-toc button.on i { color: var(--brand); font-weight: 700; }
.pv-toc .k-ad button b { font-weight: 400; color: var(--sub); }

/* ── bookshelf ── */
.pv-shelfbox { position: absolute; inset: 0; z-index: 6; background: var(--pv-chrome); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: auto; padding: 18px 14px 60px; display: none; touch-action: pan-y; }
.pv-shelfbox.open { display: block; }
.pv-shelf-close { position: sticky; bottom: 0; display: block; margin: 20px auto 0; padding: 10px 26px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 700; cursor: pointer; }
.shelf { --wood: #b98556; --wood-dark: #8d6038; --wood-edge: #6e4827; max-width: 980px; margin: 0 auto; }
.shelf-row { position: relative; display: flex; align-items: flex-end; gap: 4.5%; padding: 36px 5% 0; min-height: 190px; }
.shelf-row .plank { position: absolute; left: 0; right: 0; bottom: -14px; height: 16px; background: linear-gradient(var(--wood), var(--wood-dark)); border-bottom: 5px solid var(--wood-edge); border-radius: 2px; box-shadow: 0 16px 24px -10px rgba(0, 0, 0, .45); }
.shelf-row .plank::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255, 255, 255, .06) 30px 32px); }
.shelf-row + .shelf-row { margin-top: 34px; }
.book { position: relative; width: 13%; min-width: 72px; flex: none; text-decoration: none; color: var(--ink); transform-origin: 50% 100%; transition: translate .35s var(--ease), rotate .35s var(--ease), box-shadow .35s; }
.book img, .book .blank { display: block; width: 100%; aspect-ratio: 612 / 858; object-fit: cover; border-radius: 1px 4px 4px 1px; box-shadow: -3px 0 0 -1px rgba(255, 255, 255, .5) inset, 0 10px 18px -6px rgba(0, 0, 0, .5), 2px 2px 0 rgba(0, 0, 0, .12); background: #fff; }
.book .blank { display: grid; place-content: center; text-align: center; gap: 4px; background: linear-gradient(135deg, #f7f3ea, #e9e2d3); color: #7a6f5c; border: 1px solid #d9d0bd; }
.book .blank b { font-size: 15px; } .book .blank i { font-style: normal; font-size: 11px; } .book .blank em { font-style: normal; font-size: 10px; margin-top: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .06); }
.book .cap { position: absolute; left: 0; right: 0; top: calc(100% + 24px); text-align: center; font-size: 12px; color: var(--sub); line-height: 1.3; }
.book .cap b { display: block; color: var(--ink); font-size: 13px; }
.book:not(.soon):hover { translate: 0 -8px; rotate: -2deg; }
.book.cur img { outline: 3px solid var(--brand); outline-offset: 3px; }
.book.soon { opacity: .85; }
.shelf .plant { position: absolute; right: 2%; bottom: -2px; width: 11%; min-width: 64px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.shelf-row:first-child { padding-right: 16%; }
/* phones: the shelf keeps its proportions and slides sideways */
@media (max-width: 700px) { .shelf { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 10px; scrollbar-width: thin; } .shelf-row { min-width: 640px; min-height: 160px; } .book .cap { font-size: 11px; } }

/* ── zoom: while the sharper file is on its way the page breathes a soft glow instead of blinking ── */
.pv-sheet.sharpening::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .22) 45%, rgba(143, 176, 255, .18) 55%, transparent 80%) 0 0 / 250% 100%; animation: pvGlow 1.1s ease-in-out infinite; mix-blend-mode: screen; }
.pv-sheet.sharpening { box-shadow: var(--pv-shadow), 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent), 0 0 28px color-mix(in srgb, var(--brand) 25%, transparent); transition: box-shadow .4s; }
@keyframes pvGlow { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@media (prefers-reduced-motion: reduce) { .pv-sheet.sharpening::before { animation: none; } }

/* no browser swipe-navigation (back/forward) while the viewer is on the page */
html:has(.pv), html:has(.pv) body { overscroll-behavior-x: none; }

/* phone turned sideways: the embedded viewer takes the whole screen height under the site header, slimmer bars */
@media (orientation: landscape) and (max-height: 520px) {
	.pv.embed { height: calc(100dvh - 62px); }
	.pv-top { padding: 3px 8px; }
	.pv-bottom { padding: 3px 14px; }
	.pv-title small, .pv-hint { display: none; }
	.pv-btn { width: 34px; height: 32px; }
}