/* /02_Components/Grid/DataGrid.razor.rz.scp.css */
.dxgrid[b-a6nthjp54m] {
    --dx-border: var(--border);
    --dx-header-bg: var(--surface-2);
    --dx-header-bg2: var(--surface-3);
    --dx-accent: var(--primary);
    --dx-accent-soft: var(--primary-soft);
    --dx-row-alt: var(--surface-2);
    --dx-text: var(--text);
    font-family: inherit;
    font-size: 13px;
    color: var(--dx-text);
    border: 1px solid var(--dx-border);
    border-radius: 9px;
    background: var(--card);
    overflow: hidden;
    box-shadow: var(--shadow);
    user-select: none;
}

/* ───── 높이 채움(Fill) 모드 ───── */
.dxgrid.is-fill[b-a6nthjp54m] { display: flex; flex-direction: column; height: 100%; }
.dxgrid.is-fill .dxgrid-toolbar[b-a6nthjp54m],
.dxgrid.is-fill .dxgrid-grouppanel[b-a6nthjp54m],
.dxgrid.is-fill .dxgrid-pager[b-a6nthjp54m] { flex: 0 0 auto; }
.dxgrid.is-fill .dxgrid-scroll[b-a6nthjp54m] { flex: 1 1 auto; min-height: 0; }

/* ───── 툴바 ───── */
.dxgrid-toolbar[b-a6nthjp54m] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--card);
    border-bottom: 1px solid var(--dx-border);
}
.dxgrid-toolbar-spacer[b-a6nthjp54m] { flex: 1; }
.dxgrid-toolbar-check[b-a6nthjp54m] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;
    padding: 4px 6px;
}
.dxgrid-toolbar-check input[b-a6nthjp54m] { cursor: pointer; }
.dxgrid-recordcount[b-a6nthjp54m] { font-size: 12px; color: var(--text-muted); font-weight: 600; }

