.guide-book { perspective: 1800px; isolation: isolate; }
.guide-paper { box-sizing: border-box; width: 100%; height: 100%; overflow-y: auto; padding: 30px 34px; background: #f7f1e3; color: #363d32; font: 400 16px/1.8 'Noto Sans KR', sans-serif; text-align: left; }
.guide-paper-brand { color: #777c6b; font-size: 10px; letter-spacing: 2px; border-bottom: 1px solid #ccc8b8; padding-bottom: 12px; }
.guide-paper h3 { font-size: 24px; font-weight: 400; line-height: 1.5; margin: 22px 0; }
.guide-paper h4 { font-size: 16px; margin: 16px 0 8px; }
.guide-paper ul { padding-left: 20px; }
.guide-paper .highlight { overflow-wrap: anywhere; }
.guide-paper .note { color: #626a59; font-size: 14px; }
.guide-paper-number { margin-top: 24px; text-align: center; color: #777c6b; font-size: 12px; }
.guide-book-face { overflow: hidden; }
/* A fixed minimum avoids the zero-height flex track in older tablet browsers. */
.guide-body.slides-mode .guide-slides { width: 100%; min-height: calc(100vh - 220px); }
@media (max-width: 700px) { .guide-paper { padding: 16px 14px; font-size: 14px; } .guide-paper h3 { font-size: 19px; } }
.guide-book-status { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: #20241fdd; color: #f4f0e8; }
.guide-book-status[hidden] { display: none; }
.guide-book-status button { min-height: 48px; padding: 12px 20px; border: 1px solid #b6bca9; color: #f4f0e8; background: #35412e; border-radius: 8px; font: inherit; cursor: pointer; }
.guide-book-leaf { position: absolute; top: 0; bottom: 0; width: calc(50% - 2px); z-index: 5; transform-style: preserve-3d; pointer-events: none; }
.guide-book-leaf.forward { left: calc(50% + 2px); transform-origin: left center; animation: guide-turn-next 650ms ease-in-out forwards; }
.guide-book-leaf.backward { left: 0; transform-origin: right center; animation: guide-turn-prev 650ms ease-in-out forwards; }
.guide-book-face { position: absolute; inset: 0; backface-visibility: hidden; background: #f7f1e3; box-shadow: 0 8px 24px #0006; }
.guide-book-face.back { transform: rotateY(180deg); }
.guide-book-face img { width: 100%; height: 100%; object-fit: contain; }
.guide-book-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0003, transparent 30%, #0001); }
@keyframes guide-turn-next { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes guide-turn-prev { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
/* Text guides use a short page-opening motion as well. */
.guide-slides { perspective: 1600px; }
.guide-slide.active { transform-origin: left center; animation: guide-text-open 480ms ease-out; }
.guide-slide.active.turn-backward { transform-origin: right center; animation-name: guide-text-back; }
#guideBody { touch-action: pan-y; }
#guideBody img { -webkit-user-drag: none; user-select: none; }
#guideBody .guide-slides { user-select: none; }
@keyframes guide-text-open { from { transform: rotateY(28deg); opacity: .4; } to { transform: rotateY(0); opacity: 1; } }
@keyframes guide-text-back { from { transform: rotateY(-28deg); opacity: .4; } to { transform: rotateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guide-book-leaf, .guide-slide.active { animation: none !important; } }