:root{color-scheme:light;--navy:#385f91;--navy-deep:#2f527f;--text:#34445a;--muted:#7a8797;--line:rgba(82,101,128,.13);--glass:rgba(255,255,255,.88);--shadow:0 12px 34px rgba(44,65,94,.15)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 18% 14%,#fff 0,rgba(255,255,255,.95) 24%,transparent 48%),radial-gradient(circle at 85% 82%,rgba(236,243,250,.72) 0,transparent 42%),linear-gradient(145deg,#fbfcfd,#f1f5f8);color:var(--text);overscroll-behavior:none}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}#viewer{position:fixed;inset:0}#viewer canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.viewer-toolbar{position:fixed;z-index:30;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:5px;background:var(--glass);border:1px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:var(--shadow);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15)}.tool-btn{height:38px;min-width:54px;padding:0 14px;border:0;border-radius:11px;background:transparent;color:#59687b;font-size:13px;font-weight:800;letter-spacing:-.2px;cursor:pointer;transition:background .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease}.tool-btn:hover{background:rgba(56,95,145,.08);color:var(--navy-deep)}.tool-btn:active{transform:scale(.97)}.tool-btn.active{background:linear-gradient(145deg,#4f78aa,#385f91);color:#fff;box-shadow:0 5px 13px rgba(56,95,145,.25)}.tool-btn:disabled{background:transparent!important;color:#b5bec9!important;box-shadow:none!important;cursor:not-allowed;transform:none!important;opacity:.72}.tool-btn:disabled:hover{background:transparent!important;color:#b5bec9!important}.tool-btn.subtle{color:#7b8796}.tool-divider{width:1px;height:22px;margin:0 2px;background:var(--line)}
.measure-guide{position:fixed;z-index:29;top:72px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 9px 8px 14px;border:1px solid rgba(255,255,255,.2);border-radius:13px;background:rgba(42,57,77,.9);color:#fff;box-shadow:0 8px 24px rgba(22,36,55,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:12px;font-weight:700;white-space:nowrap}.measure-guide[hidden]{display:none}.measure-guide button{height:28px;padding:0 10px;border:0;border-radius:8px;background:rgba(255,255,255,.13);color:#fff;font-size:11px;font-weight:800;cursor:pointer}.measure-guide button:hover{background:rgba(255,255,255,.22)}
.sun-panel{position:fixed;z-index:28;top:74px;right:18px;width:270px;padding:16px;border:1px solid rgba(255,255,255,.88);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 18px 50px rgba(34,56,84,.18);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .18s ease,visibility .18s ease,transform .18s ease}.sun-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.panel-head>div{display:flex;flex-direction:column;gap:2px}.panel-head strong{font-size:14px;color:#34475f}.panel-head span{font-size:11px;color:#8a96a5}.panel-head button{width:28px;height:28px;border:0;border-radius:8px;background:#eef2f6;color:#6c7989;font-size:20px;line-height:1;cursor:pointer}.panel-head button:hover{background:#e2e8ef}.sun-controls label{display:block;margin-top:12px}.sun-controls label>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;color:#607086}.sun-controls b{font-size:12px;color:var(--navy);font-variant-numeric:tabular-nums}.sun-controls input[type=range]{width:100%;height:4px;margin:0;accent-color:var(--navy);cursor:pointer}.panel-reset{width:100%;height:34px;margin-top:15px;border:0;border-radius:10px;background:#eef3f8;color:#52647a;font-size:12px;font-weight:800;cursor:pointer}.panel-reset:hover{background:#e4ebf2}
.viewer-hint{position:fixed;z-index:15;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:7px 12px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.7);color:#758394;font-size:11px;font-weight:650;white-space:nowrap;box-shadow:0 5px 18px rgba(46,66,91,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}
.loading-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffffff,#f3f7fa);transition:opacity .35s ease,visibility .35s ease}.loading-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-card{display:flex;min-width:250px;flex-direction:column;align-items:center;gap:7px;padding:25px 30px;border:1px solid rgba(255,255,255,.95);border-radius:22px;background:rgba(255,255,255,.76);box-shadow:0 20px 55px rgba(49,69,95,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.loading-card strong{margin-top:3px;font-size:15px;color:#405269}.loading-card span{font-size:12px;color:#8793a2}.loading-spinner{width:31px;height:31px;border:3px solid #dce4ed;border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px),(pointer:coarse){.viewer-toolbar{top:max(10px,env(safe-area-inset-top));width:calc(100vw - 20px);justify-content:center;padding:4px;border-radius:14px}.tool-btn{height:36px;min-width:0;flex:1;padding:0 7px;font-size:12px}.tool-divider{margin:0;height:20px}.measure-guide{top:61px;font-size:11px}.sun-panel{top:auto;right:10px;bottom:max(10px,env(safe-area-inset-bottom));left:10px;width:auto;transform:translateY(10px) scale(.99);transform-origin:bottom center}.sun-panel.open{transform:translateY(0) scale(1)}.viewer-hint{display:none}}
@media(max-width:390px){.tool-btn{font-size:11px;padding:0 5px}.viewer-toolbar{gap:1px}.measure-guide{white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
