:root {
  color-scheme: dark;
  --navy-950:#04111f;
  --navy-900:#07182d;
  --navy-850:#0a2039;
  --navy-800:#0d2947;
  --navy-700:#173c61;
  --line:rgba(157,190,222,.17);
  --text:#f7fbff;
  --muted:#9fb2c7;
  --orange:#ff7a2f;
  --orange-2:#ff9b58;
  --cold:#36b7ff;
  --hot:#ff5a5f;
  --heat:#ffad32;
  --shadow:0 28px 70px rgba(0,7,18,.42);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Inter, system-ui, sans-serif;
}
*{box-sizing:border-box}
html{background:var(--navy-950);scroll-behavior:smooth}
body{margin:0;min-width:320px;background:
  radial-gradient(circle at 72% 14%,color-mix(in srgb,var(--navy-850) 44%,transparent),transparent 30rem),
  linear-gradient(145deg,var(--navy-950) 0%,var(--navy-900) 52%,var(--navy-950) 100%);color:var(--text)}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit}
.experience-shell{width:min(1480px,100%);min-height:100vh;margin:auto;padding:0 clamp(18px,4vw,64px)}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,122,47,.45);display:grid;place-items:center;transform:rotate(45deg);background:linear-gradient(145deg,rgba(255,122,47,.2),rgba(255,122,47,.04))}.brand-mark i{width:12px;height:17px;border-radius:10px 10px 12px 12px;background:var(--orange);transform:rotate(-45deg);clip-path:polygon(50% 0,100% 52%,91% 80%,71% 100%,29% 100%,9% 80%,0 52%)}
.brand span:last-child{display:flex;flex-direction:column}.brand b{font-size:1.02rem;letter-spacing:-.02em}.brand small{font-size:.61rem;letter-spacing:.16em;color:#8ba2ba;margin-top:2px}.header-actions{display:flex;align-items:center;gap:24px}.text-link{font-size:.91rem;color:#becddd;transition:.2s}.text-link:hover{color:white}.primary-link{background:var(--orange);padding:10px 17px;border-radius:9px;font-weight:750;font-size:.9rem;box-shadow:0 8px 24px rgba(255,122,47,.18);transition:.2s}.primary-link:hover{background:var(--orange-2);transform:translateY(-1px)}
.intro{display:flex;align-items:end;justify-content:space-between;padding:34px 2px 26px}.eyebrow{font-size:.7rem;letter-spacing:.18em;color:#79a0c4;margin:0 0 9px;display:flex;align-items:center;gap:8px}.eyebrow span{width:19px;height:2px;background:var(--orange)}h1{font-size:clamp(2rem,3.7vw,3.15rem);letter-spacing:-.055em;margin:0 0 10px;line-height:1}.intro>div>p:last-child{margin:0;color:var(--muted);font-size:.96rem}.legend{display:flex;gap:18px;align-items:center;padding-bottom:4px;color:#b5c4d3;font-size:.82rem}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 12px currentColor}.legend .cold{color:var(--cold);background:var(--cold)}.legend .hot{color:var(--hot);background:var(--hot)}.legend .heat{color:var(--heat);background:var(--heat)}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;align-items:stretch}.viewer-card,.info-panel{background:linear-gradient(150deg,rgba(14,41,69,.96),rgba(7,27,48,.94));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.viewer-card{min-width:0}.viewer-toolbar{min-height:59px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px;border-bottom:1px solid var(--line)}.toolbar-left{display:flex;align-items:center;gap:9px}.view-tabs,.tool-tabs{display:flex;background:#06172a;border:1px solid rgba(144,179,211,.12);padding:3px;border-radius:9px}.view-button,.tool-button{border:0;background:transparent;color:#8299b1;font-size:.8rem;font-weight:700;padding:6px 13px;border-radius:6px;cursor:pointer}.view-button.active,.tool-button.active{background:#173855;color:white;box-shadow:0 2px 8px rgba(0,0,0,.2)}.tool-tabs{border-color:rgba(255,122,47,.14)}.tool-button.active{background:rgba(255,122,47,.2);color:#ffc59f}.pipe-toggle{display:flex;align-items:center;gap:10px;color:#a9bbcd;font-size:.79rem;font-weight:650;cursor:pointer}.pipe-toggle input{position:absolute;opacity:0}.pipe-toggle i{width:38px;height:21px;background:#1b3651;border-radius:20px;position:relative;transition:.2s}.pipe-toggle i:after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;top:3px;left:3px;background:#8799aa;transition:.2s}.pipe-toggle input:checked+i{background:var(--orange)}.pipe-toggle input:checked+i:after{left:20px;background:white}
.canvas-wrap{height:clamp(520px,63vh,690px);min-height:520px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 48% 45%,rgba(39,83,122,.33),rgba(5,22,39,.07) 58%,rgba(4,17,31,.58) 100%);touch-action:none}.canvas-wrap:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(97,139,178,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(97,139,178,.045) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent,black 25%,black 85%,transparent);pointer-events:none}canvas{display:block;width:100%;height:100%;cursor:grab;position:relative;z-index:1;outline:none}canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--orange)}canvas[data-tool="pan"]{cursor:move}canvas:active{cursor:grabbing}.labels{position:absolute;inset:0;z-index:2;pointer-events:none}.room-label{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 5px 10px rgba(0,0,0,.48));transition:opacity .15s}.room-label span{white-space:nowrap;background:rgba(5,18,32,.9);border:1px solid rgba(255,255,255,.17);padding:5px 8px;border-radius:5px;font-size:.72rem;font-weight:800;letter-spacing:-.02em}.room-label i{width:1px;height:12px;background:rgba(255,255,255,.45)}.room-label b{width:11px;height:11px;border-radius:50%;background:#ff5b44;border:2px solid white;box-shadow:0 0 0 5px rgba(255,91,68,.2),0 0 18px rgba(255,91,68,.8)}.room-label.active span{border-color:var(--orange);color:#ffd7bf}.room-label.active b{background:var(--orange);box-shadow:0 0 0 7px rgba(255,122,47,.2),0 0 24px var(--orange)}.canvas-hint{position:absolute;z-index:3;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#8fa6bb;font-size:.72rem;background:rgba(4,18,32,.72);border:1px solid var(--line);padding:7px 11px;border-radius:20px;pointer-events:none}.canvas-hint span{color:var(--orange);margin-right:5px}.zoom-controls{position:absolute;z-index:3;bottom:15px;right:16px;display:flex;gap:5px}.zoom-controls button{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:rgba(5,22,39,.88);cursor:pointer;color:#b4c5d4;font-size:1rem}.zoom-controls button:hover{border-color:#526f89;color:white}.mobile-spaces{display:none}
.info-panel{padding:27px 25px;display:flex;flex-direction:column}.panel-kicker{display:flex;align-items:center;gap:9px;color:#7896b3;font-size:.67rem;font-weight:800;letter-spacing:.14em}.panel-kicker span:first-child{color:var(--orange)}.panel-kicker i{height:1px;width:25px;background:#405a74}.panel-icon{margin-top:22px;width:46px;height:46px;border-radius:12px;background:rgba(255,122,47,.13);border:1px solid rgba(255,122,47,.28);display:grid;place-items:center;color:var(--orange);font-size:1.4rem}.info-panel h2{font-size:1.65rem;margin:14px 0 8px;letter-spacing:-.04em}.info-panel>p{font-size:.9rem;line-height:1.65;color:#aabbd0;margin:0 0 19px;min-height:46px}.risk-card{background:rgba(3,16,29,.48);border:1px solid rgba(119,157,192,.13);border-radius:12px;padding:16px}.risk-card h3{font-size:.78rem;color:#ccd7e3;margin:0 0 12px}.risk-card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}.risk-card li{font-size:.81rem;color:#93a9bf;display:flex;gap:8px;line-height:1.45}.risk-card li:before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-top:6px}.check-tip{display:flex;gap:10px;margin:16px 2px 0}.check-tip>span{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(54,183,255,.14);color:var(--cold);font-size:.7rem;flex:none}.check-tip p{margin:0;display:flex;flex-direction:column;gap:3px}.check-tip b{font-size:.75rem;color:#c6d4e1}.check-tip p span{font-size:.77rem;line-height:1.45;color:#8099b1}.panel-actions{margin-top:auto;padding-top:20px;display:grid;gap:9px}.cta-main,.cta-sub{min-height:45px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:750;font-size:.85rem}.cta-main{background:var(--orange);box-shadow:0 10px 25px rgba(255,122,47,.16)}.cta-main span{position:absolute;margin-left:210px}.cta-main:hover{background:var(--orange-2)}.cta-sub{border:1px solid #2c4965;color:#b6c7d8}.cta-sub:hover{border-color:#527395;color:white}
footer{display:flex;justify-content:space-between;align-items:start;gap:30px;padding:20px 4px 30px;color:#6f88a0;font-size:.72rem;line-height:1.55}footer p{margin:0;max-width:820px}footer b{color:#9eafbf;margin-right:6px}footer>span{white-space:nowrap;letter-spacing:.08em}.admin-link{color:#b8c8d7;text-decoration:underline;white-space:nowrap}.viewer-card,.info-panel{background:linear-gradient(150deg,color-mix(in srgb,var(--navy-850) 96%,white 4%),var(--navy-900))}
@media (max-width:980px){.workspace{grid-template-columns:minmax(0,1fr) 310px}.info-panel{padding:23px 20px}.canvas-wrap{height:560px}}
@media (max-width:760px){.experience-shell{padding:0 14px}.topbar{height:68px}.header-actions{gap:8px}.text-link{display:none}.primary-link{padding:9px 13px}.intro{padding:25px 2px 17px;align-items:start}.intro .legend{display:none}h1{font-size:2rem}.intro>div>p:last-child{font-size:.84rem;line-height:1.5;margin-top:9px}.workspace{display:flex;flex-direction:column}.viewer-card{border-radius:15px}.viewer-toolbar{padding:7px 10px}.toolbar-left{gap:6px}.view-button,.tool-button{padding:6px 9px;font-size:.72rem}.canvas-wrap{height:57vh;min-height:430px;max-height:570px}.canvas-hint{bottom:11px;font-size:.66rem}.zoom-controls{bottom:10px;right:10px;flex-direction:column}.zoom-controls button{width:30px;height:30px}.room-label span{font-size:.64rem;padding:4px 6px}.room-label i{height:8px}.mobile-spaces{display:flex;gap:7px;padding:10px 11px 12px;overflow:auto;border-top:1px solid var(--line);scrollbar-width:none}.mobile-spaces::-webkit-scrollbar{display:none}.space-chip{border:1px solid #28445e;background:#0a2139;color:#91a8bd;border-radius:20px;padding:7px 11px;white-space:nowrap;font-size:.72rem;font-weight:700}.space-chip.active{background:var(--orange);border-color:var(--orange);color:white}.info-panel{min-height:460px;border-radius:15px}.info-panel>p{min-height:0}.panel-actions{margin-top:24px}footer{flex-direction:column;padding-bottom:24px;gap:8px}.brand-mark{width:34px;height:34px}.brand small{font-size:.55rem}}
@media (max-width:430px){.canvas-wrap{min-height:410px}.view-button,.tool-button{padding:6px 7px}.pipe-toggle span{display:none}.canvas-hint{left:12px;transform:none}.info-panel{padding:22px 18px}.cta-main span{margin-left:190px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}