/* erp-apple.css — 애플 디자인 언어 레이어 (2026-08-19 실험)
   ─────────────────────────────────────────────────────────────
   Apple HIG(WWDC Designing Fluid Interfaces · Principles of Great Design)를
   웹으로 옮긴 전면 리디자인. erp-bs5 → erp-steex '다음'에 로드되어 토큰과
   컴포넌트를 통째로 덮는다. ★이 파일 하나(+레이아웃의 link 한 줄)를 지우면
   기존 디자인(가이드 v1.4 팔레트)으로 완전히 되돌아간다.

   구성: ① 토큰(라이트) ② 토큰(다크) ③ 재질(상단바·모달 백드롭)
        ④ 형태(pill 버튼·카드·모달·드롭다운) ⑤ 사이드바(macOS 라이트 재질)
        ⑥ 표·배지·폼 ⑦ 모션(스프링 커브·press 피드백) ⑧ 접근성(reduced-*) */

/* ══ ① 토큰 — Apple 라이트 팔레트 ══════════════════════════════
   기준: iOS 시스템 컬러 + apple.com 웹 값. 채움색은 흰 글자 AA(4.5:1),
   emphasis 는 subtle 배경 위 글자 AA 를 실측해 골랐다. */
:root {
    /* brand = Apple Blue */
    --tb-primary: #0071E3;  --tb-primary-rgb: 0, 113, 227;
    --tb-primary-text-emphasis: #0066CC;
    --tb-primary-bg-subtle: #EAF2FD;  --tb-primary-border-subtle: #C9DFF9;
    --tb-link-color: #0066CC;  --tb-link-color-rgb: 0, 102, 204;
    --tb-link-hover-color: #004FA3;  --tb-link-hover-color-rgb: 0, 79, 163;

    /* status — Apple Green / Red / Orange (다크 텍스트 변형) */
    --tb-success: #248A3D;  --tb-success-rgb: 36, 138, 61;
    --tb-success-text-emphasis: #1E7B35;  --tb-success-bg-subtle: #E8F7EC;  --tb-success-border-subtle: #C6EAD0;
    --tb-danger: #D70015;   --tb-danger-rgb: 215, 0, 21;
    --tb-danger-text-emphasis: #C2000F;   --tb-danger-bg-subtle: #FDEBEA;   --tb-danger-border-subtle: #F7CBC9;
    --tb-warning: #B25000;  --tb-warning-rgb: 178, 80, 0;
    --tb-warning-text-emphasis: #A34A00;  --tb-warning-bg-subtle: #FFF1E5;  --tb-warning-border-subtle: #F6DBC2;

    /* secondary = Apple systemGray */
    --tb-secondary: #6E6E73;  --tb-secondary-rgb: 110, 110, 115;
    --tb-secondary-text-emphasis: #515154;  --tb-secondary-bg-subtle: #F2F2F7;  --tb-secondary-border-subtle: #E3E3E8;

    /* 중립 — apple.com 라이트 그레이 바닥 + 흰 카드 */
    --tb-body-bg: #F5F5F7;
    --tb-secondary-bg: #FFFFFF;
    --tb-tertiary-bg: #FAFAFC;
    --tb-body-color: #1D1D1F;  --tb-body-color-rgb: 29, 29, 31;
    --tb-heading-color: #1D1D1F;
    --tb-secondary-color: #6E6E73;
    --tb-tertiary-color: #AEAEB2;
    --tb-border-color: #E4E4E9;

    --erp-line-strong: #D2D2D7;
    --erp-row-line: #F0F0F3;
    --erp-row-hover: #F6F8FB;
    /* Apple 그림자 — 테두리 대신 아주 부드러운 2겹 그림자가 형태를 잡는다 */
    --erp-shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
    --erp-shadow-pop: 0 24px 64px rgba(0, 0, 0, .20), 0 4px 16px rgba(0, 0, 0, .08);
    --erp-col-line: rgba(29, 29, 31, .04);

    /* 사이드바 — 네이비 폐기, macOS 라이트 재질(레일 살짝 어둡게 · 패널 거의 흰색) */
    --erp-rail-bg: #EFEFF2;
    --erp-rail-deep: #EFEFF2;         /* 그라데이션 소거 — 한 면 재질 */
    --erp-rail-ink: #86868B;
    --erp-rail-ink-hover: #1D1D1F;
    --erp-menu-ink: #333336;

    /* Apple 모션 눈금 — 임계감쇠 스프링 근사 커브(시트·전환용) */
    --apple-ease: cubic-bezier(.32, .72, 0, 1);
    --apple-ease-out: cubic-bezier(.2, .9, .3, 1);
}
/* 활성 메뉴 soft 배경 (특정도 (0,2,1) — erp-steex 와 같은 선택자로 뒤에서 이긴다) */
html[data-theme][data-sidebar] { --tb-vertical-menu-item-active-bg: #EAF2FD; }

/* Bootstrap --bs-* 브리지 (erp-bs5 :root 리터럴을 덮는다) */
:root, [data-bs-theme=light] {
    --bs-primary: #0071E3;            --bs-primary-rgb: 0, 113, 227;
    --bs-primary-text-emphasis: #0066CC;
    --bs-primary-bg-subtle: #EAF2FD;  --bs-primary-border-subtle: #C9DFF9;
    --bs-secondary: #6E6E73;          --bs-secondary-rgb: 110, 110, 115;
    --bs-secondary-text-emphasis: #515154;
    --bs-secondary-bg-subtle: #F2F2F7; --bs-secondary-border-subtle: #E3E3E8;
    --bs-success: #248A3D;            --bs-success-rgb: 36, 138, 61;
    --bs-success-text-emphasis: #1E7B35;
    --bs-success-bg-subtle: #E8F7EC;  --bs-success-border-subtle: #C6EAD0;
    --bs-danger: #D70015;             --bs-danger-rgb: 215, 0, 21;
    --bs-danger-text-emphasis: #C2000F;
    --bs-danger-bg-subtle: #FDEBEA;   --bs-danger-border-subtle: #F7CBC9;
    --bs-warning: #B25000;            --bs-warning-rgb: 178, 80, 0;
    --bs-warning-text-emphasis: #A34A00;
    --bs-warning-bg-subtle: #FFF1E5;  --bs-warning-border-subtle: #F6DBC2;
    --bs-info: #0066CC;               --bs-info-rgb: 0, 102, 204;
    --bs-info-text-emphasis: #0066CC;
    --bs-info-bg-subtle: #EAF2FD;     --bs-info-border-subtle: #C9DFF9;
    --bs-light: #F5F5F7;              --bs-light-rgb: 245, 245, 247;
    --bs-dark: #1D1D1F;               --bs-dark-rgb: 29, 29, 31;

    --bs-body-bg: #F5F5F7;            --bs-body-bg-rgb: 245, 245, 247;
    --bs-body-color: #1D1D1F;         --bs-body-color-rgb: 29, 29, 31;
    --bs-secondary-color: #6E6E73;    --bs-tertiary-color: #AEAEB2;
    --bs-secondary-bg: #F2F2F7;       --bs-tertiary-bg: #FAFAFC;
    --bs-border-color: #E4E4E9;
    --bs-heading-color: #1D1D1F;
    --bs-link-color: #0066CC;         --bs-link-color-rgb: 0, 102, 204;
    --bs-link-hover-color: #004FA3;   --bs-link-hover-color-rgb: 0, 79, 163;
    --bs-border-radius: .75rem;
}
:root {
    --tb-info-bg-subtle: #EAF2FD;
    --tb-info-text-emphasis: #0066CC;
    --tb-light: #F5F5F7;
    --tb-box-shadow-lg: var(--erp-shadow-pop);
}

/* ══ ② 토큰 — Apple 다크 팔레트 (iOS 다크 시스템 컬러) ══════════
   선택자는 erp-steex 다크 블록과 동일 — 순서로 이긴다. */
[data-bs-theme="dark"],
html[data-bs-theme="dark"][data-theme] {
    --tb-primary: #0A84FF;  --tb-primary-rgb: 10, 132, 255;
    --tb-primary-text-emphasis: #409CFF;  --tb-primary-bg-subtle: #16325A;  --tb-primary-border-subtle: #1F4478;
    --tb-success: #30D158;  --tb-success-rgb: 48, 209, 88;
    --tb-success-text-emphasis: #30D158;  --tb-success-bg-subtle: #123B22;
    --tb-danger: #FF453A;   --tb-danger-rgb: 255, 69, 58;
    --tb-danger-text-emphasis: #FF6961;   --tb-danger-bg-subtle: #3E1E1D;
    --tb-warning: #FF9F0A;  --tb-warning-rgb: 255, 159, 10;
    --tb-warning-text-emphasis: #FF9F0A;  --tb-warning-bg-subtle: #3A2B12;
    --tb-secondary-text-emphasis: #98989D;  --tb-secondary-bg-subtle: #2C2C2E;
    --tb-link-color: #409CFF;  --tb-link-color-rgb: 64, 156, 255;
    --tb-link-hover-color: #6FB4FF;  --tb-link-hover-color-rgb: 111, 180, 255;

    /* 중립 — iOS 다크: 바닥 거의 검정 · 카드 #1C1C1E · 한 단계 위 #242427 */
    --tb-body-bg: #111113;
    --tb-secondary-bg: #1C1C1E;
    --tb-tertiary-bg: #242427;
    --tb-body-color: #F5F5F7;  --tb-body-color-rgb: 245, 245, 247;
    --tb-heading-color: #F5F5F7;
    --tb-secondary-color: #98989D;
    --tb-tertiary-color: #636366;
    --tb-border-color: #303034;
    --erp-line-strong: #3D3D42;
    --erp-row-line: #26262A;
    --erp-row-hover: #232327;
    --erp-shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
    --erp-shadow-pop: 0 24px 64px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .35);
    --erp-col-line: rgba(255, 255, 255, .05);

    --erp-menu-ink: #C7C7CC;
    --tb-vertical-menu-item-active-bg: #16325A;
    --erp-rail-bg: #161619;
    --erp-rail-deep: #161619;
    --erp-rail-ink: #98989D;
    --erp-rail-ink-hover: #F5F5F7;
}
[data-bs-theme=dark] {
    --bs-primary: #0A84FF;   --bs-primary-rgb: 10, 132, 255;
    --bs-success: #30D158;   --bs-success-rgb: 48, 209, 88;
    --bs-warning: #FF9F0A;   --bs-warning-rgb: 255, 159, 10;
    --bs-danger: #FF453A;    --bs-danger-rgb: 255, 69, 58;
    --bs-light-rgb: 36, 36, 39;

    /* ★중립 --bs-* 다크 브리지 (2026-08-24) — 이 블록에 **색상 5개만** 있고 중립이 빠져 있었다.
       위 라이트 블록의 선택자가 `:root, [data-bs-theme=light]` 라 **다크에서도 `:root` 로 매치**되고,
       erp-bs5 의 `[data-bs-theme=dark]` 브리지와 특이도가 같아(0,1,0) 나중에 로드되는 이 파일이 이긴다.
       그래서 다크인데 --bs-body-color 가 #1D1D1F(라이트)로 남았다 — 실측 9개 전부 라이트값이었다.
       화면 대부분은 --tb-* 를 써서 티가 안 났고, **--bs-* 를 직접 쓰는 것들만 묻혔다**:
         · .form-select 글자(Bootstrap 기본 `color: var(--bs-body-color)`) — 드롭다운이 안 보였다
         · 순서도 도형 이름(color 상속) · .erp-top-title · .erp-panel-head · .table-hover 글자
       값은 같은 블록의 --tb-* 를 그대로 잇는다(§8.1-2 — 색은 토큰으로, hex 직접 입력 금지). */
    --bs-body-bg: var(--tb-body-bg);
    --bs-body-bg-rgb: 17, 17, 19;                      /* #111113 — --tb-body-bg 에 rgb 짝이 없어 숫자로 둔다 */
    --bs-body-color: var(--tb-body-color);
    --bs-body-color-rgb: var(--tb-body-color-rgb);
    --bs-secondary-color: var(--tb-secondary-color);
    --bs-tertiary-color: var(--tb-tertiary-color);
    --bs-secondary-bg: var(--tb-secondary-bg-subtle);  /* 라이트 짝이 #F2F2F7 = secondary-bg-subtle 이다 */
    --bs-tertiary-bg: var(--tb-tertiary-bg);
    --bs-border-color: var(--tb-border-color);
    --bs-heading-color: var(--tb-heading-color);
    --bs-link-color: var(--tb-link-color);
    --bs-link-color-rgb: var(--tb-link-color-rgb);
    --bs-link-hover-color: var(--tb-link-hover-color);
    --bs-link-hover-color-rgb: var(--tb-link-hover-color-rgb);
}

