*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:"Malgun Gothic","Noto Sans KR",sans-serif;background:#e9e4da;color:#29231d;display:grid;grid-template-rows:auto 1fr auto}
header{min-height:56px;background:#fffdf8;border-bottom:1px solid #d8ccbc;display:flex;align-items:center;justify-content:space-between;padding:7px 12px;gap:10px}
header strong{font-size:20px;white-space:nowrap}nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
button,.counter{border:1px solid #c5b7a4;background:#fff;border-radius:8px;padding:7px 10px;font:inherit}button{cursor:pointer}button:hover{background:#f5eee4}
.counter{background:#f7f1e8}#page{width:55px;border:0;outline:0;background:transparent;text-align:center;font-weight:700}
main{min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:6px;overflow:auto}
#spread{display:flex;align-items:center;justify-content:center;gap:2px;transform-origin:center;transition:transform .12s ease}
.sheet{position:relative;background:#fff;box-shadow:0 7px 22px #0003;cursor:pointer;overflow:hidden}
.sheet canvas{display:block;width:100%;height:100%}.pageno{position:absolute;bottom:5px;right:9px;font-size:11px;color:#777;background:#ffffffbb;padding:2px 4px;border-radius:4px}
#left .pageno{right:auto;left:9px}
#loading{position:absolute;inset:0;z-index:5;background:#e9e4da;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}
.spin{width:38px;height:38px;border:4px solid #cbbfab;border-top-color:#66513b;border-radius:50%;animation:s .8s linear infinite}@keyframes s{to{transform:rotate(360deg)}}
footer{background:#fffdf8;border-top:1px solid #d8ccbc;text-align:center;padding:4px;font-size:12px;color:#6d6255}
@media(max-width:720px){body{grid-template-rows:auto 1fr}header{padding:5px 6px;align-items:flex-start}header strong{font-size:16px;padding-top:7px}button,.counter{padding:6px;font-size:12px}footer{display:none}#left{display:none}main{padding:2px}}