.dxbtn[b-a6nthjp54m] {
    border: 1px solid var(--dx-border);
    background: var(--card);
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted);
    transition: background .12s, border-color .12s, color .12s;
}
.dxbtn:hover[b-a6nthjp54m] { border-color: var(--dx-accent); background: var(--dx-accent-soft); color: var(--dx-accent); }
.dxbtn:disabled[b-a6nthjp54m] { opacity: .5; cursor: default; }
.dxbtn-sm[b-a6nthjp54m] { padding: 2px 8px; font-size: 11px; }
.dxbtn-primary[b-a6nthjp54m] { color: #fff; background: var(--dx-accent); border-color: var(--dx-accent); }
.dxbtn-primary:hover[b-a6nthjp54m] { background: var(--primary-dark); color: #fff; }
.dxbtn-danger[b-a6nthjp54m] { color: var(--error-text); }
.dxbtn-danger:hover:not(:disabled)[b-a6nthjp54m] { background: var(--error-soft); border-color: var(--error); }
.dxbtn-danger-solid[b-a6nthjp54m] { color: #fff; background: linear-gradient(#ef4444, #dc2626); border-color: #dc2626; }
.dxbtn-danger-solid:hover[b-a6nthjp54m] { background: linear-gradient(#f15656, #e02b2b); }

/* ───── 열 선택 ───── */
.dxgrid-colchooser[b-a6nthjp54m] {
    position: absolute;
    z-index: 30;
    margin: 2px 8px;
    background: var(--card);
    border: 1px solid var(--dx-border);
    border-radius: 8px;
    box-shadow: var(--shadow-pop);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.dxgrid-colchooser-title[b-a6nthjp54m] { font-weight: 700; font-size: 12px; margin-bottom: 4px; color: var(--text-muted); }
.dxgrid-colchooser-item[b-a6nthjp54m] { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }

/* ───── 그룹 패널 ───── */
.dxgrid-grouppanel[b-a6nthjp54m] {
    min-height: 38px;
    padding: 7px 12px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--dx-border);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dxgrid-grouppanel-hint[b-a6nthjp54m] { color: var(--text-light); font-size: 12px; font-style: italic; }
.dxgrid-groupchip[b-a6nthjp54m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dx-accent-soft);
    border: 1px solid var(--dx-accent);
    color: var(--dx-accent);
    border-radius: 14px;
    padding: 3px 6px 3px 12px;
    font-size: 12px; font-weight: 600;
}
.dxgrid-groupchip button[b-a6nthjp54m] {
    border: none; background: var(--dx-accent-soft); color: var(--dx-accent);
    border-radius: 50%; width: 16px; height: 16px; line-height: 14px;
    font-size: 10px; cursor: pointer; padding: 0;
}
.dxgrid-groupchip button:hover[b-a6nthjp54m] { background: var(--error); color: #fff; }

/* ───── 스크롤/테이블 ───── */
.dxgrid-scroll[b-a6nthjp54m] { overflow: auto; }
.dxgrid-table[b-a6nthjp54m] { width: max-content; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.dxgrid-table.is-fill[b-a6nthjp54m] { width: 100%; min-width: 100%; table-layout: auto; }

.dxgrid-table thead th[b-a6nthjp54m],
.dxgrid-table tbody td[b-a6nthjp54m],
.dxgrid-table tfoot td[b-a6nthjp54m] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 헤더 */
.dxgrid-header th[b-a6nthjp54m] {
    position: sticky; top: 0; z-index: 5;
    background: linear-gradient(var(--dx-header-bg), var(--dx-header-bg2));
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--dx-border);
}
.dxgrid-th[b-a6nthjp54m] { position: relative; }
.dxgrid-th-cmd[b-a6nthjp54m] { cursor: default; text-align: center; }
.dxgrid-th:hover .dxgrid-th-text[b-a6nthjp54m] { color: var(--dx-accent); }
.dxgrid-th-text[b-a6nthjp54m] { display: inline-block; vertical-align: middle; }
.dxgrid-sort[b-a6nthjp54m] { display: inline-flex; align-items: center; gap: 2px; color: var(--dx-accent); margin-left: 5px; vertical-align: middle; }
.dxgrid-sort sup[b-a6nthjp54m] { font-size: 8px; }

.dxgrid-arrow[b-a6nthjp54m] { display: inline-block; width: 0; height: 0; border-style: solid; }
.dxgrid-arrow.is-up[b-a6nthjp54m] {
    border-width: 0 4px 6px 4px;
    border-color: transparent transparent var(--dx-accent) transparent;
}
.dxgrid-arrow.is-down[b-a6nthjp54m] {
    border-width: 6px 4px 0 4px;
    border-color: var(--dx-accent) transparent transparent transparent;
}

.dxgrid-resizer[b-a6nthjp54m] {
    position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
    cursor: col-resize; z-index: 6;
}

/* 필터 행 */
.dxgrid-filterrow td[b-a6nthjp54m] {
    position: sticky; top: 36px; z-index: 4;
    background: var(--surface-2); padding: 4px 6px;
    border-bottom: 1px solid var(--dx-border);
}
.dxgrid-filterwrap[b-a6nthjp54m] { display: flex; gap: 3px; align-items: center; }
.dxgrid-filterop[b-a6nthjp54m] {
    border: 1px solid var(--dx-border); border-radius: 5px; background: var(--surface-3);
    color: var(--text); font-size: 10px; padding: 3px 1px; max-width: 48px; cursor: pointer;
}
.dxgrid-filterinput[b-a6nthjp54m] {
    flex: 1; min-width: 0; width: 100%;
    background: var(--input-bg); color: var(--text);
    border: 1px solid var(--dx-border); border-radius: 5px; padding: 4px 7px; font-size: 12px;
}
.dxgrid-filterinput:focus[b-a6nthjp54m], .dxgrid-filterop:focus[b-a6nthjp54m] { outline: none; border-color: var(--dx-accent); box-shadow: 0 0 0 3px var(--dx-accent-soft); }

/* 본문 행 */
.dxgrid-row[b-a6nthjp54m] { background: var(--card); }
/* 줄무늬는 :nth-child 가 아니라 DataGrid.razor 가 붙여주는 .alt 로 칠한다.
   숨겨진 행(.dxgrid-mrow 등)도 :nth-child 에 포함돼 선택할 때마다 색이 뒤집히기 때문. */
.dxgrid-row.alt[b-a6nthjp54m] { background: var(--dx-row-alt); }
.dxgrid-row:hover[b-a6nthjp54m] { background: var(--hover); }
.dxgrid-row.selected[b-a6nthjp54m] { background: var(--dx-accent-soft); }
.dxgrid-row.selected:hover[b-a6nthjp54m] { background: var(--dx-accent-soft); }
.dxgrid-row.editing[b-a6nthjp54m] { background: var(--warning-soft); }
.dxgrid-row.current[b-a6nthjp54m] { box-shadow: inset 3px 0 0 var(--dx-accent); }
.dxgrid-row.current td:first-child[b-a6nthjp54m] { position: relative; }
.dxgrid-cell-cmd[b-a6nthjp54m] { text-align: center; white-space: nowrap; }
.dxgrid-cell-cmd .dxbtn[b-a6nthjp54m] { margin: 0 1px; }

.align-left[b-a6nthjp54m] { text-align: left; }
.align-right[b-a6nthjp54m] { text-align: right; }
.align-center[b-a6nthjp54m] { text-align: center; }

.dxedit[b-a6nthjp54m] {
    width: 100%; box-sizing: border-box;
    background: var(--input-bg); color: var(--text);
    border: 1px solid var(--dx-accent); border-radius: 5px; padding: 3px 6px; font-size: 12px;
}

/* 그룹 행 */
.dxgrid-grouprow td[b-a6nthjp54m] {
    background: var(--surface-3);
    font-size: 12px;
    border-bottom: 1px solid var(--dx-border);
}
.dxgrid-caret[b-a6nthjp54m] {
    cursor: pointer; display: inline-block; width: 0; height: 0;
    border-style: solid; vertical-align: middle; margin-right: 8px;
}
.dxgrid-caret.is-collapsed[b-a6nthjp54m] {
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--dx-accent);
}
.dxgrid-caret.is-expanded[b-a6nthjp54m] {
    border-width: 7px 5px 0 5px;
    border-color: var(--dx-accent) transparent transparent transparent;
}
.dxgrid-group-caption b[b-a6nthjp54m] { color: var(--dx-accent); }
.dxgrid-group-count[b-a6nthjp54m] { color: var(--text-light); margin-left: 6px; }
.dxgrid-group-sum[b-a6nthjp54m] {
    margin-left: 14px; color: var(--text); font-weight: 600;
    background: var(--card); border: 1px solid var(--dx-border); border-radius: 5px; padding: 0 6px;
}

/* 디테일 행 */
.dxgrid-detailrow td[b-a6nthjp54m] { background: var(--surface-2); padding: 0; }
.dxgrid-detail[b-a6nthjp54m] { padding: 12px 18px; border-left: 3px solid var(--dx-accent); }

/* 빈 데이터 */
.dxgrid-empty td[b-a6nthjp54m] { text-align: center; color: var(--text-light); padding: 28px; }

/* 푸터(요약) */
.dxgrid-footer td[b-a6nthjp54m] {
    position: sticky; bottom: 0; z-index: 3;
    background: linear-gradient(var(--dx-header-bg), var(--dx-header-bg2));
    font-weight: 700; color: var(--dx-accent);
    border-top: 2px solid var(--dx-border);
}

/* 페이저 */
.dxgrid-pager[b-a6nthjp54m] {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    position: relative;                 /* 페이지당 행 수를 우측에 절대 배치하기 위한 기준 */
    padding: 8px 10px;
    background: var(--card);
    border-top: 1px solid var(--dx-border);
    font-size: 12px; color: var(--text-muted);
}
.dxgrid-pager-size[b-a6nthjp54m] {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: 5px;
}
.dxpage[b-a6nthjp54m] {
    border: 1px solid var(--dx-border); background: var(--card); border-radius: 6px;
    min-width: 28px; height: 26px; cursor: pointer; color: var(--text-muted);
}
.dxpage:hover:not(:disabled)[b-a6nthjp54m] { border-color: var(--dx-accent); background: var(--dx-accent-soft); color: var(--dx-accent); }
.dxpage:disabled[b-a6nthjp54m] { opacity: .4; cursor: default; }
.dxgrid-pageinfo[b-a6nthjp54m] { margin: 0 8px; }
.dxgrid-pager-spacer[b-a6nthjp54m] { flex: 1; }
.dxgrid-pagesize[b-a6nthjp54m] { background: var(--input-bg); color: var(--text); border: 1px solid var(--dx-border); border-radius: 6px; padding: 3px 6px; }

/* ───── 팝업 편집 폼 ───── */
@keyframes dxgrid-overlay-in-b-a6nthjp54m { from { opacity: 0; } to { opacity: 1; } }
@keyframes dxgrid-modal-in-b-a6nthjp54m {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dxgrid-modal-overlay[b-a6nthjp54m] {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(17, 24, 39, .45);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: dxgrid-overlay-in-b-a6nthjp54m .16s ease;
}
.dxgrid-modal[b-a6nthjp54m] {
    background: var(--card); border-radius: 14px;
    /* 2열 배치이므로 폭을 넓혀 세로 스크롤이 생기지 않게 한다 */
    width: 880px; max-width: 100%; max-height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-pop);
    user-select: text; overflow: hidden;
    animation: dxgrid-modal-in-b-a6nthjp54m .22s cubic-bezier(.2,.8,.25,1);
}
.dxgrid-modal-header[b-a6nthjp54m] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; color: #fff;
    background: var(--accent-grad);
}
.dxgrid-modal-titlewrap[b-a6nthjp54m] { display: flex; align-items: center; gap: 14px; }
.dxgrid-modal-icon[b-a6nthjp54m] {
    flex: none; width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700;
    background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.dxgrid-modal-title[b-a6nthjp54m] { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.dxgrid-modal-sub[b-a6nthjp54m] { font-size: 12px; opacity: .85; margin-top: 2px; }
.dxgrid-modal-close[b-a6nthjp54m] {
    border: none; background: rgba(255,255,255,.16); color: #fff;
    width: 30px; height: 30px; border-radius: 8px;
    font-size: 15px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s;
}
.dxgrid-modal-close:hover[b-a6nthjp54m] { background: rgba(255,255,255,.32); }
/* 라벨 위 · 입력 아래 2열 배치 — 항목이 많아도 스크롤 없이 한 화면에 담는다 */
.dxgrid-modal-body[b-a6nthjp54m] {
    padding: 20px 24px; overflow: auto; background: var(--card);
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 11px 20px; align-content: start;
}
.dxgrid-modal-body.cols3[b-a6nthjp54m] { grid-template-columns: repeat(3, 1fr); }
.dxgrid-formrow[b-a6nthjp54m] { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* 주소·비고처럼 값이 긴 항목은 한 줄을 다 쓴다 */
.dxgrid-formrow.wide[b-a6nthjp54m] { grid-column: 1 / -1; }
.dxgrid-formlabel[b-a6nthjp54m] {
    font-size: 12px; color: var(--text-muted); font-weight: 600;
    letter-spacing: .1px; text-transform: none;
}
.dxgrid-formfield[b-a6nthjp54m] { display: flex; align-items: center; min-width: 0; }

@media (max-width: 1000px) {
    .dxgrid-modal-body.cols3[b-a6nthjp54m] { grid-template-columns: 1fr 1fr; }
}
/* 항목이 적을 땐 1열이 자연스럽다 */
@media (max-width: 720px) {
    .dxgrid-modal-body[b-a6nthjp54m],
    .dxgrid-modal-body.cols3[b-a6nthjp54m] { grid-template-columns: 1fr; }
}
.dxgrid-formfield .dxedit[b-a6nthjp54m] { width: 100%; }
/* EditTemplate 로 들어온 커스텀 입력도 칸을 꽉 채우게 */
.dxgrid-formfield[b-a6nthjp54m] >  input:not([type=checkbox]):not([type=radio]),
.dxgrid-formfield[b-a6nthjp54m] >  select,
.dxgrid-formfield[b-a6nthjp54m] >  textarea { width: 100%; }
.dxgrid-modal .dxedit[b-a6nthjp54m] {
    border: 1px solid var(--border); border-radius: 9px;
    padding: 8px 12px; font-size: 13px; background: var(--input-bg);
    color: var(--text); transition: border-color .12s, box-shadow .12s;
}
.dxgrid-modal select.dxedit[b-a6nthjp54m] { cursor: pointer; appearance: auto; }
.dxgrid-modal .dxedit-area[b-a6nthjp54m] { resize: vertical; min-height: 52px; font-family: inherit; line-height: 1.5; }
.dxedit-search[b-a6nthjp54m] { position: relative; display: flex; align-items: center; width: 100%; }
.dxedit-search i[b-a6nthjp54m] { position: absolute; left: 12px; color: var(--text-light); font-size: 13px; pointer-events: none; }
.dxedit-search .dxedit[b-a6nthjp54m] { width: 100%; padding-left: 33px; }
.dxgrid-modal .dxedit:hover[b-a6nthjp54m] { border-color: var(--text-light); }
.dxgrid-modal .dxedit:focus[b-a6nthjp54m] {
    outline: none; border-color: var(--dx-accent);
    box-shadow: 0 0 0 3px var(--dx-accent-soft);
}
.dxgrid-formreadonly[b-a6nthjp54m] {
    width: 100%; color: var(--text-muted); font-size: 13px;
    background: var(--surface-3); border: 1px dashed var(--border); border-radius: 9px;
    padding: 9px 12px; min-height: 38px; display: flex; align-items: center;
}
.dxgrid-switch[b-a6nthjp54m] { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 0; }
.dxgrid-switch input[b-a6nthjp54m] { position: absolute; opacity: 0; width: 0; height: 0; }
.dxgrid-switch-track[b-a6nthjp54m] {
    position: relative; width: 42px; height: 23px; border-radius: 999px;
    background: var(--surface-3); transition: background .18s;
}
.dxgrid-switch-track[b-a6nthjp54m]::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 19px; height: 19px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s;
}
.dxgrid-switch input:checked + .dxgrid-switch-track[b-a6nthjp54m] { background: var(--dx-accent); }
.dxgrid-switch input:checked + .dxgrid-switch-track[b-a6nthjp54m]::after { transform: translateX(19px); }
.dxgrid-switch-text[b-a6nthjp54m] { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.dxgrid-modal-footer[b-a6nthjp54m] {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 22px; border-top: 1px solid var(--border); background: var(--card);
}
.dxgrid-modal-footer .dxbtn[b-a6nthjp54m] {
    padding: 9px 20px; font-size: 13px; border-radius: 9px; font-weight: 600;
}
.dxgrid-modal-footer .dxbtn-primary[b-a6nthjp54m] { box-shadow: 0 4px 12px var(--primary-soft); }
.dxgrid-modal-footer .dxbtn-primary:hover[b-a6nthjp54m] { box-shadow: 0 6px 16px var(--primary-soft); }
@media (max-width: 560px) {
    .dxgrid-modal-body[b-a6nthjp54m] { grid-template-columns: 1fr; }
}

/* ───── 삭제 확인 메시지 박스 ───── */
.dxgrid-confirm[b-a6nthjp54m] { width: 420px; }
.dxgrid-confirm-header[b-a6nthjp54m] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 60%, #b91c1c 100%);
}
.dxgrid-confirm-body[b-a6nthjp54m] {
    padding: 22px; background: var(--card);
    display: flex; flex-direction: column; gap: 10px;
}
.dxgrid-confirm-msg[b-a6nthjp54m] { font-size: 14px; color: var(--text); font-weight: 600; }
.dxgrid-confirm-detail[b-a6nthjp54m] {
    font-size: 12.5px; color: var(--text-muted);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
    padding: 10px 12px; line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   모바일 그리드 (≤640px)
   ① 핵심 컬럼(Mobile 지정 또는 앞쪽 3개)만 표시 — 나머지는 .m-hide
      행을 탭하면 .dxgrid-mrow 가 "라벨: 값" 으로 펼쳐진다.
   ② 첫 컬럼 고정(sticky) — 옆으로 스크롤해도 식별 컬럼은 남는다.
   데스크톱에서는 .m-hide 도 .dxgrid-mrow 도 평소처럼/아예 안 보인다.
   ══════════════════════════════════════════════════════════════ */

/* 펼침 행은 모바일 전용 */
.dxgrid-mrow[b-a6nthjp54m] { display: none; }

@media (max-width: 640px) {
    .m-hide[b-a6nthjp54m] { display: none !important; }

    .dxgrid-mrow[b-a6nthjp54m] { display: table-row; }
    .dxgrid-mrow > td[b-a6nthjp54m] {
        background: var(--surface-2);
        border-bottom: 1px solid var(--dx-border);
        padding: 8px 12px 10px;
    }
    .dxgrid-mrow-body[b-a6nthjp54m] { display: flex; flex-direction: column; gap: 5px; }
    .dxgrid-mrow-field[b-a6nthjp54m] { display: flex; gap: 10px; font-size: 12.5px; min-width: 0; }
    .dxgrid-mrow-label[b-a6nthjp54m] { flex: 0 0 96px; color: var(--text-muted); font-weight: 600; }
    .dxgrid-mrow-value[b-a6nthjp54m] { min-width: 0; overflow-wrap: anywhere; }

    /* ② 첫 데이터 컬럼 고정 — 가로 스크롤 시 식별 컬럼 유지
       (.dxgrid-row.current td:first-child 의 position:relative 보다 우선해야 해서 선택자를 맞춤) */
    .dxgrid-table th:first-child[b-a6nthjp54m],
    .dxgrid-table td:first-child[b-a6nthjp54m],
    .dxgrid-row.current td:first-child[b-a6nthjp54m] {
        position: sticky; left: 0; z-index: 2;
        background: var(--card);
    }
    .dxgrid-row.selected td:first-child[b-a6nthjp54m],
    .dxgrid-row.current td:first-child[b-a6nthjp54m] { background: var(--primary-soft); }

    /* 탭 가능한 행임을 살짝 표시 */
    .dxgrid-row[b-a6nthjp54m] { cursor: pointer; }
}
/* /02_Components/Layout/MainLayout.razor.rz.scp.css */
/* 레이아웃 스타일은 전역 wwwroot/app.css 에서 관리합니다. */
/* /02_Components/Mdi/DockPanel.razor.rz.scp.css */
/* ───── 분할 컨테이너 ───── */
.dock-split[b-fwjdfhfrx0] {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}
.dock-split.h[b-fwjdfhfrx0] { flex-direction: row; }
.dock-split.v[b-fwjdfhfrx0] { flex-direction: column; }

.dock-pane[b-fwjdfhfrx0] {
    display: flex;
    flex-basis: 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.dock-splitter[b-fwjdfhfrx0] { flex: 0 0 6px; background: var(--border); position: relative; }
.dock-splitter:hover[b-fwjdfhfrx0] { background: var(--primary); }
.dock-splitter.h[b-fwjdfhfrx0] { cursor: col-resize; }
.dock-splitter.v[b-fwjdfhfrx0] { cursor: row-resize; }

/* ───── 탭 그룹 ───── */
.dock-group[b-fwjdfhfrx0] {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 4px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.dock-group.active[b-fwjdfhfrx0] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }

.dock-tabs-row[b-fwjdfhfrx0] {
    display: flex;
    align-items: stretch;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-width: 0;
}
.dock-tabs[b-fwjdfhfrx0] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* 탭이 넘칠 때만(JS 가 has-overflow 클래스를 붙임) 우측 좌/우 이동 버튼 표시 */
.dock-tabs-nav[b-fwjdfhfrx0] {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    flex: 0 0 auto;
}
.dock-tabs-row.has-overflow .dock-tabs-nav[b-fwjdfhfrx0] { display: flex; }
.dock-tabs-nav-btn[b-fwjdfhfrx0] {
    width: 22px; height: 22px;
    border: 1px solid var(--border); border-radius: 7px;
    background: var(--card); color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 11px; padding: 0;
}
.dock-tabs-nav-btn:hover[b-fwjdfhfrx0] { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.dock-tab[b-fwjdfhfrx0] {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 8px 8px 13px;
    border-right: 1px solid var(--border);
    border-top: 2px solid transparent;
    cursor: pointer; font-size: 12.5px; white-space: nowrap; color: var(--text-muted);
    user-select: none;
}
.dock-tab:hover[b-fwjdfhfrx0] { background: var(--primary-soft); color: var(--primary); }
.dock-tab.active[b-fwjdfhfrx0] { background: var(--card); font-weight: 700; color: var(--text); border-top-color: var(--primary); }
.dock-tab-icon[b-fwjdfhfrx0] { font-size: 12px; }
.dock-tab-close[b-fwjdfhfrx0] {
    border: none; background: var(--surface-3); color: var(--text-muted);
    width: 17px; height: 17px; line-height: 1; border-radius: 50%;
    cursor: pointer; font-size: 9px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.dock-tab-close:hover[b-fwjdfhfrx0] { background: var(--error); color: #fff; }

.dock-content[b-fwjdfhfrx0] { flex: 1; overflow: auto; position: relative; background: var(--card); }
.dock-doc[b-fwjdfhfrx0] { height: 100%; padding: 6px; }

/* ───── 도킹 가이드(다이아몬드) ───── */
.dock-guide-wrap[b-fwjdfhfrx0] {
    position: absolute; inset: 0; z-index: 30;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.dock-preview[b-fwjdfhfrx0] { position: absolute; background: rgba(93,135,255,.2); border: 2px solid var(--primary); pointer-events: none; }
.dock-preview.center[b-fwjdfhfrx0] { inset: 0; }
.dock-preview.left[b-fwjdfhfrx0]   { left: 0; top: 0; bottom: 0; width: 50%; }
.dock-preview.right[b-fwjdfhfrx0]  { right: 0; top: 0; bottom: 0; width: 50%; }
.dock-preview.top[b-fwjdfhfrx0]    { left: 0; right: 0; top: 0; height: 50%; }
.dock-preview.bottom[b-fwjdfhfrx0] { left: 0; right: 0; bottom: 0; height: 50%; }

.dock-guide[b-fwjdfhfrx0] { position: relative; width: 132px; height: 132px; }
.dock-z[b-fwjdfhfrx0] {
    position: absolute; width: 40px; height: 40px;
    background: var(--card);
    border: 1px solid var(--primary); border-radius: 6px;
    box-shadow: 0 2px 8px rgba(45,53,71,.2);
    pointer-events: auto; cursor: copy;
}
.dock-z[b-fwjdfhfrx0]::after {
    content: ""; position: absolute; inset: 5px;
    background: var(--primary-soft); border: 1px solid var(--primary); border-radius: 2px;
}
.dock-z.on[b-fwjdfhfrx0] { background: var(--primary); }
.dock-z.on[b-fwjdfhfrx0]::after { background: #fff; }
.dock-z.center[b-fwjdfhfrx0] { left: 46px; top: 46px; }
.dock-z.top[b-fwjdfhfrx0]    { left: 46px; top: 0; }
.dock-z.bottom[b-fwjdfhfrx0] { left: 46px; bottom: 0; }
.dock-z.left[b-fwjdfhfrx0]   { left: 0;  top: 46px; }
.dock-z.right[b-fwjdfhfrx0]  { right: 0; top: 46px; }
/* /02_Components/Mdi/MdiDockHost.razor.rz.scp.css */
.mdi2[b-v1szv6d2xv] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--shadow);
}

.mdi2-toolbar[b-v1szv6d2xv] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.mdi2-workspace[b-v1szv6d2xv] {
    position: relative;
    flex: 1;
    display: flex;
    overflow: hidden;
    background: var(--bg);
}

.mdi2-empty[b-v1szv6d2xv] {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; color: var(--text-light); text-align: center; line-height: 1.7; font-size: 14px;
}
.mdi2-empty-icon[b-v1szv6d2xv] { font-size: 44px; opacity: .55; }

/* 워크스페이스 가장자리 도킹 가이드 */
.dock-edge[b-v1szv6d2xv] {
    position: absolute; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    background: var(--card);
    border: 1px solid var(--primary); border-radius: 6px;
    box-shadow: 0 2px 8px rgba(45,53,71,.2);
    color: var(--primary); font-size: 13px; pointer-events: auto; cursor: copy;
}
.dock-edge.top[b-v1szv6d2xv]    { top: 8px;    left: 50%; transform: translateX(-50%); width: 50px; height: 32px; }
.dock-edge.bottom[b-v1szv6d2xv] { bottom: 8px; left: 50%; transform: translateX(-50%); width: 50px; height: 32px; }
.dock-edge.left[b-v1szv6d2xv]   { left: 8px;   top: 50%;  transform: translateY(-50%); width: 32px; height: 50px; }
.dock-edge.right[b-v1szv6d2xv]  { right: 8px;  top: 50%;  transform: translateY(-50%); width: 32px; height: 50px; }

.dock-edge-preview[b-v1szv6d2xv] { position: absolute; z-index: 38; background: rgba(93,135,255,.16); border: 2px dashed var(--primary); pointer-events: none; }
/* 탭 컨텍스트 메뉴 */
.tab-ctx-overlay[b-v1szv6d2xv] { position: fixed; inset: 0; z-index: 1200; }
.tab-ctx[b-v1szv6d2xv] {
    position: fixed; z-index: 1201; min-width: 172px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-pop);
    padding: 6px; animation: drop-in .14s ease;
}
.tab-ctx-item[b-v1szv6d2xv] {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: none; background: transparent; cursor: pointer;
    padding: 9px 12px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: var(--text); text-align: left; font-family: inherit; transition: background .12s, color .12s;
}
.tab-ctx-item i[b-v1szv6d2xv] { width: 15px; text-align: center; color: var(--text-light); font-size: 12px; }
.tab-ctx-item:hover[b-v1szv6d2xv] { background: var(--primary-soft); color: var(--primary); }
.tab-ctx-item:hover i[b-v1szv6d2xv] { color: var(--primary); }
.tab-ctx-item.danger[b-v1szv6d2xv] { color: var(--error-text); }
.tab-ctx-item.danger i[b-v1szv6d2xv] { color: var(--error-text); }
.tab-ctx-item.danger:hover[b-v1szv6d2xv] { background: var(--error-soft); }
.tab-ctx-sep[b-v1szv6d2xv] { height: 1px; background: var(--border); margin: 5px 8px; }

.dock-tab.pinned .dock-tab-icon i[b-v1szv6d2xv] { color: var(--primary); }

.dock-edge-preview.top[b-v1szv6d2xv]    { left: 0; right: 0; top: 0; height: 33%; }
.dock-edge-preview.bottom[b-v1szv6d2xv] { left: 0; right: 0; bottom: 0; height: 33%; }
.dock-edge-preview.left[b-v1szv6d2xv]   { top: 0; bottom: 0; left: 0; width: 33%; }
.dock-edge-preview.right[b-v1szv6d2xv]  { top: 0; bottom: 0; right: 0; width: 33%; }
/* /02_Components/Pages/3000_기초정보관리/Scr3002.razor.rz.scp.css */
/* 화면 3002 회사정보 — 관리자 페이지(AdminMenus)와 동일한 카드형 설정 스타일.
   adm-* 클래스는 AdminMenus.razor.css 에 스코프되어 있어 여기서 필요한 것만 다시 정의한다. */

.adm-screen[b-ig9h95hl6c] { height: 100%; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; }

.adm-head[b-ig9h95hl6c] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.adm-title[b-ig9h95hl6c] { font-size: 18px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 9px; }
.adm-title i[b-ig9h95hl6c] { color: var(--primary); }
.adm-sub[b-ig9h95hl6c] { font-size: 12.5px; color: var(--text-light); margin-top: 3px; }
.adm-sub b[b-ig9h95hl6c] { color: var(--text); }

/* 우측 상단 저장/되돌리기 영역 */
.adm-actions[b-ig9h95hl6c] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* 설정 카드 배치: 기본 2열, 좁아지면 1열 */
.adm-settings[b-ig9h95hl6c] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
@media (max-width: 900px) { .adm-settings[b-ig9h95hl6c] { grid-template-columns: 1fr; } }

.adm-card[b-ig9h95hl6c] { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.adm-card-head[b-ig9h95hl6c] { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.adm-card-head i[b-ig9h95hl6c] { color: var(--primary); width: 18px; text-align: center; }

.adm-set-body[b-ig9h95hl6c] { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.adm-field-label[b-ig9h95hl6c] { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.adm-input[b-ig9h95hl6c] {
    border: 1px solid var(--border); background: var(--input-bg); color: var(--text);
    border-radius: 10px; padding: 10px 13px; font-size: 14px; font-family: inherit;
    outline: none; transition: border-color .15s, box-shadow .15s; width: 100%; box-sizing: border-box;
}
.adm-input:focus[b-ig9h95hl6c] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
textarea.adm-input[b-ig9h95hl6c] { resize: vertical; line-height: 1.5; }

.adm-saved[b-ig9h95hl6c] { color: var(--success-text); font-size: 12.5px; font-weight: 700; }
.adm-logo-err[b-ig9h95hl6c] { color: var(--error-text); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.adm-set-hint[b-ig9h95hl6c] { font-size: 12px; color: var(--text-light); line-height: 1.5; }
.adm-set-hint b[b-ig9h95hl6c] { color: var(--text); }

/* 읽기전용 필드(사업자등록번호) — 수정 불가임을 시각적으로 구분 */
.adm-input:disabled[b-ig9h95hl6c] { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
/* /02_Components/Pages/3000_기초정보관리/Scr3004.razor.rz.scp.css */
/* ───────── 사원관리 카드형 목록 ───────── */

.emp-toolbar[b-f0f0nfejpc] {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 2px 12px;
}

.emp-group + .emp-group[b-f0f0nfejpc] { margin-top: 22px; }

.emp-group-head[b-f0f0nfejpc] {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 13px; color: var(--text);
    padding: 4px 2px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.emp-group-head i[b-f0f0nfejpc] { color: var(--primary); font-size: 12px; }

.emp-group-count[b-f0f0nfejpc] {
    font-weight: 600; font-size: 11.5px; color: var(--text-light);
    margin-left: 2px;
}

.emp-cards[b-f0f0nfejpc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding-bottom: 12px;
}

.emp-card[b-f0f0nfejpc] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    user-select: none;
}

.emp-card:hover[b-f0f0nfejpc] { border-color: var(--primary); transform: translateY(-2px); }

.emp-card.sel[b-f0f0nfejpc] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow);
    background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.emp-top[b-f0f0nfejpc] { display: flex; align-items: center; gap: 11px; }

.emp-avatar[b-f0f0nfejpc] {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    background: var(--accent-grad, var(--primary));
    color: #fff; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}

.emp-who[b-f0f0nfejpc] { min-width: 0; flex: 1; }
.emp-name[b-f0f0nfejpc] { font-weight: 800; font-size: 14.5px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.emp-sub[b-f0f0nfejpc] { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }

.emp-rows[b-f0f0nfejpc] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.emp-rows i[b-f0f0nfejpc] { width: 16px; margin-right: 5px; color: var(--text-light); font-size: 11px; text-align: center; }
.emp-rows .emp-note[b-f0f0nfejpc] { color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* /02_Components/Pages/3000_기초정보관리/Scr3008.razor.rz.scp.css */
/* ───────── 계정관리 카드형 목록 ───────── */

.acu-toolbar[b-lletxtw7d4] {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 2px 12px;
}

.acu-group + .acu-group[b-lletxtw7d4] { margin-top: 22px; }

.acu-group-head[b-lletxtw7d4] {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-size: 13px; color: var(--text);
    padding: 4px 2px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.acu-group-head i[b-lletxtw7d4] { color: var(--primary); font-size: 12px; }

.acu-group-count[b-lletxtw7d4] {
    font-weight: 600; font-size: 11.5px; color: var(--text-light);
    margin-left: 2px;
}

.acu-cards[b-lletxtw7d4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    padding-bottom: 12px;
}

.acu-card[b-lletxtw7d4] {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 14px 16px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    user-select: none;
}

.acu-card:hover[b-lletxtw7d4] { border-color: var(--primary); transform: translateY(-2px); }

.acu-card.sel[b-lletxtw7d4] {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow);
    background: color-mix(in srgb, var(--primary) 4%, var(--card));
}

.acu-top[b-lletxtw7d4] { display: flex; align-items: center; gap: 11px; }

.acu-avatar[b-lletxtw7d4] {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    background: var(--accent-grad, var(--primary));
    color: #fff; font-weight: 800; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}

.acu-who[b-lletxtw7d4] { min-width: 0; flex: 1; }
/* 이름은 절대 줄바꿈하지 않는다 — 공간이 모자라면 배지가 다음 줄로 내려간다 */
.acu-name[b-lletxtw7d4] { font-weight: 800; font-size: 14.5px; color: var(--text); display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-wrap: wrap; row-gap: 3px; }
.acu-sub[b-lletxtw7d4] { font-size: 11.5px; color: var(--text-light); margin-top: 2px; }

.acu-rows[b-lletxtw7d4] { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.acu-rows i[b-lletxtw7d4] { width: 16px; margin-right: 5px; color: var(--text-light); font-size: 11px; text-align: center; }
.acu-rows .acu-note[b-lletxtw7d4] { color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* /02_Components/Pages/AdminMenus.razor.rz.scp.css */
.adm-screen[b-ypgrsvt3rp] { height: 100%; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; }

.adm-head[b-ypgrsvt3rp] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.adm-title[b-ypgrsvt3rp] { font-size: 18px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 9px; }
.adm-title i[b-ypgrsvt3rp] { color: var(--primary); }
.adm-sub[b-ypgrsvt3rp] { font-size: 12.5px; color: var(--text-light); margin-top: 3px; }
.adm-actions[b-ypgrsvt3rp] { display: flex; gap: 8px; }

.adm-legend[b-ypgrsvt3rp] { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.text-ok[b-ypgrsvt3rp] { color: var(--success); }
.text-off[b-ypgrsvt3rp] { color: var(--text-light); }
.adm-count[b-ypgrsvt3rp] { margin-left: auto; color: var(--text-light); font-weight: 600; }

/* 환경설정 */
.adm-settings[b-ypgrsvt3rp] { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
@media (max-width: 900px) { .adm-settings[b-ypgrsvt3rp] { grid-template-columns: 1fr; } }
.adm-set-body[b-ypgrsvt3rp] { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.adm-input[b-ypgrsvt3rp] { border: 1px solid var(--border); background: var(--input-bg); color: var(--text); border-radius: 10px; padding: 10px 13px; font-size: 14px; font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
.adm-input:focus[b-ypgrsvt3rp] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.adm-input.hex[b-ypgrsvt3rp] { width: 110px; text-transform: uppercase; }
.adm-field-label[b-ypgrsvt3rp] { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.adm-save-row[b-ypgrsvt3rp] { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.adm-saved[b-ypgrsvt3rp] { color: var(--success-text); font-size: 12.5px; font-weight: 700; }
.adm-set-hint[b-ypgrsvt3rp] { font-size: 12px; color: var(--text-light); line-height: 1.5; }
.adm-set-hint b[b-ypgrsvt3rp] { color: var(--text); }

.adm-colors[b-ypgrsvt3rp] { display: flex; gap: 24px; flex-wrap: wrap; }
.adm-color[b-ypgrsvt3rp] { display: flex; flex-direction: column; gap: 9px; }
.adm-color > label[b-ypgrsvt3rp] { font-size: 12.5px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.adm-color-row[b-ypgrsvt3rp] { display: flex; align-items: center; gap: 8px; }
.adm-color-row input[type=color][b-ypgrsvt3rp] { width: 44px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; padding: 3px; }
.adm-swatches[b-ypgrsvt3rp] { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-sw[b-ypgrsvt3rp] { width: 24px; height: 24px; border-radius: 7px; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .12s; }
.adm-sw:hover[b-ypgrsvt3rp] { transform: scale(1.12); }
.adm-sw.on[b-ypgrsvt3rp] { border-color: var(--text); }
.adm-preview[b-ypgrsvt3rp] { display: flex; align-items: center; gap: 10px; }
.adm-prev-chip[b-ypgrsvt3rp] { color: #fff; font-size: 12px; font-weight: 700; padding: 7px 16px; border-radius: 999px; box-shadow: var(--shadow); }

/* 로고 */
.adm-logo-row[b-ypgrsvt3rp] { display: flex; align-items: center; gap: 16px; }
.adm-logo-preview[b-ypgrsvt3rp] { width: 64px; height: 64px; border-radius: 16px; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; flex-shrink: 0; box-shadow: var(--shadow); overflow: hidden; }
.adm-logo-preview.has-img[b-ypgrsvt3rp] { background: var(--card); border: 1px solid var(--border); }
/* cover 는 로고를 잘라내므로 contain — 여백을 두고 전체가 보이게 한다 */
.adm-logo-preview img[b-ypgrsvt3rp] { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.adm-logo-actions[b-ypgrsvt3rp] { display: flex; flex-direction: column; gap: 8px; }
.adm-file-btn[b-ypgrsvt3rp] { cursor: pointer; }
.adm-logo-err[b-ypgrsvt3rp] { color: var(--error-text); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* 로그인 화면 이미지 선택 */
.adm-loginimg-grid[b-ypgrsvt3rp] { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.adm-loginimg[b-ypgrsvt3rp] {
    display: flex; flex-direction: column; gap: 6px; align-items: center;
    padding: 8px; cursor: pointer; font-family: inherit;
    border: 2px solid var(--border); border-radius: 12px; background: var(--card);
    transition: all .15s;
}
.adm-loginimg img[b-ypgrsvt3rp] { width: 100%; height: 72px; object-fit: contain; border-radius: 8px; background: var(--surface-2); }
.adm-loginimg span[b-ypgrsvt3rp] { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.adm-loginimg:hover[b-ypgrsvt3rp] { border-color: var(--primary); }
.adm-loginimg.on[b-ypgrsvt3rp] { border-color: var(--primary); background: var(--primary-soft); }
.adm-loginimg.on span[b-ypgrsvt3rp] { color: var(--primary); }

/* 로그인 이미지 직접 업로드 */
.adm-upload[b-ypgrsvt3rp] { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.adm-upload-drop[b-ypgrsvt3rp] {
    flex: 1; min-width: 240px; position: relative; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 18px 14px; text-align: center;
    border: 2px dashed var(--border); border-radius: 12px; background: var(--surface-2);
    transition: all .15s;
}
.adm-upload-drop:hover[b-ypgrsvt3rp] { border-color: var(--primary); background: var(--primary-soft); }
.adm-upload-drop i[b-ypgrsvt3rp] { font-size: 22px; color: var(--primary); }
.adm-upload-drop b[b-ypgrsvt3rp] { font-size: 13px; color: var(--text); }
.adm-upload-drop small[b-ypgrsvt3rp] { font-size: 11.5px; color: var(--text-muted); }
/* InputFile 이 렌더한 실제 input 은 라벨 전체를 덮어 클릭 영역으로만 쓴다 */
.adm-upload-drop[b-ypgrsvt3rp]  input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.adm-upload-prev[b-ypgrsvt3rp] {
    width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 2px solid var(--border); border-radius: 12px; background: var(--card); padding: 8px;
}
.adm-upload-prev.on[b-ypgrsvt3rp] { border-color: var(--primary); background: var(--primary-soft); }
.adm-upload-prev img[b-ypgrsvt3rp] { width: 100%; height: 72px; object-fit: contain; border-radius: 8px; background: var(--surface-2); }
.adm-upload-prev span[b-ypgrsvt3rp] { font-size: 11.5px; font-weight: 700; color: var(--primary); }

/* AI 어시스턴트 설정 */
.adm-ai-modes[b-ypgrsvt3rp] { display: flex; gap: 10px; flex-wrap: wrap; }
.adm-ai-modes.off[b-ypgrsvt3rp] { opacity: .45; }
.adm-ai-mode[b-ypgrsvt3rp] {
    flex: 1; min-width: 170px; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px;
    border: 2px solid var(--border); border-radius: 12px; background: var(--card);
    padding: 12px 14px; transition: all .15s; font-family: inherit;
}
.adm-ai-mode i[b-ypgrsvt3rp] { color: var(--text-light); font-size: 16px; margin-bottom: 3px; }
.adm-ai-mode b[b-ypgrsvt3rp] { font-size: 13.5px; color: var(--text); }
.adm-ai-mode small[b-ypgrsvt3rp] { font-size: 11.5px; color: var(--text-light); line-height: 1.4; }
.adm-ai-mode:hover:not(:disabled)[b-ypgrsvt3rp] { border-color: var(--primary); }
.adm-ai-mode.on[b-ypgrsvt3rp] { border-color: var(--primary); background: var(--primary-soft); }
.adm-ai-mode.on i[b-ypgrsvt3rp], .adm-ai-mode.on b[b-ypgrsvt3rp] { color: var(--primary); }
.adm-ai-mode:disabled[b-ypgrsvt3rp] { cursor: not-allowed; }

/* 섹션 제목(중메뉴) — 카드 제목(소메뉴)과 한눈에 구분되도록 위 구분선 + 좌측 컬러 바 */
.adm-section-title[b-ypgrsvt3rp] {
    font-size: 16px; font-weight: 800; color: var(--text);
    display: flex; align-items: center; gap: 9px;
    margin-top: 10px; padding: 16px 0 2px 13px;
    border-top: 2px solid var(--border);
    position: relative;
}
.adm-section-title[b-ypgrsvt3rp]::before {
    content: ""; position: absolute; left: 0; top: 17px; bottom: 3px;
    width: 4px; border-radius: 4px; background: var(--primary);
}
.adm-section-title i[b-ypgrsvt3rp] { color: var(--primary); }
/* 카드 제목(소메뉴)은 은은한 머리 배경으로 한 단계 아래임을 표현 */
.adm-card-head[b-ypgrsvt3rp] { background: var(--hover); font-size: 13.5px; }

/* 기능 사용 여부 — 한 줄에 [이름/설명] ······ [스위치] */
.adm-feat-row[b-ypgrsvt3rp] {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.adm-feat-row:last-of-type[b-ypgrsvt3rp] { border-bottom: 0; }
.adm-feat-info[b-ypgrsvt3rp] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-feat-info b[b-ypgrsvt3rp] { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
.adm-feat-info b i[b-ypgrsvt3rp] { color: var(--primary); width: 15px; text-align: center; font-size: 12px; }
.adm-feat-info small[b-ypgrsvt3rp] { font-size: 11.5px; color: var(--text-light); }
.adm-feat-row .adm-switch[b-ypgrsvt3rp] { margin-left: auto; flex: 0 0 auto; }

.adm-grid[b-ypgrsvt3rp] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-content: start; }

.adm-card[b-ypgrsvt3rp] { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.adm-card-head[b-ypgrsvt3rp] { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.adm-card-head i[b-ypgrsvt3rp] { color: var(--primary); width: 18px; text-align: center; }
.adm-card-count[b-ypgrsvt3rp] { margin-left: auto; background: var(--primary-soft); color: var(--primary); border-radius: 20px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; }

.adm-list[b-ypgrsvt3rp] { padding: 6px 8px; }
.adm-row[b-ypgrsvt3rp] { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; transition: background .15s; }
.adm-row:hover[b-ypgrsvt3rp] { background: var(--hover); }
.adm-row.off[b-ypgrsvt3rp] { opacity: .55; }
.adm-row-ico[b-ypgrsvt3rp] { color: var(--text-light); width: 16px; text-align: center; font-size: 13px; }
.adm-row-name[b-ypgrsvt3rp] { font-size: 13px; font-weight: 600; color: var(--text); }
.adm-row-code[b-ypgrsvt3rp] { font-size: 11px; color: var(--text-light); font-family: 'Consolas', monospace; }
.adm-row .adm-switch[b-ypgrsvt3rp] { margin-left: auto; }

.adm-switch[b-ypgrsvt3rp] { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.adm-switch input[b-ypgrsvt3rp] { position: absolute; opacity: 0; width: 0; height: 0; }
.adm-switch-track[b-ypgrsvt3rp] { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--surface-3); transition: background .18s; }
.adm-switch-track[b-ypgrsvt3rp]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.adm-switch input:checked + .adm-switch-track[b-ypgrsvt3rp] { background: var(--primary); }
.adm-switch input:checked + .adm-switch-track[b-ypgrsvt3rp]::after { transform: translateX(18px); }
.adm-switch-text[b-ypgrsvt3rp] { font-size: 11.5px; font-weight: 700; color: var(--text-muted); min-width: 26px; }
/* /02_Components/Pages/EnvMonitor.razor.rz.scp.css */
.env-screen[b-dhq8j7pd3k] {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    /* 도면 회전/이동 드래그 중 글자가 파랗게 선택되는 것 방지 — 입력칸은 아래에서 다시 허용 */
    user-select: none;
}
/* 입력/텍스트 필드는 선택·타이핑이 정상 동작해야 한다 */
.env-screen input[b-dhq8j7pd3k], .env-screen textarea[b-dhq8j7pd3k], .env-screen select[b-dhq8j7pd3k] {
    user-select: text;
}

/* 헤더 */
.env-head[b-dhq8j7pd3k] { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.env-title[b-dhq8j7pd3k] { font-size: 18px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 9px; }
.env-title i[b-dhq8j7pd3k] { color: var(--primary); }
.env-sub[b-dhq8j7pd3k] { font-size: 12.5px; color: var(--text-light); margin-top: 3px; }
.env-tools[b-dhq8j7pd3k] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.env-legend[b-dhq8j7pd3k] { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); }
.env-legend span[b-dhq8j7pd3k] { display: inline-flex; align-items: center; gap: 5px; }
.env-legend .dot[b-dhq8j7pd3k] { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.c-cold .dot[b-dhq8j7pd3k], .dot.c-cold[b-dhq8j7pd3k] { background: #4f93f7; }
.c-ok .dot[b-dhq8j7pd3k],   .dot.c-ok[b-dhq8j7pd3k]   { background: #25c281; }
.c-warm .dot[b-dhq8j7pd3k], .dot.c-warm[b-dhq8j7pd3k] { background: #ff9f43; }
.c-hot .dot[b-dhq8j7pd3k],  .dot.c-hot[b-dhq8j7pd3k]  { background: #f0584f; }

.env-seg[b-dhq8j7pd3k] { display: inline-flex; background: var(--surface-3); border-radius: 10px; padding: 3px; gap: 2px; }
.env-seg button[b-dhq8j7pd3k] { border: none; background: transparent; padding: 6px 16px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: all .15s; }
.env-seg button.active[b-dhq8j7pd3k] { background: var(--card); color: var(--primary); box-shadow: 0 2px 6px rgba(31,42,68,.12); }

/* 전층 하위 전환(3D↔2D) — 주 세그먼트에 종속된 보조 토글이라 한 단계 작고 옅게 */
.env-seg-sub[b-dhq8j7pd3k] { margin-left: 6px; padding: 2px; }
.env-seg-sub button[b-dhq8j7pd3k] { padding: 4px 11px; font-size: 12px; }
.env-seg-sub button.active[b-dhq8j7pd3k] { color: var(--text); }
/* 전층이 아닐 때 — 자리(폭)는 유지한 채 보이지만 않게. 툴바 항목들이 밀리지 않는다. */
.env-seg-sub.ghost[b-dhq8j7pd3k] { visibility: hidden; pointer-events: none; }

/* 요약 KPI */
.env-summary[b-dhq8j7pd3k] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 0 0 auto; }
.env-kpi[b-dhq8j7pd3k] { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }
.k-ico[b-dhq8j7pd3k] { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.k-val[b-dhq8j7pd3k] { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.k-lbl[b-dhq8j7pd3k] { font-size: 11.5px; color: var(--text-light); }
/* "3/8대" 처럼 분모·단위를 앞 숫자보다 약하게 — 현재값이 먼저 읽히게 한다 */
.k-sub[b-dhq8j7pd3k] { font-size: 13px; font-weight: 700; color: var(--text-light); letter-spacing: 0; }
@media (max-width: 900px) { .env-summary[b-dhq8j7pd3k] { grid-template-columns: repeat(2, 1fr); } }

/* 평면도 스테이지 */
.floor-stage[b-dhq8j7pd3k] {
    flex: 1 1 auto;
    min-height: 0;
    /* 스테이지 안 오버레이(층 레일·전층 액션·축척·힌트)의 기준 상자.
       이게 없으면 바깥 요소를 기준으로 잡혀 레이아웃 밖(헤더 위)으로 튀어나간다. */
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 26px;
    overflow: hidden;
    perspective: 1700px;
    container-type: size;   /* 도면 폭을 스테이지 높이(100cqh)로도 제한하기 위한 컨테이너 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.floor[b-dhq8j7pd3k] {
    position: relative;
    /* 가로형이면 폭 100%, 세로형(층 도면이 높은 건물)이면 스테이지 높이에 맞춰 폭을 줄인다 */
    width: min(100%, calc(100cqh * var(--ar, 2.296)));
    max-width: 1120px;
    aspect-ratio: 1240 / 540;
    background:
        linear-gradient(135deg, rgba(108,92,231,.06), rgba(108,92,231,0)),
        var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 12px;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

/* 3D 바닥 두께(입체 베이스) */
.floor-base[b-dhq8j7pd3k] {
    position: absolute; inset: 0; border-radius: 12px;
    background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
    transform: translateZ(-26px);
    box-shadow: 0 40px 60px rgba(40,30,90,.28);
    opacity: 0; transition: opacity .4s;
}
.floor.is-3d .floor-base[b-dhq8j7pd3k] { opacity: 1; }

/* 바닥 격자 */
.floor-grid[b-dhq8j7pd3k] {
    position: absolute; inset: 0; border-radius: 10px;
    background-image:
        linear-gradient(to right, rgba(120,110,200,.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120,110,200,.12) 1px, transparent 1px);
    background-size: 5% 7.7%;
    pointer-events: none;
}

/* 실(방) */
.room[b-dhq8j7pd3k] {
    position: absolute;
    border: 1.5px solid rgba(120,110,200,.35);
    border-radius: 8px;
    background: rgba(255,255,255,.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s, background .3s, border-color .3s;
}
.floor.is-3d .room[b-dhq8j7pd3k] {
    transform: translateZ(var(--zh, 38px));   /* 구역 높이(--zh) — 편집에서 m 단위로 지정 */
    box-shadow: -16px 24px 30px rgba(40,30,90,.30), inset 0 0 0 1px rgba(255,255,255,.55);
}

/* 벽면(입체 측면) — 3D에서만 보이도록 아래로 내려 그린다 */
.room-face[b-dhq8j7pd3k] {
    position: absolute; left: 0; right: 0; bottom: 0; height: var(--zh, 38px);
    transform-origin: bottom center; transform: rotateX(-90deg) translateY(var(--zh, 38px));
    background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary) 55%, #000));
    opacity: 0; border-radius: 0 0 8px 8px;
}
.floor.is-3d .room-face[b-dhq8j7pd3k] { opacity: .22; }

/* 상태별 색 */
.room.c-cold[b-dhq8j7pd3k] { border-color: rgba(59,130,246,.6);  background: rgba(59,130,246,.12); }
.room.c-ok[b-dhq8j7pd3k]   { border-color: rgba(40,199,111,.55); background: rgba(40,199,111,.12); }
.room.c-warm[b-dhq8j7pd3k] { border-color: rgba(255,159,67,.6);  background: rgba(255,159,67,.14); }
.room.c-hot[b-dhq8j7pd3k]  { border-color: rgba(234,84,85,.6);   background: rgba(234,84,85,.14); }

.room-inner[b-dhq8j7pd3k] {
    position: relative; width: 100%; height: 100%;
    padding: 7px 8px;
    display: flex; flex-direction: column; gap: 5px;
    transform-origin: center center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
    overflow: hidden; border-radius: 8px;
}
/* 3D 에서도 글자는 정면을 보도록 역회전(빌보드) */
/* 시점 회전(--rz = 40 - _rotate)을 따라 역회전 — 어느 각도에서도 글자가 카메라를 향한다 */
.floor.is-3d .room-inner[b-dhq8j7pd3k] { transform: translateZ(1px) rotateZ(var(--rz, 40deg)) rotateX(-52deg); }

.room-name[b-dhq8j7pd3k] { font-size: 12px; font-weight: 800; color: var(--text); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-data[b-dhq8j7pd3k] { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.rd[b-dhq8j7pd3k] { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd i[b-dhq8j7pd3k] { font-size: 10px; opacity: .9; }
.rd.t[b-dhq8j7pd3k] { color: var(--error-text); }
.rd.h[b-dhq8j7pd3k] { color: var(--info); }
.rd.l[b-dhq8j7pd3k] { color: var(--warning-text); }
/* 공기질(G58) — 분진·CO2. 상한 초과(.over)는 온도 경보와 같은 빨강으로 통일한다. */
.rd.d[b-dhq8j7pd3k] { color: var(--text-muted); }
.rd.c[b-dhq8j7pd3k] { color: var(--purple); }
.rd.over[b-dhq8j7pd3k] { color: var(--error-text); font-weight: 800; }

/* 작은 방 대응 */
.room[style*="width:8"] .room-name[b-dhq8j7pd3k],
.room[style*="width:9"] .room-name[b-dhq8j7pd3k] { font-size: 11px; }

/* 확대/축소 컨트롤 */
.floor-zoom[b-dhq8j7pd3k] {
    position: absolute; right: 18px; bottom: 18px; z-index: 5;
    display: flex; flex-direction: column; gap: 6px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 6px; box-shadow: var(--shadow);
}
.floor-zoom button:disabled[b-dhq8j7pd3k] { opacity: .35; cursor: default; }
.floor-zoom button[b-dhq8j7pd3k] {
    border: none; background: var(--surface-2); color: var(--text-muted);
    width: 38px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 700;
    transition: all .15s;
}
.floor-zoom button:hover[b-dhq8j7pd3k] { background: var(--primary-soft); color: var(--primary); }
.floor-zoom .zoom-val[b-dhq8j7pd3k] { font-size: 11px; }
.floor-zoom .zoom-sep[b-dhq8j7pd3k] { height: 1px; background: var(--border); margin: 2px 4px; }

.floor-stage[b-dhq8j7pd3k] { cursor: grab; }
.floor-stage.dragging[b-dhq8j7pd3k] { cursor: grabbing; }
.floor-stage.dragging .floor[b-dhq8j7pd3k] { transition: none; }

.floor-hint[b-dhq8j7pd3k] {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--card); border: 1px solid var(--border); color: var(--text-light);
    font-size: 11.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; box-shadow: var(--shadow);
    pointer-events: none; opacity: .9;
}

/* OHT 반송 레일 루프 — 구역들을 감싸는 순환 궤도 */
.oht-rail[b-dhq8j7pd3k] {
    position: absolute;
    left: 2.5%; top: 3%; right: 2.5%; bottom: 7%;
    border: 2px dashed rgba(108,92,231,.55);
    border-radius: 16px;
    box-shadow: inset 0 0 0 6px rgba(108,92,231,.05);
    transform: translateZ(10px);
    pointer-events: none;
}
.floor:not(.is-3d) .oht-rail[b-dhq8j7pd3k] { transform: none; }

/* OHT 대차 — 레일을 따라 시계방향 순환 (물류 반송) */
.oht[b-dhq8j7pd3k] {
    position: absolute;
    left: 2.5%; top: 3%;
    width: 30px; height: 15px;
    margin: -8px 0 0 -15px;                 /* left/top 지점에 중심 맞춤 */
    border-radius: 5px;
    background: linear-gradient(135deg, #2ee59d, #17a673);
    box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 7px 16px rgba(20,120,80,.45), 0 0 18px rgba(37,194,129,.75);
    transform: translateZ(22px);
    z-index: 6;
    pointer-events: none;
    animation: oht-run-b-dhq8j7pd3k 24s linear infinite;
}
.oht[b-dhq8j7pd3k]::after {                                /* 대차 상판 줄무늬(캐리어 느낌) */
    content: "";
    position: absolute; inset: 3px 4px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px 6px);
    opacity: .7;
}
.floor:not(.is-3d) .oht[b-dhq8j7pd3k] { transform: none; }

@keyframes oht-run-b-dhq8j7pd3k {
    0%   { left: 2.5%;  top: 3%;  }
    25%  { left: 97.5%; top: 3%;  }
    50%  { left: 97.5%; top: 93%; }
    75%  { left: 2.5%;  top: 93%; }
    100% { left: 2.5%;  top: 3%;  }
}

/* ---------- 유유랑 AI Factory LAB 평면도 요소 ---------- */
.floor-title[b-dhq8j7pd3k] {
    position: absolute; top: 6%; left: 50%; transform: translateX(-50%);
    background: #c00000; color: #fff; font-weight: 900; font-size: 15px;
    padding: 4px 18px; letter-spacing: 0.5px; white-space: nowrap; z-index: 5;
}
.floor.is-3d .floor-title[b-dhq8j7pd3k] { display: none; }

.room.zone[b-dhq8j7pd3k] { border-width: 2px; }

/* 구역 작업 현황 배지 — 상세작업 진행과 이름 자동 매칭, 진행/대기 작업이 있을 때만 표시 */
.room-work[b-dhq8j7pd3k] {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 2px; padding: 2px 8px; border-radius: 999px;
    background: var(--warning-soft); border: 1px solid var(--warning-text);
    font-size: 9.5px; font-weight: 800; color: var(--warning-text); white-space: nowrap;
}
.room-work.run[b-dhq8j7pd3k] { background: var(--success-soft); border-color: var(--success); color: var(--success-text); }
.room-work.run i[b-dhq8j7pd3k] { animation: work-run-b-dhq8j7pd3k 1.4s ease-in-out infinite; }
@keyframes work-run-b-dhq8j7pd3k { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .room-work.run i[b-dhq8j7pd3k] { animation: none; } }

/* 마커 연결 설비의 최신 수집값 (G56) — 마커 박스 밖(바로 아래) 알약 배지.
   마커 안에 두면 작은 박스에서 이름과 겹쳐 둘 다 못 읽는다. left/top 은 인라인으로
   마커 하단 중앙이 지정되고, translateX(-50%) 로 가운데 정렬한다. */
.furn-vals[b-dhq8j7pd3k] {
    position: absolute; z-index: 5;
    transform: translate(-50%, 3px);
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2px 7px;
    padding: 2px 6px; border-radius: 999px;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,.14);
    font-size: 8.5px; color: var(--text-muted); line-height: 1.2;
    white-space: nowrap; pointer-events: none;
}
.furn-vals span[b-dhq8j7pd3k] { display: inline-flex; gap: 3px; }
.furn-vals b[b-dhq8j7pd3k] { color: var(--text); font-variant-numeric: tabular-nums; }
.furn-vals em[b-dhq8j7pd3k] { font-style: normal; color: var(--text-light); }
.furn-vals.stale[b-dhq8j7pd3k], .furn-vals.stale b[b-dhq8j7pd3k] { color: var(--warning-text); }
.furn-vals i[b-dhq8j7pd3k] { color: var(--warning-text); font-size: 8px; }

/* VS 디자이너식 정렬 도구 (다중 선택 시) */
.align-grp[b-dhq8j7pd3k] {
    display: inline-flex; gap: 1px;
    background: var(--surface-3); border-radius: 8px; padding: 2px;
}
.align-grp button[b-dhq8j7pd3k] {
    border: none; background: transparent; color: var(--text-muted);
    width: 28px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.align-grp button:hover:not(:disabled)[b-dhq8j7pd3k] { background: var(--card); color: var(--primary); }
.align-grp button:disabled[b-dhq8j7pd3k] { opacity: .35; cursor: default; }

/* 팻말 ↔ 구역 점선 연결 (G60) — viewBox 0~100 이 도면 % 좌표와 일치 */
.zone-links[b-dhq8j7pd3k] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5; overflow: visible;
}
.zone-links line[b-dhq8j7pd3k] {
    stroke: var(--text-light); stroke-width: 1.5; stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke; opacity: .75;
}

/* 편집 모드 팻말 손잡이 — 드래그해서 팻말 위치 지정 */
.card-chip[b-dhq8j7pd3k] {
    position: absolute; transform: translateX(-50%); z-index: 7;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--card); border: 1.5px dashed var(--primary); border-radius: 999px;
    padding: 3px 10px; font-size: 11px; font-weight: 800; color: var(--primary);
    cursor: move; white-space: nowrap; box-shadow: var(--shadow);
    touch-action: none;
}
.card-chip.auto[b-dhq8j7pd3k] { border-color: var(--text-light); color: var(--text-muted); }
.card-chip:hover[b-dhq8j7pd3k] { border-style: solid; }

/* 전층 센서 요약 패널 — 스테이지 우측 오버레이, 모든 층 값을 목록으로 */
.env-allsum[b-dhq8j7pd3k] {
    position: absolute; right: 14px; top: 14px; bottom: 14px; z-index: 8;
    width: min(360px, 46%);
    display: flex; flex-direction: column;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop);
    overflow: hidden;
}
.env-allsum-head[b-dhq8j7pd3k] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text);
}
.env-allsum-head i[b-dhq8j7pd3k] { color: var(--primary); margin-right: 6px; }
.env-allsum-head button[b-dhq8j7pd3k] {
    border: none; background: transparent; color: var(--text-muted); cursor: pointer;
    width: 26px; height: 26px; border-radius: 8px;
}
.env-allsum-head button:hover[b-dhq8j7pd3k] { background: var(--hover); color: var(--text); }
.env-allsum-body[b-dhq8j7pd3k] { flex: 1; overflow-y: auto; padding: 10px 12px 14px; }
.env-allsum-flr[b-dhq8j7pd3k] {
    display: flex; align-items: center; gap: 7px;
    margin: 10px 0 6px; padding: 7px 10px; border-radius: 9px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 12.5px; font-weight: 800; color: var(--text);
}
.env-allsum-flr:hover[b-dhq8j7pd3k] { border-color: var(--primary); }
.env-allsum-flr.cur[b-dhq8j7pd3k] { border-color: var(--primary); background: var(--primary-soft); }
.env-allsum-flr i[b-dhq8j7pd3k] { color: var(--primary); }
.env-allsum-flr span[b-dhq8j7pd3k] { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.env-allsum-empty[b-dhq8j7pd3k] { font-size: 11.5px; color: var(--text-light); padding: 2px 4px 6px; }
.env-allsum-grid[b-dhq8j7pd3k] { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.env-allsum-grid .env-card[b-dhq8j7pd3k] { position: static; transform: none; }

/* 3D 전층 위치 드래그 가이드 — 아래층에 투영된 발자국 */
.stack-footprint[b-dhq8j7pd3k] {
    position: absolute;
    border: 2px dashed var(--primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
}
.stack-footprint span[b-dhq8j7pd3k] {
    background: var(--card); border: 1px solid var(--primary); color: var(--primary);
    border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 800;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 경보 구역(G46) — 온·습도가 설정 범위를 벗어난 곳. 온도 색조를 덮지 않고 테두리로만 알린다. */
.room.zone.alarm[b-dhq8j7pd3k] {
    outline: 2px solid var(--error);
    outline-offset: 1px;
    animation: zone-alarm-b-dhq8j7pd3k 1.6s ease-in-out infinite;
    z-index: 4;
}
@keyframes zone-alarm-b-dhq8j7pd3k {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
    50%      { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
}
/* 애니메이션 최소화를 선택한 사용자에게는 깜빡임 없이 테두리만 */
@media (prefers-reduced-motion: reduce) {
    .room.zone.alarm[b-dhq8j7pd3k] { animation: none; }
}
.room.c-none[b-dhq8j7pd3k] { --room-tint: 148, 163, 184; }
.room-sub[b-dhq8j7pd3k] { display: flex; gap: 8px; font-size: 10px; color: var(--text-light); margin-top: 2px; }
.room-sub i[b-dhq8j7pd3k] { margin-right: 2px; }
.room-sub .stale[b-dhq8j7pd3k] { color: var(--error); font-weight: 700; }
.rd.n[b-dhq8j7pd3k] { font-size: 11px; color: var(--text-light); }

.furn[b-dhq8j7pd3k] {
    position: absolute; z-index: 3;
    background: color-mix(in srgb, var(--surface-2) 70%, #dbe3f0);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 600; color: var(--text-muted);
    overflow: hidden; text-align: center; line-height: 1.05; border-radius: 2px;
}
.furn span[b-dhq8j7pd3k] { padding: 0 2px; position: relative; z-index: 1; }

/* 종류별 픽토그램 — 박스 크기에 비례해 커지는 워터마크. 이름 글자가 그 위에 얹힌다. */
.furn[b-dhq8j7pd3k] { container-type: size; }
.furn .furn-ico[b-dhq8j7pd3k] {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(11px, 58cqmin, 46px);
    /* 워터마크가 너무 옅으면 설비가 "빈 색 박스"로 보인다 — 이름을 가리지 않는 선까지 올린다. */
    opacity: .5;
    pointer-events: none;
}
/* 이름이 있는 마커는 아이콘을 위쪽으로 밀어 글자와 겹치지 않게 한다 */
.furn span:not(:empty) ~ .furn-ico[b-dhq8j7pd3k], .furn .furn-ico:has(+ span:not(:empty))[b-dhq8j7pd3k] { align-items: flex-start; padding-top: 6%; }
.furn.tall span[b-dhq8j7pd3k] { writing-mode: vertical-rl; }
.furn.green[b-dhq8j7pd3k] { background: #e2f0d9; border-color: #a9d18e; color: #385723; }
.furn.stair[b-dhq8j7pd3k] { background: #ffe9b3; border-color: #e6c866; color: #7a5c00; }
.furn.door[b-dhq8j7pd3k] { background: #e2f0d9; border-color: #a9d18e; color: #385723; z-index: 4; font-size: 9px; }
.furn.door.tall span[b-dhq8j7pd3k] { writing-mode: vertical-rl; }
/* 추가 마커 종류 (G48) */
.furn.rack[b-dhq8j7pd3k] { background: #dbe9ff; border-color: #7fa8e8; color: #1d4f91; }
.furn.tank[b-dhq8j7pd3k] { background: #e5e0ff; border-color: #a99ae8; color: #43349b; }
.furn.elec[b-dhq8j7pd3k] { background: #fff3c4; border-color: #e0c341; color: #7a6200; }
.furn.fire[b-dhq8j7pd3k] { background: #ffe0e0; border-color: #e88b8b; color: #8f1d1d; }
/* 전극 공정 설비 (G60) — 공정 흐름을 색으로도 읽히게: 투입(호퍼) → 조액(믹서) → 코팅 → 프레스 → 슬리팅 */
.furn.hopper[b-dhq8j7pd3k]  { background: #e5e0ff; border-color: #9c8ae0; color: #3b2d90; }
.furn.mixer[b-dhq8j7pd3k]   { background: #d8ecff; border-color: #6fa6e0; color: #14477f; }
.furn.coater[b-dhq8j7pd3k]  { background: #d9f2e6; border-color: #6dc39a; color: #12633f; }
.furn.press[b-dhq8j7pd3k]   { background: #ffe7d1; border-color: #e8ac74; color: #8a4a12; }
.furn.slitter[b-dhq8j7pd3k] { background: #ffe0ec; border-color: #e588b0; color: #8c2154; }
.furn.pallet[b-dhq8j7pd3k]  { background: #f2e7d3; border-color: #cdae78; color: #6b4f16; }
.furn.gauge[b-dhq8j7pd3k]   { background: #e2fbfe; border-color: #79cfdb; color: #0f5b66; }

/* 마커 이미지 — 박스를 가득 채우고 이름은 위에 얹힌다 */
.furn .furn-img[b-dhq8j7pd3k] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; pointer-events: none; user-select: none;
}
.furn .furn-img + span[b-dhq8j7pd3k] {
    background: rgba(255,255,255,.78); border-radius: 4px; padding: 0 4px;
}
/* 3D 에서 마커는 자기가 놓인 구역 천장 위에 얹힌다 (--fh = 아래 구역 최고 높이 + 1px).
   눕혀 두면 도면 기울기(rotateX 52°) 때문에 납작하게 뭉개져 보여서,
   시점 역회전(--rz · 빌보드) 후 아래변을 축으로 45° 세워 입간판처럼 보이게 한다 —
   화면을 어느 방향으로 돌려도 픽토그램·이름이 카메라를 향한다.
   기울기 투영으로 작아 보이는 만큼 1.25배 확대해 읽기 좋게 보정한다. */
.floor.is-3d .furn[b-dhq8j7pd3k] {
    opacity: .92;
    /* 세우면 전체 높이가 그대로 보여 커 보인다 — 0.8배로 줄여 균형을 맞춘다 */
    transform: translateZ(var(--fh, 1px)) rotateZ(var(--rz, 40deg)) rotateX(-45deg) scale(.8);
    transform-origin: bottom center;
    box-shadow: 0 6px 14px rgba(40,30,90,.22);
}
/* 라인(벽/통로)은 바닥에 그린 선이라 세우지 않는다 */
.floor.is-3d .furn.lineh[b-dhq8j7pd3k], .floor.is-3d .furn.linev[b-dhq8j7pd3k] {
    transform: translateZ(var(--fh, 1px));
    box-shadow: none;
}

/* 설비 데이터 카드 — 3D 에서는 시점 역회전(--rz · 빌보드) 후 도면 기울기(52°)를 상쇄해
   정면으로 세운다. 눕혀 두면 바닥에 파묻힌 것처럼 납작하게 보인다.
   윗변(마커 쪽)을 축으로 세워 카드가 마커 아래에서 관람자 쪽으로 일어선다. */
.floor.is-3d .furn-card[b-dhq8j7pd3k] {
    /* 아래변을 축으로 세운다 — 윗변 축(top)으로 세우면 카드가 바닥 아래로 파고든다.
       입간판처럼 바닥 위에 서고, rotateZ(--rz) 빌보드로 항상 카메라를 향한다. */
    transform: translate(-50%, 6px) rotateZ(var(--rz, 40deg)) rotateX(-52deg);
    transform-origin: bottom center;
    box-shadow: 0 10px 24px rgba(40,30,90,.28);
}

/* ---------- 2D 구역 상단 라벨 (이름 + 온습도) ---------- */
.zone-head[b-dhq8j7pd3k] {
    /* top 은 인라인(구역 y 위치)으로 지정 — 구역이 여러 줄일 때 라벨이 겹치지 않게 각 구역 위에 붙인다 */
    position: absolute; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 6;
}
/* 예전에는 2D 에서 구역 안 텍스트를 숨겼다 — 구역 위 팻말(측정값 카드)이 이름을 대신 보여줬기 때문.
   G65 로 구역 센서·팻말이 사라지면서 2D 에 이름이 아예 안 보이게 되어 숨김을 해제한다.
   지금 구역 안에는 이름과 작업 현황만 있어 겹칠 일이 없다. */

/* ---------- 구역 측정값 카드 (2D 라벨 · 3D 전층 공용) ---------- */
/* 항목 수가 구역마다 달라 높이가 가변이다 — 폭만 고정해 카드끼리 정렬을 맞춘다. */
.env-card[b-dhq8j7pd3k] {
    width: 132px; background: var(--card); border: 1px solid var(--border);
    border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(47, 43, 80, .13);
    font-variant-numeric: tabular-nums;
}
.env-card .ec-name[b-dhq8j7pd3k] {
    background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: -.2px;
    padding: 3px 6px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 경보 구역은 머리글을 빨갛게 — 카드가 여러 개 떠 있어도 한눈에 찾도록 */
.env-card.is-bad .ec-name[b-dhq8j7pd3k] { background: var(--error); }
.env-card.is-stale[b-dhq8j7pd3k] { opacity: .72; }

.env-card .ec-tbl[b-dhq8j7pd3k] { width: 100%; border-collapse: collapse; }
.env-card .ec-tbl tr + tr th[b-dhq8j7pd3k], .env-card .ec-tbl tr + tr td[b-dhq8j7pd3k] { border-top: 1px solid var(--border-soft); }
.env-card .ec-tbl th[b-dhq8j7pd3k] {
    font-size: 9.5px; font-weight: 700; color: var(--text-muted);
    text-align: left; padding: 2px 4px 2px 6px; white-space: nowrap;
}
.env-card .ec-v[b-dhq8j7pd3k] {
    font-size: 10.5px; font-weight: 800; color: var(--text);
    text-align: right; padding: 2px 4px; white-space: nowrap;
}
.env-card .ec-j[b-dhq8j7pd3k] { padding: 2px 6px 2px 2px; text-align: right; white-space: nowrap; }
.env-card .ec-tbl tr.bad .ec-v[b-dhq8j7pd3k] { color: var(--error-text); }

.env-card .ec-badge[b-dhq8j7pd3k] {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 9px; font-weight: 800; line-height: 1.5;
}
.env-card .ec-badge .ec-dot[b-dhq8j7pd3k] { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.env-card .ec-badge.ok[b-dhq8j7pd3k] { color: var(--success-text); }
.env-card .ec-badge.ok .ec-dot[b-dhq8j7pd3k] { background: var(--success); }
.env-card .ec-badge.bad[b-dhq8j7pd3k] { color: var(--error-text); }
.env-card .ec-badge.bad .ec-dot[b-dhq8j7pd3k] { background: var(--error); }
.env-card .ec-badge.none[b-dhq8j7pd3k] { color: var(--text-light); font-weight: 700; }

.env-card .ec-empty[b-dhq8j7pd3k], .env-card .ec-stale[b-dhq8j7pd3k] {
    font-size: 9.5px; font-weight: 700; padding: 3px 6px; text-align: center;
}
.env-card .ec-empty[b-dhq8j7pd3k] { color: var(--text-light); }
.env-card .ec-stale[b-dhq8j7pd3k] { color: var(--error-text); background: var(--error-soft); }

/* ───────── 레이아웃 디자이너 (참조앱 UMES_JR_ENERGY 이식) ───────── */
.env-floor-pick[b-dhq8j7pd3k] { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); }
.env-floor-pick select[b-dhq8j7pd3k] {
    border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; font-size: 13px;
    background: var(--card); color: var(--text); font-family: inherit; outline: none; min-width: 130px;
}
.env-floor-pick select:disabled[b-dhq8j7pd3k] { opacity: .55; cursor: not-allowed; }

/* 건물/층 컨트롤 그룹 — 라벨 붙은 박스로 묶어 소속을 시각적으로 분리한다 */
.env-grp[b-dhq8j7pd3k] {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
    padding: 4px 6px 4px 10px;
}
.env-grp-lbl[b-dhq8j7pd3k] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 800; color: var(--text-muted);
    letter-spacing: .2px; white-space: nowrap;
    padding-right: 7px; border-right: 1px solid var(--border);
}
.env-grp-lbl i[b-dhq8j7pd3k] { color: var(--primary); font-size: 12px; }
.env-grp select[b-dhq8j7pd3k] {
    border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: 12.5px;
    background: var(--card); color: var(--text); font-family: inherit; outline: none; min-width: 110px;
}
.env-grp select:disabled[b-dhq8j7pd3k] { opacity: .55; cursor: not-allowed; }
.env-grp .btn-mini[b-dhq8j7pd3k] { padding: 6px 9px; font-size: 12px; gap: 4px; }

.env-designer-bar[b-dhq8j7pd3k] {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--card); border: 1px dashed var(--primary); border-radius: 12px;
    padding: 10px 14px; flex: 0 0 auto;
}
.env-designer-bar .dz-sep[b-dhq8j7pd3k] { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.env-designer-bar .dz-lbl[b-dhq8j7pd3k] { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.env-designer-bar .dz-name[b-dhq8j7pd3k] {
    border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; font-size: 13px;
    background: var(--card); color: var(--text); font-family: inherit; outline: none; width: 150px;
}
.env-designer-bar .dz-name:focus[b-dhq8j7pd3k] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.env-designer-bar .dz-pos[b-dhq8j7pd3k] { font-size: 11.5px; color: var(--text-light); font-variant-numeric: tabular-nums; }
.env-designer-bar .dz-hint[b-dhq8j7pd3k] { font-size: 12.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.env-designer-bar .dz-spacer[b-dhq8j7pd3k] { flex: 1 1 auto; }

/* 편집 모드 스테이지 */
.floor-stage.editing[b-dhq8j7pd3k] { cursor: default; }
.floor-stage.editing .floor[b-dhq8j7pd3k] { transition: none; }
.floor-stage.editing .room[b-dhq8j7pd3k] { cursor: grab; }
.floor-stage.editing .room:active[b-dhq8j7pd3k] { cursor: grabbing; }
.floor-stage.editing .room.sel[b-dhq8j7pd3k] { outline: 2px solid var(--primary); outline-offset: 2px; z-index: 5; }
/* 편집 중에는 마커가 구역(선택 시 z5)보다 항상 위 — 구역 위에 놓인 마커도 바로 잡힌다 */
.floor-stage.editing .furn[b-dhq8j7pd3k] { cursor: grab; z-index: 6; }
.floor-stage.editing .furn:active[b-dhq8j7pd3k] { cursor: grabbing; }
/* 마커 선택은 주황 — 툴바의 [마커 설정] 그룹과 같은 색이라 구역 선택(보라)과 즉시 구분된다 */
.floor-stage.editing .furn.sel[b-dhq8j7pd3k] { outline: 2px solid #e08a00; outline-offset: 2px; z-index: 7; overflow: visible; }
/* (2D 숨김 규칙이 없어져 편집용 되살리기 규칙도 불필요 — 구역 이름은 항상 보인다) */

/* ───────── 실측 표기 (건물 가로×세로 · 층고) ───────── */
.floor-scale[b-dhq8j7pd3k] {
    position: absolute; left: 18px; bottom: 16px; z-index: 6;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--card); border: 1px solid var(--border); color: var(--text-muted);
    font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow);
    pointer-events: none; font-variant-numeric: tabular-nums;
}
.floor-scale i[b-dhq8j7pd3k] { color: var(--primary); }

/* 전층 3D 액션 오버레이 — 도면 안 왼쪽 위 (툴바를 고정하려고 여기로 뺐다) */
.stack-tools[b-dhq8j7pd3k] {
    position: absolute; left: 14px; top: 14px; z-index: 8;
    display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}

/* 툴바에서 자리만 지키고 숨기는 버튼 — 뷰 전환 시 항목 수가 달라져 밀리는 것을 막는다 */
.btn-x.ghost[b-dhq8j7pd3k] { visibility: hidden; pointer-events: none; }

/* ───────── 층 레일 — 도면 안 오른쪽, 위층이 위로 쌓인 층 전환 컨트롤 ───────── */
.floor-rail[b-dhq8j7pd3k] {
    position: absolute; right: 14px; top: 14px; z-index: 8;
    display: flex; flex-direction: column; gap: 6px;
    /* 하단 버튼 4개(층선택·추가·변경·삭제)가 잘리지 않는 최소 폭 */
    width: 132px; max-height: calc(100% - 28px);
    padding: 8px; border-radius: 12px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;   /* 어떤 경우에도 내용이 패널 밖으로 튀지 않게 */
}
/* 편집 중에도 층을 옮길 수 있다 — 보기 전용일 때와 구분되게 테두리에 색을 준다.
   배경은 불투명하게: 편집 중에는 레일 밑으로 도형이 지나가도 목록이 읽혀야 한다. */
.floor-rail.editing[b-dhq8j7pd3k] {
    background: var(--card);
    border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
}
.floor-rail.editing .rail-head[b-dhq8j7pd3k] { color: var(--warning); }
.floor-rail.editing .rail-head i[b-dhq8j7pd3k] { color: var(--warning); }

.floor-rail .rail-head[b-dhq8j7pd3k] {
    font-size: 11px; font-weight: 800; color: var(--text-muted);
    padding: 0 2px 2px; border-bottom: 1px solid var(--border);
}
.floor-rail .rail-head i[b-dhq8j7pd3k] { color: var(--primary); margin-right: 4px; }
.floor-rail .rail-list[b-dhq8j7pd3k] { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; }

/* 층 버튼 — 왼쪽 색 띠(--gtint)로 전층 평면/3D 와 같은 층 색을 공유한다 */
.rail-item[b-dhq8j7pd3k] {
    position: relative; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 8px 6px 12px; border-radius: 8px;
    background: rgba(var(--gtint, 108,92,231), .08);
    border: 1px solid rgba(var(--gtint, 108,92,231), .25);
    transition: background .15s, border-color .15s;
}
.rail-item[b-dhq8j7pd3k]::before {
    content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 2px; background: rgb(var(--gtint, 108,92,231));
}
.rail-item:hover[b-dhq8j7pd3k] { background: rgba(var(--gtint, 108,92,231), .16); }
.rail-item.cur[b-dhq8j7pd3k] {
    background: rgba(var(--gtint, 108,92,231), .22);
    border-color: rgb(var(--gtint, 108,92,231));
    box-shadow: 0 0 0 2px rgba(var(--gtint, 108,92,231), .18);
}
.rail-name[b-dhq8j7pd3k] { font-size: 12.5px; font-weight: 800; color: var(--text); }
.rail-item.cur .rail-name[b-dhq8j7pd3k] { color: rgb(var(--gtint, 108,92,231)); }
.rail-sub[b-dhq8j7pd3k] { font-size: 10.5px; color: var(--text-muted); }
/* 전층 3D — 레일 클릭으로 숨긴 층 (토글) */
.rail-item.off[b-dhq8j7pd3k] { opacity: .42; filter: grayscale(.5); }
.rail-eye[b-dhq8j7pd3k] { position: absolute; right: 7px; top: 7px; font-size: 10px; color: var(--text-light); }
.rail-item:not(.off) .rail-eye[b-dhq8j7pd3k] { color: rgb(var(--gtint, 108,92,231)); }

.rail-alarm[b-dhq8j7pd3k] {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--error); color: #fff;
    font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.floor-rail .rail-foot[b-dhq8j7pd3k] {
    display: flex; gap: 3px; justify-content: center;
    flex-wrap: wrap;              /* 폭이 모자라면 다음 줄로 — 패널 밖으로 나가지 않는다 */
    padding-top: 6px; border-top: 1px solid var(--border);
}
.floor-rail .rail-foot .btn-x[b-dhq8j7pd3k] { padding: 4px 8px; }

/* 온도 범례 — 도면 왼쪽 상단 오버레이 (축척 배지와 같은 알약 스타일) */
.floor-legend[b-dhq8j7pd3k] {
    position: absolute; left: 18px; top: 14px; z-index: 6;
    background: var(--card); border: 1px solid var(--border);
    padding: 6px 13px; border-radius: 999px; box-shadow: var(--shadow);
    pointer-events: none;
}

/* ───────── 3D 전층 (분해 조립도) ───────── */
.floor-stage.stack-mode[b-dhq8j7pd3k] { perspective: 2400px; align-items: center; }

.floor-stack[b-dhq8j7pd3k] {
    position: relative;
    width: min(100%, calc(100cqh * var(--ar, 2.296)));
    max-width: 900px;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform .4s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
.floor-stage.dragging .floor-stack[b-dhq8j7pd3k] { transition: none; }

/* 층 판 — 모두 같은 위치에 겹쳐 두고 translateZ 로 띄운다 */
.stack-plate[b-dhq8j7pd3k] {
    position: absolute; left: 0; top: 0; width: 100%;
    transform-style: preserve-3d;
    transform-origin: center center;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    border: 2px solid rgba(120,110,200,.45);
    border-radius: 10px;
    box-shadow: -14px 22px 34px rgba(40,30,90,.22);
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
/* 첫 판만 흐름에 참여시켜 스택 높이를 확보 */
/* (컨테이너가 aspect-ratio 로 높이를 직접 가지므로 first-child 를 relative 로 둘 필요가 없다.
   층별 크기가 다른 경우 첫 판이 경계 상자보다 작을 수 있어 relative 면 오히려 높이가 어긋난다.) */
.stack-plate:hover[b-dhq8j7pd3k] { border-color: var(--primary); box-shadow: -14px 22px 40px rgba(108,92,231,.4); }
/* 층 이동/포커스 전환이 부드럽게 — 포커스 아닌 층은 "내용물만" 흐리게 (층 이름 라벨은 항상 또렷) */
.stack-plate[b-dhq8j7pd3k] { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s; }
/* 판 배경을 거의 투명하게 — 위층 판이 선택된 층을 가리지 않는다 */
/* 비선택 층은 거의 투명하게 — 간격을 줄여도(58cqh 예산) 선택 층이 또렷이 구분된다 */
/* 레일에서 표시 중인 층은 전부 "보기 좋게" — 숨김/표시는 레일 토글이 담당하므로
   비포커스 층을 흐리게 깔지 않는다. 포커스 층은 테두리·광채·확대로만 구분한다. */
.stack-plate:not(.cur)[b-dhq8j7pd3k] {
    border-color: rgba(120,110,200,.45);
    box-shadow: -10px 16px 30px rgba(40,30,90,.16);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    opacity: .96;
    transition: opacity .25s, border-color .25s;
}
.stack-plate:not(.cur):hover[b-dhq8j7pd3k] { opacity: 1; border-color: rgba(120,110,200,.65); }
.stack-plate:not(.cur) .plate-base[b-dhq8j7pd3k],
.stack-plate:not(.cur) .plate-grid[b-dhq8j7pd3k],
.stack-plate:not(.cur) .plate-room[b-dhq8j7pd3k],
.stack-plate:not(.cur) .plate-mark[b-dhq8j7pd3k] { opacity: .9; }

/* 포커스 층 — 확대·선명·광채 강조 (세로 드래그/클릭으로 변경) */
/* 선택 층은 완전 불투명 — 배경을 카드색으로 채워 아래층이 비쳐 보이지 않게 한다 */
.stack-plate.cur[b-dhq8j7pd3k] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--card));
    box-shadow: -16px 26px 50px rgba(108,92,231,.5), 0 0 0 1.5px var(--primary);
    opacity: 1;
}
.stack-plate.cur .plate-room[b-dhq8j7pd3k] { border-color: var(--primary); background: rgba(108,92,231,.24); }

/* 층 이름 라벨 — 모든 층에 보이되, 선택된 층은 크고 진하게 */
.stack-plate:not(.cur) .plate-label b[b-dhq8j7pd3k] { color: var(--text-muted); font-size: 12px; }
.stack-plate:not(.cur) .plate-label span[b-dhq8j7pd3k] { color: var(--text-muted); opacity: .9; }
.stack-plate.cur .plate-label[b-dhq8j7pd3k] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--card));
    box-shadow: 0 4px 14px rgba(108,92,231,.35);
    padding: 6px 14px;
}
.stack-plate.cur .plate-label b[b-dhq8j7pd3k] { color: var(--primary); font-size: 14.5px; }
.stack-plate.cur .plate-label span[b-dhq8j7pd3k] { font-size: 11.5px; }
.stack-plate.cur .plate-lead[b-dhq8j7pd3k] { background: repeating-linear-gradient(90deg, var(--primary) 0 5px, transparent 5px 9px); }

.plate-base[b-dhq8j7pd3k] {
    position: absolute; inset: 0; border-radius: 10px;
    background: linear-gradient(135deg, var(--surface-3), var(--surface-2));
    transform: translateZ(-10px);
    opacity: .9;
}
.plate-grid[b-dhq8j7pd3k] {
    position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(120,110,200,.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120,110,200,.12) 1px, transparent 1px);
    background-size: 10% 10%;
}
/* 전층 모드의 구역/마커는 단순 박스 (층이 많아도 가볍게) */
.plate-room[b-dhq8j7pd3k] {
    position: absolute; border: 1.5px solid rgba(108,92,231,.75);
    background: rgba(108,92,231,.16); border-radius: 4px; pointer-events: none;
}
.plate-mark[b-dhq8j7pd3k] {
    position: absolute; background: rgba(120,130,160,.42); border-radius: 2px; pointer-events: none;
}
.plate-mark.green[b-dhq8j7pd3k], .plate-mark.door[b-dhq8j7pd3k] { background: rgba(120,190,110,.5); }
.plate-mark.stair[b-dhq8j7pd3k] { background: rgba(230,200,100,.6); }
/* 전층 보기에서도 설비 종류가 색으로 구분되게 — 2D 색상과 같은 계열 (G60) */
.plate-mark.hopper[b-dhq8j7pd3k]  { background: rgba(156,138,224,.55); }
.plate-mark.mixer[b-dhq8j7pd3k]   { background: rgba(111,166,224,.55); }
.plate-mark.coater[b-dhq8j7pd3k]  { background: rgba(109,195,154,.55); }
.plate-mark.press[b-dhq8j7pd3k]   { background: rgba(232,172,116,.6); }
.plate-mark.slitter[b-dhq8j7pd3k] { background: rgba(229,136,176,.6); }
.plate-mark.pallet[b-dhq8j7pd3k]  { background: rgba(205,174,120,.6); }
.plate-mark.gauge[b-dhq8j7pd3k]   { background: rgba(121,207,219,.6); }
.plate-mark.rack[b-dhq8j7pd3k]    { background: rgba(127,168,232,.5); }
.plate-mark.tank[b-dhq8j7pd3k]    { background: rgba(169,154,232,.5); }

/* 층 라벨 + 라벨선 (참조 분해 조립도 형태)
   오프셋은 고정 px — 판 폭 % 로 하면 층별 크기(G45)가 작은 층에서 라벨이 판 위에 겹친다.
   판이 rotateX(58)·rotateZ(-40) 로 기울어 있어 평면 1px ≈ 화면 0.47px 수준으로 압축된다.
   화면에서 판 모서리를 확실히 벗어나려면 평면 기준 오프셋을 크게 잡아야 한다. */
.plate-lead[b-dhq8j7pd3k] {
    position: absolute; right: -1px; top: 50%; width: 128px; height: 1px;
    background: repeating-linear-gradient(90deg, var(--text-light) 0 5px, transparent 5px 9px);
    transform: translateX(100%);
    pointer-events: none;
}
.plate-label[b-dhq8j7pd3k] {
    position: absolute; right: -140px; top: 50%;
    transform-origin: left center;
    display: flex; flex-direction: column; gap: 1px;
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 4px 11px; box-shadow: var(--shadow); white-space: nowrap;
    pointer-events: none;
}
.plate-label b[b-dhq8j7pd3k] { font-size: 12.5px; font-weight: 800; color: var(--text); }
.plate-label span[b-dhq8j7pd3k] { font-size: 10.5px; color: var(--text-light); }

/* ── 전층 보기 구역 카드 (콜아웃) ──
   카드를 판 바깥으로 빼고 구역까지 점선으로 잇는다. 판 위에 얹으면 설비 마커에 파묻힌다.
   층 라벨(.plate-label)과 같은 역회전을 inline transform 으로 받으므로
   여기서는 transform 을 덮어쓰지 않고 origin 만 지정한다. */
.plate-zlead[b-dhq8j7pd3k] {
    position: absolute; height: 1px; pointer-events: none; z-index: 3;
    background: repeating-linear-gradient(90deg, var(--text-light) 0 5px, transparent 5px 9px);
}
.plate-callout[b-dhq8j7pd3k] {
    position: absolute; z-index: 6; pointer-events: auto;
}
.plate-callout.r[b-dhq8j7pd3k] { transform-origin: left center; }
.plate-callout.l[b-dhq8j7pd3k] { transform-origin: right center; }
/* 카드는 역회전된 평면(화면과 평행) 안에 있으므로 여기서의 translateY 는 "화면 세로" 이동이다.
   --dy 로 카드를 위아래로 벌려 판 기울기 때문에 압축된 간격을 보정한다. */
.plate-callout.r > .env-card[b-dhq8j7pd3k] { transform: translateY(calc(-50% + var(--dy, 0px))); margin-left: 10px; }
.plate-callout.l > .env-card[b-dhq8j7pd3k] { transform: translateY(calc(-50% + var(--dy, 0px))); margin-right: 10px; }
/* 경보 카드는 위로 올려 다른 카드에 가리지 않게 한다 */
.plate-callout.alarm[b-dhq8j7pd3k] { z-index: 8; }
.plate-callout.alarm + .plate-zlead[b-dhq8j7pd3k], .plate-zlead.alarm[b-dhq8j7pd3k] {
    background: repeating-linear-gradient(90deg, var(--error) 0 5px, transparent 5px 9px);
}
/* 현재 층이 아닌 판의 카드는 눌러서 흐리게 — 초점이 현재 층에 남도록 */
.stack-plate:not(.cur) .plate-callout > .env-card[b-dhq8j7pd3k] { opacity: .8; }
.stack-plate.cur .plate-callout > .env-card[b-dhq8j7pd3k] { box-shadow: 0 4px 14px rgba(47, 43, 80, .22); }
/* 마우스를 올린 카드는 맨 위로 — 겹쳤을 때 값을 확인할 수 있게 */
.plate-callout:hover[b-dhq8j7pd3k] { z-index: 20; }
.plate-callout:hover > .env-card[b-dhq8j7pd3k] { opacity: 1; }

/* ───────── 층 관리 버튼 (헤더 · 상시 노출) ───────── */
.env-floor-pick .btn-mini[b-dhq8j7pd3k] { padding: 6px 11px; font-size: 12px; gap: 5px; }
.env-no-floor[b-dhq8j7pd3k] {
    font-size: 12.5px; font-weight: 600; color: var(--text-light);
    background: var(--surface-3); border-radius: 9px; padding: 7px 11px; white-space: nowrap;
}

/* 층 순서 목록 (층 정보 변경 모달) — 건물처럼 위층부터 아래로 */
.floor-order[b-dhq8j7pd3k] {
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--border); border-radius: 10px; padding: 7px;
    background: var(--surface-2);
}
.floor-order-row[b-dhq8j7pd3k] {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text-muted);
    min-height: 34px;
}
.floor-order-row i[b-dhq8j7pd3k] { color: var(--text-light); font-size: 12px; width: 14px; text-align: center; }
.floor-order-row.cur[b-dhq8j7pd3k] {
    background: var(--primary-soft); color: var(--text); font-weight: 700;
    border: 1px solid var(--primary);
}
.floor-order-row.cur i[b-dhq8j7pd3k] { color: var(--primary); }
.floor-order-me[b-dhq8j7pd3k] {
    margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--primary);
    background: var(--card); border-radius: 6px; padding: 2px 7px;
}
.floor-order-row .btn-mini[b-dhq8j7pd3k] { padding: 4px 8px; font-size: 11px; }

/* 레이아웃 테이블 미설치 안내 — 편집 기능이 왜 없는지 알려주는 배지 */
.env-nodb[b-dhq8j7pd3k] {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--warning-text);
    background: var(--warning-soft); border-radius: 9px; padding: 7px 11px; white-space: nowrap;
    cursor: help;
}

/* ───────── 장소 관리 모달 ───────── */
/* 상단 : 등록된 장소 목록 (읽기 전용 · 행 클릭 → 하단 폼 수정 상태) */
.site-list-wrap[b-dhq8j7pd3k] { overflow-x: auto; border: 1px solid var(--border); border-radius: 11px; }
.site-list[b-dhq8j7pd3k] { min-width: 520px; }
.site-list thead th[b-dhq8j7pd3k] { padding: 9px 12px; }
.site-list tbody td[b-dhq8j7pd3k] { padding: 9px 12px; cursor: pointer; }
.site-list tbody tr[b-dhq8j7pd3k] { outline: none; }
.site-list tbody tr.sel > td[b-dhq8j7pd3k] { background: var(--primary-soft); }
.site-list tbody tr.sel > td:first-child[b-dhq8j7pd3k] { box-shadow: inset 3px 0 0 var(--primary); }
.site-list tbody tr:focus-visible > td[b-dhq8j7pd3k] { background: var(--hover); }
.site-list .btn-mini[b-dhq8j7pd3k] { padding: 5px 9px; font-size: 11.5px; }
.site-empty[b-dhq8j7pd3k] { text-align: center; color: var(--text-light); font-size: 12.5px; cursor: default !important; }

/* 하단 : 신규/수정 폼 */
.site-form[b-dhq8j7pd3k] { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.site-form-head[b-dhq8j7pd3k] {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px;
}
.site-form-head i[b-dhq8j7pd3k] { color: var(--primary); }
.site-form .req[b-dhq8j7pd3k] { color: var(--error); }
.site-form .num-in[b-dhq8j7pd3k] { text-align: right; font-variant-numeric: tabular-nums; }
.site-note[b-dhq8j7pd3k] { margin-top: 4px; font-size: 11.5px; color: var(--text-light); display: flex; gap: 6px; align-items: center; }
.site-note i[b-dhq8j7pd3k] { color: var(--primary); }

@media (max-width: 640px) {
    .site-list[b-dhq8j7pd3k] { min-width: 480px; }
    .site-form .mdl-row[b-dhq8j7pd3k] { flex-direction: column; gap: 0; }
    .site-form .mdl-field[b-dhq8j7pd3k] { flex: 1 1 auto !important; }
}

/* 크기조절 핸들 — PPT 도형처럼 모서리 4 + 변 4 (h-nw · h-n · h-ne · h-e · h-se · h-s · h-sw · h-w).
   변 핸들은 해당 축만, 모서리 핸들은 두 축을 동시에 조절한다(JS uuresRoomDrag). */
.room-resize[b-dhq8j7pd3k] {
    position: absolute;
    width: 13px; height: 13px; border-radius: 4px;
    background: var(--primary); border: 2px solid #fff;
    z-index: 7;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    touch-action: none;
}
.room-resize.h-nw[b-dhq8j7pd3k] { left: -7px;  top: -7px;    cursor: nwse-resize; }
.room-resize.h-ne[b-dhq8j7pd3k] { right: -7px; top: -7px;    cursor: nesw-resize; }
.room-resize.h-se[b-dhq8j7pd3k] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.room-resize.h-sw[b-dhq8j7pd3k] { left: -7px;  bottom: -7px; cursor: nesw-resize; }
.room-resize.h-n[b-dhq8j7pd3k]  { left: 50%;   top: -7px;    transform: translateX(-50%); cursor: ns-resize; }
.room-resize.h-s[b-dhq8j7pd3k]  { left: 50%;   bottom: -7px; transform: translateX(-50%); cursor: ns-resize; }
.room-resize.h-w[b-dhq8j7pd3k]  { left: -7px;  top: 50%;     transform: translateY(-50%); cursor: ew-resize; }
.room-resize.h-e[b-dhq8j7pd3k]  { right: -7px; top: 50%;     transform: translateY(-50%); cursor: ew-resize; }

/* 작은 마커에서는 핸들이 도형을 덮지 않게 한 단계 작게 */
.furn .room-resize[b-dhq8j7pd3k] { width: 11px; height: 11px; border-width: 2px; }

/* 도면 배경 이미지 — 구역·마커 아래에 깔린다 */
.floor-plan[b-dhq8j7pd3k] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

/* ── 편집 툴바 선택 속성 그룹 — 구역(파랑)과 마커(주황)를 색·배지로 확실히 구분 ──
   같은 색을 도면의 선택 테두리에도 써서 "지금 뭘 편집 중인지"가 툴바·도면 양쪽에서 일치한다. */
.dz-group[b-dhq8j7pd3k] {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 3px 10px 3px 4px; margin-left: 4px;
    border-radius: 10px; border: 1.5px dashed transparent;
}
.dz-group-tag[b-dhq8j7pd3k] {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 800; letter-spacing: -.2px;
    padding: 4px 9px; border-radius: 7px; color: #fff; white-space: nowrap;
}
.dz-group-zone[b-dhq8j7pd3k] { background: var(--primary-soft); border-color: var(--primary); }
.dz-group-zone .dz-group-tag[b-dhq8j7pd3k] { background: var(--primary); }
.dz-group-furn[b-dhq8j7pd3k] { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.55); }
.dz-group-furn .dz-group-tag[b-dhq8j7pd3k] { background: #e08a00; }

/* ── 전층 평면 — 모든 층 도면을 위층부터 나란히 (한눈에 보기) ── */
.floor-stage.grid-mode[b-dhq8j7pd3k] {
    display: block;               /* 가운데 정렬 flex 해제 — 세로 목록 */
    overflow-y: auto;             /* 휠 = 목록 스크롤 (preventDefault 해제됨) */
    perspective: none;
    cursor: default;
    padding: 18px 22px;
}
/* 전층 2D 는 스테이지 자체가 스크롤된다 — 레일을 absolute 로 두면 목록과 함께 위로 밀려 사라진다.
   흐름에 넣고 sticky 로 붙여 스크롤해도 오른쪽 위에 남게 한다. */
.floor-stage.grid-mode .floor-rail[b-dhq8j7pd3k] {
    position: sticky; top: 0; float: right;
    margin-left: 14px; margin-bottom: 10px;
}
.gplan-list[b-dhq8j7pd3k] { display: flex; flex-direction: column; gap: 18px; max-width: 1360px; margin: 0 auto; align-items: flex-start; }

/* 층 패널 — 폭은 인라인 style(실측 %)로 지정된다. 머리글·도면이 같은 폭을 공유하고,
   층 색(--gtint)으로 패널 전체를 옅게 칠해 어느 층 블록인지 한눈에 구분된다. */
.gplan-row[b-dhq8j7pd3k] {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px 12px;
    border-radius: 14px;
    background: rgba(var(--gtint, 108,92,231), .07);
    border: 1px solid rgba(var(--gtint, 108,92,231), .22);
    box-sizing: border-box;
    min-width: 260px;              /* 아주 좁은 층도 머리글이 읽히게 */
    transition: background .2s, border-color .2s;
}
.gplan-row:hover[b-dhq8j7pd3k] { background: rgba(var(--gtint, 108,92,231), .12); }
.gplan-row.cur[b-dhq8j7pd3k] {
    background: rgba(var(--gtint, 108,92,231), .16);
    border-color: rgba(var(--gtint, 108,92,231), .55);
}
.gplan-row.cur .gplan[b-dhq8j7pd3k] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.gplan-head[b-dhq8j7pd3k] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    cursor: pointer; user-select: none;
}
.gplan-head b[b-dhq8j7pd3k] { font-size: 14px; color: var(--text); }
.gplan-head b i[b-dhq8j7pd3k] { color: var(--primary); margin-right: 4px; }
.gplan-row.cur .gplan-head b[b-dhq8j7pd3k] { color: var(--primary); }
.gplan-size[b-dhq8j7pd3k], .gplan-cnt[b-dhq8j7pd3k] { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.gplan-alarm[b-dhq8j7pd3k] { font-size: 12px; font-weight: 800; color: var(--error); }
.gplan-enter[b-dhq8j7pd3k] { margin-left: auto; font-size: 11.5px; color: var(--text-light); opacity: 0; transition: opacity .15s; }
.gplan-head:hover .gplan-enter[b-dhq8j7pd3k], .gplan-row:hover .gplan-enter[b-dhq8j7pd3k] { opacity: 1; }

/* 인라인 범례 — 전층 평면은 스크롤 목록이라 플로팅 오버레이 대신 목록 첫 줄에 정적으로 둔다 */
.gplan-legend[b-dhq8j7pd3k] { position: static; align-self: flex-start; margin-bottom: -6px; }

/* 층 도면 박스 — 자기 비율(--gar = 가로/세로) 유지.
   폭은 인라인 style 로 PlateWPct(실측 m 비례 %)가 지정된다 — 모든 층에서 1m 스케일 동일.
   --gtint(층별 색)로 배경·테두리를 물들여 층 구분이 한눈에 되게 한다. */
.gplan[b-dhq8j7pd3k] {
    position: relative;
    width: 100%;                     /* 폭은 .gplan-row 가 실측 %로 잡는다 */
    aspect-ratio: var(--gar, 2.296); /* 높이는 그 층의 가로:세로 비로 결정 */
    background:
        linear-gradient(135deg, rgba(var(--gtint, 108,92,231), .12), rgba(var(--gtint, 108,92,231), .03)),
        var(--surface-2);
    border: 2px solid rgba(var(--gtint, 108,92,231), .4);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
}
.gplan:hover[b-dhq8j7pd3k] { border-color: var(--primary); }
.gplan-head b i[b-dhq8j7pd3k] { color: rgb(var(--gtint, 108,92,231)); }

/* 구역 — 2D 도면과 같은 온도색 계열, 경보는 붉은 외곽선 */
.gplan-zone[b-dhq8j7pd3k] {
    position: absolute;
    border: 1.5px solid rgba(120,110,200,.35);
    border-radius: 6px;
    background: rgba(148,163,184,.10);
    padding: 3px 5px;
    overflow: hidden;
    line-height: 1.3;
}
.gplan-zone.c-none[b-dhq8j7pd3k] { border-color: rgba(148,163,184,.5);  background: rgba(148,163,184,.10); }
.gplan-zone.c-cold[b-dhq8j7pd3k] { border-color: rgba(59,130,246,.6);   background: rgba(59,130,246,.12); }
.gplan-zone.c-ok[b-dhq8j7pd3k]   { border-color: rgba(40,199,111,.55);  background: rgba(40,199,111,.12); }
.gplan-zone.c-warm[b-dhq8j7pd3k] { border-color: rgba(255,159,67,.6);   background: rgba(255,159,67,.14); }
.gplan-zone.c-hot[b-dhq8j7pd3k]  { border-color: rgba(234,84,85,.6);    background: rgba(234,84,85,.14); }
.gplan-zone.alarm[b-dhq8j7pd3k]  { outline: 2px solid var(--error); outline-offset: 1px; }
.gz-name[b-dhq8j7pd3k] {
    display: block; font-size: 10.5px; font-weight: 800; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gz-val[b-dhq8j7pd3k] {
    display: block; font-size: 10px; font-weight: 700; color: var(--text-muted);
    font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.gz-val.air[b-dhq8j7pd3k] { font-weight: 600; color: var(--text-light); }

/* ── 이름 검색 드롭다운 (마커 설비 선택 · 표시 항목 다중선택) ── */
.dd-wrap[b-dhq8j7pd3k] { position: relative; display: inline-flex; }
.dd-btn[b-dhq8j7pd3k] {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px; min-width: 150px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--card); color: var(--text);
    font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.dd-btn:hover[b-dhq8j7pd3k] { border-color: var(--primary); }
.dd-btn.empty[b-dhq8j7pd3k] { color: var(--text-light); font-weight: 500; }
.dd-btn .fa-caret-down[b-dhq8j7pd3k] { margin-left: auto; color: var(--text-light); }
.dd-btn .fa-microchip[b-dhq8j7pd3k], .dd-btn .fa-list-check[b-dhq8j7pd3k] { color: var(--primary); }

/* 바깥 클릭으로 닫기 — 투명 전체 덮개 (드래그/마퀴 시작도 함께 막는다) */
.dd-backdrop[b-dhq8j7pd3k] { position: fixed; inset: 0; z-index: 59; background: transparent; }
.dd-pop[b-dhq8j7pd3k] {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
    width: 250px; max-height: 320px;
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    overflow: hidden;
}
.dd-search[b-dhq8j7pd3k] {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.dd-search i[b-dhq8j7pd3k] { color: var(--text-light); font-size: 12px; }
/* 검색 입력은 ImeInput(자식 컴포넌트) 내부의 input 이라 ::deep 이 필요하다 */
.dd-search[b-dhq8j7pd3k]  input {
    flex: 1; min-width: 0; width: 100%; border: none; outline: none; background: transparent;
    color: var(--text); font-size: 12.5px;
}
.dd-list[b-dhq8j7pd3k] { flex: 1; overflow-y: auto; padding: 4px; }
.dd-item[b-dhq8j7pd3k] {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; border-radius: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--text);
    cursor: pointer; user-select: none;
}
.dd-item:hover[b-dhq8j7pd3k] { background: var(--hover); }
.dd-item.cur[b-dhq8j7pd3k] { background: var(--primary-soft); color: var(--primary); }
.dd-item.none[b-dhq8j7pd3k] { color: var(--text-light); font-weight: 500; }
.dd-item.chk input[b-dhq8j7pd3k] { accent-color: var(--primary); }
.dd-empty[b-dhq8j7pd3k] { padding: 10px; font-size: 11.5px; color: var(--text-light); }
.dd-foot[b-dhq8j7pd3k] {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 7px 10px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-light);
}
.dd-foot button[b-dhq8j7pd3k] {
    border: 1px solid var(--border); border-radius: 6px; background: var(--card);
    color: var(--text-muted); font-size: 11px; font-weight: 700;
    padding: 3px 8px; cursor: pointer;
}
.dd-foot button:hover:not(:disabled)[b-dhq8j7pd3k] { border-color: var(--primary); color: var(--primary); }
.dd-foot button:disabled[b-dhq8j7pd3k] { opacity: .5; cursor: default; }

/* ── 3D 층 선택 팝업 — 기존 stack-plate 스타일을 그대로 쓰는 미니 분해도 ── */
.fpick-box[b-dhq8j7pd3k] { width: 760px; max-width: 94vw; }
.fpick-stage[b-dhq8j7pd3k] {
    height: 420px;
    container-type: size;      /* stack-plate 의 translateZ(cqh) 단위가 여기 높이를 기준으로 계산된다 */
    perspective: 2000px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 10px 20px;
}
.fpick-stack[b-dhq8j7pd3k] {
    position: relative;
    width: min(86%, calc(70cqh * var(--ar, 2)));
    transform-style: preserve-3d;
    transform: rotateX(58deg) rotateZ(-40deg) scale(.62);
}
.fpick-stage .stack-plate[b-dhq8j7pd3k] { cursor: pointer; }
.fpick-hint[b-dhq8j7pd3k] { text-align: center; font-size: 12px; color: var(--text-light); padding: 4px 0 2px; }
.fpick-hint i[b-dhq8j7pd3k] { color: var(--primary); margin-right: 4px; }

/* 층 레일 머리글 — 잡고 끌어 옮길 수 있다 */
.floor-rail .rail-head[b-dhq8j7pd3k] { cursor: move; user-select: none; display: flex; align-items: center; gap: 6px; }
.floor-rail .rail-grip[b-dhq8j7pd3k] { margin-left: auto; color: var(--text-light); font-size: 10px; }

/* ── 라인 마커 — 벽/통로/배관 선 긋기. 이름·아이콘 없이 막대만 그린다. ── */
.furn.lineh[b-dhq8j7pd3k], .furn.linev[b-dhq8j7pd3k] {
    background: rgba(100,110,140,.72);
    border: none;
    border-radius: 3px;
    box-shadow: none;
    min-width: 3px; min-height: 3px;
}
.furn.lineh .furn-ico[b-dhq8j7pd3k], .furn.linev .furn-ico[b-dhq8j7pd3k],
.furn.lineh > span[b-dhq8j7pd3k], .furn.linev > span[b-dhq8j7pd3k] { display: none; }
.plate-mark.lineh[b-dhq8j7pd3k], .plate-mark.linev[b-dhq8j7pd3k] { background: rgba(100,110,140,.55); }

/* ── 마커 밖 이름 라벨(G67) — 상/하/좌/우. 마커 박스(overflow:hidden) 밖 형제 요소 ── */
.furn-name-out[b-dhq8j7pd3k] {
    position: absolute; z-index: 4;
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    background: color-mix(in srgb, var(--card) 82%, transparent);
    padding: 1px 5px; border-radius: 5px;
    white-space: nowrap; pointer-events: none;
    line-height: 1.3;
}
.furn-name-out.np-t[b-dhq8j7pd3k] { transform: translate(-50%, calc(-100% - 2px)); }
.furn-name-out.np-b[b-dhq8j7pd3k] { transform: translate(-50%, 2px); }
.furn-name-out.np-l[b-dhq8j7pd3k] { transform: translate(calc(-100% - 3px), -50%); }
.furn-name-out.np-r[b-dhq8j7pd3k] { transform: translate(3px, -50%); }

/* ── 설비 데이터 카드 — 마커 아래, 머리띠(설비명) + 항목 줄 목록 (사용자 스케치 형태) ── */
.furn-card[b-dhq8j7pd3k] {
    position: absolute; z-index: 9;
    transform: translate(-50%, 6px);
    min-width: 118px; max-width: 190px;
    border: 1.5px solid var(--primary);
    border-radius: 10px;
    background: var(--card);
    box-shadow: 0 6px 18px rgba(40,30,90,.18);
    overflow: hidden;
    pointer-events: none;   /* 카드가 마커/구역 클릭을 가리지 않게 — 툴팁은 마커에서 */
}
.furn-card .fc-head[b-dhq8j7pd3k] {
    background: var(--primary); color: #fff;
    font-size: 11px; font-weight: 800; text-align: center;
    padding: 3px 8px; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.furn-card .fc-body[b-dhq8j7pd3k] { padding: 5px 9px 6px; display: flex; flex-direction: column; gap: 2px; }
.furn-card .fc-row[b-dhq8j7pd3k] {
    font-size: 10.5px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.furn-card .fc-row b[b-dhq8j7pd3k] { font-weight: 800; }
.furn-card .fc-row.bad[b-dhq8j7pd3k] { color: var(--error); }
.furn-card .fc-row.none[b-dhq8j7pd3k] { color: var(--text-light); font-weight: 500; font-style: italic; }
.furn-card.alarm[b-dhq8j7pd3k] { border-color: var(--error); }
.furn-card.alarm .fc-head[b-dhq8j7pd3k] { background: var(--error); }
.furn-card.stale[b-dhq8j7pd3k] { opacity: .75; }

/* 설비 연결 마커 — 모니터 모드에서 더블클릭으로 설비 상세(1804)를 열 수 있어 핸드 커서로 알린다 */
.floor-stage:not(.editing) .furn.linked[b-dhq8j7pd3k] { cursor: pointer; }

/* 마커 설비 연결 배지 — 우상단 칩 */
.furn-link[b-dhq8j7pd3k] {
    position: absolute; top: -6px; right: -6px; z-index: 3;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: #fff; font-size: 8.5px;
    border: 1.5px solid var(--card);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    pointer-events: none;
}
/* /02_Components/Shared/EquipHologram.razor.rz.scp.css */
/* 설비 상세 홀로그램 모달 — Scr1804 의 인라인 <style> 에 있던 모달 규칙을 컴포넌트 전용으로 옮긴 것.
   클래스는 화면 종속 이름(scr1804-*)을 떼고 holo-* 로 바꿨다 — 어느 화면에서 열든 같은 모습이다.
   어두운 홀로그램 톤은 라이트/다크 테마와 무관하게 고정(원본과 동일). */

.holo-ovl[b-3b2tj7bt4k] {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(2,6,17,.55); backdrop-filter: blur(3px);
}

.holo[b-3b2tj7bt4k] {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1201;
    width: min(960px, 94vw); max-height: 92vh; overflow: auto;
    background: #0b1424;
    border: 1px solid rgba(56,189,248,.25); border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    color: #e2e8f0;
}
.holo.st-warn[b-3b2tj7bt4k] { border-color: rgba(245,158,11,.45); }
.holo.st-err[b-3b2tj7bt4k] { border-color: rgba(239,68,68,.5); }
.holo.st-off[b-3b2tj7bt4k] { border-color: rgba(148,163,184,.35); }

/* 머리글 */
.holo-head[b-3b2tj7bt4k] { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(56,189,248,.18); }
.holo-title[b-3b2tj7bt4k] { font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; gap: 9px; }
.holo-title i[b-3b2tj7bt4k] { color: #38bdf8; }
.holo.st-warn .holo-title i[b-3b2tj7bt4k] { color: #fbbf24; }
.holo.st-err .holo-title i[b-3b2tj7bt4k] { color: #f87171; }
.holo.st-off .holo-title i[b-3b2tj7bt4k] { color: #94a3b8; }
.holo-badge[b-3b2tj7bt4k] { padding: 2px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-left: 6px; }
.holo-badge.ok[b-3b2tj7bt4k] { background: rgba(16,185,129,.18); color: #34d399; }
.holo-badge.warn[b-3b2tj7bt4k] { background: rgba(245,158,11,.18); color: #fbbf24; }
.holo-badge.err[b-3b2tj7bt4k] { background: rgba(239,68,68,.18); color: #f87171; }
.holo-badge.off[b-3b2tj7bt4k] { background: rgba(148,163,184,.18); color: #cbd5e1; }
.holo-close[b-3b2tj7bt4k] {
    margin-left: auto; background: transparent;
    border: 1px solid rgba(148,163,184,.25); color: #cbd5e1;
    width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
}
.holo-close:hover[b-3b2tj7bt4k] { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.4); }

/* 기준 작업지시 띠 */
.holo-order[b-3b2tj7bt4k] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 11px 20px; font-size: 13px;
    background: rgba(56,189,248,.08); border-bottom: 1px solid rgba(56,189,248,.14);
}
.holo-order i[b-3b2tj7bt4k] { color: #7dd3fc; }
.holo-order .lbl[b-3b2tj7bt4k] { color: #7dd3fc; font-weight: 700; }
.holo-order b[b-3b2tj7bt4k] { font-weight: 800; color: #f0f9ff; }
.holo-order .sep[b-3b2tj7bt4k] { color: #475569; }
.holo-order .qty[b-3b2tj7bt4k] { margin-left: auto; font-weight: 800; color: #7dd3fc; }
.holo-order .sub[b-3b2tj7bt4k] { color: #94a3b8; font-size: 12px; }

/* 작업지시 상태 배지 */
.holo-stat[b-3b2tj7bt4k] { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.holo-stat.s-N[b-3b2tj7bt4k] { background: rgba(56,189,248,.18); color: #7dd3fc; }
.holo-stat.s-W[b-3b2tj7bt4k] { background: #d1fae5; color: #047857; }
.holo-stat.s-S[b-3b2tj7bt4k] { background: #e2e8f0; color: #475569; }
.holo-stat.s-F[b-3b2tj7bt4k] { background: #fee2e2; color: #b91c1c; }
.holo-stat.s-Y[b-3b2tj7bt4k] { background: #dbeafe; color: #1d4ed8; }

/* 중단·고장 사유 */
.holo-reason[b-3b2tj7bt4k] {
    display: flex; align-items: center; gap: 9px;
    margin: 12px 20px 0; padding: 11px 14px;
    border-radius: 11px; font-size: 12.5px; line-height: 1.5;
}
.holo-reason.warn[b-3b2tj7bt4k] { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); color: #fcd34d; }
.holo-reason.err[b-3b2tj7bt4k] { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; }
.holo-reason b[b-3b2tj7bt4k] { flex-shrink: 0; }
.holo-reason span[b-3b2tj7bt4k] { color: #e2e8f0; }

/* 본문 — 왼쪽 3D, 오른쪽 지표 */
.holo-body[b-3b2tj7bt4k] { display: flex; gap: 16px; padding: 16px 20px 20px; }
.holo-canvas[b-3b2tj7bt4k] {
    position: relative; flex: 1 1 58%; min-width: 0;
    border-radius: 14px; overflow: hidden; border: 1px solid rgba(56,189,248,.16);
}
.holo-canvas canvas[b-3b2tj7bt4k] { width: 100%; height: 400px; display: block; cursor: grab; }
.holo-canvas canvas:active[b-3b2tj7bt4k] { cursor: grabbing; }
.holo-hint[b-3b2tj7bt4k] { position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; color: rgba(148,197,235,.75); }

.holo-info[b-3b2tj7bt4k] { flex: 1 1 42%; display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.holo-duo[b-3b2tj7bt4k] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.holo-card[b-3b2tj7bt4k] {
    background: rgba(15,30,54,.75);
    border: 1px solid rgba(56,189,248,.14);
    border-radius: 13px; padding: 12px 15px;
}
.holo-card .k[b-3b2tj7bt4k] { font-size: 12px; font-weight: 700; color: #7dd3fc; display: flex; align-items: center; gap: 6px; }
.holo-card .k .k-sub[b-3b2tj7bt4k] { font-size: 10.5px; font-weight: 600; color: #64809f; }
.holo-card .v[b-3b2tj7bt4k] { font-size: 22px; font-weight: 900; margin-top: 4px; color: #f0f9ff; }
.holo-card .v small[b-3b2tj7bt4k] { font-size: 13px; font-weight: 700; color: #94a3b8; }
.holo-card .sub[b-3b2tj7bt4k] { font-size: 12px; color: #94a3b8; margin-top: 4px; line-height: 1.5; }
.holo-card.hero[b-3b2tj7bt4k] { background: linear-gradient(135deg, rgba(14,116,144,.35), rgba(15,30,54,.8)); border-color: rgba(56,189,248,.35); }
.holo.st-warn .holo-card.hero[b-3b2tj7bt4k] { background: linear-gradient(135deg, rgba(180,83,9,.3), rgba(15,30,54,.8)); border-color: rgba(245,158,11,.35); }
.holo.st-err .holo-card.hero[b-3b2tj7bt4k] { background: linear-gradient(135deg, rgba(153,27,27,.32), rgba(15,30,54,.8)); border-color: rgba(239,68,68,.4); }

.holo-card .fillbar[b-3b2tj7bt4k] { height: 7px; border-radius: 6px; background: rgba(148,163,184,.18); margin-top: 9px; overflow: hidden; }
.holo-card .fillbar span[b-3b2tj7bt4k] { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #06b6d4, #38bdf8); transition: width .5s; }
.holo.st-warn .fillbar span[b-3b2tj7bt4k] { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.holo.st-err .fillbar span[b-3b2tj7bt4k] { background: linear-gradient(90deg, #dc2626, #f87171); }

.holo-card .rows[b-3b2tj7bt4k] { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin-top: 7px; font-size: 12.5px; }
.holo-card .rows.data[b-3b2tj7bt4k] { max-height: 140px; overflow: auto; }
.holo-card .rows span[b-3b2tj7bt4k] { color: #94a3b8; }
.holo-card .rows b[b-3b2tj7bt4k] { color: #e2e8f0; font-weight: 700; text-align: right; }
.holo-card .rows b small[b-3b2tj7bt4k] { color: #7dd3fc; font-weight: 700; margin-left: 3px; }
.holo-card .rows b em[b-3b2tj7bt4k] { display: block; font-style: normal; font-size: 10.5px; color: #64809f; }

.txt-ok[b-3b2tj7bt4k] { color: #34d399 !important; }
.txt-warn[b-3b2tj7bt4k] { color: #fbbf24 !important; }
.txt-err[b-3b2tj7bt4k] { color: #f87171 !important; }
.txt-off[b-3b2tj7bt4k] { color: #cbd5e1 !important; }

@media (max-width: 860px) {
    .holo-body[b-3b2tj7bt4k] { flex-direction: column; }
    .holo-canvas canvas[b-3b2tj7bt4k] { height: 300px; }
}