/* ══ ③ 재질 — 월페이퍼 + 유리 (Materials & depth) ══════════════
   macOS 문법: 은은한 그라데이션 벽지 위에 유리 패널(사이드바·상단바·메뉴)이 뜬다.
   벽지가 있어야 blur 가 '유리'로 읽힌다 — 단색 위 blur 는 아무것도 안 보인다.
   ※ backdrop-filter 는 OS 투명 효과 설정과 무관하게 동작한다. 1차에서
     prefers-reduced-transparency 게이트에 전부 숨었던 것을 실험 기간엔 연다. */
/* 상단 라디얼은 뺐다(2026-08-19 사용자 지정 「복잡해 보여」) — 위는 조용히, 아래만 은은하게 */
body {
    background:
        radial-gradient(950px 680px at -8% 108%, rgba(175, 130, 255, .24), transparent 60%),
        radial-gradient(760px 560px at 55% 118%, rgba(255, 145, 180, .16), transparent 60%),
        #EFEFF4;
    background-attachment: fixed;
}
[data-bs-theme=dark] body {
    background:
        radial-gradient(950px 680px at -8% 108%, rgba(120, 70, 220, .22), transparent 60%),
        radial-gradient(760px 560px at 55% 118%, rgba(200, 60, 120, .12), transparent 60%),
        #0B0B0E;
    background-attachment: fixed;
}
/* 로그인도 같은 벽지 — .auth-page-wrapper 의 단색을 걷어 body 벽지가 비친다 */
.auth-page-wrapper { background-color: transparent; }

