:root{color-scheme:dark;--viewer-height:100vh;--toolbar-height:calc(52px + env(safe-area-inset-top,0px));--stage-height:calc(var(--viewer-height) - var(--toolbar-height) - env(safe-area-inset-bottom,0px))}
@supports(height:100dvh){:root{--viewer-height:100dvh}}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050505;color:#f2f3ef}
body{font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased}
.viewer-shell{position:fixed;inset:0;height:var(--viewer-height);display:grid;grid-template-rows:var(--toolbar-height) minmax(0,1fr);padding-bottom:env(safe-area-inset-bottom,0px);background:#050505}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));z-index:2}
.viewer-toolbar h1{font-size:12px;line-height:1.5;font-weight:400;letter-spacing:.02em;margin:0;color:#e4e7e0}
.viewer-toolbar-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}
#page-counter{font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#bfc5ba;white-space:nowrap}
.viewer-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:inherit;text-decoration:none;border:0;background:transparent}
.viewer-stage{position:relative;min-height:0;min-width:0;display:grid;place-items:center;overflow:hidden;touch-action:pan-y pinch-zoom}
.media-frame{position:relative;margin:0;width:min(100vw,calc(var(--stage-height) * var(--media-ratio,.8)));height:min(var(--stage-height),calc(100vw / var(--media-ratio,.8)));max-width:100%;max-height:100%;background:#050505}
.viewer-media{display:block;width:100%;height:100%;object-fit:contain;background:#050505;user-select:none;-webkit-user-drag:none}
.viewer-navigation{position:absolute;inset:0;pointer-events:none}
.page-arrow{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:48px;height:64px;padding:0;border:1px solid #ffffff1a;border-radius:2px;color:#f4f4ef;background:#05050566;cursor:pointer;pointer-events:auto;transition:background .15s}
.page-arrow:hover{background:#050505bb}
.previous-page{left:max(16px,env(safe-area-inset-left,0px))}
.previous-page svg{transform:rotate(180deg)}
.next-page{right:max(16px,env(safe-area-inset-right,0px))}
.page-arrow:disabled{visibility:hidden;pointer-events:none}
button:focus-visible,a:focus-visible,video:focus-visible{outline:2px solid #d6e7cc;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.media-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(300px,calc(100% - 96px));padding:24px;text-align:center;background:#121512eb;border:1px solid #ffffff33;z-index:3}
.media-error[hidden]{display:none}
.media-error p{font-size:13px;line-height:1.8;margin:0 0 16px}
.media-error button{font:inherit;font-size:12px;padding:10px 18px;color:inherit;background:none;border:1px solid #ffffff66;cursor:pointer}
.noscript-message{position:fixed;bottom:24px;left:24px;right:24px;padding:16px;background:#111e;text-align:center;font-size:12px;z-index:4}
.noscript-message a{color:inherit}
@media(max-width:600px){.viewer-toolbar{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}.viewer-toolbar-actions{gap:12px}.page-arrow{width:44px;height:56px}.previous-page{left:max(6px,env(safe-area-inset-left,0px))}.next-page{right:max(6px,env(safe-area-inset-right,0px))}}
@media(prefers-reduced-motion:reduce){.page-arrow{transition:none}}