/* 책장 넘기기: 한 화면에 한 쪽, 아래에 ◀ 쪽수 ▶ */
.home{font-family:var(--f-title);color:var(--sky);text-decoration:none;font-size:18px}
.listen{background:var(--paper);border:2px solid var(--sun);border-radius:16px;padding:12px 16px;display:grid;gap:6px;margin:0 0 16px}
.listen-t{margin:0;font-family:var(--f-title);font-size:19px;color:var(--ink)}
.listen audio{width:100%}
.listen-s{margin:0 !important;font-size:14px;color:var(--ink-soft)}

body.pager{overflow-x:hidden}
body.pager .book{padding-bottom:110px;perspective:1600px}
body.pager .book > .cover, body.pager .book > .toc, body.pager .book > .page, body.pager .book > .end{display:none}
body.pager .book > .on{display:block;transform-origin:left center;min-height:calc(100vh - 170px)}
body.pager .book > .end.on{display:grid;place-items:center;font-size:24px}
body.pager .book > .on.fwd{animation:turnFwd .45s ease-out}
body.pager .book > .on.back{animation:turnBack .45s ease-out;transform-origin:right center}
@keyframes turnFwd{from{transform:rotateY(-70deg);opacity:.2}to{transform:none;opacity:1}}
@keyframes turnBack{from{transform:rotateY(70deg);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){body.pager .book > .on.fwd, body.pager .book > .on.back{animation:none}}

.pbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:var(--page);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(0,0,0,.06)}
.pbar button{font:inherit;font-family:var(--f-title);font-size:20px;border:0;border-radius:999px;padding:10px 20px;background:var(--sky);color:#fff;cursor:pointer;min-width:90px}
.pbar button:disabled{opacity:.35;cursor:default}
.pbar button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.pbar .pn{font-family:var(--f-title);font-size:19px;min-width:72px;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
.pbar .play{background:var(--sun);min-width:52px;padding:10px 14px}
.pbar .mode{background:transparent;color:var(--sky);font-size:15px;min-width:0;padding:6px 8px;text-decoration:underline}
@media (max-width:420px){.pbar button{min-width:64px;padding:10px 14px;font-size:18px}.pbar .mode{display:none}}

.hint{margin:18px 0 0;font-family:var(--f-title);font-size:18px;color:var(--sky);line-height:1.6}