/* ── 프레임 눈금 = 16px 하나 (2026-08-19 사용자 지정 「여백 일정하게」) ──
   화면 가장자리↔사이드바 · 사이드바↔본문 · 본문↔오른끝 · 상단바 위 · 상단바↔본문 · 본문 아래
   전부 16. 떠 있는 요소 사이의 숨은 한 가지 수만 쓴다. */

/* 상단바 = 떠 있는 유리 툴바 — 사이드바와 같은 문법(유리 · 라운드 · 그림자).
   좌우는 본문 카드 열과 정확히 같은 선(좌 = 사이드바 오른끝 + 16 · 우 = 뷰포트 − 16). */
/* ★배경 = 카드와 같은 토큰 면 (2026-08-19 사용자 지정 「패널·상단바·카드 색 통일」).
   불투명이 되므로 블러는 걷는다 — 유리는 사이드바 레일 열에만 남는다. */
#page-topbar {
    top: 16px; right: 16px;
    left: calc(var(--tb-twocolumn-menu-iconview-width, 64px) + var(--tb-twocolumn-menu-width, 216px) + 32px);
    border-radius: 12px;
    background: var(--tb-secondary-bg);
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .08);
}
[data-bs-theme=dark] #page-topbar {
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .40);
}
/* 바 안쪽 여백은 좌우 대칭 16 (기존 규칙: 오른쪽만 28) */
.navbar-header { padding: 0 16px; }
/* 본문 상자 여백 — 위 = 상단바 아래끝(16+64+보더2) + 16 / 좌우 = 4(+컨테이너 12 = 16) / 아래 = 16 */
.page-content {
    padding-top: calc(var(--tb-header-height, 64px) + 34px);
    padding-left: 4px; padding-right: 4px;
    padding-bottom: 16px;
}

/* 모달 백드롭 — 딤 + 블러로 배경을 뒤로 민다(모달 과업 집중).
   블러는 .show 에서만 걸어 재질이 '도착'하는 느낌을 준다(materialize). */
