/* erp-bs5.css — 정식 Bootstrap 5.3.8 위에 얹는 ERP 셸 (2026-08-01)
   ─────────────────────────────────────────────────────────────
   Steex(app.min.css·app.js)를 배제한 새 레이아웃(_LayoutErp5.cshtml)의 기반.
   역할 3가지:
     ① --bs-* 브리지 : 정식 Bootstrap 의 컴파일된 기본색(#0d6efd 등)을
        디자인 가이드 v1.4 확정 팔레트로 교체 (컴포넌트 변수까지 — Bootstrap 은
        .btn-primary 등에 리터럴 값을 컴파일해 넣으므로 :root 만으론 부족하다)
     ② --tb-* 안전망 : erp-steex.css 가 참조하지만 자기 안에서 정의하지 않던
        변수(Steex app.min.css 가 주던 것)를 데모 실측값으로 공급
     ③ 셸 구조 : app.min.css 가 담당하던 상단바·본문 오프셋·푸터·상단바 유틸
        (header-item·btn-topbar·fs-* 등)을 쇼케이스 값으로 재구현
   로드 순서: bootstrap.min.css → icons → FA → [이 파일] → erp-steex.css → 폰트.
   erp-steex.css(토큰 v1.2 + 컴포넌트 스킨 + 사이드바)가 뒤에서 이긴다 — 의도된 순서. */

