/* 책장 넘기는 PDF 뷰어 */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#2b3d38 0%,#16231f 70%);color:#e4ece9;font-family:Pretendard,system-ui,sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font-family:inherit}

.vbar{flex-shrink:0;height:60px;display:flex;align-items:center;gap:16px;padding:0 clamp(12px,3vw,28px);background:rgba(10,20,17,.55);border-bottom:1px solid rgba(255,255,255,.08)}
.vbrand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:700;font-size:15px;flex-shrink:0}
.vbrand img{display:block;background:#fff;border-radius:8px;padding:2px}
.vtitle{flex:1;min-width:0;margin:0;font-size:15px;font-weight:600;color:#c4d0cc;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vactions{display:flex;gap:8px;flex-shrink:0}
.vbtn{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.vbtn:hover{background:rgba(255,255,255,.1);color:#fff;text-decoration:none}

.vstage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px}
.vbook{display:none}
.vbook.ready{display:block}
.vbook .stf__parent{filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.vsheet{background:#fff;overflow:hidden}
.vsheet img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}

.vloading{display:flex;flex-direction:column;align-items:center;gap:16px;font-size:15px;color:#c4d0cc}
.vspinner{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:#7fd3b7;animation:vspin 1s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}

.vnav{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 16px 18px}
.vnav[hidden]{display:none}
.vnav-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:3px}
.vnav-btn:hover:not(:disabled){background:rgba(255,255,255,.16)}
.vnav-btn:disabled{opacity:.3;cursor:default}
.vpage{min-width:88px;text-align:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:#fff}

@media (max-width:640px){
  .vbrand span{display:none}
  .vtitle{text-align:left;font-size:14px}
  .vbtn{padding:0 10px;font-size:13px}
  .vstage{padding:10px}
}