:root{font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;color:#202a3a;background:#f5f7fa;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #a8c2ff;outline-offset:4px}[hidden]{display:none!important}
.topbar{height:76px;border-bottom:1px solid #e6eaf0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1160px)/2))}.brand{text-decoration:none;color:#1b2740;font-weight:750;display:flex;align-items:center;gap:12px;font-size:17px;letter-spacing:-.4px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;background:#315ce7;border-radius:10px;color:#fff;font-size:21px}.brand-light{font-weight:450;color:#758096;margin-left:6px}.readonly{font-size:12px;color:#6d788a;border:1px solid #e6eaf0;padding:6px 10px;border-radius:6px}
main{max-width:1160px;margin:0 auto;padding:49px 0 0}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.eyebrow{font-size:11px;letter-spacing:1.9px;font-weight:700;color:#71809a;margin:0 0 10px}h1{font-size:28px;letter-spacing:-1.2px;font-weight:720;margin:0 0 11px}.description{font-size:14px;color:#7b8597;margin:0}.status{font-size:12px;background:#edf0f5;border:1px solid #dfe5ed;color:#6e798b;border-radius:20px;padding:7px 12px;display:flex;align-items:center;gap:7px}.status:before{content:"";width:6px;height:6px;background:#9ba6b7;border-radius:100%}.status.ready{background:#edf8f2;border-color:#d9eee2;color:#40805a}.status.ready:before{background:#51a874}
.viewer{background:#fff;border:1px solid #e0e5ed;border-radius:12px;overflow:hidden;box-shadow:0 3px 16px #14233704}.viewer-toolbar{display:flex;justify-content:space-between;align-items:center;height:58px;padding:0 22px;border-bottom:1px solid #e9edf3;font-size:13px;font-weight:600;gap:12px}.viewer-toolbar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.view-options{display:flex;gap:4px;flex-shrink:0}.small{border:0;background:transparent;color:#7c8798;font-size:12px;padding:7px 10px;border-radius:5px}.small.selected{background:#eef2f8;color:#475772}.small:disabled{opacity:.45}.canvas{position:relative;min-height:440px;height:55vh;max-height:720px;overflow:auto;display:flex;align-items:center;justify-content:center;background:#fafbfc;background-image:radial-gradient(#dbe1eb 1px,transparent 1px);background-size:18px 18px}.empty{text-align:center;padding:40px 20px}.empty svg{stroke:#b5bfce;stroke-width:1.5;margin-bottom:16px}.empty h2{font-size:16px;font-weight:580;color:#66738a;margin:0 0 10px;letter-spacing:-.4px}.empty p{color:#949eb0;font-size:13px;margin:0;line-height:1.7}.canvas img{display:block;max-width:100%;max-height:100%;object-fit:contain;flex-shrink:0}.canvas.original{display:block}.canvas.original img{max-width:none;max-height:none}.viewer-bottom{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 22px;border-top:1px solid #e9edf3;color:#9aa3b1;font-size:11px}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#fafbfceF;color:#697891;font-size:13px}.spinner{width:26px;height:26px;border:2px solid #dfe6f3;border-top-color:#315ce7;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}.actions p{font-size:13px;color:#8792a4;margin:0;line-height:1.7}.actions p.error{color:#b54c54}.primary{display:flex;align-items:center;justify-content:center;gap:9px;border:0;background:#315ce7;color:#fff;border-radius:8px;padding:13px 21px;font-weight:580;font-size:13px;min-width:168px;white-space:nowrap;box-shadow:0 2px 4px #315ce715}.primary svg{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.primary:hover:enabled{background:#234bc9}.primary:disabled{background:#e5eaf2;color:#9aa7bd;box-shadow:none}footer{max-width:1160px;margin:22px auto 0;padding-bottom:30px;color:#a4acba;font-size:11px}
@media(max-width:1220px){main{margin:0 28px}footer{margin-left:28px;margin-right:28px}}@media(max-width:600px){.topbar{height:64px;padding:0 20px}.brand-light{display:none}main{margin:0 18px;padding-top:30px}.heading{gap:14px;align-items:flex-start}.eyebrow{font-size:10px}h1{font-size:24px}.description{font-size:12px;max-width:210px;line-height:1.7}.status{font-size:11px;white-space:nowrap;margin-top:25px;padding:6px 9px}.viewer-toolbar{padding:0 13px}.small{font-size:11px;padding:7px}.canvas{min-height:300px;height:47vh}.viewer-bottom{padding:0 13px;font-size:10px}.viewer-bottom>span:last-child{display:none}.actions{align-items:stretch;flex-direction:column;gap:13px}.primary{padding:14px}.actions p{font-size:12px}footer{margin:16px 18px 0}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}