.book-reader { background: #eeede8; padding: 24px; border-radius: 6px; }
.book-reader__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 680px; margin: 0 auto 20px; }
.book-reader__button { min-height: 44px; }
.book-reader__jump { display: flex; align-items: center; gap: 8px; margin: 0; }
.book-reader__jump select { width: auto; max-width: 180px; min-height: 44px; }
.book-reader__spread { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 680px; margin: auto; box-shadow: 0 3px 18px #302e2912; }
.book-reader__spread { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; cursor: grab; position: relative; isolation: isolate; }
.book-reader--dragging .book-reader__spread { cursor: grabbing; transition: none; }
.book-reader__paper { box-sizing: border-box; min-width: 0; min-height: 760px; padding: var(--book-reader-margin-top, 20mm) var(--book-reader-margin-outer, 15mm) var(--book-reader-margin-bottom, 24mm) var(--book-reader-margin-inner, 24mm); display: flex; flex-direction: column; color: #302e29; background: #fffdf7; }
.book-reader--spread .book-reader__spread { max-width: 1200px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.book-reader--spread .book-reader__toolbar { max-width: 1200px; }
.book-reader--spread .book-reader__paper--left { padding-left: var(--book-reader-margin-outer, 15mm); padding-right: var(--book-reader-margin-inner, 24mm); background: linear-gradient(to left, #302e290c, transparent 24px), #fffdf7; }
.book-reader--spread .book-reader__paper--right { background: linear-gradient(to right, #302e2910, transparent 24px), #fffdf7; border-left: 1px solid #d8d1c5; }
.book-reader__paper--blank .book-reader__heading { border-color: transparent; }
.book-reader__heading { min-height: 24px; margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid #e8e3d8; color: #847d70; font-size: 12px; overflow-wrap: anywhere; }
.book-reader__body { flex: 1; font-family: Georgia, 'Noto Serif KR', 'Batang', serif; font-size: var(--book-reader-font-size, 15px); line-height: var(--book-reader-line-height, 1.7); overflow-wrap: anywhere; }
.book-reader__body p { white-space: pre-wrap; margin: 0 0 var(--book-reader-paragraph-gap, 0px); text-indent: var(--book-reader-indent, 1em); }
.book-reader__body p:empty { min-height: 1lh; }
.book-reader__text { display: flow-root; transform-origin: top left; }
.book-reader__measure { position: absolute !important; top: 0; left: 0; min-height: 0 !important; aspect-ratio: auto !important; visibility: hidden; pointer-events: none; }
.book-reader__folio { text-align: center; padding-top: 32px; color: #847d70; font: 13px Georgia, serif; }
.book-reader__position { text-align: center; margin: 16px 0 0; font-size: 12px; color: #666158; }
.book-reader--sized .book-reader__paper {
    position: relative;
    min-height: 0;
    aspect-ratio: var(--book-reader-page-ratio);
    padding: calc(var(--book-reader-margin-top, 20mm) * var(--book-reader-scale)) calc(var(--book-reader-margin-outer, 15mm) * var(--book-reader-scale)) calc(var(--book-reader-margin-bottom, 24mm) * var(--book-reader-scale)) calc(var(--book-reader-margin-inner, 24mm) * var(--book-reader-scale));
}
.book-reader--sized.book-reader--spread .book-reader__paper--left {
    padding-left: calc(var(--book-reader-margin-outer, 15mm) * var(--book-reader-scale));
    padding-right: calc(var(--book-reader-margin-inner, 24mm) * var(--book-reader-scale));
}
.book-reader--sized .book-reader__body {
    min-height: 0;
    overflow: clip;
    font-size: calc(var(--book-reader-font-size, 15px) * var(--book-reader-scale));
}
.book-reader--sized .book-reader__body p { margin-bottom: calc(var(--book-reader-paragraph-gap, 0px) * var(--book-reader-scale)); }
.book-reader--sized .book-reader__heading {
    position: absolute;
    top: calc(6mm * var(--book-reader-scale));
    left: 10%;
    right: 10%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: calc(12px * var(--book-reader-scale));
}
.book-reader--sized .book-reader__folio {
    position: absolute;
    bottom: calc(8mm * var(--book-reader-scale));
    left: 0;
    right: 0;
    padding: 0;
    font-size: calc(13px * var(--book-reader-scale));
}
.book-reader [hidden] { display: none !important; }
@media (max-width: 575px) {
    .book-reader { padding: 12px; }
    .book-reader__paper { min-height: 520px; padding: 28px 22px 22px; }
    .book-reader__toolbar { gap: 6px; }
    .book-reader__jump { gap: 4px; font-size: 12px; }
    .book-reader__jump select { max-width: 120px; }
}

.book-reader__button, .book-reader__jump select { font: inherit; color: #504c43; background: #fffdf7; border: 1px solid #c8c3b7; border-radius: 4px; padding: 8px 12px; }
.book-reader__button { cursor: pointer; }
.book-reader__button:hover:not(:disabled) { background: #e5e3da; }
.book-reader__button:disabled, .book-reader__jump select:disabled { opacity: .45; cursor: default; }
.book-reader__button:focus-visible, .book-reader__jump select:focus-visible { outline: 2px solid #526b4e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .book-reader__spread { transition: none; }
}

.book-reader__turn-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 1800px; overflow: clip; }
.book-reader__turn-underlay { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.book-reader--spread .book-reader__turn-underlay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.book-reader__turn-rest { position: absolute !important; top: 0; width: 50%; height: 100%; min-height: 0; }
.book-reader__turn-leaf { position: absolute; inset: 0; width: 100%; transform-style: preserve-3d; will-change: transform; }
.book-reader--spread .book-reader__turn-leaf { width: 50%; }
.book-reader__turn-leaf--next { left: auto; right: 0; transform-origin: left center; }
.book-reader__turn-leaf--previous { right: auto; left: 0; transform-origin: right center; }
.book-reader__turn-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book-reader__turn-face--back { transform: rotateY(180deg); }
.book-reader__turn-face > .book-reader__paper { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; }
.book-reader__turn-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #17140c, #17140c00 65%); opacity: var(--book-reader-turn-shade, 0); }
.book-reader__turn-face--back::after { background: linear-gradient(270deg, #17140c, #17140c00 65%); }