.modal-backdrop {
    background-color: rgba(22, 22, 24, .38);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: opacity .2s linear, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.modal-backdrop.show {
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}

/* ══ ④ 형태 — 라운드 어휘 ══════════════════════════════════════
   Apple 형태 언어: 버튼 pill · 카드 14 · 모달 18 · 팝오버 14 · 입력 10. */

/* 카드 — 무테에 가깝게(헤어라인) + 부드러운 그림자. 선이 아니라 면이 형태를 잡는다.
   ★정식 Bootstrap 은 --bs-card-* 만 읽는다(--tb-card-* 는 Steex 어휘 — 실측으로 확인).
     스크롤 잘림(overflow:clip)을 쓰는 .card-fill 의 안쪽 라운드는 erp-steex 가
     --tb-card-inner-border-radius 를 읽으므로 그 변수도 같이 준다. */
/* 라운드 눈금 = 12 하나 (사이드바·상단바·카드 동일 — 2026-08-19 사용자 지정 「곡선 살짝 약하게」) */
.card {
    --bs-card-border-radius: 12px;
    --bs-card-inner-border-radius: 11px;
    --bs-card-border-color: rgba(0, 0, 0, .04);
    --tb-card-inner-border-radius: 11px;
    box-shadow: var(--erp-shadow-card);
}
[data-bs-theme=dark] .card { --bs-card-border-color: rgba(255, 255, 255, .06); }

/* 컨트롤 라운드 = 10 하나 — 버튼·입력칸 동일 (2026-08-19 사용자 지정, pill 폐기).
   면(카드·사이드바·상단바)은 12, 컨트롤은 10 — 두 눈금 체계다. */
.btn, .form-control, .form-select { border-radius: 10px; }

/* 버튼 색 — erp-bs5 리터럴 교체. hover 는 apple.com 처럼 반 단계만 움직인다 */
.btn-primary {
    --bs-btn-bg: #0071E3; --bs-btn-border-color: #0071E3;
    --bs-btn-hover-bg: #0077ED; --bs-btn-hover-border-color: #0077ED;
    --bs-btn-active-bg: #0064C8; --bs-btn-active-border-color: #0064C8;
    --bs-btn-disabled-bg: #0071E3; --bs-btn-disabled-border-color: #0071E3;
    --bs-btn-focus-shadow-rgb: 0, 113, 227;
}
[data-bs-theme=dark] .btn-primary {
    --bs-btn-bg: #0A84FF; --bs-btn-border-color: #0A84FF;
    --bs-btn-hover-bg: #2B93FF; --bs-btn-hover-border-color: #2B93FF;
    --bs-btn-active-bg: #0071E0; --bs-btn-active-border-color: #0071E0;
    --bs-btn-disabled-bg: #0A84FF; --bs-btn-disabled-border-color: #0A84FF;
}
.btn-outline-primary {
    --bs-btn-color: #0066CC; --bs-btn-border-color: #0071E3;
    --bs-btn-hover-bg: #0071E3; --bs-btn-hover-border-color: #0071E3;
    --bs-btn-active-bg: #0066CC; --bs-btn-active-border-color: #0066CC;
    --bs-btn-focus-shadow-rgb: 0, 113, 227;
}
.btn-secondary {
    --bs-btn-bg: #6E6E73; --bs-btn-border-color: #6E6E73;
    --bs-btn-hover-bg: #616166; --bs-btn-hover-border-color: #616166;
    --bs-btn-active-bg: #515154; --bs-btn-active-border-color: #515154;
}
.btn-success { --bs-btn-bg: #248A3D; --bs-btn-border-color: #248A3D; --bs-btn-hover-bg: #1E7B35; --bs-btn-hover-border-color: #1E7B35; --bs-btn-active-bg: #196C2E; --bs-btn-active-border-color: #196C2E; }
.btn-danger  { --bs-btn-bg: #D70015; --bs-btn-border-color: #D70015; --bs-btn-hover-bg: #C2000F; --bs-btn-hover-border-color: #C2000F; --bs-btn-active-bg: #AD000C; --bs-btn-active-border-color: #AD000C; }
.btn-warning { --bs-btn-bg: #B25000; --bs-btn-border-color: #B25000; --bs-btn-color: #fff; --bs-btn-hover-bg: #A34A00; --bs-btn-hover-border-color: #A34A00; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #944300; --bs-btn-active-border-color: #944300; --bs-btn-active-color: #fff; }
/* ── 보조 버튼 = 전부 「흰색 + hover 회색」 (2026-08-20 사용자 지정) ─────────
   평상시 = 보기설정 버튼(흰 면 + 헤어라인), hover = 엑셀 업로드 버튼(#F2F2F7 회색 채움).
   의미색은 글자색으로만 남긴다 — 틴트 채움을 걷어 툴바가 조용해진다.
   주 액션(btn-primary 파랑)·파괴 채움(btn-danger)은 위계 유지를 위해 그대로 둔다. */
:root {
    --apple-btn-bg: var(--tb-secondary-bg);            /* #fff */
    --apple-btn-hover-bg: var(--tb-secondary);   /* #6E6E73 짙은 회색 — 옛 엑셀 업로드 hover */
    --apple-btn-active-bg: #515154;
    --apple-btn-border: var(--tb-border-color);
    --apple-btn-hover-border: var(--tb-secondary);
}
[data-bs-theme="dark"], html[data-bs-theme="dark"][data-theme] {
    --apple-btn-bg: #242427;
}
.btn.btn-light, .btn.btn-ghost-secondary,
.btn.btn-subtle-primary, .btn.btn-subtle-secondary, .btn.btn-subtle-success,
.btn.btn-subtle-danger, .btn.btn-subtle-warning, .btn.btn-subtle-info {
    --bs-btn-bg: var(--apple-btn-bg);
    --bs-btn-border-color: var(--apple-btn-border);
    --bs-btn-hover-bg: var(--apple-btn-hover-bg);
    --bs-btn-hover-border-color: var(--apple-btn-hover-border);
    --bs-btn-active-bg: var(--apple-btn-active-bg);
    --bs-btn-active-border-color: var(--apple-btn-hover-border);
}
/* 글자색 — 의미는 여기서만 말한다. hover·active 에도 같은 색 유지 */
.btn.btn-light, .btn.btn-ghost-secondary, .btn.btn-subtle-secondary {
    --bs-btn-color: var(--tb-secondary-text-emphasis);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
.btn.btn-subtle-primary, .btn.btn-subtle-info {
    --bs-btn-color: var(--tb-primary-text-emphasis);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
.btn.btn-subtle-success {
    --bs-btn-color: var(--tb-success-text-emphasis);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
.btn.btn-subtle-danger {
    --bs-btn-color: var(--tb-danger-text-emphasis);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
.btn.btn-subtle-warning {
    --bs-btn-color: var(--tb-warning-text-emphasis);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
/* 고스트는 평상시 테두리 없이 — hover 에서 회색 면만 */
.btn.btn-ghost-secondary { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; }

/* 모달·드롭다운·팝오버 — 큰 면일수록 두껍게(라운드·그림자 크게) */
.modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: var(--erp-shadow-pop);
}
.swal2-popup { border-radius: 18px; box-shadow: var(--erp-shadow-pop); }
.dropdown-menu, .popover {
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: var(--erp-shadow-pop);
    padding: 6px;
    /* ★거의 불투명(.96) — 상단바 드롭다운은 backdrop-filter 조상(#page-topbar) '안'이라
       Chromium 중첩 제약으로 뒤 콘텐츠가 블러되지 않는다. .78 로 두면 blur 없는 맹반투명이 되어
       뒤 행의 hover 까지 비쳤다(2026-08-19 실측). blur 는 조상 밖 메뉴에서만 덤으로 산다. */
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
}
[data-bs-theme=dark] .dropdown-menu, [data-bs-theme=dark] .popover {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(40, 40, 44, .96);
}
/* 메뉴 항목도 라운드 — Apple 컨텍스트 메뉴 문법 */
.dropdown-item { border-radius: 9px; }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--tb-primary); }
.erp-cfg-pop { border-radius: 14px; }
.erp-pal-box { border-radius: 18px; }

/* 배지·태그 — 캡슐 폐기(2026-08-19 사용자 지정), 라운드 눈금에 편입.
   높이 20px 칩이라 컨트롤(10)의 비례 축소값 6 을 쓴다 — 10 이면 반원(=캡슐)이 되어 버린다. */
.badge { border-radius: 6px; padding: 0 8px; }
.tag { border-radius: 6px; }
/* .tag 색 — erp-bs5 리터럴을 Apple 틴트로 */
.tag.ok   { background: #E8F7EC; color: #1E7B35; }
.tag.warn { background: #FFF1E5; color: #A34A00; }
.tag.bad  { background: #FDEBEA; color: #C2000F; }
.tag.info { background: #EAF2FD; color: #0066CC; }
.tag.mut  { background: #F2F2F7; color: #515154; }
.tag.sell { background: #EAF2FD; color: #0066CC; }
.tag.buy  { background: #FFF1E5; color: #A34A00; }
.tag.mix  { background: #E8F7EC; color: #1E7B35; }
[data-bs-theme=dark] .tag.ok,
[data-bs-theme=dark] .tag.mix  { background: rgba(48, 209, 88, .16); color: #30D158; }
[data-bs-theme=dark] .tag.warn,
[data-bs-theme=dark] .tag.buy  { background: rgba(255, 159, 10, .16); color: #FF9F0A; }
[data-bs-theme=dark] .tag.bad  { background: rgba(255, 69, 58, .16); color: #FF6961; }
[data-bs-theme=dark] .tag.info,
[data-bs-theme=dark] .tag.sell { background: rgba(10, 132, 255, .16); color: #409CFF; }
[data-bs-theme=dark] .tag.mut  { background: rgba(142, 142, 147, .16); color: #98989D; }

/* ══ ⑤ 사이드바 — macOS 떠 있는 유리 패널 ═════════════════════
   네이비 기둥 폐기. 벽지에서 사방 10px 떨어져 뜨는 라운드 글래스 —
   macOS Sonoma 설정/Finder 사이드바 문법. 레일 열은 유리 그대로,
   패널 열은 반투명 흰 겹을 한 장 더 얹어 두 기둥이 구분된다. */
/* (아래끝 45px + 버전 스트립은 2026-08-19 당일 원복 — 화면에 따라 카드 라인이 달라 어긋나 보였다.
   버전 정보는 계정 드롭다운 하단으로 옮겼다.)
   ★배경과 갈라 보이게 불투명도를 올린다(.48→.66) — 유리 느낌은 남기되 면이 서게 (사용자 지정) */
.erp-sidebar {
    top: 16px; left: 16px; bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    backdrop-filter: blur(32px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 12px 44px rgba(0, 0, 0, .13);
}
[data-bs-theme=dark] .erp-sidebar {
    background: rgba(24, 24, 28, .74);
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 12px 44px rgba(0, 0, 0, .5);
}
/* 레일 열(대메뉴+로고)에 옅은 잉크 틴트 한 겹 — 패널(중·소메뉴)과 면이 갈린다
   (2026-08-19 사용자 지정 「대메뉴·중메뉴 색 차이 조금만 더」)
   ★+경계 헤어라인 (2026-08-20 사용자 「대메뉴 테두리 선을 조금만 더」) — 틴트만으로는
   경계가 물러서 레일-패널 사이에 선을 한 줄 세운다. 로고 밴드(.erp-brand)에도 같이 걸어야
   기둥 전체에 끊김 없이 이어진다. */
.erp-rail, .erp-brand {
    background: rgba(120, 120, 128, .10);
    border-right: 1px solid rgba(0, 0, 0, .08);
}
[data-bs-theme=dark] .erp-rail, [data-bs-theme=dark] .erp-brand {
    background: rgba(0, 0, 0, .28);
    border-right-color: rgba(255, 255, 255, .08);
}
/* 패널(중·소메뉴) = 카드와 같은 토큰 면 — 상단바·카드와 색 통일(사용자 지정) */
.erp-panel {
    background: var(--tb-secondary-bg);
    border-right: 0;
}
/* erp-bs5 의 html[data-bs-theme=light] .erp-panel { background:#fff } (0,2,1) 이 위 (0,1,0)보다 세다 —
   같은 특정도로 되짚는다 */
html[data-bs-theme=light] .erp-panel { background: var(--tb-secondary-bg); }

/* 버전 정보 — 계정 드롭다운 하단 한 줄 (사이드바 아래 스트립은 원복) */
.erp-version-item { font-size: 11px; color: var(--tb-tertiary-color); }
/* 유리 위 hover — 불투명 회색 대신 잉크 틴트 */
.erp-item:hover { background: rgba(0, 0, 0, .05); }
[data-bs-theme=dark] .erp-item:hover { background: rgba(255, 255, 255, .07); }

/* 즐겨찾기 별 — Apple systemOrange(App Store 별점 골드).
   warning 토큰(#B25000, 황갈)은 텍스트 AA 용으로 눌러 둔 값이라 별이 탁했다 —
   별은 장식 아이콘이라 순정 시스템 컬러를 그대로 쓴다(다크는 systemOrange dark). */
.erp-fav-btn.on, .erp-fav-btn:hover { color: #FF9500; }
[data-bs-theme=dark] .erp-fav-btn.on,
[data-bs-theme=dark] .erp-fav-btn:hover { color: #FF9F0A; }

/* 본문 오프셋 — 사이드바 오른끝(16+280=296)에서 시작.
   본문 안쪽 여백(page-content 4 + container 12 = 16)이 더해져 카드 왼끝은 312,
   오른끝은 뷰포트−16 — 프레임 눈금 16 하나로 전부 통일(§③).
   상단바 좌우도 같은 선에 맞춘다. 모바일(<992)은 아래 리셋 블록. */
.main-content { margin-left: calc(var(--tb-twocolumn-menu-iconview-width, 64px) + var(--tb-twocolumn-menu-width, 216px) + 16px); }

/* 모바일 — 떠 있는 프레임 해제(기존 셸의 left:0 !important 는 left 만 되돌린다) */
@media (max-width: 991.98px) {
    #page-topbar { top: 0; right: 0; border-radius: 0; border: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); }
    .page-content { padding-top: calc(var(--tb-header-height, 64px) + 16px); }
    .erp-sidebar { top: 0; left: 0; bottom: 0; border-radius: 0 12px 12px 0; }
}

/* 레일 hover — 어두운 기둥 전제(흰 8%)를 라이트 재질용으로 교체 */
.erp-rail-item:hover { color: var(--erp-rail-ink-hover); background: rgba(0, 0, 0, .05); }
[data-bs-theme=dark] .erp-rail-item:hover { background: rgba(255, 255, 255, .08); }
.erp-rail-item { border-radius: 12px; }
.erp-rail-item.active { color: #fff; background: var(--tb-primary); }

/* 로고 — 흰 녹아웃(어두운 레일 전제)을 해제, 원본 북블루 마크 그대로.
   다크에서는 다시 흰 녹아웃(어두운 면 위 표준 처리). */
.erp-brand img { filter: none; }
[data-bs-theme=dark] .erp-brand img { filter: brightness(0) invert(1); }

/* 소메뉴 활성 = macOS 사이드바 선택(액센트 채움 + 흰 글자). 좌측 바는 걷는다 */
.erp-item.active {
    color: #fff; font-weight: 600;
    background: var(--tb-primary);
}
.erp-item.active::before { content: none; }
/* 활성(파랑 채움) 안의 보조 글자 — 순서도 패널의 코드(text-secondary) 등이 회색으로 남았다.
   Bootstrap text-* 유틸리티가 !important 라 같은 강도로만 이길 수 있다.
   순백 통일(2026-08-20 사용자 지정 — 75% 는 색이 달라 보였다). */
.erp-item.active :is(.text-secondary, .text-muted, .text-body-secondary) { color: #fff !important; }
.erp-item { border-radius: 8px; }

/* 패널 바닥(업무 순서도) — 상자 문법(테두리+면)을 걷고 소메뉴 행과 같은 조용한 문법으로
   (2026-08-20 사용자 「디자인 좀 별로」). 카드 톤 패널 안의 흰 상자는 액자 속 액자였다.
   구분선은 풀블리드 대신 콘텐츠 인셋(12px) 헤어라인 — macOS 사이드바 구획선 문법. */
.erp-panel-foot { border-top: 0; position: relative; }
.erp-panel-foot::before {
    content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px;
    background: var(--tb-border-color);
}
.erp-panel-foot-btn { border: 0; background: transparent; border-radius: 8px; font-weight: 600; }
.erp-panel-foot-btn:hover { background: rgba(0, 0, 0, .05); color: inherit; }
[data-bs-theme=dark] .erp-panel-foot-btn:hover { background: rgba(255, 255, 255, .07); }
/* 활성 = 소메뉴 활성과 같은 액센트 채움 — 꺾쇠까지 순백으로 */
.erp-panel-foot-btn.active { color: #fff; background: var(--tb-primary); }
.erp-panel-foot-btn.active .erp-panel-foot-go { color: #fff; }

.erp-menu-result { border-radius: 8px; }
.erp-menu-result:hover, .erp-menu-result.cursor { color: var(--tb-primary-text-emphasis); }

/* 상단바 아이콘 버튼 — 테두리 원을 걷고 iOS 툴바 고스트로 */
#page-topbar .btn-topbar.rounded-circle {
    border: 0; background: transparent;
    width: 36px; height: 36px;
    color: #515154;
}
#page-topbar .btn-topbar.rounded-circle:hover,
#page-topbar .btn-topbar.rounded-circle[aria-expanded="true"] {
    background: rgba(0, 0, 0, .06);
    border-color: transparent;
    color: #1D1D1F;
}
[data-bs-theme=dark] #page-topbar .btn-topbar.rounded-circle { color: #98989D; }
[data-bs-theme=dark] #page-topbar .btn-topbar.rounded-circle:hover,
[data-bs-theme=dark] #page-topbar .btn-topbar.rounded-circle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .1); color: #F5F5F7;
}
.erp-account-btn:hover { background: rgba(0, 0, 0, .06); }
[data-bs-theme=dark] .erp-account-btn:hover { background: rgba(255, 255, 255, .1); }

/* 크럼·제목 — iOS 라지 타이틀: 크게·무겁게·음수 자간(옵티컬 트래킹) */
.erp-top-title { font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.erp-crumb { color: #AEAEB2; }
.erp-crumb b { color: #6E6E73; }
[data-bs-theme=dark] .erp-crumb { color: #636366; }
[data-bs-theme=dark] .erp-crumb b { color: #98989D; }
.card-title, .list-toolbar .card-title { font-weight: 700; letter-spacing: -.02em; }

/* ══ ⑥ 표·폼 ══════════════════════════════════════════════════ */
/* 표 글자 — 순흑 대신 Apple 잉크. erp-bs5 리터럴 교체 */
.table { --bs-table-color: #1D1D1F; }
[data-bs-theme=dark] .table { --bs-table-color: #E8E8ED; }
.table-hover { --bs-table-hover-bg: #F6F8FB; }
[data-bs-theme=dark] .table-hover { --bs-table-hover-bg: #232327; }

/* ── 상태바(행 표시)를 카드 푸터로 접합 (2026-08-19 사용자 지정) ──────────
   .erp-statusbar 는 113개 뷰에서 카드의 '다음 형제'다 — 마크업을 안 고치고 :has 로
   카드 아래 모서리를 펴고, 상태바가 카드면·테두리·아래 라운드를 이어받아 한 몸이 된다.
   높이는 손대지 않는다: erp-ux.js 가 상태바 아래끝을 프레임(16)에 맞추고 있어
   접합하는 순간 카드+푸터 아래끝 = 사이드바 아래끝이 된다. */
.card-fill:has(+ .erp-statusbar) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
}
.card-fill:has(+ .erp-statusbar) > .card-body { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.card-fill + .erp-statusbar {
    background: var(--tb-secondary-bg);
    border: 1px solid rgba(0, 0, 0, .04);
    border-top: 1px solid var(--erp-row-line);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--erp-shadow-card);
    padding: 6px 16px;
}
[data-bs-theme=dark] .card-fill + .erp-statusbar { border-color: rgba(255, 255, 255, .06); border-top-color: var(--erp-row-line); }
/* erp-bs5 의 html .erp-statusbar { padding 좌우 0 } (0,1,1) 을 (0,2,0)+html 로 확실히 이긴다 */
html .card-fill + .erp-statusbar { padding-left: 16px; padding-right: 16px; }

/* 표 머리글 — Apple 리스트 문법: 회색 띠가 아니라 카드와 같은 면 + 헤어라인.
   sticky 라 불투명해야 하므로 카드색(토큰)으로 — 다크는 토큰이 알아서 #1C1C1E. */
.table-bottom-border > thead > tr > th,
html .card-fill .table > thead > tr > th,
.card-fill thead th { background: var(--tb-secondary-bg); }
html[data-bs-theme=dark] .card-fill .table > thead > tr > th { background-color: var(--tb-secondary-bg); }

/* 입력칸·셀렉트 = 보조 버튼과 같은 면 (2026-08-20 사용자 지정 「보기설정 색깔로」)
   — 흰 면 + 헤어라인. 그레이 필(iOS)은 폐기. 다크는 버튼과 같은 #242427. */
.form-control:not([readonly]):not(.form-control-plaintext), .form-select {
    background-color: var(--apple-btn-bg);
    border-color: var(--apple-btn-border);
}
/* 검색창도 컨트롤 눈금 10 (캡슐 폐기 — 2026-08-19 사용자 지정.
   .erp-menu-search 는 erp-steex 가 6px 를 (0,2,0)으로 갖고 있어 여기서 같은 특정도로 되짚는다) */
.search-box .form-control, .apps-search > input, .erp-menu-search .form-control { border-radius: 10px; }

/* 포커스 — 파란 테두리만, 헤일로(빛번짐) 없음 (2026-08-20 사용자 「테두리 선만 파랗게」).
   box-shadow:none 을 명시해야 한다 — Bootstrap 기본 포커스 그림자가 되살아난다.
   erp-steex 와 같은 특정도 선택자로 뒤에서 이긴다. */
.form-control:not([readonly]):not(.form-control-plaintext):focus, .form-select:focus {
    background-color: var(--tb-secondary-bg);
    border-color: var(--tb-primary);
    box-shadow: none;
}
.form-control:focus, .form-select:focus {
    border-color: var(--tb-primary);
    box-shadow: none;
}
/* ★오류 칸은 빨강이 이긴다 (2026-08-20 사용자 「빈칸도 오류지? 근데 파란 표시 뜨던데」) —
   빨간 규칙은 erp-steex 에 있는데 이 파일(뒤 순서)의 파란 포커스와 「입력칸 = 버튼 면」의
   테두리(위 절)가 같은 특정도로 덮었다. 포커스만이 아니라 **평상시(rest)도** 여기서 되세운다.
   is-invalid 쪽 :not([readonly]) 는 의미가 아니라 특정도 맞추기 — 덮는 규칙과 같게. */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.form-control.is-invalid:not([readonly]),
.form-select.is-invalid {
    border-color: var(--tb-form-invalid-border-color);
}
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus,
.form-control.is-invalid:not([readonly]):focus,
.form-select.is-invalid:focus {
    border-color: var(--tb-form-invalid-border-color);
    box-shadow: none;
}
.form-check-input:checked { background-color: var(--tb-primary); border-color: var(--tb-primary); }
.form-check-input:focus { border-color: var(--tb-primary); box-shadow: 0 0 0 4px rgba(var(--tb-primary-rgb), .22); }
/* 스위치 켜짐 = Apple 토글 그린 */
.form-switch .form-check-input:checked { background-color: #34C759; border-color: #34C759; }

/* 액센트 리터럴 잔재 교체 */
.nav-pills { --bs-nav-pills-link-active-bg: var(--tb-primary); }
.pagination { --bs-pagination-active-bg: var(--tb-primary); --bs-pagination-active-border-color: var(--tb-primary); --bs-pagination-color: var(--tb-link-color); --bs-pagination-focus-box-shadow: 0 0 0 4px rgba(var(--tb-primary-rgb), .22); }
.progress { --bs-progress-bar-bg: var(--tb-primary); }
/* 좌측 마스터 목록(list-group) 활성 — 파랑 채움이면 안의 보조 글자(text-secondary)·배지가
   그대로 남아 안 읽힌다(라인별 제품등록 실측). BOM 구성도(.bom-root.active) 문법으로:
   옅은 채움 + 왼쪽 3px 파랑 바, 글자는 잉크 그대로. */
.list-group {
    --bs-list-group-active-bg: var(--tb-primary-bg-subtle);
    --bs-list-group-active-color: var(--tb-body-color);
    --bs-list-group-active-border-color: var(--tb-border-color);
}
.list-group-item.active { box-shadow: inset 3px 0 0 var(--tb-primary); }
.search-box .search-icon { color: #AEAEB2; }

/* 인사카드 타임라인 — 보라 리터럴(#abaaed)을 토큰 재질로 */
.acitivity-timeline-2 li { border-left-color: var(--tb-border-color); }
.acitivity-timeline-2 li::before { box-shadow: 0 0 0 4px rgba(var(--tb-primary-rgb), .15); }

/* 텍스트 선택 — 액센트 틴트 */
::selection { background: rgba(0, 113, 227, .22); }
[data-bs-theme=dark] ::selection { background: rgba(10, 132, 255, .35); }

/* ══ ⑦ 모션 — Response · 스프링 커브 · press 피드백 ═════════════
   피드백은 눌리는 순간(:active) 즉시, 곡선은 Apple 시트 커브. */
.btn {
    transition: transform .12s var(--apple-ease-out),
                background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}
.btn:not(:disabled):active { transform: scale(.965); }
.icon-act { transition: color .12s ease, transform .1s var(--apple-ease-out); }
.icon-act:active { transform: scale(.88); }
.erp-rail-item { transition: background .18s var(--apple-ease-out), color .18s var(--apple-ease-out), transform .12s var(--apple-ease-out); }
.erp-rail-item:active { transform: scale(.94); }

/* 드롭다운 materialize — 트리거 쪽(위)에서 태어난다(spatial consistency).
   ★keyframe 에 transform 을 쓰면 안 된다: Popper 가 인라인 transform 으로 잡은 위치를
     애니메이션이 덮어써 메뉴가 원점(상단)에 떴다가 착지한다(2026-08-19 실측).
     별도 속성인 scale 은 Popper 의 transform 과 '합성'되므로 안전하다. */
.dropdown-menu.show {
    animation: erpAppleMenuIn .16s var(--apple-ease-out);
    transform-origin: top;
}
@keyframes erpAppleMenuIn {
    from { opacity: 0; scale: .97; }
    to   { opacity: 1; scale: 1; }
}

/* 모달 — 아래에서 살짝 떠오르며 스케일 인(시트 문법). Bootstrap 기본 -50px 낙하 대체 */
.modal.fade .modal-dialog {
    transform: translateY(16px) scale(.97);
    transition: transform .3s var(--apple-ease);
}
.modal.show .modal-dialog { transform: none; }

/* 페이지 진입 — 부드러운 페이드만.
   ★transform 을 쓰면 안 된다(2026-08-19 실측): fill 상태의 transform 애니메이션이
     containing block 을 유지해, 컨테이너 안 position:fixed 모달이 뷰포트가 아니라
     본문 기준으로 떠 버린다 — 「모달이 안 열리는」 증상의 원인이었다. */
.page-content > .container-fluid { animation: erpPageIn .28s ease-out; }
@keyframes erpPageIn { from { opacity: 0; } }

/* ══ ⑧ 접근성 — reduced-motion / reduced-transparency / contrast ══ */
@media (prefers-reduced-motion: reduce) {
    .btn, .icon-act, .erp-rail-item { transition-duration: .01ms; }
    .btn:not(:disabled):active, .icon-act:active, .erp-rail-item:active { transform: none; }
    .dropdown-menu.show { animation: none; }
    .modal.fade .modal-dialog { transform: none; transition: none; }
    .modal-backdrop { transition: opacity .15s linear; }
    .page-content > .container-fluid { animation: none; }
    .card-animate, .card-animate:hover { transition: none; transform: none; }
}
/* ※ prefers-reduced-transparency 폴백은 실험 기간 동안 일부러 뺐다 —
   이 PC 가 Windows 투명 효과 OFF 라 1차에서 유리가 전부 폴백으로 숨었다(사용자 실측 「차이를 못 느끼겠다」).
   채택 확정 시 「불투명도만 올리고 blur 는 끄는」 폴백을 다시 단다(Apple 지침). */
@media (prefers-contrast: more) {
    .card { --tb-card-border-color: var(--erp-line-strong); }
    #page-topbar { background: var(--tb-secondary-bg); border-bottom-color: var(--erp-line-strong); }
}