/* ══ ① Bootstrap 5.3 팔레트 브리지 — 가이드 v1.4 확정값 ══ */
:root, [data-bs-theme=light] {
    --bs-primary: #3274D8;            --bs-primary-rgb: 50, 116, 216;
    --bs-primary-text-emphasis: #2768C9;
    --bs-primary-bg-subtle: #E2ECF9;  --bs-primary-border-subtle: #C6DAF4;
    --bs-secondary: #64748B;          --bs-secondary-rgb: 100, 116, 139;
    --bs-secondary-text-emphasis: #475569;
    --bs-secondary-bg-subtle: #EEF2F6; --bs-secondary-border-subtle: #DDE3EB;
    --bs-success: #098568;            --bs-success-rgb: 9, 133, 104;
    --bs-success-text-emphasis: #087C60;
    --bs-success-bg-subtle: #DBF5EF;  --bs-success-border-subtle: #B8E8DC;
    --bs-danger: #DA343A;             --bs-danger-rgb: 218, 52, 58;
    --bs-danger-text-emphasis: #CA252B;
    --bs-danger-bg-subtle: #FBE6E7;   --bs-danger-border-subtle: #F5C6C8;
    --bs-warning: #A36B04;            --bs-warning-rgb: 163, 107, 4;
    --bs-warning-text-emphasis: #996503;
    --bs-warning-bg-subtle: #FEF5E4;  --bs-warning-border-subtle: #F5E3BC;
    /* info 는 UI 의미색에서 제외(가이드 06절) — 남은 참조는 브랜드 파랑 계열로 수렴 */
    --bs-info: #2768C9;               --bs-info-rgb: 39, 104, 201;
    --bs-info-text-emphasis: #2768C9;
    --bs-info-bg-subtle: #E2ECF9;     --bs-info-border-subtle: #C6DAF4;
    --bs-light: #F3F5F8;              --bs-light-rgb: 243, 245, 248;
    --bs-dark: #1E2A3B;               --bs-dark-rgb: 30, 42, 59;

    --bs-body-bg: #F3F5F8;            --bs-body-bg-rgb: 243, 245, 248;
    --bs-body-color: #1E2A3B;         --bs-body-color-rgb: 30, 42, 59;
    --bs-secondary-color: #64748B;    --bs-tertiary-color: #94A3B8;
    --bs-secondary-bg: #EEF2F6;       --bs-tertiary-bg: #F8FAFC;
    --bs-border-color: #E3E8EF;
    --bs-heading-color: #1E2A3B;
    --bs-link-color: #2768C9;         --bs-link-color-rgb: 39, 104, 201;
    --bs-link-hover-color: #1F52A0;   --bs-link-hover-color-rgb: 31, 82, 160;
    --bs-font-sans-serif: "Pretendard Variable", Pretendard, "Nanum Gothic", "Malgun Gothic", sans-serif;
    --bs-body-font-size: .875rem;
    --bs-border-radius: .5rem;        /* 카드 r8 — 데모 --r */
    --bs-box-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
}
/* 다크 — 가이드 13절 재매핑(채도 보정 4색) + 중립은 erp-steex.css 다크 블록 값을 따른다 */
[data-bs-theme=dark] {
    --bs-primary: #6A9AE2;            --bs-primary-rgb: 106, 154, 226;
    --bs-success: #0CBA91;            --bs-success-rgb: 12, 186, 145;
    --bs-warning: #FBBD4A;            --bs-warning-rgb: 251, 189, 74;
    --bs-danger: #E67579;             --bs-danger-rgb: 230, 117, 121;
    --bs-body-bg: var(--tb-body-bg, #171E2A);
    --bs-body-color: var(--tb-body-color, #CBD5E1);
    --bs-border-color: var(--tb-border-color, #2B3648);

    /* ★subtle 계열 다리 (2026-08-02 다크 정밀 대조).
       위 ①블록의 --bs-*-bg-subtle 은 라이트 리터럴이라, .bg-success-subtle 같은 Bootstrap
       유틸리티가 다크에서도 파스텔로 떴다(실측: 인사카드 배지 #DBF5EF · 아바타 #E2ECF9).
       다크 값은 erp-steex 가 이미 갖고 있다(--tb-*-bg-subtle) — 값을 복사하지 않고 그쪽을 가리킨다.
       두 벌로 두면 한쪽만 고쳐져 다시 어긋난다. */
    --bs-primary-bg-subtle:   var(--tb-primary-bg-subtle);
    --bs-secondary-bg-subtle: var(--tb-secondary-bg-subtle);
    --bs-success-bg-subtle:   var(--tb-success-bg-subtle);
    --bs-danger-bg-subtle:    var(--tb-danger-bg-subtle);
    --bs-warning-bg-subtle:   var(--tb-warning-bg-subtle);
    --bs-info-bg-subtle:      var(--tb-primary-bg-subtle);   /* info 색은 UI 에 쓰지 않는다 — primary 로 */

    /* 제목색 — ①블록의 #1E2A3B 가 다크에도 남아 빈 상태 문구가 거의 안 보였다(실측 /PopResult).
       erp-steex 다크 블록이 이미 #E6ECF7 을 갖고 있으므로 그쪽을 가리킨다. */
    --bs-heading-color: var(--tb-heading-color);
    /* .bg-light — 빈 상태 아이콘 원 등에 쓰인다. 다크에서 밝은 회색 원이 그대로 떴다.
       머리글과 같은 한 단계 밝은 면(#1A2440)으로 모은다. */
    --bs-light: var(--tb-tertiary-bg);
    --bs-light-rgb: 26, 36, 64;

    /* 옅은 테두리는 다크에서 기준 선 색으로 모은다(파스텔 테두리가 남으면 그것만 튄다) */
    --bs-primary-border-subtle: var(--tb-border-color);
    --bs-secondary-border-subtle: var(--tb-border-color);
    --bs-success-border-subtle: var(--tb-border-color);
    --bs-danger-border-subtle: var(--tb-border-color);
    --bs-warning-border-subtle: var(--tb-border-color);
    --bs-info-border-subtle: var(--tb-border-color);
}

/* Bootstrap 은 컴포넌트 변수에 리터럴을 컴파일한다 — 주요 컴포넌트만 짚어 교체 */
.btn-primary {
    --bs-btn-bg: #3274D8; --bs-btn-border-color: #3274D8;
    --bs-btn-hover-bg: #2768C9; --bs-btn-hover-border-color: #2768C9;
    --bs-btn-active-bg: #2260BE; --bs-btn-active-border-color: #2260BE;
    --bs-btn-disabled-bg: #3274D8; --bs-btn-disabled-border-color: #3274D8;
    --bs-btn-focus-shadow-rgb: 50, 116, 216;
}
.btn-outline-primary {
    --bs-btn-color: #2768C9; --bs-btn-border-color: #3274D8;
    --bs-btn-hover-bg: #3274D8; --bs-btn-hover-border-color: #3274D8;
    --bs-btn-active-bg: #2768C9; --bs-btn-active-border-color: #2768C9;
    --bs-btn-focus-shadow-rgb: 50, 116, 216;
}
.btn-secondary {
    --bs-btn-bg: #64748B; --bs-btn-border-color: #64748B;
    --bs-btn-hover-bg: #556275; --bs-btn-hover-border-color: #556275;
    --bs-btn-active-bg: #475569; --bs-btn-active-border-color: #475569;
}
.btn-success { --bs-btn-bg: #098568; --bs-btn-border-color: #098568; --bs-btn-hover-bg: #087C60; --bs-btn-hover-border-color: #087C60; --bs-btn-active-bg: #076F56; --bs-btn-active-border-color: #076F56; }
.btn-danger  { --bs-btn-bg: #DA343A; --bs-btn-border-color: #DA343A; --bs-btn-hover-bg: #CA252B; --bs-btn-hover-border-color: #CA252B; --bs-btn-active-bg: #B92026; --bs-btn-active-border-color: #B92026; }
.btn-warning { --bs-btn-bg: #A36B04; --bs-btn-border-color: #A36B04; --bs-btn-color: #fff; --bs-btn-hover-bg: #996503; --bs-btn-hover-border-color: #996503; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #8A5B03; --bs-btn-active-border-color: #8A5B03; --bs-btn-active-color: #fff; }
.btn-light   { --bs-btn-bg: #fff; --bs-btn-border-color: #E3E8EF; --bs-btn-color: #344155; --bs-btn-hover-bg: #FAFBFC; --bs-btn-hover-border-color: #CBD5E1; --bs-btn-hover-color: #1E2A3B; --bs-btn-active-bg: #F3F5F8; --bs-btn-active-border-color: #CBD5E1; }

/* Steex 어휘 .btn-subtle-* — 정식 Bootstrap 에는 없어 여기서 정의 (배지 3종 세트 규칙) */
.btn-subtle-primary   { --bs-btn-bg: #E2ECF9; --bs-btn-color: #2768C9; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #3274D8; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #2768C9; --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; }
.btn-subtle-secondary { --bs-btn-bg: #EEF2F6; --bs-btn-color: #475569; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #64748B; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #475569; --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; }
.btn-subtle-success   { --bs-btn-bg: #DBF5EF; --bs-btn-color: #087C60; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #098568; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #087C60; --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; }
.btn-subtle-danger    { --bs-btn-bg: #FBE6E7; --bs-btn-color: #CA252B; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #DA343A; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #CA252B; --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; }
.btn-subtle-warning   { --bs-btn-bg: #FEF5E4; --bs-btn-color: #996503; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #A36B04; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #996503; --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; }
.btn-subtle-info      { --bs-btn-bg: #E2ECF9; --bs-btn-color: #2768C9; --bs-btn-border-color: transparent; --bs-btn-hover-bg: #2768C9; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: #2768C9; --bs-btn-active-color: #fff; --bs-btn-active-border-color: transparent; }

/* 폼 체크·스위치·포커스 — 컴파일된 #0d6efd 계열 제거 */
.form-check-input:checked { background-color: #3274D8; border-color: #3274D8; }
.form-check-input:focus { border-color: #3274D8; box-shadow: 0 0 0 3px rgba(50, 116, 216, .14); }
.form-control:focus, .form-select:focus { border-color: #3274D8; box-shadow: 0 0 0 3px rgba(50, 116, 216, .14); }
.dropdown-menu { --bs-dropdown-link-active-bg: #3274D8; font-size: .8125rem; }
.nav-pills { --bs-nav-pills-link-active-bg: #3274D8; }
.pagination { --bs-pagination-active-bg: #3274D8; --bs-pagination-active-border-color: #3274D8; --bs-pagination-color: #2768C9; --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(50, 116, 216, .14); }
.progress { --bs-progress-bar-bg: #3274D8; }
.list-group { --bs-list-group-active-bg: #3274D8; --bs-list-group-active-border-color: #3274D8; }

/* ══ ② --tb-* 안전망 — erp-steex.css 가 참조하지만 Steex 만 정의하던 변수 ══ */
:root {
    --tb-border-radius: .5rem;
    --tb-box-shadow-lg: 0 12px 34px rgba(5, 15, 35, .22);
    --tb-btn-line-height: 1.5;
    --tb-btn-padding-y: .375rem;
    --tb-form-invalid-border-color: #DA343A;
    --tb-info-bg-subtle: #E2ECF9;
    --tb-info-text-emphasis: #2768C9;
    --tb-light: #F3F5F8;
    --tb-link-opacity: 1;
    --tb-modal-header-padding-y: 1rem;
}

/* ══ ③ 셸 구조 — app.min.css 대체 (쇼케이스 실측값) ══ */
html, body { min-height: 100%; }
body { background: var(--bs-body-bg); }

/* 상단바 : 사이드바(64+216) 오른쪽에 고정. 흰 면 + 1px 하단선 (데모 .topbar) */
#page-topbar {
    position: fixed; top: 0; right: 0;
    left: calc(var(--tb-twocolumn-menu-iconview-width, 64px) + var(--tb-twocolumn-menu-width, 216px));
    z-index: 1001;
    background: var(--tb-card-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color);
}
.layout-width { width: 100%; }
.navbar-header {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--tb-header-height, 56px); padding: 0 12px 0 16px;
}
.navbar-header > .d-flex { min-width: 0; }
.header-item { display: flex; align-items: center; height: 100%; }
.btn-topbar {
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: #495A71; border-radius: 50%;
    transition: background .12s;
}
.btn-topbar:hover { background: #F3F5F8; color: #1E2A3B; }
[data-bs-theme=dark] .btn-topbar { color: #A9B6C6; }
[data-bs-theme=dark] .btn-topbar:hover { background: rgba(255, 255, 255, .06); color: #E2E8F0; }

/* ── 다크에서 밝게 튀던 컴포넌트 (2026-08-02 다크 정밀 대조) ─────────────────
   위 .btn-* / .btn-subtle-* 는 라이트 리터럴만 갖고 있어 다크에서도 흰 버튼·파스텔 버튼이
   그대로 떴다(실측: btn-light #FFFFFF · btn-subtle-success #DBF5EF · alert-warning #FEF5E4).
   값은 쇼케이스 body.dark 블록에서 가져온다 —
     card #151E33 · line #28324B · mut #93A1BC · line-strong #3A4664 · hover면 #1B2540
     accent-soft #1D2F51 · ok-bg #133A44 · bad-bg #3A293B · warn-bg #3E3B37 · tag.mut #212D4A
     .hint(경고 배너) bg #241F0E · border #4A3D14 · color #C9B37E */
[data-bs-theme=dark] .btn-light {
    --bs-btn-bg: #151E33; --bs-btn-border-color: #28324B; --bs-btn-color: #93A1BC;
    --bs-btn-hover-bg: #1B2540; --bs-btn-hover-border-color: #3A4664; --bs-btn-hover-color: #E6ECF7;
    --bs-btn-active-bg: #1B2540; --bs-btn-active-border-color: #3A4664; --bs-btn-active-color: #E6ECF7;
}
[data-bs-theme=dark] .btn-subtle-primary   { --bs-btn-bg: #1D2F51; --bs-btn-color: #6A9AE2; --bs-btn-hover-bg: #24395F; --bs-btn-hover-color: #9FBEEC; --bs-btn-active-bg: #24395F; --bs-btn-active-color: #9FBEEC; }
[data-bs-theme=dark] .btn-subtle-secondary { --bs-btn-bg: #212D4A; --bs-btn-color: #93A1BC; --bs-btn-hover-bg: #28355A; --bs-btn-hover-color: #C5D0E4; --bs-btn-active-bg: #28355A; --bs-btn-active-color: #C5D0E4; }
[data-bs-theme=dark] .btn-subtle-success   { --bs-btn-bg: #133A44; --bs-btn-color: #0CBA91; --bs-btn-hover-bg: #174A56; --bs-btn-hover-color: #3FD3AF; --bs-btn-active-bg: #174A56; --bs-btn-active-color: #3FD3AF; }
[data-bs-theme=dark] .btn-subtle-danger    { --bs-btn-bg: #3A293B; --bs-btn-color: #E67579; --bs-btn-hover-bg: #4A3348; --bs-btn-hover-color: #F09B9E; --bs-btn-active-bg: #4A3348; --bs-btn-active-color: #F09B9E; }
[data-bs-theme=dark] .btn-subtle-warning   { --bs-btn-bg: #3E3B37; --bs-btn-color: #FBBD4A; --bs-btn-hover-bg: #4E4941; --bs-btn-hover-color: #FDD182; --bs-btn-active-bg: #4E4941; --bs-btn-active-color: #FDD182; }

/* 안내 배너 — 전사(통합) 뷰 알림 등. 쇼케이스 .hint 다크값 */
[data-bs-theme=dark] .alert-warning {
    --bs-alert-bg: #241F0E; --bs-alert-border-color: #4A3D14; --bs-alert-color: #C9B37E;
}
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }
.btn-ghost-dark { color: #495A71; }
.topbar-user .btn { display: flex; align-items: center; height: var(--tb-header-height, 56px); padding: 0 4px; border: 0; }
.header-profile-user { width: 34px; height: 34px; font-size: 13px; }
.user-name-text { font-size: 13px; font-weight: 600; color: var(--bs-body-color); }
.user-name-sub-text { font-size: 11px; color: var(--bs-secondary-color); }
.topbar-head-dropdown .dropdown-menu { min-width: 200px; }

/* 브레드크럼(상단바 왼쪽) — 데모 .crumb: 11px 연회색, 현재만 진하게 */
#page-topbar .breadcrumb { --bs-breadcrumb-divider: "›"; margin: 0; font-size: 11.5px; }
#page-topbar .breadcrumb-item, #page-topbar .breadcrumb-item a { color: #94A3B8; text-decoration: none; }
#page-topbar .breadcrumb-item.active { color: #64748B; font-weight: 600; }

/* 데스크톱: 햄버거·가로 로고 숨김 (사이드바 상시) */
.topnav-hamburger, .navbar-brand-box.horizontal-logo { display: none; }

/* 본문 : 사이드바 오른쪽 + 상단바 아래. 푸터는 흐름 맨 아래 */
.main-content {
    margin-left: calc(var(--tb-twocolumn-menu-iconview-width, 64px) + var(--tb-twocolumn-menu-width, 216px));
    min-height: 100vh; display: flex; flex-direction: column;
}
.page-content {
    flex: 1 0 auto;
    padding: calc(var(--tb-header-height, 56px) + 16px) 16px 20px;
}
.footer {
    flex-shrink: 0; padding: 12px 16px;
    background: var(--tb-card-bg, #fff);
    border-top: 1px solid var(--bs-border-color);
    font-size: 12px; color: var(--bs-secondary-color);
}

/* 모바일(<992px) : 사이드바 오프캔버스(erp-steex.css 담당) — 오프셋 해제 + 햄버거 노출 */
@media (max-width: 991.98px) {
    #page-topbar { left: 0; }
    .main-content { margin-left: 0; }
    .topnav-hamburger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border: 0; background: transparent;
    }
    .hamburger-icon { display: block; width: 20px; position: relative; }
    .hamburger-icon span { display: block; height: 2px; background: #495A71; border-radius: 2px; margin: 4px 0; }
    .navbar-brand-box.horizontal-logo { display: flex; align-items: center; }
    .navbar-brand-box .logo-sm { display: none; }
}

/* Steex 크기 유틸 — 정식 Bootstrap 에 없는 fs-* 이름 (상단바·뷰 곳곳에서 사용) */
.fs-3xs { font-size: .625rem; }  .fs-2xs { font-size: .6875rem; }
.fs-xs  { font-size: .75rem; }   .fs-sm  { font-size: .8125rem; }
.fs-md  { font-size: .9375rem; } .fs-lg  { font-size: 1.03125rem; }
.fs-xl  { font-size: 1.125rem; } .fs-2xl { font-size: 1.375rem; }
.fs-3xl { font-size: 1.75rem; }  .fs-4xl { font-size: 2.25rem; }

/* 검색창(패널·툴바 공용) — 아이콘 인셋 */
.search-box { position: relative; }
.search-box .search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: #94A3B8; font-size: 13px; pointer-events: none;
}
.search-box input { padding-left: 32px; }

/* 얇은 스크롤바 (정품 데모 scrollbar.html 4px 대체) */
.app-scroll { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
.app-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.app-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.app-scroll::-webkit-scrollbar-track { background: transparent; }

/* ══ 표 디테일 — 쇼케이스 실측 (2026-08-01 사용자 비교 지적분) ══ */
/* 구분·상태 태그 : 데모 .tag 그대로 (높이 20 · 11px/700 · r5 · subtle 배경 + emphasis 글자) */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 1; }
.tag.ok   { background: #DBF5EF; color: #087C60; }
.tag.warn { background: #FEF5E4; color: #996503; }
.tag.bad  { background: #FBE6E7; color: #CA252B; }
.tag.info { background: #E2ECF9; color: #2768C9; }
.tag.mut  { background: #EEF2F6; color: #475569; }
.tag.sell { background: #E2ECF9; color: #2768C9; }   /* 매출 */
.tag.buy  { background: #FBF0DF; color: #996503; }   /* 매입·외주 */
.tag.mix  { background: #E4F4F2; color: #0F766E; }   /* 매출/매입 혼합 */
[data-bs-theme=dark] .tag.sell { background: rgba(106, 154, 226, .16); color: #6A9AE2; }
[data-bs-theme=dark] .tag.buy  { background: rgba(251, 189, 74, .14); color: #FBBD4A; }
[data-bs-theme=dark] .tag.mix  { background: rgba(12, 186, 145, .14); color: #0CBA91; }
[data-bs-theme=dark] .tag.mut  { background: rgba(148, 163, 184, .14); color: #94A3B8; }

/* 코드값 회색·소형·자간, 거래처명 600 — 데모 표 디테일 */
.erp-grid td[data-col=code] { color: #64748B; font-size: 12px; letter-spacing: .02em; }
.erp-grid td[data-col=name] { font-weight: 600; }
[data-bs-theme=dark] .erp-grid td[data-col=code] { color: #94A3B8; }

/* ══ 2026-08-01 구조 개편 — 쇼케이스 완전 일치 (사용자 비교 지적분 2차) ══ */
/* 상단바 좌측 : 크럼 위 + 제목 아래 스택 (데모 .crumb / .title) */
.erp-top-left { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.erp-crumb { font-size: 11px; color: #94A3B8; white-space: nowrap; line-height: 1.3; }
.erp-crumb b { color: #64748B; font-weight: 600; }
.erp-top-title { font-size: 16px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; line-height: 1.25; color: var(--bs-body-color); }
.erp-top-actions .btn { white-space: nowrap; }

/* 표 머리글 처짐 — Bootstrap 기본 thead vertical-align:bottom 이 34px 칸 바닥에 글자를 붙였다(실측) */
html .table > thead { vertical-align: middle; }
html .erp-grid thead th { vertical-align: middle; }

/* 셀렉트 글자 아래 잘림 — 높이 32px 인데 패딩 16.8+글줄 18=34.8px 였다(실측). 패딩만 줄인다 */
html select.form-select { padding-top: .25rem; padding-bottom: .25rem; }

/* 패널 : 데모는 흰 면 (기존 --tb-secondary-bg 회색조 → 카드색)
   ※ 라이트 한정 — 전역으로 걸면 erp-steex 다크 재매핑을 눌러 다크에서 패널이 하얗게 남는다(사용자 실측) */
html[data-bs-theme=light] .erp-panel { background: #fff; }

/* 패널 헤드 — 데모 .panel-head : 15px/800 + 10.5px 부제 */
.erp-panel-head { padding: 0 6px 8px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--bs-body-color); }
.erp-panel-head small { display: block; font-size: 10.5px; font-weight: 500; color: #94A3B8; margin-top: 1px; }

/* (레일 하단 사용자 규칙은 2026-08-08 삭제 — 계정을 상단바 오른쪽 끝으로 옮기며 마크업이 사라졌다.
   새 스타일은 erp-steex.css 의 '상단바 계정' 절.) */

/* ══ 2026-08-01 3차 — 표 배경·정렬 (사용자 실측 지적 5건) ══ */
/* 카드 — 정식 Bootstrap 5.3 은 --bs-card-bg 를 본문 배경(#F3F5F8)에 연동한다 →
   카드도 표도 회색이 됐다(지적 1의 뿌리). 데모 카드는 흰색: 토큰 카드색으로 고정(다크는 토큰이 재매핑). */
.card { --bs-card-bg: var(--tb-card-bg, #fff); }

/* 정식 Bootstrap 5.3 은 .table 셀을 --bs-table-bg(=본문 배경)로 칠한다 → 표 전체가 회색이 됐다.
   투명으로 돌려 카드 흰색이 비치게 한다. hover 는 데모값(#F6FAFD).

   ★글자색도 같은 자리에서 정한다 (2026-08-02 다크 정밀 대조에서 발견).
     .table 은 --bs-table-color 를 --bs-emphasis-color 로 잡는데 그 값이 라이트 #000 · 다크 #fff 다.
     즉 지금까지 목록 셀 글자가 **순흑/순백**이었다(실측: 라이트 #000000 · 다크 #FFFFFF).
     쇼케이스는 본문보다 한 단계 눅인 값을 쓴다 — --td-ink 라이트 #27364B · 다크 #C5D0E4.
     본문색(--tb-body-color)과도 다른 별도 눈금이라 여기에 명시한다.
     ※ 이 변수는 .table 이 스스로 선언하므로 :root 에 적으면 먹지 않는다. 반드시 .table 에 준다. */
.table { --bs-table-bg: transparent; --bs-table-color: #27364B; }
[data-bs-theme=dark] .table { --bs-table-color: #C5D0E4; }
.table-hover { --bs-table-hover-bg: #F6FAFD; --bs-table-hover-color: var(--bs-body-color); }
[data-bs-theme=dark] .table-hover { --bs-table-hover-bg: rgba(255, 255, 255, .04); }

/* 표 머리글 — Bootstrap 셀 규칙(.table>:not(caption)>*>*)이 erp-steex 의 머리글 배경을 눌렀다.
   특정도를 올려 데모 머리글(#F8FAFC + 불투명)을 복원. 스티키가 '안 되는 것처럼' 보인 것도
   머리글이 본문과 같은 색이 된 탓이다 — 배경 복원 + 스티키 명시로 함께 해결. */
html .card-fill .table > thead > tr > th {
    background-color: var(--tb-tertiary-bg, #F8FAFC);
    position: sticky; top: 0; z-index: 2;
}
/* 다크 머리글 — 실측으로 #1A2440 이 나온다(쇼케이스 --th-bg 와 같다).
   폴백에 적혀 있던 #232B3A 는 erp-steex 가 --tb-tertiary-bg 를 늘 정의하므로 **한 번도 쓰인 적이 없다.**
   가정값을 남겨두면 다음 사람이 그 색을 기준으로 착각하므로 실제 값으로 맞춘다. */
html[data-bs-theme=dark] .card-fill .table > thead > tr > th {
    background-color: var(--tb-tertiary-bg, #1A2440);
}

/* 카드 왼쪽 정렬 — 툴바가 좌우 4px 안쪽 여백을 갖고 있어 카드보다 4px 들어가 보였다
   (.erp-views 규칙은 2026-08-20 뷰 탭 삭제와 함께 제거) */
html .erp-toolbar { padding-left: 0; padding-right: 0; }
html .erp-statusbar { padding-left: 0; padding-right: 0; }

/* 레일(대메뉴) 눈금 — 데모 실측값 강제: 칸 46×44 · 칸 사이 2px · 아이콘 19px(FA Regular 400) · 라벨 9px/600
   (지적 4 — 실화면 레일의 세로 간격·굵기가 데모보다 크고 무거워 보임) */
/* 위쪽 여백 6→14px (2026-08-08) — 레일이 그리드 1행으로 올라오면서 첫 항목(대시보드)이
   화면 천장에 거의 붙었다(로고 밴드가 위에 있을 때는 그 밴드가 여백 역할을 했다).
   값은 옆 패널(.erp-panel)의 padding-top 과 같은 14px — 대메뉴와 중메뉴의 첫 줄이 같은 높이에서
   시작해야 두 기둥이 한 줄로 읽힌다(사용자 지정). 한쪽을 바꾸면 다른 쪽도 같이 봐야 한다. */
html .erp-rail { gap: 2px; padding: 14px 0 10px; }
html .erp-rail-item { width: 46px; height: 44px; gap: 2px; margin: 0; }
html .erp-rail-item i { font-size: 19px; font-weight: 400; line-height: 1; }
html .erp-rail-item span { font-size: 9px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }

/* Steex 잔재 무력화 — 새 셸에는 없는 요소들 */
#preloader, #back-to-top { display: none !important; }

/* ══ ⑤ 로그인 화면 — Steex 제거(2026-08-02)로 잃는 것 ══
   _LoginLayout 이 app.min.css 를 싣던 시절 로그인 화면이 쓰던 클래스다.
   실제로 필요한 건 아래 셋뿐이었다 — .auth-page-wrapper/.auth-card 의 정품 규칙은
   데모 장식(원형 이펙트·유저 아바타 목록)용이고 우리 로그인 마크업에는 그 요소가 없다. */
.password-addon { z-index: 5; }          /* 비밀번호 표시 토글이 입력칸 위로 오게 */
.fs-3xl { font-size: 1.25rem !important; }
.fs-base { font-size: .8125rem !important; }

/* ══ ④ app.min.css 에만 있던 컴포넌트 이식 — 전면 전환 대비 (2026-08-01) ══
   _ViewStart 를 _LayoutErp5 로 돌리면 app.min.css 가 전 화면에서 빠진다.
   127개 뷰의 class 를 전수 대조해(뷰 480종 × CSS 6개) '새 셸에 없는 것' 10계열을 추렸고,
   여기 값은 전부 정품 app.min.css 원문 그대로다 — 눈으로 맞춘 근사치가 아니다.
   ※ 로그인(_LoginLayout)은 여전히 Steex 전체를 싣는 별도 셸이라 이 목록에서 제외했다.
   ※ 벤더 프리픽스(-webkit-*)는 뺐다 — 대상 브라우저(Chromium/Edge 최신)에 불필요하다. */

/* 아바타 스케일 — 사원목록·인사카드·조직도·Error·목록 빈 상태
   ★2026-08-02 정정: 원래 주석은 ".avatar-title 은 erp-steex.css 가 이미 갖고 있다" 였는데
     **사실이 아니었다.** erp-steex.css 에는 hover 규칙(a.card:hover .avatar-title)만 있고
     실제 정의가 없어 Steex 제거 때 이식에서 통째로 빠져 있었다.
     증상: 겉 상자만 7.5rem 정사각이고 안쪽 면이 가운데 정렬 없이 퍼져,
     이름 첫 글자가 원 밖으로 밀려났다(인사카드 프로필이 깨져 보였다). 쓰는 곳 6개 뷰 12곳.
     배경·글자색은 유틸리티(bg-*-subtle text-*)가 덮으므로 여기 값은 기본값일 뿐이다. */
.avatar-title {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-weight: 500;
    background-color: var(--tb-primary);
    color: var(--tb-secondary-bg);
}
.avatar-xs { height: 2rem;   width: 2rem; }
.avatar-sm { height: 3rem;   width: 3rem; }
.avatar-md { height: 4.5rem; width: 4.5rem; }
.avatar-lg { height: 6rem;   width: 6rem; }
.avatar-xl { height: 7.5rem; width: 7.5rem; }

/* 화살표 탭 — 상세 7화면(설비·금형·창고위치·교육·위험구역·수집장치·인사카드)의 탭 머리.
   활성 탭 아래 삼각형이 본문을 가리키는 형태라, 빠지면 어느 탭이 열렸는지 표가 안 난다 */
.arrow-navtabs .nav-item .nav-link { position: relative; text-align: center; }
.arrow-navtabs .nav-item .nav-link::before {
    content: ""; position: absolute; border: 6px solid transparent;
    bottom: -12px; left: 50%; transform: translateX(-50%);
}
.arrow-navtabs .nav-item .nav-link.active::before { border-top-color: var(--tb-primary); }
.nav-primary.arrow-navtabs  .nav-link.active::before { border-top-color: var(--tb-primary); }
.nav-secondary.arrow-navtabs .nav-link.active::before { border-top-color: var(--tb-secondary); }
.nav-success.arrow-navtabs  .nav-link.active::before { border-top-color: var(--tb-success); }
.nav-warning.arrow-navtabs  .nav-link.active::before { border-top-color: var(--tb-warning); }
.nav-danger.arrow-navtabs   .nav-link.active::before { border-top-color: var(--tb-danger); }
/* info 는 의도적으로 뺐다 — 인수인계 §5 "info 색 UI 사용 금지" */

/* 탭 색 계열 — 위 7화면이 .nav-primary 를 함께 쓴다 */
.nav-primary .nav-link.active { background-color: var(--tb-primary); }
.nav-primary.nav-tabs .nav-link.active {
    color: var(--tb-primary); background-color: var(--tb-secondary-bg);
}
.nav-primary.nav-tabs-custom .nav-link.active,
.nav-primary.nav-tabs-custom .nav-link:hover {
    color: var(--tb-primary); background-color: var(--tb-secondary-bg);
}
.nav-primary.nav-tabs-custom .nav-link.active::after,
.nav-primary.nav-tabs-custom .nav-link:hover::after { background-color: var(--tb-primary); }

/* 인사카드 활동 타임라인 — 세로선 + 원형 마디 */
.acitivity-timeline-2 { border-radius: 12px; position: relative; }
.acitivity-timeline-2 li {
    padding-bottom: 1.5rem; border-left: 1px solid #abaaed;
    position: relative; padding-left: 20px; margin-left: 10px;
}
.acitivity-timeline-2 li:last-child { border: 0; padding-bottom: 0; }
.acitivity-timeline-2 li::before {
    content: ""; width: 15px; height: 15px;
    background: var(--tb-secondary-bg); border: 1px solid var(--tb-primary);
    box-shadow: 3px 3px 0 #c1cff9; border-radius: 50%;
    position: absolute; left: -8px; top: 0;
}

/* 표 줄바꿈 금지 — 인사카드 요약표 */
.table-nowrap td, .table-nowrap th { white-space: nowrap; }

/* 카드 hover 부상 — 사원목록 요약 카드 */
.card-animate { transition: all .4s; }
.card-animate:hover {
    transform: translateY(calc(var(--tb-grid-gutter-width) * -.5));
    box-shadow: var(--tb-shadow-lg);
}

/* 유령 버튼(테두리·배경 없음) — 사원목록
   ★정품은 --tb-btn-* 로 썼지만 정식 Bootstrap 의 .btn 은 --bs-btn-* 만 읽는다.
     원문을 그대로 옮기면 조용히 죽는 규칙이 된다 — 위 .btn-subtle-* 와 같은 방식으로 변환했다.
     값은 secondary #64748B / hover 면 #EEF2F6 (btn-subtle-secondary 와 동일 계열). */
.btn-ghost-secondary {
    --bs-btn-color: #64748B;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #475569;
    --bs-btn-hover-bg: #EEF2F6;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #475569;
    --bs-btn-active-bg: #EEF2F6;
    --bs-btn-active-border-color: transparent;
}