:root{
  --navy:#0B2D5B;--navy-deep:#061A36;--coral:#C8431C;--peach:#F2B49B;--cream:#F3EEE6;
  --ink:#E8EDF5;--muted:#9FB0C8;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(ellipse at 50% 30%,#123B70 0%,var(--navy-deep) 70%) fixed;
  color:var(--ink);
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  display:flex;flex-direction:column;min-height:100dvh;overflow:hidden;
}
a{color:inherit}

/* 상단 바 */
.bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(6,26,54,.75);border-bottom:1px solid rgba(255,255,255,.08)}
.bar .back{text-decoration:none;font-size:14px;color:var(--muted);white-space:nowrap}
.bar .back:hover{color:#fff}
.bar .title{flex:1;min-width:0;text-align:center}
.bar .title small{display:block;font-size:10px;letter-spacing:2px;color:var(--peach);font-weight:700}
.bar .title b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .dl{font-size:13px;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 12px;white-space:nowrap}
.bar .dl:hover{background:#fff;color:var(--navy)}

/* 책 무대 */
.stage{flex:1;width:100%;min-width:0;display:flex;align-items:center;justify-content:center;padding:20px 16px 8px;min-height:0}
.book-wrap{width:100%;min-width:0;max-width:1400px;height:calc(100dvh - 150px);display:flex;align-items:center;justify-content:center}
.fit{margin:0 auto;max-width:100%}
.page{background:#fff;overflow:hidden}
.page img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}

/* 하단 조작부 */
.ctrl{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px 14px}
.ctrl button{
  appearance:none;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;
  height:40px;min-width:40px;padding:0 14px;border-radius:999px;font:inherit;font-size:14px;cursor:pointer
}
.ctrl button:hover{background:#fff;color:var(--navy)}
.ctrl button:disabled{opacity:.3;cursor:default;background:transparent;color:#fff}
.ctrl .arrow{font-size:20px;line-height:1;padding:0}
.ctrl #pg{min-width:84px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink)}
.hint{margin:0 0 10px;padding:0 16px;text-align:center;font-size:12px;color:var(--muted)}

@media (max-width:600px){
  .bar .title b{font-size:14px}
  .bar .dl{padding:5px 10px;font-size:12px}
  .ctrl{gap:8px}
  .ctrl #fs{display:none}
  .book-wrap{height:calc(100dvh - 160px)}
}