:root{--navy:#10283f;--line:rgba(255,255,255,.18);--paper:#fff;--zoom:1;--page-ratio:1.4143;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif;background:radial-gradient(circle at 50% 20%,#284b68 0,#142b43 38%,#091725 100%);color:#fff;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
button,a,input{font:inherit}.topbar{min-height:74px;padding:12px clamp(16px,3vw,34px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(5,17,28,.76);border-bottom:1px solid var(--line);backdrop-filter:blur(14px);z-index:10}.eyebrow{display:block;font-size:10px;letter-spacing:.15em;color:#9fb5c7}.title-wrap h1{font-size:clamp(16px,2vw,22px);margin:3px 0 0;font-weight:700}.header-actions{display:flex;align-items:center;gap:7px}.header-actions button,.download,.controls button{border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;border-radius:9px;padding:9px 11px;text-decoration:none;cursor:pointer}.header-actions button:hover,.download:hover,.controls button:hover{background:rgba(255,255,255,.17)}#zoomLabel{width:48px;text-align:center;font-size:12px}.download{background:#fff;color:var(--navy);border-color:#fff;font-weight:700}
main{min-height:0}.reader{height:100%;display:grid;grid-template-columns:64px 1fr 64px;align-items:center}.viewport{width:100%;height:100%;display:grid;place-items:center;overflow:auto;padding:22px}.book{position:relative;display:flex;justify-content:center;align-items:center;transform:scale(var(--zoom));transform-origin:center;transition:transform .2s ease;filter:drop-shadow(0 22px 24px rgba(0,0,0,.38))}.page{position:relative;flex:none;background:var(--paper);overflow:hidden}.page img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}.page.loading::after{content:"";position:absolute;inset:45% auto auto 48%;width:22px;height:22px;border:3px solid #d5dde4;border-top-color:#315d80;border-radius:50%;animation:spin .8s linear infinite}.book.single .page{height:min(72vh,calc((100vw - 180px)*var(--page-ratio)));width:min(calc(72vh/var(--page-ratio)),calc(100vw - 180px))}.book.spread .page{height:min(72vh,calc((100vw - 190px)/2*var(--page-ratio)));width:min(calc(72vh/var(--page-ratio)),calc((100vw - 190px)/2))}.book.spread .page:first-child{box-shadow:inset -14px 0 18px -17px rgba(0,0,0,.75)}.book.spread .page:last-child{box-shadow:inset 14px 0 18px -17px rgba(0,0,0,.75)}.nav{width:48px;height:72px;border:1px solid var(--line);border-radius:13px;background:rgba(6,20,32,.56);color:#fff;font-size:42px;cursor:pointer;justify-self:center;z-index:5}.nav:hover{background:rgba(255,255,255,.15)}.nav:disabled{opacity:.25;cursor:default}.flip-next{animation:flipNext .52s cubic-bezier(.4,0,.2,1)}.flip-prev{animation:flipPrev .52s cubic-bezier(.4,0,.2,1)}
.controls{min-height:58px;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 16px;background:rgba(5,17,28,.84);border-top:1px solid var(--line);backdrop-filter:blur(14px);z-index:10}.controls label{font-size:13px;color:#bfd0dd}.controls input{width:62px;margin-left:6px;padding:7px;border-radius:7px;border:1px solid var(--line);background:#fff;color:#13283b;text-align:center}.hint{font-size:12px;color:#93aabd;margin-left:12px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes flipNext{0%{transform:perspective(1800px) rotateY(0);opacity:1}48%{transform:perspective(1800px) rotateY(-72deg);opacity:.55}100%{transform:perspective(1800px) rotateY(0);opacity:1}}@keyframes flipPrev{0%{transform:perspective(1800px) rotateY(0);opacity:1}48%{transform:perspective(1800px) rotateY(72deg);opacity:.55}100%{transform:perspective(1800px) rotateY(0);opacity:1}}
@media(max-width:760px){.topbar{min-height:60px}.eyebrow,.header-actions span,#zoomLabel,.hint{display:none}.title-wrap h1{font-size:15px}.header-actions{gap:4px}.header-actions button,.download{padding:8px;font-size:12px}.reader{grid-template-columns:42px 1fr 42px}.viewport{padding:10px 2px}.nav{width:35px;height:58px;font-size:34px}.book.single .page{height:min(71vh,calc((100vw - 92px)*var(--page-ratio)));width:min(calc(71vh/var(--page-ratio)),calc(100vw - 92px))}.controls{min-height:52px}.controls label{font-size:0}.controls label input{font-size:14px;margin-left:0}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}