/* /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;
}

/* 헤더 */
.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); }

/* 요약 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); }
@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;
    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); }

/* 작은 방 대응 */
.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.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; }
.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; }
/* 3D 에서 마커는 자기가 놓인 구역 천장 위에 얹힌다 (--fh = 아래 구역 최고 높이 + 1px) */
.floor.is-3d .furn[b-dhq8j7pd3k] { opacity: .85; transform: translateZ(var(--fh, 1px)); }

/* ---------- 2D 구역 상단 라벨 (이름 + 온습도) ---------- */
.zone-head[b-dhq8j7pd3k] {
    position: absolute; top: 6.5%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 6;
}
.zh-name[b-dhq8j7pd3k] {
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 13px; font-weight: 800; color: var(--text);
    padding: 2px 22px; white-space: nowrap;
}
.zh-data[b-dhq8j7pd3k] {
    background: color-mix(in srgb, var(--surface-2) 60%, transparent);
    border: 1px solid var(--border);
    font-size: 10.5px; font-weight: 600; color: var(--text-muted);
    padding: 2px 10px; line-height: 1.45; text-align: left; white-space: nowrap;
}
.zh-data.c-hot[b-dhq8j7pd3k] { color: var(--error); }
.zh-data.c-warm[b-dhq8j7pd3k] { color: #b45309; }
.zh-stale[b-dhq8j7pd3k] { color: var(--error); font-weight: 800; }
/* 2D 에서는 구역 안 텍스트를 숨겨 겹침 방지 (측정값은 상단 라벨로) */
.floor:not(.is-3d) .zone .room-inner[b-dhq8j7pd3k] { display: none; }

/* ───────── 레이아웃 디자이너 (참조앱 UURES_Web 이식) ───────── */
.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-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 var(--primary); outline-offset: 2px; z-index: 7; overflow: visible; }
/* 편집(2D)에서는 구역 이름이 보여야 배치가 가능 — 2D 숨김 규칙을 되살린다 */
.floor-stage.editing .floor .zone .room-inner[b-dhq8j7pd3k] { display: flex; }

/* ───────── 실측 표기 (건물 가로×세로 · 층고) ───────── */
.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 전층 (분해 조립도) ───────── */
.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;
}
/* 첫 판만 흐름에 참여시켜 스택 높이를 확보 */
.stack-plate:first-child[b-dhq8j7pd3k] { position: 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; }
/* 판 배경을 거의 투명하게 — 위층 판이 선택된 층을 가리지 않는다 */
.stack-plate:not(.cur)[b-dhq8j7pd3k] {
    border-color: rgba(120,110,200,.28);
    box-shadow: -14px 22px 26px rgba(40,30,90,.12);
    background: color-mix(in srgb, var(--surface-2) 22%, transparent);
}
.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: .32; }
.stack-plate:not(.cur):hover .plate-base[b-dhq8j7pd3k],
.stack-plate:not(.cur):hover .plate-grid[b-dhq8j7pd3k],
.stack-plate:not(.cur):hover .plate-room[b-dhq8j7pd3k],
.stack-plate:not(.cur):hover .plate-mark[b-dhq8j7pd3k] { opacity: .65; }

/* 포커스 층 — 확대·선명·광채 강조 (세로 드래그/클릭으로 변경) */
.stack-plate.cur[b-dhq8j7pd3k] {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
    box-shadow: -16px 26px 50px rgba(108,92,231,.5), 0 0 0 1.5px var(--primary);
}
.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-light); font-size: 11.5px; }
.stack-plate:not(.cur) .plate-label span[b-dhq8j7pd3k] { color: var(--text-light); opacity: .8; }
.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); }

/* 층 라벨 + 라벨선 (참조 분해 조립도 형태) */
.plate-lead[b-dhq8j7pd3k] {
    position: absolute; right: -1px; top: 50%; width: 22%; 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: -24%; 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); }

/* ───────── 층 관리 버튼 (헤더 · 상시 노출) ───────── */
.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;
}

/* ───────── 장소 관리 모달 ───────── */
/* 상단 : 등록된 장소 목록 (읽기 전용 · 행 클릭 → 하단 폼 수정 상태) */
.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; }
}

.room-resize[b-dhq8j7pd3k] {
    position: absolute; right: -7px; bottom: -7px;
    width: 16px; height: 16px; border-radius: 5px;
    background: var(--primary); border: 2px solid #fff;
    cursor: nwse-resize; z-index: 7;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

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