/* 책장 넘김 보기 — js/spread.js 가 body에 .sp-on 을 붙인 넓은 화면(1100px 이상)에서만 적용된다.
   모든 규칙이 body.sp-on 아래에 있으므로 휴대전화·태블릿의 위아래 스크롤 감상에는 영향이 없다. */
body.sp-on{overflow:hidden;height:100vh;height:100dvh;background:var(--wall)}
body.sp-on .sp-hide{display:none!important}

/* 오른쪽 쪽: 장면 하나가 한 쪽. 긴 글은 이 쪽 안에서 위아래로 읽는다 */
body.sp-on #book{position:fixed;top:var(--sp-top,44px);bottom:64px;left:46%;right:0;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);outline:none;scroll-behavior:auto}
body.sp-on:not([data-sp-page="4"]) #book > section{min-height:100%}
body.sp-on .sec > .in{max-width:38rem;padding:60px clamp(32px,4.2vw,72px) 56px}
body.sp-on .next-wrap{display:none}
body.sp-on #s5 .in{padding-top:36px;padding-bottom:20px}
body.sp-on #s5 .sentence{font-size:clamp(20px,1.9vw,26px)}
body.sp-on #book.sp-turn{animation:sp-turn .26s ease-out}
@keyframes sp-turn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){body.sp-on #book.sp-turn{animation:none}}

/* 첫 쪽(바라보다): 그림은 왼쪽 쪽에 있으므로 오른쪽에는 제목과 설명만 둔다 */
body.sp-on #s1 .frame,body.sp-on #s1 .zoom-hint{display:none}
body.sp-on #s1 .in{text-align:left;padding-top:72px}
body.sp-on #s1 .cover-series,body.sp-on #s1 h1,body.sp-on #s1 .passage,body.sp-on #s1 .prompt{text-align:left}
body.sp-on #s1 h1{font-size:clamp(30px,2.8vw,42px)}

/* 왼쪽 쪽: 미술작품 */
.sp-art{display:none}
body.sp-on .sp-art{position:fixed;z-index:5;left:0;top:var(--sp-top,44px);bottom:0;width:46%;background:var(--wall);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 40px 24px;color:var(--wall-ink)}
.sp-frame{display:block;padding:0;margin:0;border:0;background:none;cursor:zoom-in;max-width:100%;min-height:0}
.sp-frame img{display:block;max-width:100%;max-height:calc(100vh - var(--sp-top,44px) - 150px);max-height:calc(100dvh - var(--sp-top,44px) - 150px);width:auto;height:auto;box-shadow:0 14px 50px rgba(0,0,0,.6)}
.sp-cap{text-align:center;max-width:34rem;line-height:1.5}
.sp-artist{margin:0;color:#e3c88a;font-size:15px;letter-spacing:.06em}
.sp-work{margin:2px 0 0;font-size:17px;color:var(--wall-ink)}
.sp-hint{margin:6px 0 0;font-size:13px;color:var(--wall-soft)}
body.sp-on[data-sp-page="0"] .sp-artist,body.sp-on[data-sp-page="0"] .sp-work{display:none}

/* 아래 막대: 이전 · 쪽 표시 · 다음 */
.sp-nav{display:none}
body.sp-on .sp-nav{position:fixed;z-index:6;left:46%;right:0;bottom:0;height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 clamp(20px,3vw,40px);background:var(--paper2);border-top:1px solid rgba(31,26,21,.18)}
.sp-btn{font:inherit;font-size:16px;min-height:44px;min-width:96px;padding:0 18px;border:1px solid rgba(109,36,49,.5);background:transparent;color:var(--wine);border-radius:22px;cursor:pointer}
.sp-btn:hover:not(:disabled){background:var(--wine);color:#fff}
.sp-btn:disabled{opacity:.35;cursor:default}
.sp-mid{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0}
.sp-dots{display:flex;gap:2px}
.sp-dot{position:relative;width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer}
.sp-dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1px solid var(--wine);background:transparent}
.sp-dot[aria-current="page"]::before{background:var(--wine)}
.sp-status{margin:0;font-size:13px;line-height:1.3;color:var(--ink2);white-space:nowrap}

@media print{body.sp-on{overflow:visible;height:auto}.sp-art,.sp-nav{display:none!important}}