:root{font-family:"Inter","Noto Sans KR",system-ui,sans-serif;color:#182d28;background:#f1f3ec;color-scheme:light;--green:#12604d;--dark:#102b29}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;border:1px solid #ccdad0;border-radius:9px;background:#fff;color:#193d32;min-height:44px;padding:.55rem .85rem;font-weight:700}
button:focus-visible,#viewport:focus-visible{outline:3px solid #278e72;outline-offset:2px}
button:disabled{opacity:.42;cursor:default}
.bar{display:flex;align-items:center;justify-content:space-between;background:var(--dark);color:#fff;padding:.8rem max(1rem,calc((100% - 960px)/2));gap:.6rem}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:800;white-space:nowrap}
.mark{width:2rem;height:2rem;display:grid;place-items:center;background:#d9f39c;color:var(--dark);border-radius:8px;font-weight:900}
.bar button{background:#224740;color:#fff;border-color:#55736c;white-space:nowrap}
main{width:min(100%,960px);margin:auto;padding:0 .85rem}
.welcome{margin:clamp(2rem,9vh,6rem) auto 1rem;padding:clamp(1.5rem,6vw,4rem) 1rem;text-align:center;border:1px solid #d9e1d6;border-radius:24px;background:#fbfcf8;max-width:660px}
.welcome h1{font-size:clamp(1.65rem,6vw,2.6rem);margin:1rem 0 .6rem;letter-spacing:-.055em}
.welcome p{color:#496257;margin:0 auto 1.6rem;max-width:25rem;line-height:1.6}
.welcome button{background:var(--green);color:#fff;border:0;padding:.75rem 1.4rem}
.welcome small{display:block;color:#53665b;margin-top:1rem}
.illustration{display:flex;align-items:center;justify-content:center;height:76px;gap:5px}
.illustration i{width:21px;height:56px;display:block;background:#12604d;border-radius:4px;transform:rotate(-12deg)}
.illustration i:nth-child(2){background:#83a76e;height:65px}.illustration i:nth-child(3){background:#d6e9ab;height:50px}
.bookbar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.7rem}
.bookbar h1{font-size:clamp(.98rem,3.3vw,1.2rem);overflow-wrap:anywhere;margin:.25rem 0;min-width:0}
.actions{display:flex;gap:.25rem;flex:none}
.actions button{min-width:40px;padding:.35rem .55rem}
.format{margin:.4rem 0;color:#4a6256;font-size:.82rem}
#viewport{background:#e0e7de;border:1px solid #ccd8cc;border-radius:13px;overflow:auto;height:calc(100dvh - 255px);min-height:180px;touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
#viewport.zoomed{touch-action:pan-x pan-y pinch-zoom}
#page{min-height:100%;width:calc(100% * var(--zoom,1));margin:auto}
#page canvas,.page-slot>img{display:block;margin:auto;max-width:100%;height:auto}
.paper{background:#fff;padding:clamp(.9rem,5vw,2.7rem);min-height:100%;font-size:calc(1.02rem * var(--zoom,1));line-height:1.7;overflow-wrap:anywhere}
.paper img{max-width:100%;height:auto;display:block;margin:1rem auto}
.paper h2{margin-top:0}.paper p{white-space:pre-wrap}
.paper pre{white-space:pre-wrap;overflow-wrap:anywhere}
.table-wrap{overflow:auto;max-width:100%;touch-action:pan-x pan-y}
table{border-collapse:collapse;font-size:.9em}td{border:1px solid #cdd8ce;padding:.35rem .6rem;min-width:3em;max-width:24em;white-space:pre-wrap}tr:nth-child(even){background:#f0f5ee}
.pager{display:flex;align-items:center;justify-content:space-between;position:sticky;bottom:0;padding:.5rem 0 max(.5rem,env(safe-area-inset-bottom));background:#f1f3ec}
.pager button{min-width:80px}.pager output{font-weight:750;font-variant-numeric:tabular-nums}
#status{color:#803226;text-align:center;margin:.5rem 0;overflow-wrap:anywhere}
dialog{width:min(92vw,500px);max-height:78vh;border:1px solid #cdd8ce;border-radius:16px;background:#fbfcf8;color:#182d28;padding:1rem}
dialog::backdrop{background:#102b2999}
.dialogbar{display:flex;justify-content:space-between;align-items:center}.dialogbar h2{margin:0}
#items{padding-left:1.7rem}#items li{margin:.35rem 0}#items button{text-align:left;width:100%}

.header-actions{display:flex;gap:.3rem}.header-actions button{padding:.5rem .65rem}
.bookbar{flex-wrap:wrap}.bookbar h1{flex:1 1 12rem}
.actions{flex-wrap:wrap}
#page.spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.page-slot{min-width:0;min-height:100%}
.focus-mode .bar,.focus-mode .bookbar h1,.focus-mode .format{display:none}
.focus-mode main{width:100%;max-width:none;padding:0 max(.3rem,env(safe-area-inset-right)) 0 max(.3rem,env(safe-area-inset-left))}
.focus-mode #book{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding-top:env(safe-area-inset-top)}
.focus-mode .bookbar{margin:0;padding:.25rem 0;justify-content:flex-end}
.focus-mode #viewport{height:auto;min-height:0}
.focus-mode #status{display:none}
@media(max-width:390px){.bar{padding-inline:.5rem}.brand{font-size:.88rem;gap:.35rem}.mark{width:1.55rem;height:1.55rem}.header-actions button{font-size:.82rem;padding:.4rem .45rem}.actions button{font-size:.85rem}}
@media(display-mode:standalone){#install{display:none}}

.shelf-actions{margin:.7rem 0;display:flex;gap:.4rem}
#server-shelf form{display:grid;gap:.4rem;margin:.6rem 0;padding:.7rem;background:#eef4ea;border-radius:8px}
#server-shelf input,#server-shelf select{width:100%;font:inherit;padding:.35rem}
#shelf-items{list-style:none;padding:0}
#shelf-items li{border-top:1px solid #d7e3d8;padding:.55rem 0;display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}
#shelf-items li strong{flex:1 1 100%;overflow-wrap:anywhere}
@media(max-width:390px){.brand .mark{display:none}.header-actions button{padding:.4rem .32rem}.header-actions{gap:.2rem}}