@charset "UTF-8";

/* ===== 설치 관리 > 설치 현황 · 유지보수 > 유지보수 현황 (접두어 lc-) =====
   패널 · 목록 · 칩 · 표는 supply_type.css 의 .st-* 와 install.css 의 .in-* 를 그대로 쓴다.
   상태 색 : 정상 초록 / 통신 확인 필요 주황 / 장애 빨강 / 설치 안 됨 회색(점선) */

.lc-page { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
/* 위 필터 : 바깥 영역과 띄워 하나의 판으로 */
.lc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; }
.lc-site { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #344054; }
.lc-site .form-control { width: 220px; height: 36px; padding-top: 0; padding-bottom: 0; }
.lc-tabs { margin: 0; width: 200px; }
.lc-sum { display: flex; gap: 8px; margin-left: auto; }
.lc-sumcard { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; cursor: pointer; }
.lc-sumcard span { font-size: 13.5px; color: #5b6472; font-weight: 700; }
.lc-sumcard b { font-size: 20px; color: #0f172a; font-variant-numeric: tabular-nums; }
.lc-sumcard em { font-style: normal; font-size: 13px; color: #8e97a4; }
.lc-sumcard.is-on { border-color: #047bb6; background: #f0f7fc; }
.lc-assets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; }
.lc-assets__ttl { margin-right: 6px; font-size: 14px; font-weight: 700; color: #344054; }
.lc-asset { padding: 3px 10px; border-radius: 999px; background: #eef2f7; font-size: 13.5px; color: #344054; }
.lc-asset b { color: #0a529d; }
.lc-asset__bad { font-style: normal; color: #c4320a; font-weight: 700; }

.lc-cols { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; flex: 1 1 auto; min-height: 520px; }
@media (max-width: 1200px) { .lc-cols { grid-template-columns: 1fr; } }
.lc-filter { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 10px; }
.lc-filter .form-control { height: 34px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
.lc-filter select.form-control { flex: 1 1 100%; }
.lc-filter select.form-control[hidden] { display: none; }
.lc-filter input.form-control { flex: 1 1 auto; min-width: 0; }
.lc-item .in-item__top { gap: 8px; }
.lc-txt-bad { color: #c4320a; }

/* 상태 점 */
.lc-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lc-dot--ok   { background: #22a06b; }
.lc-dot--warn { background: #e0a020; }
.lc-dot--bad  { background: #de3412; }
.lc-dot--none { background: #fff; border: 2px dashed #b4bdc8; box-sizing: border-box; }

/* 상세 : 그림(왼쪽) + 장비 정보(오른쪽) */
.lc-detail { padding: 12px 16px; }
/* 상세 영역 스크롤은 이 바깥 SimpleBar 하나로만 둔다(그림+정보+이력 공통).
   예전엔 여기(SimpleBar)와 .lc-info(네이티브 overflow)가 따로 스크롤돼
   스크롤바 모양이 다르고, 목록을 내리면 그림까지 같이 올라가 잘렸다. */
.lc-detail .in-target-scroll { flex: 1 1 auto; min-height: 0; }
.lc-board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1500px) { .lc-board { grid-template-columns: 1fr; } }
.lc-figure { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid #e3e8ef; border-radius: 12px; background: #f8fafc; }
/* 그림 고정 : 목록(정보·이력)을 스크롤해도 그림은 상단에 붙어 보이게 한다.
   2단(그림|정보)일 때만 적용하고, 1단으로 접히면(≤1500px) 겹침을 막기 위해 해제한다. */
.lc-figure { position: sticky; top: 0; align-self: start; z-index: 1; }
@media (max-width: 1500px) { .lc-figure { position: static; } }
.lc-svg { display: block; width: 100%; height: auto; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #5b6472; }
.lc-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* 그림 : 버스 · BIT */
.lc-shadow { fill: rgba(15, 23, 42, .08); }
.lc-bus__body { fill: #fff; stroke: #475569; stroke-width: 2.5; }
.lc-bus__glass, .lc-bus__win { fill: #dbeafe; stroke: #94a3b8; stroke-width: 1.2; }
.lc-bus__door { fill: #e2e8f0; stroke: #94a3b8; stroke-width: 1.2; }
.lc-bus__line { stroke: #94a3b8; stroke-width: 1.2; }
.lc-bus__stripe { fill: #047bb6; opacity: .25; }
.lc-bus__wheel { fill: #334155; }
.lc-bus__hub { fill: #cbd5e1; }
.lc-bus__lamp { fill: #fbbf24; }
.lc-bit__pole, .lc-bit__base { fill: #64748b; }
.lc-bit__screen { fill: rgba(255, 255, 255, .35); }

.lc-zone { cursor: pointer; }
.lc-zone rect:first-child { stroke-width: 2; }
.lc-zone text { font-size: 12px; font-weight: 700; pointer-events: none; }
.lc-zone--ok rect:first-child   { fill: #22a06b; stroke: #157a4f; }
.lc-zone--warn rect:first-child { fill: #f4b740; stroke: #b7791f; }
.lc-zone--bad rect:first-child  { fill: #e5534b; stroke: #a8290a; }
.lc-zone--none rect:first-child { fill: #f1f5f9; stroke: #b4bdc8; stroke-dasharray: 4 3; }
.lc-zone--ok text, .lc-zone--bad text { fill: #fff; }
.lc-zone--warn text { fill: #3d2a00; }
.lc-zone--none text { fill: #94a3b8; }
.lc-zone:hover rect:first-child { filter: brightness(1.05); stroke-width: 3; }

/* 따로 그리는 장비 칸 */
.lc-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.lc-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 10px; border: 2px solid; background: #fff; cursor: pointer; min-width: 0; }
.lc-tile__label { font-size: 13.5px; font-weight: 700; color: #1e293b; }
.lc-tile__name { max-width: 100%; font-family: Consolas, monospace; font-size: 12px; color: #5b6472; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-ico { width: 40px; height: 40px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lc-tile--ok   { border-color: #22a06b; background: #ecfdf3; }
.lc-tile--ok .lc-ico { stroke: #157a4f; fill: rgba(34, 160, 107, .12); }
.lc-tile--warn { border-color: #f4b740; background: #fffaeb; }
.lc-tile--warn .lc-ico { stroke: #b7791f; fill: rgba(244, 183, 64, .15); }
.lc-tile--bad  { border-color: #e5534b; background: #fef3f2; }
.lc-tile--bad .lc-ico { stroke: #a8290a; fill: rgba(229, 83, 75, .12); }
.lc-tile--none { border-color: #d0d5dd; border-style: dashed; background: #fafbfc; }
.lc-tile--none .lc-ico { stroke: #b4bdc8; }
.lc-tile--none .lc-tile__label { color: #8e97a4; }

/* 장비 정보 */
/* 스크롤은 바깥 .in-target-scroll(SimpleBar) 하나로 통일한다.
   예전엔 여기서 따로 overflow-y:auto 로 스크롤해(그림 고정 목적) 스크롤바가 둘이었고
   모양도 달랐다. 이제 그림은 .lc-figure 의 sticky 로 고정하므로 자체 스크롤이 필요 없다. */
.lc-info { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding-right: 4px; }
.lc-card { padding: 10px 12px; border: 1px solid #e3e8ef; border-left: 4px solid #22a06b; border-radius: 10px; background: #fff; transition: box-shadow .2s; }
.lc-card--warn { border-left-color: #f4b740; }
.lc-card--bad  { border-left-color: #e5534b; }
.lc-card--none { border-left-color: #d0d5dd; background: #fafbfc; padding: 7px 12px; }
.lc-card.is-focus { box-shadow: 0 0 0 3px rgba(4, 123, 182, .35); }
.lc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.lc-card__name { margin: 4px 0 6px; }
.lc-card__name .in-label { font-size: 16px; }
.lc-card__kv { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 3px 8px; margin: 0; font-size: 13.5px; }
.lc-card__kv dt { color: #8e97a4; }
.lc-card__kv dd { margin: 0; color: #344054; min-width: 0; }

/* 이력 */
.lc-hist { margin-top: 16px; }
.lc-hist__tabs { margin: 0 0 8px; width: 240px; }
.lc-row-off td { color: #8e97a4; }

/* 높이를 정한 셀렉트 · 입력칸 : 글자 잘림 방지 (install.css 와 같은 처리) */
#install_status select.form-control { padding-left: 10px; padding-right: 28px; line-height: normal; text-overflow: ellipsis; }