:root{
  --toolbar-h: 56px;
  --bg: #f7f7f8;
  --panel: #fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; flex-direction:column; min-height:100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans KR", sans-serif;
  background:var(--bg);
}
.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 12px; background:var(--panel);
  border-bottom:1px solid #e5e7eb;
}
.toolbar .left,.toolbar .center,.toolbar .right{display:flex; align-items:center; gap:8px}
.page-controls input{width:64px; padding:4px 6px}
button{border:1px solid #d1d5db; background:#fff; padding:6px 8px; border-radius:6px; cursor:pointer}
button:disabled{opacity:.5; cursor:not-allowed}
button:hover:not(:disabled){border-color:#2563eb; color:#2563eb}
#viewer-container{
  flex:1; display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto;
}
canvas{max-width:100%; height:auto; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.08)}
@media (max-width:640px){
  .toolbar{flex-wrap:wrap}
  .center{order:3; width:100%; justify-content:space-between}
  .left{order:1} .right{order:2}
}