/* 2026.09.29 — MudBlazor(Material) 룩 테마. 프레임워크는 BootstrapBlazor 유지, 스타일만 Material 규격으로 덮어씀.
   2026.10.06 — 브랜드 아이콘(접은 종이 P, docs/brand) 색으로 Primary 교체: #0A6BE0(점·기본) · dark #0847A3(접힌 면) · light #4FA3F5. 사용자: "브랜드 로고에 맞는 테마 색상으로".
   토큰: MudBlazor 기본 팔레트(Primary 는 브랜드 파랑으로 바꿈, 원래 #594AE2, Secondary #FF4081, Background #FFF, BackgroundGray #F5F5F5(호버용), Surface #FFF, AppBar Primary/White, Drawer White) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  --mud-primary: #0a6be0;
  --mud-primary-dark: #0847a3;
  --mud-primary-light: #4fa3f5;
  --mud-primary-tint: rgba(10, 107, 224, .08);
  --mud-primary-sel: rgba(10, 107, 224, .16);
  --mud-error-tint: rgba(244, 67, 54, .12);
  --mud-success-tint: rgba(0, 200, 83, .12);
  --mud-warning-tint: rgba(255, 152, 0, .14);
  --mud-info-tint: rgba(33, 150, 243, .12);
  --mud-secondary: #ff4081;
  --mud-success: #00c853;
  --mud-info: #2196f3;
  --mud-warning: #ff9800;
  --mud-error: #f44336;
  --mud-bg: #ffffff;          /* MudBlazor Palette.Background (콘텐츠 배경은 흰색) */
  --mud-bg-gray: #f5f5f5;     /* Palette.BackgroundGray — 호버/구분용만 */
  --mud-surface: #ffffff;
  --mud-text: rgba(0, 0, 0, .87);
  --mud-text-2: rgba(0, 0, 0, .54);
  --mud-text-3: rgba(0, 0, 0, .38);
  --mud-divider: rgba(0, 0, 0, .12);
  --mud-radius: 4px;
  --mud-appbar-h: 64px;
  --mud-drawer-w: 240px;
  --mud-el-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  --mud-el-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  --mud-el-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
  --mud-el-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
  --bs-primary: var(--mud-primary);
  --bs-primary-rgb: 10, 107, 224;
  --bs-body-bg: var(--mud-bg);
  --bs-body-color: var(--mud-text);
  /* 2026.10.05 — 글자 크기 단계(사용자: "폰트 너무 제각각"). 화면의 모든 font-size 는 이 6단계만 쓴다(아이콘·첫 화면 큰 제목 제외).
     xs 12 보조(라벨·표 머리글·배지·힌트) · sm 13 촘촘한 곳(.small·작은 버튼·코드) · md 14 본문(표·입력·버튼) · lg 16 카드 제목 · xl 20 화면 제목 · 2xl 24 숫자 강조 */
  --pf-fs-xs: 12px; --pf-fs-sm: 13px; --pf-fs-md: 14px; --pf-fs-lg: 16px; --pf-fs-xl: 20px; --pf-fs-2xl: 24px;
  --bs-body-font-size: var(--pf-fs-md);
  --bs-body-font-family: Roboto, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --bs-border-radius: var(--mud-radius);
  --bs-border-radius-sm: var(--mud-radius);
  --bs-border-color: var(--mud-divider);
  --bs-link-color: var(--mud-primary);
  --bs-link-hover-color: var(--mud-primary-dark);
}
html { font-size: 14px; }
html, body { background: var(--mud-bg); color: var(--mud-text); font-family: var(--bs-body-font-family); letter-spacing: .01071em; -webkit-font-smoothing: antialiased; }
body { font-size: var(--pf-fs-md); }
h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: 0; }
h4, h5, .h4, .h5 { font-size: var(--pf-fs-xl); } h6, .h6 { font-size: var(--pf-fs-lg); }
.small, small, .form-text { font-size: var(--pf-fs-sm); } .fs-6 { font-size: var(--pf-fs-md) !important; }
code, pre, kbd, .font-monospace { font-size: var(--pf-fs-sm); }

