/* no-slop-ui: solid palette (Void Space), 1px borders, no gradients/blur/decoration */
:root{
  --bg:#0d1117;
  --surface:#161b22;
  --border:#30363d;
  --border-strong:#484f58;
  --hover:#21262d;
  --text:#c9d1d9;
  --text-dim:#8b949e;
  --accent:#58a6ff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Noto Sans KR",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;flex-direction:column;min-height:100vh;
}

/* header */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border);
}
.brand-title{font-size:15px;font-weight:600;color:var(--text);line-height:1.2}

.controls{display:flex;align-items:center;gap:8px}
.ctrl{
  width:36px;height:36px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);border-radius:6px;font-size:17px;line-height:1;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease;
}
.ctrl:hover{background:var(--hover);border-color:var(--border-strong)}
.ctrl:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.page-info{min-width:60px;text-align:center;font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums}

/* reading stage */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 12px}
.book-wrap{position:relative;width:min(940px,94vw);height:min(68vh,600px)}
.book{width:100%;height:100%}
.book img{display:block;width:100%;height:100%}
.hint{margin-top:16px;font-size:12px;color:var(--text-dim)}

/* loader — solid overlay, no blur */
.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--bg)}
.loader.hidden{display:none}
.loader p{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums}
.spinner{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);
  border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{width:200px;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .15s ease}

@media (max-width:560px){
  .stage{padding:16px 12px 12px}
}