@font-face{font-family:Pretendard;src:url('./data/Pretendard-Regular.otf') format('opentype');font-display:swap}
*{box-sizing:border-box}
html,body,#viewer{width:100%;height:100%;margin:0}
body{overflow:hidden;background:#e8f2f5;color:#0d2029;font-family:Pretendard,Arial,sans-serif}
canvas{display:block;touch-action:none}
.title{position:absolute;top:30px;left:42px;display:flex;align-items:center;gap:20px;pointer-events:none;padding-left:20px;text-shadow:0 1px 12px #ffffffc9}
.title:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:4px;background:#209ab7}
.title h1{margin:0;font-size:40px;line-height:1.15;font-weight:800;letter-spacing:-1.8px}
.title span{color:#5a707b;font-size:13px;font-weight:700;white-space:nowrap;letter-spacing:.2px}
.model-label{position:absolute;left:42px;top:105px;background:#fff;border:1px solid #d3e0e5;border-radius:22px;padding:10px 16px;font-size:12px;font-weight:700;box-shadow:0 4px 18px #152d3810;pointer-events:none}
.model-label i,.panel-footer i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#209bb8;margin-right:6px}
.console{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:320px;padding:25px 24px;background:#fff;border:1px solid #d5e2e7;border-radius:30px;box-shadow:0 12px 36px #0d20291a}
.console-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.console h2{font-size:16px;margin:0;font-weight:800}
.console-head span{font-size:10px;color:#90a1a8;letter-spacing:.5px;font-weight:700}
.rule{height:1px;background:#d7e3e7;margin:22px 0}
.section-label{font-size:14px;font-weight:800}
.description{color:#71848c;font-size:12px;margin:9px 0 17px}
.camera-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.camera-btn{min-height:43px;border-radius:23px;border:1px solid #d6e3e8;background:#fff;color:#10242d;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.camera-btn:hover{background:#e9f6f9;border-color:#209bb8}
.camera-btn.active{background:#0b2029;color:white;border-color:#0b2029;outline:2px solid #209bb8;outline-offset:2px}
.camera-btn:focus-visible{outline:2px solid #209bb8;outline-offset:3px}
.help strong{font-size:14px}
.help p{display:flex;justify-content:space-between;color:#516771;font-size:12px;margin:16px 0 0}
.help p span{color:#10242d;font-weight:700}
.panel-footer{margin-top:28px;color:#81949c;font-size:11px}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:#f6f9fa;color:#10242d;z-index:10;text-align:center}
#loading span{font-size:13px;color:#71848c}#loading.error{padding:24px}.spinner{width:43px;height:43px;border:2px solid #d9e8ec;border-top-color:#209bb8;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.title{top:22px;left:20px;padding-left:14px;gap:10px}.title:before{width:4px}.title h1{font-size:26px;letter-spacing:-1px}.title span{font-size:10px}.model-label{left:20px;top:72px;padding:8px 12px}.console{top:auto;bottom:16px;right:16px;left:16px;transform:none;width:auto;padding:18px;border-radius:22px}.console h2{font-size:15px}.rule{margin:14px 0}.camera-grid{grid-template-columns:repeat(4,1fr);gap:6px}.camera-btn{font-size:12px;min-height:39px}.description{margin:6px 0 13px}.help,.panel-footer,.console .rule:last-of-type{display:none}}

.console{max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b2c4ca transparent}.camera-btn{min-height:31px;font-size:12px}.function-row{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:12px;font-weight:700}.toggle{border:1px solid #d6e3e8;border-radius:18px;background:#fff;color:#17323d;padding:7px 12px;font:inherit;cursor:pointer}.toggle[aria-pressed=true]{background:#209bb8;border-color:#209bb8;color:white}.shower-group{border:1px solid #e1eaed;border-radius:14px;margin:9px 0;padding:10px 12px}.shower-group summary{cursor:pointer;font-size:12px;font-weight:bold}.slider-row{display:grid;grid-template-columns:55px 1fr 48px;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:#526a74}.slider-row input{width:100%;accent-color:#209bb8}.slider-row output{text-align:right;font-variant-numeric:tabular-nums}.console .rule{margin:16px 0}@media(max-width:900px){.console{max-height:44vh}.camera-grid{grid-template-columns:repeat(4,1fr)}.camera-btn{min-height:30px;font-size:10px}.console .rule:last-of-type{display:block}.help{display:none}.title h1{font-size:clamp(19px,4vw,26px)}}
.head-header{display:flex;align-items:center;justify-content:space-between;gap:6px}.head-expand{border:0;background:none;padding:4px 0;color:#10242d;font:inherit;font-weight:700;font-size:12px;cursor:pointer}.head-expand:before{content:'▸';margin-right:5px}.head-expand[aria-expanded=true]:before{content:'▾'}.head-view{border:1px solid #d5e4e8;border-radius:14px;background:#fff;color:#198ba5;font:inherit;font-size:10px;font-weight:700;padding:5px 8px;cursor:pointer;white-space:nowrap}.head-view:hover{background:#e9f6f9}.slider-wrap{min-width:0}.slider-ends{display:flex;justify-content:space-between;font-size:9px;color:#91a1a8}.slider-row{align-items:start}.slider-row input{display:block;margin:0;width:100%}.slider-row output{white-space:nowrap}.is-synced .slider-row{opacity:.42}.slider-row input:disabled{cursor:not-allowed}.process-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.process-grid button{padding:9px 5px;border:1px solid #e0e8eb;border-radius:12px;background:#f5f8f9;color:#a1afb5;font:inherit;font-size:11px}.process-all{grid-column:1/-1}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.toggle:disabled{opacity:.48;cursor:not-allowed}
body{background:linear-gradient(to bottom,#fbfcfc 0%,#f6f8f8 55%,#e9edef 100%)}
.viewer-help{position:absolute;top:92px;left:67px;display:flex;gap:17px;color:#788990;font-size:11px;pointer-events:none}.viewer-help span+span:before{content:'·';margin-right:17px;color:#a8b6ba}.viewer-help b{color:#435b65;font-weight:700;margin-left:3px}
.function-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.function-buttons .toggle{min-height:34px;font-size:12px;font-weight:700}
.section-heading .toggle{font-size:12px;font-weight:700}
@media(max-width:900px){.viewer-help{top:65px;left:39px;gap:8px;font-size:10px}.viewer-help span+span:before{margin-right:8px}}
body{background:linear-gradient(to bottom,#f7f9f9 0%,#f1f4f4 55%,#e3e8e9 100%)}
.viewer-help{gap:7px}.viewer-help span+span:before{margin-right:7px}
@media(max-width:900px){.viewer-help{gap:5px}.viewer-help span+span:before{margin-right:5px}}
.head-actions{display:flex;align-items:center;gap:5px}.head-actions .head-view:disabled{opacity:.42;cursor:not-allowed}
.head-expand:disabled{opacity:.42;cursor:not-allowed}
.head-expand:disabled{opacity:.22}.head-actions .head-view:disabled{opacity:.3}
.process-grid button:not(:disabled){color:#17323d;background:#fff;border-color:#d6e3e8;font-weight:700;cursor:pointer}.process-grid button:not(:disabled):hover{background:#e9f6f9;border-color:#209bb8}.process-grid button[aria-pressed=true]{color:#fff;background:#209bb8;border-color:#209bb8}.course-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:15px}.course-row strong,.course-row span{display:block}.course-row strong{font-size:12px}.course-row span{margin-top:4px;color:#82959c;font-size:10px}.course-controls,.playback{display:flex;gap:7px;align-items:center}.course-controls button,.playback button{width:34px;height:34px;border:1px solid #d5e2e7;border-radius:50%;background:#fff;color:#12333e;cursor:pointer;font-size:13px;display:grid;place-items:center}.course-controls button.active,.playback button.active{background:#209bb8;color:#fff;border-color:#209bb8}.playback{position:absolute;bottom:26px;left:42px;background:#fffffff2;padding:8px 12px;border:1px solid #d5e2e7;border-radius:25px;box-shadow:0 5px 18px #162d3817}.playback span{padding:0 7px;font-size:11px;color:#526a74;font-weight:700}@media(max-width:900px){.playback{left:16px;bottom:calc(44vh + 26px);padding:5px 8px}.playback button{width:30px;height:30px}.title h1{font-size:clamp(18px,3vw,26px)}}
.process-grid button[aria-pressed=true]:not(:disabled){background:#209bb8;border-color:#209bb8;color:#fff}
.smart-target{display:block;width:100%;margin-top:12px;font-size:12px;font-weight:700}.smart-target:disabled{opacity:.4;cursor:not-allowed}
.function-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.function-buttons .toggle{padding:7px 2px;font-size:11px;white-space:nowrap}.target-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.target-buttons .toggle{font-size:12px;font-weight:700;white-space:nowrap;padding:7px 4px}