/* ── App bar / Drawer ── */
.mud-appbar { position: sticky; top: 0; z-index: 1100; height: var(--mud-appbar-h); display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: var(--mud-primary); color: #fff; box-shadow: var(--mud-el-4); }
.mud-appbar .mud-title { font-size: var(--pf-fs-xl); font-weight: 500; letter-spacing: .0075em; white-space: nowrap; }
.mud-appbar .mud-title span { color: #fff; opacity: .85; }
.mud-appbar-light .mud-title { color: var(--mud-text); }
.mud-appbar .btn, .mud-appbar .btn-outline-secondary, .mud-appbar .btn-outline-info, .mud-appbar .btn-secondary {
  color: #fff; border: 0; background: transparent; box-shadow: none; }
.mud-appbar .btn:hover { background: rgba(255,255,255,.12); }
.mud-appbar .btn.btn-success, .mud-appbar .btn.btn-primary:not(.btn-outline-primary) { background: rgba(255,255,255,.18); }
.mud-appbar .btn.btn-success:hover, .mud-appbar .btn.btn-primary:hover { background: rgba(255,255,255,.28); }
.mud-appbar-light { background: var(--mud-surface); color: var(--mud-text); box-shadow: none; border-bottom: 1px solid var(--mud-divider); }   /* MudBlazor 문서 사이트: 흰 AppBar */
.mud-appbar.mud-appbar-light .mud-icon-btn { color: var(--mud-text-2); }
.mud-appbar.mud-appbar-light .mud-icon-btn:hover { background: rgba(0,0,0,.06); color: var(--mud-text); }
.mud-appbar.mud-appbar-light .mud-icon-btn-filled { background: var(--mud-primary-tint); color: var(--mud-primary); }
.mud-appbar.mud-appbar-light .mud-icon-btn-filled:hover { background: var(--mud-primary-sel); color: var(--mud-primary-dark); }
.mud-appbar.mud-appbar-light .mud-appbar-sep { background: var(--mud-divider); }
.mud-appbar-light .mud-avatar { background: var(--mud-primary); }
.mud-appbar-light .form-control { background: var(--mud-bg-gray); border-color: transparent; }
.mud-appbar-light .btn { color: var(--mud-text-2); }
.mud-appbar-light .btn:hover { background: rgba(0,0,0,.06); color: var(--mud-text); }
.mud-appbar.mud-appbar-light .btn.btn-primary:not(.btn-outline-primary) { background: var(--mud-primary); color: #fff; box-shadow: var(--mud-el-2); }
.mud-appbar.mud-appbar-light .btn.btn-primary:hover { background: var(--mud-primary-dark); }
.mud-appbar-light .mud-title span { color: var(--mud-primary); opacity: 1; }
.mud-appbar .ms-auto { flex-wrap: nowrap; overflow: visible; }   /* 2026.10.06 overflow-x:auto 가 프로젝트 전환기 드롭다운을 잘라 "눌러도 아무것도 안 보임" → visible */
.mud-appbar .btn-sm { text-transform: none; font-size: var(--pf-fs-sm); white-space: nowrap; }
.mud-appbar .mud-icon-btn { color: #fff; font-size: var(--pf-fs-md); }
.mud-appbar .mud-icon-btn i { width: 1em; text-align: center; }
.mud-appbar .mud-icon-btn-filled { background: rgba(255,255,255,.2); }
.mud-appbar .mud-icon-btn-filled:hover { background: rgba(255,255,255,.32); }
.mud-appbar-sep { width: 1px; height: 24px; background: rgba(255,255,255,.3); margin: 0 6px; }
.mud-icon-btn { width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; }
.mud-layout { display: flex; min-height: calc(100vh - var(--mud-appbar-h)); }
.mud-drawer { width: var(--mud-drawer-w); flex: 0 0 var(--mud-drawer-w); background: var(--mud-surface); border-right: 1px solid var(--mud-divider); display: flex; flex-direction: column; }
.mud-drawer.closed { display: none; }
.mud-main { flex: 1; min-width: 0; padding: 24px; }
.mud-nav { padding: 8px; }
.mud-nav-item { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 16px; border-radius: var(--mud-radius); color: var(--mud-text); text-decoration: none; font-weight: 400; transition: background .15s; }
.mud-nav-item i { width: 20px; text-align: center; color: var(--mud-text-2); }
.mud-nav-item:hover { background: var(--mud-bg-gray); color: var(--mud-text); }
.mud-nav-item.active { background: var(--mud-primary-tint); color: var(--mud-primary); font-weight: 500; }
.mud-nav-item.active i { color: var(--mud-primary); }
.mud-nav-group { padding: 12px 16px 4px; font-size: var(--pf-fs-xs); color: var(--mud-text-3); text-transform: uppercase; letter-spacing: .08em; }
.mud-drawer-footer { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--mud-divider); }
.mud-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mud-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; }

/* ── Paper / Card ── */
.card { border: 0; border-radius: var(--mud-radius); box-shadow: var(--mud-el-1); background: var(--mud-surface); }   /* MudPaper elevation 1 */
.card .card-header { background: transparent; border-bottom: 0; padding: 14px 16px 8px; font-size: var(--pf-fs-lg); font-weight: 600; line-height: 1.5; letter-spacing: .0075em; }   /* MudCardHeader + Typo.h6 */
.card .card-body { padding: 16px; }
.card:hover { box-shadow: var(--mud-el-2); }
.shadow-sm { box-shadow: var(--mud-el-8) !important; }
/* MudAlert(Variant.Text): 배경 = severity 10%, 글자 = severity-darken, 좌측 아이콘 */
.alert { border: 0; border-radius: var(--mud-radius); padding: 6px 16px; min-height: 48px; display: flex; align-items: center; gap: 12px; font-size: var(--pf-fs-md); line-height: 1.43; }
.alert-info { background: rgba(33,150,243,.1); color: #0c80df; }
.alert-danger { background: rgba(244,67,54,.1); color: #f21c0d; }
.alert-success { background: rgba(0,200,83,.1); color: #00a343; }
.alert-warning { background: rgba(255,152,0,.1); color: #d68100; }
.alert.is-bar::before, .alert .alert-bar { display: none; }

/* ── Buttons (Material: 대문자·500·radius 4·elevation). Bootstrap 5 는 --bs-btn-* 변수로 색을 정하므로 변수를 덮는다 ── */
.btn { border-radius: var(--mud-radius); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--pf-fs-md); padding: 6px 16px; min-height: 36px; transition: box-shadow .2s, background .2s; --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--mud-primary-tint); }
.btn-sm { padding: 4px 10px; min-height: 30px; font-size: var(--pf-fs-sm); }
.btn-primary { --bs-btn-bg: var(--mud-primary); --bs-btn-border-color: var(--mud-primary); --bs-btn-hover-bg: var(--mud-primary-dark); --bs-btn-hover-border-color: var(--mud-primary-dark); --bs-btn-active-bg: var(--mud-primary-dark); --bs-btn-active-border-color: var(--mud-primary-dark); --bs-btn-disabled-bg: var(--mud-primary-light); --bs-btn-disabled-border-color: var(--mud-primary-light); box-shadow: var(--mud-el-2); }
.btn-primary:hover, .btn-primary:focus { box-shadow: var(--mud-el-4); }
.btn-success { --bs-btn-bg: var(--mud-success); --bs-btn-border-color: var(--mud-success); --bs-btn-hover-bg: #00a844; --bs-btn-hover-border-color: #00a844; --bs-btn-active-bg: #00a844; box-shadow: var(--mud-el-2); }
/* MudBlazor 에는 회색 채움 버튼이 없음 → Secondary/Light 는 Text 변형 */
.btn-secondary { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--mud-primary); --bs-btn-hover-bg: var(--mud-primary-tint); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--mud-primary-dark); --bs-btn-active-bg: var(--mud-primary-sel); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--mud-primary-dark); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-color: var(--mud-text-3); box-shadow: none; }
.btn-outline-primary { --bs-btn-color: var(--mud-primary); --bs-btn-border-color: rgba(89,74,226,.5); --bs-btn-hover-bg: var(--mud-primary-tint); --bs-btn-hover-color: var(--mud-primary); --bs-btn-hover-border-color: var(--mud-primary); --bs-btn-active-bg: var(--mud-primary-sel); --bs-btn-active-color: var(--mud-primary); --bs-btn-active-border-color: var(--mud-primary); }
.btn-outline-secondary { --bs-btn-color: var(--mud-text-2); --bs-btn-border-color: rgba(0,0,0,.23); --bs-btn-hover-bg: rgba(0,0,0,.04); --bs-btn-hover-color: var(--mud-text); --bs-btn-hover-border-color: rgba(0,0,0,.4); --bs-btn-active-bg: rgba(0,0,0,.08); --bs-btn-active-color: var(--mud-text); --bs-btn-active-border-color: rgba(0,0,0,.4); }

/* ── Inputs (outlined) ── */
.form-control, .form-select { border-radius: var(--mud-radius); border: 1px solid rgba(0,0,0,.23); padding: 7px 12px; font-size: var(--pf-fs-md); background: var(--mud-surface); }
.form-control:hover, .form-select:hover { border-color: var(--mud-text); }
.form-control:focus, .form-select:focus { border-color: var(--mud-primary); box-shadow: 0 0 0 3px var(--mud-primary-tint); }   /* 2026.10.13 사용자: "하이라이팅될 때 갑자기 에디터가 커짐" — 포커스에 테두리 2px·패딩 변경 금지(크기 고정), 링만 */
.form-label { font-size: var(--pf-fs-xs); color: var(--mud-text-2); margin-bottom: 4px; }
.form-control-sm, .form-select-sm { padding: 5px 10px; font-size: var(--pf-fs-md); }

/* ── Bootstrap 유틸/컴포넌트 색 → Material 팔레트 ── */
.bg-light { background: var(--mud-bg) !important; }
.bg-white { background: var(--mud-surface) !important; }
.bg-primary { background: var(--mud-primary) !important; }
.bg-secondary { background: rgba(0,0,0,.08) !important; color: var(--mud-text-2) !important; }
.bg-success { background: var(--mud-success) !important; }
.bg-primary-subtle { background: var(--mud-primary-tint) !important; }
.text-primary { color: var(--mud-primary) !important; }
.text-secondary { color: var(--mud-text-2) !important; }
.text-success { color: var(--mud-success) !important; }
.text-danger { color: var(--mud-error) !important; }
.badge { border-radius: 12px; font-weight: 500; letter-spacing: 0; padding: 3px 9px; font-size: var(--pf-fs-xs); }
.badge.bg-secondary { background: rgba(0,0,0,.08) !important; color: var(--mud-text-2) !important; }
.badge.bg-light { background: rgba(0,0,0,.06) !important; }
.table { --bs-table-bg: transparent; color: var(--mud-text); font-size: var(--pf-fs-md); }
.table td.small, .table th.small { font-size: var(--pf-fs-sm); }
.table > :not(caption) > * > * { border-bottom-color: var(--mud-divider); padding: 12px 16px; }
.table thead th { color: var(--mud-text-2); font-weight: 500; font-size: var(--pf-fs-xs); text-transform: none; letter-spacing: 0; }
.table-hover > tbody > tr:hover > * { background: rgba(0,0,0,.03); }
.form-check-input:checked, .form-switch .form-check-input:checked { background-color: var(--mud-primary); border-color: var(--mud-primary); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--mud-primary-tint); border-color: var(--mud-primary); }
.dropdown-menu, .modal-content, .popover, .toast { border: 0; border-radius: var(--mud-radius); box-shadow: var(--mud-el-8); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(0,0,0,.04); }
.dropdown-item.active { background: var(--mud-primary-tint); color: var(--mud-primary); }
.modal-header { border-bottom: 0; padding: 16px 24px 0; font-weight: 500; }
.modal-footer { border-top: 0; }
.nav-tabs { border-bottom: 1px solid var(--mud-divider); }
.nav-tabs .nav-link { border: 0; color: var(--mud-text-2); text-transform: none; font-weight: 500; font-size: var(--pf-fs-md); letter-spacing: 0; padding: 12px 16px; }
.nav-tabs .nav-link.active { color: var(--mud-primary); border-bottom: 2px solid var(--mud-primary); background: transparent; }
.progress { border-radius: 2px; height: 4px; background: var(--mud-primary-tint); }
.progress-bar { background: var(--mud-primary); }
.spinner-border { color: var(--mud-primary); }
.list-group-item { border-color: var(--mud-divider); }
.list-group-item.active { background: var(--mud-primary-tint); color: var(--mud-primary); border-color: var(--mud-divider); }
.border, .border-start, .rounded { border-color: var(--mud-divider) !important; }
a { color: var(--mud-primary); text-decoration: none; }
a:hover { color: var(--mud-primary-dark); text-decoration: underline; }
code, pre { border-radius: var(--mud-radius); }
/* 페이지 상단 툴바(UiControl/BuildResult 등, primary 배경). 전체화면 프레임은 AppBar(1100) 위로. */
.pf-toolbar, .pf-build > .d-flex:first-child { box-shadow: var(--mud-el-4); }
.pf-build { z-index: 1200 !important; }   /* 2026.10.06 .pf-frame 은 이제 일반 페이지 틀(9곳) — 1200 이면 앱 바(1100) 드롭다운을 덮어 "깨져 보임" → 제외 */
.btn, .badge, .form-check-label { white-space: nowrap; }

/* ── 기타 ── */
.border-bottom, .border-top, .border-end { border-color: var(--mud-divider) !important; }
.text-muted { color: var(--mud-text-2) !important; }
header.border-bottom { box-shadow: var(--mud-el-1); }
.mud-hero { padding: 64px 24px; text-align: center; }
.mud-hero h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: -.00833em; }
.mud-hero h1 span { color: var(--mud-primary); font-weight: 500; }

/* ── 코드 편집 화면 (/sourceedit): AppBar + 노드 패널 + 탭/Monaco + 결과 ── */
.pf-try { position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-columns: auto 1fr minmax(320px, 40%); grid-template-rows: var(--mud-appbar-h) 1fr; background: var(--mud-surface); }
.pf-try-appbar { grid-column: 1 / 4; position: static; }
.pf-try-nodes { width: 220px; border-right: 1px solid var(--mud-divider); background: var(--mud-surface); overflow-y: auto; padding: 8px; }
.pf-try-nodes-title { font-size: var(--pf-fs-xs); color: var(--mud-text-3); text-transform: uppercase; letter-spacing: .08em; padding: 8px 8px 4px; }
.pf-node-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: var(--mud-radius); color: var(--mud-text); font-size: var(--pf-fs-md); }
.pf-node-item i { color: var(--mud-text-2); }
.pf-node-item:hover { background: var(--mud-bg-gray); }
.pf-node-item.active { background: var(--mud-primary-tint); color: var(--mud-primary); font-weight: 500; }
.pf-node-item.active i { color: var(--mud-primary); }
.pf-try-editor { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--mud-divider); background: var(--mud-surface); }
.pf-try-tabs { display: flex; align-items: stretch; height: 40px; background: var(--mud-bg-gray); border-bottom: 1px solid var(--mud-divider); overflow-x: auto; }
.pf-try-tab { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: var(--pf-fs-sm); color: var(--mud-text-2); cursor: pointer; border-right: 1px solid var(--mud-divider); white-space: nowrap; }
.pf-try-tab.active { background: var(--mud-surface); color: var(--mud-text); border-bottom: 2px solid var(--mud-primary); }
.pf-try-tab-close { border: 0; background: transparent; color: var(--mud-text-3); padding: 0 2px; }
.pf-try-tab-close:hover { color: var(--mud-error); }
.pf-try-tab-add { border: 0; background: transparent; color: var(--mud-text-2); width: 40px; }
.pf-try-tab-add:hover { color: var(--mud-primary); }
.pf-try-monaco { flex: 1; min-height: 0; }
.pf-try-monaco .monaco-editor-container, .pf-try-monaco > div { height: 100% !important; }
.pf-try-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--mud-text-3); gap: 12px; }
.pf-try-empty > i { font-size: 48px; opacity: .3; }
.pf-try-output { overflow: auto; padding: 24px; background: var(--mud-surface); }
.pf-try-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--mud-bg-gray); border-radius: var(--mud-radius); color: var(--mud-text); font-size: var(--pf-fs-md); }
.pf-try-note i { font-size: var(--pf-fs-xl); color: var(--mud-text-2); }
.pf-try-note.ok { background: rgba(0,200,83,.1); color: #00a343; } .pf-try-note.ok i { color: #00a343; }
.pf-try-note.error { background: rgba(244,67,54,.1); color: #f21c0d; } .pf-try-note.error i { color: #f21c0d; }
.pf-try-error { margin: 12px 0; padding: 12px 14px; background: #1e1e1e; color: #e6e6e6; border-radius: var(--mud-radius); font-size: var(--pf-fs-sm); white-space: pre-wrap; }
.pf-try-render { margin-top: 16px; padding: 16px; border: 1px solid var(--mud-divider); border-radius: var(--mud-radius); min-height: 200px; }

/* ── MudBlazor 문서 사이트식 NavMenu: 그룹 버튼(쉐브론) + 들여쓴 링크 ── */
.mud-nav { padding: 8px 8px 16px; }
.mud-nav-group-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; padding: 10px 12px; border-radius: var(--mud-radius); font-size: var(--pf-fs-md); font-weight: 500; color: var(--mud-text); text-align: left; }
.mud-nav-group-btn i { font-size: var(--pf-fs-xs); color: var(--mud-text-3); }
.mud-nav-group-btn:hover { background: var(--mud-bg-gray); }
.mud-nav-group-btn.has-active { color: var(--mud-primary); }
.mud-nav-children { display: flex; flex-direction: column; margin-bottom: 4px; }
.mud-nav-link { display: block; padding: 8px 12px 8px 32px; border-radius: var(--mud-radius); font-size: var(--pf-fs-md); color: var(--mud-text-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mud-nav-link:hover { background: var(--mud-bg-gray); color: var(--mud-text); text-decoration: none; }
.mud-nav-link.active { background: var(--mud-primary-tint); color: var(--mud-primary); font-weight: 500; }
.mud-nav-link.planned { color: var(--mud-text-3); cursor: default; }
.mud-nav-link.planned small { font-size: var(--pf-fs-xs); margin-left: 4px; padding: 1px 6px; border-radius: 8px; background: rgba(0,0,0,.06); }

/* ── 2026.10.02 화면 채우기 규약(사용자): 페이지는 데이터 양이 아니라 "화면 크기" 기준으로 전체가 그려진다 ──
   main = 앱바 아래 높이 고정 + 세로 flex. .pf-fill(행 또는 단일 카드)이 남은 높이를 전부 차지하고, 내용은 그 안에서 스크롤.
   데스크톱(≥992px): 좌/우 열이 같은 높이로 꽉 참. 그 아래: 세로 스택, 카드마다 뷰포트 비율(60vh)로 — 기기 크기에 따라 틀이 바뀜. */
.mud-layout { height: calc(100vh - var(--mud-appbar-h)); min-height: auto; }
.mud-drawer { overflow: auto; }
.mud-main { display: flex; flex-direction: column; height: calc(100vh - var(--mud-appbar-h)); overflow: auto; }
.mud-main > .mud-page-header { flex: 0 0 auto; }
.mud-main > .pf-fill { flex: 1 1 auto; min-height: 0; }
.row.pf-fill > [class*="col-"] { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.row.pf-fill > [class*="col-"] > .card:only-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0 !important; }
.row.pf-fill > [class*="col-"] > .card:only-child > .card-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.card.pf-fill { display: flex; flex-direction: column; }
.card.pf-fill > .card-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
@media (max-width: 991.98px) {
  .mud-main > .row.pf-fill { flex: 0 0 auto; }
  .row.pf-fill > [class*="col-"] { overflow: visible; }
  .row.pf-fill > [class*="col-"] > .card:only-child { height: 60vh; }
  .card.pf-fill { min-height: 60vh; }
  .mud-main { padding: 12px; }
}
/* 2026.10.02 — 작은 화면(<992px): 드로어는 본문 폭을 안 뺏고 오버레이로, 긴 설명 문구는 숨김 */
@media (max-width: 991.98px) {
  .mud-drawer { position: fixed; top: var(--mud-appbar-h); bottom: 0; left: 0; z-index: 1050; box-shadow: var(--mud-el-8); }
  .mud-main > .mud-page-header > span.text-muted { display: none; }
  .mud-main > .mud-page-header { flex-wrap: wrap; row-gap: 6px; }
}
.pf-chip-dark { display: inline-flex; align-items: center; gap: 8px; color: #fff; } .pf-chip-dark .mud-icon-btn { color: #fff; } .pf-chip-dark .mud-avatar { background: #fff; color: var(--mud-primary); } .pf-chip-dark .mud-appbar-sep { display: none; }

/* ── 2026.10.02 ColumnGrid(엑셀형 속성 그리드, OpenMES TableBuilder 항목) — 조밀한 셀: 패딩·구분 최소, 셀 = 바로 입력 ── */
.pf-xgrid-wrap { overflow: auto; border: 1px solid var(--mud-divider); border-radius: 4px; }
.pf-xgrid { border-collapse: collapse; width: 100%; font-size: var(--pf-fs-sm); }
.pf-xgrid th { position: sticky; top: 0; z-index: 1; background: var(--mud-bg-gray); font-weight: 500; color: var(--mud-text-2); padding: 3px 6px; border: 1px solid var(--mud-divider); white-space: nowrap; text-align: left; }
.pf-xgrid td { padding: 0; border: 1px solid var(--mud-divider); height: 27px; vertical-align: middle; }
.pf-xgrid td.rh { width: 30px; text-align: center; color: var(--mud-text-3); background: var(--mud-bg-gray); cursor: grab; user-select: none; font-size: var(--pf-fs-xs); outline: 0; }
.pf-xgrid td.rh:focus { box-shadow: inset 0 0 0 2px var(--mud-primary); }
.pf-xgrid tr.sel td { background: var(--mud-primary-tint); }
.pf-xgrid tr.dragover td { border-top: 2px solid var(--mud-primary); }
.pf-xgrid input[type=text], .pf-xgrid select { width: 100%; height: 27px; border: 0; background: transparent; padding: 0 6px; font-size: var(--pf-fs-sm); outline: 0; border-radius: 0; color: var(--mud-text); }
.pf-xgrid input[type=text].mono { font-family: Consolas, 'Courier New', monospace; }
.pf-xgrid input:focus, .pf-xgrid select:focus { background: #fffde7; box-shadow: inset 0 0 0 2px var(--mud-primary); }
.pf-xgrid input::placeholder { color: var(--mud-text-3); opacity: .6; }
.pf-xgrid td.chk { text-align: center; } .pf-xgrid input[type=checkbox] { margin: 0; width: 14px; height: 14px; vertical-align: middle; }
.pf-xgrid select:disabled { color: var(--mud-text-3); }
.pf-xgrid-del { border: 0; background: transparent; color: var(--mud-text-3); width: 100%; height: 27px; cursor: pointer; } .pf-xgrid-del:hover { color: var(--mud-error); }
.pf-xgrid-empty { padding: 10px 12px !important; color: var(--mud-text-3); outline: 0; } .pf-xgrid-empty:focus { box-shadow: inset 0 0 0 2px var(--mud-primary); }
.pf-xgrid-hint { font-size: var(--pf-fs-xs); color: var(--mud-text-3); margin-top: 4px; line-height: 1.4; }
.pf-xgrid input.editing { background: #fff; box-shadow: inset 0 0 0 2px var(--mud-secondary, #ff4081); }
.pf-xgrid td.rsel { background: var(--mud-primary-tint); } .pf-xgrid td.rsel input, .pf-xgrid td.rsel select { background: transparent; }
.pf-xgrid select.muted { color: var(--mud-text-3); }
/* 2026.10.02 suggest 셀 + 팝업 */
.pf-xgrid input.muted { color: var(--mud-text-3); } .pf-xgrid input.warn { color: var(--mud-error); }
.pf-suggest { position: fixed; z-index: 3000; max-height: 260px; overflow: auto; background: var(--mud-surface); border: 1px solid var(--mud-divider); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 2px 0; font-size: var(--pf-fs-sm); }
.pf-sg-item { padding: 4px 10px; cursor: pointer; white-space: nowrap; display: flex; justify-content: space-between; gap: 12px; } .pf-sg-item:hover { background: var(--mud-bg-gray); } .pf-sg-item.on { background: var(--mud-primary-tint); color: var(--mud-primary); }
.pf-sg-g { color: var(--mud-text-3); font-size: var(--pf-fs-xs); }
/* 2026.10.02 — 프로필 드롭다운(로그아웃은 메뉴 안으로) */
.pf-profile { position: relative; display: inline-flex; align-items: center; }
.pf-profile-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 2px 4px; border-radius: 24px; color: inherit; cursor: pointer; }
.pf-profile-btn:hover { background: var(--mud-bg-gray); }
.pf-profile-bg { position: fixed; inset: 0; z-index: 1500; }
.pf-profile-menu { position: fixed; z-index: 1501; min-width: 200px; background: var(--mud-surface); color: var(--mud-text); border-radius: var(--mud-radius); box-shadow: var(--mud-el-8); padding: 6px 0; }
.pf-profile-head { display: flex; align-items: center; gap: 12px; padding: 8px 16px 10px; border-bottom: 1px solid var(--mud-divider); margin-bottom: 4px; }
.pf-profile-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; padding: 8px 16px; text-align: left; font-size: var(--pf-fs-md); color: inherit; }
.pf-profile-item.text-danger { color: var(--mud-error, #f44336) !important; }
.pf-profile-item:hover { background: var(--mud-bg-gray); }
.pf-profile-item i { width: 18px; text-align: center; color: var(--mud-text-2); }
.pf-profile-div { height: 1px; background: var(--mud-divider); margin: 4px 0; }
.pf-chip-dark .pf-profile-btn { color: #fff; } .pf-chip-dark .pf-profile-btn:hover { background: rgba(255,255,255,.15); }
.pf-profile-avatar { width: 40px; height: 40px; flex: 0 0 40px; font-size: var(--pf-fs-lg); }

/* 2026.10.03 — 유형 스펙·모바일 화면 설계 공용 편집 부품(SpecIn·SpecRules·PairList·메뉴 트리) — 화면·메뉴 설계(/screens)·모바일 화면 설계(/mobile) */
.sd-node { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: var(--pf-fs-sm); white-space: nowrap; }
.sd-node:hover { background: var(--mud-bg-gray); } .sd-node.active { background: var(--mud-primary-tint); color: var(--mud-primary); } .sd-node.off { opacity: .5; text-decoration: line-through; }
.sd-opt { background: #f7f9fc; padding: 6px 8px !important; font-size: var(--pf-fs-xs); } .sd-oin { width: 130px; font-size: var(--pf-fs-xs); border: 1px solid var(--mud-divider); border-radius: 3px; padding: 1px 4px; }
.ts-pairs { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; } .ts-pair { display: inline-flex; gap: 2px; align-items: center; border: 1px solid var(--mud-divider); border-radius: 4px; padding: 1px 3px; }
.ts-pair input, .ts-pair select { width: 100px; border: 0; font-size: var(--pf-fs-xs); outline: 0; } .ts-pair button { border: 0; background: none; color: var(--mud-text-3); }
.ts-wrap { font-size: var(--pf-fs-xs); } .ts-panel { border: 1px solid var(--mud-divider); border-radius: 6px; margin-bottom: 8px; background: var(--mud-surface); }
.ts-tab { display: flex; align-items: center; background: #3f51b5; color: #fff; font-size: var(--pf-fs-xs); font-weight: 600; padding: 3px 8px; border-radius: 6px 6px 0 0; }
.ts-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; padding: 4px 8px; }
.ts-in { display: inline-flex; flex-direction: column; font-size: var(--pf-fs-xs); color: var(--mud-text-2); margin: 0; min-width: 90px; } .ts-in input, .ts-in select { font-size: var(--pf-fs-xs); border: 1px solid var(--mud-divider); border-radius: 3px; padding: 2px 4px; min-width: 90px; }
.ts-chk { display: inline-flex; align-items: center; gap: 3px; font-size: var(--pf-fs-xs); margin: 0 0 3px; } .ts-lbl { font-size: var(--pf-fs-xs); color: var(--mud-text-2); align-self: center; }
.ts-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #c5cae9; background: #eef0fb; border-radius: 12px; padding: 1px 8px; cursor: pointer; align-self: center; } .ts-chip.on { background: #c5cae9; } .ts-chip button { border: 0; background: none; padding: 0 2px; color: #555; }
.ts-rowtools button { border: 0; background: none; padding: 0 3px; color: var(--mud-text-3); } .ts-wd { border-color: #3f51b5; }
.ts-rules { border: 1px dashed #26a69a; border-radius: 6px; padding: 6px; margin-bottom: 8px; background: #f3fbfa; } .ts-rules-h { display: flex; align-items: center; margin-bottom: 4px; }
.ts-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; } .ts-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; }
.ts-adv summary { cursor: pointer; color: var(--mud-text-2); } .sd-rowtools button, .sd-btn button { border: 0; background: none; padding: 0 3px; color: var(--mud-text-3); }

/* 2026.10.04 — 로그 표(로그인 기록·데이터 변경): 일시·이름·결과 등 짧은 칸은 줄바꿈 없이, 사유·컬럼 목록만 줄바꿈 */
.pf-nowrap td, .pf-nowrap th { white-space: nowrap; }
.pf-nowrap td.small:not(.text-muted) { white-space: normal; }
.pf-nowrap .pf-chg-detail, .pf-nowrap .pf-chg-detail td { white-space: normal; }

/* 2026.10.05 — 채우기 규칙 보강(사용자: "프레임이 없음 — 데이터 없어도 그려질 건 다 그려져야"). 
   ① 페이지가 내용을 한 겹 감싼 경우(container-fluid 등): 그 감싼 요소도 세로 flex 로 남은 높이를 채워 .pf-fill 이 늘어나게.
   ② 한 열에 카드가 여러 개면 마지막 카드가 남은 높이를 채움(위 카드는 내용 높이). 데이터가 없어도 틀은 화면 끝까지. */
.mud-main > :has(> .pf-fill) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mud-main > :has(> .pf-fill) > * { flex: 0 0 auto; }
.mud-main > :has(> .pf-fill) > .pf-fill { flex: 1 1 auto; min-height: 0; }
.row.pf-fill > [class*="col-"] > .card:nth-last-child(1 of .card):not(:only-child) { flex: 1 0 auto; display: flex; flex-direction: column; }
.row.pf-fill > [class*="col-"] > .card:nth-last-child(1 of .card):not(:only-child) > .card-body { flex: 1 1 auto; }
@media (max-width: 991.98px) { .mud-main > :has(> .pf-fill) { flex: 0 0 auto; display: block; } }

/* 2026.10.05 — 틀이 눈에 보이게(사용자: "만들다 만 것 같음" — 그림자만 있어 영역 경계가 안 보였음) + 빈 상태.
   카드 = 테두리 + 머리글 띠(연회색·아래 구분선). 빈 상태(.pf-empty) = 틀 가운데에 아이콘·안내(목록 안은 .sm). 아이콘 버튼은 테두리 없음(비활성일 때 동그란 테두리가 보이던 것). */
.card { border: 1px solid var(--mud-divider); }
.card .card-header { background: var(--mud-bg-gray); border-bottom: 1px solid var(--mud-divider); padding: 10px 16px; border-radius: var(--mud-radius) var(--mud-radius) 0 0; }
.pf-frame .card { box-shadow: none; }
.mud-icon-btn, .mud-icon-btn:disabled, .mud-icon-btn.disabled { border: 0 !important; background: transparent; }
.mud-icon-btn:disabled { opacity: .35; }
.card-header .mud-icon-btn { width: 32px; height: 32px; }
.pf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--mud-text-3); padding: 32px 16px; min-height: 180px; height: 100%; font-size: var(--pf-fs-md); }
.pf-empty > i { font-size: 36px; opacity: .45; }
.pf-empty.sm { min-height: 120px; padding: 20px 12px; font-size: var(--pf-fs-sm); height: auto; }
.pf-empty.sm > i { font-size: 26px; }
.card-body.pf-empty { flex: 1 1 auto; }

/* 2026.10.05 — 화면 머리글(사용자: "버튼과 컨텐츠 사이 간격이 아예 없음"). .mud-page-header 에 기본 모양이 없어서(제목·설명·버튼이 그냥 쌓이고 아래 여백 0) 버튼이 내용에 붙었음.
   한 줄: [뒤로] 제목 · 설명 ………… 버튼들(오른쪽). 좁으면 줄바꿈. 아래 내용과 16px. */
.mud-page-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; min-height: 36px; }
.mud-page-header > h5, .mud-page-header > h4, .mud-page-header > h6 { margin: 0; }
.mud-page-header > span.text-muted, .mud-page-header > .text-muted { flex: 1 1 280px; min-width: 0; font-size: var(--pf-fs-sm); }
/* 2026.10.05 사용자 지정 모양: 1줄 = 제목 + 설명(제목 옆), 2줄 = 버튼들(왼쪽 정렬) */
.mud-page-header > .ms-auto { flex: 1 0 100%; margin-left: 0 !important; justify-content: flex-start; flex-wrap: wrap; }
.mud-page-header .btn { white-space: nowrap; }
.nav-tabs { margin-bottom: 12px; }

/* 원격 배포 로그: 2026.10.12 사용자 "최대 길이를 잡아둬야 무한 스크롤이 안 생김" → 화면 높이 기준으로 고정, 안에서만 스크롤 */
.row.pf-fill .card-body > pre.pf-log { height: calc(100vh - 240px); max-height: calc(100vh - 240px); min-height: 360px; }

/* 2026.10.05 — 상단 바의 현재 프로젝트(ProjectSwitcher): 이름 + 연결된 사이트, 누르면 프로젝트 목록 */
.pf-pj { position: relative; }
.pf-pj-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 360px; padding: 0 12px; border: 1px solid var(--mud-divider); border-radius: 18px; background: var(--mud-surface); color: var(--mud-text); font-size: var(--pf-fs-md); }
.pf-pj-btn:hover { background: var(--mud-bg-gray); }
.pf-pj-btn > i:first-child { color: var(--mud-primary); }
.pf-pj-btn.none { border-color: var(--mud-warning); color: var(--mud-warning); } .pf-pj-btn.none > i:first-child { color: var(--mud-warning); }
.pf-pj-nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pj-site { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pf-fs-xs); color: var(--mud-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.pf-pj-caret { font-size: 10px; color: var(--mud-text-3); }
.pf-pj-bg { position: fixed; inset: 0; z-index: 1290; }
.pf-pj-menu { position: absolute; right: 0; top: 42px; width: 380px; max-width: 92vw; background: var(--mud-surface); border: 1px solid var(--mud-divider); border-radius: var(--mud-radius); box-shadow: var(--mud-el-8); z-index: 1291; color: var(--mud-text); }
.pf-pj-head { padding: 10px 14px; font-weight: 600; background: var(--mud-bg-gray); border-bottom: 1px solid var(--mud-divider); border-radius: var(--mud-radius) var(--mud-radius) 0 0; }
.pf-pj-list { max-height: 50vh; overflow: auto; padding: 6px; }
.pf-pj-item { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--mud-radius); padding: 7px 8px; color: inherit; }
.pf-pj-item:hover { background: var(--mud-bg-gray); } .pf-pj-item.on { background: var(--mud-primary-tint); }
.pf-pj-item > i { grid-row: span 2; align-self: center; color: var(--mud-text-3); } .pf-pj-item.on > i { color: var(--mud-primary); }
.pf-pj-item-nm { font-weight: 600; font-size: var(--pf-fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pj-item-sub { font-size: var(--pf-fs-xs); color: var(--mud-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pj-confirm { margin: 2px 6px 8px 34px; padding: 8px 10px; background: #fff8e1; border-radius: var(--mud-radius); }
.pf-pj-foot { padding: 8px 14px; border-top: 1px solid var(--mud-divider); font-size: var(--pf-fs-sm); }
@media (max-width: 767.98px) { .pf-pj-site { display: none; } .pf-pj-btn { max-width: 180px; } }

/* 2026.10.05 — 새 프로젝트의 시작 설계 고르기(얼린 설계 / 사이트에서 복사 / 빈 프로젝트) */
.pf-start { display: flex; flex-direction: column; gap: 6px; }
.pf-start-opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--mud-divider); border-radius: var(--mud-radius); padding: 8px 12px; margin: 0; cursor: pointer; }
.pf-start-opt.on { border-color: var(--mud-primary); background: var(--mud-primary-tint); }
.pf-start-opt.off { opacity: .6; cursor: default; }
.pf-start-opt input { margin-top: 4px; }
.pf-start-opt span { display: block; flex: 1; min-width: 0; }
.pf-start-opt small { display: block; color: var(--mud-text-2); font-size: var(--pf-fs-xs); margin-top: 2px; }

/* 2026.10.05 — 접어 두는 고급 항목(사이트 등록의 DB 직접 연결 등) */
.pf-adv { border: 1px dashed var(--mud-divider); border-radius: var(--mud-radius); padding: 8px 12px; }
.pf-adv > summary { cursor: pointer; color: var(--mud-text-2); font-size: var(--pf-fs-sm); }

/* 2026.10.06 — 브랜드 아이콘(접은 종이 P + 점). 앱 바 왼쪽, 글자 높이에 맞춤 */
.mud-appbar .mud-logo { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 6px; }

/* 2026.10.06 — 사용자: "메뉴 목록이 너무 흐릿함" → 드로어 메뉴 글자를 본문 색(87%)으로. 예정 항목만 흐리게 */
.mud-nav-link { color: var(--mud-text); }
.mud-nav-link.planned { color: var(--mud-text-3); }
.mud-nav-group-btn { color: var(--mud-text); }

/* 2026.10.06 — 검색: 드로어 메뉴 필터(.mud-nav-search) + 앱 바 통합 검색(.pf-gs). 사용자: "대시보드 영역 위에 검색", "App Bar 에도 검색바" */
.mud-nav-search { position: relative; margin: 12px 12px 0; }
.mud-nav-search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--mud-text-3); font-size: var(--pf-fs-sm); pointer-events: none; }
.mud-nav-search-in { width: 100%; height: 34px; padding: 0 28px 0 30px; border: 1px solid var(--mud-divider); border-radius: 17px; background: var(--mud-bg-gray); font-size: var(--pf-fs-md); color: var(--mud-text); outline: none; }
.mud-nav-search-in:focus { background: var(--mud-surface); border-color: var(--mud-primary); box-shadow: 0 0 0 2px var(--mud-primary-tint); }
.mud-nav-search-in::-webkit-search-cancel-button { display: none; }
.mud-nav-search-x { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--mud-text-3); padding: 2px 6px; }
.pf-gs { position: relative; margin-left: 24px; width: 360px; max-width: 34vw; }
.pf-gs-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mud-text-3); font-size: var(--pf-fs-sm); pointer-events: none; }
.pf-gs-in { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid var(--mud-divider); border-radius: 18px; background: var(--mud-bg-gray); font-size: var(--pf-fs-md); color: var(--mud-text); outline: none; }
.pf-gs-in:focus { background: var(--mud-surface); border-color: var(--mud-primary); box-shadow: 0 0 0 2px var(--mud-primary-tint); }
.pf-gs-in::-webkit-search-cancel-button { display: none; }
.pf-gs-menu { position: absolute; left: 0; top: 42px; width: 440px; max-width: 92vw; background: var(--mud-surface); border: 1px solid var(--mud-divider); border-radius: var(--mud-radius); box-shadow: var(--mud-el-8); z-index: 1291; color: var(--mud-text); padding: 6px; }
.pf-gs-head { padding: 8px 10px 4px; font-size: var(--pf-fs-xs); color: var(--mud-text-3); text-transform: uppercase; letter-spacing: .08em; }
.pf-gs-item { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; border-radius: var(--mud-radius); padding: 7px 8px; color: inherit; }
.pf-gs-item > i { color: var(--mud-text-2); grid-row: span 2; align-self: center; text-align: center; }
.pf-gs-item.on { background: var(--mud-primary-tint); } .pf-gs-item.on > i, .pf-gs-item.on .pf-gs-nm { color: var(--mud-primary); }
.pf-gs-nm { font-size: var(--pf-fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-gs-sub { grid-column: 2; font-size: var(--pf-fs-xs); color: var(--mud-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-gs-foot { padding: 6px 10px 2px; border-top: 1px solid var(--mud-divider); margin-top: 4px; font-size: var(--pf-fs-xs); color: var(--mud-text-3); }
@media (max-width: 900px) { .pf-gs { display: none; } }

/* 2026.10.06 — 사용자: "메뉴에 아이콘 좀 있어야 … 너무 없어 보임" → 그룹·항목 아이콘. 항목은 아이콘 18px 고정 폭 + 글자 */
.mud-nav-group-ico { width: 18px; margin-right: 10px; text-align: center; color: var(--mud-text-2); font-size: var(--pf-fs-sm) !important; }
.mud-nav-group-btn.has-active .mud-nav-group-ico { color: var(--mud-primary); }
.mud-nav-link { display: flex; align-items: center; gap: 10px; padding-left: 16px; }
.mud-nav-link > i { width: 18px; text-align: center; color: var(--mud-text-3); font-size: var(--pf-fs-sm); flex: 0 0 18px; }
.mud-nav-link:hover > i { color: var(--mud-text-2); }
.mud-nav-link.active > i { color: var(--mud-primary); }
.mud-nav-link > span { overflow: hidden; text-overflow: ellipsis; }

/* 2026.10.06 — 사용자: "검색창을 가운데로" → 앱 바 정중앙에 절대 배치(양쪽 요소와 무관하게 가운데) */
.mud-appbar .pf-gs { position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0; width: 440px; max-width: 30vw; }
@media (max-width: 1100px) { .mud-appbar .pf-gs { max-width: 24vw; } }

/* 2026.10.06 — 사용자: "메뉴 크기를 줄였다 키웠다" → 드로어 폭 끌기(.mud-drawer-resizer) + 글자 크기 단계(--mud-nav-scale, js/drawer.js) */
:root { --mud-nav-scale: 1; }
.mud-drawer { position: relative; }
.mud-drawer-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; }
.mud-drawer-resizer:hover, body.pf-resizing .mud-drawer-resizer { background: var(--mud-primary-sel); }
body.pf-resizing { cursor: col-resize; user-select: none; }
.mud-nav-group-btn { font-size: calc(var(--pf-fs-md) * var(--mud-nav-scale)); padding: calc(10px * var(--mud-nav-scale)) 12px; }
.mud-nav-link { font-size: calc(var(--pf-fs-md) * var(--mud-nav-scale)); padding-top: calc(8px * var(--mud-nav-scale)); padding-bottom: calc(8px * var(--mud-nav-scale)); }
.mud-nav-link > i, .mud-nav-group-ico { font-size: calc(var(--pf-fs-sm) * var(--mud-nav-scale)) !important; }
.mud-drawer-zoom { display: inline-flex; border: 1px solid var(--mud-divider); border-radius: var(--mud-radius); overflow: hidden; }
.mud-drawer-zoom button { border: 0; background: transparent; padding: 2px 7px; font-size: var(--pf-fs-sm); color: var(--mud-text-2); line-height: 1.4; }
.mud-drawer-zoom button + button { border-left: 1px solid var(--mud-divider); }
.mud-drawer-zoom button:hover { background: var(--mud-bg-gray); color: var(--mud-text); }
.mud-drawer-zoom small { font-size: 9px; vertical-align: top; }

/* 2026.10.06 — 사용자: "인덴트 좀 더", "splitter 위치를 스크롤바 오른쪽에" →
   스크롤은 드로어가 아니라 메뉴(.mud-nav)가 하고, 드로어 자체는 넘치지 않게 → 끌기 손잡이가 스크롤바 바깥(오른쪽 가장자리)에 놓임. 하위 항목 들여쓰기 16 → 36px */
.mud-drawer { overflow: visible; min-height: 0; }
.mud-drawer > .mud-nav { flex: 1 1 auto; min-height: 0; overflow: auto; }
.mud-drawer > .mud-nav-search { flex: 0 0 auto; }
.mud-drawer > .mud-drawer-footer { flex: 0 0 auto; }
.mud-nav-link { padding-left: 36px; }
.mud-drawer-resizer { right: 0; width: 7px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   2026.10.11 — 테마 정리(사용자: "전체적으로 테마를 한번 손봐야 할 것 같은데").
   목표: 밀도(본문 15px·간격 축소) · 위계(제목 남색·굵게, 설명 회색) · 바탕(연한 블루그레이 위 흰 카드) · 모서리 10~12px · 공통 빈 상태.
   아래 변수·규칙은 위의 Material 룩 위에 덮어쓴다. 글자 크기는 계속 6단계 변수만 쓴다.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --mud-bg: #f4f6fa;                 /* 앱 바탕: 아주 연한 블루그레이 → 흰 카드가 떠 보임 */
  --mud-bg-gray: #f1f4f8;            /* 호버·표 머리글·보조 띠 */
  --mud-surface: #ffffff;
  --mud-drawer-bg: #fbfcfe;
  --mud-text: #1f2937;
  --mud-text-2: #5b6577;
  --mud-text-3: #8b94a6;
  --mud-heading: #1b2a41;            /* 제목 남색 */
  --mud-divider: rgba(16, 24, 40, .10);
  --mud-radius: 8px;                 /* 버튼·입력 */
  --mud-radius-lg: 12px;             /* 카드·패널 */
  --mud-appbar-h: 56px;
  --mud-el-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .03);
  --mud-el-2: 0 2px 6px rgba(16, 24, 40, .08);
  --mud-el-4: 0 6px 16px rgba(16, 24, 40, .10);
  --mud-el-8: 0 12px 32px rgba(16, 24, 40, .16);
  --pf-fs-xs: 12.5px; --pf-fs-sm: 13.5px; --pf-fs-md: 15px; --pf-fs-lg: 16.5px; --pf-fs-xl: 22px; --pf-fs-2xl: 26px;
  --bs-border-radius: var(--mud-radius); --bs-border-radius-sm: 6px; --bs-border-radius-lg: var(--mud-radius-lg);
}
body { line-height: 1.55; }
h1, h2, h3, h4, h5, h6, .h4, .h5, .h6 { color: var(--mud-heading); font-weight: 600; }
b, strong, .fw-500, .fw-semibold { color: var(--mud-heading); }
.text-muted { color: var(--mud-text-2) !important; }

/* 앱 바 */
.mud-appbar.mud-appbar-light { background: var(--mud-surface); border-bottom: 1px solid var(--mud-divider); box-shadow: 0 1px 0 rgba(16,24,40,.02); }
.mud-appbar .mud-title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--mud-heading); }
.mud-appbar-light .mud-title span { color: var(--mud-primary); }
.pf-pj-btn { height: 34px; border-radius: 17px; font-size: var(--pf-fs-sm); border-color: var(--mud-divider); background: var(--mud-surface); }
.pf-pj-btn:hover { border-color: rgba(10,107,224,.35); background: var(--mud-primary-tint); }

/* 서랍(메뉴) */
.mud-drawer { background: var(--mud-drawer-bg); }
.mud-nav { padding: 6px 10px 16px; }
.mud-nav-group-btn { padding: 8px 10px; font-size: var(--pf-fs-sm); font-weight: 600; color: var(--mud-text-2); text-transform: uppercase; letter-spacing: .04em; border-radius: var(--mud-radius); }
.mud-nav-group-btn.has-active { color: var(--mud-primary); }
.mud-nav-item { height: 36px; gap: 10px; padding: 0 10px 0 12px; border-radius: var(--mud-radius); font-size: var(--pf-fs-md); color: var(--mud-text); }
.mud-nav-item i { width: 18px; font-size: 13px; color: var(--mud-text-3); }
.mud-nav-item:hover { background: rgba(10,107,224,.06); }
.mud-nav-item.active { background: var(--mud-primary-tint); color: var(--mud-primary); font-weight: 600; box-shadow: inset 3px 0 0 var(--mud-primary); }
.mud-nav-item.active i { color: var(--mud-primary); }
.mud-drawer-footer { padding: 12px 16px; background: var(--mud-surface); }
.mud-nav-search .form-control { border-radius: 18px; background: var(--mud-surface); border: 1px solid var(--mud-divider); }

/* 본문·머리글 */
.mud-main { padding: 22px 28px 28px; background: var(--mud-bg); }
.mud-page-header { margin-bottom: 18px; gap: 6px 14px; }
.mud-page-header h5 { font-size: var(--pf-fs-xl); font-weight: 700; margin: 0; color: var(--mud-heading); letter-spacing: -.01em; }
.mud-page-header > span.text-muted { font-size: var(--pf-fs-md); color: var(--mud-text-2) !important; }

/* 카드·패널 */
.card { border: 1px solid var(--mud-divider); border-radius: var(--mud-radius-lg); box-shadow: var(--mud-el-1); }
.card:hover { box-shadow: var(--mud-el-1); }
.card .card-header { background: var(--mud-surface); border-bottom: 1px solid var(--mud-divider); padding: 12px 18px; border-radius: var(--mud-radius-lg) var(--mud-radius-lg) 0 0; font-size: var(--pf-fs-lg); font-weight: 600; color: var(--mud-heading); display: flex; align-items: center; gap: 8px; }
.card .card-header .small, .card .card-header .text-muted { font-weight: 400; }
.card .card-body { padding: 18px; }
.alert { border-radius: 10px; }

/* 버튼·입력 */
.btn { border-radius: var(--mud-radius); font-weight: 600; }
.btn-primary { box-shadow: none; }
.btn-primary:hover, .btn-primary:focus { box-shadow: 0 4px 12px rgba(10,107,224,.25); }
.btn-outline-primary { --bs-btn-border-color: rgba(10,107,224,.45); }
.btn-outline-secondary { --bs-btn-border-color: var(--mud-divider); --bs-btn-color: var(--mud-text); }
.btn-sm { min-height: 32px; padding: 4px 12px; border-radius: 7px; }
.form-control, .form-select { border-radius: var(--mud-radius); border-color: rgba(16,24,40,.16); }
.form-control:focus, .form-select:focus { border-color: var(--mud-primary); box-shadow: 0 0 0 3px var(--mud-primary-tint); }
.form-label { font-size: var(--pf-fs-sm); color: var(--mud-text-2); margin-bottom: 4px; }

/* 표 */
.table > thead th, .pf-tbl th { background: var(--mud-bg-gray); color: var(--mud-text-2); font-size: var(--pf-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--mud-divider); }
.table > tbody td { border-color: var(--mud-divider); }
.badge { border-radius: 6px; font-weight: 600; }

/* 빈 상태 — 공통 */
.pf-empty { gap: 8px; padding: 40px 20px; color: var(--mud-text-2); }
.pf-empty > i { width: 64px; height: 64px; border-radius: 50%; background: var(--mud-primary-tint); color: var(--mud-primary); opacity: 1; font-size: 26px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.pf-empty b, .pf-empty-title { color: var(--mud-heading); font-size: var(--pf-fs-lg); font-weight: 700; }
.pf-empty.sm > i { width: 44px; height: 44px; font-size: 18px; }
.pf-empty-steps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.pf-empty-steps > span { display: inline-flex; align-items: center; gap: 8px; background: var(--mud-surface); border: 1px solid var(--mud-divider); border-radius: 999px; padding: 6px 14px 6px 6px; font-size: var(--pf-fs-sm); color: var(--mud-text-2); }
.pf-empty-steps > span > em { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--mud-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.pf-empty-steps > span.done > em { background: var(--mud-success); }

/* 아이콘 버튼·드롭다운·토스트 */
.dropdown-menu, .pf-pj-menu, .pf-profile-menu { border-radius: var(--mud-radius-lg); border: 1px solid var(--mud-divider); box-shadow: var(--mud-el-8); }
.pf-pj-item.on { background: var(--mud-primary-tint); }

/* 2026.10.11 — 로그인·회원가입 카드(사용자: "어색"): 화면 세로 가운데, 로고·제목 가운데, 큰 입력·버튼 */
.pf-auth { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--mud-appbar-h) - 140px); padding: 16px 0; }
.pf-auth-card { width: 100%; max-width: 420px; box-shadow: var(--mud-el-8); border-radius: 16px; }
.pf-auth-card .card-body { padding: 32px 32px 26px; }
.pf-auth-head { text-align: center; margin-bottom: 22px; }
.pf-auth-head img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 6px 16px rgba(10,107,224,.18); margin-bottom: 12px; }
.pf-auth-head h4 { font-size: var(--pf-fs-xl); font-weight: 700; margin: 0 0 4px; }
.pf-auth-head .text-muted { font-size: var(--pf-fs-md); }
.pf-auth .form-control-lg { font-size: var(--pf-fs-md); padding: 10px 14px; }
.pf-auth .btn-lg { font-size: var(--pf-fs-md); padding: 10px 16px; margin-top: 4px; }
.pf-auth-foot { text-align: center; margin-top: 18px; font-size: var(--pf-fs-sm); color: var(--mud-text-2); }
.pf-auth-foot .sep { display: inline-block; width: 1px; height: 12px; background: var(--mud-divider); margin: 0 10px; vertical-align: middle; }
@media (max-width: 480px) { .pf-auth-card .card-body { padding: 24px 20px; } }

/* 2026.10.12 — 왼쪽 목록 틀(Component/ListPane): 화면 높이 안에서만 스크롤(페이지가 늘어나지 않음). 사용자: "왼쪽 무한 스크롤", "공통으로 똑같은 거" */
.pf-listpane { display: flex; flex-direction: column; max-height: calc(100vh - 190px); min-height: 320px; }
.pf-listpane > .card-header { flex: 0 0 auto; }
.pf-listpane-search, .pf-listpane-top { flex: 0 0 auto; padding: 8px 12px 0; }
.pf-listpane-body { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* 2026.10.12 — OpenMES configuration 시각 언어(.sl-*): 화면 설정(/screens)·모바일(/mobile)·메뉴 관리(/menus) 공통. 원본 ScreenLayoutPage.vue 의 scoped CSS 를 옮김 */
    .sl-page { max-width: 1600px; }
    .sl-h5 { font-size: var(--pf-fs-xl); font-weight: 600; margin-bottom: 12px; }
    .sl-sub1 { font-size: var(--pf-fs-md); font-weight: 600; } .sl-sub2 { font-size: var(--pf-fs-md); font-weight: 600; } .sl-cap { font-size: var(--pf-fs-xs); color: var(--mud-text-2); } .sl-dim { color: var(--mud-text-3); }
    .sl-banner { background: #e3f2fd; color: #0d47a1; border-radius: var(--mud-radius); padding: 8px 14px; margin-bottom: 8px; font-size: var(--pf-fs-sm); line-height: 1.5; }
    .sl-banner.sm { padding: 6px 10px; font-size: var(--pf-fs-xs); }
    .sl-card { background: #fff; border: 1px solid #cfd8dc; border-radius: 4px; }
    .sl-spec { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 8px; background: #eceff1; }
    .sl-ico-green { color: #1b5e20; } .sl-btn-green { background: #1b5e20; color: #fff; } .sl-btn-indigo { background: #3f51b5; color: #fff; } .sl-btn-teal { background: #00796b; color: #fff; } .sl-btn-orange { background: #e65100; color: #fff; }
    .sl-btn-outline-indigo { border: 1px solid #3f51b5; color: #3f51b5; background: #fff; }
    .sl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .sl-vsep { width: 1px; height: 28px; background: #cfd8dc; margin: 0 4px; }
    .sl-select { display: flex; flex-direction: column; gap: 2px; } .sl-select > label { font-size: 11px; color: var(--mud-text-2); }
    .sl-in { border: 1px solid #c2c7cf; border-radius: 4px; padding: 4px 8px; font-size: var(--pf-fs-sm); background: #fff; min-height: 30px; }
    .sl-hint { font-size: 11px; color: var(--mud-text-3); margin-top: 2px; }
    .sl-chip { display: inline-flex; align-items: center; font-size: 12px; padding: 3px 10px; border-radius: 14px; background: #eeeeee; color: #212121; }
    .sl-chip.green { background: #c8e6c9; } .sl-chip.orange { background: #ffe0b2; } .sl-chip.bluegrey { background: #cfd8dc; } .sl-chip.primary { background: var(--mud-primary); color: #fff; } .sl-chip.clickable { cursor: pointer; }
    .sl-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--pf-fs-sm); cursor: pointer; margin: 0; }
    .sl-round { width: 32px; height: 32px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .sl-canvas-card { overflow: hidden; }
    .sl-chkstrip { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-bottom: 1px solid #eceff1; }
    .sl-canvas-h { display: flex; align-items: center; padding: 8px 12px; background: #eceff1; }
    .sl-canvas-body { background: #e0e0e0; padding: 8px; }
    .sl-canvas { display: flex; gap: 8px; height: calc(100vh - 330px); min-height: 320px; align-items: stretch; }
    .sl-canvas:has(.chk-top) { flex-direction: column; }
    .sl-canvas-col.chk-top { order: -1; flex: 0 0 auto !important; max-width: 100%; } .sl-canvas-col.chk-top .sl-canvas-cell { flex: 0 0 auto; } .sl-canvas-col.chk-top .sl-dock { height: auto; }
    .sl-canvas-col.chk-top .sl-fields { flex-wrap: nowrap; overflow-x: auto; } .sl-canvas-col.chk-top .sl-fld { flex: 0 0 auto; width: auto !important; min-width: 170px; max-width: 260px; }
    .sl-canvas-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .sl-canvas-cell { flex: 1 1 0; min-height: 0; position: relative; display: flex; }
    .sl-dock { background: #fff; border: 1px solid #b0bec5; border-radius: 3px; width: 100%; height: 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
    .sl-dock.dragging { opacity: .5; outline: 2px dashed #1976d2; }
    .sl-dock-tab { background: #455a64; color: #fff; font-size: 13px; font-weight: 600; padding: 4px 8px; border-bottom: 1px solid #37474f; display: flex; align-items: center; gap: 4px; cursor: grab; }
    .sl-grip { opacity: .8; margin-right: 4px; }
    .sl-dock-title { background: transparent; border: none; outline: none; color: #fff; font-size: 13px; font-weight: 600; max-width: 240px; } .sl-dock-title::placeholder { color: #b0bec5; }
    .sl-badge { font-size: 10px; padding: 1px 6px; border-radius: 3px; color: #fff; margin-left: 4px; } .sl-badge.teal { background: #00897b; } .sl-badge.indigo { background: #3f51b5; }
    .sl-pin { color: #ffe082; font-size: 12px; margin-left: 4px; }
    .sl-tabbtn { background: transparent; border: 0; color: #fff; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; } .sl-tabbtn:hover { background: rgba(255,255,255,.15); }
    .sl-dispmenu { position: absolute; right: 6px; top: 30px; z-index: 6; background: #fff; border: 1px solid #cfd8dc; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.15); padding: 12px; min-width: 260px; max-width: 320px; }
    .sl-dispmenu hr { margin: 8px 0; }
    .sl-dock-body { padding: 10px 12px; overflow: auto; flex: 1; min-height: 0; }
    .sl-dock-add { flex: 1 1 0; min-width: 0; border: 2px dashed #90a4ae; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #607d8b; font-size: 16px; cursor: pointer; background: #fafafa; }
    .sl-dock-add:hover { border-color: #1976d2; color: #1976d2; background: #f0f7ff; }
    .sl-dropzones { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
    .sl-dz { position: absolute; pointer-events: auto; } .sl-dz.on { background: rgba(25,118,210,.3); border: 2px solid #1976d2; }
    .sl-dz-top { top: 0; left: 0; right: 0; height: 33%; } .sl-dz-bottom { bottom: 0; left: 0; right: 0; height: 33%; } .sl-dz-left { top: 33%; bottom: 33%; left: 0; width: 50%; } .sl-dz-right { top: 33%; bottom: 33%; right: 0; width: 50%; }
    .sl-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
    .sl-link { background: none; border: 0; padding: 2px 4px; font-size: var(--pf-fs-sm); cursor: pointer; } .sl-link.teal { color: #00796b; } .sl-link.indigo { color: #3f51b5; } .sl-link.primary { color: var(--mud-primary); } .sl-link.grey { color: #616161; }
    .sl-secbtns { display: flex; gap: 6px; padding: 2px 0; margin-bottom: 4px; }
    .sb-btn { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 6px; border: 1px solid transparent; color: #5b6675; cursor: pointer; }
    .sb-bom_pick { background: #1b6ec2; color: #fff; font-weight: 600; } .sb-strategy_pull { background: #2e9e5b; color: #fff; font-weight: 600; } .sb-eng_ref { background: #6f42c1; color: #fff; font-weight: 600; } .sb-scenario { color: #6f42c1; border-color: #e0d8f0; }
    .tb-preview { display: flex; align-items: center; padding: 2px 0; margin-bottom: 4px; }
    .tb-btn { display: inline-flex; align-items: center; font-size: 12px; padding: 2px 8px; margin-right: 6px; border-radius: 4px; cursor: pointer; user-select: none; position: relative; } .tb-btn:hover { background: #f1f5f9; }
    .tb-add { color: #2e7d32; } .tb-del { color: #c62828; } .tb-fix { color: #1565c0; }
    .tb-search { display: inline-flex; align-items: center; font-size: 12px; border: 1px solid #cfd8dc; border-radius: 4px; padding: 2px 8px; min-width: 160px; background: #fff; color: #9e9e9e; margin-left: auto; }
    .tb-menu { position: absolute; left: 0; top: 100%; z-index: 7; background: #fff; border: 1px solid #cfd8dc; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.15); min-width: 170px; padding: 4px 0; }
    .tb-menu-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px; color: #212121; cursor: pointer; white-space: nowrap; } .tb-menu-item:hover { background: #f1f5f9; } .tb-menu-item.dim { color: #757575; cursor: default; } .tb-menu-item .auto { margin-left: auto; font-size: 10px; border: 1px solid #9e9e9e; color: #757575; border-radius: 3px; padding: 0 4px; }
    .cond-preview { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; padding: 2px 4px; border: 1px dashed #c5cae9; border-radius: 4px; background: #f7f8fc; margin-bottom: 4px; }
    .cond-preview .sl-in { min-height: 26px; padding: 2px 6px; font-size: 12px; background: #fafafa; }
    .dock-grid { width: 100%; border-collapse: collapse; font-size: 12px; } .dock-grid th, .dock-grid td { border: 1px solid #e0e0e0; padding: 4px 8px; text-align: left; white-space: nowrap; } .dock-grid thead tr { background: #eeeeee; } .dock-grid th { font-weight: 600; }
    .tb-rownum { width: 22px; font-size: 11px; text-align: center !important; } .tb-check { width: 26px; text-align: center !important; }
    .dock-grid th.col-drag { cursor: grab; user-select: none; } .dock-grid th.col-drag:hover { background: #eef4fb; } .dock-grid th.col-drag-on { opacity: .4; } .dock-grid th.col-drop { box-shadow: inset 3px 0 0 #1976d2; background: #e3f2fd; }
    .cfg-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; font-size: 11px; font-weight: 600; }
    .grp-sep { display: flex; align-items: center; gap: 4px; margin: 6px 0; } .grp-sep .line { flex: 1; border-top: 1px dashed #cfd8dc; }
    .sl-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
    .sl-fld { width: calc(50% - 4px); position: relative; cursor: grab; } .sl-fld.full { width: 100%; } .sl-fld.drag-on { opacity: .4; } .sl-fld.drop > .sl-fld-in { box-shadow: -3px 0 0 #1976d2; border-radius: 4px; }
    .sl-fld-in { position: relative; } .sl-fld-in .sl-pv { pointer-events: none; }
    .sl-pv { display: flex; flex-direction: column; gap: 2px; } .sl-pv label { font-size: 11px; color: #616161; } .sl-pv .sl-in { background: #fff; } .sl-pv textarea.sl-in { resize: none; }
    .sl-pv-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; min-height: 30px; } .sl-pv-toggle .knob { width: 34px; height: 18px; border-radius: 9px; background: var(--mud-primary); position: relative; } .sl-pv-toggle .knob::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
    .sl-fld-edit { position: absolute; top: -9px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid #ddd; color: #424242; font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
    .spacer-box { border: 1px dashed #bdbdbd; border-radius: 4px; background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f0f0f0 6px, #f0f0f0 12px); color: #9e9e9e; font-size: 11px; text-align: center; padding: 14px 4px; }
    .sl-fld-tail { width: calc(50% - 4px); display: flex; align-items: center; justify-content: center; gap: 6px; }
    .sl-ctx-bg { position: fixed; inset: 0; z-index: 1500; }
    .sl-ctx { position: fixed; z-index: 1501; background: #fff; border: 1px solid #cfd8dc; border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.18); min-width: 160px; padding: 4px 0; }
    .sl-ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 6px 12px; font-size: 13px; color: #212121; cursor: pointer; } .sl-ctx-item:hover:not(:disabled) { background: #f1f5f9; } .sl-ctx-item:disabled { color: #bdbdbd; cursor: default; } .sl-ctx-item.danger { color: #c62828; } .sl-ctx-item i { width: 16px; text-align: center; }
    .sl-ctx-sep { border-top: 1px solid #eeeeee; margin: 4px 0; }
    .sl-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1400; display: flex; align-items: center; justify-content: center; }
    .sl-modal { background: #fff; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.3); max-height: 94vh; display: flex; flex-direction: column; }
    .sl-modal-h { display: flex; align-items: center; padding: 8px 14px; background: #eeeeee; } .sl-modal-h.indigo { background: #e8eaf6; color: #283593; } .sl-modal-h.plain { background: #fff; padding-bottom: 0; }
    .sl-modal-b { padding: 14px; overflow: auto; } .sl-gut > * + * { margin-top: 8px; }
    .sl-modal-f { display: flex; align-items: center; gap: 6px; padding: 8px 12px; justify-content: flex-end; } .sl-modal-f.grey { background: #fafafa; }
    .sl-x { background: none; border: 0; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; } .sl-x:hover { background: rgba(0,0,0,.06); }
    .sl-list { border: 1px solid #e0e0e0; border-radius: 4px; } .sl-list-item { display: flex; gap: 6px; align-items: flex-end; padding: 6px 8px; border-bottom: 1px solid #eeeeee; } .sl-list-item:last-child { border-bottom: 0; }
    .sl-iconbtn { background: none; border: 0; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: #616161; } .sl-iconbtn.danger { color: #c62828; } .sl-iconbtn:hover { background: rgba(0,0,0,.06); }
    .sl-exp { border: 1px solid #e0e0e0; border-radius: 4px; } .sl-exp-h { padding: 6px 10px; font-weight: 600; font-size: var(--pf-fs-sm); } .sl-exp-b { padding: 8px; background: #e3f2fd; border-radius: 0 0 4px 4px; display: flex; flex-direction: column; gap: 6px; }
    .sl-segs { display: flex; } .sl-segs button { flex: 1; border: 1px solid var(--mud-primary); background: #fff; color: var(--mud-primary); padding: 4px 8px; font-size: 12px; } .sl-segs button.on { background: var(--mud-primary); color: #fff; } .sl-segs button:first-child { border-radius: 4px 0 0 4px; } .sl-segs button:last-child { border-radius: 0 4px 4px 0; }
    .sl-tbl { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; } .sl-tbl th, .sl-tbl td { border: 1px solid #e0e0e0; padding: 3px 6px; text-align: left; } .sl-tbl thead tr { background: #f5f5f5; } .sl-tbl .sl-in { min-height: 26px; padding: 2px 6px; width: 100%; border: 0; }
    .sl-type-editor { background: #fff; border-radius: 4px; padding: 8px; }

/* 2026.10.12 — 메뉴 관리(/menus)·모바일(/mobile) 추가 조각 */
    .sl-tabs { display: flex; gap: 2px; border-bottom: 1px solid #e0e0e0; margin-bottom: 8px; } .sl-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; color: #3949ab; font-size: var(--pf-fs-sm); cursor: pointer; } .sl-tabs button.on { border-bottom-color: #3949ab; font-weight: 600; }
    .sl-tbl tr.sel { background: #e8eaf6; } .sl-badge.grey { background: #9e9e9e; } .sl-badge.red { background: #c62828; }
    .sl-log { max-height: 200px; overflow: auto; background: #fff; }
    .sl-dock.auto { height: auto; margin-bottom: 8px; } .sl-dock-tab.static { cursor: default; }
    .mb-canvas { display: flex; gap: 10px; align-items: flex-start; }
    .mb-phone-col { flex: 0 0 300px; position: sticky; top: 8px; }
    .mb-phone { width: 300px; min-height: 560px; background: #fff; border: 10px solid #263238; border-radius: 28px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: flex; flex-direction: column; }
    .mb-phone-bar { background: #1565c0; color: #fff; padding: 8px 12px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
    .mb-phone-body { padding: 10px; font-size: 12px; flex: 1; overflow: auto; background: #f5f7fa; }
    .mb-screen-t { font-weight: 600; font-size: 13px; color: #37474f; margin-bottom: 6px; }
    .mb-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; } .mb-chip { font-size: 10px; padding: 1px 8px; border-radius: 10px; background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
    .mb-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; } .mb-card-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .mb-card-r { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #616161; margin: 2px 0; } .mb-val { color: #212121; } .mb-badge { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 3px; background: #fff3e0; color: #e65100; }
    .mb-btn { width: 100%; margin-top: 6px; border: 0; border-radius: 6px; background: #1565c0; color: #fff; padding: 6px; font-size: 12px; font-weight: 600; }
    .mb-hint { font-size: 11px; color: #757575; margin-top: 6px; }
    .mb-menu-g { font-size: 11px; color: #757575; margin: 8px 0 2px; text-transform: uppercase; } .mb-menu-i { display: flex; align-items: center; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; padding: 7px 10px; margin-bottom: 4px; cursor: pointer; } .mb-menu-i.fixed { cursor: default; color: #757575; } .mb-menu-i:hover { border-color: #1565c0; }
    .mb-panels { flex: 1 1 auto; min-width: 0; }
    .mb-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 4px; }
    .mb-group { border: 1px dashed #cfd8dc; border-radius: 4px; padding: 6px 8px; margin-bottom: 6px; background: #fafcff; }
    .mb-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 22px; border-radius: 4px; cursor: pointer; } .mb-item:hover { background: #f1f5f9; } .mb-item.active { background: #e3f2fd; }

/* ══ 2026.10.12 가독성 정리 — 사용자: "UI 굉장히 산만", "전체적으로 화면이 안 이쁘고 가독성이 많이 떨어짐" ══
   공통 규칙: ① 페이지 머리 = 제목 + 한 줄 설명(.pf-lead) + 오른쪽 버튼. 긴 설명은 접힌 도움말(.pf-help-d)로 내려 보낸다(색 배경 안내문 금지).
   ② code 는 분홍이 아니라 회색. 물리 이름(S_/T_/C_ 난수)은 본문에 안 쓰고 .pf-id(연한 작은 글씨)나 title 로만.
   ③ 목록 행의 삭제 버튼은 커서를 올렸을 때만 보이는 둥근 아이콘(.pf-row-x) — 행 높이 고정(갑자기 커지지 않음).
   ④ 편집 블록(.pf-sec)은 흰 바탕 + 왼쪽 색 테두리만. 배경색 칠하지 않는다. */
.pf-lead { color: var(--mud-text-2); font-size: var(--pf-fs-sm); }
.pf-help-d { margin: -6px 0 14px; font-size: var(--pf-fs-sm); color: var(--mud-text-2); }
.pf-help-d > summary { cursor: pointer; color: var(--mud-primary); list-style: none; display: inline-flex; align-items: center; gap: 6px; user-select: none; font-size: var(--pf-fs-sm); }
.pf-help-d > summary::-webkit-details-marker { display: none; }
.pf-help-d[open] > summary { margin-bottom: 8px; }
.pf-help-d > div { background: var(--mud-bg-gray); border-radius: var(--mud-radius); padding: 12px 16px; line-height: 1.7; max-width: 980px; }
.pf-help-d > div p { margin: 0 0 6px; } .pf-help-d > div p:last-child { margin-bottom: 0; }
.pf-help-d > div b { color: var(--mud-text); }
code { background: var(--mud-bg-gray); color: var(--mud-text-2); padding: 1px 5px; border-radius: 4px; font-size: var(--pf-fs-xs); }
.pf-id { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: var(--mud-text-3); }
.pf-row-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--mud-text-3); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; opacity: 0; transition: opacity .12s; }
.pf-row-x:hover { background: rgba(211,47,47,.1); color: #c62828; }
.pf-row:hover .pf-row-x, .pf-row.active .pf-row-x, .pf-row-x:focus { opacity: 1; }
.pf-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; min-height: 40px; cursor: pointer; border-radius: var(--mud-radius); }
.pf-row:hover { background: var(--mud-bg-gray); } .pf-row.active { background: var(--mud-primary-tint); }
.pf-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-row .s { font-size: var(--pf-fs-xs); color: var(--mud-text-3); }
.pf-row .badge { background: var(--mud-bg-gray); color: var(--mud-text-2); }
.pf-row.list { border-radius: 0; border-bottom: 1px solid var(--mud-divider); padding: 8px 10px 8px 14px; }
.pf-sec { border: 1px solid var(--mud-divider); border-left: 3px solid var(--mud-text-3); border-radius: var(--mud-radius); padding: 10px 12px; margin-bottom: 8px; background: var(--mud-surface); }
.pf-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pf-sec-h .ttl { font-weight: 600; font-size: var(--pf-fs-sm); }
.pf-sec-tools { display: inline-flex; gap: 2px; margin-left: auto; }
.pf-ibtn { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--mud-text-3); display: inline-flex; align-items: center; justify-content: center; font-size: var(--pf-fs-xs); }
.pf-ibtn:hover:not(:disabled) { background: rgba(0,0,0,.06); color: var(--mud-text); } .pf-ibtn.danger:hover { background: rgba(211,47,47,.1); color: #c62828; } .pf-ibtn:disabled { opacity: .3; }
.pf-kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 10px; align-items: center; font-size: var(--pf-fs-sm); } .pf-kv > span { color: var(--mud-text-2); }
.pf-kv .form-control, .pf-kv .form-select { font-size: var(--pf-fs-sm); }
.pf-sub { border-left: 2px dashed var(--mud-divider); margin: 6px 0 4px 10px; padding: 6px 0 2px 10px; }
.pf-sub-h { font-size: var(--pf-fs-xs); font-weight: 600; margin-bottom: 4px; }
.pf-adv { margin-top: 6px; font-size: var(--pf-fs-sm); } .pf-adv > summary { cursor: pointer; color: var(--mud-text-3); font-size: var(--pf-fs-xs); list-style: none; display: inline-flex; gap: 4px; align-items: center; } .pf-adv > summary::-webkit-details-marker { display: none; } .pf-adv > summary::before { content: "▸"; } .pf-adv[open] > summary::before { content: "▾"; }
.pf-line { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.pf-line .form-control, .pf-line .form-select { font-size: var(--pf-fs-sm); min-height: 30px; padding: 3px 8px; } .pf-line .arrow { color: var(--mud-text-3); }
.pf-tbl-plain { width: 100%; font-size: var(--pf-fs-sm); border-collapse: collapse; }
.pf-tbl-plain th { font-weight: 600; color: var(--mud-text-2); font-size: var(--pf-fs-xs); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--mud-divider); background: transparent; text-transform: none; letter-spacing: 0; }
.pf-tbl-plain td { padding: 7px 10px; border-bottom: 1px solid var(--mud-divider); vertical-align: middle; }
.pf-tbl-plain tr:hover td { background: var(--mud-bg-gray); }
.pf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mud-text-3); margin-right: 6px; vertical-align: middle; } .pf-dot.on { background: var(--mud-success); }
.pf-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--pf-fs-xs); padding: 2px 9px; border-radius: 12px; background: var(--mud-bg-gray); color: var(--mud-text-2); border: 1px solid var(--mud-divider); } .pf-chip.main { background: var(--mud-primary-tint); color: var(--mud-primary); border-color: transparent; }

/* ══ 2026.10.12 대시보드 실시간 미리보기(Component/DashPreview) — OpenMES 런타임 DashboardHost.razor 의 CSS 를 그대로(클래스 dh-*) ══ */
.dh-wrap { display:flex; flex-direction:column; height:100%; min-height:0; font-size:13px; padding:8px; gap:8px; background:#f4f6f9; box-sizing:border-box; }
.dh-head { display:flex; align-items:center; gap:10px; flex:0 0 auto; flex-wrap:wrap; }
.dh-head .t { font-size:16px; font-weight:700; color:#223; }
.dh-head .sub { color:#667; font-size:12px; }
.dh-head .brand { color:#1f3a5f; font-weight:600; }
.dh-head .meta { color:#556; font-size:12px; display:flex; gap:10px; align-items:center; }
.dh-head .meta .clk { font-variant-numeric:tabular-nums; font-weight:600; color:#223; }
.dh-head .sp { margin-left:auto; display:flex; align-items:center; gap:6px; }
.dh-cond { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; background:#fff; border:1px solid #d9dee5; border-radius:6px; padding:6px 10px; flex:0 0 auto; }
.dh-cond label { color:#556; font-size:12px; margin-right:2px; }
.dh-cond select, .dh-cond input { font-size:12px; padding:2px 6px; border:1px solid #c9d0d8; border-radius:3px; background:#fff; height:26px; }
.dh-box > .dh-cond { border:0; border-bottom:1px solid #e6eaef; border-radius:0; background:#f8fafc; }
.dh-row { display:grid; gap:8px; min-height:0; }
.dh-box { background:#fff; border:1px solid #d9dee5; border-radius:6px; display:flex; flex-direction:column; min-height:0; min-width:0; }
.dh-box > .cap { padding:6px 10px; border-bottom:1px solid #e6eaef; font-weight:700; color:#333; display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.dh-box > .cap .cnt { margin-left:auto; font-weight:400; color:#778; font-size:12px; }
.dh-box > .cap .act { border:1px solid #c9d0d8; background:#1e8e5a; color:#fff; border-radius:3px; padding:1px 10px; font-size:12px; font-weight:500; }
.dh-box > .body { overflow:auto; min-height:0; flex:1 1 auto; }
.dh-box > .body.pad { padding:8px 10px; }
.dh-empty { padding:20px; color:#889; text-align:center; }
.dh-pager { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:4px 10px; color:#555; border-top:1px solid #e6eaef; flex:0 0 auto; font-size:12px; }
.dh-pager button { border:1px solid #c9d0d8; background:#fff; border-radius:3px; padding:0 8px; line-height:20px; }
/* KPI */
.dh-kpi { border:1px solid #d9dee5; border-radius:6px; background:#fff; padding:8px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.dh-kpi.click { cursor:pointer; } .dh-kpi.click:hover { background:#f7fbff; }
.dh-kpi.on { border-color:#1565c0; box-shadow:inset 0 0 0 1px #1565c0; }
.dh-kpi .k { font-size:12px; color:#556; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dh-kpi .v { font-size:28px; font-weight:800; line-height:1.1; color:#223; font-variant-numeric:tabular-nums; }
.dh-kpi .v.red { color:#d93025; } .dh-kpi .v.green { color:#2e7d32; } .dh-kpi .v.blue { color:#1565c0; } .dh-kpi .v.amber { color:#e08a00; }
.dh-kpi .s { font-size:11px; color:#889; }
/* 카드 보드 */
.dh-board { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows:1fr; gap:8px; align-content:start; padding:8px; }
.dh-card { background:#fff; border:1px solid #d9dee5; border-left:5px solid #90a4ae; border-radius:6px; padding:8px 10px; display:flex; flex-direction:column; gap:6px; cursor:pointer; min-width:0; overflow:hidden; }
.dh-board .dh-card:hover { background:#f7fbff; }
.dh-err { color:#e08a00; font-size:13px; margin-left:2px; cursor:help; }
/* 카드 상세 모달 */
.dh-modal-bg { position:fixed; inset:0; background:rgba(15,23,32,.45); z-index:1060; display:flex; align-items:center; justify-content:center; outline:none; }
.dh-modal { background:#fff; border-radius:8px; width:min(900px, 94vw); max-height:88vh; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.35); font-size:13px; }
.dh-modal .mh { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #e6eaef; }
.dh-modal .mh .mt { font-weight:700; color:#223; font-size:15px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-modal .mh .mx { border:0; background:transparent; font-size:20px; color:#667; line-height:1; padding:0 4px; } .dh-modal .mh .mx:hover { color:#223; }
.dh-modal .mb { overflow:auto; min-height:0; cursor:default; border-radius:0 0 8px 8px; padding:12px 14px; gap:8px; }
.dh-modal .mb .dh-detail table { width:100%; }
.dh-wrap.tv .dh-modal { background:#16202b; color:#e6edf3; } .dh-wrap.tv .dh-modal .mh { border-color:#2b3947; } .dh-wrap.tv .dh-modal .mh .mt { color:#e6edf3; }
.dh-card.blue { border-left-color:#1565c0; } .dh-card.red { border-left-color:#d93025; box-shadow:0 0 0 1px #f3b7b2 inset; } .dh-card.green { border-left-color:#2e7d32; opacity:.9; } .dh-card.amber { border-left-color:#e08a00; } .dh-card.grey { border-left-color:#90a4ae; }
.dh-card .r1 { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.dh-card .no { font-weight:700; color:#223; }
.dh-card .item { font-weight:600; color:#334; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-card .r2 { display:flex; align-items:center; gap:8px; color:#445; flex-wrap:wrap; }
.dh-card .r2 .cur { font-weight:700; color:#0b57d0; }
.dh-card .r3 { display:flex; gap:10px; color:#556; font-size:12px; flex-wrap:wrap; }
.dh-card .r3 b { color:#223; font-variant-numeric:tabular-nums; }
.dh-badge { font-size:11px; padding:1px 7px; border-radius:9px; background:#eef2f7; color:#334; white-space:nowrap; }
.dh-badge.red { background:#fdecea; color:#b3261e; } .dh-badge.blue { background:#e3f0fc; color:#0b57d0; } .dh-badge.green { background:#e6f4ea; color:#1e6b2f; } .dh-badge.amber { background:#fff3e0; color:#9a5b00; } .dh-badge.grey { background:#eceff1; color:#546e7a; }
.dh-bar { height:8px; background:#e6eaef; border-radius:4px; overflow:hidden; }
.dh-bar .f { height:100%; background:#1565c0; } .dh-card.red .dh-bar .f { background:#d93025; } .dh-card.green .dh-bar .f { background:#2e7d32; }
.dh-steps { display:flex; gap:3px; flex-wrap:wrap; }
.dh-step { font-size:11px; padding:2px 6px; border-radius:3px; background:#eceff1; color:#546e7a; border:1px solid transparent; }
.dh-step.green { background:#e6f4ea; color:#1e6b2f; } .dh-step.blue { background:#e3f0fc; color:#0b57d0; } .dh-step.amber { background:#fff8e1; color:#8d6e00; } .dh-step.red { background:#fdecea; color:#b3261e; }
.dh-step.cur { border-color:#90caf9; font-weight:700; box-shadow:0 0 0 1px #90caf9 inset; }
.dh-detail { border-top:1px dashed #d9dee5; padding-top:6px; font-size:12px; overflow:auto; }
.foot { color:#889; font-size:11px; margin-top:4px; }
/* 테이블 */
.dh-table { width:100%; border-collapse:collapse; }
.dh-table th { background:#eef2f7; border-bottom:2px solid #c9d0d8; padding:5px 8px; text-align:left; font-weight:600; color:#334; position:sticky; top:0; z-index:1; white-space:nowrap; }
.dh-table td { border-bottom:1px solid #e6eaef; padding:5px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; }
.dh-table td.num, .dh-table th.num { text-align:right; font-variant-numeric:tabular-nums; } .dh-table td.ctr, .dh-table th.ctr { text-align:center; }
.dh-table tr.dh-row-red td { background:#fde8e8; } .dh-table tr.dh-row-amber td { background:#fff8e1; } .dh-table tr.dh-row-green td { background:#eaf6ee; } .dh-table tr.dh-row-blue td { background:#e8f2fd; }
.dh-rank { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; border-radius:50%; background:#eef2f7; font-weight:700; color:#1f3a5f; }
.dh-rank.top { background:#d93025; color:#fff; }
.dh-cellbar { display:flex; align-items:center; gap:6px; } .dh-cellbar > div { height:14px; border-radius:2px; background:#2f6fd1; } .dh-cellbar.top > div { background:#d93025; } .dh-cellbar span { font-weight:600; color:#333; }
/* 피드 · 알림 */
.dh-ev { display:flex; gap:8px; padding:4px 10px; border-bottom:1px solid #f0f2f5; font-size:12px; align-items:center; }
.dh-ev .tm { color:#889; font-variant-numeric:tabular-nums; width:84px; white-space:nowrap; flex:0 0 auto; } .dh-ev .dt { color:#556; flex:0 0 auto; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dh-ev .id { font-weight:600; color:#223; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dh-alert { display:flex; gap:8px; padding:6px 10px; border-bottom:1px solid #f0f2f5; align-items:flex-start; }
.dh-alert i { margin-top:2px; }
.dh-alert.red i { color:#d93025; } .dh-alert.amber i { color:#e08a00; } .dh-alert.blue i { color:#1565c0; } .dh-alert.green i { color:#2e7d32; }
.dh-alert .m { flex:1; min-width:0; } .dh-alert .m .h { font-weight:600; color:#223; } .dh-alert .m .d { color:#667; font-size:12px; }
/* 탭 */
.dh-tabs { display:flex; gap:6px; padding:6px 10px; border-bottom:1px solid #e6eaef; flex:0 0 auto; }
.dh-tabs button { border:1px solid #c9d0d8; background:#fff; border-radius:3px; padding:2px 12px; font-size:12px; }
.dh-tabs button.on { background:#1f3a5f; color:#fff; border-color:#1f3a5f; }
.dh-tabbody { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.dh-tabbody > .dh-box { border:0; border-radius:0; flex:1 1 auto; }
/* 간트 */
.gt-table { border-collapse:separate; border-spacing:0; table-layout:fixed; }
.gt-table th, .gt-table td { border-right:1px solid #e6eaef; border-bottom:1px solid #e6eaef; padding:0 6px; height:34px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:#fff; }
.gt-table thead th { position:sticky; top:0; z-index:3; background:#f4f6f9; font-weight:600; color:#334; height:26px; }
.gt-table thead tr.m th { z-index:4; }
.gt-table .fixcol { position:sticky; z-index:2; } .gt-table thead .fixcol { z-index:5; }
.gt-table thead tr.m th.fixcol { z-index:6; }   /* 가로 스크롤 시 월 헤더(tr.m th, 특이성 높음)가 고정열 제목을 덮던 버그 픽스(2026-10-08) */
.gt-table tbody tr:hover td { background:#f7fbff; }
.gt-num { text-align:right; font-variant-numeric:tabular-nums; } .gt-ctr { text-align:center; }
.gt-day { padding:0 !important; text-align:center; font-size:11px; color:#666; } .gt-day.we { background:#f7f7f9; }
.gt-lane { position:relative; padding:0 !important; }
.gt-bar { position:absolute; top:9px; height:16px; border-radius:2px; background:#8fc0f0; }
.gt-bar .fill { position:absolute; left:0; top:0; bottom:0; border-radius:2px; background:#1565c0; }
.gt-bar.late .fill { background:#d93025; } .gt-bar.done .fill { background:#2e7d32; }
.gt-bar .lbl { position:absolute; left:100%; top:-1px; margin-left:6px; font-size:11px; color:#333; white-space:nowrap; }
.gt-today { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed #e06666; z-index:1; }
.gt-stage { display:inline-block; font-size:11px; padding:1px 6px; border-radius:8px; background:#eef2f7; color:#334; margin-left:4px; }
.gt-tg { display:inline-block; width:16px; color:#666; cursor:pointer; user-select:none; }
.gt-table tbody tr.child td { background:#fbfcfd; color:#445; }
.gt-table tbody tr.child td.fixcol:first-child { padding-left:22px; }
.gt-bar.child { height:12px; top:11px; background:#cfe3f7; } .gt-bar.child .fill { background:#3b82c4; } .gt-bar.child.done .fill { background:#2e7d32; }
/* TV 모드: 어두운 배경·큰 글씨 */
.dh-wrap.tv { background:#0f1720; color:#e6edf3; font-size:15px; }
.dh-wrap.tv .dh-head .t, .dh-wrap.tv .dh-head .sub, .dh-wrap.tv .dh-head .brand, .dh-wrap.tv .dh-head .meta, .dh-wrap.tv .dh-head .meta .clk { color:#e6edf3; }
.dh-wrap.tv .dh-kpi, .dh-wrap.tv .dh-card, .dh-wrap.tv .dh-box, .dh-wrap.tv .dh-cond { background:#16202b; border-color:#2b3947; }
.dh-wrap.tv .dh-kpi .k, .dh-wrap.tv .dh-box > .cap, .dh-wrap.tv .dh-card .no, .dh-wrap.tv .dh-card .item, .dh-wrap.tv .dh-card .r3 b, .dh-wrap.tv .dh-ev .id, .dh-wrap.tv .dh-table td, .dh-wrap.tv .dh-cellbar span, .dh-wrap.tv .dh-alert .m .h { color:#e6edf3; }
.dh-wrap.tv .dh-kpi .v { color:#fff; font-size:38px; }
.dh-wrap.tv .dh-card .r2, .dh-wrap.tv .dh-card .r3, .dh-wrap.tv .dh-ev .dt, .dh-wrap.tv .dh-ev .tm, .dh-wrap.tv .dh-alert .m .d, .dh-wrap.tv .dh-cond label { color:#aab8c5; }
.dh-wrap.tv .dh-board { grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); }
.dh-wrap.tv .dh-bar { background:#2b3947; }
.dh-wrap.tv .dh-step { background:#243140; color:#aab8c5; }
.dh-wrap.tv .dh-table th { background:#1c2733; color:#aab8c5; border-color:#2b3947; } .dh-wrap.tv .dh-table td { border-color:#2b3947; }
.dh-wrap.tv .dh-table tr.dh-row-red td { background:#3a1f1f; } .dh-wrap.tv .dh-table tr.dh-row-amber td { background:#3a3220; }
.dh-wrap.tv .gt-table th, .dh-wrap.tv .gt-table td { background:#16202b; color:#e6edf3; border-color:#2b3947; } .dh-wrap.tv .gt-table thead th { background:#1c2733; color:#aab8c5; }
.dh-wrap.tv .dh-empty { color:#788; }
.dh-wrap.tv .dh-tabs { border-color:#2b3947; } .dh-wrap.tv .dh-tabs button { background:#243140; color:#e6edf3; border-color:#2b3947; } .dh-wrap.tv .dh-tabs button.on { background:#4f8fdc; }
.dh-prev { border: 1px solid #d9dee5; border-radius: 0 0 6px 6px; overflow: auto; }
.dh-err { color: #d93025; font-size: 12px; }
.dh-warn { font-size: 11px; color: #e08a00; padding: 2px 6px; }
.dh-barrow { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 2px 0; } .dh-barrow .l { width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #556; } .dh-barrow .n { width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
.dh-bar { flex: 1; height: 12px; background: #eef2f7; border-radius: 3px; overflow: hidden; } .dh-bar > div { height: 100%; background: #5c6bc0; min-width: 2px; }
/* 행 편집 툴바(OpenMES ScreenLayoutPage .dash-tools 그대로) */
.dash-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 4px 8px; margin: -2px 0 2px; background: #eef2f7; border: 1px dashed #b0bec5; border-radius: 4px; font-size: 12px; color: #455a64; }
.dash-tools .ts-in { min-width: 0; } .dash-tools .ts-in > span { display: none; } .dash-tools .ts-in input { height: 24px; font-size: 12px; }
.dash-tools-lbl { font-weight: 600; color: #37474f; display: inline-flex; align-items: center; gap: 4px; }
.dash-tools-sep { width: 1px; height: 18px; background: #b0bec5; margin: 0 4px; }
.dash-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #b0bec5; border-radius: 12px; background: #fff; padding: 1px 4px 1px 8px; cursor: pointer; max-width: 280px; }
.dash-chip:hover, .dash-chip.on { border-color: #1976d2; background: #f0f7ff; }
.dash-chip-t { font-weight: 600; font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-chip button { border: 0; background: none; width: 20px; height: 20px; border-radius: 50%; color: #78909c; font-size: 10px; padding: 0; } .dash-chip button:hover:not(:disabled) { background: rgba(0,0,0,.06); } .dash-chip button:disabled { opacity: .3; } .dash-chip button.edit { color: #1976d2; } .dash-chip button.del { color: #c62828; }
.dash-h { min-width: 80px; font-size: 12px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 3px; padding: 1px 4px; } .dash-h option { color: #212121; }
.dash-prev-panel .ts-tab .btn-link { text-decoration: none; }
.text-indigo { color: #3f51b5; }

/* ══ 2026.10.12 화면 설정 재도장 — 사용자: "전체적으로 화면이 안 이쁘고 가독성이 떨어짐". 구성은 OpenMES 그대로, 색만 ProcessForge 테마(어두운 탭·원색 버튼 제거) ══ */
.sl-page { max-width: none; }
.sl-card { border-color: var(--mud-divider); border-radius: var(--mud-radius-lg); }
.sl-row { margin-bottom: 10px; }
.sl-in { border-color: rgba(16,24,40,.16); border-radius: var(--mud-radius); min-height: 32px; font-size: var(--pf-fs-sm); } .sl-in:focus { border-color: var(--mud-primary); outline: 0; box-shadow: 0 0 0 3px var(--mud-primary-tint); }
.sl-select > label { font-size: var(--pf-fs-xs); }
.sl-chip { background: var(--mud-bg-gray); color: var(--mud-text-2); } .sl-chip.green { background: #e6f4ea; color: #1e7e34; } .sl-chip.orange { background: #fff3e0; color: #e65100; } .sl-chip.bluegrey { background: #eceff1; color: #546e7a; }
.sl-canvas-h { background: var(--mud-surface); border-bottom: 1px solid var(--mud-divider); }
.sl-canvas-body { background: #eef1f4; }
.sl-dock { border-color: var(--mud-divider); border-radius: var(--mud-radius); }
.sl-dock-tab { background: #f1f3f5; color: var(--mud-heading); border-bottom: 1px solid var(--mud-divider); font-size: var(--pf-fs-sm); }
.sl-dock-title { color: var(--mud-heading); } .sl-dock-title::placeholder { color: var(--mud-text-3); }
.sl-tabbtn { color: var(--mud-text-2); } .sl-tabbtn:hover { background: rgba(0,0,0,.06); }
.sl-grip { color: var(--mud-text-3); } .sl-pin { color: #f59e0b; }
.sl-badge.teal { background: #e0f2f1; color: #00695c; } .sl-badge.indigo { background: #e8eaf6; color: #283593; } .sl-badge.grey { background: #eceff1; color: #546e7a; } .sl-badge.red { background: #fdecea; color: #c62828; }
.sl-dock-add { border-color: var(--mud-divider); color: var(--mud-text-3); background: var(--mud-surface); font-size: var(--pf-fs-md); }
.sl-type-editor { background: var(--mud-surface); border-radius: var(--mud-radius); }
.ts-tab { background: #f1f3f5; color: var(--mud-heading); } .ts-tab .text-white, .ts-tab .btn-link.text-white { color: var(--mud-primary) !important; } .ts-wd { border-color: var(--mud-primary); }
.dash-h { color: var(--mud-text); border-color: var(--mud-divider); } .dash-prev-panel .ts-tab .btn-link { color: var(--mud-primary); }
.sl-btn-green, .sl-btn-indigo, .sl-btn-teal, .sl-btn-orange { background: var(--mud-surface); color: var(--mud-text); border: 1px solid var(--mud-divider); }
.sl-modal { border-radius: var(--mud-radius-lg); } .sl-modal-h { background: var(--mud-surface); border-bottom: 1px solid var(--mud-divider); font-weight: 600; } .sl-modal-h.indigo { background: var(--mud-surface); color: var(--mud-heading); }
.sl-exp-b { background: var(--mud-bg-gray); }
.sl-tbl thead tr, .dock-grid thead tr { background: #f6f7f9; }
/* 도킹 드롭 영역: 왼쪽·오른쪽은 전체 높이 띠(너비 25%), 위·아래는 가운데 50% 폭 — 사용자: "위아래는 잘 나뉘는데 좌우 분할이 어려움" */
.sl-dz { display: flex; align-items: center; justify-content: center; background: rgba(25,118,210,.06); border: 1px dashed rgba(25,118,210,.35); }
.sl-dz > span { font-size: 12px; font-weight: 600; color: #1976d2; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 10px; pointer-events: none; }
.sl-dz.on { background: rgba(25,118,210,.28); border: 2px solid #1976d2; }
.sl-dz-left { top: 0; bottom: 0; left: 0; width: 25%; height: auto; } .sl-dz-right { top: 0; bottom: 0; right: 0; width: 25%; height: auto; }
.sl-dz-top { top: 0; left: 25%; right: 25%; height: 50%; } .sl-dz-bottom { bottom: 0; left: 25%; right: 25%; height: 50%; }
.pf-pre { font-size: var(--pf-fs-xs); background: var(--mud-bg-gray); padding: 8px 10px; border-radius: var(--mud-radius); white-space: pre-wrap; }

/* ══ 2026.10.13 사용자 지적 모음 — 폰트 제각각 · 머리 한 줄(제목 | 설명 | 툴바) · 토스트 대신 가운데 안내 · 스텝 컨트롤 · GridLookupEdit ══ */
button, input, select, textarea, .form-control, .form-select, .btn, .sl-in, .ts-in input, .ts-in select, .pf-xgrid input, .pf-xgrid select, .gl-input { font-family: inherit; }
.form-control, .form-select, .sl-in { font-size: var(--pf-fs-md); }
.form-control-sm, .form-select-sm, .sl-in, .input-group-sm > .form-control { font-size: var(--pf-fs-sm); }
::placeholder { color: var(--mud-text-3) !important; opacity: 1; font-family: inherit; }
/* 머리 = 제목 | 설명 | 툴바(맨 오른쪽) 한 줄. 설명은 남는 폭에서 줄임표 */
.mud-page-header { flex-wrap: nowrap; align-items: center; gap: 14px; }
.mud-page-header > h5 { margin: 0; white-space: nowrap; }
.mud-page-header > .pf-lead, .mud-page-header > span.text-muted { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mud-page-header > .ms-auto { flex: 0 0 auto; }
@media (max-width: 991.98px) { .mud-page-header { flex-wrap: wrap; } }
/* 토스트 → 화면 가운데 잠깐 떴다 사라지는 안내(제목 없음·닫기 없음·진행 막대 없음) */
.toast-container { position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%); align-items: center; pointer-events: none; }
.toast-container .toast { pointer-events: auto; border: 0; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); background: rgba(33,37,41,.92); color: #fff; min-width: 240px; max-width: 420px; text-align: center; animation: pfToastIn .18s ease-out; }
.toast-container .toast .toast-header { background: transparent; border: 0; color: #fff; justify-content: center; padding: 10px 14px 0; font-weight: 600; }
.toast-container .toast .toast-header .btn-close, .toast-container .toast .toast-progress { display: none !important; }
.toast-container .toast .toast-body { padding: 4px 14px 12px; color: rgba(255,255,255,.85); }
.toast-container .toast .toast-header:empty + .toast-body { padding-top: 12px; }
@keyframes pfToastIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
/* 스텝 컨트롤(Component/StepBar) */
.pf-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.pf-steps > button { flex: 1; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 6px; border-bottom: 3px solid var(--mud-divider); color: var(--mud-text-3); font-size: var(--pf-fs-sm); text-align: left; cursor: pointer; }
.pf-steps > button > em { font-style: normal; width: 22px; height: 22px; border-radius: 50%; background: var(--mud-bg-gray); color: var(--mud-text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.pf-steps > button.cur { color: var(--mud-primary); border-color: var(--mud-primary); font-weight: 600; } .pf-steps > button.cur > em { background: var(--mud-primary); color: #fff; }
.pf-steps > button.done { color: var(--mud-success); border-color: var(--mud-success); } .pf-steps > button.done > em { background: var(--mud-success); color: #fff; }
.pf-steps > button:disabled { cursor: default; }
.pf-step-foot { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
/* GridLookupEdit(OpenMES 원본 CSS 그대로 + 표) */
.omes-gridlookup { width: 100%; }
.omes-gridlookup .gl-box { position: relative; display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 32px; padding: 0 .6rem; font-size: var(--pf-fs-sm); background: var(--mud-surface); border: 1px solid rgba(16,24,40,.16); border-radius: var(--mud-radius); cursor: pointer; overflow: hidden; }
.omes-gridlookup .gl-box.disabled { background: var(--mud-bg-gray); cursor: default; }
.omes-gridlookup .gl-box:focus-within { border-color: var(--mud-primary); box-shadow: 0 0 0 3px var(--mud-primary-tint); }
.omes-gridlookup .gl-input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; padding: 4px 0; font-size: inherit; font-weight: 400; line-height: 1.5; color: var(--mud-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.omes-gridlookup .gl-input::placeholder { color: var(--mud-text-3); }
.omes-gridlookup .gl-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; background: var(--mud-surface); padding: 0 1px; color: #8a95a3; font-size: .68rem; cursor: pointer; opacity: 0; transition: opacity .12s; }
.omes-gridlookup .gl-clear { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; background: var(--mud-surface); padding: 0 1px; color: #c4cad3; font-size: .7rem; cursor: pointer; opacity: 0; transition: opacity .12s; }
.omes-gridlookup .gl-box:hover .gl-caret, .omes-gridlookup .gl-box:focus-within .gl-caret { opacity: 1; } .omes-gridlookup .gl-box:hover .gl-clear { opacity: 1; } .omes-gridlookup .gl-clear:hover { color: #ef4444; }
.gl-pop { background: var(--mud-surface); border: 1px solid var(--mud-divider); border-radius: var(--mud-radius); }
.gl-table { width: 100% !important; table-layout: auto !important; border-collapse: collapse; font-size: var(--pf-fs-sm); }
.gl-table th { position: sticky; top: 0; background: #f6f7f9; color: var(--mud-text-2); font-weight: 600; font-size: var(--pf-fs-xs); padding: 5px 10px; border-bottom: 1px solid var(--mud-divider); text-align: left; white-space: nowrap; }
.gl-table td { padding: 5px 10px; border-bottom: 1px solid #f0f2f5; white-space: nowrap; cursor: pointer; } .gl-table td:first-child { color: var(--mud-text-2); font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.gl-table th:last-child, .gl-table td:last-child { width: 100%; }
.gl-table tr:hover td { background: #f1f5f9; } tr.gl-active > td { background: #cfe8ff !important; } tr.gl-cur > td { font-weight: 600; }
/* 사이드 패널(앱바 도움말) */
.pf-side { position: fixed; top: var(--mud-appbar-h); right: 0; bottom: 0; width: 420px; max-width: 94vw; background: var(--mud-surface); box-shadow: -8px 0 30px rgba(0,0,0,.15); z-index: 1200; display: flex; flex-direction: column; animation: pfSideIn .18s ease-out; }
@keyframes pfSideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.pf-side-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--mud-divider); font-weight: 600; font-size: var(--pf-fs-lg); }
.pf-side-b { padding: 14px 18px; overflow: auto; flex: 1; font-size: var(--pf-fs-sm); line-height: 1.75; color: var(--mud-text); }
.pf-side-b h6 { font-weight: 700; margin: 14px 0 6px; font-size: var(--pf-fs-md); } .pf-side-b p { margin: 0 0 8px; } .pf-side-b b { color: var(--mud-heading); }
.pf-side-list { display: flex; flex-direction: column; gap: 2px; } .pf-side-list button { text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: var(--mud-radius); color: var(--mud-text); } .pf-side-list button:hover { background: var(--mud-bg-gray); } .pf-side-list button.cur { background: var(--mud-primary-tint); color: var(--mud-primary); }
.pf-side-bg { position: fixed; inset: 0; z-index: 1199; }
.pf-help-d { display: none; }

/* ══ 2026.10.13 NormalGrid 스킨 — OpenMES AstralMES.UI.Component/Component/DataGrid/NormalGrid.razor 의 <style> 그대로(사용자: "openmes 에서 normal grid 도 가져오셈"). 래퍼 = Component/NormalGrid.razor ══ */
    .xlcell { outline: none; min-height: 1.5rem; }
    .xlcell:focus { box-shadow: inset 0 0 0 2px #2684ff; border-radius: 2px; }
    .xlsel { background: rgba(38,132,255,.15); }

    /* ── 모던 그리드 스킨 (.omes-grid 로 스코프 — 앱의 다른 BB 테이블엔 영향 없음) ──
       ⚠ Bootstrap 은 셀 배경을 box-shadow inset 오버레이(var(--bs-table-accent-bg))로 칠해
          background-color 를 덮음. 오버레이를 끄고(box-shadow:none) 우리가 직접 배경을 지정. */
    .omes-grid .table { border-collapse: separate; border-spacing: 0; border: 0; border-radius: 0; font-size: 12.5px; }
    /* 빈 그리드도 전체 높이 프레임: 프레임 테두리를 '스크롤 카드'에 두고 카드가 남은 높이를 채운다.
       (내부 table 은 비면 헤더 높이로 줄어들어 테두리가 헤더만 감싸므로 → 카드로 이관) */
    .omes-grid .table-container { display: flex; flex-direction: column; min-height: 0; }
    .omes-grid .table-card,
    .omes-grid .table-fixed-body { flex: 1 1 auto; min-height: 160px; border: 1px solid #d5dbe3; background: #fff; }
    /* 빈 그리드도 본문 영역이 접히지 않게 최소 높이(안전 — 높이 체인 안 건드림) */
    .omes-grid .table-fixed-body { min-height: 160px; background: #fff; }
    /* 검색창은 목업대로 라운드 유지(bootstrap 기본) */
    .omes-grid .table > :not(caption) > * > * { box-shadow: none !important; background-color: transparent; }

    /* 셀 격자선 — 모든 셀에 또렷한(그러나 연한) 회색 가로·세로선 → 엑셀식 완전 격자 */
    .omes-grid .table > thead > tr > th {
        background-color: #f6f8fa !important; color: #5b6675; font-weight: 600; font-size: 12px;
        border: 0; border-bottom: 1px solid #d5dbe3 !important; border-right: 1px solid #dde3ea !important;
        white-space: nowrap; vertical-align: middle;
    }
    .omes-grid .table > tbody > tr > td {
        background-color: #fff; border: 0; border-bottom: 1px solid #e5e9ef !important;
        border-right: 1px solid #e5e9ef !important; color: #1f2733; vertical-align: middle;
    }
    /* 마지막 열도 우측 경계선 유지(그리드 끝 표시) — 마지막 컬럼이 폭을 채우므로 경계가 필요. */
    .omes-grid .table > thead > tr > th:last-child { border-right: 1px solid #dde3ea !important; }
    .omes-grid .table > tbody > tr > td:last-child { border-right: 1px solid #e5e9ef !important; }
    .omes-grid .table > tbody > tr:hover > td { background-color: #f2f8fd; }

    /* 선택(포커스) 행 — 연한 하늘색 + 좌측 강조바(그라디언트, box-shadow 대체) */
    .omes-grid .table > tbody > tr.selected > td { background-color: var(--selected-row-bg) !important; color: var(--selected-row-fg) !important; }
    .omes-grid .table > tbody > tr.selected > td:first-child {
        background-image: linear-gradient(to right, var(--selected-row-accent) 0 3px, transparent 3px) !important;
    }

    /* 컬럼 리사이즈(자체 구현) — 헤더 우측 경계 드래그 / 더블클릭=내용맞춤. openmesColResize(excelgrid.js) 가 핸들 주입·폭관리. */
    .omes-grid .table > thead > tr > th { position: relative; }
    .omes-grid .omes-rz { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 6; }
    .omes-grid .omes-rz:hover { background: rgba(59,130,246,.30); }
    /* filler(여백) — 남는 폭까지 헤더/행 스타일 이어짐. 단 '가짜 컬럼'처럼 안 보이게 세로 구분선 제거
       (filler 자체 좌우선 + 마지막 데이터 컬럼(omes-lastdata)의 우측선).
       ⚠ 기본 셀 규칙이 !important+더 구체적이라, 같은 구조에 클래스를 더해 구체성으로 이겨야 함. */
    .omes-grid .table > thead > tr > th.omes-fill,
    .omes-grid .table > tbody > tr > td.omes-fill { border-left: 0 !important; border-right: 0 !important; }
    .omes-grid .table > thead > tr > th.omes-lastdata,
    .omes-grid .table > tbody > tr > td.omes-lastdata { border-right: 0 !important; }

    /* 좌측 행번호(ShowLineNo) gutter — BB는 colgroup 의 첫 col 로 폭을 잡으므로(th width 무시) 그 폭을 덮어야 좁아짐.
       (Razor 가 colgroup/col 을 태그로 오해하므로 태그명 없이 :first-child 로 지정) */
    .omes-lineno .table > :first-child > :first-child { width: 30px !important; }
    /* 다중선택 체크박스 열(행번호 다음 = 2번째) 좁게 — colgroup col + th/td 양쪽 강제(BB 폭무시 대비) */
    .omes-haschk .table > colgroup > col:nth-child(2),
    .omes-haschk .table > :first-child > :nth-child(2) { width: 28px !important; min-width: 28px !important; max-width: 28px !important; }
    .omes-haschk .table > thead > tr > th:nth-child(2),
    .omes-haschk .table > tbody > tr > td:nth-child(2) {
        width: 28px !important; min-width: 28px !important; max-width: 28px !important;
        padding: 0 !important; text-align: center; overflow: hidden;
    }
    .omes-lineno .table > thead > tr > th:first-child,
    .omes-lineno .table > tbody > tr > td:first-child {
        background-color: #f6f8fa !important; border-right: 1px solid #e9edf2 !important;
        padding: 2px !important; user-select: none;
    }
    /* 행번호 숫자 셀(BB 실제 클래스 .col-line-no) — 작게·우측정렬 */
    .omes-grid .col-line-no {
        font-size: 10.5px !important; color: #9aa3b0 !important;
        text-align: right !important; padding-right: 5px !important; min-width: 0 !important;
    }

    /* ── 인플레이스 편집 — 에디터가 "셀 전체"를 채워 셀 아무 곳이나 클릭=편집, 포커스 셀 하이라이트 ── */
    /* td 패딩 제거 → .xlcell 이 셀 전체를 차지 */
    .omes-grid .table > tbody > tr > td { padding: 0 !important; }
    .omes-grid .xlcell { display: flex; align-items: center; width: 100%; min-height: 30px; padding: 0 8px; }
    /* 편집 셀(.xlcell 안에 에디터)은 패딩 0 → 에디터가 셀을 꽉 채움 */
    .omes-grid .xlcell:has(.form-control),
    .omes-grid .xlcell:has(.form-select) { padding: 0; }
    /* 룩업/콤보(테두리 필드)는 셀 안에 살짝 여백 두고 앉힘 */
    .omes-grid .xlcell:has(.dropdown) { padding: 2px 4px; }
    /* 포커스된 셀 = 흰 배경 + 파란 사각 테두리(셀 전체 영역 기준) */
    .omes-grid .xlcell:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--selected-row-accent); }
    /* ── 진행상태 뱃지(pill) ── */
    .omes-sbadge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:600; line-height:1.5; white-space:nowrap;
        background:#eef1f4; color:#5b6675; }                          /* 기본/미지정 */
    .omes-sbadge.sb-crt { background:#eef1f4; color:#5b6675; }        /* 작성중 */
    .omes-sbadge.sb-part { background:#fff4e5; color:#b25e09; }       /* 부분 */
    .omes-sbadge.sb-fix, .omes-sbadge.sb-cfm { background:#e6f2fb; color:#0069b9; }  /* 확정 */
    .omes-sbadge.sb-com, .omes-sbadge.sb-cls { background:#e7f6ec; color:#1a7f4b; }  /* 완료/마감 */
    .omes-sbadge.sb-mov { background:#e6f2fb; color:#0069b9; }        /* 이동완료 — 재고이동 끝(불량/폐기/반품 3단계) */
    .omes-sbadge.sb-prc { background:#e7f6ec; color:#1a7f4b; }        /* 처리완료 — 후속처리 끝 */
    .omes-sbadge.sb-can, .omes-sbadge.sb-del { background:#fdecec; color:#c0392b; }  /* 취소 */
    /* ── 통화(금액) 우측정렬 ── */
    .omes-money { display:block; width:100%; text-align:right; padding-right:6px; font-variant-numeric:tabular-nums; }
    .omes-grid td .omes-money-input { text-align:right; font-variant-numeric:tabular-nums; }
    /* ── 숫자(int/decimal) 컬럼 우측정렬 ── */
    .omes-grid .xlcell-num { justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
    .omes-grid .xlcell-num .form-control,
    .omes-grid .xlcell-num input { text-align: right; }

    /* 에디터가 셀 폭을 채움 (⚠ .bb-clearable-input 엔 width:100% 금지 — 캐럿이 밀려 줄바꿈됨) */
    .omes-grid td .form-control, .omes-grid td .form-select,
    .omes-grid td .dropdown, .omes-grid td .input-group, .omes-grid td .gl-box { width: 100% !important; }
    /* 룩업 값영역이 셀 폭 전체를 쓰도록(좁은 셀에서 값이 사라지지 않게) */
    .omes-grid td .omes-gridlookup, .omes-grid td .omes-gridlookup .gl-box { width: 100% !important; min-width: 0 !important; }
    .omes-grid td .xlcell { padding: 0 4px !important; }
    /* 셀 날짜 편집기(DateTimePicker): 좁은 셀에서 달력 아이콘이 값 위에 겹침 → 아이콘 숨기고 좌측 여백 제거(2026-09-28) */
    .omes-grid td .datetime-picker-input-icon, .omes-grid td .datetime-picker-bar { display: none !important; }
    .omes-grid td .datetime-picker-input { padding-left: 4px !important; }
    /* 룩업/콤보 내부는 한 줄 유지: input-group nowrap, 입력부는 남는 폭만 차지, 캐럿은 인라인 */
    .omes-grid td .input-group { flex-wrap: nowrap !important; align-items: center !important; }
    .omes-grid td .bb-clearable-input { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
    .omes-grid .table > tbody td .form-control,
    .omes-grid .table > tbody td .form-select {
        border-color: transparent !important; background-color: transparent !important; box-shadow: none !important;
        border-radius: 0 !important; height: auto !important; min-height: 26px !important;
        padding: 2px 8px !important; line-height: 1.4 !important;
    }
    /* 포커스 시엔 셀 자체(.xlcell)가 하이라이트하므로 에디터는 테두리 없이 투명 유지 */
    .omes-grid .table > tbody td .form-control:focus,
    .omes-grid .table > tbody td .form-select:focus {
        border-color: transparent !important; background-color: transparent !important; box-shadow: none !important;
    }

    /* 툴바 +New / -Delete (초록 ＋ · 빨강 －, 은은한 호버) */
    .omes-grid .omes-tb {
        display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
        border: 1px solid transparent; border-radius: 6px; background: transparent; color: #5b6675;
        font-size: 12.5px; font-weight: 500; cursor: pointer;
    }
    .omes-grid .omes-tb:hover:not(:disabled) { background: #eef1f5; color: #1f2733; }
    .omes-grid .omes-tb:disabled { opacity: .45; cursor: default; }
    .omes-grid .omes-tb i { font-size: 12px; }
    .omes-grid .omes-tb.add i { color: #2e9e5b; }
    .omes-grid .omes-tb.del i { color: #d64545; }

    .omes-tb.extra { color: #1b6ec2; }
    .omes-tb.extra:hover { background: #eef4fc; }

    /* ＋New 드롭다운(AddOptions) — 직접입력/상위DOC 불러오기 등 */
    .omes-grid .omes-add-wrap { position: relative; display: inline-block; }
    .omes-grid .omes-add-backdrop { position: fixed; inset: 0; z-index: 1074; }
    .omes-grid .omes-add-menu {
        position: absolute; top: calc(100% + 3px); left: 0; z-index: 1075; min-width: 190px;
        background: #fff; border: 1px solid #d5dbe3; border-radius: 8px; padding: 4px;
        box-shadow: 0 6px 22px rgba(20,30,45,.14);
    }
    .omes-grid .omes-add-item {
        display: flex; align-items: center; width: 100%; text-align: left; gap: 4px;
        border: 0; background: transparent; border-radius: 5px; padding: .4rem .6rem;
        font-size: 12.5px; color: #1f2937; cursor: pointer;
    }
    .omes-grid .omes-add-item:hover { background: #eef5fc; color: #1b6ec2; }
    .omes-grid .omes-add-ic { width: 16px; font-size: 12px; color: #7a8698; }
    .omes-grid .omes-add-item:hover .omes-add-ic { color: #1b6ec2; }

    /* GridLookupEdit 팝업(.dropdown-menu 내부 테이블) — 본 그리드와 동일한 셀 격자/헤더 (팝업은 그리드 밖 부유 → 전역 셀렉터) */
    .dropdown-menu table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
    .dropdown-menu table > thead > tr > th {
        background-color: #f6f8fa !important; color: #5b6675; font-weight: 600; font-size: 12px;
        border: 0 !important; border-bottom: 1px solid #d5dbe3 !important; border-right: 1px solid #dde3ea !important;
    }
    .dropdown-menu table > tbody > tr > td {
        border: 0 !important; border-bottom: 1px solid #e5e9ef !important; border-right: 1px solid #e5e9ef !important;
        vertical-align: middle;
    }
    .dropdown-menu table > thead > tr > th:last-child,
    .dropdown-menu table > tbody > tr > td:last-child { border-right: 0 !important; }
    .dropdown-menu table > tbody > tr:hover > td { background-color: #f2f8fd; }
    .dropdown-menu table > tbody > tr.selected > td,
    .dropdown-menu table > tbody > tr.active > td { background-color: #bfe0f6 !important; }

    /* 헤더 — 셀 전체 클릭=정렬, 활성 시에만 캐럿, 우측 필터 깔때기 */
    .omes-grid .omes-hdr { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
    .omes-grid .omes-hdr:hover .omes-hdr-title { color: #1b6ec2; }
    .omes-grid .omes-hdr-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
    .omes-grid .omes-sort { font-size: 12px; color: #1b6ec2; }
    .omes-grid .omes-filt { font-size: 10.5px; color: #c2cad4; margin-left: auto; padding: 2px; }
    .omes-grid .omes-filt:hover { color: #1b6ec2; }
    .omes-grid .omes-filt.on { color: #1b6ec2; }

    /* 필터 값 선택기 팝업 — 그리드 루트 기준 absolute(고정헤더 사본/컨테이닝블록 회피). 배경은 그리드 덮음 */
    .omes-grid { position: relative; }
    .omes-filt-backdrop { position: absolute; inset: 0; z-index: 4000; background: transparent; }
    .omes-filt-pop {
        position: absolute; z-index: 4001; min-width: 180px; max-width: 280px;
        background: #fff; border: 1px solid #d0d7de; border-radius: 8px;
        box-shadow: 0 6px 20px rgba(19,42,66,.18); padding: 6px; font-weight: 400;
    }
    .omes-filt-acts { display: flex; gap: 6px; padding: 2px 4px 6px; border-bottom: 1px solid #eef1f5; margin-bottom: 4px; }
    .omes-filt-acts button { flex: 1; height: 24px; font-size: 11.5px; border: 1px solid #d6dce4; border-radius: 5px; background: #f6f8fa; cursor: pointer; color: #37474f; }
    .omes-filt-acts button:hover { background: #e9eef4; color: #1b6ec2; }
    .omes-filt-list { max-height: 240px; overflow-y: auto; }
    .omes-filt-item { display: flex; align-items: center; gap: 7px; padding: 3px 5px; border-radius: 5px; cursor: pointer; font-size: 12.5px; color: #1f2733; }
    .omes-filt-item:hover { background: #f2f8fd; }
    .omes-filt-item input { width: 14px; height: 14px; cursor: pointer; }
    .omes-filt-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Like(포함) 입력 */
    .omes-filt-like { width: 100%; height: 28px; margin-bottom: 6px; padding: 0 8px; font-size: 12.5px;
        border: 1px solid #d6dce4; border-radius: 5px; box-sizing: border-box; }
    .omes-filt-like:focus { outline: none; border-color: #1b6ec2; box-shadow: 0 0 0 2px rgba(27,110,194,.15); }
    /* 일자 기간(from~to) */
    .omes-filt-range { display: flex; flex-direction: column; gap: 6px; padding: 2px; }
    .omes-filt-range label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #37474f; }
    .omes-filt-range input[type=date] { flex: 1; height: 28px; padding: 0 6px; font-size: 12.5px;
        border: 1px solid #d6dce4; border-radius: 5px; box-sizing: border-box; }
    .omes-filt-clear { height: 26px; font-size: 11.5px; border: 1px solid #d6dce4; border-radius: 5px;
        background: #f6f8fa; cursor: pointer; color: #37474f; margin-top: 2px; }
    .omes-filt-clear:hover { background: #e9eef4; color: #1b6ec2; }

    /* 폼(그리드 밖) GridLookupEdit/콤보 — 스크린샷처럼 깔끔한 단일 필드(테두리·라운드 균일, 캐럿 안쪽) */
    .dropdown > .input-group { border: 1px solid #d6dce4; border-radius: 6px; overflow: hidden; background: #fff; }
    .dropdown > .input-group .form-control { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    .dropdown > .input-group:focus-within { border-color: #2f90d8; box-shadow: 0 0 0 2px rgba(27,110,194,.15); }
    /* 그리드 안 룩업/콤보는 평면(엑셀) 유지 — 위 테두리 무효화 */
    /* 그리드 안 룩업/콤보도 폼과 동일한 깔끔한 단일 필드(테두리+라운드) — 사용자가 보여준 드롭다운 형태 */
    .omes-grid td .dropdown > .input-group { border: 1px solid #d6dce4 !important; border-radius: 6px !important; overflow: hidden; background: #fff !important; }
    .omes-grid td .dropdown > .input-group:focus-within { border-color: #2f90d8 !important; box-shadow: 0 0 0 2px rgba(27,110,194,.15) !important; }

/* NormalGrid 래퍼 보조: 행번호(.ln 셀에 counter) · 검색칸 */
.omes-grid tbody { counter-reset: pfrow; } .omes-grid td.ln { counter-increment: pfrow; width: 34px; text-align: center; color: #8a95a3; font-size: 11px; background: #fafbfc; } .omes-grid td.ln::before { content: counter(pfrow); } .omes-grid th.ln { width: 34px; }
.omes-grid .table-card { border-radius: var(--mud-radius); }
.omes-search { position: relative; } .omes-search > i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--mud-text-3); font-size: 12px; } .omes-search > input { padding-left: 26px; width: 220px; }
.omes-grid .table > tbody > tr > td .btn-link { font-size: var(--pf-fs-sm); }

/* GridLookupEdit 자리별 보정: .sl-lk = 화면 설정 .sl-in 자리(같은 높이), .gl-mono = 코드/식 입력 */
.omes-gridlookup.sl-lk .gl-box { min-height: 30px; } .omes-gridlookup.gl-mono .gl-input { font-family: ui-monospace, Consolas, monospace; }
.ts-in .omes-gridlookup .gl-box { min-height: 26px; padding: 0 6px; font-size: var(--pf-fs-xs); } .ts-pair .omes-gridlookup { width: 150px; } .ts-pair .omes-gridlookup .gl-box { min-height: 24px; border: 0; padding: 0 2px; }
.pf-line .omes-gridlookup, .row .omes-gridlookup { min-width: 0; }

/* 2026.10.13 — 아직 NormalGrid 로 안 바꾼 목록 표(.pf-tbl: 플랫폼 관리·배포 등)도 같은 격자 스킨 */
.table.pf-tbl { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.table.pf-tbl > :not(caption) > * > * { box-shadow: none !important; background-color: transparent; }
.table.pf-tbl > thead > tr > th { background-color: #f6f8fa !important; color: #5b6675; font-weight: 600; font-size: 12px; border: 0; border-bottom: 1px solid #d5dbe3 !important; border-right: 1px solid #dde3ea !important; white-space: nowrap; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.table.pf-tbl > tbody > tr > td { background-color: #fff; border: 0; border-bottom: 1px solid #e5e9ef !important; border-right: 1px solid #e5e9ef !important; color: #1f2733; vertical-align: middle; }
.table.pf-tbl > tbody > tr:hover > td { background-color: #f2f8fd; }
.table.pf-tbl td .btn-sm, .table.pf-tbl td .btn { white-space: nowrap; }
.omes-grid .table > tbody > tr > td b, .table.pf-tbl td b { white-space: nowrap; }

/* 2026.10.13 — 사용자 "정렬은 또 왜이래?": NormalGrid 이식분은 머리글(th)이 .table 기본 12px 16px, 본문(td)은 OpenMES 규칙(padding 0, .xlcell 이 채움)이라
   .xlcell 없이 쓰는 읽기용 표에서 머리글과 본문 글자 시작점이 어긋났다. .xlcell 이 없는 셀은 머리글과 같은 좌우 8px 로 맞춘다. */
.omes-grid .table > thead > tr > th { padding: 6px 8px !important; text-align: left; }
.omes-grid .table > tbody > tr > td:not(.ln):not(:has(> .xlcell)) { padding: 5px 8px !important; }
.omes-grid .table > tbody > tr > td.ed { padding: 2px 3px !important; }          /* 셀 안 편집기(룩업·입력) */
.omes-grid .table > tbody > tr > td.ed .gl-box { min-height: 28px; border-color: transparent; }
.omes-grid .table > tbody > tr > td.ed .gl-box:hover, .omes-grid .table > tbody > tr > td.ed .gl-box:focus-within { border-color: var(--mud-primary); }
.omes-grid .table > tbody > tr > td.ed .form-control { border-color: transparent; } .omes-grid .table > tbody > tr > td.ed .form-control:focus { border-color: var(--mud-primary); }
.omes-grid.omes-auto .table-card { min-height: 0; }                                /* 내용만큼(편집 화면 안 작은 표) */
.omes-grid .table > tbody > tr > td .btn-link { text-decoration: none; }
/* 2026.10.13 — 사용자 "가운데 사이즈 조절 가능하게": 목록|편집 두 칸(.row.pf-split)의 경계(.pf-gutter)를 끌어 왼쪽 폭을 바꾼다(폭은 localStorage pf_split_<이름>). */
.pf-gutter { display: none; }
@media (min-width: 992px) {
  .row.pf-split > .pf-gutter { display: block; flex: 0 0 10px; width: 10px !important; padding: 0 !important; cursor: col-resize; position: relative; }
  .row.pf-split > .pf-gutter::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: transparent; transition: background .12s; }
  .row.pf-split > .pf-gutter:hover::after, .row.pf-split.dragging > .pf-gutter::after { background: var(--mud-primary); }
  .row.pf-split > [class*="col-"]:first-child { flex: 0 0 auto !important; width: var(--pf-split-w, 320px) !important; max-width: 60% !important; padding-right: 0; }
  .row.pf-split > [class*="col-"]:last-child { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; padding-left: 0; }
  .row.pf-split.dragging { user-select: none; } .row.pf-split.dragging * { cursor: col-resize !important; }
}
/* 2026.10.13 — 사용자 "밑도 끝도 없이 왼쪽 정렬": 목록|편집 분할이 아닌 폼·안내 화면은 가운데 틀(.pf-narrow) 안에 두고 안의 입력은 틀 폭을 채운다. */
.pf-narrow { max-width: 1040px; margin: 0 auto; width: 100%; }
.pf-hint { font-size: var(--pf-fs-xs); color: var(--mud-text-3); font-weight: 400; margin-left: 6px; }
.pf-sec-h .pf-hint { margin-left: 2px; }
/* 2026.10.13 전수검사 — 목록 패널(ListPane) 안의 NormalGrid 는 이중 테두리 없이(.pf-flat) */
.omes-grid.pf-flat .table-card { border: 0; }
.omes-grid .table > tbody > tr.selected > td { background-color: var(--mud-primary-tint) !important; color: inherit !important; }
.omes-grid .table > tbody > tr.selected > td:first-child { background-image: linear-gradient(to right, var(--mud-primary) 0 3px, transparent 3px) !important; }
.omes-grid .table > tbody > tr > td.ln.text-center { text-align: right; }