/* BeyondX SPOT Monitor — Figma "SPOT 로봇 › Deliver › 01 Dashboard" 기준(1920×1080) */
:root{
  --navy:#0a1e5a;--text:#1a1d24;--muted:#7b8389;--unit:#838b90;--sub:#95a1c6;
  --blue:#0028b6;--lnb:#2e4890;--lnb-active:#1f377c;--seg-on:#e2ebfb;
  --line:#d5d8e5;--soft:#f8fafb;--thead:#edf0f6;--pop-head:#f0f2f7;--toggle-off:#abb0bf;
  --green:#44c257;--green-bg:#ecf9ee;--warn:#ffc700;--warn-bg:#fff9e5;--error:#ff7836;--error-bg:#fff1eb;--critical:#f30000;--critical-bg:#fee5e5;
  --stale:#b4bbcf;
  --lnb-w:92px;--lnb-open:348px;--top-h:57px;--bar-h:56px;--right-w:418px;
}
/* Figma 글꼴 Pretendard(가변 1.3.9, SIL OFL 1.1 — vendor/LICENSE-pretendard.txt). 서버에 인터넷이 없어 파일을 함께 둔다(2.55.0) */
@font-face{font-family:Pretendard;src:url("vendor/PretendardVariable-1.3.9.woff2") format("woff2");font-weight:45 920;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#fff;color:var(--text);font-family:Pretendard,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;font-size:15px;overflow:hidden}
button{font:inherit}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.fill{fill:currentColor;stroke:none}

.app{display:grid;grid-template-columns:var(--lnb-w) 1fr var(--right-w);grid-template-rows:var(--top-h) 1fr;height:100vh;min-width:1280px}

/* 좌측 메뉴 */
.lnb{grid-row:1/3;grid-column:1;background:var(--lnb);color:#fff;display:flex;flex-direction:column;width:var(--lnb-w);z-index:30;
  position:relative;transition:width .18s ease;overflow:hidden}
.lnb-brand{height:72px;display:flex;align-items:center;padding-left:27px}
.lnb-brand .logo-beyondx{display:none}
.lnb-brand .brand-home{display:flex;align-items:center}
.lnb-toggle{margin:0 0 0 28px;width:36px;height:36px;border:0;background:none;color:#fff;cursor:pointer;padding:6px}
.lnb-toggle svg{width:24px;height:24px}
.lnb-menu{list-style:none;margin:62px 0 0;padding:0 16px;display:grid;gap:12px}
.lnb-menu a{display:flex;align-items:center;gap:24px;height:60px;color:#fff;text-decoration:none;white-space:nowrap}
.lnb-menu .ico{flex:none;width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.lnb-menu a.active .ico{background:var(--lnb-active)}
.lnb-menu a:not(.active):not([aria-disabled]):hover .ico{background:rgba(255,255,255,.08)}
.lnb-menu a:not(.active){opacity:.6}
.lnb-menu a:not(.active):not([aria-disabled]):hover{opacity:1}
.lnb-menu a.active span{font-weight:700}
.lnb-menu a[aria-disabled]{cursor:default}
.lnb-menu span{display:none;font-size:18px}
.lnb-bottom{margin-top:auto;gap:2px}
.lnb-foot{height:75px;display:flex;align-items:center;padding-left:26px}
.lnb-foot .logo-lselectric{display:none}
.lnb.open{width:var(--lnb-open);position:fixed;top:0;bottom:0;left:0}
.lnb.open .logo-x,.lnb.open .logo-ls{display:none}
.lnb.open .logo-beyondx,.lnb.open .logo-lselectric{display:block}
.lnb.open .lnb-brand{padding-left:24px}
.lnb.open .lnb-menu span{display:inline}
.lnb.open .lnb-toggle svg{transform:scaleX(-1)}
.dim{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:20}
[hidden]{display:none !important}
body.auth-pending .app{visibility:hidden}
.lnb-menu li[hidden]{display:none}

/* 상단 */
.top{grid-column:2/4;grid-row:1;display:flex;align-items:stretch;border-bottom:1px solid var(--line);background:#fff}
.top h1{margin:0;padding-left:24px;font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:var(--navy);display:flex;align-items:center;flex:1}
.alarms{display:flex;width:var(--right-w)}
.alarm{flex:0 0 114px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding-right:13px;border-top:3px solid;gap:2px}
.alarm span{font-size:14px;font-weight:500;line-height:24px}
.alarm strong{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px}
.alarm.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.alarm.error{background:var(--error-bg);border-color:var(--error);color:var(--error)}
.alarm.critical{background:var(--critical-bg);border-color:var(--critical);color:var(--critical)}
.bell{flex:1;display:flex;align-items:center;justify-content:center;color:var(--blue);border:0;background:none;padding:0;cursor:pointer}
.bell:disabled{cursor:default}
.bell[aria-expanded=true]{background:#f2f4f9}

/* 가운데 */
.center{grid-column:2;grid-row:2;display:flex;flex-direction:column;min-width:0;min-height:0}
.subbar{height:var(--bar-h);background:var(--soft);display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex:none}
.site{display:flex;align-items:center;gap:0;color:var(--navy);white-space:nowrap}
.site strong{font-size:18px;font-weight:600;line-height:24px}
.site .sep{width:1px;height:16px;background:var(--navy);margin:0 18px}
.site .label{font-size:15px;font-weight:500;margin-right:20px}
.wx{display:inline-flex;align-items:center;margin-right:16px}
.wx svg{width:20px;height:20px;margin-right:4px}
.wx b{font-size:16px;font-weight:500}
.wx b.wind{margin-right:10px;font-size:15px}
.wx small{font-size:10px;font-weight:500;color:var(--muted);margin-left:2px;letter-spacing:-.1px}
/* 2.70.0 날씨 상태·6시간 — Figma 1055:8387(상태: 아이콘 20 + 4 + Medium 15/16 #0a1e5a)·1055:8872(6칸: 테두리 #2e4890, 칸 57 × (64 흰색 + 64 #f8fafb), 구분선 #e6e6e6) */
.site{position:relative}
.site.has-cond .wx-label{display:none}
.wx-cond{gap:4px;margin-right:16px}
.wx-cond i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}
.wx-cond b{font-size:15px;font-weight:500;line-height:16px;color:#0a1e5a}
.wx-more{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:-4px;padding:0;border:0;background:none;color:var(--navy);cursor:pointer}
.wx-more svg{width:18px;height:18px;transition:transform .15s}
.wx-more.open svg{transform:rotate(180deg)}
.wx-fc{position:absolute;top:calc(100% + 17px);left:176px;z-index:30;display:flex;align-items:center;border:1px solid #2e4890;background:#fff}
.wx-fc-cell{display:flex;flex-direction:column;width:57px;border-right:1px solid #e6e6e6}
.wx-fc-cell:last-child{border-right:0}
.wx-fc-top,.wx-fc-low{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:64px}
.wx-fc-top{height:88px;gap:6px;background:#fff}  /* 2.99.0 Figma 1055:8909: 위 칸 88px, (시각·아이콘) · 강수확률 사이 6px */
.wx-fc-hi{display:flex;flex-direction:column;align-items:center;gap:8px}
.wx-fc-pop{display:flex;align-items:center;gap:4px;font-size:12px;line-height:16px;color:#5077be;white-space:nowrap}
.wx-fc-pop img{width:7px;height:12px}
.wx-fc-low{background:#f8fafb}
.wx-fc-top span{font-size:14px;font-weight:400;line-height:16px;color:#1a1d24;white-space:nowrap}
.wx-fc-top i{display:inline-flex;align-items:center;justify-content:center;height:20px}
.wx-fc-low b{font-size:14px;font-weight:400;line-height:16px;color:#0a1e5a;white-space:nowrap}
.wx-fc-low small{font-size:12px;line-height:16px}
.pb-mode .site.has-cond .wx-label{display:inline}
.pb-mode .wx-cond,.pb-mode .wx-more,.pb-mode .wx-fc{display:none!important}
.controls{display:flex;align-items:center;gap:22px}
.switch{display:flex;align-items:center;gap:12px;color:var(--text);font-size:15px;cursor:pointer}
.switch input{display:none}
.switch i{width:46px;height:22px;border-radius:11px;background:var(--toggle-off);position:relative;transition:background .15s}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.switch input:checked+i{background:var(--blue)}
.switch input:checked+i::after{left:26px}
.seg{display:flex}
.seg button{width:98px;height:34px;border:1px solid var(--line);background:#fff;color:#374e92;font-size:14px;font-weight:500;cursor:pointer}
.seg button:first-child{border-radius:2px 0 0 2px}
.seg button:last-child{border-radius:0 2px 2px 0;margin-left:-1px}
.seg button.on{background:var(--seg-on);border-color:var(--blue);color:var(--blue);font-weight:600;position:relative;z-index:1}
.seg button:disabled{cursor:default}
.map{position:relative;flex:1;min-height:0;background:#fff}
.map canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.map canvas.dragging{cursor:grabbing}
/* 지도 오른쪽 아래 Label On/Off·확대/축소(2.46.0, Figma 대시보드 > SPOT, STAY 아이콘) */
.map-tools{position:absolute;right:31px;bottom:32px;z-index:3;display:flex;align-items:center;gap:16px}
.map-tool,.map-zoom button{width:36px;height:36px;padding:0;border:1px solid var(--line);background:#fff;color:#97a4c8;cursor:pointer;display:flex;align-items:center;justify-content:center}
.map-tool{position:relative;border-radius:6px}
.map-tool svg{width:20px;height:16px}
.map-tool[aria-pressed="false"] svg{opacity:.45}
.map-tool:hover,.map-zoom button:hover{color:var(--blue)}
.map-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:8px 16px;background:#000;color:#fff;font-size:14px;line-height:24px;white-space:nowrap;border-radius:2px;pointer-events:none;display:none}
.map-tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border:5px solid transparent;border-top-color:#000}
.map-tool:hover .map-tip,.map-tool:focus-visible .map-tip{display:block}
.map-zoom{display:flex}
.map-zoom button{color:#7b8389;border-color:#d5d8e6}  /* 2.84.1 Figma 725:5569: 아이콘 #7B8389·1.5, 테두리 #D5D8E6, 바깥 모서리 6px */
.map-zoom button:first-child{border-radius:6px 0 0 6px}
.map-zoom button:last-child{border-radius:0 6px 6px 0;margin-left:-1px}
.map-zoom svg{width:14px;height:14px;stroke-width:1.5}
.switch.disabled{opacity:.45;cursor:default}
/* Play back 순찰 타임라인(2.48.0, Figma Play Back 모드) */
.pb-panel{position:absolute;left:0;bottom:16px;width:min(1206px,calc(100% - 48px));z-index:4;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 4px 16px rgba(10,30,90,.12);padding:14px 18px 10px}
.pb-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;cursor:move;touch-action:none;user-select:none}
.pb-head input,.pb-head button{cursor:pointer}
.pb-panel.moving{box-shadow:0 10px 28px rgba(10,30,90,.22)}
.pb-fold{width:28px;height:28px;padding:0;border:0;background:none;color:var(--muted);display:flex;align-items:center;justify-content:center}
.pb-fold svg{width:20px;height:20px;transition:transform .15s}
.pb-fold:hover{color:var(--blue)}
.pb-panel.folded .pb-fold svg{transform:rotate(180deg)}
.pb-panel.folded .pb-head{margin-bottom:0}
.pb-panel.folded .pb-body,.pb-panel.folded .pb-axis,.pb-panel.folded .pb-msg,.pb-panel.folded .pb-sum{display:none}
.pb-head strong{flex:1;font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:var(--navy)}
.pb-range{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--line);border-radius:3px;color:var(--navy);font-size:14px;font-weight:500}
.pb-range svg{width:16px;height:16px;color:#97a4c8}
.pb-range input{border:0;font:inherit;font-size:14px;font-weight:500;color:var(--navy);background:none;width:124px}
.pb-speed{display:inline-flex;align-items:center;height:32px;border:1px solid var(--line);border-radius:3px}
.pb-speed button{width:30px;height:30px;border:0;background:#fff;color:#acb1b5;cursor:pointer;display:flex;align-items:center;justify-content:center}
.pb-speed button:disabled{opacity:.4;cursor:default}
.pb-speed svg{width:12px;height:12px;stroke-width:1.4}
.pb-speed b{min-width:56px;text-align:center;font-size:14px;font-weight:500;color:var(--navy);border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:30px}
.pb-play{width:32px;height:32px;border-radius:50%;border:0;background:var(--green);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.pb-play svg{width:16px;height:16px}
.pb-play:disabled{background:var(--stale);cursor:default}
.pb-body{display:flex;min-height:28px}
.pb-labels{width:128px;flex:none;font-size:14px;color:var(--text)}
.pb-labels div,.pb-row{height:40px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pb-track{position:relative;flex:1;min-width:0;cursor:pointer;touch-action:none;user-select:none}
.pb-rows{overflow:hidden}
.pb-grid i{position:absolute;top:0;bottom:0;width:1px;background:#eef0f5}
.pb-rows{position:relative}
.pb-row{position:relative}
.pb-block{position:absolute;top:7px;height:26px;padding:0 8px;border:1px solid var(--pb);border-radius:4px;background:#fff;color:var(--text);font-size:14px;font-weight:500;line-height:16px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;text-align:left}
.pb-block span{pointer-events:none}
.pb-block.on{background:color-mix(in srgb,var(--pb) 14%,#fff);font-weight:600}
.pb-cursor{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--blue);pointer-events:none}
.pb-cursor span{position:absolute;top:-2px;left:0;transform:translate(-50%,-100%);padding:3px 12px;border:1px solid var(--blue);border-radius:12px;background:var(--seg-on);color:var(--navy);font-size:14px;font-weight:500;line-height:16px;white-space:nowrap}
.pb-body{padding-top:30px}
.pb-axis{display:flex;height:24px;font-size:12px;font-weight:500;letter-spacing:-.12px;color:var(--muted)}
.pb-axis > div:first-child{width:128px;flex:none}
.pb-ticks{position:relative;flex:1;overflow:hidden}
.pb-ticks span{position:absolute;top:2px;transform:translateX(-50%);white-space:nowrap}
.pb-msg{margin:4px 0 0;font-size:12px;color:var(--muted)}

/* 점검 지점 팝업 */
.point-pop{position:absolute;width:320px;background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 14px rgba(10,30,90,.12);z-index:5}
.pop-head{display:flex;justify-content:space-between;align-items:flex-start;background:var(--pop-head);padding:16px 14px 14px 16px}
.pop-head strong{display:block;font-size:18px;font-weight:500;line-height:24px;color:var(--navy)}
.pop-head small{display:block;margin-top:4px;font-size:14px;color:var(--sub)}
.pop-head button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0;width:20px;height:20px}
.pop-head button svg{width:20px;height:20px}
.point-pop ul{list-style:none;margin:0;padding:14px 24px 16px;display:grid;gap:18px;max-height:360px;overflow:auto}
.point-pop li{display:flex;justify-content:space-between;align-items:center;gap:10px}
.point-pop li span{flex:1;min-width:0;font-size:14px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{flex:none;min-width:84px;height:24px;border-radius:5px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
.badge.NORMAL{background:var(--green-bg);color:var(--green)}
.badge.WARN{background:var(--warn-bg);color:var(--warn)}
.badge.ERROR{background:var(--error-bg);color:var(--error)}
.badge.CRITICAL{background:var(--critical-bg);color:var(--critical)}
.badge.NONE{background:var(--soft);color:var(--stale)}

/* 우측 패널 */
.right{grid-column:3;grid-row:2;border-left:3px solid var(--line);overflow-y:auto;overflow-x:hidden;background:#fff;scrollbar-width:none}
.right::-webkit-scrollbar{display:none}
/* 플로팅 스크롤(2.46.0): 오른쪽 패널을 스크롤하는 동안만 막대 표시, 끌어서 이동 가능 */
.float-thumb{position:fixed;width:4px;border-radius:2px;background:var(--stale);opacity:0;transition:opacity .3s;z-index:6;touch-action:none}
.float-thumb::before{content:"";position:absolute;inset:0 -4px}
.float-thumb.on{opacity:1;transition:opacity .1s}
.float-thumb[hidden]{display:none}
.card{border-bottom:3px solid var(--line)}
.card:last-child{border-bottom:0}
.card h2{margin:0;height:56px;background:var(--soft);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:18px;font-weight:600;line-height:24px;color:var(--navy)}
.pop-icon{width:20px;height:20px;display:inline-block;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237b8389' stroke-width='1.6'%3E%3Cpath d='M15 9V3H3v12h7'/%3E%3Cpath d='M15 12v6M12 15h6'/%3E%3C/svg%3E")}
button.pop-icon{border:0;padding:0;background-color:transparent;cursor:pointer;flex:none}
button.pop-icon:hover{opacity:.7}
/* SPOT 정보 창(2.32.0) */
.spot-body{display:grid;gap:14px}
.spot-card{border:1px solid var(--line);border-radius:6px;padding:14px 18px}
.spot-card h4{margin:0 0 10px;font-size:14px;font-weight:500;color:var(--muted)}
.spot-state{font-size:20px;font-weight:700;cursor:help}
.spot-state.ok{color:var(--green)}.spot-state.bad{color:var(--critical)}.spot-state.dim-text{color:var(--text)}
.spot-card dl{display:grid;grid-template-columns:120px 1fr;row-gap:10px;margin:0;font-size:14px}
.spot-card dt{color:var(--navy)}
.spot-card dd{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spot-card dd b{font-size:18px;font-weight:500}
.spot-card dd small{font-size:12px;color:var(--unit);margin-left:3px}
.spot-progress{display:flex;align-items:center;gap:10px}
.spot-progress span{flex:1;height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.spot-progress i{display:block;height:100%;background:var(--blue)}
/* SPOT 정보 창 LIVE CAM(2.33.0): 왼쪽 크게 보기 + 카메라 목록, 오른쪽 상태 카드. 권한이 없으면 기존(2.32.0) 좁은 창 그대로 */
.spot-box.has-cam{width:min(1320px,96vw)}
.spot-box.has-cam .spot-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.spot-cam{border:1px solid var(--line);border-radius:6px;padding:14px 18px;min-width:0}
.spot-cam[hidden]{display:none}
.lc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.lc-head h4{margin:0;font-size:14px;font-weight:500;color:var(--muted)}
.lc-badge{font-size:12px;font-weight:700;line-height:20px;padding:0 8px;border-radius:10px}
.lc-badge:empty{display:none}
.lc-badge.live{color:#fff;background:var(--critical)}
.lc-badge.live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:5px;vertical-align:1px}
.lc-badge.stale,.lc-badge.paused{color:var(--muted);background:var(--soft);border:1px solid var(--line)}
.lc-badge.limited{color:#8a6a00;background:var(--warn-bg);border:1px solid var(--warn);cursor:help}
.lc-body{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:12px}
.lc-main{position:relative;aspect-ratio:16/10;background:#0c1424;border-radius:4px;overflow:hidden}
.lc-main canvas{display:block;width:100%;height:100%}
.lc-main canvas.pano{cursor:grab;touch-action:none}
.lc-main canvas.pano.dragging{cursor:grabbing}
.lc-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#dfe5f3;font-size:14px;text-align:center;padding:20px;background:rgba(12,20,36,.55)}
.lc-msg[hidden]{display:none}
.lc-compass{position:absolute;left:12px;bottom:12px;width:116px;height:116px}
.lc-compass[hidden]{display:none}
.lc-compass svg{width:100%;height:100%;display:block}
.lc-ring{fill:rgba(255,255,255,.92);stroke:var(--blue);stroke-width:1.5}
.lc-cone{fill:rgba(0,40,182,.22)}
.lc-robot{fill:#ffc700;stroke:#9a7600;stroke-width:1}
.lc-nose{fill:var(--blue)}
.lc-dir{position:absolute;width:24px;height:24px;border:0;border-radius:3px;background:var(--lnb);color:#fff;font-size:12px;font-weight:700;cursor:pointer;padding:0;line-height:24px}
.lc-dir.on{background:var(--blue);box-shadow:0 0 0 2px #fff}
.lc-dir:disabled{background:var(--toggle-off);cursor:default}
.lc-dir-front{left:46px;top:-4px}.lc-dir-back{left:46px;bottom:-4px}.lc-dir-left{left:-4px;top:46px}.lc-dir-right{right:-4px;top:46px}
.lc-ptz{position:absolute;right:12px;bottom:12px;display:grid;grid-template-columns:auto auto;gap:4px 12px;margin:0;padding:10px 14px;border-radius:4px;background:rgba(12,20,36,.72);color:#fff;font-size:14px}
.lc-ptz[hidden]{display:none}
.lc-ptz dt{color:var(--sub);font-weight:500}
.lc-ptz dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.lc-ttip{position:absolute;z-index:3;padding:4px 8px;border-radius:4px;background:rgba(10,20,40,.88);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.lc-ttip[hidden],.lc-tlegend[hidden]{display:none}
.lc-tlegend{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:4px;background:rgba(12,20,36,.72);color:#fff;font-size:14px;font-variant-numeric:tabular-nums;pointer-events:none}
.lc-tlegend i{width:96px;height:10px;border-radius:2px;background:linear-gradient(to right,rgb(0,0,45) 0%,rgb(40,10,110) 15%,rgb(145,15,125) 35%,rgb(225,45,30) 55%,rgb(250,175,0) 75%,rgb(255,235,120) 92%,rgb(255,255,255) 100%)}
.lc-list{display:flex;flex-direction:column;gap:8px;max-height:0;min-height:100%;overflow-y:auto;padding-right:2px}
.lc-thumb{display:block;width:100%;border:2px solid transparent;border-radius:4px;background:#0c1424;padding:0;cursor:pointer;position:relative;flex:none}
.lc-thumb canvas{display:block;width:100%;aspect-ratio:16/9;border-radius:2px}
.lc-thumb span{position:absolute;left:0;right:0;bottom:0;padding:2px 6px;font-size:12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));text-align:left;border-radius:0 0 2px 2px}
.lc-thumb.on{border-color:var(--blue)}
.lc-thumb.off canvas{opacity:.25;filter:grayscale(1)}
.lc-thumb:hover{border-color:var(--sub)}
/* LIVE CAM 확대·축소 버튼, 브라우저 창에 꽉 찬 화면(2.34.0) */
.lc-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.lc-tool{width:32px;height:32px;border:0;border-radius:4px;background:rgba(12,20,36,.62);color:#fff;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center}
.lc-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.lc-tool:hover:not(:disabled){background:rgba(0,40,182,.85)}
.lc-tool:disabled{opacity:.35;cursor:default}
.lc-tool.on{background:var(--blue)}
.lc-tool[hidden]{display:none}
.lc-main.zoomed canvas{cursor:grab;touch-action:none}
.lc-main.zoomed canvas.dragging{cursor:grabbing}
.lc-full-title,.lc-full-close{display:none}
.spot-cam.lc-full{position:fixed;inset:0;z-index:70;border:0;border-radius:0;padding:12px 18px 18px;display:flex;flex-direction:column;background:#fff}
.spot-cam.lc-full .lc-head{flex:none}
.spot-cam.lc-full .lc-full-title{display:block;margin-left:8px;font-size:18px;color:var(--navy)}
.spot-cam.lc-full .lc-full-close{display:flex;margin-left:auto;width:36px;height:36px;border:0;background:none;color:var(--muted);cursor:pointer;padding:6px}
.spot-cam.lc-full .lc-full-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.spot-cam.lc-full .lc-body{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 220px}
.spot-cam.lc-full .lc-main{aspect-ratio:auto;height:100%}
.spot-cam.lc-full .lc-list{max-height:none;min-height:0;height:100%}
/* 온습도 화면(2.36.0): 샘플 대시보드 온습도와 같은 구성, 신규 대시보드 밝은 화면 색 */
.env-page{display:flex;flex-direction:column;flex:none}  /* 내용만큼 늘어나고 페이지가 스크롤(BOX 구역이 많아도 카드 밖으로 넘치지 않게) */
.env-panel{position:relative;gap:0;flex:none}
.env-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.env-seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:4px;background:#fff}
.env-seg button{min-width:64px;height:30px;padding:0 14px;border:0;border-radius:3px;background:transparent;color:var(--muted);font-size:14px;font-weight:600;cursor:pointer}
.env-seg button.on{background:var(--seg-on);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.env-period{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.env-period input[type=date]{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--text);font:inherit;font-size:14px}
.env-quick{display:inline-flex;gap:4px}
.env-quick button{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--muted);font-size:12px;cursor:pointer}
.env-quick button:hover{color:var(--blue);border-color:var(--blue)}
.env-zonebar{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;margin:14px 0 8px;padding:7px 8px 7px 12px;border:1px solid var(--line);border-radius:4px;background:var(--soft)}
.env-zone-summary{display:flex;flex:1;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0;overflow:hidden;font-size:12px}
.env-chip{display:inline-flex;flex:none;align-items:center;gap:6px;height:30px;padding:0 12px;border:1.5px solid var(--zone);border-radius:99px;background:#fff;color:var(--text);font-size:14px;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,transform .1s}
.env-chip::before{width:8px;height:8px;border-radius:50%;background:var(--zone);content:""}
.env-chip.on{background:var(--zone);color:var(--ink)}
.env-chip.on::before{background:var(--ink);opacity:.55}
button.env-chip:active{transform:scale(.97)}
span.env-chip{cursor:default}
.env-more{flex:none;padding:3px 9px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:12px}
.env-zone-toggle{display:inline-flex;flex:none;align-items:center;gap:8px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--text);font-size:14px;cursor:pointer}
.env-zone-toggle b{color:var(--blue);font-variant-numeric:tabular-nums}
.env-caret{display:inline-block;color:var(--muted);transition:transform .2s ease}
.env-zonebar.open .env-caret{transform:rotate(180deg)}
.env-zonebar.open .env-zone-toggle{border-color:var(--blue)}
.env-zone-pop{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:30;padding:14px 16px 12px;border:1px solid var(--line);border-radius:4px;background:#fff;box-shadow:0 10px 30px rgba(10,30,90,.14);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.env-zonebar.open .env-zone-pop{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease}
.env-zone-groups{display:grid;gap:12px;max-height:min(52vh,460px);overflow:auto}
.env-zone-group header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;color:var(--muted);font-size:12px}
.env-zone-group header strong{color:var(--navy);font-weight:600}
.env-zone-group header button{height:24px;margin-left:4px;padding:0 8px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--muted);font-size:12px;cursor:pointer}
.env-chips{display:flex;flex-wrap:wrap;gap:7px}
.env-zone-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.env-zone-foot span{margin-right:auto}
.env-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:24px;margin:6px 2px 10px;color:var(--muted);font-size:12px}
.env-note{color:var(--error)}
.env-chart{position:relative;min-height:200px;transition:opacity .2s}
.env-chart.loading{opacity:.45;pointer-events:none}
.env-empty,.env-error{padding:60px 20px;text-align:center;color:var(--muted);font-size:14px}
.env-error{color:var(--critical)}
.env-echart-line{width:100%;height:420px}
.env-box-panel{margin-bottom:10px;padding:10px 12px 2px;border:1px solid var(--line);border-radius:4px;background:#fff}
.env-box-panel header{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}
.env-echart-box{width:100%;height:180px}
table.env-tip{margin-top:6px;border-collapse:collapse;white-space:nowrap}
table.env-tip td{padding:2px 10px 2px 0;border:0;background:transparent;color:var(--text);font-size:12px}
table.env-tip td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.env-foot{display:flex;justify-content:flex-end;margin-top:8px}
.env-tools{display:flex;align-items:center;gap:6px}
.env-icon{display:grid;place-items:center;width:38px;height:36px;padding:0;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--muted);cursor:pointer}
.env-icon.on{border-color:var(--blue);color:var(--blue);background:var(--seg-on)}
.env-menu-wrap{position:relative}
.env-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;display:grid;gap:2px;min-width:230px;padding:6px;border:1px solid var(--line);border-radius:4px;background:#fff;box-shadow:0 10px 30px rgba(10,30,90,.14);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility 0s linear .15s}
.env-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.env-menu button{display:grid;gap:1px;padding:8px 10px;border:0;border-radius:3px;background:transparent;text-align:left;font-size:14px;color:var(--text);cursor:pointer}
.env-menu button:hover{background:var(--soft)}
.env-menu small{color:var(--muted);font-size:12px}
.env-table h3{margin:16px 0 8px;font-size:14px;color:var(--navy)}
.env-grid{width:100%;height:440px}
.env-grid-zone{display:inline-flex;align-items:center;gap:7px}
.env-grid-zone i{width:9px;height:9px;border-radius:50%}
@media (max-width:900px){.env-toolbar{align-items:stretch}.env-period{order:3;width:100%}.env-echart-line{height:360px}}
/* 설비 진단 현황 팝업(2.35.0) */
.dg-box .modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.dg-top{display:flex;align-items:center;gap:16px;flex:none;flex-wrap:wrap}
.dg-top .pane-tools{margin:0}
.dg-sum{display:flex;gap:10px;margin-left:auto}
.dg-sum div{min-width:120px;border:1px solid var(--line);border-radius:4px;padding:8px 14px;display:grid;gap:2px;background:#fff}
.dg-sum span{font-size:12px;color:var(--navy)}.dg-sum strong{font-size:22px;color:var(--navy)}
.dg-sum .ok strong{color:var(--green)}.dg-sum .bad strong{color:var(--critical)}
.dg-body{flex:1;min-height:0;display:grid;grid-template-columns:220px minmax(0,1fr) minmax(380px,40%);gap:12px}
.dg-tree{border:1px solid var(--line);border-radius:4px;overflow:auto;padding:10px 8px;font-size:14px;background:#fff}
.dg-tree ul{list-style:none;margin:0;padding-left:14px}
.dg-tree-list{padding-left:0!important}
.dg-tree label{display:flex;align-items:center;gap:6px;padding:3px 0;cursor:pointer;color:var(--text)}
.dg-tree label small{margin-left:auto;color:var(--muted);font-size:12px}
.dg-node{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:5px 8px;border-radius:3px;cursor:pointer;font-size:14px;color:var(--text);text-align:left}
.dg-node:hover{background:var(--soft)}
.dg-node.on{background:var(--seg-on);color:var(--blue);font-weight:600}
.dg-node small{margin-left:auto;color:var(--muted);font-size:12px;font-weight:400}
.dg-node.lv-ALL,.dg-node.lv-FACTORY{font-weight:600}
.dg-grid{min-height:0;height:100%}
.dg-detail{border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#fff}
.dg-empty{margin:auto;padding:30px;text-align:center}
.dg-head{padding:10px 14px 0;display:grid;gap:2px}
.dg-head strong{font-size:15px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-head span{font-size:12px}
.dg-tabs{padding:8px 10px 0}
.dg-tabs button{padding:0 14px}
.dg-tabs button:disabled{opacity:.4;cursor:default}
.dg-pane{flex:1;min-height:0;overflow:auto;padding:10px 14px 14px;display:flex;flex-direction:column;gap:10px}
.dg-chips{display:flex;flex-wrap:wrap;gap:6px}
.dg-chips button{height:26px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--muted);font-size:12px;padding:0 10px;cursor:pointer}
.dg-chips button.on{border-color:var(--blue);color:var(--blue);background:var(--seg-on)}
.dg-view{position:relative;background:#0c1424;border-radius:4px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;flex:none}
.dg-view img,.dg-view video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.dg-view .muted{color:#dfe5f3}
.dg-large{position:absolute;top:8px;right:8px}
.dg-timeline{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;flex:none}
.dg-tl{flex:none;width:96px;border:2px solid transparent;border-radius:4px;background:var(--soft);padding:0;cursor:pointer;display:grid;text-align:left}
.dg-tl img,.dg-tl i{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px 2px 0 0;background:#0c1424}
.dg-tl span{font-size:12px;color:var(--text);padding:2px 4px;display:flex;align-items:center;gap:4px;white-space:nowrap}
.dg-tl.on{border-color:var(--blue)}
.dg-tl .dot{width:7px;height:7px;border-radius:50%;flex:none}
.dg-tl .dot.ok{background:var(--green)}.dg-tl .dot.bad{background:var(--critical)}
.dg-info{display:grid;grid-template-columns:90px minmax(0,1fr);row-gap:8px;margin:0;font-size:14px}
.dg-info dt{color:var(--navy)}.dg-info dd{margin:0;min-width:0}
.dg-results{width:100%}
.dg-results td:last-child{text-align:right;white-space:nowrap}
.dg-files{display:flex;flex-direction:column;gap:4px}
.dg-files a{color:var(--blue);text-decoration:none;word-break:break-all}
.dg-files small{color:var(--muted);margin-left:4px}
.dg-map{flex:1;min-height:300px;display:flex;flex-direction:column}
.dg-map canvas{width:100%;flex:1;min-height:260px;border:1px solid var(--line);border-radius:4px}
.dg-full{position:fixed;inset:0;z-index:80;background:#0c1424;display:flex;flex-direction:column}
.dg-full-head{display:flex;align-items:center;gap:12px;padding:10px 18px;background:#fff}
.dg-full-head strong{font-size:16px;color:var(--navy)}
.dg-full-head .lc-full-close{display:flex;margin-left:auto;width:36px;height:36px;border:0;background:none;color:var(--muted);cursor:pointer;padding:6px}
.dg-full-head .lc-full-close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.dg-full-view{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.dg-full-view img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;user-select:none;-webkit-user-drag:none}
/* 정보 팝업 새 창(2.38.0): 머리글 새 창 버튼, 새 창에서는 그 화면만 창 가득 */
.modal-head .popout-btn{margin-left:auto;padding:6px}
.modal-head .popout-btn svg{width:20px;height:20px}
body.popup-mode .app{display:none}
body.popup-mode .modal{background:#fff;align-items:stretch;justify-content:stretch}
body.popup-mode .modal-box{width:100vw!important;height:100vh!important;max-width:none;max-height:none;border-radius:0;box-shadow:none}
.popout-denied{margin:40px;text-align:center}
/* 미션 정보 팝업(2.37.0) */
.ms-xlsx{margin-left:auto}
.ms-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,46%);gap:12px}
.ms-body.no-log{grid-template-columns:minmax(0,1fr)}
.ms-head{display:flex;align-items:flex-start;gap:10px;padding:0 14px 0 0}
.ms-head .dg-head{flex:1;min-width:0}
.ms-head-st{display:flex;gap:4px;padding-top:12px;white-space:nowrap}
.ms-head .csv-btn{margin-top:8px}
.ms-log-grid{flex:1;min-height:0;margin:10px}
.ms-detail-cell{line-height:1.45!important;padding-top:6px!important;padding-bottom:6px!important;word-break:break-word}
.ag-row.ms-planned{color:var(--muted)}
.pill.plan{border:1px dashed var(--blue);color:var(--blue);background:#fff}
@media (max-width:1100px){.ms-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(240px,1fr) minmax(320px,1fr)}}@media (max-width:1300px){.dg-body{grid-template-columns:180px minmax(0,1fr) 360px}}
@media (max-width:1100px){
  .spot-box.has-cam .spot-wrap{grid-template-columns:1fr}
  .lc-body{grid-template-columns:1fr}
  .lc-list{flex-direction:row;max-height:none;min-height:0;overflow-x:auto}
  .lc-thumb{width:150px}
}
.robots{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:30px 24px 30px}
.robot-name{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--navy)}
.robot-line{display:flex;align-items:center;margin-top:16px;white-space:nowrap}
.battery{width:20px;height:10px;border:1px solid currentColor;border-radius:1px;position:relative;margin-right:10px;padding:1px;display:flex;gap:1px}
.battery::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;background:currentColor}
.battery i{flex:1;background:transparent}
.battery i.on{background:currentColor}
.robot-line b{font-size:18px;font-weight:500;color:var(--text)}
.robot-line small{font-size:12px;color:var(--muted);margin-left:2px}
.robot-line .bar{width:1px;height:12px;background:var(--line);margin:0 12px}
.robot-line .state{font-size:15px;font-weight:500}
.ok{color:var(--green)}.st-WARN{color:var(--warn)}.st-ERROR{color:var(--error)}.st-CRITICAL,.bad{color:var(--critical)}.dim-text{color:var(--muted)}
.diag{display:grid;grid-template-columns:176px 1fr;row-gap:22px;margin:0;padding:24px 24px 26px;font-size:15px;line-height:16px}
.diag dt{color:var(--navy)}
.diag dd{margin:0;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.diag .bar{display:inline-block;width:1px;height:12px;background:var(--line);margin:0 10px;vertical-align:-1px}
.diag small{font-size:12px;font-weight:400;color:var(--muted);margin-left:4px}
.zones{padding:22px 24px 26px;display:grid;gap:22px}
.zones h3{margin:0 0 10px;font-size:15px;font-weight:500;color:var(--navy)}
/* 구역별 온/습도: AG Grid Community(테마는 monitor.js zoneTheme) */
.h2-tools{display:flex;align-items:center;gap:14px}
.csv-btn{height:24px;padding:0 9px;border:1px solid var(--line);border-radius:2px;background:#fff;color:var(--navy);font-size:12px;cursor:pointer}
.csv-btn:hover{border-color:var(--blue);color:var(--blue)}
.zgrid b{font-size:15px;font-weight:500;color:var(--text)}
.zgrid .ag-layout-auto-height{min-height:0 !important}
.zgrid small{font-size:12px;color:var(--muted);margin-left:2px;letter-spacing:-.12px}
.zgrid b.WARN{color:#e6b400}.zgrid b.DANGER{color:var(--critical)}.zgrid b.stale{color:var(--stale)}
.missions{padding:22px 24px 26px;display:grid;gap:22px}
.mission h3{margin:0 0 14px;font-size:16px;font-weight:500;color:var(--navy)}
.mission dl{display:grid;grid-template-columns:178px 1fr;row-gap:16px;margin:0;font-size:15px;line-height:16px}
.mission + .mission{border-top:1px solid var(--line);padding-top:22px}  /* 로봇 사이 구분선(2.47.0, Figma 미션 정보) */
.mission dt{color:var(--navy)}
.mission dd{margin:0;white-space:nowrap;display:flex;align-items:center;min-width:0}
.mission dd .name{overflow:hidden;text-overflow:ellipsis;min-width:0}
.mission .bar{display:inline-block;width:1px;height:12px;background:var(--line);margin:0 10px;vertical-align:-1px}

/* 로그인(2.26.0) */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--soft);overflow:auto}
.login-card{width:400px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 30px rgba(10,30,90,.10);overflow:hidden}
.login-brand{background:var(--lnb);height:84px;display:flex;align-items:center;justify-content:center}
.login-brand img{height:28px}
.login-form{display:grid;gap:16px;padding:30px 36px 8px}
.login-form h1{margin:0 0 4px;font-size:20px;color:var(--navy)}
.login-form label,.form-grid label{display:grid;gap:6px;font-size:14px;color:var(--navy)}
.login-form input,.form-grid input:not([type=checkbox]),.form-grid select,.form-grid textarea,.pane-tools input,.pane-tools select{
  height:38px;border:1px solid var(--line);border-radius:3px;padding:0 12px;font:inherit;font-size:15px;color:var(--text);background:#fff}.al-input::placeholder{font-size:14px;color:var(--muted)}
.form-grid textarea{height:auto;padding:8px 12px;resize:vertical}
.login-form input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.pane-tools input:focus{outline:2px solid #b9c8f0;border-color:var(--blue)}
.form-grid input:disabled{background:var(--soft);color:var(--muted)}
.btn-primary{height:38px;border:0;border-radius:3px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;padding:0 18px;cursor:pointer}
.btn-primary:disabled{opacity:.6;cursor:default}
.btn-line{height:38px;border:1px solid var(--blue);border-radius:3px;background:#fff;color:var(--blue);font-size:14px;padding:0 14px;cursor:pointer}
.btn-link{border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;justify-self:center}
.form-error{margin:0;color:var(--critical);font-size:14px}
.form-ok{margin:0;color:var(--green);font-size:14px}
.form-help{margin:0;color:var(--muted);font-size:14px}
.form-meta{margin:0;color:var(--muted);font-size:12px}
/* 언어 선택(2.30.0): 로그인 화면 오른쪽, 내 정보 창 맨 위 */
.login-lang{display:flex;justify-content:flex-end;padding:14px 36px 0}
.login-lang select{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--navy);font:inherit;font-size:14px}
.me-lang-row{margin-bottom:14px}
.login-foot{display:flex;justify-content:center;padding:22px 0 26px}
.login-foot img{height:20px;opacity:.66;filter:brightness(0) saturate(100%) invert(26%) sepia(47%) saturate(1000%) hue-rotate(205deg)}
/* 창(내 정보·사용자 관리) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.2);display:flex;flex-direction:column;max-height:92vh}
.modal-sm{width:560px}.modal-lg{width:min(1500px,96vw);height:86vh}
.modal-head{height:56px;background:var(--soft);display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 24px;border-bottom:1px solid var(--line);flex:none}
.modal-head strong{font-size:18px;color:var(--navy)}
.modal-close{border:0;background:none;color:var(--muted);cursor:pointer;width:32px;height:32px;padding:4px}
.modal-body{padding:22px 24px;overflow:auto;flex:1;min-height:0}
.modal-body[hidden]{display:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-items:end}
.form-grid .wide{grid-column:1/-1}
.form-grid label.check{display:flex;align-items:center;gap:8px;height:38px;font-size:14px;color:var(--text)}
.form-grid label.check input{width:16px;height:16px;accent-color:var(--blue)}
.form-actions{display:flex;justify-content:flex-end;gap:8px}
.form-section{margin:26px 0 14px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;color:var(--navy)}
.tabs{display:flex;gap:4px;padding:10px 24px 0;border-bottom:1px solid var(--line);flex:none}
.tabs button{height:36px;padding:0 18px;border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0;background:none;color:var(--muted);font-size:14px;cursor:pointer}
.tabs button.on{border-color:var(--line);background:#fff;color:var(--blue);font-weight:600;margin-bottom:-1px}
.admin-split{display:grid;grid-template-columns:1fr 420px;gap:24px;height:100%}
.admin-list{display:flex;flex-direction:column;gap:10px;min-height:0}
.admin-grid{flex:1;min-height:300px}
.admin-grid.logs{height:calc(100% - 52px)}
.user-form{align-content:start;overflow:auto}
.user-form h3{margin:0;font-size:16px;color:var(--navy)}
.reset-row{display:flex;align-items:end;gap:8px;padding-top:14px;border-top:1px dashed var(--line)}
.reset-row label{flex:1}
.pane-tools{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pane-tools label{display:grid;gap:4px;font-size:12px;color:var(--navy)}
.pane-tools .csv-btn{height:38px}
.admin-grid .log-fail{color:var(--critical);font-weight:600}

/* 관리 창 설정 탭(2.27.0) */
.set-group{margin-bottom:22px}
.set-group h3{margin:0 0 8px;font-size:15px;color:var(--navy)}
.set-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.set-table td:last-child{width:84px}
.set-table th,.set-table td{border-top:1px solid var(--line);padding:10px 10px;vertical-align:middle;text-align:left}
.set-table tr:last-child th,.set-table tr:last-child td{border-bottom:1px solid var(--line)}
.set-table th{width:230px;font-weight:400}
.set-table th b{display:block;color:var(--navy);font-weight:600}
.set-table small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.set-value{width:260px;white-space:nowrap}
.set-value input,.set-value select{height:34px;width:190px;border:1px solid var(--line);border-radius:3px;padding:0 10px;font:inherit;font-size:14px}
.set-value .unit{margin-left:6px;color:var(--muted)}
/* 고르기 화면(2.47.1): 지도 겹침 순서 이름 나열 + [수정], 구역 온습도 그룹 체크박스 */
.set-value .set-layers{display:block;white-space:normal;line-height:1.6;color:var(--text);margin-bottom:6px}
.set-value .set-checks{display:flex;flex-wrap:wrap;gap:6px 14px;white-space:normal}
.set-value .set-checks label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.set-value .set-checks input{width:15px;height:15px;padding:0;margin:0;accent-color:var(--blue)}
.layer-box{width:440px}
.layer-end{margin:0 0 6px;font-size:12px;color:var(--muted)}
.layer-base + .layer-end{margin:6px 0 0}
.layer-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:4px}
.layer-list li{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 12px;border-top:1px solid var(--line);background:#fff;cursor:grab;user-select:none}
.layer-list li:first-child{border-top:0}
.layer-list li.dragging{opacity:.5;background:var(--seg-on)}
.layer-grip{color:var(--muted);letter-spacing:-2px}
.layer-name{flex:1;color:var(--navy);font-size:14px}
.layer-list button{width:30px;height:30px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--navy);cursor:pointer;font-size:12px}
.layer-list button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.layer-list button:disabled{opacity:.35;cursor:default}
.layer-base{margin-top:6px;height:40px;display:flex;align-items:center;padding:0 12px;border:1px dashed var(--line);border-radius:4px;background:var(--soft);color:var(--muted);font-size:14px}
.layer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.layer-actions span{display:flex;gap:8px}
.set-desc{color:var(--text);line-height:1.5}
.set-meta{width:150px;color:var(--muted);font-size:12px}
.set-table .btn-line{height:32px;padding:0 12px}
.set-reason{width:420px}
.admin-grid.history{height:260px;flex:none}

/* 설정 저장 확인 창(2.28.1) */
.set-note{margin:0 0 10px}
.set-dialog{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center}
.set-dialog-box{width:440px;background:#fff;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.25);padding:22px 24px;display:grid;gap:14px}
.set-dialog-box strong{font-size:16px;color:var(--navy)}
.set-dialog-change{margin:0;display:flex;align-items:center;gap:10px;font-size:15px}
.set-dialog-change span:first-child{color:var(--muted);text-decoration:line-through}
.set-dialog-change span:last-child{color:var(--blue);font-weight:600}
.set-dialog-change b{color:var(--muted);font-weight:400}
.set-dialog-box label{display:grid;gap:6px;font-size:14px;color:var(--navy)}
.set-dialog-box input{height:38px;border:1px solid var(--line);border-radius:3px;padding:0 12px;font:inherit;font-size:14px}
.set-dialog-box input:focus{outline:2px solid #b9c8f0;border-color:var(--blue)}

/* 실행 일정·로케이션 기준정보·수집 운영 화면(2.29.0) */
body[data-page]:not([data-page="dashboard"]) .center,body[data-page]:not([data-page="dashboard"]) .right{display:none}
.page{grid-column:2/4;grid-row:2;display:flex;flex-direction:column;min-height:0;padding:20px 24px;gap:12px;background:var(--soft);overflow:auto}
.page-bar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:0}
.page-bar label{display:grid;gap:4px;font-size:12px;color:var(--navy)}
.page-bar label.check{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text);height:34px}
.page-bar input:not([type=checkbox]),.page-bar select{height:34px;border:1px solid var(--line);border-radius:3px;padding:0 10px;font:inherit;font-size:14px;background:#fff;color:var(--text)}
.page-bar input[type=search]{width:240px}
.page-spacer{flex:1}
.page-time{color:var(--muted);font-size:12px;align-self:center}
.page-grid{flex:1;min-height:420px}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:3px;font-size:12px;font-weight:600;background:#eef0f4;color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--green-bg);color:var(--green)}.pill.warn{background:var(--warn-bg);color:#c99a00}.pill.bad{background:var(--critical-bg);color:var(--critical)}.pill.run{background:var(--seg-on);color:var(--blue)}
.muted{color:var(--muted)}
.cell-warn{color:#c99a00}
.btn-sm{height:30px;padding:0 10px;font-size:14px}
.btn-danger{height:38px;border:1px solid var(--critical);border-radius:3px;background:#fff;color:var(--critical);padding:0 14px;cursor:pointer;font-size:14px}
.link{border:0;background:none;padding:0;color:var(--blue);cursor:pointer;font:inherit;text-align:left}
.link:hover{text-decoration:underline}
.ops-cards{display:grid;grid-template-columns:repeat(3,minmax(0,280px));gap:12px}
.ops-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 16px;display:grid;gap:4px}
.ops-card span{font-size:14px;color:var(--navy)}.ops-card strong{font-size:22px;color:var(--navy)}.ops-card strong.ok{color:var(--green)}.ops-card strong.bad{color:var(--critical)}
.ops-card small{font-size:12px;color:var(--muted)}
.v-ins{color:var(--green);font-weight:600}.v-upd{color:var(--blue);font-weight:600}.v-del{color:#c99a00;font-weight:600}.v-err{color:var(--critical);font-weight:700}
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;font-size:14px}
.modal-md{width:min(1000px,94vw)}
.modal-grid{height:calc(86vh - 230px);min-height:300px}
.simple-table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:14px}
.simple-table th{background:var(--thead);color:var(--navy);font-weight:500;text-align:left;padding:7px 10px;border:1px solid var(--line)}
.simple-table td{padding:7px 10px;border:1px solid var(--line)}
.loc-layout{display:grid;grid-template-columns:360px 1fr;gap:14px;flex:1;min-height:0}
.page-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.card-head{display:flex;align-items:center;justify-content:space-between}
.card-head h2{margin:0;font-size:16px;color:var(--navy)}
.loc-tree-tools{display:flex;align-items:center;gap:6px;font-size:14px}
.loc-tree-tools .muted{margin-left:auto}
.loc-tree{flex:1;overflow:auto;font-size:14px}
.loc-tree ul{list-style:none;margin:0;padding-left:16px}.loc-tree .loc-root{padding-left:0}
.loc-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:3px}
.loc-zone{cursor:pointer;border-left:4px solid var(--zone)}.loc-zone:hover{background:var(--soft)}
.loc-zone.target{background:var(--seg-on);outline:1px solid var(--blue)}.loc-zone.drop{background:#dff3e4;outline:2px dashed var(--green)}
.loc-toggle{border:0;background:none;width:18px;cursor:pointer;color:var(--muted)}
.loc-level{font-size:12px;color:var(--muted);min-width:52px}
.loc-count{margin-left:auto;font-size:12px;color:var(--muted)}
.loc-element{display:flex;align-items:center;gap:6px;padding:3px 6px}.loc-element[draggable=true]{cursor:grab}
.loc-element.gone .link{color:var(--muted);text-decoration:line-through}
.loc-x{border:0;background:none;color:var(--muted);cursor:pointer;margin-left:auto;font-size:15px}.loc-x:hover{color:var(--critical)}
.loc-list-card.drop-unassign{outline:2px dashed var(--critical)}
.loc-actions{display:flex;align-items:center;gap:10px;font-size:14px;flex-wrap:wrap}
.loc-status{margin:0;font-size:14px;min-height:18px;color:var(--muted)}.loc-status.ok{color:var(--green)}.loc-status.bad{color:var(--critical)}
.loc-grid{min-height:360px}
.zone-chip{display:inline-flex;align-items:center;gap:6px;font-size:14px}.zone-chip::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--zone)}
.sensor-chip{display:inline-block;margin-right:4px;padding:0 6px;border-radius:3px;font-size:12px;line-height:18px;border:1px solid var(--c);color:var(--c)}
.sensor-chip.main{background:var(--c);color:#fff}
.grip{cursor:grab;color:var(--muted);font-size:16px;user-select:none}
.cell-edit{background:#fbfcff}
.loc-editor{display:grid;grid-template-columns:340px 1fr;gap:20px;height:100%}
.loc-editor-list{display:flex;flex-direction:column;gap:10px;overflow:auto;border-right:1px solid var(--line);padding-right:16px}
.loc-editor-list ul{list-style:none;margin:0;padding-left:14px}.loc-editor-list .loc-edit-root{padding-left:0}
.loc-edit-item{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;text-align:left;padding:5px 6px;border-radius:3px;cursor:pointer;font:inherit;font-size:14px}
.loc-edit-item:hover{background:var(--soft)}.loc-edit-item.selected{background:var(--seg-on);color:var(--blue);font-weight:600}
.loc-edit-item.drop-before{box-shadow:inset 0 2px 0 var(--blue)}.loc-edit-item.drop-after{box-shadow:inset 0 -2px 0 var(--blue)}.loc-edit-item.drop-into{outline:2px dashed var(--blue)}
.loc-swatch{width:10px;height:10px;border-radius:2px;background:var(--zone)}
.loc-editor-form{overflow:auto}
.loc-editor-form h3{margin:0;font-size:16px;color:var(--navy)}
.loc-history h4{margin:20px 0 8px;font-size:14px;color:var(--navy)}
.color-field{display:flex;align-items:center;gap:8px}.form-grid .color-field input{width:52px;height:34px;padding:2px}

/* 2.29.2: 샘플과 같은 표시 */
.ops-reason{color:var(--critical);font-size:12px;margin-left:4px}
.loc-list-count{margin:0;font-size:12px}
.loc-grid .ag-row[draggable=true]{cursor:grab}
/* 표 값 정렬: 가운데(날짜·시간·상태·여부·코드), 숫자는 AG Grid 기본 오른쪽 정렬 클래스 */
.grid-center-cell{text-align:center;justify-content:center}
.grid-center-header .ag-header-cell-label{justify-content:center}

/* 메인 지도 영역 편집(2.40.0, AREA_MANAGE) */
.ae-open{position:absolute;left:16px;top:14px;z-index:4;height:32px;padding:0 14px;border:1px solid var(--blue);border-radius:3px;background:#fff;color:var(--blue);font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(10,30,90,.1)}
.ae-open:hover{background:var(--seg-on)}
.ae-bar{position:absolute;left:12px;top:12px;right:312px;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;background:#fff;border:1px solid var(--blue);border-radius:6px;box-shadow:0 4px 14px rgba(10,30,90,.12)}
.ae-bar strong{font-size:14px;color:var(--blue);margin-right:4px}
.ae-group{display:flex;gap:4px}
.ae-bar button{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--navy);font-size:14px;cursor:pointer}
.ae-bar button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.ae-bar button:disabled{opacity:.45;cursor:default}
.ae-bar button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.ae-bar kbd{font:inherit;font-size:12px;opacity:.75;margin-left:2px}
.ae-bar .ae-save{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.ae-bar .ae-save:hover:not(:disabled){color:#fff}
.ae-check{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text);cursor:pointer}
.ae-check input{width:15px;height:15px;accent-color:var(--blue)}
@media (max-width:1700px){.ae-bar{gap:6px;padding:8px 10px}.ae-bar button{height:28px;padding:0 8px;font-size:13px}.ae-bar kbd{display:none}.ae-bar .ae-check{font-size:13px}}
.ae-status{font-size:12px;color:var(--muted);flex-basis:100%}
.ae-status:empty{display:none}
.ae-status.ok{color:var(--green)}
.ae-status.bad{color:var(--critical)}
.ae-side{position:absolute;right:12px;top:12px;bottom:12px;width:288px;z-index:4;overflow:auto;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 14px rgba(10,30,90,.12);font-size:14px;color:var(--text)}
.ae-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.ae-head strong{font-size:15px;color:var(--navy)}
.ae-head small{color:var(--muted);font-size:12px}
.ae-form{display:grid;gap:10px;padding-bottom:14px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.ae-form label{display:grid;gap:4px;font-size:12px;color:var(--sub)}
.ae-form input:not([type=checkbox]):not([type=color]),.ae-form select,.ae-form textarea{height:32px;border:1px solid var(--line);border-radius:3px;padding:0 10px;font:inherit;font-size:14px;color:var(--text);background:#fff}
.ae-form textarea{height:auto;padding:6px 10px;resize:vertical}
.ae-form label.ae-check{display:flex;font-size:14px;color:var(--text)}
.ae-checks{display:flex;flex-wrap:wrap;gap:4px 16px}
.ae-color{display:flex;gap:8px;align-items:center}
.ae-color input{width:56px;height:32px;padding:2px;border:1px solid var(--line);border-radius:3px;background:#fff}
.ae-color button,.ae-actions button{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--navy);font-size:12px;cursor:pointer}
.ae-actions{display:flex;justify-content:space-between;gap:8px}
.ae-actions .ae-danger{border-color:var(--critical);color:var(--critical)}
.ae-summary{display:flex;gap:16px;margin:0 0 8px}
.ae-summary div{display:grid;gap:2px}
.ae-summary dt{font-size:12px;color:var(--muted)}
.ae-summary dd{margin:0;font-weight:600;color:var(--navy)}
.ae-summary dd.ok{color:var(--green)}
.ae-summary dd.bad{color:var(--critical)}
.ae-errors{list-style:none;margin:0 0 10px;padding:8px 10px;background:#fff4f4;border-radius:4px;display:grid;gap:4px;max-height:150px;overflow:auto}
.ae-errors li{cursor:pointer;color:var(--critical);font-size:12px}
.ae-side h4{margin:6px 0;font-size:14px;color:var(--navy)}
.ae-list details{margin-bottom:6px}
.ae-list summary{cursor:pointer;font-weight:600;color:var(--navy);padding:2px 0}
.ae-list summary small{color:var(--muted);font-weight:400}
.ae-item{display:flex;align-items:center;gap:6px;width:100%;border:0;background:none;padding:4px 6px;border-radius:3px;text-align:left;font-size:12px;color:var(--text);cursor:pointer}
.ae-item i{width:10px;height:10px;border-radius:2px;flex:none}
.ae-item small{color:var(--muted);margin-left:auto}
.ae-item:hover{background:var(--soft)}
.ae-item.selected{background:var(--seg-on);color:var(--blue)}
.ae-item.bad{color:var(--critical)}
.ae-item.hidden-area{opacity:.55}
.map canvas.ae-picking{cursor:crosshair}
/* Setting 화면(2.41.0, Figma "설정>알람 서비스 관리"): 왼쪽 하위 탭 + 오른쪽 내용 */
.page.page-setting{padding:0;gap:0;overflow:hidden;background:#fff}
.setting{display:grid;grid-template-columns:317px minmax(0,1fr);height:100%;min-height:0}
/* 2.99.0: 온습도 기준 탭(2.97.0 통합)은 설정 칸(위) + 구역 기준 표(아래) 두 칸이 함께 보임 — 내용 칸은 늘 오른쪽 열, 메뉴는 두 줄을 차지 */
.setting>.setting-pane{grid-column:2}
.setting>.setting-tabs{grid-row:1/-1}
.setting:has(>[data-spane=settings]:not([hidden])):has(>[data-spane=envstd]:not([hidden])){grid-template-rows:auto minmax(0,1fr)}
.setting-tabs{display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);overflow:auto}
.setting-tabs button{flex:none;height:56px;padding:0 24px;border:0;border-bottom:1px solid var(--line);background:#fff;color:var(--navy);font-size:16px;font-weight:500;line-height:24px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:8px}
.setting-tabs button[hidden]{display:none}
.setting-tabs button:hover{background:var(--soft)}
.setting-tabs button.on{background:var(--seg-on);color:var(--blue);font-weight:500}
/* Setting 탭 묶음(2.56.0): 묶음 제목(접기·펼치기) 아래 탭 */
.setting-tabs .stab-group,.setting-tabs .stab-items{display:flex;flex-direction:column;flex:none}
.setting-tabs .stab-group[hidden]{display:none}
.setting-tabs button.stab-ghead{height:44px;padding:0 20px 0 24px;background:var(--soft);color:var(--muted);font-size:14px;font-weight:600;justify-content:space-between;border-bottom:1px solid var(--line)}
.setting-tabs button.stab-ghead:hover{background:#eef1f7;color:var(--navy)}
.stab-ghead i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.stab-group.collapsed .stab-ghead i{transform:rotate(-45deg)}
.stab-group.collapsed .stab-items{display:none}
.setting-tabs .stab-items button{padding-left:40px}
.elemname-pane .elem-card{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.elemname-pane .elem-grid{flex:1;min-height:420px}
.setting-pane{min-height:0;overflow:auto;padding:20px 24px;display:flex;flex-direction:column;gap:12px;background:var(--soft)}
.setting-pane[hidden]{display:none}
.setting-pane>.admin-split{flex:1;min-height:560px}
.setting-pane .admin-grid.logs{flex:1;height:auto;min-height:420px}
.setting-pane .set-dialog{position:fixed}
.loc-pane .loc-host{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.al-body .form-error,.al-body .form-ok{margin:0}  /* 내 정보 탭(2.42.2)도 알람 설정과 같은 틀(.al-card·.al-row·스위치) */
.me-pane .al-select{width:256px}
.al-input:disabled{background:var(--soft);color:var(--muted);cursor:default}
.me-pane .al-switch input:checked+i,.user-pane .al-switch input:checked+i{background:var(--blue)}  /* 대시보드 메인 스위치와 같은 색 */
.me-pane .al-select,.user-pane .al-select{width:256px}
/* 사용자 탭(2.42.2): 왼쪽 사용자 표 · 오른쪽 사용자 추가/수정(알람 설정과 같은 틀) */
.setting-pane.al-pane.user-pane{grid-template-columns:minmax(0,1fr) 600px}
.user-pane .al-title{margin-left:32px;margin-right:32px}
.user-pane .al-body{padding-left:32px;padding-right:32px}
.al-title-btn{margin-left:auto}
.al-body.user-list{display:flex;flex-direction:column;padding-top:24px}
.user-list .admin-grid{flex:1;min-height:300px}
.al-input.al-textarea{width:256px;height:auto;min-height:88px;padding:8px 12px;line-height:1.5;resize:vertical}
.al-body .form-meta{margin:0;color:var(--muted);font-size:12px}
/* 2.42.5: 숨김 행·항목(관리자에게 숨기는 미구현 항목, 숨긴 연락처 칸), 테스트 베드가 없으면 규칙 영역이 전체 폭 */
.al-row[hidden],.al-check[hidden],.al-card[hidden]{display:none}
.setting-pane.al-pane:has(> .al-test[hidden]){grid-template-columns:minmax(0,1fr)}
.al-switch .dev-badge{margin-left:4px}
.dev-badge{display:inline-block;margin-left:6px;padding:0 6px;border:1px dashed var(--error);border-radius:8px;background:var(--error-bg);color:#c2410c;
  font-style:normal;font-size:12px;font-weight:600;line-height:16px;white-space:nowrap;vertical-align:middle}
.lnb-menu a[aria-disabled] .dev-badge{margin-left:8px}
.seg button .dev-badge{margin-left:4px}
/* Alarm Service: 왼쪽 기본 경보 전송 규칙(821) · 오른쪽 가상 발송 테스트 베드(688), 아래 버튼 줄 76px */
.setting-pane.al-pane{display:grid;grid-template-columns:minmax(560px,821fr) minmax(420px,688fr);gap:1px;padding:0;background:var(--line);overflow:hidden}
.setting-pane.al-pane[hidden]{display:none}
.al-card{display:flex;flex-direction:column;min-height:0;background:#fff}
.al-title{flex:none;margin:47px 48px 0;padding-bottom:12px;border-bottom:1px solid #b7bdcc;font-size:20px;font-weight:600;line-height:24px;color:var(--navy);display:flex;align-items:center}
.al-body{flex:1;min-height:0;overflow:auto;padding:32px 48px 24px}
.al-row{display:grid;grid-template-columns:200px max-content 32px;column-gap:24px;align-items:center;min-height:40px;margin-bottom:24px;font-size:15px;line-height:16px}
.al-row.al-top{align-items:start}
.al-row.al-top .al-label{line-height:40px}
.al-label{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-switch{gap:12px}
.al-switch .al-onoff{min-width:28px;font-weight:400;font-size:15px;color:var(--text)}
.al-switch input:checked+i{background:var(--green)}
.al-list{display:grid;gap:8px}
.al-input,.al-select{width:256px;height:40px;border:1px solid var(--line);border-radius:2px;padding:0 12px;font:inherit;font-size:15px;color:var(--text);background:#fff}.al-input::placeholder{font-size:14px;color:var(--muted)}
.al-select{width:344px}
.al-input:focus,.al-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.al-add{width:32px;height:32px;margin-top:4px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.al-add svg{width:14px;height:14px;stroke-width:2.2}
.al-add:hover{border-color:var(--blue);color:var(--blue)}
.al-ev{grid-template-columns:200px 1fr}
.al-checks{display:flex;flex-wrap:wrap;gap:8px 24px}
.al-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;color:var(--navy)}
.al-check input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.al-check .dev-badge{margin-left:0}
.al-stats{margin:0;display:grid;grid-template-columns:max-content max-content;column-gap:24px;row-gap:16px;line-height:16px}
.al-stats dt{color:var(--text);font-weight:500}
.al-stats dd{margin:0;text-align:right}
.al-stats dd b{font-weight:500;margin-right:4px}.al-stats dd{color:var(--muted)}.al-stats dd b{color:var(--text)}
.al-foot{flex:none;height:76px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 24px}
.al-foot button{height:48px;min-width:136px;padding:0 24px;font-size:16px;font-weight:500;line-height:24px}
#al-error{margin:0}
/* 용어 관리(2.43.0) */
.setting-pane.al-pane.term-pane{grid-template-columns:minmax(0,1fr)}
.term-tools{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400}
.term-tools .term-search{width:220px;height:34px}
.term-tools .term-screen{width:180px;height:34px}
.term-tools .switch{font-size:14px}
.al-body.term-body{display:flex;flex-direction:column;gap:10px;padding-top:20px}
.term-body .term-grid{flex:1;min-height:420px}
.term-body .form-section{margin:6px 0 0}
.ag-cell.term-changed{color:var(--blue);font-weight:600}
.term-hhead{display:flex;align-items:center;gap:10px;margin-top:6px}
.term-hhead .form-section{margin:0}
.term-hhead .term-search{margin-left:auto;width:220px;height:34px}
.term-scope{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 10px;border-radius:12px;background:var(--seg-on);color:var(--blue);font-size:14px}
.term-scope[hidden]{display:none}
.term-scope button{border:0;background:none;color:inherit;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.term-scope svg{width:14px;height:14px}
/* 구역 온습도 기준(2.49.0): 빈 칸은 공통 기준을 회색으로 */
.ag-cell.envstd-default{color:#a3abbd;font-style:italic}
.envstd-grid .ag-header-group-cell-label{justify-content:center}
.envstd-check{width:16px;height:16px;cursor:pointer;accent-color:var(--blue)}
.dev-badge[hidden]{display:none}  /* '기능 없음'은 슈퍼관리자에게만(2.43.1) */

/* 설비 진단 현황 창(2.49.0, Figma '점검 알람/이벤트' 형태) */
.dgf-top{display:flex;align-items:center;gap:16px;flex:none;flex-wrap:wrap}
.dgf-tabs{display:flex}
.dgf-tab{min-width:120px;height:62px;border:0;border-top:3px solid #b4bbcf;background:#eef0f4;display:grid;align-content:center;justify-items:center;gap:2px;cursor:pointer;color:#7a8296;font-size:14px}
.dgf-tab strong{font-size:22px;line-height:1.1}
.dgf-tab.dgf-all{border-color:var(--blue);background:#dfe7fb;color:var(--blue)}
.dgf-tab.dgf-normal{border-color:var(--green);background:#e8f6ea;color:var(--green)}
.dgf-tab.dgf-anomaly{border-color:var(--critical);background:#fde8e8;color:var(--critical)}
.dgf-tab.on{box-shadow:inset 0 0 0 2px currentColor}
.dgf-form{margin:0 0 0 auto;display:flex;align-items:center;gap:8px}
.dgf-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.dgf-body.with-detail{grid-template-columns:minmax(0,1fr) 420px}
.dgf-detail{border:1px solid var(--line);border-radius:4px;background:#f5f7fb;padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.dgf-detail[hidden]{display:none}
.dgf-dhead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;color:var(--navy)}
.dgf-view{min-height:260px;background:#e9edf5;display:flex;align-items:center;justify-content:center;border-radius:4px;overflow:hidden}
.dgf-view img,.dgf-view video{max-width:100%;max-height:440px}
.dgf-view img{cursor:zoom-in}
.dgf-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dgf-thumbs button{width:64px;height:40px;border:1px solid var(--line);background:#fff;padding:0;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dgf-thumbs button.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.dgf-thumbs img{width:100%;height:100%;object-fit:cover}
.dgf-play{width:18px;height:18px;border:1.5px solid #7a8296;border-radius:50%;position:relative}
.dgf-play::after{content:"";position:absolute;left:6px;top:4px;border-left:6px solid #7a8296;border-top:4px solid transparent;border-bottom:4px solid transparent}
/* Setting > API 오류(2.54.0) */
.apierr-health{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.apierr-health li{display:grid;grid-template-columns:200px 180px 1fr;gap:10px;align-items:center;padding:6px 10px;border-radius:3px;font-size:14px}
.apierr-warn.warn{background:#fff6e0;border-left:3px solid #e8a33d}
.apierr-warn.danger{background:#fde8e8;border-left:3px solid #e5484d}
.apierr-warn small{color:var(--muted,#6b7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apierr-ok{color:#2f7d4f;background:#eaf6ee;border-left:3px solid #2f9e5b}
.apierr-count{font-size:14px;color:var(--muted,#6b7280);margin:0 8px}
.apierr-grid{height:360px}
.apierr-grid .apierr-open .ag-cell:first-child{color:#c2410c;font-weight:600}
.apierr-detail{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.apierr-detail .admin-grid{height:220px}
/* Setting > 인증서(2.55.0, cert.js) */
.cert-body{display:flex;flex-direction:column;gap:12px;overflow:auto}
.cert-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cert-card{border:1px solid var(--line);border-radius:4px;padding:16px 20px;background:#fff}
.cert-card .form-section{margin-top:0}
.cert-dl{display:grid;grid-template-columns:130px 1fr;row-gap:10px;margin:0 0 12px;font-size:14px;line-height:20px}
.cert-dl dt{color:var(--navy)}.cert-dl dd{margin:0;color:var(--text);word-break:break-all}
.cert-dl code{font-size:12px;word-break:break-all}
.cert-https{margin:0;color:var(--critical);font-size:14px}
.cert-form{max-width:760px}.cert-form.off{opacity:.5;pointer-events:none}
.cert-form input[type=file]{font:inherit;font-size:14px}
.cert-foot{justify-content:flex-start;padding:4px 0 8px;border:0}
.cert-checks{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px;font-size:14px}
.cert-checks li.ok b{color:var(--green)}.cert-checks li.bad b,.cert-checks li.bad{color:var(--critical)}
.cert-checks small{color:var(--muted);margin-left:6px}.cert-checks .cert-sum{color:var(--navy);margin-top:4px}
.cert-progress{margin:4px 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:var(--soft);max-width:760px}
.cert-steps{display:flex;gap:24px;margin:0 0 10px;padding:0;list-style:none;font-size:14px;color:var(--muted);counter-reset:cs}
.cert-steps li{counter-increment:cs}.cert-steps li::before{content:counter(cs) ". "}
.cert-steps li.on{color:var(--blue);font-weight:600}.cert-steps li.done{color:var(--green)}.cert-steps li.done::before{content:"✓ "}
.cert-bar{height:8px;border-radius:4px;background:#e3e7f0;overflow:hidden}
.cert-bar i{display:block;height:100%;width:0;background:var(--blue);transition:width .5s linear}
.cert-progress.ok .cert-bar i{background:var(--green)}.cert-progress.fail .cert-bar i{background:var(--critical)}
.cert-progress-msg{margin:10px 0 0;font-size:14px;color:var(--text)}
.cert-progress.ok .cert-progress-msg{color:var(--green);font-weight:600}.cert-progress.fail .cert-progress-msg{color:var(--critical);font-weight:600}
/* 설비 진단 현황 창(2.57.0, Figma 864:9940): 제목줄 64 · 왼쪽 317 · 표 · 오른쪽 448, 사이 1px 선 */
.dgn-box.modal-box{width:min(1920px,98vw);height:min(960px,94vh)}
.dgn-box .modal-head{height:64px;padding:0 16px 0 32px;background:#fff;border-bottom:1px solid #d5d8e5;gap:0}
.dgn-box .modal-head strong{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:#0a1e5a}
.dgn-box .modal-head .popout-btn{margin-left:16px}
.dgn-box .modal-body{padding:0;gap:0;background:#d5d8e5}
.dgn-form{display:flex;align-items:center;gap:16px;margin:0 0 0 auto}
.dgn-date{display:flex;align-items:center;gap:8px;width:136px;height:32px;padding:0 12px;border:1px solid #e6e6e6;background:#fff;box-sizing:border-box}
.dgn-date svg{flex:none;width:20px;height:20px;fill:none;stroke:#0a1e5a;stroke-width:1.5}
.dgn-date input{width:100%;min-width:0;border:0;padding:0;background:transparent;font:400 14px/24px Pretendard,sans-serif;color:#0a1e5a}
.dgn-date input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;opacity:0;cursor:pointer}
.dgn-date{position:relative}
.dgn-tilde{color:#0a1e5a;font-size:14px}
.dgn-search.btn-line{min-width:96px;height:32px;padding:0 16px;border:1px solid #97a4c8;border-radius:6px;background:#fff;font-size:14px;font-weight:500;letter-spacing:-.14px;color:#0a1e5a}
.dgn-sep{width:1px;height:21px;background:#d5d8e5}
.dgn-xlsx{display:flex;width:24px;height:24px;padding:0;border:0;background:none;color:#0a1e5a;cursor:pointer}
.dgn-xlsx svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dgn-xlsx:disabled{opacity:.4;cursor:wait}
.dgn-form #dg-info{font-size:14px}
.dgn-body{flex:1;min-height:0;display:grid;grid-template-columns:317px minmax(0,1fr) 448px;gap:1px}
.dgn-side{display:flex;flex-direction:column;min-height:0;background:#fff}
.dgn-counts{display:flex;gap:1px;flex:none;background:#d5d8e5;border-bottom:1px solid #d5d8e5}
.dgn-count{flex:1;height:64px;border:0;border-top:3px solid transparent;display:grid;align-content:center;justify-items:center;gap:0;cursor:pointer;background:#fff;padding:0}
.dgn-count strong{font-size:22px;font-weight:600;line-height:24px}
.dgn-count span{font-size:12px;font-weight:500;line-height:24px;letter-spacing:-.12px}
.dgn-count.dgn-all{color:#374e92;background:#fff}
.dgn-count.dgn-normal{color:#44c257;background:rgba(68,194,87,.1)}
.dgn-count.dgn-anomaly{color:#f30000;background:rgba(243,0,0,.1)}
.dgn-count.dgn-unchecked{color:#8d8d8d;background:#fff}
.dgn-count.on{border-top-color:currentColor}
.dgn-count.dgn-all.on{background:#e2ebfb;border-top-color:#374e92}
.dgn-count .dev-badge{font-size:10px}
.dgn-tree{flex:1;min-height:0;overflow:auto}
.dgn-ghead{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 24px;background:#f9fafc;border-bottom:1px solid #d5d8e5}
.dgn-gname{display:flex;align-items:center;gap:5px;border:0;background:none;padding:0;font:400 15px/16px Pretendard,sans-serif;color:#0a1e5a;cursor:pointer}
.dgn-gname.on{font-weight:600}
.dgn-badge{display:inline-flex;align-items:center;justify-content:center;height:20px;min-width:20px;padding:1px 7px;box-sizing:border-box;border-radius:59px;background:#0a1e5a;color:#fff;font-size:14px;font-weight:600;line-height:24px}
.dgn-gfold{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border:0;background:none;padding:0;color:#0a1e5a;cursor:pointer}
.dgn-gfold svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transform:scaleY(-1);transition:transform .15s}
.dgn-grp.folded .dgn-gfold svg{transform:none}
.dgn-grp.folded .dgn-zones{display:none}
.dgn-zones{list-style:none;margin:0;padding:0;border-left:3px solid #577eff;border-bottom:1px solid #d5d8e5}
.dgn-zone{position:relative;display:flex;align-items:center;gap:6px;width:100%;height:48px;padding:0 16px 0 41px;border:0;background:#fff;font:400 15px/16px Pretendard,sans-serif;color:#0a1e5a;cursor:pointer;text-align:left}
.dgn-zone::before{content:"";position:absolute;left:29px;top:0;bottom:0;border-left:1px dotted #b8c0d6}
.dgn-zone::after{content:"";position:absolute;left:29px;top:24px;width:7px;border-top:1px dotted #b8c0d6}
.dgn-zone:hover{background:#f7f8fc}
.dgn-zone.on{background:#f2f4f9;box-shadow:inset 3px 0 0 #577eff;font-weight:500}
.dgn-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#b8c0d6}
.dgn-dot.ok{background:#44c257}.dgn-dot.bad{background:#f30000}
.dgn-side-foot{flex:none;height:60px;display:flex;align-items:center;justify-content:flex-end;padding:0 24px;border-top:1px solid #d5d8e5}
.dgn-foldall{display:flex;width:24px;height:24px;padding:0;border:0;background:none;color:#374e92;cursor:pointer}
.dgn-foldall svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dgn-grid{min-width:0;min-height:0;background:#fff}
.dgn-grid.page-grid{height:auto;border:0;border-radius:0}
.dgn-grid .ag-root-wrapper{border:0;border-radius:0}
.dgn-grid .ag-header{background:#edf0f6;border-bottom:1px solid #d5d8e5}
.dgn-grid .ag-header-row,.dgn-grid .ag-header{height:40px!important;min-height:40px!important}
.dgn-grid .ag-header-cell{padding:0 0 0 16px;border-right:1px solid #d5d8e5}
.dgn-grid .ag-row{font-size:15px;color:#1a1d24;border-bottom:1px solid #e6e6e6}
.dgn-grid .ag-cell{padding:0 16px;line-height:47px}
.dgn-grid .ag-row-selected::before,.dgn-grid .ag-row-selected{background:#e2ebfb}
.dgn-grid .dgn-cell-result .pill,.ew-grid .dgn-cell-result .pill{display:inline-flex;align-items:center;justify-content:center;width:84px;height:24px;border-radius:5px;font-size:14px;font-weight:600;line-height:24px;vertical-align:middle}
.dgn-hd{display:flex;align-items:center;gap:4px;width:100%;height:40px;cursor:pointer;user-select:none}
.dgn-hd-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:500;line-height:16px;color:#0a1e5a}
.dgn-hd-sort{flex:none;width:10px;height:12px}
.dgn-hd[data-sort=asc] .dgn-hd-sort{border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid #374e92;height:0;width:0}
.dgn-hd[data-sort=desc] .dgn-hd-sort{border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #374e92;height:0;width:0}
.dgn-hd-btn{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:40px;padding:0;border:0;border-left:1px solid transparent;background:none;color:#374e92;cursor:pointer}
.dgn-hd-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.dgn-hd-btn:hover,.dgn-hd.filtered .dgn-hd-btn{border:1px solid #374e92;height:38px;background:#fff}
.dgn-hd.filtered .dgn-hd-btn{background:#374e92;color:#fff}
.dgn-sf{display:flex;flex-direction:column;gap:6px;width:220px;max-height:360px;padding:8px;background:#fff;font-size:14px;color:#1a1d24}
.dgn-sf-q{height:30px;padding:0 8px;border:1px solid #d5d8e5;border-radius:4px;font:400 14px Pretendard,sans-serif}
.dgn-sf label{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 6px;cursor:pointer}
.dgn-sf label:hover{background:#e2ebfb}
.dgn-sf-all{border-bottom:1px solid #e6e6e6}
.dgn-sf-list{overflow:auto;min-height:0;flex:1}
.dgn-sf-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgn-detail{display:flex;flex-direction:column;min-height:0;overflow:auto;background:#fff;padding-top:32px}
.dgn-detail.loading{opacity:.6}
.dgn-dtabs{display:flex;padding:0 32px;flex:none}
.dgn-dtabs button{flex:1;height:32px;margin-left:-1px;border:1px solid #d5d8e5;background:#fff;font-size:14px;font-weight:500;line-height:24px;color:#374e92;cursor:pointer}
.dgn-dtabs button:first-child{margin-left:0;border-radius:6px 0 0 6px}.dgn-dtabs button:last-child{border-radius:0 6px 6px 0}
.dgn-dtabs button.on{position:relative;z-index:1;border-color:#0028b6;background:#e2ebfb;color:#0028b6;font-weight:600}
.dgn-dtabs button:disabled{color:#b8c0d6;cursor:default}
.dgn-tools{display:flex;justify-content:flex-end;height:48px;align-items:center;padding:0 32px;flex:none}
.dgn-kinds{display:flex;margin-right:auto}.dgn-kinds button{height:24px;padding:0 10px;margin-left:-1px;border:1px solid #d5d8e5;background:#fff;font-size:14px;font-weight:500;color:#374e92;cursor:pointer}.dgn-kinds button:first-child{margin-left:0;border-radius:4px 0 0 4px}.dgn-kinds button:last-child{border-radius:0 4px 4px 0}.dgn-kinds button.on{position:relative;border-color:#0028b6;background:#e2ebfb;color:#0028b6;font-weight:600}
.dgn-large{display:flex;align-items:center;gap:4px;border:0;background:none;padding:0;font-size:15px;font-weight:500;line-height:16px;color:#374e92;cursor:pointer}
.dgn-large svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
.dgn-view{margin:0 32px;height:286px;flex:none;background:#edf0f6;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.dgn-view img,.dgn-view video{max-width:100%;max-height:100%;object-fit:contain}
.dgn-view img{cursor:zoom-in}
.dgn-view.dgn-empty svg{width:64px;height:64px;fill:none;stroke:#b8c0d6;stroke-width:2.4}
.dgn-view.dgn-map{height:auto;flex:1;min-height:320px;flex-direction:column;margin-top:16px;background:#fff}
.dgn-view.dgn-map canvas{width:100%;flex:1}
.dgn-thumbs{display:flex;gap:1px;margin-top:10px;min-height:56px;flex:none;background:#f9fafc;overflow-x:auto}
.dgn-thumbs button{flex:none;width:62px;height:56px;padding:0;border:0;background:#edf0f6;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dgn-thumbs button.on{box-shadow:inset 0 0 0 2px #0028b6}
.dgn-thumbs img{width:100%;height:100%;object-fit:cover}
.dgn-raw{font-style:normal;font-size:12px;font-weight:600;color:#374e92}
.dgn-at{display:flex;gap:6px;margin:16px 32px;font-size:15px;line-height:16px;color:#374e92}
.dgn-res-head{height:40px;display:flex;align-items:center;padding:0 32px;background:#e6eaf8;border-top:1px solid #d5d8e5;border-bottom:1px solid #d5d8e5;font-size:15px;font-weight:500;color:#374e92}
.dgn-res dl{margin:0}
.dgn-res dl div{display:grid;grid-template-columns:160px 1fr;align-items:center;min-height:48px;background:#f9faff;border-bottom:1px solid #e6e6e6;font-size:15px;line-height:16px;color:#1a1d24}
.dgn-res dt{padding:0 24px 0 32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgn-res dd{margin:0;padding:8px 16px}
/* 열화상 RAW 보기(데모 방식) */
.dgn-view.th-host{height:auto;min-height:286px;background:#0c1424;align-items:stretch}
.th{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:6px;width:100%;padding:6px;box-sizing:border-box}
.th-scale{grid-row:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:0}
.th-in{width:44px;height:22px;padding:0 2px;border:1px solid #3a4560;border-radius:3px;background:#141d33;color:#fff;font:500 12px Pretendard,sans-serif;text-align:center}
.th-bar{position:relative;flex:1;width:14px;min-height:80px;border:1px solid #fff;touch-action:none}
.th-bar-c{position:absolute;inset:0}
.th-h{position:absolute;left:-6px;width:24px;height:8px;margin-top:-4px;background:#fff;border-radius:2px;cursor:ns-resize}
.th-h.top{top:0}.th-h.bottom{top:100%}
.th-stage{grid-row:1;position:relative;align-self:center;aspect-ratio:640/512;width:100%;cursor:crosshair}
.th-c,.th-o{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.th-o{pointer-events:none}
.th-tip{position:absolute;z-index:2;padding:4px 8px;border-radius:4px;background:rgba(10,20,40,.88);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;pointer-events:none}
.th-tools{grid-column:1/3;display:flex;align-items:center;gap:6px}
.th-pal{width:28px;height:22px;padding:2px;border:1px solid #3a4560;border-radius:3px;background:#141d33;cursor:pointer}
.th-pal i{display:block;width:100%;height:100%}
.th-pal.on{border-color:#fff}
.th-pal-ironbow i{background:linear-gradient(90deg,#00002d,#280a6e,#910f7d,#e12d1e,#faaf00,#ffeb78,#fff)}
.th-pal-rainbow i{background:linear-gradient(90deg,#00008f,#00f,#0ff,#ff0,#f00,#800000)}
.th-pal-gray i{background:linear-gradient(90deg,#0a0a0a,#fff)}
.th-btn{height:22px;padding:0 8px;border:1px solid #3a4560;border-radius:3px;background:#141d33;color:#cfd6e6;font-size:12px;cursor:pointer}
.th-btn.on{border-color:#fff;color:#fff}
.th-tools .th-btn:first-of-type{margin-left:auto}
.dg-full-view.th-full{display:block;padding:16px;background:#0c1424}
.th-full .th{height:100%;max-width:calc((100vh - 120px) * 1.25 + 60px);margin:0 auto}
/* 온·습도 현황 창(2.57.0, Figma 845:17818): 제목줄 64 · 왼쪽 744(카드 216×188 3열) · 오른쪽 트렌드·표 */
.ew-box.modal-box{width:min(1920px,98vw);height:min(960px,94vh)}
.ew-box .modal-head{height:64px;padding:0 16px 0 32px;background:#fff;border-bottom:1px solid #d5d8e5;gap:0}
.ew-box .modal-head strong{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:#0a1e5a}
.ew-box .modal-head .popout-btn{margin-left:16px}
.ew-box .modal-body{display:flex;flex-direction:column;overflow:hidden;padding:0;gap:0;background:#d5d8e5}
.ew-body{flex:1;min-height:0;display:grid;grid-template-columns:744px minmax(0,1fr);gap:1px}
.ew-left{display:flex;flex-direction:column;min-height:0;background:#f5f7fb}
.ew-right{display:flex;flex-direction:column;min-height:0;background:#fff}
.ew-sub{display:flex;align-items:center;gap:16px;height:56px;padding:0 32px;flex:none}
.ew-right .ew-sub{background:#f5f7fb;border-bottom:1px solid #e6e6e6}
.ew-sub h3{margin:0 auto 0 0;font-size:18px;font-weight:600;line-height:24px;color:#0a1e5a}
.ew-legend{display:flex;gap:16px;font-size:14px;color:#0a1e5a}
.ew-legend span{display:flex;align-items:center;gap:4px}
.ew-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#b8c0d6}
.ew-dot.ok{background:#44c257}.ew-dot.warn{background:#ffbe00}.ew-dot.bad{background:#f30000}
.ew-vsep{width:1px;height:15px;background:#d5d8e5}
.ew-clear{display:flex;align-items:center;justify-content:center;gap:4px;width:80px;height:24px;padding:0;border:1px solid #97a4c8;border-radius:4px;background:#fff;font-size:11px;font-weight:500;color:#0a1e5a;cursor:pointer}
.ew-clear svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4}
.ew-cards{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,216px);gap:14px;align-content:start;padding:8px 32px 24px}
.ew-card{display:flex;flex-direction:column;height:188px;box-sizing:border-box;border:1px solid #e1e5ef;border-radius:5px;background:#fff;cursor:pointer;overflow:hidden}
.ew-card.on{border:3px solid #0028b6;box-shadow:0 3px 4px rgba(0,41,185,.1)}
.ew-card-h{display:flex;align-items:center;height:48px;flex:none;padding:0 16px;background:#f0f2f7;font-size:16px;font-weight:500;line-height:24px;color:#0a1e5a;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ew-card.on .ew-card-h{padding:0 14px;height:46px}
.ew-card-b{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:16px;min-height:0}
.ew-card.on .ew-card-b{padding:14px}
.ew-vals{display:flex;gap:12px}
.ew-vals span{display:flex;align-items:center;gap:4px}
.ew-vals svg,.ew-mt svg{width:16px;height:16px;fill:none;stroke:#0a1e5a;stroke-width:1.2}
.ew-vals b{min-width:36px;text-align:right;font-size:16px;font-weight:500;line-height:24px;color:#0a1e5a}
.ew-vals b.h{min-width:26px}
.ew-vals small{font-size:10px;letter-spacing:-.1px;color:#7b8389}
.ew-card-f{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ew-spark{width:100%;height:40px}
.ew-mt{display:flex}
.ew-mt button{display:flex;align-items:center;justify-content:center;width:32px;height:24px;padding:0;border:1px solid #d5d8e5;background:#fff;cursor:pointer}
.ew-mt button:first-child{border-radius:4px 0 0 4px}.ew-mt button:last-child{border-radius:0 4px 4px 0;margin-left:-1px}
.ew-mt button.on{position:relative;border-color:#0028b6;background:#e2ebfb}
.ew-mt button.on svg{stroke:#0028b6}
.ew-seg{display:flex}
.ew-seg button{width:68px;height:32px;margin-left:-1px;border:1px solid #d5d8e5;background:#fff;font-size:14px;font-weight:500;color:#374e92;cursor:pointer}
.ew-seg button:first-child{margin-left:0;border-radius:6px 0 0 6px}.ew-seg button:last-child{border-radius:0 6px 6px 0}
.ew-seg button.on{position:relative;border-color:#0028b6;background:#e2ebfb;color:#0028b6;font-weight:600}
.ew-plot{width:112px;height:32px;margin-left:8px;padding:0 8px;border:1px solid #d5d8e5;border-radius:0;background:#fff;font:500 14px Pretendard,sans-serif;color:#0a1e5a}
.ew-xlsx{margin-left:8px}
.ew-charts{flex:1;min-height:0;overflow:auto;padding:16px 40px 8px}
.ew-chart{margin-bottom:24px}
.ew-chart-h{display:flex;align-items:center;justify-content:space-between;height:24px;font-size:14px;color:#0a1e5a}
.ew-chart-h b{font-weight:500}
.ew-switch{display:flex;align-items:center;gap:8px;font-size:14px;color:#0a1e5a;cursor:pointer}
.ew-switch input{position:absolute;opacity:0;pointer-events:none}
.ew-switch i{position:relative;width:46px;height:24px;border-radius:12px;background:#b8c0d6;transition:background .15s}
.ew-switch i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.ew-switch input:checked+i{background:#44c257}
.ew-switch input:checked+i::after{left:25px}
.ew-switch input:focus-visible+i{outline:2px solid #0028b6;outline-offset:2px}
.ew-canvas{width:100%}
.ew-grid.page-grid{flex:none;height:220px;border:0;border-top:1px solid #d5d8e5;border-radius:0}
.ew-grid .ag-root-wrapper{border:0;border-radius:0}
.ew-grid .ag-header{background:#edf0f6}
.ew-grid .ag-header-cell-text{font-size:15px;font-weight:500;color:#0a1e5a}
.ew-grid .ag-row{font-size:15px;color:#1a1d24}
/* 상단 Mission·Inspection(2.58.0, Figma): 평소 = 회색 계열, 그 화면을 연 뒤 늘었으면 Mission 주황·Inspection 빨강 */
button.alarm{border:0;border-top:3px solid #b4bbcf;background:#f5f7fb;color:#374e92;font:inherit;cursor:pointer;padding:0 13px 0 0}
button.alarm:disabled{cursor:default}
button.alarm.mission.new{background:var(--error-bg);border-color:var(--error);color:var(--error)}
button.alarm.inspection.new{background:var(--critical-bg);border-color:var(--critical);color:var(--critical)}
/* 미션 알람/이벤트 창(2.58.0, Figma 813:9734) */
.mal-box.modal-box{width:min(1920px,98vw);height:min(960px,94vh)}
.mal-box .modal-head{height:64px;padding:0 16px 0 32px;background:#fff;border-bottom:1px solid #d5d8e5;gap:0}
.mal-box .modal-head strong{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:#0a1e5a}
.mal-box .modal-head .popout-btn{margin-left:16px}
.mal-box .modal-body{padding:0;gap:0;background:#fff}
.mal-tabs{display:flex;gap:1px;flex:none;height:64px;background:#f5f7fb;border-bottom:1px solid #d5d8e5}
.mal-tab{width:112px;height:64px;border:0;border-top:3px solid;display:grid;align-content:center;justify-items:center;padding:0;cursor:pointer}
.mal-tab strong{font-size:22px;font-weight:600;line-height:24px}
.mal-tab span{font-size:12px;font-weight:500;line-height:20px}
.mal-tab.mal-all{border-color:#374e92;color:#374e92;background:#fff}
.mal-tab.mal-INFO{border-color:#44c257;color:#44c257;background:rgba(68,194,87,.08)}
.mal-tab.mal-WARN{border-color:#ffc700;color:#e5b300;background:rgba(255,199,0,.08)}
.mal-tab.mal-ERROR{border-color:#ff7836;color:#ff7836;background:rgba(255,120,54,.08)}
.mal-tab.mal-CRITICAL{border-color:#f30000;color:#f30000;background:rgba(243,0,0,.08)}
.mal-tab.mal-UNKNOWN{border-color:#8d8d8d;color:#8d8d8d;background:rgba(141,141,141,.08)}
.mal-tab.on{box-shadow:inset 0 0 0 1px currentColor}
.mal-tab.mal-all.on{background:#e2ebfb;box-shadow:inset 0 0 0 1px #374e92}
.mal-grid.page-grid{flex:1;min-height:0;height:auto;border:0;border-radius:0}
.mal-grid .ag-root-wrapper{border:0;border-radius:0}
.mal-grid .ag-header{background:#edf0f6}
.mal-grid .ag-header-cell-text{font-size:15px;font-weight:500;color:#0a1e5a}
.mal-grid .ag-row{font-size:15px;color:#1a1d24}
.mal-cell-sev{text-align:center}
.mal-cell-sev .pill{display:inline-flex;align-items:center;justify-content:center;width:84px;height:24px;border-radius:5px;font-size:14px;font-weight:600}
.mal-eye{display:flex;width:24px;height:24px;margin-top:12px;padding:0;border:0;background:none;color:#7b8389;cursor:pointer}
.mal-eye svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5}
.mal-imgs{display:grid;gap:16px;max-height:70vh;overflow:auto}
.mal-imgs h4{margin:0 0 8px;font-size:15px;font-weight:500;color:#0a1e5a}
.mal-imgs img{width:100%;background:#f0f3fa}
/* 사용자 계정 창·로그아웃 확인(2.58.0, Figma 548:4186·548:4165) */
.acc-box.modal-sm{width:436px}
.acc-box .modal-head{height:72px;padding:0 24px 0 32px;background:#fff;border-bottom:1px solid #e1e5ef}
.acc-box .modal-head strong{font-size:20px;font-weight:600;color:#0a1e5a}
.acc-box .modal-body{padding:0}
.acc-rows{display:grid;gap:16px;padding:24px 32px}
.acc-rows>div{display:grid;grid-template-columns:1fr 166px;align-items:center;font-size:15px;color:#0a1e5a}
.acc-rows b{font-weight:400;color:#1a1d24}
.acc-rows .al-select{width:166px;height:36px}
.acc-foot{display:flex;gap:16px;padding:16px 32px;background:#f5f7fb}
.acc-logout{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;font-size:14px}
.acc-logout svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.acc-ask{margin:0;padding:28px 32px;font-size:15px;color:#1a1d24}
.acc-confirm{justify-content:flex-end}
.acc-confirm button{width:112px;height:40px;font-size:15px}
/* 온·습도 현황 위젯 격자(2.58.0, Figma 587:5531): 한 줄 3구역, 이름 줄(회색) + 값 줄 */
.zg h3{margin:0 0 10px;font-size:15px;font-weight:400;color:#0a1e5a}
.zg+.zg{margin-top:20px}
.zg-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #d5d8e5;border-bottom:0}
.zg-cell{border-bottom:1px solid #d5d8e5;min-width:0}
.zg-cell+.zg-cell:not(:nth-child(3n+1)){border-left:1px solid #d5d8e5}
.zg-name{height:32px;line-height:32px;padding:0 16px;background:#edf0f6;font-size:14px;font-weight:500;color:#0a1e5a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zg-val{height:32px;display:flex;align-items:center;gap:2px;padding:0 16px;font-size:15px;color:#1a1d24;white-space:nowrap}
.zg-val b{font-weight:500}
.zg-val small{font-size:10px;color:#7b8389;margin-right:10px}
.zg-val b.WARN{color:#e6b400}.zg-val b.DANGER{color:var(--critical)}.zg-val b.stale{color:var(--stale)}
/* 미션 정보 창(2.58.0, Figma 833:10499·833:11157): 전체 폭 표 + 아래 '미션 상세 로그' 줄(고르면 위로 펼침) */
.ms-box.modal-box{width:min(1920px,98vw);height:min(960px,94vh)}
.ms-box .modal-head{height:64px;padding:0 16px 0 32px;background:#fff;border-bottom:1px solid #d5d8e5;gap:0}
.ms-box .modal-head strong{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:#0a1e5a}
.ms-box .modal-head .popout-btn{margin-left:16px}
.ms-box .modal-body{display:flex;flex-direction:column;overflow:hidden;padding:0;gap:0;background:#fff}
.ms-box .ms-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:0}
.ms-box .ms-grid.page-grid{flex:1;min-height:0;height:auto;border:0;border-radius:0}
.ms-box .ag-root-wrapper{border:0;border-radius:0}
.ms-box .ag-header{background:#edf0f6}
.ms-box .ag-header-cell-text,.ms-box .dgn-hd-label{font-size:15px;font-weight:500;color:#0a1e5a}
.ms-box .ag-row{font-size:15px;color:#1a1d24}
.ms-st{font-size:15px}.ms-st.ok{color:#44c257}.ms-st.bad{color:#f30000}.ms-st.run{color:#0028b6}.ms-st.warn{color:#ff7836}
.ms-logp{flex:none;display:flex;flex-direction:column;height:48px;border-top:1px solid #d5d8e5;background:#fff;transition:height .2s}
.ms-logp.open{height:50%}
.ms-logh{display:flex;align-items:center;gap:12px;height:48px;flex:none;padding:0 24px 0 32px;background:#f5f7fb;border-bottom:1px solid #e6e6e6}
.ms-logt{flex:1;min-width:0;display:flex;align-items:center;gap:16px;height:48px;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.ms-logt>span:first-child{font-size:18px;font-weight:500;color:#0a1e5a;white-space:nowrap}
.ms-logsub{font-size:14px;color:#7b8389;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-logfold{display:flex;width:24px;height:24px;padding:0;border:0;background:none;color:#374e92;cursor:pointer}
.ms-logfold svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.ms-logp.open .ms-logfold svg{transform:scaleY(-1)}
.ms-logp:not(.open) .ms-log-grid{display:none}
.ms-box .ms-log-grid{flex:1;min-height:0;margin:0}
/* 온·습도 현황 창 — 온습도 화면 기능 합침(2.59.0): 기간 단추·엑셀 메뉴·아래 표 탭 */
.ew-quick{display:flex;gap:4px}
.ew-quick button{height:32px;padding:0 10px;border:1px solid #d5d8e5;border-radius:4px;background:#fff;font-size:14px;color:#374e92;cursor:pointer}
.ew-quick button:hover{border-color:#97a4c8}
.ew-xwrap{position:relative;display:flex;margin-left:8px}
.ew-xwrap .ew-xlsx{margin-left:0}
.ew-xmenu{top:calc(100% + 6px);bottom:auto;transform:translateY(-4px)}
.ew-tbar{display:flex;gap:0;flex:none;padding:8px 32px 0;border-top:1px solid #d5d8e5;background:#f5f7fb}
.ew-tbar button{height:32px;padding:0 16px;margin-right:-1px;border:1px solid #d5d8e5;border-bottom:0;background:#fff;font-size:14px;font-weight:500;color:#374e92;cursor:pointer}
.ew-tbar button:first-child{border-radius:6px 0 0 0}.ew-tbar button:last-child{border-radius:0 6px 0 0}
.ew-tbar button.on{position:relative;background:#e2ebfb;border-color:#0028b6;color:#0028b6;font-weight:600}
.ew-box .ew-grid.page-grid{border-top:1px solid #d5d8e5}
/* 오래된 값(2.61.0): 요약을 오래 받지 못하면 오른쪽 패널 회색 */
#right.stale{filter:grayscale(1);opacity:.55}
/* 도면 좌표(2.62.0, layoutcoord.js) */
.setting-pane.lco-pane{padding:0;background:var(--line)}
.lco-card{flex:1;min-height:0}
.lco-body{flex:1;min-height:0;display:flex;gap:20px;padding:24px 48px 16px}
.lco-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:10px}
.lco-bar{display:flex;align-items:center;gap:16px;font-size:14px;white-space:nowrap;flex-wrap:wrap}
.lco-bar select{height:32px;min-width:180px;border:1px solid var(--line);border-radius:2px;font:inherit;padding:0 8px}
.lco-bar label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.lco-bar input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.lco-bar-end{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.lco-bar-end button{height:32px;padding:0 14px}
.lco-box{position:relative;flex:1 1 auto;min-height:480px;background:#eef1f4;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.lco-box canvas{position:absolute;inset:0;width:100%;height:100%;cursor:move;touch-action:none}
.lco-box canvas.cropping{cursor:crosshair}
#lco-crop-btn.on{background:var(--seg-on);border-color:var(--blue);color:var(--blue)}
.lco-side{flex:0 0 340px;min-height:0;display:flex;flex-direction:column;gap:0;font-size:14px;overflow:auto}
.lco-sec{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
.lco-sec:first-child{border-top:none;padding-top:0}
.lco-sec>b{font-weight:600;color:var(--navy)}
.lco-field{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lco-field input{width:160px;height:32px;border:1px solid var(--line);border-radius:2px;padding:0 10px;text-align:right;font:inherit}
.lco-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.lco-nudge{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lco-nudge button{height:32px;padding:0}
.lco-nudge .lco-wide{grid-column:span 2}
.lco-sec>.btn-line{height:34px}
.lco-pick-info{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lco-pick-info button{height:28px;padding:0 10px}
.lco-rows{width:100%;border-collapse:collapse;font-size:14px}
.lco-rows td{padding:2px 0}.lco-rows td:last-child{text-align:right}
.lco-sec-hist{flex:1;min-height:120px}
.lco-hist{list-style:none;margin:0;padding:0;overflow:auto;max-height:300px;font-size:14px}
.lco-hist li{padding:6px 0;border-top:1px solid var(--line)}
.lco-hist li:first-child{border-top:none}
.lco-hist-top{display:flex;align-items:center;gap:8px;white-space:nowrap}
.lco-hist-top b{font-weight:500;color:var(--navy)}
.lco-hist-top .lco-revert{margin-left:auto;height:26px;padding:0 10px;font-size:12px}
.lco-hist-sub{margin-top:2px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lco-error{margin:8px 0 0}
#lco-dialog-values,#lco-dialog-rows{margin:6px 0;line-height:1.6}
/* 화면에서 수정(2.66.0, pageedit.js): 슈퍼관리자(PAGE_EDIT) 연필 버튼 + 모달(Setting 칸을 옮겨 씀) */
.pe-btn{width:24px;height:24px;padding:0;margin:0 6px;border:1px solid var(--line);border-radius:3px;background:#fff;color:#7b8389;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:none}
.pe-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.pe-btn:hover,.pe-btn:focus-visible{border-color:var(--blue);color:var(--blue)}
.pe-btn[hidden]{display:none}
.map-tools .pe-btn{width:36px;height:36px;margin:0;border-radius:6px}
.map-tools .pe-btn svg{width:18px;height:18px}
.pe-box{width:min(1280px,calc(100vw - 80px));max-height:calc(100vh - 80px);display:flex;flex-direction:column}
.pe-box.pe-wide{width:min(1600px,calc(100vw - 60px))}
.pe-box .modal-body{overflow:auto}
.pe-tabs{display:flex;gap:8px;margin-bottom:16px}
.pe-tabs button{height:36px;padding:0 18px;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:14px;cursor:pointer}
.pe-tabs button.on{border-color:var(--blue);background:#e8eefc;color:var(--blue);font-weight:600}
.pe-body .setting-pane{display:block}
.pe-body .setting-pane[hidden]{display:none}
.pe-link{margin-top:16px}
.pb-track.panning{cursor:grabbing}
.top h1 .pe-btn{margin-left:10px}
.alarms .pe-btn{align-self:center}

/* 미션(SiteWalk) 사용(2.67.0, swuse.js) */
.sw-card{display:flex;flex-direction:column;gap:14px}
.sw-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw-search{width:320px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:3px}
.sw-actions{margin-left:auto;display:flex;gap:8px}
.sw-grid{height:calc(100vh - 360px);min-height:320px}
.sw-grid .sw-off .ag-cell{color:var(--muted)}
.sw-grid .sw-changed{background:#fff8e1}
.sw-switch{width:44px;height:24px;padding:0;border:0;border-radius:12px;background:#c8cdd3;position:relative;cursor:pointer;vertical-align:middle}
.sw-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.sw-switch.on{background:var(--blue)}
.sw-switch.on i{left:23px}
.sw-foot{display:flex;justify-content:flex-end;gap:10px}.sw-card > :not(.al-title){margin-left:48px;margin-right:48px}
.sw-foot{margin-bottom:24px}

/* 2.70.0 Spot 상태 정보(Figma 10-27 1055:7667·1055:7738): 머리 줄 배지·카메라 선택, 정보 줄, 큰 화면 + 360° 띠 + 방향 단추 */
.spot-badge:empty{display:none}
.spot-badge{margin-left:12px;padding:0 12px;border-radius:12px;font-size:14px;font-weight:500;line-height:24px;border:1px solid var(--line);color:var(--text);background:#fff}
.spot-badge.ok{color:#2f9e44;background:#ebfbee;border-color:#b2f2bb}
.spot-badge.bad{color:var(--critical);background:#fff0f0;border-color:#ffc9c9}
.spot-box.has-cam{width:min(1920px,98vw);height:min(960px,94vh)}
.spot-box.has-cam .modal-head{gap:0;justify-content:flex-start}
.spot-box.has-cam .modal-head .lc-badge{margin-left:8px;padding:0 14px;line-height:24px;font-size:14px;font-weight:500;border-radius:12px}
.spot-box.has-cam .modal-head .lc-badge.live{color:var(--navy);background:#fff;border:1px solid var(--navy)}
.spot-box.has-cam .modal-head .lc-badge.live::before{display:none}
.lc-group{margin-left:auto;margin-right:12px;height:36px;min-width:176px;padding:0 12px;border:1px solid #d5d8e5;border-radius:0;background:#fff;color:#0a1e5a;font:500 14px Pretendard,sans-serif}
.lc-group[hidden]{display:none}
.spot-box.has-cam .modal-head .popout-btn{margin-left:0}
.spot-box.has-cam .spot-wrap{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0;flex:1}
.spot-box.has-cam #spot-body{order:-1;flex:none}
.spot-bar{display:flex;align-items:center;min-height:56px;padding:0 32px;background:var(--soft);border-bottom:1px solid var(--line)}
.spot-items{display:flex;align-items:center;flex-wrap:wrap;gap:0;color:#0a1e5a;font-size:16px}
.spot-item{display:inline-flex;align-items:baseline;gap:12px;padding:0 16px;border-left:1px solid #c7ced6;line-height:20px;white-space:nowrap}
.spot-item:first-child{padding-left:0;border-left:0}
.spot-item em{font-style:normal;font-size:15px;font-weight:500}
.spot-item b{font-size:18px;font-weight:500}
.spot-item b[title]{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.spot-item small{font-size:12px;margin-left:2px;margin-right:4px}
.spot-env{gap:4px;align-items:center}
.spot-env svg{width:18px;height:18px}
.lc-tabs{margin-left:auto;display:flex}
.lc-tabs[hidden]{display:none}
.lc-tabs button{height:32px;min-width:104px;padding:0 16px;border:1px solid #d5d8e5;background:#fff;color:#4d535e;font:500 14px Pretendard,sans-serif;cursor:pointer}
.lc-tabs button+button{border-left:0}
.lc-tabs button.on{color:#0028b6;border-color:#0028b6;background:#eef3ff}
.spot-box.has-cam .spot-cam{flex:1;min-height:0;border:0;border-radius:0;padding:0;display:flex;flex-direction:column}
.spot-box.has-cam .lc-head{display:none}
.spot-box.has-cam .lc-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:0}
.spot-box.has-cam .lc-main{flex:1;min-height:0;aspect-ratio:auto;border-radius:0;background:#fff}
.lc-strip{flex:none;height:28%;min-height:120px;background:#0c1424}
.lc-strip[hidden]{display:none}
.lc-strip canvas{display:block;width:100%;height:100%}
.lc-strip.off canvas{opacity:.3;filter:grayscale(1)}
.lc-dirs{flex:none;display:flex;justify-content:center;gap:16px;padding:12px 0;border-top:1px solid var(--line);background:#fff}
.lc-dirbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:120px;height:32px;border:1px solid #c7ced6;border-radius:4px;background:#fff;color:#0a1e5a;font:500 14px Pretendard,sans-serif;cursor:pointer}
.lc-dirbtn svg{width:16px;height:16px}
.lc-dirbtn.on{border-color:#0028b6;color:#0028b6;background:#eef3ff}
.lc-dirbtn:disabled{opacity:.4;cursor:default}
.spot-cam.lc-full .lc-strip,.spot-cam.lc-full .lc-dirs{display:none}

/* 2.70.1 Spot 상태 정보 — Figma 1055:7667·1055:7738 값 그대로 */
.spot-box.has-cam .modal-head{height:64px;padding:0 16px 0 32px;background:#fff;border-bottom:1px solid #d5d8e5}
.spot-box.has-cam #spot-title{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:#0a1e5a}
.spot-box.has-cam .spot-badge{margin-left:16px}
.spot-box.has-cam .spot-badge,.spot-box.has-cam .modal-head .lc-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;min-width:72px;padding:0 12px;border-radius:100px;font-size:15px;font-weight:500;line-height:16px}
.spot-box.has-cam .spot-badge.ok{color:#44c257;background:linear-gradient(rgba(68,194,87,.1),rgba(68,194,87,.1)),#fff;border:1px solid rgba(68,194,87,.3)}
.spot-box.has-cam .modal-head .lc-badge{margin-left:8px}
.spot-box.has-cam .modal-head .lc-badge.live{color:#2e4890;background:linear-gradient(rgba(192,206,255,.2),rgba(192,206,255,.2)),rgba(255,255,255,.2);border:1px solid rgba(46,72,144,.3)}
.lc-group{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:176px;min-width:176px;height:36px;padding:0 34px 0 16px;border:1px solid #d5d8e5;border-radius:0;
  background:#fff url(img/spot/select-arrow.svg) no-repeat right 12px center/14px 14px;color:#0a1e5a;font:500 15px/16px Pretendard,sans-serif;cursor:pointer}
.lc-group:focus,.lc-group:focus-visible{outline:0;border-color:#0028b6;color:#0028b6}
.spot-box.has-cam .spot-bar{height:56px;min-height:56px;box-sizing:border-box;padding:0 32px;background:#f2f5fb;border-bottom:1px solid #d5d8e5}
.spot-box.has-cam .spot-items{gap:48px;flex-wrap:nowrap;color:#0a1e5a}
.spot-grp{display:flex;align-items:center;gap:16px}
.spot-box.has-cam .spot-item{display:flex;align-items:center;gap:16px;padding:0;border:0;line-height:16px}
.spot-box.has-cam .spot-item em{font-style:normal;font-size:15px;font-weight:500;line-height:16px;color:#0a1e5a}
.spot-val{display:inline-flex;align-items:center;gap:2px}
.spot-box.has-cam .spot-item b{font-size:18px;font-weight:500;line-height:24px;color:#374e92}
.spot-box.has-cam .spot-item b.spot-name{font-size:16px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spot-box.has-cam .spot-item small{margin:0;font-size:14px;font-weight:400;line-height:16px;letter-spacing:-.14px;color:#7b8389}
.spot-paren{margin-left:2px;font-size:15px;font-weight:400;line-height:16px;color:#1a1d24}
.spot-sep{flex:none;width:1px;height:15px;background:#d5d8e5}
.spot-box.has-cam .spot-env{gap:16px}
.spot-env img{width:16px;height:16px}
.spot-box.has-cam .lc-tabs{display:flex}
.spot-box.has-cam .lc-tabs button{box-sizing:border-box;width:120px;min-width:120px;height:32px;padding:0 10px;border:1px solid #d5d8e5;background:#fff;color:#374e92;font:500 14px/24px Pretendard,sans-serif}
.spot-box.has-cam .lc-tabs button+button{margin-left:-1px;border-left:1px solid #d5d8e5}
.spot-box.has-cam .lc-tabs button:first-child{border-radius:6px 0 0 6px}
.spot-box.has-cam .lc-tabs button:last-child{border-radius:0 6px 6px 0}
.spot-box.has-cam .lc-tabs button.on{position:relative;z-index:1;background:#e2ebfb;border-color:#0028b6;color:#0028b6;font-weight:600}
.spot-box.has-cam .lc-dirs{height:56px;box-sizing:border-box;padding:8px 0;gap:16px;align-items:center;background:#f8fafb;border-top:1px solid #d5d8e5}
.spot-box.has-cam .lc-dirbtn{box-sizing:border-box;width:120px;height:32px;gap:10px;padding:5px 10px;border:1px solid #97a4c8;border-radius:6px;background:#fff;color:#0a1e5a;font:500 15px/16px Pretendard,sans-serif}
.spot-box.has-cam .lc-dirbtn[data-dirbtn=left]{gap:8px}
.spot-box.has-cam .lc-dirbtn.on{border-color:#97a4c8;background:#fff;color:#0a1e5a}
.lc-arrow{width:16px;height:12px;flex:none}
.lc-arrow-front{transform:rotate(90deg)}
.lc-arrow-right{transform:rotate(180deg)}
.lc-arrow-back{transform:rotate(-90deg)}
.spot-box.has-cam .lc-strip{background:#fff}
/* 2.71.0 설비 진단 현황 미점검 줄 */
.pill.miss{color:#7b8389;background:#f2f4f6}

/* 2.72.0 온·습도 현황 창 — Figma 845:17818: 오른쪽은 제목줄 아래 전체가 스크롤(온도·습도 그래프 전체 높이, 표는 그 아래), 표 머리글 #f2f5fb */
.ew-right{overflow-y:auto}
.ew-right .ew-sub{position:sticky;top:0;z-index:3}
.ew-right .ew-charts{flex:none;overflow:visible}
.ew-box .ew-grid.page-grid{flex:none;height:480px}
.ew-grid .ag-header{background:#f2f5fb}

/* 2.72.1 상단 Mission·Inspection — Figma 1055:8430: 칸 120×56·사이 1px, 늘었을 때 Mission #f6771d(바탕 10%)·Inspection #f30000(바탕 10%) */
.alarms{gap:1px}
.alarm{flex:0 0 120px}
button.alarm.mission.new{background:rgba(246,119,29,.1);border-color:#f6771d;color:#f6771d}
button.alarm.inspection.new{background:rgba(243,0,0,.1);border-color:#f30000;color:#f30000}

/* 2.72.2 꽉 찬 화면: 2.70.0 배치에서 숨긴 머리(.lc-head)를 꽉 찬 화면에서는 다시 보임 — 제목·닫기 단추(전에는 Esc로만 나갈 수 있었음) */
.spot-box.has-cam .spot-cam.lc-full .lc-head{display:flex;flex:none;margin-bottom:10px}
/* 2.72.3 Figma Typography(1018:11004) 규격: 화면 글자 크기 13→14·11→12·17→18(규격 밖 크기 정리, '선택해제' 11px는 Figma 값 그대로) */
/* 2.73.0 LIVE CAM 단추 숨김 설정 */
.lc-tools[hidden],#spot-modal .popout-btn[hidden]{display:none}

/* 2.73.0 Figma 1070:12594: 히트맵 ON 때 범례(● 양호 ● 주의 ● 경고) */
.heat-legend{display:inline-flex;align-items:center;gap:16px;margin-right:8px;font-size:15px;font-weight:500;line-height:16px;color:#1a1d24}
.heat-legend[hidden]{display:none}
.heat-legend > span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.heat-legend i{width:8px;height:8px;border-radius:50%}
.heat-legend .lv-normal{background:#44c257}.heat-legend .lv-warn{background:#ffc700}.heat-legend .lv-danger{background:#f30000}
/* 2.73.0 Figma 1084:16834: Play back 날짜칸(달력 아이콘·포커스 #0028b6), 로봇별 요약 카드 */
.pb-range{gap:8px;padding:0;border:0}
.pb-date{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border:1px solid #d5d8e5;background:#fff;color:var(--navy)}
.pb-date:focus-within{border-color:#0028b6;color:#0028b6}
.pb-date:focus-within input{color:#0028b6}
.pb-date svg{width:20px;height:20px;color:#374e92}
.pb-date{position:relative}
.pb-date input{width:92px;outline:none}
.pb-date input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;margin:0;padding:0;opacity:0;cursor:pointer}  /* 칸 어디를 눌러도 달력, 오른쪽 기본 아이콘 숨김 */
.pb-head .pb-sep{width:1px;height:21px;background:#d5d8e5}
.pb-content{display:flex;align-items:flex-start}
.pb-main{flex:1;min-width:0}
.pb-sum{flex:none;display:flex;gap:7px;padding:16px 0 0 24px;max-width:calc(160px * 3 + 14px + 24px);overflow-x:auto}
.pb-sum:empty{display:none}
.pb-card{flex:none;width:160px;color:#0a1e5a}
.pb-card-h{height:32px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 12px;background:#fff;border:1px solid #d5d8e5;border-bottom:0;border-radius:5px 5px 0 0;font-size:14px;font-weight:500;line-height:16px}
.pb-card-h span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-card-h b{flex:none;font-size:15px;font-weight:500}
.pb-card-h b.ok{color:#44c257}.pb-card-h b.bad{color:#f30000}.pb-card-h b.warn{color:#ffc700}.pb-card-h b.run{color:var(--blue)}.pb-card-h b.none{color:var(--muted)}
.pb-card dl{margin:0;padding:12px;display:grid;gap:16px;background:#f2f5fb;border:1px solid #d5d8e5;border-radius:0 0 5px 5px}
.pb-card dl div{display:flex;align-items:center;justify-content:space-between;line-height:16px}
.pb-card dt{font-size:14px;font-weight:400}
.pb-card dd{margin:0;font-size:15px;font-weight:500;text-align:right;white-space:nowrap}

/* 2.75.0 도어 회전 창(선택한 도어 옆)·크기 조절 */
.ae-door-pop{position:absolute;z-index:6;display:flex;align-items:center;gap:4px;padding:4px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 3px 10px rgba(10,30,90,.18)}
.ae-door-pop[hidden]{display:none}
.ae-door-pop button{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);font-size:16px;line-height:1;cursor:pointer}
.ae-door-pop button:hover{border-color:var(--blue);color:var(--blue)}
.ae-door-pop b{min-width:36px;text-align:center;font-size:13px;font-weight:600;color:var(--navy)}
.ae-door-size{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 8px}
.ae-door-size input{flex:1}
.ae-door-size b{min-width:34px;text-align:right;font-weight:600;color:var(--navy)}

/* 새 버전 알림 바(2.76.0, updbar.js): 화면 위쪽에서 얇게 내려옴 */
.update-bar{position:fixed;top:0;left:0;right:0;z-index:3000;height:36px;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 48px;
  background:#0028b6;color:#fff;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.25);transform:translateY(-100%);visibility:hidden;
  transition:transform .25s ease,visibility 0s linear .25s}
.update-bar.on{transform:none;visibility:visible;transition:transform .25s ease}
.update-reload{height:24px;padding:0 12px;border:0;border-radius:4px;background:#fff;color:#0028b6;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.update-reload:hover{background:#e6ebff}
.update-close{position:absolute;right:12px;top:6px;width:24px;height:24px;border:0;background:none;color:#fff;font-size:18px;line-height:1;cursor:pointer;opacity:.8}
.update-close:hover{opacity:1}
.ae-label-sel{margin:4px 0 2px;font-size:13px}.ae-label-sel small{color:#7b8389}

/* 통합인증 접속 + 비밀번호 잠금 알림 바(2.84.0, D2): 화면 위에서 내려옴 */
.pw-lock-bar{position:fixed;top:0;left:50%;z-index:3000;display:flex;align-items:center;gap:12px;max-width:min(920px,calc(100vw - 32px));padding:10px 12px 10px 18px;border-radius:0 0 8px 8px;background:#fff4e5;border:1px solid #f0b46b;border-top:0;color:#7a4300;font-size:14px;line-height:20px;box-shadow:0 4px 12px rgba(0,0,0,.12);transform:translate(-50%,-110%);transition:transform .25s ease}
.pw-lock-bar.open{transform:translate(-50%,0)}
.pw-lock-close{flex:none;width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.pw-lock-close:hover{background:rgba(0,0,0,.06)}

/* 지도 위 표시 토글 4개(2.84.0, 2.84.1 위치 Figma 285:1977·1121:4137): 오른쪽 아래 Label 버튼에 마우스를 올리면 바로 위(왼쪽 끝 맞춤, 8px 간격)에 보임.
   켬 = 파랑, 끔 = 회색, 버튼에 마우스 = 위로 '이름 ON/OFF' 말풍선. 묶음이 보일 때는 Label 말풍선을 감춤(같은 자리) */
.map-label-wrap{position:relative;display:flex}
.map-show{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s}
.map-show::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}  /* Label → 묶음으로 옮기는 사이 8px에서도 유지 */
.map-label-wrap:hover .map-show,.map-label-wrap:focus-within .map-show{opacity:1;visibility:visible}
.map-label-wrap:hover #label-tip,.map-label-wrap:focus-within #label-tip{display:none}
.map-show-btn{position:relative;width:36px;height:36px;padding:0;margin-left:-1px;border:1px solid #d5d8e6;background:#fff;color:#97a4c8;cursor:pointer;display:flex;align-items:center;justify-content:center}
.map-show-btn:first-child{margin-left:0;border-radius:6px 0 0 6px}
.map-show-btn:last-child{border-radius:0 6px 6px 0}
.map-show-btn[aria-pressed="true"]{background:#e2ebfb;border-color:#0028b6;color:#0028b6;z-index:1}
.map-show-btn:hover{z-index:2}
.map-show-btn svg{width:36px;height:36px}
.map-show-btn:hover .map-tip,.map-show-btn:focus-visible .map-tip{display:block}

/* 설정 > 알람 서비스(2.85.0, Figma 1144:9198): 이메일 | SMS 카드 754px씩(사이 2px), 카드 배경 #F6F7FC, 아래 76px 버튼 줄. 위치·크기는 시안 측정값 */
.setting-pane.al2-pane{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:0;background:var(--line);overflow:hidden}
.setting-pane.al2-pane[hidden]{display:none}
.al2-card{display:flex;flex-direction:column;min-height:0;min-width:0;background:#f6f7fc}
.al2-body{flex:1;min-height:0;overflow:auto;padding:47px 56px 24px 63px}
.al2-title{margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid #7b8389;font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;color:#0a1e5a}
.al2-body>:not(.al2-title):not(.al2-line){margin-left:24px}
.al2-service{display:flex;align-items:center;gap:32px;height:24px;margin-bottom:24px;font-size:15px;font-weight:500;line-height:16px;color:#1a1d24}
.al2-service .al-switch .al-onoff{font-size:15px;color:#1a1d24}
.al2-label{display:block;height:24px;font-size:15px;font-weight:500;line-height:24px;color:#1a1d24}
.al2-to .al2-label{margin-bottom:8px}
.al2-tolist{display:flex;align-items:flex-start;gap:16px}
.al2-list{display:grid;gap:8px}
.al2-input{box-sizing:border-box;width:256px;height:40px;padding:8px 12px;border:1px solid #d5d8e5;border-radius:0;background:#fff;font:inherit;font-size:14px;line-height:24px;color:#1a1d24}
.al2-input::placeholder{color:#7b8389}
.al2-input:focus{outline:none;border-color:#0028b6}
.al2-add{flex:none;width:32px;height:32px;margin-top:4px;padding:0;border:1px solid #97a4c8;border-radius:6px;background:#fff;color:#0a1e5a;cursor:pointer;display:flex;align-items:center;justify-content:center}
.al2-add svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.al2-line{height:1px;margin:32px 0 32px;border:0;background:#d5d8e5}
.al2-spot{margin-bottom:24px}
.al2-spot .al2-label{margin-bottom:8px}
.al2-robots{display:flex;gap:16px}
.al2-robot{box-sizing:border-box;min-width:112px;height:32px;padding:5px 10px;border:1px solid #97a4c8;border-radius:6px;background:#fff;color:#8d8d8d;font:inherit;font-size:15px;font-weight:500;line-height:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.al2-robot svg{width:24px;height:24px;fill:#8d8d8d}
.al2-robot.on{border-color:#0028b6;background:#f2f4fb;color:#0028b6}
.al2-robot.on svg{fill:#0028b6}
.al2-groups{display:flex;flex-direction:column;gap:24px}
.al2-group .al2-label{margin-bottom:8px}
.al2-checks{display:flex;flex-wrap:wrap;gap:8px 32px}
.al2-check{display:inline-flex;align-items:center;gap:4px;height:24px;font-size:15px;line-height:16px;color:#0a1e5a;cursor:pointer;white-space:nowrap}
.al2-check input{position:absolute;opacity:0;width:0;height:0}
.al2-check i{position:relative;flex:none;width:24px;height:24px}
.al2-check i::before{content:"";position:absolute;inset:3px;box-sizing:border-box;border:1px solid #97a4c8;border-radius:3px;background:#fff}
.al2-check input:checked+i::before{border-color:#0028b6;background:#0028b6}
.al2-check input:checked+i::after{content:"";position:absolute;left:6px;top:8px;width:11.55px;height:8.52px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.5458 8.51771'%3E%3Cpath d='M4.0375 8.51771L0 4.48021L1.00937 3.47083L4.0375 6.49896L10.5365 0L11.5458 1.00938L4.0375 8.51771Z' fill='white'/%3E%3C/svg%3E") no-repeat center/contain}
.al2-check input:indeterminate+i::before{border-color:#0028b6}  /* 2.96.0 고른 SPOT 중 일부만 켠 항목 */
.al2-check input:indeterminate+i::after{content:"";position:absolute;left:7px;top:11px;width:10px;height:2px;background:#0028b6}
.al2-check input:focus-visible+i::before{box-shadow:0 0 0 2px rgba(0,40,182,.3)}
.al2-check .dev-badge{margin-left:4px}
.al2-error{margin:24px 0 0}
.al2-foot{flex:none;height:76px;box-sizing:border-box;border-top:1px solid #d5d8e5;background:#fff;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0 36px}
.al2-foot button{height:48px;border-radius:6px;font:inherit;font-size:16px;font-weight:500;line-height:24px;cursor:pointer}
.al2-cancel{width:140px;border:1px solid #97a4c8;background:#fff;color:#0a1e5a}
.al2-save{width:144px;border:0;background:#0028b6;color:#fff}
.al2-save:disabled{opacity:.6;cursor:default}
.setting-pane.al-pane.al-test-pane{grid-template-columns:minmax(0,1fr)}

/* 알람/이벤트 창(2.87.0, Figma 1059:10557): 위 미션 알람 현황·아래 점검 알람 현황(각 56 제목줄 + 40 머리글 + 40 줄), 점검 오른쪽 384 상세 */
.alv-box.modal-box{width:min(1920px,98vw);height:min(960px,94vh)}
.alv-box .modal-head{height:64px;padding:0 16px 0 32px;background:#fff;border-bottom:1px solid #d5d8e5;gap:0}
.alv-box .modal-head strong{font-size:22px;font-weight:700;line-height:24px;color:#0a1e5a}
.alv-box .modal-head .popout-btn{margin-left:16px}
.alv-box .modal-body{display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;background:#fff}
.alv-form{gap:24px}
.alv-form .dgn-date{border-color:#d5d8e5}
.alv-form .dgn-date:focus-within{border-color:#0028b6}
.alv-form .dgn-date:focus-within input{color:#0028b6}
.alv-sec{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.alv-bar{flex:none;height:56px;display:flex;align-items:center;justify-content:space-between;padding-left:32px;background:#f8fafb}
.alv-bar h3{margin:0;font-size:18px;font-weight:600;line-height:24px;color:#0a1e5a}
.alv-tabs{display:flex;gap:1px;height:56px}
.alv-tab{position:relative;width:112px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:0 0 6px;border:0;cursor:pointer;box-sizing:border-box}
.alv-tab::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:currentColor}
.alv-tab strong{font-size:20px;font-weight:600;line-height:16px}
.alv-tab span{font-size:14px;font-weight:500;line-height:16px}
.alv-m-all,.alv-i-all{color:#374e92;background:#fff}
.alv-m-INFO,.alv-i-normal{color:#44c257;background:rgba(68,194,87,.1)}
.alv-m-WARN{color:#ffc700;background:rgba(255,199,0,.1)}
.alv-m-ERROR{color:#ff7836;background:rgba(255,120,54,.1)}
.alv-m-CRITICAL,.alv-i-anomaly{color:#f30000;background:rgba(243,0,0,.1)}
.alv-m-UNKNOWN,.alv-i-unchecked{color:#8d8d8d;background:rgba(141,141,141,.1)}
.alv-tab.on{box-shadow:inset 0 0 0 1px currentColor}
.alv-m-all.on,.alv-i-all.on{background:#c7dafc;box-shadow:inset 0 0 0 1px #374e92}
.alv-ibody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 384px}
.alv-grid.page-grid{flex:1;min-width:0;min-height:0;height:auto;border:0;border-radius:0;background:#fff}
.alv-grid .ag-root-wrapper{border:0;border-radius:0}
.alv-grid .ag-header{background:#edf0f6;border-top:1px solid #d5d8e5;border-bottom:1px solid #d5d8e5}
.alv-grid .ag-header-row,.alv-grid .ag-header{height:40px!important;min-height:40px!important}
.alv-grid .ag-header-cell{padding:0 0 0 16px;border-right:1px solid #d5d8e5}
.alv-grid .ag-header-cell[col-id=fill]{border-right:0}
.alv-grid .ag-row{font-size:15px;color:#1a1d24;border-bottom:1px solid #e6e6e6}
.alv-grid .ag-cell{padding:0 16px;line-height:39px}
.alv-grid .ag-row-selected::before,.alv-grid .ag-row-selected{background:#e2ebfb}
.alv-grid .mal-eye{margin-top:7px}
.alv-grid .dgn-cell-result .pill{display:inline-flex;align-items:center;justify-content:center;width:84px;height:24px;border-radius:5px;font-size:14px;font-weight:600;line-height:24px;vertical-align:middle}
.alv-hd-plain{cursor:default}
.alv-detail{display:flex;flex-direction:column;min-height:0;background:#f6f7fc;border-left:1px solid #d5d8e5}
.alv-detail.loading{opacity:.6}
.alv-dhead{flex:none;height:48px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 32px;border-top:1px solid #d5d8e5;box-sizing:border-box}
.alv-dat{display:flex;gap:8px;font-size:16px;font-weight:500;line-height:24px;color:#1a1d24}
.alv-dhead .pill{min-width:88px;height:24px;padding:0 10px;justify-content:center;border-radius:5px;font-size:14px;font-weight:600;line-height:24px;box-sizing:border-box}
.alv-dbody{flex:1;min-height:0;overflow:auto;padding:24px 32px 0}
.alv-view{width:320px;height:240px;background:#edf0f6;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
.alv-view img,.alv-view video{max-width:100%;max-height:100%;object-fit:contain}
.alv-view.alv-empty{cursor:default}
.alv-view.alv-empty svg{width:64px;height:64px;fill:none;stroke:#b8c0d6;stroke-width:2.4}
.alv-view .dgn-raw,.alv-thumbs .dgn-raw{font-style:normal;font-weight:600;color:#7b8389}
.alv-thumbs{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:16px}
.alv-thumbs button{flex:none;width:64px;height:40px;padding:0;border:1px solid #d5d8e5;background:#edf0f6;cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.alv-thumbs button.on{border-color:#0028b6;box-shadow:inset 0 0 0 1px #0028b6}
.alv-thumbs img{width:100%;height:100%;object-fit:cover}
.alv-thumbs svg{width:64px;height:40px;fill:#7b8389}


/* 사용자 추가(2.87.7): 통합인증 계정 아이디 옆 계열사 메일 도메인 */
.user-id-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:256px;max-width:100%}
.user-id-wrap .al-input{flex:1 1 100px;width:auto;min-width:100px}  /* 2.87.8: 아이디 + 도메인이 다른 칸(256px) 폭 안에, 길면 도메인이 다음 줄 */
.user-id-domain{white-space:nowrap;color:var(--text);font-size:15px}
.user-id-domain[hidden]{display:none}

/* 종 팝업 '최근 알림'(2.88.0, 10-30 고객 참고 이미지 — Figma 확정 전): 읽지 않은 줄 빨간 점, 제목 옆 읽지 않은 수, 모두 보기, 상태 아이콘 */
.bell{position:relative}
.bell-dot{position:absolute;top:calc(50% - 14px);left:calc(50% + 4px);width:9px;height:9px;border-radius:50%;background:#f30000;box-shadow:0 0 0 2px #fff}
.bell-dot[hidden]{display:none}
/* 종 팝업 '최근 알림/이벤트'(2.99.0, Figma 1210:15360 11-03): 머리 56px(제목·바로가기·모두 읽음), 줄 = 왼쪽 색 띠·SPOT|종류·시간 / 제목·상태 + 오른쪽 확인 칸 */
.alv-pop{position:fixed;z-index:60;width:382px;max-width:calc(100vw - 16px);border:1px solid #2e4890;background:#fff;box-shadow:3px 4px 0 rgba(0,0,0,.4);box-sizing:border-box}
.alv-pop-head{display:flex;align-items:center;justify-content:space-between;height:56px;padding:12px 16px;background:#f8fafb;border-bottom:1px solid #d5d8e5;box-sizing:border-box}
.alv-pop-go{display:flex;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;color:#0a1e5a}
.alv-pop-go strong{font-size:20px;font-weight:600;line-height:24px;letter-spacing:-.2px;white-space:nowrap}
.alv-pop-go img{width:20px;height:20px}
.alv-pop-read{display:flex;align-items:center;justify-content:center;width:96px;height:32px;padding:5px 10px;border:1px solid #97a4c8;border-radius:6px;background:#fff;font:inherit;font-size:15px;font-weight:500;line-height:16px;color:#0a1e5a;cursor:pointer;box-sizing:border-box}
.alv-pop-read:hover{background:#e2ebfb;border-color:#0028b6;color:#0028b6}
.alv-pop-read:active{background:#aad6ff;border-color:#0028b6;color:#0028b6}
.alv-pop-read:disabled{opacity:.5;cursor:wait}
.alv-pop-read[hidden]{display:none}
.alv-pop-list{list-style:none;margin:0;padding:0;max-height:390px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(141,141,141,.6) #fff}
.alv-pop-list::-webkit-scrollbar{width:12px}
.alv-pop-list::-webkit-scrollbar-track{background:#fff}
.alv-pop-list::-webkit-scrollbar-thumb{background:rgba(141,141,141,.6);border-radius:26px;border:4px solid #fff;border-left-width:4px;border-right-width:4px}
.alv-pop-list li{display:flex}
.alv-pop-row{position:relative;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;padding:8px 8px 8px 16px;border:0;border-bottom:1px solid #e6e6e6;background:#fff;font:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
.alv-pop-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--alv-c)}
.alv-pop-row:hover{background:#f8fafb}
.alv-pop-l1,.alv-pop-l2{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.alv-pop-who{display:flex;align-items:center;gap:10px;min-width:0}
.alv-pop-who b{font-size:15px;font-weight:400;line-height:16px;color:#1a1d24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alv-pop-who i{flex:none;width:1px;height:11px;background:#d5d8e5}
.alv-pop-who em{flex:none;font-style:normal;font-size:15px;font-weight:500;line-height:16px;color:#0a1e5a}
.alv-pop-l1 time{flex:none;font-size:15px;line-height:16px;color:#7b8389;white-space:nowrap}
.alv-pop-title{min-width:0;font-size:15px;line-height:16px;color:#0a1e5a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alv-pop-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 12px;border-radius:5px;font-size:14px;font-weight:600;line-height:24px;color:var(--alv-c);background:color-mix(in srgb,var(--alv-c) 10%,transparent);white-space:nowrap;box-sizing:border-box}
.alv-pop-check{flex:none;display:flex;align-items:center;justify-content:center;width:32px;padding:0;border:0;border-bottom:1px solid #e6e6e6;background:#fff;cursor:pointer}
.alv-pop-check img{width:24px;height:24px}
.alv-pop-check:hover img{filter:brightness(.85)}
.alv-pop-msg{padding:20px;font-size:15px}
.alv-t-warn{--alv-c:#ffc700}.alv-t-err{--alv-c:#ff7836}.alv-t-bad{--alv-c:#f30000}.alv-t-info{--alv-c:#8d8d8d}
.alv-k-INSPECTION{color:#e53935}.alv-k-MISSION{color:#e5a400}

/* Factory Report(2.92.0, Figma 1232:11084): 위 줄 탭·로봇·기간·조회·PDF, 아래 왼쪽 쪽 미리보기 + 오른쪽 보고서 본문 */
.page.page-report{padding:0;gap:0;overflow:hidden;background:#f4f6fb}
.rp-bar{display:flex;align-items:center;gap:12px;height:56px;padding:0 32px 0 32px;border-bottom:1px solid var(--line);background:#f4f6fb;flex:none}
.rp-tabs{display:flex;gap:48px;align-self:stretch}
.rp-tabs button{position:relative;padding:0;border:0;background:none;font:500 16px Pretendard,sans-serif;color:#4a5a8a;cursor:pointer}
.rp-tabs button.on{color:var(--blue);font-weight:600}
.rp-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue)}
.rp-robot{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--navy)}
.rp-robot select{width:92px;height:32px;border:1px solid #e6e6e6;padding:0 8px;font:400 14px Pretendard,sans-serif;color:var(--navy);background:#fff}
.rp-dates .dgn-date.rp-range{width:236px}
.rp-to{flex:none;font:400 14px/24px Pretendard,sans-serif;color:#0a1e5a}
.rp-search{width:96px;height:32px;margin-left:12px}
.rp-sep{width:1px;height:20px;background:var(--line);margin:0 12px}
.rp-pdf{display:flex;align-items:center;gap:6px;height:32px;padding:0 16px;border:1px solid var(--navy);border-radius:3px;background:#fff;color:var(--navy);font:500 14px Pretendard,sans-serif;cursor:pointer}
.rp-pdf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rp-pdf:hover:not(:disabled){background:var(--seg-on)}
.rp-pdf:active:not(:disabled){background:#cddcf8}
.rp-pdf:disabled{border-color:#c9cdd8;color:#a9afbd;background:#eef0f4;cursor:default}
.rp-body{flex:1;display:flex;min-height:0}
.rp-thumbs{flex:none;width:318px;overflow:auto;padding:40px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:32px}
.rp-thumbs:empty{display:none}
.rp-thumb{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0;border:0;background:none;cursor:pointer}
.rp-thumb-page{display:block;width:195px;height:250px;overflow:hidden;background:#fff;border:1px solid #c9cdd8;box-shadow:0 3px 0 #8a8f99;position:relative}
.rp-thumb-page>.rp-page{position:absolute;left:0;top:0;width:1200px;max-width:none;transform:scale(.1625);transform-origin:0 0;pointer-events:none;margin:0}
.rp-thumb-label{font:500 16px Pretendard,sans-serif;color:var(--navy)}
.rp-thumb-label small{font-size:13px;color:var(--muted)}
.rp-thumb:hover .rp-thumb-page{border-color:var(--blue)}
.rp-view{flex:1;overflow:auto;padding:32px 40px}
.rp-msg{margin:0 0 12px;font-size:14px}
.rp-pages{display:flex;flex-direction:column;align-items:center;gap:32px}
.rp-page{width:1200px;max-width:100%;box-sizing:border-box;background:#fff;border:1px solid #1a1d24;padding:32px 32px 24px;display:flex;flex-direction:column;color:var(--text)}
.rp-strip{display:flex;align-items:center;gap:12px;border-top:1px solid var(--navy);padding-top:4px;font-size:11px;color:#7b8389}
.rp-tag{background:#1f3c9c;color:#fff;font:italic 800 11px Pretendard,sans-serif;padding:3px 22px 3px 10px;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.rp-strip-date{margin-left:auto}
.rp-content{flex:1;padding:32px 0 24px}
.rp-title h2{display:flex;align-items:center;gap:16px;margin:0;font:700 32px/1.2 Pretendard,sans-serif;color:var(--navy)}
.rp-title h2 i{width:2px;height:30px;background:var(--navy)}
.rp-title h2 span{font-weight:500}
.rp-meta{display:flex;align-items:center;gap:8px;margin:12px 0 28px;font-size:14px;color:#5b6370}
.rp-meta i{width:1px;height:12px;background:#c9cdd8}
.rp-overview{display:grid;grid-template-columns:1fr 600px;gap:32px;align-items:start;margin-bottom:24px}
.rp-sum p{margin:0;font-size:14px;line-height:24px;color:var(--text)}
.rp-v{font-weight:400}
.rp-v.blue,.rp-kpis .blue{color:var(--blue)}
.rp-v.red,.rp-kpis .red,.rp-page .red{color:var(--critical)}
.rp-v.amber,.rp-kpis .amber,.rp-page .amber{color:#e6a700}
.rp-page .grey{color:#8a8f99}
.rp-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:#f5f6fa}
.rp-kpi{padding:0 16px 8px;border-left:1px solid var(--line)}
.rp-kpi:first-child{border-left:0}
.rp-kpi-top,.rp-kpi-row{display:flex;align-items:baseline;gap:4px;height:40px;align-items:center}
.rp-kpi-top{background:#fff;margin:0 -16px;padding:0 16px}
.rp-kpi span{flex:1;font-size:14px;color:var(--navy)}
.rp-kpi b{font:500 22px Pretendard,sans-serif}
.rp-kpi small{font-size:13px;color:#8a8f99}
.rp-sec{margin-top:28px}
.rp-sec-head{display:flex;align-items:end;justify-content:space-between;border-bottom:1px solid #c9cdd8;padding-bottom:8px;margin-bottom:8px}
.rp-sec-head h3{margin:0;font:600 16px Pretendard,sans-serif;color:var(--navy)}
.rp-sec-right{display:flex;align-items:center;gap:12px;font-size:14px}
.rp-sec-right>i{width:1px;height:12px;background:#c9cdd8}
.rp-legend{display:flex;align-items:center;gap:6px;font-size:13px;color:#5b6370}
.rp-legend i{width:10px;height:10px;margin-left:10px;background:#44c257}
.rp-legend i.bad{background:#f30000}
.rp-legend i.line{height:0;width:14px;background:none;border-top:2px dashed #ffc700}
.rp-legend i.line.bad{border-top-color:#f30000}
.rp-chart{height:150px}
.rp-chart svg{width:auto;height:auto;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}  /* 전역 svg(아이콘 24px) 규칙을 echarts SVG에서 풂 */
.rp-chart-s{height:130px}
.rp-table{width:100%;border-collapse:collapse;font-size:14px}
.rp-table th{height:40px;padding:0 8px;background:#e9eefa;text-align:left;font-weight:500;color:var(--navy);white-space:nowrap}
.rp-table td{height:40px;padding:0 8px;border-bottom:1px solid #e3e6ee;white-space:nowrap}
.rp-table .c{text-align:center}
.rp-table td.rp-wide{max-width:520px;overflow:hidden;text-overflow:ellipsis}
.rp-table .rp-empty{text-align:center;height:48px}
.rp-matrix th,.rp-matrix td{text-align:center;border:1px solid #e3e6ee}
.rp-matrix tbody th{background:#f5f6fa}
.rp-cell.ok{background:#ecf9ee;color:#2fa84f}.rp-cell.warn{background:#fff9e5;color:#e6a700}.rp-cell.bad{background:#fee5e5;color:var(--critical)}.rp-cell.none{color:#8a8f99}
.rp-badge{display:inline-block;min-width:84px;padding:3px 0;border-radius:4px;text-align:center;font-size:13px}
.rp-badge.ok{background:#ecf9ee;color:#2fa84f}.rp-badge.warn{background:#fff9e5;color:#e6a700}.rp-badge.bad{background:#fee5e5;color:var(--critical)}.rp-badge.grey{background:#f0f1f4;color:#8a8f99}
.rp-more{margin:6px 0 0;text-align:right;font-size:13px;color:#7b8389}
.rp-trends{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.rp-tc-head{display:flex;align-items:center;justify-content:space-between}
.rp-tc-head b{font:600 15px Pretendard,sans-serif;color:var(--navy)}
.rp-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #c9cdd8;padding-top:16px}
.rp-foot img{height:22px}
.rp-foot-brand{font:italic 800 16px Pretendard,sans-serif;color:var(--navy)}
.rp-foot-brand small{font:600 11px Pretendard,sans-serif;margin-left:4px}
/* 2.93.0 종 팝업 '모두 읽음'(11-02 고객 답변) */
/* 2.94.0 Setting > 수집 운영(11-02 고객 답변), 실행 상세(오류 요약·실패 항목) */
.collect-pane .ops-host{display:flex;flex-direction:column;gap:12px;padding:20px 24px;height:100%;box-sizing:border-box;overflow:auto}
.ops-detail h4{margin:16px 0 6px;font-size:14px;color:var(--navy)}
.ops-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;margin:0}
.ops-dl div{display:flex;gap:12px;align-items:baseline;min-width:0}
.ops-dl dt{flex:none;width:96px;font-size:13px;color:var(--muted)}
.ops-dl dd{margin:0;font-size:14px;min-width:0;overflow-wrap:anywhere}
.ops-pre{margin:0;padding:10px 12px;max-height:280px;overflow:auto;background:#f6f7fa;border:1px solid var(--line);border-radius:3px;font:12px/1.5 Consolas,monospace;white-space:pre-wrap;word-break:break-all}
.ops-items{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
/* 2.98.0 실패 항목 표·결과 누르기 */
.ops-fail{width:100%;border-collapse:collapse;font-size:13px}
.ops-fail th,.ops-fail td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.ops-fail th{background:#f6f7fa;color:var(--navy);font-weight:600;white-space:nowrap}
.ops-fail td:first-child{width:32px;text-align:center;color:var(--muted)}
.ops-fail td:nth-child(2){width:26%;overflow-wrap:anywhere}.ops-fail td:nth-child(3){width:34%}
.ops-err{font:12px/1.5 Consolas,monospace;overflow-wrap:anywhere;white-space:pre-wrap}
.ops-raw{margin-top:10px}.ops-raw summary{cursor:pointer;font-size:13px;color:var(--muted);margin-bottom:6px}
.ops-latest{border:0;background:none;padding:0;cursor:pointer}.ops-latest:hover .pill{text-decoration:underline}
/* 2.95.0 설비 진단 현황 개편(Figma 1208:13244·1208:14549) */
.dgn-body{grid-template-columns:317px minmax(0,1fr) 576px}
.dgn-zone{gap:10px;padding-left:44px}
.dgn-zone::before{left:30px}.dgn-zone::after{left:30px}
.dgn-zone input{flex:none;width:16px;height:16px;margin:0;accent-color:#0028b6;cursor:pointer}
.dgn-zone.on{background:#e8eefd;box-shadow:inset 3px 0 0 #577eff;font-weight:400}
.dgn-grid .dgn-cell-n{color:#1a1d24}
.dgn-detail{padding-top:16px}
.dgn-crumb{display:flex;align-items:center;gap:8px;min-height:24px;padding:0 32px;margin-bottom:16px;font:600 16px/24px Pretendard,sans-serif;color:#0a1e5a;flex:none}
.dgn-crumb i{font-style:normal;font-weight:400;font-size:13px;color:#8a8f99}
.dgn-item{display:flex;align-items:center;gap:8px;height:24px;margin:16px 32px 8px;flex:none}
.dgn-item strong{font-size:14px;font-weight:500;color:#1a1d24}
.dgn-item select{height:24px;max-width:300px;border:1px solid #d5d8e5;padding:0 6px;font:500 14px Pretendard,sans-serif;color:#1a1d24;background:#fff}
.dgn-item-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.dgn-ico{display:flex;width:24px;height:24px;padding:0;border:0;background:none;color:#374e92;cursor:pointer}
.dgn-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.dgn-ico.on{color:#0028b6}.dgn-ico:disabled{color:#c9cdd8;cursor:default}
.dgn-view{height:384px}
.dgn-view.dgn-map{height:384px;min-height:0;flex:none;margin-top:0}
.dgn-bar{display:flex;align-items:flex-start;gap:16px;margin:8px 32px 0;flex:none}
.dgn-views{display:flex;flex:none}
.dgn-views button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:-1px;padding:0;border:1px solid #d5d8e5;background:#fff;color:#374e92;cursor:pointer}
.dgn-views button:first-child{margin-left:0}
.dgn-views button.on{position:relative;z-index:1;border-color:#0028b6;background:#e2ebfb;color:#0028b6}
.dgn-views svg{width:24px;height:24px;fill:currentColor;stroke:none}
/* 2.99.2 Figma 11-04: 설비 진단 창 아래 보기 버튼 = 바탕 #f2f5fb·아이콘 #7b8389(크게 보기 창은 흰 바탕·#374e92 그대로), 고른 것 #e2ebfb·#0028b6 */
.dgn-bar .dgn-views button{background:#f2f5fb;color:#7b8389}
.dgn-bar .dgn-views button.on{background:#e2ebfb;color:#0028b6}
.dgn-bar .dgn-thumbs{flex:1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;margin:0;min-height:32px;max-height:68px;overflow:auto;background:none}
.dgn-bar .dgn-thumbs button{width:44px;height:32px;background:#d5d8e5}
.dgn-bar .dgn-thumbs button.dgn-prev{opacity:.75}
.dgn-play{display:flex;color:#5b6370}.dgn-play svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.dgn-at{align-items:center}
.dgn-at-pill{margin-left:auto}
.dgn-at-pill .pill,.dgl-item .pill{display:inline-flex;align-items:center;justify-content:center;width:88px;height:24px;border-radius:5px;font-size:14px;font-weight:600}
.dgn-chart{width:100%;height:100%;background:#fff}
.dgn-view .dgn-chart p{margin:16px}
/* 2.99.3 Figma 11-04(1346:7017) 크게 보기: 1595×849, 바탕 #f6f7fc, 큰 그림 아래 촬영 가로 띠(142×80), 오른쪽 정보 칸 304px, 맨 아래 흰 줄(지난 점검 44×33 + 보기 버튼) */
.dgl-box.modal-box{width:min(1595px,96vw);height:min(849px,94vh);background:#f6f7fc;border:1px solid #2e4890;box-shadow:6px 8px 4px rgba(11,24,62,.2)}
.dgl-box .modal-head{height:56px;padding:0 32px;border-bottom:1px solid #d5d8e5;background:#fff}
.dgl-box .modal-head strong{display:flex;align-items:center;gap:16px;font-size:20px;font-weight:600;color:#0a1e5a;letter-spacing:-.2px}
.dgl-box .modal-head strong .dgn-crumb{padding:0;margin:0;font-size:20px}
.dgl-sep{width:1px;height:18px;background:#0a1e5a}
.dgl-box .modal-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0;background:#f6f7fc}
.dgl-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 304px;grid-template-rows:minmax(0,1fr);column-gap:12px;padding:16px 16px 16px 0}
.dgl-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.dgl-view{flex:1;min-height:0;margin-left:16px;background:#eceef6;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.dgl-view img,.dgl-view video{max-width:100%;max-height:100%;object-fit:contain}
.dgl-view.th-host{background:#0c1424;align-items:stretch}
.dgl-thumbs{flex:none;display:flex;gap:4px;margin-top:8px;padding-bottom:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(141,141,141,.6) #f6f7fc}
.dgl-thumbs::-webkit-scrollbar{height:16px;background:#f6f7fc}
.dgl-thumbs::-webkit-scrollbar-thumb{background:rgba(141,141,141,.6);border:6px solid #f6f7fc;border-left-width:8px;border-right-width:8px;border-radius:100px}
.dgl-thumbs button{flex:none;width:142px;height:80px;padding:0;border:0;background:#d5d8e5;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.dgl-thumbs button.on{box-shadow:inset 0 0 0 2px #0028b6}
.dgl-thumbs img,.dgl-grid img{width:100%;height:100%;object-fit:cover}
.dgl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;overflow:auto;align-content:start}
.dgl-grid button{height:120px;padding:0;border:0;background:#edf0f6;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.dgl-grid button.on{box-shadow:inset 0 0 0 2px #0028b6}
.dgl-info{display:flex;flex-direction:column;min-height:0;overflow:auto;border:1px solid #d5d8e5;background:#f9faff}
.dgl-info-head{flex:none;height:80px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:0 16px;background:#f8fafb}
.dgl-info .dgn-at{margin:0;font-size:15px;line-height:16px;color:#374e92}
.dgl-item{display:flex;align-items:center;justify-content:space-between;margin:0;font-size:15px;color:#0a1e5a}
.dgl-item strong{font-weight:500}
.dgl-info .dgn-res{border:0;flex:1}
.dgl-info .dgn-res-head{height:40px;box-sizing:border-box;padding:0 16px;background:#e6eaf8;border-top:1px solid #d5d8e5;border-bottom:1px solid #d5d8e5;font-size:15px;font-weight:500;color:#374e92}
.dgl-info .dgn-res dl>div{height:40px;box-sizing:border-box;background:#f9faff;border-bottom:1px solid #e6e6e6;font-size:15px;color:#1a1d24}
.dgl-info .dgn-res dt{padding:0 16px}.dgl-info .dgn-res dd{padding-right:16px}
.dgl-bar{flex:none;height:64px;display:grid;grid-template-columns:minmax(0,1fr) 304px;column-gap:12px;padding:0 16px;background:#fff;border-top:1px solid #d5d8e5}
.dgl-bar-in{display:flex;align-items:center;justify-content:center;gap:64px}
.dgl-prev{display:flex;gap:4px}
.dgl-prev button{flex:none;width:44px;height:33px;padding:0;border:1px solid #d5d8e6;background:#ebedf4;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.dgl-prev button.on{border-color:#0028b6;box-shadow:inset 0 0 0 1px #0028b6}
.dgl-prev img{width:100%;height:100%;object-fit:cover}
.dgl-bar .dgn-views button{background:#fff;color:#374e92}
.dgl-bar .dgn-views button.on{background:#e2ebfb;color:#0028b6}