/* ============================================================
 * ERP Design System (extracted from gold-standard pages)
 *   - List filter:   templates/finance/billing_list.html
 *   - Form pattern:  templates/finance/purchase_form.html
 *   - Modal base:    templates/base_popup.html
 * ============================================================ */

/* ── 모바일 안정화 전역 가드 ──────────────────────────────────
   iOS Safari·안드로이드 Chrome 의 텍스트 자동확대(가로모드 등)로
   레이아웃이 깨지며 한쪽으로 쏠리는 현상을 차단한다. 모든 화면 공통. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ── Design tokens (v2 — handoff/tokens.css) ────────────── */
:root {
    /* ── Brand / Primary ── */
    --erp-primary:        #4f46e5;   /* CTA, 활성 메뉴, 링크 */
    --erp-primary-strong: #4338ca;   /* hover, 강조 텍스트 */
    --erp-primary-deep:   #3730a3;   /* pressed, deep accent */
    --erp-primary-soft:   #eef2ff;   /* badge bg, focus ring bg */
    --erp-primary-ring:   rgba(79, 70, 229, .14);

    /* ── Accent (강조용 1색만 — 화면당 1~2곳 한정) ── */
    --erp-accent:         #f59e0b;   /* 마감 임박, 트로피, 워닝 강조 */

    /* ── Text scale ── */
    --erp-text-strong:    #0f172a;
    --erp-text:           #1e293b;
    --erp-text-muted:     #64748b;
    --erp-text-faint:     #94a3b8;

    /* ── Surfaces ── */
    --erp-bg-page:        #f4f6f9;
    --erp-bg-card:        #ffffff;
    --erp-bg-soft:        #f8fafc;
    --erp-bg-hover:       #f1f5f9;
    --erp-bg-sunken:      #eef0f3;

    /* ── Borders ── */
    --erp-border:         #e2e8f0;
    --erp-border-strong:  #cbd5e1;
    --erp-border-focus:   var(--erp-primary);

    /* ── Semantic ── */
    --erp-success:        #059669;   /* emerald-600 */
    --erp-success-strong: #047857;   /* emerald-700 */
    --erp-success-bg:     #d1fae5;   /* emerald-100 */
    --erp-success-border: #a7f3d0;   /* emerald-200 */

    --erp-warning:        #f59e0b;   /* amber-500 */
    --erp-warning-strong: #b45309;   /* amber-700 */
    --erp-warning-bg:     #fef3c7;   /* amber-100 */
    --erp-warning-border: #fde68a;   /* amber-200 */
    --erp-warning-ring:   rgba(245, 158, 11, .18);

    --erp-danger:         #e11d48;   /* rose-600 */
    --erp-danger-strong:  #be123c;   /* rose-700 */
    --erp-danger-bg:      #ffe4e6;   /* rose-100 */
    --erp-danger-border:  #fecdd3;   /* rose-200 */

    --erp-info:           #0284c7;   /* sky-600 — primary indigo와 분리 */
    --erp-info-strong:    #0369a1;   /* sky-700 */
    --erp-info-bg:        #e0f2fe;   /* sky-100 */
    --erp-info-border:    #bae6fd;   /* sky-200 */

    --erp-neutral:        #475569;
    --erp-neutral-bg:     #e2e8f0;

    --erp-purple:         #7c3aed;
    --erp-purple-bg:      #f3e8ff;

    /* Extra hues for multi-stage status pills (pipeline stages etc.) */
    --erp-teal:           #0f766e;   /* teal-700 */
    --erp-teal-bg:        #ccfbf1;   /* teal-100 */
    --erp-orange:         #c2410c;   /* orange-700 */
    --erp-orange-bg:      #ffedd5;   /* orange-100 */
    --erp-indigo:         #4338ca;   /* indigo-700 */
    --erp-indigo-bg:      #e0e7ff;   /* indigo-100 */

    /* ── Control height (필터 바 컨트롤 공통 높이) ── */
    --erp-ctl-h: 38px;

    /* ── Radius ── */
    --erp-radius-sm: 6px;
    --erp-radius-md: 8px;
    --erp-radius-lg: 12px;
    --erp-radius-pill: 999px;

    /* ── Type scale ── */
    --erp-fs-2xs: 10px;
    --erp-fs-xs: 11px;
    --erp-fs-sm: 12px;
    --erp-fs-md: 13px;
    --erp-fs-lg: 14px;
    --erp-fs-xl: 17px;
    --erp-fs-2xl: 22px;
    --erp-fs-3xl: 28px;

    /* ── Shadow ── */
    --erp-shadow-sm: 0 1px 3px rgba(15, 23, 42, .04);
    --erp-shadow-md: 0 2px 8px rgba(15, 23, 42, .06);
    --erp-shadow-lg: 0 8px 24px rgba(15, 23, 42, .08);

    /* ── Spacing ── */
    --erp-space-1: 4px;
    --erp-space-2: 8px;
    --erp-space-3: 12px;
    --erp-space-4: 16px;
    --erp-space-5: 20px;
    --erp-space-6: 24px;

    /* ── Skill level palette (전사 통일 — 어디서나 동일 색상) ── */
    --erp-lvl-expert:        #A335EE;  /* 특급 — 보라 */
    --erp-lvl-expert-fg:     #ffffff;
    --erp-lvl-advanced:      #FFD700;  /* 고급 — 금색 */
    --erp-lvl-advanced-fg:   #5c4a00;
    --erp-lvl-intermediate:  #0070DD;  /* 중급 — 파랑 */
    --erp-lvl-intermediate-fg:#ffffff;
    --erp-lvl-beginner:      #CD7F32;  /* 초급 — 동색 */
    --erp-lvl-beginner-fg:   #ffffff;
    --erp-lvl-other:         #9D9D9D;  /* 기타 — 회색 */
    --erp-lvl-other-fg:      #ffffff;
    --erp-lvl-hold:          #5B6B7B;  /* 보류 — 슬레이트(미평가/대기) */
    --erp-lvl-hold-fg:       #ffffff;
}

/* ── Skill level badge (전사 통일) ─────────────────────────
 * 사용법: <span class="badge-level badge-level-{KEY}">{디스플레이}</span>
 * KEY = EXPERT | ADVANCED | INTERMEDIATE | BEGINNER | OTHER
 * 색상은 모든 페이지에서 동일하므로, 새 페이지에서도 이 클래스만 쓰면 자동 통일됨.
 */
.badge-level {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .2px;
    white-space: nowrap;
}
.badge-level-EXPERT       { background: var(--erp-lvl-expert);       color: var(--erp-lvl-expert-fg); }
.badge-level-ADVANCED     { background: var(--erp-lvl-advanced);     color: var(--erp-lvl-advanced-fg); }
.badge-level-INTERMEDIATE { background: var(--erp-lvl-intermediate); color: var(--erp-lvl-intermediate-fg); }
.badge-level-BEGINNER     { background: var(--erp-lvl-beginner);     color: var(--erp-lvl-beginner-fg); }
.badge-level-OTHER        { background: var(--erp-lvl-other);        color: var(--erp-lvl-other-fg); }
.badge-level-HOLD         { background: var(--erp-lvl-hold);         color: var(--erp-lvl-hold-fg); }
/* 텍스트 전용(칩 안 인라인 강조 등): 동일 팔레트의 글자색만 적용 */
.lvl-text-EXPERT       { color: var(--erp-lvl-expert);       font-weight: 700; }
.lvl-text-ADVANCED     { color: var(--erp-amber-800x);                     font-weight: 700; }
.lvl-text-INTERMEDIATE { color: var(--erp-lvl-intermediate); font-weight: 700; }
.lvl-text-BEGINNER     { color: var(--erp-lvl-beginner);     font-weight: 700; }
.lvl-text-OTHER        { color: var(--erp-lvl-other);        font-weight: 700; }

/* ── Filter bar (.fl-*) — gold standard from billing_list ─── */
.fl-bar {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fl-search-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
}
/* 접두 아이콘 — 돋보기 외의 아이콘(건물·사람 등)도 같은 자리에 놓인다.
   :first-child 로 한정해 입력 뒤에 오는 아이콘(지우기 버튼 등)은 건드리지 않는다. */
.fl-search-wrap > i:first-child,
.fl-search-wrap .fa-magnifying-glass {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-md);
    pointer-events: none;
}

/* ── hover 유틸 (.erp-hover-*) ─────────────────────────────────
   `onmouseover="this.style.background='…'"` 같은 **표현을 JS 로 하던 코드**를
   대체한다. 인라인 핸들러가 남아 있으면 CSP 의 script-src 에서
   'unsafe-inline' 을 뺄 수 없다 — hover 하나 때문에 방어를 못 켜는 셈이다.

   색은 요소마다 다르므로 커스텀 속성으로 받는다. 대상 요소가 대개
   `style="background:…"` 를 인라인으로 갖고 있어 명시도에서 지므로
   !important 가 필요하다(그래서 hover 상태에만 최소로 쓴다).

     <tr class="erp-hover-bg" style="background:var(--erp-bg-soft); --erp-hov-bg:#f1f5f9">
*/
.erp-hover-bg:hover     { background: var(--erp-hov-bg) !important; }
.erp-hover-lift:hover   { transform: translateY(-1px); }
.erp-hover-fade:hover   { opacity: .8; }
.erp-hover-color:hover  { color: var(--erp-hov-color) !important; }
.erp-hover-outline:hover {
    border-color: var(--erp-hov-border) !important;
    background: var(--erp-hov-bg) !important;
}
/* 원래 `onmouseenter="this.classList.add('active')"` 로 하던 강조.
   .active 스타일은 각 화면이 이미 갖고 있으므로 그것을 그대로 빌려 쓴다. */
.erp-hover-active:hover { filter: brightness(.97); }
.erp-hover-underline:hover { text-decoration: underline; }
/* 원래 onfocus/onblur 로 테두리 색을 바꾸던 자리 */
.erp-focus-ring:focus { border-color: var(--erp-focus-border) !important; }

/* ── 자동완성 드롭다운 (.erp-ac-*) ─────────────────────────────
   화면마다 .fs-ac-menu / .ca-ac-menu / .holder-ac-menu … 로 13종 넘게
   따로 정의돼 있었다. 신규·이관 화면은 이 공용 클래스를 쓴다.
   부모에 position:relative 가 필요하다(.fl-search-wrap 이 이미 만족). */
.erp-ac-menu {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    box-shadow: var(--erp-shadow-md);
    max-height: 260px;
    overflow: auto;
}
.erp-ac-menu[hidden] { display: none; }
.erp-ac-item {
    padding: 7px 10px;
    cursor: pointer;
    font-size: var(--erp-fs-sm);
    color: var(--erp-text);
}
.erp-ac-item:hover,
.erp-ac-item.active { background: var(--erp-primary-soft); }
.erp-ac-item .sub {
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-xs);
    margin-left: 6px;
}
.erp-ac-empty {
    padding: 8px 10px;
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-faint);
}
.fl-search-input {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1.5px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    font-size: var(--erp-fs-md);
    color: var(--erp-text);
    outline: none;
    transition: border .15s, background .15s;
    background: var(--erp-bg-soft);
    font-family: inherit;
}

/* 돋보기 아이콘 없이 쓰는 검색 입력.
   기본 `.fl-search-input` 은 왼쪽 34px 을 아이콘 자리로 비워 둔다
   (`.fl-search-wrap` 이 아이콘을 겹쳐 놓는다). 아이콘을 두지 않는 화면은
   그 자리가 빈 여백으로 남아 글자만 밀린다 — 그런 화면은 이 변형을 쓴다.
   화면마다 `.fl-search-input { padding: … }` 로 덮어쓰던 것을 대신한다. */
.fl-search-input--bare {
    padding-left: 12px;
}
.fl-search-input:focus {
    border-color: var(--erp-primary);
    background: var(--erp-bg-card);
}
.fl-select {
    padding: 7px 30px 7px 11px;
    border: 1.5px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    font-size: var(--erp-fs-md);
    color: var(--erp-slate-700);
    background-color: var(--erp-bg-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    cursor: pointer;
    outline: none;
    transition: border .15s, background-color .15s;
    font-family: inherit;
}
.fl-select:focus {
    border-color: var(--erp-primary);
    background-color: var(--erp-bg-card);
}
.fl-date-range {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--erp-bg-soft);
    border: 1.5px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    padding: 4px 10px;
    cursor: pointer;
    transition: border .15s, background .15s;
}
.fl-date-range:focus-within {
    border-color: var(--erp-primary);
    background: var(--erp-bg-card);
}
.fl-date-range .sep {
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-sm);
    font-weight: 600;
}
.fl-date-range input[type="date"] {
    border: none;
    background: transparent;
    font-size: var(--erp-fs-md);
    color: var(--erp-slate-700);
    outline: none;
    cursor: pointer;
    padding: 3px 0;
    min-width: 110px;
    font-family: inherit;
}
.fl-date-range input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .5;
}
.fl-btn {
    padding: 8px 18px;
    white-space: nowrap;
    border-radius: var(--erp-radius-md);
    font-size: var(--erp-fs-md);
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
}
.fl-btn-primary {
    background: var(--erp-primary);
    color: var(--erp-bg-card);
}
.fl-btn-primary:hover {
    background: var(--erp-primary-deep);
    color: var(--erp-bg-card);
}
.fl-btn-reset {
    background: var(--erp-bg-hover);
    color: var(--erp-text-muted);
    border: 1.5px solid var(--erp-border);
}
.fl-btn-reset:hover {
    background: var(--erp-border);
    color: var(--erp-slate-700);
}

/* ── 필터 바 컨트롤 높이 통일 ──
   .fl-* 컴포넌트는 높이를 padding 으로만 잡아 select 35.5px / 입력·버튼 37.5px
   처럼 1~3px 씩 어긋났다(한 줄에 나란히 서면 눈에 띄다). 필터 바 안에서는
   --erp-ctl-h 한 값으로 맞춘다. 미수/미지급 화면이 --arap-fh 로 따로 하던
   처리를 공용으로 올린 것. */
.fl-bar .fl-search-input,   .fl-bar-compact .fl-search-input,
.fl-bar .fl-select,         .fl-bar-compact .fl-select,
.fl-bar .fl-date-range,     .fl-bar-compact .fl-date-range,
.fl-bar .fl-btn,            .fl-bar-compact .fl-btn,
.fl-bar .fl-cycle-btn,      .fl-bar-compact .fl-cycle-btn {
    height: var(--erp-ctl-h);
    box-sizing: border-box;
}
.fl-bar .fl-btn, .fl-bar-compact .fl-btn { justify-content: center; }
/* With a fixed height the base 7px vertical padding eats the text box — at
   --erp-ctl-h 31px only 14px is left and the glyph bottoms get clipped.
   Drop vertical padding and let the browser center the select text. */
.fl-bar .fl-select, .fl-bar-compact .fl-select {
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}

/* 값 순환 버튼 (구분: 전체 → 매출 → 매입 등). 색은 상태에 따라 JS 가 입힌다. */
.fl-cycle-btn {
    min-width: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 12px;
    border: 1.5px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-soft);
    color: var(--erp-text);
    font-size: var(--erp-fs-md);
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .15s;
}
.fl-cycle-btn:hover { opacity: .82; }
.fl-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--erp-primary-soft);
    color: var(--erp-primary-deep);
    border: 1px solid var(--erp-blue-200);
    border-radius: var(--erp-radius-pill);
    padding: 3px 10px;
    font-size: var(--erp-fs-sm);
    font-weight: 600;
}

/* ── Segmented filter buttons (link-based single-choice, e.g. status tabs) ── */
.fl-seg {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.fl-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    font-size: var(--erp-fs-sm);
    font-weight: 600;
    color: var(--erp-text-muted);
    background: var(--erp-bg-soft);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.fl-seg-btn:hover {
    background: var(--erp-bg-card);
    border-color: var(--erp-text-faint);
    color: var(--erp-text);
}
.fl-seg-btn.is-active {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
    color: var(--erp-bg-card);
}
.fl-seg-btn .fl-seg-cnt {
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    padding: 0 7px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-black-a07);
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.fl-seg-btn.is-active .fl-seg-cnt {
    background: var(--erp-white-a25);
}

/* ── KPI strip (extracted from billing_list) ─────────────── */
.kpi-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-bottom: 1px solid var(--erp-bg-hover);
}
.kpi-chip {
    background: var(--erp-bg-soft);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    padding: 9px 16px;
    min-width: 140px;
}
.kpi-chip .lbl {
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    color: var(--erp-text-muted);
    text-transform: uppercase;
    margin-bottom: 3px;
}
.kpi-chip .val {
    font-size: var(--erp-fs-xl);
    font-weight: 800;
}
.val-blue  { color: var(--erp-primary-deep); }
.val-green { color: var(--erp-success); }
.val-red   { color: var(--erp-danger); }
.val-amber { color: var(--erp-warning); }

/* ── Real/planned AR·AP top tables (finance + executive dashboards) ──
   Both tables share fixed column widths; text column (contract/item) absorbs the rest. */
.fd-real-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.fd-real-scroll { overflow-x: auto; }
.fd-real-table { table-layout: fixed; width: 100%; min-width: 520px; font-size: var(--erp-fs-sm); }
.fd-real-table th, .fd-real-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-real-table th:nth-child(1) { width: 150px; }
.fd-real-table th:nth-child(2) { width: auto; }
.fd-real-table th:nth-child(3) { width: 110px; }
.fd-real-table th:nth-child(4) { width: 130px; }
.fd-real-table .fd-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--erp-primary); text-decoration: none; }

/* ── Standard table (.styled-table) ──────────────────────── */
.styled-table {
    width: 100%;
    font-size: var(--erp-fs-md);
    border-collapse: collapse;
}
.styled-table th {
    background: var(--erp-bg-soft);
    color: var(--erp-neutral);
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid var(--erp-neutral-200);
    white-space: nowrap;
}
.styled-table td {
    padding: 10px 12px;
    text-align: center;
    border-bottom: 1px solid var(--erp-bg-hover);
    color: var(--erp-text);
    vertical-align: middle;
}
.styled-table tr:hover td {
    background: var(--erp-bg-soft);
}
/* Compact variant — smaller font + tighter padding for dense lists */
.styled-table--compact { font-size: var(--erp-fs-xs); }
.styled-table--compact th { padding: 4px 6px; }
.styled-table--compact td { padding: 4px 6px; }

/* ── Sortable column header (erpSortTable / static/js/erp-table-sort.js) ──
   Mark a th with .erp-sort-th + data-erp-act="erpSortTable" and put an
   <i class="fa-solid fa-sort erp-sort-ic"> inside. The active column keeps
   data-erp-sort-dir, which is what colors the header. */
th.erp-sort-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
th.erp-sort-th:hover { color: var(--erp-primary); }
th.erp-sort-th .erp-sort-ic {
    margin-left: 3px;
    font-size: var(--erp-fs-2xs);
    color: var(--erp-text-faint);
}
th.erp-sort-th[data-erp-sort-dir],
th.erp-sort-th[data-erp-sort-dir] .erp-sort-ic { color: var(--erp-primary); }

/* ── Version-history table (compact, audit trail) ───────────── */
.ver-history {
    width: 100%;
    font-size: var(--erp-fs-sm);
    border-collapse: collapse;
    table-layout: fixed;
}
.ver-history th,
.ver-history td {
    border: 1px solid var(--erp-border);
    padding: 6px 8px;
    vertical-align: middle;
    text-align: center;
    word-break: break-word;
}
/* pill 은 기본이 nowrap 이라 열 폭보다 긴 라벨('영업 활동 등록' 등)이 옆 칸으로
   삐져나왔다. 열 폭은 템플릿에서 넉넉히 잡되, 그래도 넘치면 어절 단위로 접는다. */
.ver-history .pill {
    font-size: var(--erp-fs-sm);
    max-width: 100%;
    white-space: normal;
    word-break: keep-all;
    justify-content: center;
}
.ver-history thead th {
    background: var(--erp-bg-soft);
    color: var(--erp-text-strong);
    font-weight: 700;
    font-size: var(--erp-fs-lg);
    white-space: nowrap;
}
.ver-history tbody > tr:nth-child(even) > td {
    background: var(--erp-bg-soft);
}
.ver-history tbody > tr:hover > td {
    background: var(--erp-bg-hover);
}
.ver-history td.ver-changes-cell { text-align: left; padding: 0; }
/* Inner field-change grid: each changed field is its own bordered row.
   table-layout:fixed — auto 였을 때 긴 라벨/값이 셀 폭을 무시하고 표 밖으로 밀려났다. */
.ver-changes { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ver-changes tr + tr td { border-top: 1px solid var(--erp-border); }
.ver-changes td {
    border: 0;
    padding: 3px 8px;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.ver-changes td.ver-changes-label {
    width: 150px;
    font-weight: 700;
    color: var(--erp-text-strong);
    border-right: 1px solid var(--erp-border);
    white-space: normal;
    word-break: keep-all;
}

/* Row-level action button (small) */
.btn-xs {
    font-size: var(--erp-fs-sm);
    padding: 4px 12px;
    white-space: nowrap;
    border-radius: var(--erp-radius-sm);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    cursor: pointer;
    border: 1.5px solid transparent;
    font-family: inherit;
    /* Explicit line-height so <a> and <button> render at identical height */
    line-height: 1.45;
}
/* 아이콘 전용 소형 버튼 — 글자 없이 아이콘 하나만 담는 행 액션(매입 묶음 헤더의 회차 추가·수정·삭제 등).
   높이는 .btn-xs(27.4px)와 같고 좌우 여백만 줄여 정사각형에 가깝게. 뜻은 data-erp-tip + aria-label 로 준다
   (2026-09-04 지시 "굳이 텍스트가 필요하니? 아이콘으로 만들고 텍스트는 툴팁으로") */
.btn-xs.btn-xs--ico { padding: 4px 7px; min-width: 28px; text-align: center; }
.btn-xs.btn-xs--ico > i { margin: 0; }
/* 비활성 상태 — 색상 변형과 무관하게 동일하게 흐려지고 클릭 불가 커서로 바뀐다.
   (예: 결재함 '재요청' 버튼 쿨다운 중) */
.btn-xs:disabled, .btn-xs[disabled], .btn-xs.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.35);
}
/* hover 변형(채움 배경)이 비활성 버튼에도 걸리므로 완전 회색으로 눌러 둔다 */
.btn-xs:disabled:hover, .btn-xs[disabled]:hover, .btn-xs.is-disabled:hover {
    filter: grayscale(1);
}
.btn-xs-primary {
    background: var(--erp-primary);
    color: var(--erp-bg-card);
    border-color: var(--erp-primary);
}
.btn-xs-primary:hover {
    background: var(--erp-primary-deep);
    color: var(--erp-bg-card);
}
.btn-xs-outline {
    background: var(--erp-bg-card);
    color: var(--erp-slate-700);
    border-color: var(--erp-border-strong);
}
.btn-xs-outline:hover {
    background: var(--erp-bg-hover);
}
/* ── btn-xs color variants (matched to Bootstrap btn-* tokens) ── */
.btn-xs-secondary {
    background: var(--erp-text-muted);
    color: var(--erp-bg-card);
    border-color: var(--erp-text-muted);
}
.btn-xs-secondary:hover { background: var(--erp-neutral); color: var(--erp-bg-card); }
.btn-xs-info {
    background: var(--erp-info);
    color: var(--erp-bg-card);
    border-color: var(--erp-info);
}
.btn-xs-info:hover { background: var(--erp-info-strong); color: var(--erp-bg-card); }
.btn-xs-success {
    background: var(--erp-success);
    color: var(--erp-bg-card);
    border-color: var(--erp-success);
}
.btn-xs-success:hover { background: var(--erp-success-strong); color: var(--erp-bg-card); }
/* 경고 버튼은 amber-500(대비 2.15:1) 대신 amber-600 바탕 — 흰 글자 3:1 이상 */
.btn-xs-warning {
    background: var(--erp-amber-600);
    color: var(--erp-bg-card);
    border-color: var(--erp-amber-600);
}
.btn-xs-warning:hover { background: var(--erp-warning-strong); color: var(--erp-bg-card); }
.btn-xs-danger {
    background: var(--erp-danger);
    color: var(--erp-bg-card);
    border-color: var(--erp-danger);
}
.btn-xs-danger:hover { background: var(--erp-danger-strong); color: var(--erp-bg-card); }
.btn-xs-light {
    background: var(--erp-gray-100);
    color: var(--erp-gray-700);
    border-color: var(--erp-gray-200);
}
.btn-xs-light:hover { background: var(--erp-gray-200); }
.btn-xs-dark {
    background: var(--erp-gray-800);
    color: var(--erp-bg-card);
    border-color: var(--erp-gray-800);
}
.btn-xs-dark:hover { background: var(--erp-gray-900); color: var(--erp-bg-card); }
.btn-xs-outline-primary {
    background: var(--erp-bg-card);
    color: var(--erp-primary);
    border-color: var(--erp-primary);
}
.btn-xs-outline-primary:hover { background: var(--erp-primary); color: var(--erp-bg-card); }
.btn-xs-outline-secondary {
    background: var(--erp-bg-card);
    color: var(--erp-text-muted);
    border-color: var(--erp-border-strong);
}
.btn-xs-outline-secondary:hover { background: var(--erp-bg-hover); color: var(--erp-slate-700); }
.btn-xs-outline-info {
    background: var(--erp-bg-card);
    color: var(--erp-info);
    border-color: var(--erp-info);
}
.btn-xs-outline-info:hover { background: var(--erp-info); color: var(--erp-bg-card); }
.btn-xs-outline-success {
    background: var(--erp-bg-card);
    color: var(--erp-success);
    border-color: var(--erp-success);
}
.btn-xs-outline-success:hover { background: var(--erp-success); color: var(--erp-bg-card); }
.btn-xs-outline-warning {
    background: var(--erp-bg-card);
    color: var(--erp-warning-strong);
    border-color: var(--erp-amber-600);
}
.btn-xs-outline-warning:hover { background: var(--erp-amber-600); color: var(--erp-bg-card); }
.btn-xs-outline-danger {
    background: var(--erp-bg-card);
    color: var(--erp-danger);
    border-color: var(--erp-danger);
}
.btn-xs-outline-danger:hover { background: var(--erp-danger); color: var(--erp-bg-card); }

/* ── Empty state ─────────────────────────────────────────── */
.erp-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-md);
}
.erp-empty i {
    font-size: var(--erp-fs-2xl);
    display: block;
    margin-bottom: 8px;
    color: var(--erp-text-faint);
}
/* 표 본문 빈 상태 — {% empty %} 행의 td 에 붙인다. .erp-empty 는 블록 컨테이너용이라
   td 에 쓰면 셀 정렬이 어긋나므로 별도 클래스로 둔다. */
.erp-empty-cell {
    text-align: center;
    padding: 28px 16px;
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-sm);
    background: var(--erp-bg-soft);
}

/* ── Form section pattern (.pf-*) — from purchase_form ──── */
.pf-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}
.pf-section {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-gray-200);
    border-radius: var(--erp-radius-lg);
    padding: 18px 22px;
    margin-bottom: 14px;
}
.pf-section h5 {
    font-size: var(--erp-fs-15);
    font-weight: 700;
    color: var(--erp-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pf-section h5::before {
    content: "";
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, var(--erp-indigo-500), var(--erp-primary-strong));
    border-radius: 2px;
}
.pf-section h5 .sec-ico {
    width: 28px;
    height: 28px;
    border-radius: var(--erp-radius-md);
    background: var(--erp-primary-soft);
    color: var(--erp-primary-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--erp-fs-md);
}
.pf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.pf-grid .full {
    grid-column: 1 / -1;
}
.pf-field label {
    display: block;
    font-size: var(--erp-fs-sm);
    font-weight: 600;
    color: var(--erp-neutral);
    margin-bottom: 6px;
}
.pf-field label .req {
    color: var(--erp-red-500);
    margin-left: 2px;
}
/* 필수 표시(*) — .pf-field 밖의 임의 라벨에서도 같은 표기를 쓴다. */
.erp-req {
    color: var(--erp-red-500);
    margin-left: 2px;
    font-weight: 700;
}
.pf-field .help {
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-faint);
    margin-top: 4px;
}
.pf-field .err {
    font-size: var(--erp-fs-11_5);
    color: var(--erp-red-600);
    margin-top: 4px;
}
.pf-input,
.pf-field input[type="text"],
.pf-field input[type="number"],
.pf-field input[type="date"],
.pf-field input[type="file"],
.pf-field select,
.pf-field textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: var(--erp-fs-13_5);
    line-height: 1.4;
    background: var(--erp-gray-50);
    border: 1px solid var(--erp-gray-200);
    border-radius: var(--erp-radius-md);
    color: var(--erp-text-strong);
    box-sizing: border-box;
    transition: background .15s, border-color .15s, box-shadow .15s;
    font-family: inherit;
}
/* .btn-xs 와 같은 높이의 소형 입력 — 행 액션 도구줄 옆에 놓는 날짜·짧은 값 입력용 (.pf-input 에 덧붙임) */
.pf-input.pf-input--xs { width:auto; padding:4px 10px; font-size:var(--erp-fs-sm); line-height:1.45; border-radius:var(--erp-radius-sm); }
/* 검증 실패 표시 — JS 가 classList.add('is-invalid') 로 붙인다.
   부트스트랩 .form-control.is-invalid 가 하던 일. 표준 입력으로 옮기면서 이 규칙이 없으면
   오류 테두리가 조용히 사라진다(거래처 등록·견적 작성 2곳). */
.pf-input.is-invalid, .fl-select.is-invalid, .fl-search-input.is-invalid {
    border-color: var(--erp-danger);
}
.pf-field input:hover,
.pf-field select:hover,
.pf-field textarea:hover {
    background: var(--erp-bg-card);
    border-color: var(--erp-gray-300);
}
.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
    background: var(--erp-bg-card);
    border-color: var(--erp-indigo-500);
    box-shadow: 0 0 0 3px var(--erp-primary-ring);
    outline: none;
}
.pf-field .amount-row {
    position: relative;
}
.pf-field .amount-row input {
    text-align: right;
    padding-right: 32px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.pf-field .amount-row .suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-faint);
}
/* Segmented single-choice control (e.g. 유 / 무 / 보류). Radios are visually hidden. */
.pf-choice {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}
.pf-choice .pf-choice-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    font-size: var(--erp-fs-sm);
    font-weight: 600;
    color: var(--erp-text-muted);
    background: var(--erp-gray-50);
    border: 1px solid var(--erp-gray-200);
    border-radius: var(--erp-radius-md);
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.pf-choice .pf-choice-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.pf-choice .pf-choice-opt:hover {
    background: var(--erp-bg-card);
    border-color: var(--erp-gray-300);
    color: var(--erp-text);
}
.pf-choice .pf-choice-opt:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--erp-primary-ring);
}
.pf-choice .pf-choice-opt:has(input:checked) {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
    color: var(--erp-bg-card);
}
.pf-choice .pf-choice-opt.is-yes:has(input:checked) {
    background: var(--erp-success);
    border-color: var(--erp-success);
}
.pf-choice .pf-choice-opt.is-no:has(input:checked) {
    background: var(--erp-danger);
    border-color: var(--erp-danger);
}
.pf-choice .pf-choice-opt.is-hold:has(input:checked) {
    background: var(--erp-warning);
    border-color: var(--erp-warning);
}
.erp-paste-upload {
    border: 1px dashed var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-soft);
    padding: 12px;
    outline: none;
}
.erp-paste-upload:focus,
.erp-paste-upload.is-filled {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px var(--erp-primary-ring);
}
.erp-paste-upload.is-limit-hit {
    border-color: var(--erp-warning);
    box-shadow: 0 0 0 3px var(--erp-warning-ring);
}
.erp-paste-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--erp-text);
    font-size: var(--erp-fs-sm);
    font-weight: 600;
}
.erp-paste-head i {
    color: var(--erp-primary);
}
.erp-paste-count {
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-xs);
    font-weight: 500;
    white-space: nowrap;
}
.erp-file-picker {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
}
.erp-paste-upload .erp-paste-input {
    display: none;
}
.erp-file-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--erp-primary);
    border-radius: var(--erp-radius-md);
    background: var(--erp-primary);
    color: var(--erp-bg-card);
    font-size: var(--erp-fs-sm);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.pf-field .erp-file-trigger {
    display: inline-flex;
    color: var(--erp-bg-card);
    margin-bottom: 0;
}
.erp-file-trigger:hover {
    background: var(--erp-primary-strong);
    border-color: var(--erp-primary-strong);
}
.erp-file-trigger:focus-within,
.erp-paste-input:focus + .erp-file-picker .erp-file-trigger {
    box-shadow: 0 0 0 3px var(--erp-primary-ring);
}
.erp-file-state {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-card);
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-sm);
}
.erp-file-state i {
    color: var(--erp-primary);
    flex: 0 0 auto;
}
.erp-file-state span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.erp-paste-upload.is-filled .erp-file-state {
    color: var(--erp-text-strong);
    font-weight: 600;
}
.erp-paste-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.erp-paste-item {
    position: relative;
    min-width: 0;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    background: var(--erp-bg-card);
    padding: 6px;
}
.erp-paste-item img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--erp-radius-sm);
    background: var(--erp-bg-soft);
}
/* Non-image attachment (Excel/PDF/문서 등) — icon card in place of the thumbnail */
.erp-paste-fileicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--erp-radius-sm);
    background: var(--erp-bg-soft);
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-30);
}
.erp-paste-fileicon[data-kind="excel"] { color: var(--erp-success); }
.erp-paste-fileicon[data-kind="pdf"]   { color: var(--erp-danger); }
.erp-paste-fileicon[data-kind="word"]  { color: var(--erp-info); }
.erp-paste-fileicon[data-kind="ppt"]   { color: var(--erp-warning); }
.erp-paste-item span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
    padding-right: 24px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
}
.erp-paste-remove {
    position: absolute;
    right: 8px;
    bottom: 7px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    background: var(--erp-bg-card);
    color: var(--erp-text-muted);
    cursor: pointer;
}
.erp-paste-annotate {
    position: absolute;
    right: 34px;
    bottom: 7px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    background: var(--erp-bg-card);
    color: var(--erp-primary);
    cursor: pointer;
    font-size: var(--erp-fs-xs);
    display: flex;
    align-items: center;
    justify-content: center;
}
.erp-paste-annotate:hover { background: var(--erp-primary-soft); }
.erp-paste-img-wrap {
    position: relative;
    display: block;
}
.erp-paste-img-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(79, 70, 229, .72);
    color: var(--erp-bg-card);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    font-size: var(--erp-fs-xs); font-weight: 700;
    border-radius: var(--erp-radius-sm);
    opacity: 0; transition: opacity .18s;
    pointer-events: none;
    text-align: center; line-height: 1.3;
    cursor: pointer;
}
.erp-paste-img-overlay i { font-size: var(--erp-fs-18); display: block; }
.erp-paste-img-wrap:hover .erp-paste-img-overlay { opacity: 1; }
kbd.erp-kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-size: var(--erp-fs-xs);
    font-family: monospace;
    color: var(--erp-text-strong);
    line-height: 1.5;
}
.erp-paste-guide {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-muted);
}
.erp-paste-step {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.erp-paste-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--erp-primary);
    color: var(--erp-bg-card);
    font-size: var(--erp-fs-2xs);
    font-weight: 700;
    flex-shrink: 0;
}
.erp-paste-step-arrow {
    color: var(--erp-text-faint);
    font-weight: 600;
}
.erp-paste-limit {
    margin-left: auto;
    color: var(--erp-text-faint);
}
.pf-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 8px;
}
/* 비활성 표준 — 화면별 :disabled 규칙 대신 */
.pf-btn:disabled, .pf-btn[disabled], .fl-btn:disabled, .fl-btn[disabled] { opacity: .55; cursor: not-allowed; }
.pf-btn {
    padding: 9px 20px;
    white-space: nowrap;
    border-radius: var(--erp-radius-md);
    border: none;
    font-size: var(--erp-fs-13_5);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.pf-btn-primary {
    background: var(--erp-primary-strong);
    color: var(--erp-bg-card);
}
.pf-btn-primary:hover {
    background: var(--erp-primary-strong);
}
.pf-btn-outline {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-gray-300);
    color: var(--erp-neutral);
}
.pf-btn-outline:hover {
    background: var(--erp-bg-soft);
}
.pf-btn-danger {
    background: var(--erp-danger);
    color: var(--erp-bg-card);
}
.pf-btn-danger:hover {
    background: var(--erp-red-700);
}
/* 폼 푸터의 파괴적 보조 액션(삭제 등) — 크기는 .pf-btn 과 동일, 색만 danger 아웃라인 */
.pf-btn-outline-danger {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-danger);
    color: var(--erp-danger);
}
.pf-btn-outline-danger:hover {
    background: var(--erp-danger);
    color: var(--erp-bg-card);
}

/* 폼 버튼 색 변형 — 부트스트랩 btn-success/warning/info 를 대신한다.
   크기·모양은 .pf-btn 이 정하고 여기서는 색만 바꾼다. */
.pf-btn-success {
    background: var(--erp-success);
    color: var(--erp-bg-card);
}
.pf-btn-success:hover {
    background: var(--erp-green-700);
}
.pf-btn-warning {
    background: var(--erp-amber-600);
    color: var(--erp-bg-card);
}
.pf-btn-warning:hover {
    background: var(--erp-warning-strong);
}
.pf-btn-info {
    background: var(--erp-info);
    color: var(--erp-bg-card);
}
.pf-btn-info:hover {
    background: var(--erp-blue-700x3);
}
.pf-btn-outline-primary {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-primary-strong);
    color: var(--erp-primary-strong);
}
.pf-btn-outline-primary:hover {
    background: var(--erp-primary-strong);
    color: var(--erp-bg-card);
}
.pf-btn-outline-success {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-success);
    color: var(--erp-success);
}
.pf-btn-outline-success:hover {
    background: var(--erp-success);
    color: var(--erp-bg-card);
}
.pf-hint {
    background: var(--erp-primary-soft);
    border: 1px solid var(--erp-blue-200);
    border-radius: var(--erp-radius-md);
    padding: 10px 14px;
    font-size: var(--erp-fs-sm);
    color: var(--erp-blue-800);
    margin-bottom: 14px;
}
/* 경고 변형 — 주의가 필요한 입력(예: 세금계산서 미연결 매입의 수취일 직접 입력) */
.pf-hint--warn {
    background: var(--erp-warning-bg);
    border-color: var(--erp-warning-border);
    color: var(--erp-warning-strong);
}
/* ── 변경 상세 패널 (저장 전 before → after diff + 결재 필요 여부 안내) ──
   근무 일정 편집 모달(홈 달력 / 근무 계획 달력)이 공유. 서버 게이트 판정을
   그대로 렌더하므로 문구를 화면별로 새로 정의하지 말 것. */
.chg-panel {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-soft);
    padding: 10px 12px;
    font-size: var(--erp-fs-sm);
    transition: opacity .15s;
}
.chg-panel.is-loading { opacity: .5; }
.chg-head {
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    color: var(--erp-text-muted);
    margin-bottom: 6px;
}
/* 수정 전 / 수정 후 / 증감 3열 비교표 */
.chg-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--erp-fs-xs);
}
.chg-table th,
.chg-table td {
    padding: 4px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chg-table thead th {
    font-weight: 700;
    color: var(--erp-text-faint);
    border-bottom: 1px solid var(--erp-border);
    padding-bottom: 5px;
}
.chg-table thead th:first-child,
.chg-table tbody th { text-align: left; }
/* 항목 열 폭 — table-layout:fixed 는 첫 행(thead) 셀이 열 폭을 정한다.
   tbody th 에 width 를 줘도 무시되므로 여기서 지정한다. */
.chg-table thead th:first-child { width: 40%; }
.chg-table tbody th {
    /* 항목명은 줄바꿈 허용 — '3분기 총 계획 (휴가 포함)' 등 긴 라벨이 '…' 로 잘리지 않게 */
    white-space: normal;
    word-break: keep-all;
    font-weight: 600;
    color: var(--erp-text-muted);
}
.chg-table tbody tr + tr th,
.chg-table tbody tr + tr td { border-top: 1px solid var(--erp-slate-75); }
.chg-before { color: var(--erp-text-faint); }
.chg-table tr.is-changed .chg-before { text-decoration: line-through; }
.chg-after { font-weight: 700; color: var(--erp-text-strong); }
.chg-table tr.is-changed .chg-after { color: var(--erp-primary); }
.chg-delta { font-weight: 700; }
.chg-delta--plus  { color: var(--erp-primary); }
.chg-delta--minus { color: var(--erp-danger); }
.chg-delta--none  { color: var(--erp-text-faint); font-weight: 500; }
.chg-verdict {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--erp-border);
    font-weight: 700;
    line-height: 1.5;
}
.chg-foot {
    margin-top: 7px;
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-faint);
    line-height: 1.5;
}
.chg-verdict--direct   { color: var(--erp-success-strong); }
.chg-verdict--approval { color: var(--erp-warning-strong); }
.chg-verdict--none     { color: var(--erp-text-muted); font-weight: 600; }
.chg-verdict small { font-weight: 500; color: var(--erp-text-muted); }

.pf-err-summary {
    background: var(--erp-red-50);
    border: 1px solid var(--erp-red-200);
    border-radius: var(--erp-radius-md);
    padding: 10px 14px;
    font-size: var(--erp-fs-md);
    color: var(--erp-red-700);
    margin-bottom: 14px;
}

/* ── Toast (네이티브 alert 대체 — static/js/erp-toast.js 와 한 쌍) ── */
.erp-toast-host {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}
.erp-toast {
    max-width: 420px;
    padding: 12px 18px;
    border-radius: var(--erp-radius-md);
    background: var(--erp-success);
    color: var(--erp-bg-card);
    font-size: var(--erp-fs-md);
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 4px 16px var(--erp-black-a18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.erp-toast.is-open {
    opacity: 1;
    transform: none;
}
.erp-toast--error {
    background: var(--erp-danger);
}
.erp-toast--warning {
    background: var(--erp-warning);
    color: var(--erp-text-strong);
}
@media (max-width: 600px) {
    .erp-toast-host {
        left: 16px;
        right: 16px;
        bottom: 16px;
        align-items: stretch;
    }
    .erp-toast { max-width: none; }
}
@media print {
    .erp-toast-host { display: none !important; }
    /* 표준 버튼은 인쇄물에 나가지 않는다 — 화면별 #printable-area .btn-xs 숨김 규칙을 여기로 모음 */
    .btn-xs, .fl-btn, .pf-btn { display: none !important; }
}

/* ── Amount cell helpers (table use) ─────────────────────── */
.amount-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}
.amount-cell.negative {
    color: var(--erp-danger);
}

/* ── Pagination wrapper ──────────────────────────────────── */
.erp-paginator {
    display: flex;
    justify-content: center;
    padding: 14px 0;
}

/* ── Compact filter row (used inside section-card) ───────── */
.fl-bar-compact {
    padding: 12px 16px;
    border-bottom: 1px solid var(--erp-bg-hover);
    background: var(--erp-blue-50x2);
    display: flex;
    gap: 8px;
    align-items: end;
    flex-wrap: wrap;
}
.fl-bar-compact .fl-field { display: flex; flex-direction: column; }
.fl-bar-compact .fl-field.grow { flex: 1; min-width: 200px; }
.fl-bar-compact .fl-field label {
    font-size: var(--erp-fs-xs);
    font-weight: 600;
    color: var(--erp-text-muted);
    margin-bottom: 3px;
}

/* ── Status pills (semantic) ─────────────────────────────── */
.pill-deposit  { background: var(--erp-green-100); color: var(--erp-green-800); padding: 2px 8px; border-radius: 10px; font-size: var(--erp-fs-xs); font-weight: 700; white-space: nowrap; }
.pill-withdraw { background: var(--erp-red-100); color: var(--erp-red-800); padding: 2px 8px; border-radius: 10px; font-size: var(--erp-fs-xs); font-weight: 700; white-space: nowrap; }

/* ── Amount cell color helpers ───────────────────────────── */
.amt-deposit  { color: var(--erp-green-600); font-weight: 700; text-align: right; }
.amt-withdraw { color: var(--erp-red-600); font-weight: 700; text-align: right; }
.amt-balance  { color: var(--erp-text-faint); text-align: right; font-size: var(--erp-fs-sm); }

/* ── Bank match row actions ──────────────────────────────── */
.action-empty {
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-xs);
}
.action-matched-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.action-matched-label {
    font-size: var(--erp-fs-xs);
    color: var(--erp-success);
    font-weight: 700;
}
.btn-unmatch {
    font-size: var(--erp-fs-2xs);
    padding: 2px 8px;
    background: var(--erp-bg-card);
    color: var(--erp-red-600);
    border: 1px solid var(--erp-red-300);
    border-radius: 4px;
    cursor: pointer;
}
.btn-unmatch:hover {
    background: var(--erp-red-50);
}

/* ── Bank match pagination ───────────────────────────────── */
.bm-pagination {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--erp-bg-hover);
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-muted);
}
.bm-page-controls {
    display: flex;
    gap: 4px;
    align-items: center;
}
.bm-page-btn {
    padding: 4px 10px;
    font-size: var(--erp-fs-xs);
}
.bm-page-current {
    padding: 4px 12px;
    font-size: var(--erp-fs-sm);
    color: var(--erp-neutral);
    background: var(--erp-bg-soft);
    border-radius: var(--erp-radius-sm);
}


/* =============================================================
 * v2 시맨틱 클래스 (handoff/tokens.css 통합)
 * 화면별 인라인 <style>에서 중복 정의되던 pill-*, kv-*, val-* 류를
 * 1곳으로 모아 hex 분열을 제거.
 * ============================================================= */

/* ── Pill (시맨틱 일반형) ─────────────────────────────────── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--erp-radius-pill);
    white-space: nowrap;
}
/* Each hue sets --pill-bg / --pill-fg; the soft look is the default.
   .pill--solid / .pill--outline reuse the same hue for sub-states
   (e.g. drafting = soft, under approval = solid, approved = outline). */
.pill--info     { --pill-bg: var(--erp-info-bg);    --pill-fg: var(--erp-info-strong); }
.pill--warning  { --pill-bg: var(--erp-warning-bg); --pill-fg: var(--erp-warning-strong); }
.pill--success  { --pill-bg: var(--erp-success-bg); --pill-fg: var(--erp-success-strong); }
.pill--danger   { --pill-bg: var(--erp-danger-bg);  --pill-fg: var(--erp-danger-strong); }
.pill--neutral  { --pill-bg: var(--erp-neutral-bg); --pill-fg: var(--erp-neutral); }
.pill--purple   { --pill-bg: var(--erp-purple-bg);  --pill-fg: var(--erp-purple); }
.pill--teal     { --pill-bg: var(--erp-teal-bg);    --pill-fg: var(--erp-teal); }
.pill--orange   { --pill-bg: var(--erp-orange-bg);  --pill-fg: var(--erp-orange); }
.pill--indigo   { --pill-bg: var(--erp-indigo-bg);  --pill-fg: var(--erp-indigo); }
.pill--info, .pill--warning, .pill--success, .pill--danger,
.pill--neutral, .pill--purple, .pill--teal, .pill--orange, .pill--indigo {
    background: var(--pill-bg);
    color: var(--pill-fg);
}
/* 업무 그룹(포털) 소속 칩 — 통합 검색 '메뉴' 결과처럼 항목이 어느 대분류
   (영업·기술·경영 관리·인사·그룹웨어·임원진)에 속하는지 색으로 구분한다.
   색은 포털 테마 색을 그대로 쓴다: --erp-grp-* 는 헤더 CSS(partials/global_header_css)가
   ErpSettings 값으로 내려주고, 그 컨텍스트가 없는 화면에서는 기본 테마 색으로 떨어진다. */
.pill--grp-sales       { --pill-fg: var(--erp-grp-sales, var(--erp-theme-sales)); }
.pill--grp-maintenance { --pill-fg: var(--erp-grp-maintenance, var(--erp-theme-tech)); }
.pill--grp-management  { --pill-fg: var(--erp-grp-management, var(--erp-theme-management)); }
.pill--grp-hr          { --pill-fg: var(--erp-grp-hr, var(--erp-theme-hr)); }
.pill--grp-groupware   { --pill-fg: var(--erp-grp-groupware, var(--erp-theme-groupware)); }
.pill--grp-executive   { --pill-fg: var(--erp-grp-executive, var(--erp-theme-executive)); }
.pill--grp-sales, .pill--grp-maintenance, .pill--grp-management,
.pill--grp-hr, .pill--grp-groupware, .pill--grp-executive {
    --pill-bg: color-mix(in srgb, var(--pill-fg) 12%, var(--erp-bg-card));
    background: var(--pill-bg);
    color: var(--pill-fg);
}
.pill--solid   { background: var(--pill-fg); color: var(--erp-bg-card); }
.pill--outline { background: var(--erp-bg-card); color: var(--pill-fg); box-shadow: inset 0 0 0 1.5px var(--pill-fg); }
.pill--xs { font-size: var(--erp-fs-2xs); padding: 2px 6px; }

/* ── 분할 회차 귀속 월 칩 / 계산서 수취 기한 기준일 ─────────────
   '1차분 · 2026-07분' 처럼 회차가 몇 월분인지 바로 읽히게 하는 보조 라벨.
   --derived 는 매입일이 아니라 회차 배열에서 산정한 경우(점선 밑줄로 구분). */
.pr-period-chip {
    display: inline-block;
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    line-height: 1.35;
    padding: 1px 6px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-info-bg);
    color: var(--erp-info-strong);
    white-space: nowrap;
    cursor: help;
}
.pr-period-chip--derived { border-bottom: 1px dotted var(--erp-info-strong); }
/* --manual 은 사용자가 직접 지정한 귀속 월 (자동 산정과 구분) */
.pr-period-chip--manual {
    background: var(--erp-warning-bg);
    color: var(--erp-warning-strong);
    border-bottom: none;
}
.pr-due-basis {
    display: inline-block;
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-muted);
    line-height: 1.25;
    margin-top: 1px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px dotted var(--erp-text-faint);
    cursor: pointer;
}
.pr-due-basis:hover { color: var(--erp-primary); border-bottom-color: var(--erp-primary); }
.pr-due-basis .fa-circle-info { font-size: 0.9em; opacity: .7; }

/* 표 형태 편집 폼 (항목 | 값) — 매입 내역 수정 모달 (2026-09-16) */
.modal-dialog.pe-modal-dialog { max-width: min(960px, calc(100vw - 32px)); }
.pe-form { border: 1px solid var(--erp-border); border-radius: var(--erp-radius-sm); overflow: visible; }
.pe-form--cont { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; }
.pe-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); border-bottom: 1px solid var(--erp-border); }
.pe-form > .pe-row:last-child, .pe-form > div:last-child > .pe-row { border-bottom: 0; }
.pe-th { background: var(--erp-bg-soft); color: var(--erp-text-strong); font-size: var(--erp-fs-sm); font-weight: 600; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--erp-border); }
.pe-th-sub { font-size: var(--erp-fs-xs); font-weight: 400; color: var(--erp-text-faint); }
.pe-td { padding: 7px 12px; min-width: 0; }
.pe-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.pe-grow { flex: 1 1 260px; min-width: 0; }
.pe-sub { font-size: var(--erp-fs-sm); color: var(--erp-text-muted); margin: 0; white-space: nowrap; }
.pe-sep { width: 1px; align-self: stretch; background: var(--erp-border); margin: 0 4px; }
.pe-note { font-size: var(--erp-fs-xs); color: var(--erp-text-muted); }
.pe-note--block { display: block; margin-top: 4px; }
.pe-note--block:empty { display: none; }
.pe-w-amt { width: 140px !important; }
.pe-w-sel { width: 96px !important; }
.pe-w-pay { width: 250px; }
.pe-total { font-size: var(--erp-fs-md); color: var(--erp-text-strong); }
.pe-supplier-cur { max-width: 45%; }
@media (max-width: 640px) {
  .pe-row { grid-template-columns: 1fr; }
  .pe-th { border-right: 0; border-bottom: 1px solid var(--erp-border); }
}

/* 결제조건 구조화 입력 (erp-pay-terms.js) — 구분(당월/익월/익익월/여신) + 일자 두 칸 */
.erp-payterms { display: flex; gap: 6px; width: 100%; min-width: 0; }
.erp-payterms > select { flex: 1 1 0; min-width: 0; width: auto; }

/* ── 분할 묶음 헤더의 매입처 계산서 발행 조건 (HD-260901-017) ────────────
   매입처마다 월별·분기·일시불이 제각각인 계약은 계약 단위 조건 한 줄로 읽히지 않는다.
   계산서·지급 요약과 같은 칸의 맨 위에 그 매입처의 조건을 둔다(값이 없으면 흐린 안내). */
.pr-grp-terms {
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-muted);
    line-height: 1.3;
    margin-bottom: 2px;
    cursor: help;
}

/* ── 매입 내역 표 문서 마크 — 견적서 첨부 · 발주서 발송 (HD-260827-003) ────
   발주일 칸 아래에 '견적 / 발주' 두 칩을 나란히 둔다. 색은 pill 시맨틱을 그대로 쓰고
   (초록=있음, 주황=발주서만 있고 미발송), 없음은 회색 테두리형을 흐리게. 묶음 공용
   문서는 pill--outline 으로 자기 첨부와 구분한다. */
.pr-doc-marks { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pr-doc-marks-line { margin-top: 3px; line-height: 1; }
.pr-doc-mark { cursor: help; gap: 3px; padding: 1px 5px; font-weight: 600; }
.pr-doc-mark > i { font-size: var(--erp-fs-2xs); }
.pr-doc-mark--off { opacity: .5; }
.pr-doc-mark--off:hover { opacity: 1; }
/* 문서가 있는 마크는 클릭 가능(뷰어 팝업) — 커서·hover 강조 */
.pr-doc-mark--link { cursor: pointer; }
.pr-doc-mark--link:hover, .pr-doc-mark--link:focus-visible { outline: 2px solid var(--erp-primary); outline-offset: 1px; }

/* ── 매입 문서 뷰어 팝업(견적서·발주서) — contracts/_purchase_doc_viewer_modal.html ── */
.erp-docview-overlay { position: fixed; inset: 0; background: var(--erp-black-a55); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; }
.erp-docview-overlay[hidden] { display: none; }
.erp-docview-box { background: var(--erp-bg-card); border-radius: 12px; width: 960px; max-width: 96vw; height: 88vh; max-height: 94vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px var(--erp-black-a35); overflow: hidden; }
.erp-docview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--erp-border); background: var(--erp-bg-soft); flex: 0 0 auto; }
.erp-docview-title { font-size: var(--erp-fs-md); font-weight: 800; color: var(--erp-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-docview-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.erp-docview-link { font-size: var(--erp-fs-sm); color: var(--erp-primary); text-decoration: none; font-weight: 600; }
.erp-docview-link:hover { text-decoration: underline; }
.erp-docview-x { background: none; border: none; font-size: var(--erp-fs-26); line-height: 1; color: var(--erp-text-muted); cursor: pointer; padding: 0 4px; }
.erp-docview-x:hover { color: var(--erp-danger); }
.erp-docview-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--erp-gray-200); display: flex; align-items: stretch; justify-content: center; }
.erp-docview-body iframe { width: 100%; height: 100%; border: none; background: var(--erp-bg-card); display: block; }
.erp-docview-body iframe[hidden] { display: none; }
.erp-docview-body .erp-empty { align-self: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ── 표 행 위계 (묶음 부모 ↔ 하위 회차) ─────────────────────────
   분할 묶음의 부모 행과 분할이 없는 단건('일시불') 행이 같은 위계로 읽히게 하고,
   하위 회차 행은 한 단계 아래임을 좌측 레일로 명시한다.
   종전에는 단건 행에 위계 표식이 없어 바로 위 분할 묶음의 회차로 오인됐다. */
.row-lv-top > td:first-child { box-shadow: inset 3px 0 0 var(--erp-primary); }
.row-lv-sub > td:first-child { box-shadow: inset 3px 0 0 var(--erp-border-strong); }
/* 최상위 행의 매입처·품목명 — 하위 회차(일반 굵기)와 대비되는 강조 */
.row-lv-name { font-weight: 700; }
/* 최상위 행 머리 아이콘 — 묶음(분할) 파랑 / 단건(일시불) 회색 */
.row-lv-icon { margin-right: 5px; color: var(--erp-primary); }
.row-lv-icon--single { color: var(--erp-text-faint); }

/* ── 최상위 행 펼침 토글 ─────────────────────────────────────
   묶음(분할)이든 단건(일시불)이든 최상위 행은 모두 같은 자리의 같은 삼각형으로 펼친다.
   종전에는 묶음에만 토글이 있어 '펼칠 수 있는 행'과 아닌 행이 섞여 보였다.
   셀 내용은 가운데 정렬을 유지하되 토글만 칸 왼쪽 끝에 고정해, 행 종류가 달라도
   삼각형의 x 좌표가 어긋나지 않는다. */
.row-lv-expand-cell { position: relative; padding-left: 22px; }
.row-lv-toggle {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 16px; text-align: center; cursor: pointer;
    color: var(--erp-text-faint); font-size: var(--erp-fs-xs); line-height: 1;
}
.row-lv-toggle:hover { color: var(--erp-primary); }

/* 펼친 묶음의 배경 위계 (HD-260911-001) — 전체 펼침에서 모든 행이 같은 틴트면 건 경계가
   사라진다. 부모(최상위) 행은 한 단계 진하게, 하위 회차·처리 서랍은 흐리게 깐다.
   하위 행 hover 는 부모와 같은 진한 틴트로 올려 클릭 대상이 분명히 드러나게 한다. */
:root {
    --erp-row-lv-open-top-bg:       var(--erp-indigo-100);
    --erp-row-lv-open-edge:         var(--erp-indigo-200);
    --erp-row-lv-open-sub-bg:       color-mix(in srgb, var(--erp-primary-soft) 60%, var(--erp-bg-card));
    --erp-row-lv-open-sub-hover-bg: var(--erp-indigo-100);
}

/* 단건 행을 펼쳤을 때 나오는 처리 서랍 — 계산서·지급 매칭, 분할 전환 진입점 */
.row-lv-drawer > td { background: var(--erp-bg-soft); }
.row-lv-drawer-inner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    padding: 5px 8px 5px 26px;
}
.row-lv-drawer-lead {
    margin-right: 4px;
    font-size: var(--erp-fs-xs); color: var(--erp-text-muted);
}

/* ── KPI value 색 (kv-*, val-* 통합) ──────────────────────── */
.val--info,    .kv--info,    .val-blue,   .kv-blue   { color: var(--erp-info-strong); }
.val--success, .kv--success, .val-green,  .kv-green  { color: var(--erp-success-strong); }
.val--danger,  .kv--danger,  .val-red,    .kv-red    { color: var(--erp-danger-strong); }
.val--warning, .kv--warning, .val-amber,  .kv-orange { color: var(--erp-warning-strong); }
.val--brand                                          { color: var(--erp-primary-deep); }

/* ── Numeric / amount cell ───────────────────────────────── */
.cell-num,
.td-num,
.td-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cell-num--bold { font-weight: 700; }
/* 해당 섹션/행에서 쓰지 않는 컬럼임을 표시 (빈칸과 '0'을 구분하기 위함).
   0 을 그려두면 사용자가 '입력된 값'으로 오해하므로 옅은 대시로 비활성 표기. */
.cell-na {
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-sm);
    user-select: none;
}
.styled-table td.cell-num,
.styled-table td.td-num,
.styled-table td.td-right { text-align: right; }
.cell-left,
.td-left,
.styled-table th.cell-left,
.styled-table td.cell-left,
.styled-table th.td-left,
.styled-table td.td-left {
    text-align: left;
}
/* Bootstrap text-end 보강: tabular-nums 적용해 자릿수 정렬 통일 */
.styled-table td.text-end,
td.cell-amount { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 금액 과세기준 구분 마크 (VAT별도 / VAT포함) ──────────────────
   같은 화면에 공급가(VAT별도)와 합계(VAT포함)가 섞여 있으면 숫자만 보고는
   어느 기준인지 알 수 없다. 영업 금액은 공급가(VAT별도)가 주 표기이고
   VAT포함은 보조 — 그 구분을 열 헤더·필드 라벨에 항상 붙인다.
   표시 전용 마크다. 저장값·계산 로직과는 무관하다. */
.vat-tag {
    display: inline-block;
    margin-left: 3px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--erp-radius-sm);
    font-size: var(--erp-fs-2xs);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.2px;
    white-space: nowrap;
    vertical-align: middle;
}
/* VAT별도(공급가) — 영업 기준 금액이라 색을 준다 */
.vat-tag--excl {
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
    border-color: var(--erp-primary-soft);
}
/* VAT포함(합계) — 보조 표기라 무채색으로 눌러 둔다 */
.vat-tag--incl {
    color: var(--erp-text-muted);
    background: var(--erp-bg-sunken);
    border-color: var(--erp-border);
}
/* 표 헤더 안에서는 제목 아래 줄로 떨어뜨린다 — 열 폭을 넓히지 않기 위함.
   .styled-table / .data-table 헤더가 모두 가운데 정렬이라 기본은 가운데. */
table th .vat-tag {
    display: block;
    width: fit-content;
    margin: 2px auto 0;
}
table th.text-end .vat-tag,
table th.cell-right .vat-tag { margin-right: 0; }
table th.cell-left .vat-tag,
table th.td-left .vat-tag { margin-left: 0; }
/* 폼 라벨 옆에서는 한 줄로 붙여 쓴다 */
label .vat-tag { display: inline-block; margin-top: 0; }
/* 라벨-값 세로 표(th가 왼쪽 라벨 칸)에서는 값 칸의 금액 옆에 붙인다.
   라벨 칸은 폭이 고정이라 태그를 넣으면 행이 2줄로 늘어난다.
   오른쪽 정렬 칸이면 숫자 앞에 두어 자릿수 정렬(tabular-nums)을 깨지 않는다. */
td.cell-num > .vat-tag,
td.text-end > .vat-tag { margin-left: 0; margin-right: 4px; }

/* ── Section header / title ──────────────────────────────── */
.section-card {
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    margin-bottom: var(--erp-space-4);
    overflow: hidden;
}
/* ⚠️ 본문이 잘리는 문제의 근본 원인 (2026-07-31)
   base.html 의 .main-content 는 `display:flex; flex-direction:column` 이다.
   flex 아이템의 기본값은 flex-shrink:1 이라, 내용이 컨테이너보다 크면 카드가
   **줄어들면서 아래쪽이 잘린다** — overflow:hidden 때문에 스크롤도 안 된다.
   페이지마다 개별 대응하면 새 화면에서 계속 재발하므로 여기서 한 번에 막는다.
   화면 높이를 채워야 하는 카드는 각 페이지에서 flex 를 명시하면 그쪽이 이긴다. */
.main-content > .section-card { flex-shrink: 0; }
.section-header {
    height: 44px;
    padding: 0 18px;
    border-bottom: 1px solid var(--erp-border);
    background: var(--erp-bg-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.section-title {
    font-size: var(--erp-fs-lg);
    font-weight: 700;
    color: var(--erp-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-title > i { color: var(--erp-primary); }
.section-body { padding: var(--erp-space-5); }
.section-body-flush { padding: 0; }

/* ── 나란히 놓는 2단 섹션 카드 (일괄지급 상세 상단 등) ──────────
   두 카드 높이를 항상 맞춘다. flex 기본 stretch 에만 기대면 한쪽이
   줄바꿈될 때 갈라지므로, 열 자체를 flex 컬럼으로 만들어 body 가 남은
   높이를 채우게 한다. */
.bpm-top2 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--erp-space-4);
    margin-bottom: var(--erp-space-4);
}
.bpm-top2__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 0;
    align-self: stretch;
}
.bpm-top2__col > .section-body {
    flex: 1 1 auto;   /* 짧은 카드도 아래까지 채워 테두리 높이가 맞는다 */
}

/* ── 결재선 플로우 (품의서·일일마감 공통) ──────────────────────
   상단 묶음 헤더(기안 | 결재) + 동일 크기 결재 박스 + 최종 병렬 그룹.
   draft 폭은 .aflow 에 --aflow-draft-w 로 조절. */
.aflow { --aflow-draft-w: 220px; }
.aflow-headrow, .aflow-bodyrow { display: flex; gap: 14px; align-items: stretch; }
/* 헤더 행: 기안↔결재 헤더 사이를 chevron 가로폭만큼 띄워 결재 헤더가
   결재 열 시작점과 정렬되도록 한다 */
.aflow-headrow { gap: 46px; }
/* 본문 행은 간격을 좁혀 chevron 이 기안 박스에 바로 붙도록 한다 */
.aflow-bodyrow { margin-top: 10px; gap: 4px; }
.aflow-head {
    display: flex; align-items: center; justify-content: center;
    padding: 9px 12px; border-radius: 8px;
    font-size: var(--erp-fs-sm); font-weight: 800; letter-spacing: .02em;
}
.aflow-head--draft   { flex: 0 0 var(--aflow-draft-w); background: var(--erp-primary-soft); color: var(--erp-primary-deep); }
.aflow-head--approve { flex: 1; background: var(--erp-bg-soft); color: var(--erp-text-strong); border: 1px solid var(--erp-border); }
.aflow-col-draft   { flex: 0 0 var(--aflow-draft-w); display: flex; }
.aflow-col-approve { flex: 1; display: flex; align-items: stretch; justify-content: center; gap: 0; min-width: 0; }
.aflow-box {
    /* 모든 결재 카드는 기안자 카드와 동일 폭(--aflow-draft-w)으로 고정.
       남는 가로 공간으로 늘어나지 않고 좌측 정렬로 나열된다. */
    flex: 0 0 auto; width: var(--aflow-draft-w);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    padding: 16px 14px; text-align: center;
    background: var(--erp-bg-card); border: 1.5px solid var(--erp-border); border-radius: 10px;
}
.aflow-box--draft    { border-color: var(--erp-primary); background: color-mix(in srgb, var(--erp-primary) 5%, var(--erp-bg-card)); }
.aflow-box--approved { border-color: var(--erp-success); background: color-mix(in srgb, var(--erp-success) 5%, var(--erp-bg-card)); }
.aflow-box--rejected { border-color: var(--erp-danger);  background: color-mix(in srgb, var(--erp-danger) 5%, var(--erp-bg-card)); }
.aflow-role  { font-size: var(--erp-fs-xs); font-weight: 700; color: var(--erp-text-muted); letter-spacing: .03em; }
.aflow-name  { font-size: var(--erp-fs-md); font-weight: 800; color: var(--erp-text-strong); }
.aflow-name span { font-weight: 600; font-size: var(--erp-fs-xs); color: var(--erp-text-muted); margin-left: 3px; }
.aflow-dept  { font-size: var(--erp-fs-xs); color: var(--erp-text-muted); margin-top: -2px; }
.aflow-result {
    font-size: var(--erp-fs-xs); font-weight: 700; padding: 3px 12px;
    border-radius: 20px; white-space: nowrap;
}
.aflow-result--done     { background: var(--erp-primary-soft); color: var(--erp-primary-deep); }
.aflow-result--approved { background: color-mix(in srgb, var(--erp-success) 15%, transparent); color: var(--erp-success); }
.aflow-result--pending  { background: color-mix(in srgb, var(--erp-warning) 18%, transparent); color: var(--erp-amber-800); }
.aflow-result--rejected { background: color-mix(in srgb, var(--erp-danger) 12%, transparent); color: var(--erp-danger); }
.aflow-date  { font-size: var(--erp-fs-xs); color: var(--erp-text-faint); }
.aflow-reason { font-size: var(--erp-fs-xs); color: var(--erp-danger); word-break: break-word; }
.aflow-stamp { font-size: 1.3rem; margin-top: 2px; line-height: 1; }
.aflow-stamp--done     { color: var(--erp-primary); opacity: .55; }
.aflow-stamp--approved { color: var(--erp-success); }
.aflow-stamp--pending  { color: var(--erp-warning); }
.aflow-stamp--rejected { color: var(--erp-danger); }
.aflow-arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 8px; color: var(--erp-text-faint); font-size: var(--erp-fs-15); }
/* 기안 → 결재 연결: 조금 더 큰 chevron, 기안 박스 바로 옆에 붙인다 */
.aflow-arrow--lead { font-size: var(--erp-fs-3xl); padding: 0 14px 0 6px; color: var(--erp-text-muted); }
/* 결재자 사이: 진행 표시(점) 아이콘 + 여유 간격 */
.aflow-arrow--step { font-size: var(--erp-fs-20); padding: 0 18px; color: var(--erp-text-faint); letter-spacing: 2px; }
/* 최종 병렬 그룹: approve 열 안에서 CEO 박스들을 나란히 묶는다(내용 폭) */
.aflow-group { flex: 0 0 auto; display: flex; gap: 10px; align-items: stretch; }
/* 최종 결재: 헤더로 묶은 하나의 큰 섹션 */
.aflow-final { flex: 0 0 auto; display: flex; flex-direction: column;
    border: 1.5px solid var(--erp-border); border-radius: 12px; overflow: hidden;
    background: color-mix(in srgb, var(--erp-primary) 3%, var(--erp-bg-card)); }
.aflow-final.is-approved { border-color: var(--erp-success); background: color-mix(in srgb, var(--erp-success) 4%, var(--erp-bg-card)); }
.aflow-final.is-rejected { border-color: var(--erp-danger);  background: color-mix(in srgb, var(--erp-danger) 4%, var(--erp-bg-card)); }
.aflow-final-head { text-align: center; font-weight: 800; font-size: var(--erp-fs-sm);
    letter-spacing: .02em; padding: 9px 14px; color: var(--erp-primary-deep);
    background: var(--erp-primary-soft); border-bottom: 1px solid var(--erp-border); }
.aflow-final.is-approved .aflow-final-head { color: var(--erp-success); background: color-mix(in srgb, var(--erp-success) 12%, transparent); border-bottom-color: color-mix(in srgb, var(--erp-success) 30%, transparent); }
.aflow-final.is-rejected .aflow-final-head { color: var(--erp-danger);  background: color-mix(in srgb, var(--erp-danger) 10%, transparent);  border-bottom-color: color-mix(in srgb, var(--erp-danger) 28%, transparent); }
.aflow-final-body { display: flex; gap: 12px; padding: 14px; align-items: stretch; }
/* 섹션 안 박스는 중립 테두리(섹션 테두리가 그룹 상태, 결과 칩이 개별 상태를 표시) */
.aflow-final-body .aflow-box { border-color: var(--erp-border); background: var(--erp-bg-card); }
.aflow-hint { margin-top: 10px; font-size: var(--erp-fs-xs); color: var(--erp-text-muted); text-align: right; }
/* 캡션 행: 기안 열 아래 / 결재 열 아래에 각각 붙는 설명.
   본문 행과 같은 3분할(기안폭 · chevron 폭 · 나머지)이라 열 경계가 정확히 맞는다. */
.aflow-footrow { display: flex; gap: 4px; margin-top: 8px; align-items: flex-start; }
.aflow-foot {
    font-size: var(--erp-fs-xs); color: var(--erp-text-muted);
    line-height: 1.6; word-break: keep-all; text-align: center;
}
.aflow-foot--draft   { flex: 0 0 var(--aflow-draft-w); }
.aflow-foot--approve { flex: 1; min-width: 0; }
.aflow-foot b { font-weight: 700; color: var(--erp-text); }
.aflow-foot-spacer { visibility: hidden; }
@media (max-width: 760px) {
    .aflow-headrow, .aflow-bodyrow { flex-direction: column; }
    .aflow-head--draft, .aflow-col-draft { flex: 1 1 auto; }
    .aflow-col-approve { flex-direction: column; gap: 8px; }
    .aflow-arrow { transform: rotate(90deg); padding: 4px 0; }
    .aflow-group { flex-direction: column; width: 100%; }
    .aflow-box { width: 100%; }
    .aflow-footrow { flex-direction: column; gap: 6px; }
    .aflow-foot--draft { flex: 1 1 auto; }
    .aflow-foot-spacer { display: none; }
}

/* ── Page title ──────────────────────────────────────────── */
.page-title {
    font-size: var(--erp-fs-18);
    font-weight: 700;
    color: var(--erp-text-strong);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--erp-space-4);
}
.page-title > i { color: var(--erp-primary); }
.page-title > .meta {
    font-size: var(--erp-fs-md);
    font-weight: 400;
    color: var(--erp-text-faint);
    margin-left: auto;
}

/* ── pf-section 헤더 그라디언트 평면화 (TASK 5) ──────────── */
.pf-section h5::before {
    background: var(--erp-primary) !important;
    background-image: none !important;
}

/* ── 청구 상태 pill (billing_list legacy 매핑) ────────────── */
.pill-PLANNED, .pill-plan         { background: var(--erp-info-bg);    color: var(--erp-info-strong); }
.pill-BILLED, .pill-issued        { background: var(--erp-purple-bg);  color: var(--erp-purple); }
.pill-PARTIAL, .pill-partial      { background: var(--erp-warning-bg); color: var(--erp-warning-strong); }
/* 매입 '지급 예정' — 일괄 지급 묶음에 실려 결재까지 끝났으나 통장 출금 연결 전 */
.pill-SCHEDULED, .pill-scheduled  { background: var(--erp-warning-bg); color: var(--erp-warning-strong); }
.pill-PAID, .pill-paid            { background: var(--erp-success-bg); color: var(--erp-success-strong); }
.pill-OVERDUE, .pill-overdue      { background: var(--erp-danger-bg);  color: var(--erp-danger-strong); }
.pill-CANCELLED, .pill-cancelled  { background: var(--erp-neutral-bg); color: var(--erp-neutral); }
.pill-pending                     { background: var(--erp-warning-bg); color: var(--erp-warning-strong); }

/* Groupware notice composer and login popup */
.gw-title-action { margin-left: auto; }
.gw-notice-compose {
    padding: 20px 24px 28px;
    width: 100%;
    max-width: none;
    margin: 0;
}
.gw-notice-compose-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.gw-notice-compose-head .page-title { margin-bottom: 4px; }
.gw-notice-compose-head p {
    margin: 0;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-md);
}
.gw-notice-form {
    display: grid;
    gap: 14px;
}
.gw-notice-main-section { box-shadow: var(--erp-shadow-md); }
.gw-notice-grid {
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
}
.gw-notice-title-field { min-width: 0; }
.gw-notice-main-section textarea {
    min-height: 260px;
    resize: vertical;
    line-height: 1.7;
}
.gw-notice-options {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(260px, 1.2fr);
    gap: 14px;
    align-items: stretch;
}
.erp-toggle-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-soft);
    cursor: pointer;
    margin: 0;
    min-height: 72px;
}
.erp-toggle-card:hover {
    border-color: var(--erp-border-strong);
    background: var(--erp-bg-card);
}
.erp-toggle-card input {
    margin-top: 3px;
    accent-color: var(--erp-primary);
}
.erp-toggle-card strong {
    display: block;
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-md);
    margin-bottom: 3px;
}
.erp-toggle-card small {
    display: block;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
    line-height: 1.45;
}
.gw-notice-actions {
    border-top: 1px solid var(--erp-border);
    padding-top: 14px;
}

/* ── Modal footer 버튼 우측 정렬 통일 ─────────────────────────
   모든 Bootstrap .modal-footer 하단 액션 버튼을 오른쪽 정렬로 통일한다.
   의도적 좌우 분리는 그대로 유지된다:
     - 인라인 style="justify-content:space-between"
     - 유틸리티 .justify-content-between / .justify-content-center (!important)
     - 고특이성 선택자 (예: .profile-form-modal .modal-footer.between)
     - 개별 버튼 .me-auto (삭제·부가 액션을 왼쪽으로 분리) */
.modal-footer {
    justify-content: flex-end;
}
.erp-notice-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .52);
}
.erp-notice-popup-backdrop.is-visible { display: flex; }
.erp-notice-popup {
    width: min(1080px, 96vw);
    max-height: min(820px, 92vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--erp-radius-lg);
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    box-shadow: 0 22px 70px rgba(15, 23, 42, .28);
}
.erp-notice-popup__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 24px 28px 18px;
    border-bottom: 1px solid var(--erp-border);
    background: var(--erp-bg-soft);
}
.erp-notice-popup__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--erp-primary-strong);
    font-size: var(--erp-fs-xl);
    font-weight: 800;
    margin-bottom: 8px;
}
.erp-notice-popup__title {
    margin: 0;
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-3xl);
    font-weight: 800;
    line-height: 1.35;
    word-break: keep-all;
}
.erp-notice-popup__close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-card);
    color: var(--erp-text-muted);
    cursor: pointer;
}
.erp-notice-popup__close:hover {
    color: var(--erp-text-strong);
    border-color: var(--erp-border-strong);
}
.erp-notice-popup__meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 28px 0;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
}
.erp-notice-popup__body {
    overflow-y: auto;
    padding: 24px 28px 30px;
    color: var(--erp-text);
    font-size: var(--erp-fs-xl);
    line-height: 1.85;
    word-break: keep-all;
}
.erp-notice-popup__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 28px;
    border-top: 1px solid var(--erp-border);
    background: var(--erp-bg-soft);
}
.erp-notice-popup__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.erp-notice-popup__counter {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
    font-weight: 600;
    letter-spacing: .03em;
}
@media (max-width: 760px) {
    .gw-notice-compose { padding: 14px; }
    .gw-notice-compose-head,
    .erp-notice-popup__foot {
        flex-direction: column;
        align-items: stretch;
    }
    .gw-notice-grid,
    .gw-notice-options { grid-template-columns: 1fr; }
    .gw-title-action { margin-left: 0; }
    .erp-notice-popup__actions { justify-content: stretch; }
    .erp-notice-popup__actions .pf-btn,
    .erp-notice-popup__foot > .pf-btn { justify-content: center; }
}
.pill-approved                    { background: var(--erp-success-bg); color: var(--erp-success-strong); }
.pill-rejected                    { background: var(--erp-danger-bg);  color: var(--erp-danger-strong); }
.pill-blue                        { background: var(--erp-info-bg);    color: var(--erp-info-strong); }

/* Core shell, popup, and utility classes */
.erp-shell-page {
    font-family: 'Noto Sans KR', sans-serif;
    background: var(--erp-bg-page);
    color: var(--erp-text);
}
.erp-icon-gap { margin-right: 6px; }
.erp-icon-inline { margin-right: 6px; }
.erp-menu-caret {
    margin-left: 5px;
    font-size: var(--erp-fs-sm);
}
.erp-icon-danger { color: var(--erp-danger-strong) !important; }
.erp-form-inline {
    display: inline;
    margin: 0;
}
.erp-avatar-sm {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: var(--erp-space-2);
    vertical-align: middle;
}
/* 알림 벨 카운터 — Bootstrap badge/rounded-pill/bg-danger 조합을 대신하는 독립 컴포넌트 */
.erp-badge-count {
    display: inline-block;
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--erp-danger);
    color: var(--erp-bg-card);
    font-size: var(--erp-fs-2xs);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
.erp-menu-divider {
    border-top: 1px solid var(--erp-border);
    margin: var(--erp-space-2) 0;
}
.erp-menu-label {
    font-size: var(--erp-fs-2xs);
    font-weight: 700;
    color: var(--erp-text-faint);
    text-transform: uppercase;
    padding: var(--erp-space-2) var(--erp-space-5) var(--erp-space-1);
}
.erp-admin-highlight-link {
    background-color: var(--erp-warning-bg) !important;
    color: var(--erp-warning-strong) !important;
}
.erp-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px;
}
.erp-own-company-select {
    font-weight: 800 !important;
    color: var(--erp-primary) !important;
    background: var(--erp-info-bg) !important;
    border-color: var(--erp-primary) !important;
}

.btn-xs-outline-light {
    background: var(--erp-white-a08);
    color: var(--erp-bg-card);
    border: 1px solid var(--erp-white-a55);
}
.btn-xs-outline-light:hover {
    background: var(--erp-bg-card);
    color: var(--erp-primary-strong);
}

.erp-popup-page {
    margin: 0;
    padding: 0;
    background: var(--erp-bg-page);
}
.erp-popup-header {
    background: linear-gradient(135deg, var(--erp-warning) 0%, var(--erp-warning-strong) 100%);
    color: var(--erp-bg-card);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--erp-fs-lg);
    font-weight: 700;
}
.erp-popup-title {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
}
.erp-popup-body {
    padding: 12px 16px 16px;
}
.erp-popup-close {
    font-size: var(--erp-fs-sm);
}
.erp-popup-page .form-control,
.erp-popup-page .form-select {
    font-size: var(--erp-fs-md);
}
.erp-popup-page .form-label {
    font-size: var(--erp-fs-sm);
    font-weight: 600;
    color: var(--erp-text-muted);
    margin-bottom: var(--erp-space-1);
}
.erp-popup-page .card {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    box-shadow: var(--erp-shadow-sm);
    margin-bottom: 12px;
}
.erp-popup-page .card-header {
    background: var(--erp-bg-soft);
    border-bottom: 1px solid var(--erp-border);
    padding: 8px 14px;
    font-size: var(--erp-fs-md);
    font-weight: 700;
}
.erp-popup-page .card-body {
    padding: 14px;
}
.erp-popup-page .form-card.company-form-compact,
.erp-popup-page .contact-form-wrapper {
    max-width: 100% !important;
}
.erp-popup-page .contact-form-wrapper {
    min-width: unset;
}

.erp-modal-header,
.modal-header.erp-modal-header {
    background: var(--erp-neutral);
    color: var(--erp-bg-card);
}
/* vendor/bootstrap의 .modal-header{color} 가 흰색 제목을 덮어쓰지 않도록 명시도 상향 */
.modal-header.erp-modal-header .modal-title,
.modal-header.erp-modal-header .modal-title i {
    color: var(--erp-bg-card);
}
.erp-modal-meta {
    font-size: var(--erp-fs-md);
    color: var(--erp-text-muted);
}
.erp-modal-message {
    font-size: var(--erp-fs-lg);
    line-height: 1.7;
    color: var(--erp-text);
    white-space: pre-wrap;
    word-break: break-word;
}
.erp-loading-state,
.erp-empty-state {
    padding: 24px 0;
    text-align: center;
    color: var(--erp-text-muted);
}

/* ── 저장된 검색조건 바 (전 화면 공용, partials/_saved_filter_bar.html) ── */
.erp-sf-bar {
    display: none;  /* JS가 조건 유무를 판단해 노출 */
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    background: var(--erp-bg-soft);
    font-size: var(--erp-fs-sm);
}
.erp-sf-bar.is-visible { display: flex; }
.erp-sf-bar > i { color: var(--erp-text-faint); }
.erp-sf-label { color: var(--erp-text-muted); font-weight: 700; margin-right: 2px; }
.erp-sf-hint { color: var(--erp-text-faint); }
.erp-sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 8px;
    border: 1px solid var(--erp-border);
    border-radius: 999px;
    background: var(--erp-bg-card);
}
.erp-sf-chip.is-default { border-color: var(--erp-primary); }
.erp-sf-chip.is-default > a::before {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--erp-primary);
    margin-right: 4px;
    font-size: var(--erp-fs-2xs);
}
.erp-sf-chip > a {
    color: var(--erp-text-strong);
    font-weight: 600;
    text-decoration: none;
}
.erp-sf-chip > a:hover { color: var(--erp-primary); }
.erp-sf-del {
    border: none;
    background: transparent;
    color: var(--erp-text-faint);
    cursor: pointer;
    padding: 0 3px;
    line-height: 1;
    font-size: var(--erp-fs-2xs);
}
.erp-sf-del:hover { color: var(--erp-danger); }
.erp-sf-add {
    border: 1px dashed var(--erp-border);
    background: transparent;
    border-radius: 999px;
    color: var(--erp-text-muted);
    cursor: pointer;
    padding: 2px 10px;
    font-size: var(--erp-fs-xs);
    font-weight: 600;
}
.erp-sf-add:hover { border-color: var(--erp-primary); color: var(--erp-primary); }

/* ── 모바일(≤820px): 저장된 조건 바 전체 숨김 ──
   좁은 화면에서 이 바가 콘텐츠 위 한 줄을 통째로 잡아먹어 방해가 된다.
   조건 저장/불러오기는 데스크톱 전용 기능으로 둔다(2026-08-03 사용자 지시).
   JS 가 붙이는 .is-visible(0,2,0) 을 확실히 덮도록 !important 사용. */
@media (max-width: 820px) {
    .erp-sf-bar { display: none !important; }
}

/* ── 변경이력 모달 (전 화면 공용, partials/_history_modal.html) ── */
.erp-hist-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10060;
    background: rgba(15, 23, 42, .45);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.erp-hist-overlay.is-open { display: flex; }
.erp-hist-box {
    background: var(--erp-bg-card);
    border-radius: 12px;
    width: min(760px, 100%);
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px var(--erp-black-a22);
}
.erp-hist-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--erp-border);
}
.erp-hist-kind { font-size: var(--erp-fs-xs); color: var(--erp-text-muted); font-weight: 700; }
.erp-hist-title { font-size: var(--erp-fs-lg); color: var(--erp-text-strong); font-weight: 700; }
.erp-hist-close {
    border: none; background: transparent; cursor: pointer;
    color: var(--erp-text-faint); font-size: var(--erp-fs-lg); line-height: 1;
}
.erp-hist-close:hover { color: var(--erp-text-strong); }
.erp-hist-body { padding: 12px 18px 18px; overflow-y: auto; }
.erp-hist-ver {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    margin-bottom: 10px;
}
.erp-hist-ver-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 8px 10px;
    background: var(--erp-bg-soft);
    font-size: var(--erp-fs-sm);
}
.erp-hist-no { font-weight: 800; color: var(--erp-primary); }
.erp-hist-when { color: var(--erp-text-muted); font-variant-numeric: tabular-nums; }
.erp-hist-who { color: var(--erp-text); }
.erp-hist-reason { color: var(--erp-text-faint); font-style: italic; }
.erp-hist-tbl { width: 100%; border-collapse: collapse; font-size: var(--erp-fs-sm); }
.erp-hist-tbl td { padding: 6px 10px; border-top: 1px solid var(--erp-border); vertical-align: top; }
.erp-hist-f { width: 30%; color: var(--erp-text-muted); font-weight: 600; }
.erp-hist-old { color: var(--erp-text-faint); text-decoration: line-through; }
.erp-hist-arw { width: 24px; text-align: center; color: var(--erp-text-faint); }
.erp-hist-new { color: var(--erp-text-strong); font-weight: 600; }
@media (max-width: 640px) {
    .erp-hist-f { width: 40%; }
    .erp-hist-tbl td { padding: 5px 6px; }
}
.erp-error-state {
    padding: 24px 0;
    text-align: center;
    color: var(--erp-danger);
}

.erp-digest-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: var(--erp-bg-soft);
    border-left: 4px solid var(--erp-primary);
    border-radius: var(--erp-radius-sm);
}
.erp-digest-meta-count {
    font-size: var(--erp-fs-xl);
    font-weight: 700;
    color: var(--erp-primary);
    white-space: nowrap;
}
.erp-digest-meta-desc {
    font-size: var(--erp-fs-md);
    color: var(--erp-text);
    line-height: 1.5;
}
.erp-digest-meta-sent {
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-muted);
}
.erp-digest-card {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    margin-bottom: 10px;
    background: var(--erp-bg-card);
}
.erp-digest-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--erp-bg-soft);
    border-bottom: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md) var(--erp-radius-md) 0 0;
}
.erp-digest-time {
    font-size: var(--erp-fs-sm);
    font-weight: 600;
    color: var(--erp-text-muted);
    white-space: nowrap;
}
.erp-digest-time i { color: var(--erp-text-faint); }
.erp-digest-source {
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-muted);
    padding: 2px 8px;
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    white-space: nowrap;
}
.erp-digest-fill { flex: 1; }
.erp-digest-detail {
    display: none;
    padding: 12px 14px 14px;
}
.erp-digest-section {
    font-size: var(--erp-fs-sm);
    font-weight: 700;
    margin: 0 0 6px;
}
.erp-digest-section--bank { color: var(--erp-info-strong); }
.erp-digest-section--tax { color: var(--erp-purple); }
.erp-digest-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    overflow: hidden;
}
.erp-digest-table th {
    text-align: center;
    padding: 6px 8px;
    font-size: var(--erp-fs-xs);
    background: var(--erp-bg-hover);
    color: var(--erp-text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--erp-border);
    white-space: nowrap;
}
.erp-digest-table td {
    padding: 5px 8px;
    font-size: var(--erp-fs-sm);
    color: var(--erp-text);
    border-bottom: 1px solid var(--erp-bg-hover);
}
.erp-digest-table .cell-right { text-align: right; }
.erp-digest-table .cell-left { text-align: left; }
.erp-digest-table .cell-center { text-align: center; }
.erp-digest-open-link {
    color: var(--erp-primary);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.erp-digest-open-link:hover { text-decoration: underline; }
.erp-digest-badge-gap { margin-right: 6px; }

/* Global iAlert/iConfirm modal */
.ire-modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: ire-fade .12s ease-out;
}
.ire-modal-bg.show { display: flex; }
@keyframes ire-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ire-pop { from { transform: translateY(-8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.ire-modal {
    background: var(--erp-bg-card);
    width: 420px;
    max-width: 92vw;
    border-radius: var(--erp-radius-lg);
    box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
    overflow: hidden;
    animation: ire-pop .15s ease-out;
    font-family: inherit;
}
.ire-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--erp-bg-hover);
    font-size: var(--erp-fs-lg);
    font-weight: 700;
    color: var(--erp-text-strong);
}
.ire-modal-head .ire-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--erp-fs-lg);
    flex-shrink: 0;
}
.ire-modal[data-kind="info"] .ire-icon { background: var(--erp-info-bg); color: var(--erp-info-strong); }
.ire-modal[data-kind="confirm"] .ire-icon { background: var(--erp-warning-bg); color: var(--erp-warning-strong); }
.ire-modal[data-kind="error"] .ire-icon { background: var(--erp-danger-bg); color: var(--erp-danger-strong); }
.ire-modal[data-kind="success"] .ire-icon { background: var(--erp-success-bg); color: var(--erp-success-strong); }
.ire-modal-body {
    padding: 14px 20px 18px;
    font-size: var(--erp-fs-md);
    color: var(--erp-text);
    line-height: 1.55;
    word-break: keep-all;
}
.ire-modal-msg {
    white-space: pre-wrap;
    word-break: keep-all;
}
.ire-modal-msg[hidden] { display: none; }
/* ── 현재 → 변경 비교 표 (window.iCompareConfirm) ── */
.ire-modal--wide { width: 620px; }
.ire-modal-diff[hidden] { display: none; }
.ire-modal-diff { margin-top: 4px; }
.ire-modal-diff-cap {
    font-size: var(--erp-fs-sm);
    font-weight: 700;
    color: var(--erp-text-strong);
    margin-bottom: 8px;
    word-break: break-all;
}
.ire-modal-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--erp-fs-sm);
    table-layout: fixed;
}
.ire-modal-diff-table th,
.ire-modal-diff-table td {
    border: 1px solid var(--erp-border);
    padding: 6px 9px;
    text-align: right;
    word-break: break-all;
    color: var(--erp-text);
}
.ire-modal-diff-table thead th {
    background: var(--erp-bg-soft);
    color: var(--erp-text-muted);
    font-weight: 700;
    text-align: center;
    font-size: var(--erp-fs-xs);
}
.ire-modal-diff-table tbody th {
    background: var(--erp-bg-soft);
    color: var(--erp-text-muted);
    font-weight: 700;
    text-align: left;
    width: 32%;
}
.ire-modal-diff-table thead th.is-next,
.ire-modal-diff-table td.is-next { color: var(--erp-text-strong); font-weight: 700; }
.ire-modal-diff-table tr.is-changed td.is-next { color: var(--erp-danger); }
.ire-modal-diff-table tr.is-changed th { color: var(--erp-text-strong); }
.ire-modal-diff-note {
    margin-top: 10px;
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-muted);
    white-space: pre-wrap;
    word-break: keep-all;
}
.ire-modal-prompt {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ire-modal-prompt[hidden] { display: none; }
.ire-modal-prompt-label {
    font-size: var(--erp-fs-sm);
    font-weight: 700;
    color: var(--erp-text-muted);
}
.ire-modal-prompt-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-soft);
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-md);
    font-family: inherit;
    outline: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.ire-modal-prompt-input:hover,
.ire-modal-prompt-input:focus {
    background: var(--erp-bg-card);
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 3px var(--erp-primary-ring);
}
.ire-modal-prompt-input[aria-invalid="true"] {
    border-color: var(--erp-danger);
    box-shadow: 0 0 0 3px var(--erp-danger-border);
}
.ire-modal-prompt-hint,
.ire-modal-prompt-error {
    font-size: var(--erp-fs-xs);
    line-height: 1.45;
}
.ire-modal-prompt-hint { color: var(--erp-text-muted); }
.ire-modal-prompt-error {
    color: var(--erp-danger);
    font-weight: 600;
}
.ire-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: var(--erp-bg-soft);
    border-top: 1px solid var(--erp-bg-hover);
}
.ire-modal-btn {
    border: 0;
    padding: 8px 16px;
    border-radius: var(--erp-radius-sm);
    font-size: var(--erp-fs-md);
    font-weight: 600;
    cursor: pointer;
    min-width: 64px;
}
.ire-modal-btn-cancel {
    background: var(--erp-bg-card);
    color: var(--erp-text-muted);
    border: 1px solid var(--erp-border-strong);
}
.ire-modal-btn-cancel:hover { background: var(--erp-bg-soft); }
.ire-modal-btn-ok { background: var(--erp-primary); color: var(--erp-bg-card); }
.ire-modal-btn-ok:hover { background: var(--erp-primary-strong); }
.ire-modal[data-kind="error"] .ire-modal-btn-ok { background: var(--erp-danger); }
.ire-modal[data-kind="error"] .ire-modal-btn-ok:hover { background: var(--erp-danger-strong); }
.ire-modal[data-kind="confirm"] .ire-modal-btn-ok { background: var(--erp-warning-strong); }
.ire-modal[data-kind="confirm"] .ire-modal-btn-ok:hover { background: var(--erp-warning-strong); }

/* ── Weekly work mix stacked bar ─────────────────────────── */
.work-mix {
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-soft);
}
.work-mix__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.work-mix__label {
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    color: var(--erp-text-muted);
}
.work-mix__total {
    font-size: var(--erp-fs-lg);
    font-weight: 800;
    color: var(--erp-text-strong);
    white-space: nowrap;
}
.work-mix-bar {
    display: flex;
    width: 100%;
    height: 14px;
    overflow: hidden;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-pill);
    background: var(--erp-bg-sunken);
}
.work-mix-bar--empty {
    align-items: center;
    justify-content: center;
    height: 18px;
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    color: var(--erp-text-faint);
}
.work-mix-bar__segment {
    width: var(--work-mix-width);
    min-width: 2px;
    height: 100%;
}
.work-mix-bar__segment + .work-mix-bar__segment {
    border-left: 1px solid var(--erp-bg-card);
}
.work-mix-bar__segment--internal,
.work-mix__dot--internal { background: var(--erp-primary); }
.work-mix-bar__segment--external,
.work-mix__dot--external { background: var(--erp-success); }
/* 재택은 purple. accent(var(--erp-accent))는 휴가(warning)와 같은 값이라 쓰면 구분이 안 된다. */
.work-mix-bar__segment--remote,
.work-mix__dot--remote { background: var(--erp-purple); }
.work-mix-bar__segment--vacation,
.work-mix__dot--vacation { background: var(--erp-warning); }
.work-mix-bar__segment--travel,
.work-mix__dot--travel { background: var(--erp-info); }
.work-mix-bar__segment--afterhours,
.work-mix__dot--afterhours { background: var(--erp-danger); }
/* 누적 게이지 (소정근로 대비) — 기준선 마커 + 부족분 빗금 */
.work-mix-bar--gauge { position: relative; height: 18px; }
.work-mix-bar__segment--shortage {
    background: repeating-linear-gradient(
        45deg,
        var(--erp-bg-sunken), var(--erp-bg-sunken) 5px,
        var(--erp-border) 5px, var(--erp-border) 10px
    );
}
.work-mix-bar__marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    background: var(--erp-text-strong);
    z-index: 2;
    pointer-events: none;
}
.work-mix-bar__marker::after {
    content: '소정';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--erp-fs-9);
    font-weight: 700;
    color: var(--erp-text-strong);
    white-space: nowrap;
}
/* 슬림 누적 게이지 — 홈 월/분기 근무 진행바처럼 좁은 영역에 넣을 때.
   높이만 줄이고 색·세그먼트 규칙은 기본 .work-mix-bar 와 동일하게 유지한다. */
.work-mix-bar--slim {
    position: relative;
    height: 10px;
    border: 0;
}
.work-mix-bar--slim .work-mix-bar__marker { top: 0; bottom: 0; }
.work-mix-bar--slim .work-mix-bar__marker::after { content: none; }
/* 여러 슬림 게이지가 공유하는 한 줄 범례 (홈 월/분기 진행바 하단) */
.work-mix__legend--home {
    margin-top: 8px;
    gap: 4px 12px;
    justify-content: center;
}
.work-mix__legend--home .work-mix__legend-item { min-width: 0; }
.work-mix__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
}
.work-mix__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 62px;
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-muted);
    white-space: nowrap;
}
.work-mix__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--erp-radius-pill);
    flex: 0 0 auto;
}
.work-mix__legend-value {
    font-weight: 700;
    color: var(--erp-text);
}
.work-mix--compact {
    padding: 8px 10px;
    margin: 0;
    border-radius: var(--erp-radius-sm);
}
.work-mix--compact .work-mix__head {
    margin-bottom: 6px;
}
.work-mix--compact .work-mix__total {
    font-size: var(--erp-fs-md);
}
/* 팀원 주간 보고: 범례를 헤더 한 줄에 (라벨 | 범례 ……오른쪽 | 합계) */
.work-mix--legend-head .work-mix__head {
    align-items: center;
    flex-wrap: wrap;
}
.work-mix__legend--head {
    margin: 0 0 0 auto;
    flex: 1 1 auto;
    justify-content: flex-end;
}
/* 합산 시간을 배지 형태로 (이번주 일정 구성 우측 끝) */
.work-mix__total--badge {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-primary);
    color: var(--erp-bg-card);
    line-height: 1.4;
}
/* 담당자 카드 헤더 주차 네비 (‹ 주차범위 › 이번주) */
.team-wr-member-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.team-wr-member-week {
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    color: var(--erp-text-strong);
    white-space: nowrap;
    min-width: 78px;
    text-align: center;
}
.team-schedule-link {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 3px 4px;
    border: 0;
    border-radius: var(--erp-radius-sm);
    background: transparent;
    color: var(--erp-text-muted);
    font: inherit;
    font-size: var(--erp-fs-sm);
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}
.team-schedule-link:hover,
.team-schedule-link:focus-visible {
    background: var(--erp-bg-hover);
    color: var(--erp-text);
    outline: none;
}
.team-schedule-link__date {
    color: var(--erp-text-faint);
}
.team-schedule-link__hours {
    color: var(--erp-info);
    font-size: var(--erp-fs-xs);
    font-weight: 700;
}
.team-schedule-link__client {
    color: var(--erp-text-strong);
}
/* 한 행 안에 채우고 넘치면 말줄임(…) — 전체 텍스트는 title 툴팁으로 노출 */
.team-schedule-link__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.team-schedule-link > .pill,
.team-issue-manual > .pill {
    flex: 0 0 auto;
}
.team-issue-manual {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    line-height: 1.5;
}

/* 팀 주간 보고 카드 — 3칼럼(이번주 | 차주 | 이슈/작성내용 적층) */
.team-wr-grid {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr 1fr;
}
.team-wr-col {
    padding: 10px 12px;
    min-width: 0;
}
.team-wr-col + .team-wr-col {
    border-left: 1px solid var(--erp-border);
}
.team-wr-col--thisweek {
    background: var(--erp-primary-soft);
}
/* 3번째 칼럼: 이슈 사항(위) / 작성 내용(아래) 위아래 적층 */
.team-wr-col--stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.team-wr-sub + .team-wr-sub {
    padding-top: 8px;
    border-top: 1px solid var(--erp-border);
}
.team-wr-col__head {
    margin-bottom: 6px;
    font-size: var(--erp-fs-sm);
    font-weight: 700;
    color: var(--erp-text);
    text-align: center;
}
.team-wr-col__head--issue {
    color: var(--erp-danger);
}
/* 주간 보고 금주/차주 하나씩 보기 토글 (HD-260831-003)
   섹션 컨테이너에 view 클래스가 붙으면 반대편 칼럼을 숨기고 남은 칼럼이 폭을 차지 */
.team-wr-view--this .team-wr-col--nextweek,
.team-wr-view--next .team-wr-col--thisweek {
    display: none;
}
.team-wr-view--this .team-wr-grid,
.team-wr-view--next .team-wr-grid {
    grid-template-columns: 2.6fr 1fr;
}
.team-wr-view--next .team-wr-col--nextweek {
    border-left: 0;
}
/* 개인 주간 보고(이번주/차주 2칼럼)도 동일 토글 — 남는 칼럼 전폭 */
.wr-my-view--this .wr-my-col--next,
.wr-my-view--next .wr-my-col--this {
    display: none;
}
.wr-my-view--this .wr-my-col--this,
.wr-my-view--next .wr-my-col--next {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
.team-wr-text {
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-muted);
    line-height: 1.6;
    white-space: pre-wrap;
}
.team-wr-empty {
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-faint);
}
/* 긴 텍스트 10줄 클램프 + 상세보기 (대시보드 작성 내용/점검 내용) */
.erp-clamp-wrap {
    min-width: 0;
}
.erp-clamp-10 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    line-clamp: 10;
    overflow: hidden;
}
.erp-more-btn {
    margin-top: 4px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--erp-primary);
    font-size: var(--erp-fs-xs);
    font-weight: 600;
    cursor: pointer;
}
.erp-more-btn:hover {
    text-decoration: underline;
}
.erp-more-btn[hidden] {
    display: none;
}
.team-weekly-mix-wrap {
    padding: 10px 12px;
    border-bottom: 1px solid var(--erp-border);
}
.modal-box.schedule-detail-modal {
    width: min(760px, calc(100vw - 32px));
}
.schedule-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-soft);
}
.schedule-detail-row {
    min-width: 0;
}
.schedule-detail-row--wide {
    grid-column: 1 / -1;
}
.schedule-detail-label {
    display: block;
    margin-bottom: 2px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
    font-weight: 700;
}
.schedule-detail-value {
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-md);
    font-weight: 600;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.schedule-detail-text {
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-soft);
    color: var(--erp-text);
    font-size: var(--erp-fs-md);
    line-height: 1.55;
    white-space: pre-wrap;
}
.schedule-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}
.modal-close-icon {
    color: var(--erp-text-faint);
    cursor: pointer;
    font-size: var(--erp-fs-3xl);
    line-height: 1;
}
.modal-close-icon:hover {
    color: var(--erp-text-muted);
}

@media (max-width: 720px) {
    .schedule-detail-summary {
        grid-template-columns: 1fr;
    }
}

/* ── 문서 작성 안내 모달 (내부품의서 / 지출결의서 구분 가이드) ───────
   "작성" 버튼 클릭 시 매번 노출되는 안내 팝업. 페이지별 인라인 정의 금지 — 이 클래스만 재사용. */
.doc-guide-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(15, 23, 42, .45);
    justify-content: center;
    align-items: center;
    padding: 16px;
}
.doc-guide-overlay.is-open { display: flex; }
.doc-guide-box {
    width: min(680px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--erp-bg-card);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-lg);
    box-sizing: border-box;
}
.doc-guide-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 28px;
    background: var(--erp-primary-soft);
    border-bottom: 1px solid var(--erp-border);
}
.doc-guide-header > i { color: var(--erp-primary); font-size: var(--erp-fs-2xl); }
.doc-guide-title {
    margin: 0;
    font-size: var(--erp-fs-2xl);
    font-weight: 800;
    color: var(--erp-text-strong);
}
.doc-guide-body {
    padding: 28px;
    font-size: var(--erp-fs-lg);
    line-height: 1.75;
    color: var(--erp-text);
}
.doc-guide-lead {
    margin: 0 0 18px;
    font-size: var(--erp-fs-xl);
    line-height: 1.7;
}
.doc-guide-mark {
    font-weight: 800;
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
    padding: 2px 8px;
    border-radius: var(--erp-radius-sm);
}
.doc-guide-callout {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--erp-radius-md);
    background: var(--erp-warning-bg);
    border: 1px solid var(--erp-warning-border);
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-xl);
    line-height: 1.75;
}
.doc-guide-callout > i { color: var(--erp-warning-strong); margin-top: 4px; font-size: var(--erp-fs-2xl); }
.doc-guide-callout strong {
    color: var(--erp-danger);
    background: var(--erp-danger-bg);
    padding: 1px 7px;
    border-radius: var(--erp-radius-sm);
    white-space: nowrap;
}
.doc-guide-thanks {
    margin: 18px 0 0;
    font-size: var(--erp-fs-md);
    color: var(--erp-text-muted);
}
.doc-guide-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 18px 28px;
    border-top: 1px solid var(--erp-border);
    background: var(--erp-bg-soft);
}
.doc-guide-actions .pf-btn {
    padding: 12px 26px;
    font-size: var(--erp-fs-lg);
}
@media (max-width: 560px) {
    .doc-guide-actions { flex-direction: column-reverse; }
    .doc-guide-actions .pf-btn { width: 100%; justify-content: center; }
}

/* ── Task card (management dashboard 3색 카드) ────────────── */
.task-card {
    border-width: 1.5px;
    border-style: solid;
    border-radius: var(--erp-radius-md);
    padding: 14px 16px;
}
.task-card--warning { border-color: var(--erp-warning-border); background: var(--erp-warning-bg); }
.task-card--success { border-color: var(--erp-success-border); background: var(--erp-success-bg); }
.task-card--info    { border-color: var(--erp-info-border);    background: var(--erp-info-bg); }

/* ── Welfare point pages ───────────────────────────────── */
.welfare-page {
    width: 100%;
    max-width: 1180px;
}
.welfare-page--form {
    max-width: 1080px;
}
.welfare-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--erp-space-4);
    margin-bottom: var(--erp-space-4);
}
.welfare-page-heading {
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    margin: 0 0 4px;
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-xl);
    font-weight: 800;
    letter-spacing: 0;
}
.welfare-page-heading > i {
    color: var(--erp-success);
}
.welfare-page-subtitle {
    margin: 0;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    line-height: 1.55;
    word-break: keep-all;
}
.welfare-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--erp-space-2);
    justify-content: flex-end;
}
.welfare-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--erp-space-4);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-card);
}
.welfare-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.welfare-tab:hover {
    color: var(--erp-primary);
    background: var(--erp-bg-soft);
    text-decoration: none;
}
.welfare-tab.is-active {
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
}

/* ── Generic tab bar (.erp-tabs) — page-level section switcher ── */
.erp-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--erp-space-4);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-card);
}
.erp-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--erp-radius-sm);
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.erp-tab:hover {
    color: var(--erp-primary);
    background: var(--erp-bg-soft);
    text-decoration: none;
}
.erp-tab.is-active {
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
}
/* 탭바 + 오른쪽 보조 버튼 한 줄 (예: 자료 조회 탭바의 '민감 설정 목록') */
.erp-tabs-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--erp-space-4);
}
.erp-tabs-row > .erp-tabs { margin-bottom: 0; }
.welfare-rule-notice {
    display: flex;
    flex-direction: column;
    gap: var(--erp-space-4);
    padding: 20px;
    margin-bottom: var(--erp-space-4);
    border: 1px solid var(--erp-info-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-card);
    color: var(--erp-text);
}
.welfare-rule-notice__head {
    display: flex;
    gap: var(--erp-space-3);
    align-items: center;
}
.welfare-rule-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--erp-radius-sm);
    color: var(--erp-info-strong);
    background: var(--erp-info-bg);
    font-size: var(--erp-fs-xl);
    flex: 0 0 auto;
}
.welfare-rule-notice__title {
    margin-bottom: 4px;
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-xl);
    font-weight: 800;
}
.welfare-rule-notice__body {
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-md);
    line-height: 1.55;
    word-break: keep-all;
}
.welfare-rule-notice__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--erp-space-3);
}
.welfare-rule-item {
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    background: var(--erp-bg-soft);
}
.welfare-rule-item__label {
    display: block;
    margin-bottom: 6px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    font-weight: 800;
}
.welfare-rule-item__value {
    display: block;
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-md);
    font-weight: 800;
    line-height: 1.35;
    word-break: keep-all;
}
.welfare-rule-item__meta {
    display: block;
    margin-top: 6px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    line-height: 1.4;
}
.welfare-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: var(--erp-space-3);
    margin-bottom: var(--erp-space-4);
}
.welfare-kpi {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-card);
}
.welfare-kpi__label {
    display: block;
    margin-bottom: 6px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    font-weight: 700;
}
.welfare-kpi__value {
    display: block;
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-xl);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.welfare-kpi__value--limit { color: var(--erp-info-strong); }
.welfare-kpi__value--used { color: var(--erp-warning-strong); }
.welfare-kpi__value--remain { color: var(--erp-success-strong); }
.welfare-kpi__value--empty { color: var(--erp-danger-strong); }
.welfare-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: var(--erp-space-4);
    align-items: start;
}
.welfare-form-main,
.welfare-form-side {
    min-width: 0;
}
.welfare-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--erp-space-4);
}
.welfare-required {
    color: var(--erp-danger);
}
.welfare-input-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.welfare-approval-list {
    display: grid;
    gap: var(--erp-space-2);
}
.welfare-approval-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--erp-space-2);
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    background: var(--erp-bg-soft);
}
.welfare-approval-item.is-final {
    border-color: var(--erp-info-border);
    background: var(--erp-info-bg);
}
.welfare-approval-step {
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
    font-weight: 800;
}
.welfare-approval-name {
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-sm);
    font-weight: 800;
}
.welfare-approval-meta {
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
}
.welfare-link {
    color: var(--erp-primary);
    font-weight: 700;
    text-decoration: none;
}
.welfare-link:hover {
    color: var(--erp-primary-strong);
    text-decoration: underline;
}
.welfare-muted {
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
}

@media (max-width: 1100px) {
    .welfare-form-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 900px) {
    .welfare-page-header,
    .welfare-rule-notice {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .welfare-actions {
        justify-content: flex-start;
    }
    .welfare-rule-notice__items,
    .welfare-kpi-grid {
        grid-template-columns: 1fr;
    }
    .welfare-tabs {
        width: 100%;
        overflow-x: auto;
    }
}

/* ── btn-issue-open (billing_list 발행 버튼) ──────────────── */
.btn-issue-open.btn-xs-primary {
    background: var(--erp-primary);
    color: var(--erp-bg-card);
    border: none;
    border-radius: var(--erp-radius-sm);
    padding: 3px 10px;
    font-size: var(--erp-fs-xs);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s;
}
.btn-issue-open.btn-xs-primary:hover { background: var(--erp-primary-strong); }

/* 스핀 버튼 제거 */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.no-spin { -moz-appearance: textfield; }

/* ── 전자세금계산서 양식 (ti-*) ──────────────────────────────── */
.ti-wrap { border:none; font-size:var(--erp-fs-md); color:var(--erp-text); background:var(--erp-bg-card); width:100%; min-width:820px; }
.ti-main { width:100%; border-collapse:collapse; table-layout:fixed; }
.ti-main td, .ti-main th { border:1px solid var(--erp-border); padding:0; vertical-align:middle; }
.ti-header-td { background:var(--erp-text); padding:14px 20px; text-align:center; border-color:var(--erp-text); }
.ti-title { font-size:var(--erp-fs-24); font-weight:800; letter-spacing:8px; color:var(--erp-bg-card); white-space:nowrap; }
.ti-booknum { font-size:var(--erp-fs-md); color:var(--erp-border); font-weight:600; white-space:nowrap; }
.ti-main .ti-sv { writing-mode:vertical-rl; text-orientation:upright; background:var(--erp-red-50); font-size:var(--erp-fs-md); font-weight:900; color:var(--erp-red-800); text-align:center; letter-spacing:2px; width:28px; padding:20px 6px; border:1px solid var(--erp-red-300); }
.ti-main .ti-sv.buyer { background:var(--erp-blue-50); color:var(--erp-blue-700); border-color:var(--erp-blue-300); }
.ti-main .ti-lbl { background:var(--erp-rose-50); color:var(--erp-rose-800); font-weight:700; font-size:var(--erp-fs-sm); padding:8px 12px; white-space:nowrap; border-color:var(--erp-red-300); text-align:center; }
.ti-main .ti-lbl.buyer { background:var(--erp-blue-50); color:var(--erp-blue-800); border-color:var(--erp-blue-300); }
.ti-main .ti-val { font-size:var(--erp-fs-md); padding:8px 16px; }
.ti-main .ti-lbl-mid { background:var(--erp-blue-100x20); color:var(--erp-slate-700); font-weight:700; font-size:var(--erp-fs-sm); padding:8px 12px; white-space:nowrap; border-color:var(--erp-blue-200x4); text-align:center; }
.ti-sep { width:4px !important; background:var(--erp-text-muted); padding:0 !important; border:none !important; }
.ti-mid-val { font-size:var(--erp-fs-16); font-weight:800; color:var(--erp-text); }
.ti-items { width:100%; border-collapse:collapse; margin-top:-1px; }
.ti-items th { background:var(--erp-text); color:var(--erp-bg-soft); font-size:var(--erp-fs-sm); font-weight:700; padding:9px 6px; border:1px solid var(--erp-neutral); text-align:center; white-space:nowrap; }
.ti-items td { padding:7px 6px; border:1px solid var(--erp-gray-300); text-align:center; font-size:var(--erp-fs-md); height:34px; }
.ti-items td.txt { text-align:left; padding-left:12px; }
.ti-foot { width:100%; border-collapse:collapse; border-top:2px solid var(--erp-slate-700); }
.ti-foot td { padding:10px 14px; border:1px solid var(--erp-gray-300); vertical-align:middle; }
.ti-foot-lbl { font-size:var(--erp-fs-xs); color:var(--erp-text-muted); font-weight:700; margin-bottom:4px; }
.ti-foot-val { font-size:var(--erp-fs-15); font-weight:800; }


/* ── Billing icon button (contract list) ── */
.billing-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:2px solid transparent; background:transparent; cursor:pointer; transition:opacity .15s; font-size:var(--erp-fs-lg); }
.billing-icon-btn:hover { opacity:.75; }
.billing-icon-btn--on  { color:var(--erp-success); border-color:var(--erp-success); }
.billing-icon-btn--off { color:var(--erp-gray-400); border-color:var(--erp-gray-300); }


/* ── 결재 액션 바: 모바일에서 화면 하단 고정 (재사용) ──
   결재 문서의 승인/반려 카드/폼에 .approval-actionbar--mobile-sticky 를 부여하면
   모바일(≤820px)에서 스크롤 위치와 무관하게 하단에 고정되어 항상 노출된다.
   스크롤 컨테이너(.gw-content-area/.hr-content-area/.mgmt-content-area) 안에서 동작.
   인쇄/데스크톱 무영향. 클래스 2회 중첩(특이도 0,2,0)으로 컨테이너 단일 클래스
   규칙(.card/.section-card/.ap-action 의 position:relative 등)을 확실히 덮어쓴다.
   여백/패딩/테두리는 각 컨테이너 고유 스타일을 유지하고 고정 동작만 부여. */
@media screen and (max-width: 820px) {
    .approval-actionbar--mobile-sticky.approval-actionbar--mobile-sticky {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin-bottom: 0;
        background: var(--erp-bg-card);
        box-shadow: 0 -3px 12px var(--erp-black-a12);
    }
}


/* ── 파일 첨부 picker (영수증·견적서 등 — 네이티브 input 숨기고 표준 버튼 노출) ──
   사용: 숨긴 <input type=file class=erp-file-input>, 옆에 .erp-file-row 안에
   .erp-file-btn(파일 선택) + .erp-file-name(파일명) + .erp-file-clear(제거) 배치.
   참조 패턴: templates/contracts/_purchase_item_form_body.html(.pif-file-*) */
.erp-file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.erp-file-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* 행 액션(.btn-xs) 옆에 나란히 놓는 소형 첨부 picker — 버튼 높이·모서리·글자를 .btn-xs 규격에 맞춘다.
   (매입 행 팝업 '발주서' 도구줄처럼 보기·저장·삭제 버튼과 한 줄에 설 때. 기본 규격은 폼용.) */
.erp-file-row--xs { gap:6px; }
.erp-file-row--xs .erp-file-btn { padding:4px 12px; border-radius:var(--erp-radius-sm); line-height:1.45; gap:4px; }
.erp-file-row--xs .erp-file-name { flex:0 1 auto; font-size:var(--erp-fs-xs); max-width:160px; }
.erp-file-row--xs .erp-file-name:not(.has-file) { display:none; }  /* 고른 파일이 있을 때만 이름 표시 — 도구줄에서 '선택된 파일 없음'은 자리만 차지 */
.erp-file-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border-radius:8px;
    border:1.5px solid var(--erp-border-strong);
    background:var(--erp-primary-soft); color:var(--erp-primary-strong);
    font-size:var(--erp-fs-sm); font-weight:600; cursor:pointer;
    white-space:nowrap; transition:background .12s, border-color .12s;
}
.erp-file-btn:hover { background:var(--erp-indigo-100); border-color:var(--erp-primary); }
.erp-file-name {
    font-size:var(--erp-fs-sm); color:var(--erp-text-muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
}
.erp-file-name.has-file { color:var(--erp-text-strong); font-weight:600; }
.erp-file-clear {
    border:none; background:var(--erp-danger-bg); color:var(--erp-danger);
    width:26px; height:26px; border-radius:50%; cursor:pointer;
    flex-shrink:0; font-size:var(--erp-fs-sm); line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
}
.erp-file-clear:hover { background:var(--erp-danger-border); }

/* ── 드래그앤드롭 드롭존 (전역 base.html 엔진과 짝) ─────────────────
   대상: .erp-file-row (표준 picker) + [data-erp-drop] (bespoke opt-in).
   outline을 쓰므로 레이아웃에 영향 없음(리플로우 X). */
.erp-file-row, [data-erp-drop] { border-radius:8px; }
body.erp-drag-active .erp-file-row,
body.erp-drag-active [data-erp-drop] {
    outline:1.5px dashed var(--erp-border-strong); outline-offset:4px;
}
.erp-file-row.erp-drop-over,
[data-erp-drop].erp-drop-over {
    position:relative;
    outline:2px dashed var(--erp-primary); outline-offset:4px;
    background:var(--erp-primary-soft);
}
.erp-drop-msg {
    margin-top:6px; font-size:var(--erp-fs-xs); font-weight:600;
    color:var(--erp-text-muted); flex-basis:100%;
}
.erp-drop-msg.is-err { color:var(--erp-danger); }

/* ── 결재 진행 스텝퍼 (.appr-progress) ──────────────────────
   다단계 결재가 어디까지 진행됐는지 한눈에 보이는 가로 스텝퍼.
   각 step에 state 클래스 부여: --done | --current | --todo | --hold.
   사용처: 매입 지급 결재 목록(purchase_payment_approvals.html). */
.appr-progress { display:flex; align-items:flex-start; min-width:210px; }
.appr-step {
    flex:1 1 0; min-width:0; position:relative;
    display:flex; flex-direction:column; align-items:center; text-align:center;
}
.appr-step::before {
    content:""; position:absolute; top:8px; left:-50%; width:100%; height:2px;
    background:var(--erp-border); z-index:0;
}
.appr-step:first-child::before { display:none; }
.appr-step--done::before,
.appr-step--current::before { background:var(--erp-success); }
.appr-step--hold::before { background:var(--erp-danger); }
.appr-step__dot {
    position:relative; z-index:1; width:18px; height:18px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:var(--erp-fs-2xs); font-weight:800; line-height:1;
    background:var(--erp-bg-soft); color:var(--erp-text-faint);
    border:1.5px solid var(--erp-border);
}
.appr-step__label {
    display:block; margin-top:3px; font-size:var(--erp-fs-xs);
    color:var(--erp-text-muted); white-space:nowrap;
}
.appr-step__meta {
    display:block; font-size:var(--erp-fs-2xs); line-height:1.25;
    color:var(--erp-text-faint); white-space:nowrap;
}
.appr-step--done .appr-step__dot {
    background:var(--erp-success); border-color:var(--erp-success); color:var(--erp-bg-card);
}
.appr-step--current .appr-step__dot {
    background:var(--erp-primary); border-color:var(--erp-primary); color:var(--erp-bg-card);
    box-shadow:0 0 0 3px var(--erp-primary-soft);
}
.appr-step--current .appr-step__label {
    color:var(--erp-primary-strong); font-weight:800;
}
.appr-step--current .appr-step__meta { color:var(--erp-primary); font-weight:700; }
.appr-step--hold .appr-step__dot {
    background:var(--erp-danger); border-color:var(--erp-danger); color:var(--erp-bg-card);
}
.appr-step--hold .appr-step__label { color:var(--erp-danger); font-weight:800; }
/* 반려(--reject): 결재가 중단된 지점 — 빨강 X. */
.appr-step--reject::before { background:var(--erp-danger); }
.appr-step--reject .appr-step__dot {
    background:var(--erp-danger); border-color:var(--erp-danger); color:var(--erp-bg-card);
}
.appr-step--reject .appr-step__label,
.appr-step--reject .appr-step__meta { color:var(--erp-danger); font-weight:700; }
/* 좁은 목록용 컴팩트 스텝퍼: 결재 진행. 점(스텝)은 실제 결재자 수만큼 만들어
   고정 폭 열 안에서 균등 분할(base .appr-step flex:1)해 배치 → 2명이면 앞·뒤 2점
   + 중간 색상바, 3명이면 3분할. 승인/대기/반려 점은 결재자 이름을 title 툴팁으로,
   현재 진행 점만 이름을 표기(meta). */
.appr-progress--mini { min-width:0; }
.appr-progress--mini .appr-step__meta {
    margin-top:2px; max-width:88px; overflow:hidden; text-overflow:ellipsis;
}
/* 즉시 뜨는 커스텀 툴팁(마우스 오버 지연 없음). native title 대신 data-tip 사용.
   결재자 이름을 점 위에 바로 표시한다. */
.appr-progress--mini .appr-step[data-tip] { cursor:help; }
.appr-progress--mini .appr-step[data-tip]::after {
    content:attr(data-tip);
    position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
    background:var(--erp-text-strong); color:var(--erp-bg-card); padding:3px 8px; border-radius:6px;
    font-size:var(--erp-fs-xs); line-height:1.4; white-space:nowrap; font-weight:600;
    opacity:0; visibility:hidden; pointer-events:none; z-index:60; transition:none;
    box-shadow:0 2px 8px var(--erp-black-a18);
}
.appr-progress--mini .appr-step[data-tip]:hover::after { opacity:1; visibility:visible; }

/* ── 지급예정일 D-day 뱃지 (.due-dday) ─────────────────────
   임박/연체를 색으로 구분. over=연체, today=오늘, soon=7일 이내, far=여유. */
.due-dday {
    display:inline-block; margin-top:3px; padding:1px 8px; border-radius:999px;
    font-size:var(--erp-fs-10_5); font-weight:800; line-height:1.6; white-space:nowrap;
}
.due-dday--over   { background:var(--erp-danger-bg);  color:var(--erp-danger); }
.due-dday--today  { background:var(--erp-primary-soft); color:var(--erp-primary-strong); }
.due-dday--soon   { background:var(--erp-warning-bg); color:var(--erp-warning-strong); }
.due-dday--far    { background:var(--erp-bg-soft);    color:var(--erp-text-muted); }
.due-dday--done   { background:var(--erp-success-bg); color:var(--erp-success-strong); }


/* =============================================================
 * 모바일 반응형 (표준 컴포넌트 공통)
 *   화면별 인라인 분열 없이, 디자인 시스템 클래스를 쓰는 모든 화면이
 *   좁은 폭에서 자동으로 정돈되도록 한 곳에서 처리.
 * ============================================================= */
@media (max-width: 640px) {
    /* 2열 폼 그리드 → 1열 (좁은 폭에서 입력 칸 뭉개짐 방지) */
    .pf-grid { grid-template-columns: 1fr; gap: 12px; }
    .pf-section { padding: 14px 16px; }
    /* 폼 액션 버튼: 줄바꿈 허용 + 풀폭 정렬 */
    .pf-actions { flex-wrap: wrap; }
    .pf-actions .pf-btn { flex: 1 1 auto; justify-content: center; }

    /* 페이지/섹션 타이틀: meta 가 아래로 떨어지도록 줄바꿈 허용 */
    .page-title { flex-wrap: wrap; }
    .page-title > .meta { margin-left: 0; flex-basis: 100%; }
    /* !important: 화면별 <style>이 고정 height(42px 등)를 걸어도 모바일에선 자동 높이 —
       제목이 2줄로 늘 때 '전체 보기' 등 헤더 버튼이 본문과 겹치는 것 방지 */
    .section-header { height: auto !important; min-height: 44px; padding: 8px 14px; flex-wrap: wrap; gap: 6px; }
    .section-body { padding: 14px; }

    /* 필터 바: 패딩 축소, 검색창 최소폭 완화 */
    .fl-bar { padding: 12px 14px; }
    .fl-search-wrap { min-width: 0; }
    .fl-bar-compact .fl-field.grow { min-width: 0; }

    /* KPI 칩: 한 줄에 2개씩 균등 배치 */
    .kpi-strip { padding: 12px 14px; gap: 8px; }
    .kpi-chip { min-width: 0; flex: 1 1 130px; padding: 8px 12px; }

    /* 탭 바: 가로 스크롤 허용(넘칠 때 잘림 방지) */
    .erp-tabs, .welfare-tabs { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
    .erp-tabs::-webkit-scrollbar, .welfare-tabs::-webkit-scrollbar { display: none; }
    .erp-tab, .welfare-tab { flex: 0 0 auto; }
}

/* ── 광폭 표 가로 스크롤 래퍼 (모바일) ──
   base.html 의 스크립트가 ≤820px 에서 폭이 넘치는 .styled-table/.ti-wrap 을
   이 컨테이너로 자동 감싼다. 표만 좌우로 스크롤되고 페이지 전체는 고정된다.
   인쇄(@media print)에는 영향 없음 — overflow 는 print 에서 visible 로 풀린다. */
.erp-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media print {
    .erp-table-scroll { overflow-x: visible !important; }
}
/* ── 가로 스크롤 표의 오른쪽 고정 열 (HD-260903-004) ──
   .erp-table-scroll 안에서 표가 좌우로 스크롤될 때도 작업 버튼이 있는 마지막 열은
   항상 보여야 한다. 그 열의 th/td 에 .erp-col-sticky-right 를 주면 오른쪽 가장자리에
   붙는다. 배경은 불투명이어야 한다(밑으로 지나가는 셀이 비친다) — 행 틴트·hover 를
   따라가야 하면 화면 쪽에서 같은 선택자로 배경만 덮어쓴다. 모바일(≤820px)에서는
   열 하나가 화면의 절반을 차지하므로 고정하지 않는다(가로 스크롤·축소 보기로 처리).
   ⚠ 오른쪽 고정 열은 스크롤 전에는 아직 보지 못한 왼쪽 열을 덮는다(래퍼 폭이 표 폭보다
   고정 열 폭만큼 좁은 구간). 바로 왼쪽에 사용자가 읽어야 하는 데이터 열(상태·금액·날짜)이
   있으면 쓰지 말 것 — 계약 상세 매입 표에서 '지급' 열이 통째로 가려져 "지급 내용이 사라졌다"
   로 접수됐다(HD-260903-007). 버튼만 있는 좁은 열, 또는 왼쪽 열이 보조 정보일 때만 적합. */
@media (min-width: 821px) {
    .erp-table-scroll .erp-col-sticky-right {
        position: sticky;
        right: 0;
        z-index: 1;
        background-color: var(--erp-bg-card);
        box-shadow: -1px 0 0 var(--erp-border);
    }
}
@media print {
    .erp-table-scroll .erp-col-sticky-right { position: static; box-shadow: none; }
}
/* ── 모바일 표 "전체 축소 보기" 토글 ──
   가로 스크롤 표의 오른쪽 열이 안 보인다는 피드백 → 표를 화면 폭에 맞게
   scale 축소해 전 열을 한눈에. base.html ensureFitToggles가 칩을 주입한다. */
.erp-tf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 6px;
    padding: 4px 10px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-pill);
    background: var(--erp-bg-soft);
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
    font-weight: 700;
    cursor: pointer;
}
.erp-table-fit { overflow-x: hidden; }
@media (min-width: 821px) {
    .erp-tf-chip { display: none !important; }
}
/* ── 모바일(≤820px): 가로 스크롤 래퍼 안의 표는 셀 nowrap ──
   .styled-table 등은 width:100%라 좁은 화면에서 셀이 세로로 한 글자씩 찌그러진다.
   래퍼(.erp-table-scroll, overflow-x:auto)가 이미 감싸고 있으므로, 셀을 nowrap 처리하면
   표가 콘텐츠 자연 폭으로 커져 "표만" 좌우 스크롤되고 데이터가 한 줄로 읽힌다.
   페이지 자체는 고정(래퍼 밖은 그대로). 긴 본문 셀은 .cell-wrap 으로 줄바꿈 유지. */
@media (max-width: 820px) {
    /* 가로 스크롤 래퍼(.erp-table-scroll) + 부트스트랩 반응형 래퍼(.table-responsive) 둘 다.
       래퍼 안 표의 셀을 nowrap → 자연 폭으로 스크롤(공백 있는 이름 등도 한 줄). */
    .erp-table-scroll table th, .erp-table-scroll table td,
    .table-responsive table th, .table-responsive table td { white-space: nowrap; }
    .erp-table-scroll table th.cell-wrap,
    .erp-table-scroll table td.cell-wrap,
    .erp-table-scroll table th.cell-left--wrap,
    .erp-table-scroll table td.cell-left--wrap,
    .table-responsive table td.cell-wrap { white-space: normal; }
    /* 표 안 버튼/링크는 셀 nowrap을 상속해 세로로 깨지지 않는다(스크롤로 처리).
       ※ 독립 버튼바의 버튼에는 nowrap을 걸지 않는다 — 대신 아래에서 컨테이너를
         flex-wrap 시켜 버튼이 제 폭을 얻어 라벨이 한 줄로 나오게 한다(오버플로 방지). */
    /* 버튼/필터/월이동 바: 좁은 화면에서 버튼이 넘치지 않게 줄바꿈 */
    .action-bar, .exp-monthnav, .toolbar, .fl-row, .fl-bar,
    .section-head, .section-head .d-flex,
    .cc-card-header, .cc-header-actions, .cc-actions, .pf-stats,
    .dept-section-header, .cmp-tabs-header { flex-wrap: wrap; }
    /* 액션 버튼이 flex 컨테이너에서 min-content 아래로 짜부라져 라벨이 세로로
       깨지는 것 방지: 라벨 한 줄 유지 + 축소 금지(컨테이너는 위에서 wrap시킴). */
    .ts-btn, .cc-btn-secondary, .cc-btn-save, .btn-add-row,
    .wr-toggle-closed, .wr-toggle-open { white-space: nowrap; flex-shrink: 0; }
}

/* ── 모바일 다열 그리드 일괄 붕괴 (≤640px) ──
   화면별로 인라인 style 또는 자체 클래스로 정의된 3~6열 그리드를 모바일에서 1열로.
   !important 로 화면별 <style>(소스 순서상 뒤) 및 인라인 style 을 확실히 덮는다.
   캘린더성 7열 이상(요일 그리드 등)은 의도된 가로 배치이므로 제외. */
@media (max-width: 640px) {
    /* 인라인 style 로 박힌 3~6열 그리드 (콜론 뒤 공백 유무 모두 매칭) */
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns:repeat(5"],
    [style*="grid-template-columns: repeat(6"],
    [style*="grid-template-columns:repeat(6"],
    /* 화면별 <style> 에 명명된 KPI/정보/필터 그리드 클래스 */
    .kpi-grid, .closing-grid, .pd-info-grid, .hd-info-grid,
    .tc-modal-summary, .mp-info-row, .mp-extra-row,
    .weeks-grid, .stats-grid, .info-grid, .summary-grid,
    .account-grid, .ap-filter {
        grid-template-columns: 1fr !important;
    }
    /* .kpi-strip: 디자인시스템 flex 버전은 grid 속성 무시(무영향),
       grid 로 재정의한 화면(프로젝트 대시보드)만 1열로 붕괴 */
    .kpi-strip { grid-template-columns: 1fr !important; }
    /* 다자녀 flex 행: 넘치면 줄바꿈 (결재선 설정 step, 복지 승인 박스 등) */
    .step-row, .approval-box { flex-wrap: wrap; }
}

/* ── 모바일 모달·헤더 정돈 (≤640px) ── */
@media (max-width: 640px) {
    /* 고정폭 커스텀 모달/팝업 → 화면 폭에 맞춤 (Bootstrap .modal-dialog 는 자체 반응형이라 제외) */
    .modal-box, .modal-box-wide, .modal-card, .lm-dialog {
        max-width: 94vw !important;
        min-width: 0 !important;
    }
    /* space-between flex 헤더/툴바: 넘치면 줄바꿈 (명명 클래스) */
    .dept-section-header, .section-head, .cmp-tabs-header { flex-wrap: wrap; }
    /* space-between flex 행(인라인 style): 넘치면 줄바꿈 — 맞으면 변화 없음(비파괴적) */
    [style*="display:flex"][style*="justify-content:space-between"],
    [style*="display: flex"][style*="justify-content: space-between"] {
        flex-wrap: wrap;
    }
}

/* ── 모바일 추가 보강 2 (≤640px) ── */
@media (max-width: 640px) {
    /* pf-grid 강제 1열 (화면별 3열 등 재정의도 덮음) */
    .pf-grid { grid-template-columns: 1fr !important; }
    /* 리터럴 다열 fr 인라인 그리드(3열 이상) → 1열 */
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
    /* 추가 명명 그리드 (그룹웨어 결재함 행·KB 분류행) */
    .gw-inbox-row, .kb-category-row { grid-template-columns: 1fr !important; }
    /* 필터 버튼 줄: 넘치면 줄바꿈 */
    .notif-filter { flex-wrap: wrap; }
    /* 탭 버튼 최소폭 해제(좁은 폭에서 칸 넘침 방지) */
    .cmp-tab-btn { min-width: 0 !important; }
    /* 커스텀 자동완성 드롭다운: 화면 폭 초과 방지 */
    .companyDropdown, .taxSearchDropdown, .searchable-dropdown,
    #approver-input-box, #test-approver-input-box {
        max-width: calc(100vw - 16px) !important;
    }
}

/* ── 모바일 추가 보강 3 (≤640px) ── */
@media (max-width: 640px) {
    /* 인라인으로 고정폭이 박힌 입력/선택/텍스트영역: 컨테이너 폭 초과 방지
       (max-width 라 컨테이너보다 좁은 입력은 그대로 — 비파괴적) */
    input[style*="width:"], select[style*="width:"], textarea[style*="width:"] {
        max-width: 100%;
    }
    /* KPI 칩 strip(flex): 칩이 넘치면 줄바꿈 (자산/매입/AR 등) */
    .kpi-strip { flex-wrap: wrap !important; }
    /* 추가 명명 그리드: 근무일정 편집(.g3 3열/.g13 1·2·1), 매입품목 폼(.pif-grid 2열), 주간 myaa(3열) */
    .g3, .g13, .pif-grid, .myaa-grid { grid-template-columns: 1fr !important; }
    /* 견적/회사 폼 3열 그리드(.fg-3)·금액 3분할은 모바일에서 매우 좁아 1열로 */
    .fg-3, .amount-box-grid-3 { grid-template-columns: 1fr !important; }
    /* 조직도 편집기: 직원풀+캔버스 좌우배치를 세로 스택 */
    .editor-wrap { flex-direction: column !important; height: auto !important; }
    .editor-wrap .staff-panel { width: 100% !important; }
    /* 페이지 섹션 탭바(.erp-tabs): 탭이 화면 밖으로 나가지 않게 줄바꿈 (세무 카드 4탭 등) */
    .erp-tabs { display: flex; flex-wrap: wrap; }
    /* 견적/회사 폼 4열 그리드도 1열로 (fg-2/fg-3만 있던 붕괴 목록 보완) */
    .fg-4 { grid-template-columns: 1fr !important; }
    /* 팀 주간보고 3열 카드(기술 대시보드·엔지니어 프로필 공유) 세로 스택 */
    .team-wr-grid { grid-template-columns: 1fr !important; }
    .team-wr-col + .team-wr-col { border-left: 0; border-top: 1px solid var(--erp-border); }
    /* 페이지 탭 버튼 바(.page-tab-bar) 줄바꿈 (거래처 관리 탭 등) */
    .page-tab-bar { flex-wrap: wrap; }
    /* 리포트 헤더 가운데 타이틀 블록(자금일보·입금·지출 리포트 공유): 긴 부제목이
       flex:0 0 auto라 max-content로 밀어내던 것 — 폭 맞춰 줄바꿈 */
    .report-header-center { flex: 1 1 100% !important; max-width: 100%; min-width: 0; }
    .report-header-center .sub-title { white-space: normal; word-break: keep-all; }
    /* 재무 대시보드 실제 미수/미지급 2열 표 → 세로 스택 */
    .fd-real-grid { grid-template-columns: 1fr !important; }
}

/* ── 모바일 2열 그리드 붕괴 — 소형폰 한정(≤480px) ──
   인라인 2열 그리드(repeat(2…)·1fr 1fr)는 태블릿(481~640)에선 2열 유지,
   소형폰에서만 1열로. 라벨 입력 폼이 좁아 뭉개지는 것 방지. */
@media (max-width: 480px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(2"],
    /* 견적/회사 폼 2열 그리드도 소형폰에선 1열 */
    .fg-2 {
        grid-template-columns: 1fr !important;
    }
}

.pipeline-stage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 4px 11px;
    border-radius: var(--erp-radius-pill);
    border: 1px solid transparent;
    font-size: var(--erp-fs-sm);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.pipeline-stage-registration {
    background: var(--erp-neutral-bg);
    border-color: var(--erp-border-strong);
    color: var(--erp-neutral);
}

.pipeline-stage-proposal {
    background: var(--erp-info-bg);
    border-color: var(--erp-info-border);
    color: var(--erp-info-strong);
}

.pipeline-stage-estimate {
    background: var(--erp-purple-bg);
    border-color: color-mix(in srgb, var(--erp-purple) 22%, var(--erp-bg-card));
    color: var(--erp-purple);
}

.pipeline-stage-approval {
    background: var(--erp-warning-bg);
    border-color: var(--erp-warning-border);
    color: var(--erp-warning-strong);
}

.pipeline-stage-contract {
    background: var(--erp-success-bg);
    border-color: var(--erp-success-border);
    color: var(--erp-success-strong);
}

/* ──────────────────────────────────────────────────────────────
   딥링크 포커스 하이라이트
   통합 결재함 / 알림 메일에서 `?focus=<pk>`로 진입했을 때, 목록에서
   해당 행(`[data-focus-id]`)을 자동으로 찾아 강조한다. base.html 전역 스크립트 참조.
   ────────────────────────────────────────────────────────────── */
.erp-focus-row > td,
.erp-focus-row > th {
    background: var(--erp-warning-bg) !important;
}

.erp-focus-row {
    outline: 2px solid var(--erp-warning);
    outline-offset: -2px;
    animation: erpFocusPulse 1.1s ease-in-out 0s 3;
}

@keyframes erpFocusPulse {
    0%, 100% { outline-color: var(--erp-warning); }
    50%      { outline-color: transparent; }
}

.erp-focus-miss {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 4000;
    max-width: 92vw;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--erp-text-strong);
    color: var(--erp-bg-card);
    font-size: var(--erp-fs-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
}

/* 알림 [이동]으로 진입한 건의 현재 상태 안내 배너 (templates/partials/focus_notice.html).
   대상 건이 이미 처리돼 목록에 없을 때 "빈 화면"으로 보이는 혼선을 막는다. */
.erp-focus-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 14px;
    border: 1px solid var(--erp-border);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--erp-bg-soft);
    font-size: var(--erp-fs-sm);
    color: var(--erp-text);
}

.erp-focus-notice__icon { margin-top: 2px; font-size: var(--erp-fs-md); }
.erp-focus-notice__head { font-weight: 700; color: var(--erp-text-strong); }
.erp-focus-notice__body { margin-top: 2px; color: var(--erp-text-muted); }

.erp-focus-notice--pending { border-left-color: var(--erp-warning); }
.erp-focus-notice--pending .erp-focus-notice__icon { color: var(--erp-warning); }
.erp-focus-notice--done { border-left-color: var(--erp-success); }
.erp-focus-notice--done .erp-focus-notice__icon { color: var(--erp-success); }
.erp-focus-notice--hold { border-left-color: var(--erp-danger); }
.erp-focus-notice--hold .erp-focus-notice__icon { color: var(--erp-danger); }
.erp-focus-notice--missing { border-left-color: var(--erp-text-faint); }
.erp-focus-notice--missing .erp-focus-notice__icon { color: var(--erp-text-faint); }

/* ──────────────────────────────────────────────────────────────
   행 수 제한 세로 스크롤 박스 (고정 헤더)
   목록을 N행(기본 5행)만 노출하고 나머지는 스크롤로 넘긴다. thead 는
   고정되어 스크롤 중에도 컬럼명이 계속 보인다.
   정확한 높이는 base.html 스크립트가 실제 행 높이를 재서 잡고(data-rows),
   아래 max-height 는 스크립트 실행 전/미실행 시의 기본값이다.
   ※ 가로 스크롤 래퍼 `.erp-table-scroll` 와는 별개 클래스 — 혼동 금지.
   ────────────────────────────────────────────────────────────── */
.erp-table-rowscroll {
    max-height: 248px;
    overflow-y: auto;
}

.erp-table-rowscroll .styled-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--erp-bg-soft);
}

/* ──────────────────────────────────────────────────────────────
   전역 첨부 미리보기 오버레이 (.erp-fv-*)  — HD-260730-001
   /media/ 첨부를 "새 탭"으로 넘기지 않고 현재 화면 위 오버레이로 띄운다.
   새 탭으로 넘기면 모바일 브라우저가 파일 전용 전체화면 뷰어로 전환되어
   닫기·뒤로가기 수단이 사라진다(앱을 강제 종료해야 빠져나옴).
   닫기 경로 4종: ✕ 버튼 / 하단 닫기 버튼 / 배경 클릭 / ESC + 뒤로가기.
   ────────────────────────────────────────────────────────────── */
.erp-fv {
    position: fixed;
    inset: 0;
    /* Bootstrap modal(1055) · Teams 플로팅 버튼(9000) · Teams 이미지 라이트박스(10000)
       모두보다 위. iConfirm 오버레이(20050)보다는 아래여야 확인창이 가려지지 않는다. */
    z-index: 12000;
    display: none;
}

.erp-fv.is-open {
    display: block;
}

.erp-fv-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .72);
}

.erp-fv-panel {
    position: absolute;
    inset: 0;                   /* 모바일: 전체 화면 */
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--erp-bg-card);
}

@media (min-width: 769px) {
    .erp-fv-panel {
        inset: 3vh 5vw;
        border-radius: var(--erp-radius-lg);
        overflow: hidden;
        box-shadow: var(--erp-shadow-lg);
    }
}

.erp-fv-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--erp-space-2);
    padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--erp-border);
    background: var(--erp-bg-soft);
}

.erp-fv-title {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--erp-fs-md);
    font-weight: 700;
    color: var(--erp-text-strong);
}

.erp-fv-title > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-fv-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ✕ 닫기 — 터치 타겟 40px 이상 확보 (모바일 엄지로 누를 수 있게) */
.erp-fv-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-md);
    background: var(--erp-bg-card);
    color: var(--erp-text-strong);
    font-size: var(--erp-fs-xl);
    line-height: 1;
    cursor: pointer;
}

.erp-fv-close:hover {
    background: var(--erp-bg-hover);
    border-color: var(--erp-primary);
    color: var(--erp-primary);
}

.erp-fv-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--erp-bg-sunken);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.erp-fv-body img {
    max-width: 100%;
    height: auto;
    margin: auto;
    background: var(--erp-bg-card);
}

.erp-fv-body iframe {
    width: 100%;
    height: 100%;
    min-height: 100%;
    border: 0;
    background: var(--erp-bg-card);
}

.erp-fv-hint {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-bottom: 1px solid var(--erp-warning-border);
    background: var(--erp-warning-bg);
    color: var(--erp-warning-strong);
    font-size: var(--erp-fs-sm);
    line-height: 1.5;
}

.erp-fv-fallback {
    margin: auto;
    padding: var(--erp-space-6) var(--erp-space-4);
    text-align: center;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-md);
    line-height: 1.7;
}

.erp-fv-fallback i {
    display: block;
    margin-bottom: var(--erp-space-3);
    font-size: var(--erp-fs-34);
    color: var(--erp-text-faint);
}

/* 하단 닫기 바 — 모달 푸터 우측 정렬 규약 유지 */
.erp-fv-foot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: var(--erp-space-2);
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--erp-border);
    background: var(--erp-bg-soft);
}

@media (max-width: 768px) {
    /* 모바일: 하단 닫기 버튼을 폭 전체로 — 엄지로 바로 누를 수 있게 */
    .erp-fv-foot .pf-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    /* 좁은 화면에서는 보조 액션 라벨을 감춰 ✕ 버튼 자리를 확보 */
    .erp-fv-actions .erp-fv-lbl {
        display: none;
    }
}

/* 오버레이 열림 중 배경 스크롤 잠금 (스크롤 위치는 그대로 보존) */
body.erp-fv-lock {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   팔레트 원색 (primitive) — 의미가 아직 안 붙은 색

   화면에 하드코딩돼 있던 색을 **값 그대로** 옮겨 놓은 것이다.
   색을 바꾸지 않았으므로 렌더 결과는 이전과 같다.

   위의 의미 토큰(--erp-primary / --erp-danger / --erp-text …)과는 층이
   다르다. 새 화면에서는 **의미 토큰을 먼저** 찾고, 정말 없을 때만 여기서
   고른다. 여기 있는 색이 특정 의미로 반복해 쓰이면 의미 토큰으로 올린다.

   이름은 출처를 그대로 쓴다(Tailwind/Material). 자체 작명보다 알아보기
   쉽고, 나중에 '무엇을 무엇으로 합치는지'가 분명해진다.
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* gray */
    --erp-gray-100:            #f3f4f6;   /*  123회 · Tailwind gray-100 */
    --erp-gray-200:            #e5e7eb;   /*  222회 · Tailwind gray-200 */
    --erp-gray-300:            #d1d5db;   /*  142회 · Tailwind gray-300 */
    --erp-gray-400:            #9ca3af;   /*  111회 · Tailwind gray-400 */
    --erp-gray-50:             #f9fafb;   /*   42회 · Tailwind gray-50 */
    --erp-gray-500:            #6b7280;   /*  228회 · Tailwind gray-500 */
    --erp-gray-700:            #374151;   /*  158회 · Tailwind gray-700 */
    --erp-gray-800:            #1f2937;   /*   40회 · Tailwind gray-800 */
    --erp-gray-900:            #111827;   /*   35회 · Tailwind gray-900 */
    /* red */
    --erp-red-100:             #fee2e2;   /*   85회 · Tailwind red-100 */
    --erp-red-200:             #fecaca;   /*   49회 · Tailwind red-200 */
    --erp-red-300:             #fca5a5;   /*   48회 · Tailwind red-300 */
    --erp-red-50:              #fef2f2;   /*   78회 · Tailwind red-50 */
    --erp-red-500:             #ef4444;   /*   41회 · Tailwind red-500 */
    --erp-red-600:             #dc2626;   /*  190회 · Tailwind red-600 */
    --erp-red-700:             #b91c1c;   /*   52회 · Tailwind red-700 */
    --erp-red-800:             #991b1b;   /*   87회 · Tailwind red-800 */
    /* blue */
    --erp-blue-100:            #dbeafe;   /*   49회 · Tailwind blue-100 */
    --erp-blue-200:            #bfdbfe;   /*   65회 · Tailwind blue-200 */
    --erp-blue-300:            #93c5fd;   /*   28회 · Tailwind blue-300 */
    --erp-blue-50:             #eff6ff;   /*  110회 · Tailwind blue-50 */
    --erp-blue-500:            #3b82f6;   /*   40회 · Tailwind blue-500 */
    --erp-blue-600:            #2563eb;   /*  170회 · Tailwind blue-600 */
    --erp-blue-700:            #1d4ed8;   /*   88회 · Tailwind blue-700 */
    --erp-blue-800:            #1e40af;   /*   85회 · Tailwind blue-800 */
    /* slate */
    --erp-slate-700:           #334155;   /*  141회 · Tailwind slate-700 */
    /* m-indigo */
    --erp-m-indigo-400:        #5c6bc0;   /*  138회 · Material Indigo 400 — 경영관리 포털 테마 */
    --erp-m-indigo-600:        #3949ab;   /*  114회 · Material Indigo 600 */
    --erp-m-indigo-700:        #464eb8;   /*   24회 · Material Indigo 700 */
    /* neutral */
    --erp-neutral-100:         #f1f3f5;   /*   45회 · 연회색 배경(그 외 계열) */
    --erp-neutral-200:         #eaecf0;   /*  120회 · 회색 경계선(그 외 계열) */
    --erp-neutral-50:          #f8f9fa;   /*   36회 · 가장 연한 회색 배경 */
    /* oc-teal */
    --erp-oc-teal-700:         #0ca678;   /*  116회 · Open Color teal 7 — 기술 포털 테마 */
    --erp-oc-teal-900:         #087f5b;   /*   25회 · Open Color teal 9 */
    /* amber */
    --erp-amber-300:           #fcd34d;   /*   12회 · Tailwind amber-300 */
    --erp-amber-50:            #fffbeb;   /*   54회 · Tailwind amber-50 */
    --erp-amber-600:           #d97706;   /*   62회 · Tailwind amber-600 */
    --erp-amber-800:           #92400e;   /*  112회 · Tailwind amber-800 */
    /* green */
    --erp-green-100:           #dcfce7;   /*   77회 · Tailwind green-100 */
    --erp-green-200:           #bbf7d0;   /*   30회 · Tailwind green-200 */
    --erp-green-300:           #86efac;   /*   22회 · Tailwind green-300 */
    --erp-green-50:            #f0fdf4;   /*   56회 · Tailwind green-50 */
    --erp-green-600:           #16a34a;   /*   98회 · Tailwind green-600 */
    --erp-green-700:           #15803d;   /*   34회 · Tailwind green-700 */
    --erp-green-800:           #166534;   /*   82회 · Tailwind green-800 */
    /* indigo */
    --erp-indigo-100:          #e0e7ff;   /*   34회 · Tailwind indigo-100 */
    --erp-indigo-200:          #c7d2fe;   /*   38회 · Tailwind indigo-200 */
    --erp-indigo-300:          #a5b4fc;   /*   10회 · Tailwind indigo-300 */
    --erp-indigo-500:          #6366f1;   /*   80회 · Tailwind indigo-500 */
    /* m-green */
    --erp-m-green-50:          #e8f5e9;   /*   22회 · Material Green 50 */
    --erp-m-green-800:         #2e7d32;   /*   74회 · Material Green 800 */
    /* ink */
    --erp-ink-100:             #eeeeee;   /*   16회 · 아주 연한 배경 회색 */
    --erp-ink-1000:            #000000;   /*   32회 · 순수 검정 */
    --erp-ink-150:             #dddddd;   /*   17회 · 연한 경계선 회색 */
    --erp-ink-200:             #cccccc;   /*   39회 · 연한 경계선 회색 */
    --erp-ink-300:             #aaaaaa;   /*   16회 · 연한 텍스트 회색 */
    --erp-ink-350:             #999999;   /*   22회 · 보조 텍스트 회색 */
    --erp-ink-400:             #888888;   /*   46회 · 보조 텍스트 회색 */
    --erp-ink-550:             #666666;   /*   14회 · 본문 회색 */
    --erp-ink-600:             #555555;   /*   43회 · 본문 회색 */
    --erp-ink-75:              #f0f0f0;   /*   20회 · 아주 연한 배경 회색 */
    --erp-ink-800:             #333333;   /*   57회 · 본문 짙은 회색 */
    --erp-ink-900:             #111111;   /*   37회 · 거의 검정 */
    /* m-red */
    --erp-m-red-800:           #c62828;   /*   51회 · Material Red 800 */
    /* violet */
    --erp-violet-100:          #ede9fe;   /*   18회 · Tailwind violet-100 */
    --erp-violet-300:          #c4b5fd;   /*   13회 · Tailwind violet-300 */
    --erp-violet-50:           #f5f3ff;   /*   34회 · Tailwind violet-50 */
    --erp-violet-700:          #6d28d9;   /*   40회 · Tailwind violet-700 */
    /* yellow */
    --erp-yellow-100:          #fef9c3;   /*   39회 · Tailwind yellow-100 */
    --erp-yellow-800:          #854d0e;   /*   32회 · Tailwind yellow-800 */
    /* teal */
    --erp-teal-50:             #f0fdfa;   /*   13회 · Tailwind teal-50 */
    --erp-teal-700:            #0f766e;   /*   39회 · Tailwind teal-700 */
    /* emerald */
    --erp-emerald-50:          #ecfdf5;   /*   26회 · Tailwind emerald-50 */
    --erp-emerald-500:         #10b981;   /*   36회 · Tailwind emerald-500 */
    --erp-emerald-800:         #065f46;   /*   37회 · Tailwind emerald-800 */
    /* m-orange */
    --erp-m-orange-900:        #e65100;   /*   31회 · Material Orange 900 */
    /* orange */
    --erp-orange-200:          #fed7aa;   /*   17회 · Tailwind orange-200 */
    --erp-orange-50:           #fff7ed;   /*   31회 · Tailwind orange-50 */
    --erp-orange-700:          #c2410c;   /*   17회 · Tailwind orange-700 */
    --erp-orange-800:          #9a3412;   /*   14회 · Tailwind orange-800 */
    /* oc-violet */
    --erp-oc-violet-600:       #7950f2;   /*   30회 · Open Color violet 6 */
    /* bs-gray */
    --erp-bs-gray-200:         #e9ecef;   /*   18회 · Bootstrap gray-200 */
    --erp-bs-gray-300:         #dee2e6;   /*   27회 · Bootstrap gray-300 */
    --erp-bs-gray-500:         #adb5bd;   /*   16회 · Bootstrap gray-500 */
    --erp-bs-gray-600:         #6c757d;   /*   17회 · Bootstrap secondary */
    /* m-blue */
    --erp-m-blue-50:           #e3f2fd;   /*   14회 · Material Blue 50 */
    --erp-m-blue-800:          #1565c0;   /*   25회 · Material Blue 800 */
    /* oc-gray */
    --erp-oc-gray-600:         #868e96;   /*   22회 · Open Color gray 6 */
    /* admin */
    --erp-admin-700:           #417690;   /*   18회 · Django admin 헤더색 — admin 상속 화면 잔재 */
    /* bs-red */
    --erp-bs-red-600:          #dc3545;   /*   17회 · Bootstrap danger */
    /* ms */
    --erp-ms-600:              #0078d4;   /*   17회 · Microsoft Fluent 기본 파랑 — M365 연동 UI */
    /* sky */
    --erp-sky-50:              #f0f9ff;   /*   12회 · Tailwind sky-50 */
    --erp-sky-500:             #0ea5e9;   /*   16회 · Tailwind sky-500 */
    /* bs-blue */
    --erp-bs-blue-600:         #0d6efd;   /*   14회 · Bootstrap primary */
    /* m-yellow */
    --erp-m-yellow-900:        #f57f17;   /*   14회 · Material Yellow 900 */
    /* zinc */
    --erp-zinc-50:             #fafafa;   /*   13회 · Tailwind zinc-50 */
}

/* ═══════════════════════════════════════════════════════════════
   유틸리티 (utility) — 인라인 style= 를 걷어내기 위한 최소 집합

   CSP 의 `style-src 'unsafe-inline'` 은 `<style>` 블록과 `style=` **속성**을
   함께 막는다. 속성에는 nonce 를 붙일 자리가 없어서, 없애는 것 말고 방법이 없다.

   ## 왜 선택자를 두 번 겹쳐 쓰나

   인라인 스타일은 **무엇에도 이겼다.** 그걸 평범한 클래스로 바꾸면 갑자기
   거의 모든 것에 진다 — 특히 화면 안의 `<style>` 블록은 외부 CSS 보다 문서
   뒤에 오므로, 특이도가 같으면(둘 다 클래스 하나) 그쪽이 이긴다.
   실제로 목록 화면의 왼쪽 정렬이 가운데로 밀리고, 컷오프 화면의 글자 크기가
   바뀌었다.

   `.x.x.x` 로 쓰면 특이도가 (0,3,0) 이 된다. `.styled-table td`(0,1,1)·
   `.section-title`(0,1,0) 은 물론 `.kpi-box .kpi-value`(0,2,0) 같은 자손
   선택자도 이긴다 — (0,2,0) 은 **동률**이라 문서 뒤에 오는 페이지 `<style>`
   쪽이 이겨서, 인사 대시보드의 주황색 숫자가 검게 변했다.

   **그러면서도 인라인 스타일에는 진다** — `el.style.fontWeight = …` 처럼 JS 가
   덮어쓰는 코드가 그대로 동작한다. `!important` 를 쓰면 그 JS 가 깨진다
   (이 저장소에 그런 곳이 36군데다).

   컴포넌트 클래스(.fl-* / .pf-* / .btn-xs-* …)가 있으면 그쪽이 먼저다.
   여기 있는 건 그 틈을 메우는 용도지, 새 화면을 이걸로 조립하라는 뜻이 아니다.

   ⚠️ display / visibility 는 **일부러 넣지 않았다.** `el.style.display = ''` 로
      지우는 코드가 클래스 값을 되살려 동작이 바뀐다. 이 저장소에
      `.style.display` 를 만지는 곳이 1,380곳이다.
   ═══════════════════════════════════════════════════════════════ */
.erp-ta-left.erp-ta-left.erp-ta-left       { text-align: left; }
.erp-ta-center.erp-ta-center.erp-ta-center   { text-align: center; }
.erp-ta-right.erp-ta-right.erp-ta-right     { text-align: right; }

.erp-fs-2xs.erp-fs-2xs.erp-fs-2xs   { font-size: var(--erp-fs-2xs); }
.erp-fs-xs.erp-fs-xs.erp-fs-xs     { font-size: var(--erp-fs-xs); }
.erp-fs-sm.erp-fs-sm.erp-fs-sm     { font-size: var(--erp-fs-sm); }
.erp-fs-md.erp-fs-md.erp-fs-md     { font-size: var(--erp-fs-md); }
.erp-fs-lg.erp-fs-lg.erp-fs-lg     { font-size: var(--erp-fs-lg); }
.erp-fs-xl.erp-fs-xl.erp-fs-xl     { font-size: var(--erp-fs-xl); }
.erp-fs-2xl.erp-fs-2xl.erp-fs-2xl   { font-size: var(--erp-fs-2xl); }
.erp-fs-3xl.erp-fs-3xl.erp-fs-3xl   { font-size: var(--erp-fs-3xl); }

.erp-fw-400.erp-fw-400.erp-fw-400       { font-weight: 400; }
.erp-fw-500.erp-fw-500.erp-fw-500       { font-weight: 500; }
.erp-fw-600.erp-fw-600.erp-fw-600       { font-weight: 600; }
.erp-fw-700.erp-fw-700.erp-fw-700       { font-weight: 700; }
.erp-fw-800.erp-fw-800.erp-fw-800       { font-weight: 800; }
.erp-fw-bold.erp-fw-bold.erp-fw-bold     { font-weight: bold; }
.erp-fw-normal.erp-fw-normal.erp-fw-normal { font-weight: normal; }

.erp-nowrap.erp-nowrap.erp-nowrap                 { white-space: nowrap; }
.erp-pointer.erp-pointer.erp-pointer               { cursor: pointer; }
.erp-cursor-default.erp-cursor-default.erp-cursor-default { cursor: default; }
.erp-no-underline.erp-no-underline.erp-no-underline     { text-decoration: none; }
.erp-underline.erp-underline.erp-underline           { text-decoration: underline; }
.erp-italic.erp-italic.erp-italic                 { font-style: italic; }

.erp-lh-1.erp-lh-1.erp-lh-1     { line-height: 1; }
.erp-lh-12.erp-lh-12.erp-lh-12   { line-height: 1.2; }
.erp-lh-13.erp-lh-13.erp-lh-13   { line-height: 1.3; }
.erp-lh-14.erp-lh-14.erp-lh-14   { line-height: 1.4; }
.erp-lh-15.erp-lh-15.erp-lh-15   { line-height: 1.5; }
.erp-lh-16.erp-lh-16.erp-lh-16   { line-height: 1.6; }

/* 색 — 토큰마다 하나씩. `.x.x` 인 이유는 위 블록 설명 참조.
   background 는 일부러 없다: JS 가 hover 복원 등으로 `el.style.background=''`
   를 하는 곳이 있어 클래스가 남으면 복원 결과가 달라진다. */
.erp-c-primary.erp-c-primary.erp-c-primary { color: var(--erp-primary); }
.erp-c-primary-strong.erp-c-primary-strong.erp-c-primary-strong { color: var(--erp-primary-strong); }
.erp-c-primary-deep.erp-c-primary-deep.erp-c-primary-deep { color: var(--erp-primary-deep); }
.erp-c-primary-soft.erp-c-primary-soft.erp-c-primary-soft { color: var(--erp-primary-soft); }
.erp-c-primary-ring.erp-c-primary-ring.erp-c-primary-ring { color: var(--erp-primary-ring); }
.erp-c-accent.erp-c-accent.erp-c-accent { color: var(--erp-accent); }
.erp-c-text-strong.erp-c-text-strong.erp-c-text-strong { color: var(--erp-text-strong); }
.erp-c-text.erp-c-text.erp-c-text { color: var(--erp-text); }
.erp-c-text-muted.erp-c-text-muted.erp-c-text-muted { color: var(--erp-text-muted); }
.erp-c-text-faint.erp-c-text-faint.erp-c-text-faint { color: var(--erp-text-faint); }
.erp-c-bg-page.erp-c-bg-page.erp-c-bg-page { color: var(--erp-bg-page); }
.erp-c-bg-card.erp-c-bg-card.erp-c-bg-card { color: var(--erp-bg-card); }
.erp-c-bg-soft.erp-c-bg-soft.erp-c-bg-soft { color: var(--erp-bg-soft); }
.erp-c-bg-hover.erp-c-bg-hover.erp-c-bg-hover { color: var(--erp-bg-hover); }
.erp-c-bg-sunken.erp-c-bg-sunken.erp-c-bg-sunken { color: var(--erp-bg-sunken); }
.erp-c-border.erp-c-border.erp-c-border { color: var(--erp-border); }
.erp-c-border-strong.erp-c-border-strong.erp-c-border-strong { color: var(--erp-border-strong); }
.erp-c-success.erp-c-success.erp-c-success { color: var(--erp-success); }
.erp-c-success-strong.erp-c-success-strong.erp-c-success-strong { color: var(--erp-success-strong); }
.erp-c-success-bg.erp-c-success-bg.erp-c-success-bg { color: var(--erp-success-bg); }
.erp-c-success-border.erp-c-success-border.erp-c-success-border { color: var(--erp-success-border); }
.erp-c-warning.erp-c-warning.erp-c-warning { color: var(--erp-warning); }
.erp-c-warning-strong.erp-c-warning-strong.erp-c-warning-strong { color: var(--erp-warning-strong); }
.erp-c-warning-bg.erp-c-warning-bg.erp-c-warning-bg { color: var(--erp-warning-bg); }
.erp-c-warning-border.erp-c-warning-border.erp-c-warning-border { color: var(--erp-warning-border); }
.erp-c-warning-ring.erp-c-warning-ring.erp-c-warning-ring { color: var(--erp-warning-ring); }
.erp-c-danger.erp-c-danger.erp-c-danger { color: var(--erp-danger); }
.erp-c-danger-strong.erp-c-danger-strong.erp-c-danger-strong { color: var(--erp-danger-strong); }
.erp-c-danger-bg.erp-c-danger-bg.erp-c-danger-bg { color: var(--erp-danger-bg); }
.erp-c-danger-border.erp-c-danger-border.erp-c-danger-border { color: var(--erp-danger-border); }
.erp-c-info.erp-c-info.erp-c-info { color: var(--erp-info); }
.erp-c-info-strong.erp-c-info-strong.erp-c-info-strong { color: var(--erp-info-strong); }
.erp-c-info-bg.erp-c-info-bg.erp-c-info-bg { color: var(--erp-info-bg); }
.erp-c-info-border.erp-c-info-border.erp-c-info-border { color: var(--erp-info-border); }
.erp-c-neutral.erp-c-neutral.erp-c-neutral { color: var(--erp-neutral); }
.erp-c-neutral-bg.erp-c-neutral-bg.erp-c-neutral-bg { color: var(--erp-neutral-bg); }
.erp-c-purple.erp-c-purple.erp-c-purple { color: var(--erp-purple); }
.erp-c-purple-bg.erp-c-purple-bg.erp-c-purple-bg { color: var(--erp-purple-bg); }
.erp-c-lvl-expert.erp-c-lvl-expert.erp-c-lvl-expert { color: var(--erp-lvl-expert); }
.erp-c-lvl-expert-fg.erp-c-lvl-expert-fg.erp-c-lvl-expert-fg { color: var(--erp-lvl-expert-fg); }
.erp-c-lvl-advanced.erp-c-lvl-advanced.erp-c-lvl-advanced { color: var(--erp-lvl-advanced); }
.erp-c-lvl-advanced-fg.erp-c-lvl-advanced-fg.erp-c-lvl-advanced-fg { color: var(--erp-lvl-advanced-fg); }
.erp-c-lvl-intermediate.erp-c-lvl-intermediate.erp-c-lvl-intermediate { color: var(--erp-lvl-intermediate); }
.erp-c-lvl-intermediate-fg.erp-c-lvl-intermediate-fg.erp-c-lvl-intermediate-fg { color: var(--erp-lvl-intermediate-fg); }
.erp-c-lvl-beginner.erp-c-lvl-beginner.erp-c-lvl-beginner { color: var(--erp-lvl-beginner); }
.erp-c-lvl-beginner-fg.erp-c-lvl-beginner-fg.erp-c-lvl-beginner-fg { color: var(--erp-lvl-beginner-fg); }
.erp-c-lvl-other.erp-c-lvl-other.erp-c-lvl-other { color: var(--erp-lvl-other); }
.erp-c-lvl-other-fg.erp-c-lvl-other-fg.erp-c-lvl-other-fg { color: var(--erp-lvl-other-fg); }
.erp-c-lvl-hold.erp-c-lvl-hold.erp-c-lvl-hold { color: var(--erp-lvl-hold); }
.erp-c-lvl-hold-fg.erp-c-lvl-hold-fg.erp-c-lvl-hold-fg { color: var(--erp-lvl-hold-fg); }
.erp-c-hov-bg.erp-c-hov-bg.erp-c-hov-bg { color: var(--erp-hov-bg); }
.erp-c-gray-100.erp-c-gray-100.erp-c-gray-100 { color: var(--erp-gray-100); }
.erp-c-gray-200.erp-c-gray-200.erp-c-gray-200 { color: var(--erp-gray-200); }
.erp-c-gray-300.erp-c-gray-300.erp-c-gray-300 { color: var(--erp-gray-300); }
.erp-c-gray-400.erp-c-gray-400.erp-c-gray-400 { color: var(--erp-gray-400); }
.erp-c-gray-50.erp-c-gray-50.erp-c-gray-50 { color: var(--erp-gray-50); }
.erp-c-gray-500.erp-c-gray-500.erp-c-gray-500 { color: var(--erp-gray-500); }
.erp-c-gray-700.erp-c-gray-700.erp-c-gray-700 { color: var(--erp-gray-700); }
.erp-c-gray-800.erp-c-gray-800.erp-c-gray-800 { color: var(--erp-gray-800); }
.erp-c-gray-900.erp-c-gray-900.erp-c-gray-900 { color: var(--erp-gray-900); }
.erp-c-red-100.erp-c-red-100.erp-c-red-100 { color: var(--erp-red-100); }
.erp-c-red-200.erp-c-red-200.erp-c-red-200 { color: var(--erp-red-200); }
.erp-c-red-300.erp-c-red-300.erp-c-red-300 { color: var(--erp-red-300); }
.erp-c-red-50.erp-c-red-50.erp-c-red-50 { color: var(--erp-red-50); }
.erp-c-red-500.erp-c-red-500.erp-c-red-500 { color: var(--erp-red-500); }
.erp-c-red-600.erp-c-red-600.erp-c-red-600 { color: var(--erp-red-600); }
.erp-c-red-700.erp-c-red-700.erp-c-red-700 { color: var(--erp-red-700); }
.erp-c-red-800.erp-c-red-800.erp-c-red-800 { color: var(--erp-red-800); }
.erp-c-blue-100.erp-c-blue-100.erp-c-blue-100 { color: var(--erp-blue-100); }
.erp-c-blue-200.erp-c-blue-200.erp-c-blue-200 { color: var(--erp-blue-200); }
.erp-c-blue-300.erp-c-blue-300.erp-c-blue-300 { color: var(--erp-blue-300); }
.erp-c-blue-50.erp-c-blue-50.erp-c-blue-50 { color: var(--erp-blue-50); }
.erp-c-blue-500.erp-c-blue-500.erp-c-blue-500 { color: var(--erp-blue-500); }
.erp-c-blue-600.erp-c-blue-600.erp-c-blue-600 { color: var(--erp-blue-600); }
.erp-c-blue-700.erp-c-blue-700.erp-c-blue-700 { color: var(--erp-blue-700); }
.erp-c-blue-800.erp-c-blue-800.erp-c-blue-800 { color: var(--erp-blue-800); }
.erp-c-slate-700.erp-c-slate-700.erp-c-slate-700 { color: var(--erp-slate-700); }
.erp-c-m-indigo-400.erp-c-m-indigo-400.erp-c-m-indigo-400 { color: var(--erp-m-indigo-400); }
.erp-c-m-indigo-600.erp-c-m-indigo-600.erp-c-m-indigo-600 { color: var(--erp-m-indigo-600); }
.erp-c-m-indigo-700.erp-c-m-indigo-700.erp-c-m-indigo-700 { color: var(--erp-m-indigo-700); }
.erp-c-neutral-100.erp-c-neutral-100.erp-c-neutral-100 { color: var(--erp-neutral-100); }
.erp-c-neutral-200.erp-c-neutral-200.erp-c-neutral-200 { color: var(--erp-neutral-200); }
.erp-c-neutral-50.erp-c-neutral-50.erp-c-neutral-50 { color: var(--erp-neutral-50); }
.erp-c-oc-teal-700.erp-c-oc-teal-700.erp-c-oc-teal-700 { color: var(--erp-oc-teal-700); }
.erp-c-oc-teal-900.erp-c-oc-teal-900.erp-c-oc-teal-900 { color: var(--erp-oc-teal-900); }
.erp-c-amber-300.erp-c-amber-300.erp-c-amber-300 { color: var(--erp-amber-300); }
.erp-c-amber-50.erp-c-amber-50.erp-c-amber-50 { color: var(--erp-amber-50); }
.erp-c-amber-600.erp-c-amber-600.erp-c-amber-600 { color: var(--erp-amber-600); }
.erp-c-amber-800.erp-c-amber-800.erp-c-amber-800 { color: var(--erp-amber-800); }
.erp-c-green-100.erp-c-green-100.erp-c-green-100 { color: var(--erp-green-100); }
.erp-c-green-200.erp-c-green-200.erp-c-green-200 { color: var(--erp-green-200); }
.erp-c-green-300.erp-c-green-300.erp-c-green-300 { color: var(--erp-green-300); }
.erp-c-green-50.erp-c-green-50.erp-c-green-50 { color: var(--erp-green-50); }
.erp-c-green-600.erp-c-green-600.erp-c-green-600 { color: var(--erp-green-600); }
.erp-c-green-700.erp-c-green-700.erp-c-green-700 { color: var(--erp-green-700); }
.erp-c-green-800.erp-c-green-800.erp-c-green-800 { color: var(--erp-green-800); }
.erp-c-indigo-100.erp-c-indigo-100.erp-c-indigo-100 { color: var(--erp-indigo-100); }
.erp-c-indigo-200.erp-c-indigo-200.erp-c-indigo-200 { color: var(--erp-indigo-200); }
.erp-c-indigo-300.erp-c-indigo-300.erp-c-indigo-300 { color: var(--erp-indigo-300); }
.erp-c-indigo-500.erp-c-indigo-500.erp-c-indigo-500 { color: var(--erp-indigo-500); }
.erp-c-m-green-50.erp-c-m-green-50.erp-c-m-green-50 { color: var(--erp-m-green-50); }
.erp-c-m-green-800.erp-c-m-green-800.erp-c-m-green-800 { color: var(--erp-m-green-800); }
.erp-c-ink-100.erp-c-ink-100.erp-c-ink-100 { color: var(--erp-ink-100); }
.erp-c-ink-1000.erp-c-ink-1000.erp-c-ink-1000 { color: var(--erp-ink-1000); }
.erp-c-ink-150.erp-c-ink-150.erp-c-ink-150 { color: var(--erp-ink-150); }
.erp-c-ink-200.erp-c-ink-200.erp-c-ink-200 { color: var(--erp-ink-200); }
.erp-c-ink-300.erp-c-ink-300.erp-c-ink-300 { color: var(--erp-ink-300); }
.erp-c-ink-350.erp-c-ink-350.erp-c-ink-350 { color: var(--erp-ink-350); }
.erp-c-ink-400.erp-c-ink-400.erp-c-ink-400 { color: var(--erp-ink-400); }
.erp-c-ink-550.erp-c-ink-550.erp-c-ink-550 { color: var(--erp-ink-550); }
.erp-c-ink-600.erp-c-ink-600.erp-c-ink-600 { color: var(--erp-ink-600); }
.erp-c-ink-75.erp-c-ink-75.erp-c-ink-75 { color: var(--erp-ink-75); }
.erp-c-ink-800.erp-c-ink-800.erp-c-ink-800 { color: var(--erp-ink-800); }
.erp-c-ink-900.erp-c-ink-900.erp-c-ink-900 { color: var(--erp-ink-900); }
.erp-c-m-red-800.erp-c-m-red-800.erp-c-m-red-800 { color: var(--erp-m-red-800); }
.erp-c-violet-100.erp-c-violet-100.erp-c-violet-100 { color: var(--erp-violet-100); }
.erp-c-violet-300.erp-c-violet-300.erp-c-violet-300 { color: var(--erp-violet-300); }
.erp-c-violet-50.erp-c-violet-50.erp-c-violet-50 { color: var(--erp-violet-50); }
.erp-c-violet-700.erp-c-violet-700.erp-c-violet-700 { color: var(--erp-violet-700); }
.erp-c-yellow-100.erp-c-yellow-100.erp-c-yellow-100 { color: var(--erp-yellow-100); }
.erp-c-yellow-800.erp-c-yellow-800.erp-c-yellow-800 { color: var(--erp-yellow-800); }
.erp-c-teal-50.erp-c-teal-50.erp-c-teal-50 { color: var(--erp-teal-50); }
.erp-c-teal-700.erp-c-teal-700.erp-c-teal-700 { color: var(--erp-teal-700); }
.erp-c-emerald-50.erp-c-emerald-50.erp-c-emerald-50 { color: var(--erp-emerald-50); }
.erp-c-emerald-500.erp-c-emerald-500.erp-c-emerald-500 { color: var(--erp-emerald-500); }
.erp-c-emerald-800.erp-c-emerald-800.erp-c-emerald-800 { color: var(--erp-emerald-800); }
.erp-c-m-orange-900.erp-c-m-orange-900.erp-c-m-orange-900 { color: var(--erp-m-orange-900); }
.erp-c-orange-200.erp-c-orange-200.erp-c-orange-200 { color: var(--erp-orange-200); }
.erp-c-orange-50.erp-c-orange-50.erp-c-orange-50 { color: var(--erp-orange-50); }
.erp-c-orange-700.erp-c-orange-700.erp-c-orange-700 { color: var(--erp-orange-700); }
.erp-c-orange-800.erp-c-orange-800.erp-c-orange-800 { color: var(--erp-orange-800); }
.erp-c-oc-violet-600.erp-c-oc-violet-600.erp-c-oc-violet-600 { color: var(--erp-oc-violet-600); }
.erp-c-bs-gray-200.erp-c-bs-gray-200.erp-c-bs-gray-200 { color: var(--erp-bs-gray-200); }
.erp-c-bs-gray-300.erp-c-bs-gray-300.erp-c-bs-gray-300 { color: var(--erp-bs-gray-300); }
.erp-c-bs-gray-500.erp-c-bs-gray-500.erp-c-bs-gray-500 { color: var(--erp-bs-gray-500); }
.erp-c-bs-gray-600.erp-c-bs-gray-600.erp-c-bs-gray-600 { color: var(--erp-bs-gray-600); }
.erp-c-m-blue-50.erp-c-m-blue-50.erp-c-m-blue-50 { color: var(--erp-m-blue-50); }
.erp-c-m-blue-800.erp-c-m-blue-800.erp-c-m-blue-800 { color: var(--erp-m-blue-800); }
.erp-c-oc-gray-600.erp-c-oc-gray-600.erp-c-oc-gray-600 { color: var(--erp-oc-gray-600); }
.erp-c-admin-700.erp-c-admin-700.erp-c-admin-700 { color: var(--erp-admin-700); }
.erp-c-bs-red-600.erp-c-bs-red-600.erp-c-bs-red-600 { color: var(--erp-bs-red-600); }
.erp-c-ms-600.erp-c-ms-600.erp-c-ms-600 { color: var(--erp-ms-600); }
.erp-c-sky-50.erp-c-sky-50.erp-c-sky-50 { color: var(--erp-sky-50); }
.erp-c-sky-500.erp-c-sky-500.erp-c-sky-500 { color: var(--erp-sky-500); }
.erp-c-bs-blue-600.erp-c-bs-blue-600.erp-c-bs-blue-600 { color: var(--erp-bs-blue-600); }
.erp-c-m-yellow-900.erp-c-m-yellow-900.erp-c-m-yellow-900 { color: var(--erp-m-yellow-900); }
.erp-c-zinc-50.erp-c-zinc-50.erp-c-zinc-50 { color: var(--erp-zinc-50); }

/* ── 스케줄 패널 툴바 — 좌측 선언 체크박스 + 우측 액션 버튼 (파이프라인 빌링·매입 스케줄) ── */
.sched-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sched-toolbar .sched-actions { display: flex; gap: 6px; }
.sched-declare { display: inline-flex; align-items: center; gap: 6px; font-size: var(--erp-fs-sm); color: var(--erp-text-muted); cursor: pointer; }

/* ── 상세 페이지 우측 섹션 바로가기 — 파이프라인 우측 탭과 동일한 세로쓰기 pill ── */
.erp-quicknav { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 900; display: flex; flex-direction: column; gap: 3px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: none; }
.erp-quicknav::-webkit-scrollbar { width: 0; height: 0; }
.erp-quicknav a { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; width: 26px; height: 72px; padding: 4px 0; font-size: var(--erp-fs-xs); font-weight: 600; letter-spacing: 1px; color: var(--erp-text); background: var(--erp-bg-card); border: 1px solid var(--erp-border); border-right: none; border-radius: 8px 0 0 8px; text-decoration: none; white-space: nowrap; box-shadow: -2px 2px 8px rgba(15, 23, 42, .08); }
.erp-quicknav a:hover { background: var(--erp-bg-soft); color: var(--erp-primary); }
.erp-quicknav a.is-active { background: var(--erp-primary); color: var(--erp-bg-card); border-color: var(--erp-primary); }
/* 앵커 대상 — 상단 고정 헤더에 제목이 가리지 않도록 */
.erp-quicknav-anchor { scroll-margin-top: 76px; }
@media (max-width: 1200px) { .erp-quicknav { display: none; } }

/* 간격·크기 — 실제 쓰이던 인라인 선언에서 자동 생성(3회 이상).
   `.x.x.x` 인 이유는 위 유틸리티 블록 설명 참조.
   ⚠️ display:none 은 없다 — JS 가 `el.style.display=''` 로 지우면
      클래스가 살아나 숨김이 유지된다. 반대로 display:flex 등은 넣었다:
      JS 가 none 으로 숨겼다 되돌릴 때 원래 레이아웃으로 복귀한다.
   ⚠️ position:absolute/fixed/sticky 도 뺐다 — 배치가 걸린 요소는
      클래스로 옮기면 겹침 순서가 달라질 수 있다. */
/* align-items */
.erp-ai-center.erp-ai-center.erp-ai-center { align-items: center; }
.erp-ai-end.erp-ai-end.erp-ai-end { align-items: end; }
.erp-ai-flex-end.erp-ai-flex-end.erp-ai-flex-end { align-items: flex-end; }
.erp-ai-flex-start.erp-ai-flex-start.erp-ai-flex-start { align-items: flex-start; }
.erp-ai-start.erp-ai-start.erp-ai-start { align-items: start; }
.erp-ai-stretch.erp-ai-stretch.erp-ai-stretch { align-items: stretch; }
/* border-radius */
.erp-r-0-0-6-6.erp-r-0-0-6-6.erp-r-0-0-6-6 { border-radius: 0 0 6px 6px; }
.erp-r-10.erp-r-10.erp-r-10 { border-radius: 10px; }
.erp-r-12.erp-r-12.erp-r-12 { border-radius: 12px; }
.erp-r-14.erp-r-14.erp-r-14 { border-radius: 14px; }
.erp-r-16.erp-r-16.erp-r-16 { border-radius: 16px; }
.erp-r-20.erp-r-20.erp-r-20 { border-radius: 20px; }
.erp-r-3.erp-r-3.erp-r-3 { border-radius: 3px; }
.erp-r-4.erp-r-4.erp-r-4 { border-radius: 4px; }
.erp-r-5.erp-r-5.erp-r-5 { border-radius: 5px; }
.erp-r-50pct.erp-r-50pct.erp-r-50pct { border-radius: 50%; }
.erp-r-6.erp-r-6.erp-r-6 { border-radius: 6px; }
.erp-r-7.erp-r-7.erp-r-7 { border-radius: 7px; }
.erp-r-8.erp-r-8.erp-r-8 { border-radius: 8px; }
.erp-r-9.erp-r-9.erp-r-9 { border-radius: 9px; }
/* box-sizing */
.erp-bs-border-box.erp-bs-border-box.erp-bs-border-box { box-sizing: border-box; }
/* display */
.erp-d-block:not(#erp-never):not(#erp-never) { display: block; }
.erp-d-contents:not(#erp-never):not(#erp-never) { display: contents; }
.erp-d-flex:not(#erp-never):not(#erp-never) { display: flex; }
.erp-d-grid:not(#erp-never):not(#erp-never) { display: grid; }
.erp-d-inline:not(#erp-never):not(#erp-never) { display: inline; }
.erp-d-inline-block:not(#erp-never):not(#erp-never) { display: inline-block; }
.erp-d-inline-flex:not(#erp-never):not(#erp-never) { display: inline-flex; }
/* flex-direction */
.erp-fdir-column.erp-fdir-column.erp-fdir-column { flex-direction: column; }
/* flex-shrink */
.erp-fsh-0.erp-fsh-0.erp-fsh-0 { flex-shrink: 0; }
/* flex-wrap */
.erp-fwrap-nowrap.erp-fwrap-nowrap.erp-fwrap-nowrap { flex-wrap: nowrap; }
.erp-fwrap-wrap.erp-fwrap-wrap.erp-fwrap-wrap { flex-wrap: wrap; }
/* flex */
.erp-flex-1.erp-flex-1.erp-flex-1 { flex: 1; }
.erp-flex-2.erp-flex-2.erp-flex-2 { flex: 2; }
.erp-flex-none.erp-flex-none.erp-flex-none { flex: none; }
/* gap */
.erp-gap-0.erp-gap-0.erp-gap-0 { gap: 0; }
.erp-gap-10.erp-gap-10.erp-gap-10 { gap: 10px; }
.erp-gap-12.erp-gap-12.erp-gap-12 { gap: 12px; }
.erp-gap-14.erp-gap-14.erp-gap-14 { gap: 14px; }
.erp-gap-15.erp-gap-15.erp-gap-15 { gap: 15px; }
.erp-gap-16.erp-gap-16.erp-gap-16 { gap: 16px; }
.erp-gap-18.erp-gap-18.erp-gap-18 { gap: 18px; }
.erp-gap-20.erp-gap-20.erp-gap-20 { gap: 20px; }
.erp-gap-24.erp-gap-24.erp-gap-24 { gap: 24px; }
.erp-gap-3.erp-gap-3.erp-gap-3 { gap: 3px; }
.erp-gap-4.erp-gap-4.erp-gap-4 { gap: 4px; }
.erp-gap-4-0.erp-gap-4-0.erp-gap-4-0 { gap: 4px 0; }
.erp-gap-5.erp-gap-5.erp-gap-5 { gap: 5px; }
.erp-gap-6.erp-gap-6.erp-gap-6 { gap: 6px; }
.erp-gap-7.erp-gap-7.erp-gap-7 { gap: 7px; }
.erp-gap-8.erp-gap-8.erp-gap-8 { gap: 8px; }
/* height */
.erp-h-100full.erp-h-100full.erp-h-100full { height: 100%; }
.erp-h-14.erp-h-14.erp-h-14 { height: 14px; }
.erp-h-16.erp-h-16.erp-h-16 { height: 16px; }
.erp-h-2.erp-h-2.erp-h-2 { height: 2px; }
.erp-h-20.erp-h-20.erp-h-20 { height: 20px; }
.erp-h-28.erp-h-28.erp-h-28 { height: 28px; }
.erp-h-460.erp-h-460.erp-h-460 { height: 460px; }
.erp-h-48.erp-h-48.erp-h-48 { height: 48px; }
.erp-h-7.erp-h-7.erp-h-7 { height: 7px; }
.erp-h-auto.erp-h-auto.erp-h-auto { height: auto; }
/* justify-content */
.erp-jc-center.erp-jc-center.erp-jc-center { justify-content: center; }
.erp-jc-flex-end.erp-jc-flex-end.erp-jc-flex-end { justify-content: flex-end; }
.erp-jc-space-between.erp-jc-space-between.erp-jc-space-between { justify-content: space-between; }
/* margin-bottom */
.erp-mb-0.erp-mb-0.erp-mb-0 { margin-bottom: 0; }
.erp-mb-1-5rem.erp-mb-1-5rem.erp-mb-1-5rem { margin-bottom: 1.5rem; }
.erp-mb-10.erp-mb-10.erp-mb-10 { margin-bottom: 10px; }
.erp-mb-12.erp-mb-12.erp-mb-12 { margin-bottom: 12px; }
.erp-mb-14.erp-mb-14.erp-mb-14 { margin-bottom: 14px; }
.erp-mb-15.erp-mb-15.erp-mb-15 { margin-bottom: 15px; }
.erp-mb-16.erp-mb-16.erp-mb-16 { margin-bottom: 16px; }
.erp-mb-18.erp-mb-18.erp-mb-18 { margin-bottom: 18px; }
.erp-mb-1rem.erp-mb-1rem.erp-mb-1rem { margin-bottom: 1rem; }
.erp-mb-2.erp-mb-2.erp-mb-2 { margin-bottom: 2px; }
.erp-mb-20.erp-mb-20.erp-mb-20 { margin-bottom: 20px; }
.erp-mb-3.erp-mb-3.erp-mb-3 { margin-bottom: 3px; }
.erp-mb-30.erp-mb-30.erp-mb-30 { margin-bottom: 30px; }
.erp-mb-4.erp-mb-4.erp-mb-4 { margin-bottom: 4px; }
.erp-mb-5.erp-mb-5.erp-mb-5 { margin-bottom: 5px; }
.erp-mb-6.erp-mb-6.erp-mb-6 { margin-bottom: 6px; }
.erp-mb-8.erp-mb-8.erp-mb-8 { margin-bottom: 8px; }
/* margin-left */
.erp-ml-10.erp-ml-10.erp-ml-10 { margin-left: 10px; }
.erp-ml-12.erp-ml-12.erp-ml-12 { margin-left: 12px; }
.erp-ml-2.erp-ml-2.erp-ml-2 { margin-left: 2px; }
.erp-ml-3.erp-ml-3.erp-ml-3 { margin-left: 3px; }
.erp-ml-4.erp-ml-4.erp-ml-4 { margin-left: 4px; }
.erp-ml-6.erp-ml-6.erp-ml-6 { margin-left: 6px; }
.erp-ml-8.erp-ml-8.erp-ml-8 { margin-left: 8px; }
.erp-ml-auto.erp-ml-auto.erp-ml-auto { margin-left: auto; }
/* margin-right */
.erp-mr-10.erp-mr-10.erp-mr-10 { margin-right: 10px; }
.erp-mr-16.erp-mr-16.erp-mr-16 { margin-right: 16px; }
.erp-mr-2.erp-mr-2.erp-mr-2 { margin-right: 2px; }
.erp-mr-3.erp-mr-3.erp-mr-3 { margin-right: 3px; }
.erp-mr-4.erp-mr-4.erp-mr-4 { margin-right: 4px; }
.erp-mr-5.erp-mr-5.erp-mr-5 { margin-right: 5px; }
.erp-mr-6.erp-mr-6.erp-mr-6 { margin-right: 6px; }
.erp-mr-7.erp-mr-7.erp-mr-7 { margin-right: 7px; }
.erp-mr-8.erp-mr-8.erp-mr-8 { margin-right: 8px; }
/* margin-top */
.erp-mt-0.erp-mt-0.erp-mt-0 { margin-top: 0; }
.erp-mt-10.erp-mt-10.erp-mt-10 { margin-top: 10px; }
.erp-mt-12.erp-mt-12.erp-mt-12 { margin-top: 12px; }
.erp-mt-14.erp-mt-14.erp-mt-14 { margin-top: 14px; }
.erp-mt-16.erp-mt-16.erp-mt-16 { margin-top: 16px; }
.erp-mt-18.erp-mt-18.erp-mt-18 { margin-top: 18px; }
.erp-mt-2.erp-mt-2.erp-mt-2 { margin-top: 2px; }
.erp-mt-20.erp-mt-20.erp-mt-20 { margin-top: 20px; }
.erp-mt-3.erp-mt-3.erp-mt-3 { margin-top: 3px; }
.erp-mt-4.erp-mt-4.erp-mt-4 { margin-top: 4px; }
.erp-mt-5.erp-mt-5.erp-mt-5 { margin-top: 5px; }
.erp-mt-6.erp-mt-6.erp-mt-6 { margin-top: 6px; }
.erp-mt-8.erp-mt-8.erp-mt-8 { margin-top: 8px; }
/* margin */
.erp-m-0.erp-m-0.erp-m-0 { margin: 0; }
.erp-m-0-0-10.erp-m-0-0-10.erp-m-0-0-10 { margin: 0 0 10px; }
.erp-m-0-0-12.erp-m-0-0-12.erp-m-0-0-12 { margin: 0 0 12px; }
.erp-m-0-0-14.erp-m-0-0-14.erp-m-0-0-14 { margin: 0 0 14px; }
.erp-m-0-0-4.erp-m-0-0-4.erp-m-0-0-4 { margin: 0 0 4px; }
.erp-m-0-0-8.erp-m-0-0-8.erp-m-0-0-8 { margin: 0 0 8px; }
.erp-m-0-12.erp-m-0-12.erp-m-0-12 { margin: 0 12px; }
.erp-m-0-20-20.erp-m-0-20-20.erp-m-0-20-20 { margin: 0 20px 20px; }
.erp-m-0-6.erp-m-0-6.erp-m-0-6 { margin: 0 6px; }
.erp-m-0-auto.erp-m-0-auto.erp-m-0-auto { margin: 0 auto; }
.erp-m-0-auto-10.erp-m-0-auto-10.erp-m-0-auto-10 { margin: 0 auto 10px; }
.erp-m-10-0-0.erp-m-10-0-0.erp-m-10-0-0 { margin: 10px 0 0; }
.erp-m-10-0-0-20.erp-m-10-0-0-20.erp-m-10-0-0-20 { margin: 10px 0 0 20px; }
.erp-m-12-20-0.erp-m-12-20-0.erp-m-12-20-0 { margin: 12px 20px 0; }
.erp-m-14-0.erp-m-14-0.erp-m-14-0 { margin: 14px 0; }
.erp-m-14-20-0.erp-m-14-20-0.erp-m-14-20-0 { margin: 14px 20px 0; }
.erp-m-4-0-0.erp-m-4-0-0.erp-m-4-0-0 { margin: 4px 0 0; }
.erp-m-4-0-12.erp-m-4-0-12.erp-m-4-0-12 { margin: 4px 0 12px; }
.erp-m-40-auto.erp-m-40-auto.erp-m-40-auto { margin: 40px auto; }
.erp-m-6-0-0.erp-m-6-0-0.erp-m-6-0-0 { margin: 6px 0 0; }
.erp-m-8-0.erp-m-8-0.erp-m-8-0 { margin: 8px 0; }
/* max-height */
.erp-maxh-160.erp-maxh-160.erp-maxh-160 { max-height: 160px; }
.erp-maxh-180.erp-maxh-180.erp-maxh-180 { max-height: 180px; }
.erp-maxh-200.erp-maxh-200.erp-maxh-200 { max-height: 200px; }
.erp-maxh-220.erp-maxh-220.erp-maxh-220 { max-height: 220px; }
.erp-maxh-240.erp-maxh-240.erp-maxh-240 { max-height: 240px; }
.erp-maxh-280.erp-maxh-280.erp-maxh-280 { max-height: 280px; }
.erp-maxh-70vh.erp-maxh-70vh.erp-maxh-70vh { max-height: 70vh; }
.erp-maxh-88vh.erp-maxh-88vh.erp-maxh-88vh { max-height: 88vh; }
.erp-maxh-90vh.erp-maxh-90vh.erp-maxh-90vh { max-height: 90vh; }
.erp-maxh-94vh.erp-maxh-94vh.erp-maxh-94vh { max-height: 94vh; }
.erp-maxh-95pct.erp-maxh-95pct.erp-maxh-95pct { max-height: 95%; }
/* max-width */
.erp-maxw-100full.erp-maxw-100full.erp-maxw-100full { max-width: 100%; }
.erp-maxw-1200.erp-maxw-1200.erp-maxw-1200 { max-width: 1200px; }
.erp-maxw-140.erp-maxw-140.erp-maxw-140 { max-width: 140px; }
.erp-maxw-160.erp-maxw-160.erp-maxw-160 { max-width: 160px; }
.erp-maxw-180.erp-maxw-180.erp-maxw-180 { max-width: 180px; }
.erp-maxw-200.erp-maxw-200.erp-maxw-200 { max-width: 200px; }
.erp-maxw-220.erp-maxw-220.erp-maxw-220 { max-width: 220px; }
.erp-maxw-260.erp-maxw-260.erp-maxw-260 { max-width: 260px; }
.erp-maxw-280.erp-maxw-280.erp-maxw-280 { max-width: 280px; }
.erp-maxw-320.erp-maxw-320.erp-maxw-320 { max-width: 320px; }
.erp-maxw-340.erp-maxw-340.erp-maxw-340 { max-width: 340px; }
.erp-maxw-420.erp-maxw-420.erp-maxw-420 { max-width: 420px; }
.erp-maxw-440.erp-maxw-440.erp-maxw-440 { max-width: 440px; }
.erp-maxw-460.erp-maxw-460.erp-maxw-460 { max-width: 460px; }
.erp-maxw-480.erp-maxw-480.erp-maxw-480 { max-width: 480px; }
.erp-maxw-500.erp-maxw-500.erp-maxw-500 { max-width: 500px; }
.erp-maxw-520.erp-maxw-520.erp-maxw-520 { max-width: 520px; }
.erp-maxw-560.erp-maxw-560.erp-maxw-560 { max-width: 560px; }
.erp-maxw-600.erp-maxw-600.erp-maxw-600 { max-width: 600px; }
.erp-maxw-640.erp-maxw-640.erp-maxw-640 { max-width: 640px; }
.erp-maxw-680.erp-maxw-680.erp-maxw-680 { max-width: 680px; }
.erp-maxw-720.erp-maxw-720.erp-maxw-720 { max-width: 720px; }
.erp-maxw-80.erp-maxw-80.erp-maxw-80 { max-width: 80px; }
.erp-maxw-800.erp-maxw-800.erp-maxw-800 { max-width: 800px; }
.erp-maxw-92vw.erp-maxw-92vw.erp-maxw-92vw { max-width: 92vw; }
.erp-maxw-94vw.erp-maxw-94vw.erp-maxw-94vw { max-width: 94vw; }
.erp-maxw-95pct.erp-maxw-95pct.erp-maxw-95pct { max-width: 95%; }
.erp-maxw-95vw.erp-maxw-95vw.erp-maxw-95vw { max-width: 95vw; }
.erp-maxw-96vw.erp-maxw-96vw.erp-maxw-96vw { max-width: 96vw; }
.erp-maxw-98vw.erp-maxw-98vw.erp-maxw-98vw { max-width: 98vw; }
/* min-height */
.erp-minh-0.erp-minh-0.erp-minh-0 { min-height: 0; }
.erp-minh-160.erp-minh-160.erp-minh-160 { min-height: 160px; }
.erp-minh-26.erp-minh-26.erp-minh-26 { min-height: 26px; }
/* min-width */
.erp-minw-0.erp-minw-0.erp-minw-0 { min-width: 0; }
.erp-minw-100.erp-minw-100.erp-minw-100 { min-width: 100px; }
.erp-minw-110.erp-minw-110.erp-minw-110 { min-width: 110px; }
.erp-minw-120.erp-minw-120.erp-minw-120 { min-width: 120px; }
.erp-minw-130.erp-minw-130.erp-minw-130 { min-width: 130px; }
.erp-minw-140.erp-minw-140.erp-minw-140 { min-width: 140px; }
.erp-minw-150.erp-minw-150.erp-minw-150 { min-width: 150px; }
.erp-minw-180.erp-minw-180.erp-minw-180 { min-width: 180px; }
.erp-minw-200.erp-minw-200.erp-minw-200 { min-width: 200px; }
.erp-minw-220.erp-minw-220.erp-minw-220 { min-width: 220px; }
.erp-minw-1400.erp-minw-1400.erp-minw-1400 { min-width: 1400px; }
.erp-minw-240.erp-minw-240.erp-minw-240 { min-width: 240px; }
.erp-minw-250.erp-minw-250.erp-minw-250 { min-width: 250px; }
.erp-minw-260.erp-minw-260.erp-minw-260 { min-width: 260px; }
.erp-minw-280.erp-minw-280.erp-minw-280 { min-width: 280px; }
.erp-minw-300.erp-minw-300.erp-minw-300 { min-width: 300px; }
.erp-minw-320.erp-minw-320.erp-minw-320 { min-width: 320px; }
.erp-minw-90.erp-minw-90.erp-minw-90 { min-width: 90px; }
.erp-minw-95.erp-minw-95.erp-minw-95 { min-width: 95px; }
/* opacity */
.erp-op-7.erp-op-7.erp-op-7 { opacity: .7; }
.erp-op-85.erp-op-85.erp-op-85 { opacity: .85; }
/* overflow-x */
.erp-ovx-auto.erp-ovx-auto.erp-ovx-auto { overflow-x: auto; }
/* overflow-y */
.erp-ovy-auto.erp-ovy-auto.erp-ovy-auto { overflow-y: auto; }
/* overflow */
.erp-ov-auto.erp-ov-auto.erp-ov-auto { overflow: auto; }
.erp-ov-hidden.erp-ov-hidden.erp-ov-hidden { overflow: hidden; }
.erp-ov-visible.erp-ov-visible.erp-ov-visible { overflow: visible; }
/* padding-bottom */
.erp-pb-8.erp-pb-8.erp-pb-8 { padding-bottom: 8px; }
/* padding-left */
.erp-pl-18.erp-pl-18.erp-pl-18 { padding-left: 18px; }
.erp-pl-20.erp-pl-20.erp-pl-20 { padding-left: 20px; }
/* padding-right */
.erp-pr-24.erp-pr-24.erp-pr-24 { padding-right: 24px; }
.erp-pr-24-important.erp-pr-24-important.erp-pr-24-important { padding-right: 24px !important; }
.erp-pr-34.erp-pr-34.erp-pr-34 { padding-right: 34px; }
/* padding-top */
.erp-pt-12.erp-pt-12.erp-pt-12 { padding-top: 12px; }
.erp-pt-14.erp-pt-14.erp-pt-14 { padding-top: 14px; }
.erp-pt-8.erp-pt-8.erp-pt-8 { padding-top: 8px; }
/* padding */
.erp-p-0.erp-p-0.erp-p-0 { padding: 0; }
.erp-p-0-16-12.erp-p-0-16-12.erp-p-0-16-12 { padding: 0 16px 12px; }
.erp-p-0-20.erp-p-0-20.erp-p-0-20 { padding: 0 20px; }
.erp-p-0-20-20.erp-p-0-20-20.erp-p-0-20-20 { padding: 0 20px 20px; }
.erp-p-0-6.erp-p-0-6.erp-p-0-6 { padding: 0 6px; }
.erp-p-0-8.erp-p-0-8.erp-p-0-8 { padding: 0 8px; }
.erp-p-1-5.erp-p-1-5.erp-p-1-5 { padding: 1px 5px; }
.erp-p-1-6.erp-p-1-6.erp-p-1-6 { padding: 1px 6px; }
.erp-p-1-7.erp-p-1-7.erp-p-1-7 { padding: 1px 7px; }
.erp-p-10.erp-p-10.erp-p-10 { padding: 10px; }
.erp-p-10-12.erp-p-10-12.erp-p-10-12 { padding: 10px 12px; }
.erp-p-10-14.erp-p-10-14.erp-p-10-14 { padding: 10px 14px; }
.erp-p-10-16.erp-p-10-16.erp-p-10-16 { padding: 10px 16px; }
.erp-p-11.erp-p-11.erp-p-11 { padding: 11px; }
.erp-p-11-14.erp-p-11-14.erp-p-11-14 { padding: 11px 14px; }
.erp-p-12.erp-p-12.erp-p-12 { padding: 12px; }
.erp-p-12-14.erp-p-12-14.erp-p-12-14 { padding: 12px 14px; }
.erp-p-12-15.erp-p-12-15.erp-p-12-15 { padding: 12px 15px; }
.erp-p-12-16.erp-p-12-16.erp-p-12-16 { padding: 12px 16px; }
.erp-p-12-18.erp-p-12-18.erp-p-12-18 { padding: 12px 18px; }
.erp-p-12-20.erp-p-12-20.erp-p-12-20 { padding: 12px 20px; }
.erp-p-12-22.erp-p-12-22.erp-p-12-22 { padding: 12px 22px; }
.erp-p-14.erp-p-14.erp-p-14 { padding: 14px; }
.erp-p-14-16.erp-p-14-16.erp-p-14-16 { padding: 14px 16px; }
.erp-p-14-18.erp-p-14-18.erp-p-14-18 { padding: 14px 18px; }
.erp-p-14-18-0.erp-p-14-18-0.erp-p-14-18-0 { padding: 14px 18px 0; }
.erp-p-14-20.erp-p-14-20.erp-p-14-20 { padding: 14px 20px; }
.erp-p-14-22.erp-p-14-22.erp-p-14-22 { padding: 14px 22px; }
.erp-p-14-8.erp-p-14-8.erp-p-14-8 { padding: 14px 8px; }
.erp-p-15.erp-p-15.erp-p-15 { padding: 15px; }
.erp-p-16.erp-p-16.erp-p-16 { padding: 16px; }
.erp-p-16-20.erp-p-16-20.erp-p-16-20 { padding: 16px 20px; }
.erp-p-16-22.erp-p-16-22.erp-p-16-22 { padding: 16px 22px; }
.erp-p-16-22-20.erp-p-16-22-20.erp-p-16-22-20 { padding: 16px 22px 20px; }
.erp-p-18.erp-p-18.erp-p-18 { padding: 18px; }
.erp-p-18-20.erp-p-18-20.erp-p-18-20 { padding: 18px 20px; }
.erp-p-2-6.erp-p-2-6.erp-p-2-6 { padding: 2px 6px; }
.erp-p-2-7.erp-p-2-7.erp-p-2-7 { padding: 2px 7px; }
.erp-p-2-8.erp-p-2-8.erp-p-2-8 { padding: 2px 8px; }
.erp-p-20.erp-p-20.erp-p-20 { padding: 20px; }
.erp-p-20-22.erp-p-20-22.erp-p-20-22 { padding: 20px 22px; }
.erp-p-22-24-18.erp-p-22-24-18.erp-p-22-24-18 { padding: 22px 24px 18px; }
.erp-p-24.erp-p-24.erp-p-24 { padding: 24px; }
.erp-p-24-28.erp-p-24-28.erp-p-24-28 { padding: 24px 28px; }
.erp-p-28.erp-p-28.erp-p-28 { padding: 28px; }
.erp-p-3-10.erp-p-3-10.erp-p-3-10 { padding: 3px 10px; }
.erp-p-3-6.erp-p-3-6.erp-p-3-6 { padding: 3px 6px; }
.erp-p-3-8.erp-p-3-8.erp-p-3-8 { padding: 3px 8px; }
.erp-p-3-9.erp-p-3-9.erp-p-3-9 { padding: 3px 9px; }
.erp-p-30.erp-p-30.erp-p-30 { padding: 30px; }
.erp-p-32.erp-p-32.erp-p-32 { padding: 32px; }
.erp-p-36.erp-p-36.erp-p-36 { padding: 36px; }
.erp-p-4.erp-p-4.erp-p-4 { padding: 4px; }
.erp-p-4-0.erp-p-4-0.erp-p-4-0 { padding: 4px 0; }
.erp-p-4-10.erp-p-4-10.erp-p-4-10 { padding: 4px 10px; }
.erp-p-4-12.erp-p-4-12.erp-p-4-12 { padding: 4px 12px; }
.erp-p-4-14.erp-p-4-14.erp-p-4-14 { padding: 4px 14px; }
.erp-p-4-8.erp-p-4-8.erp-p-4-8 { padding: 4px 8px; }
.erp-p-4-9.erp-p-4-9.erp-p-4-9 { padding: 4px 9px; }
.erp-p-40.erp-p-40.erp-p-40 { padding: 40px; }
.erp-p-5-0.erp-p-5-0.erp-p-5-0 { padding: 5px 0; }
.erp-p-5-10.erp-p-5-10.erp-p-5-10 { padding: 5px 10px; }
.erp-p-5-12.erp-p-5-12.erp-p-5-12 { padding: 5px 12px; }
.erp-p-5-14.erp-p-5-14.erp-p-5-14 { padding: 5px 14px; }
.erp-p-5-8.erp-p-5-8.erp-p-5-8 { padding: 5px 8px; }
.erp-p-6.erp-p-6.erp-p-6 { padding: 6px; }
.erp-p-6-0.erp-p-6-0.erp-p-6-0 { padding: 6px 0; }
.erp-p-6-0-0.erp-p-6-0-0.erp-p-6-0-0 { padding: 6px 0 0; }
.erp-p-6-10.erp-p-6-10.erp-p-6-10 { padding: 6px 10px; }
.erp-p-6-12.erp-p-6-12.erp-p-6-12 { padding: 6px 12px; }
.erp-p-6-14.erp-p-6-14.erp-p-6-14 { padding: 6px 14px; }
.erp-p-6-16.erp-p-6-16.erp-p-6-16 { padding: 6px 16px; }
.erp-p-6-18.erp-p-6-18.erp-p-6-18 { padding: 6px 18px; }
.erp-p-6-6.erp-p-6-6.erp-p-6-6 { padding: 6px 6px; }
.erp-p-7-0.erp-p-7-0.erp-p-7-0 { padding: 7px 0; }
.erp-p-7-10.erp-p-7-10.erp-p-7-10 { padding: 7px 10px; }
.erp-p-7-14.erp-p-7-14.erp-p-7-14 { padding: 7px 14px; }
.erp-p-7-16.erp-p-7-16.erp-p-7-16 { padding: 7px 16px; }
.erp-p-8.erp-p-8.erp-p-8 { padding: 8px; }
.erp-p-8-0.erp-p-8-0.erp-p-8-0 { padding: 8px 0; }
.erp-p-8-10.erp-p-8-10.erp-p-8-10 { padding: 8px 10px; }
.erp-p-8-12.erp-p-8-12.erp-p-8-12 { padding: 8px 12px; }
.erp-p-8-14.erp-p-8-14.erp-p-8-14 { padding: 8px 14px; }
.erp-p-8-14-6.erp-p-8-14-6.erp-p-8-14-6 { padding: 8px 14px 6px; }
.erp-p-8-16.erp-p-8-16.erp-p-8-16 { padding: 8px 16px; }
.erp-p-8-18.erp-p-8-18.erp-p-8-18 { padding: 8px 18px; }
.erp-p-8-20.erp-p-8-20.erp-p-8-20 { padding: 8px 20px; }
.erp-p-9-12.erp-p-9-12.erp-p-9-12 { padding: 9px 12px; }
.erp-p-9-16.erp-p-9-16.erp-p-9-16 { padding: 9px 16px; }
.erp-p-9-20.erp-p-9-20.erp-p-9-20 { padding: 9px 20px; }
/* position */
.erp-pos-relative.erp-pos-relative.erp-pos-relative { position: relative; }
/* text-overflow */
.erp-tov-ellipsis.erp-tov-ellipsis.erp-tov-ellipsis { text-overflow: ellipsis; }
/* vertical-align */
.erp-va-middle.erp-va-middle.erp-va-middle { vertical-align: middle; }
.erp-va-top.erp-va-top.erp-va-top { vertical-align: top; }
/* width */
.erp-w-100.erp-w-100.erp-w-100 { width: 100px; }
.erp-w-100full.erp-w-100full.erp-w-100full { width: 100%; }
.erp-w-104.erp-w-104.erp-w-104 { width: 104px; }
.erp-w-10pct.erp-w-10pct.erp-w-10pct { width: 10%; }
.erp-w-110.erp-w-110.erp-w-110 { width: 110px; }
.erp-w-112.erp-w-112.erp-w-112 { width: 112px; }
.erp-w-116.erp-w-116.erp-w-116 { width: 116px; }
.erp-w-118.erp-w-118.erp-w-118 { width: 118px; }
.erp-w-11pct.erp-w-11pct.erp-w-11pct { width: 11%; }
.erp-w-120.erp-w-120.erp-w-120 { width: 120px; }
.erp-w-124.erp-w-124.erp-w-124 { width: 124px; }
.erp-w-128.erp-w-128.erp-w-128 { width: 128px; }
.erp-w-12pct.erp-w-12pct.erp-w-12pct { width: 12%; }
.erp-w-130.erp-w-130.erp-w-130 { width: 130px; }
.erp-w-136.erp-w-136.erp-w-136 { width: 136px; }
.erp-w-13pct.erp-w-13pct.erp-w-13pct { width: 13%; }
.erp-w-14.erp-w-14.erp-w-14 { width: 14px; }
.erp-w-140.erp-w-140.erp-w-140 { width: 140px; }
.erp-w-145.erp-w-145.erp-w-145 { width: 145px; }
.erp-w-14pct.erp-w-14pct.erp-w-14pct { width: 14%; }
.erp-w-150.erp-w-150.erp-w-150 { width: 150px; }
.erp-w-155.erp-w-155.erp-w-155 { width: 155px; }
.erp-w-15pct.erp-w-15pct.erp-w-15pct { width: 15%; }
.erp-w-16.erp-w-16.erp-w-16 { width: 16px; }
.erp-w-160.erp-w-160.erp-w-160 { width: 160px; }
.erp-w-16pct.erp-w-16pct.erp-w-16pct { width: 16%; }
.erp-w-170.erp-w-170.erp-w-170 { width: 170px; }
.erp-w-180.erp-w-180.erp-w-180 { width: 180px; }
.erp-w-18pct.erp-w-18pct.erp-w-18pct { width: 18%; }
.erp-w-190.erp-w-190.erp-w-190 { width: 190px; }
.erp-w-19pct.erp-w-19pct.erp-w-19pct { width: 19%; }
.erp-w-200.erp-w-200.erp-w-200 { width: 200px; }
.erp-w-20pct.erp-w-20pct.erp-w-20pct { width: 20%; }
.erp-w-220.erp-w-220.erp-w-220 { width: 220px; }
.erp-w-22pct.erp-w-22pct.erp-w-22pct { width: 22%; }
.erp-w-24.erp-w-24.erp-w-24 { width: 24px; }
.erp-w-240.erp-w-240.erp-w-240 { width: 240px; }
.erp-w-24pct.erp-w-24pct.erp-w-24pct { width: 24%; }
.erp-w-260.erp-w-260.erp-w-260 { width: 260px; }
.erp-w-28.erp-w-28.erp-w-28 { width: 28px; }
.erp-w-280.erp-w-280.erp-w-280 { width: 280px; }
.erp-w-30pct.erp-w-30pct.erp-w-30pct { width: 30%; }
.erp-w-34.erp-w-34.erp-w-34 { width: 34px; }
.erp-w-36.erp-w-36.erp-w-36 { width: 36px; }
.erp-w-38.erp-w-38.erp-w-38 { width: 38px; }
.erp-w-40.erp-w-40.erp-w-40 { width: 40px; }
.erp-w-420.erp-w-420.erp-w-420 { width: 420px; }
.erp-w-44.erp-w-44.erp-w-44 { width: 44px; }
.erp-w-440.erp-w-440.erp-w-440 { width: 440px; }
.erp-w-460.erp-w-460.erp-w-460 { width: 460px; }
.erp-w-48.erp-w-48.erp-w-48 { width: 48px; }
.erp-w-480.erp-w-480.erp-w-480 { width: 480px; }
.erp-w-4pct.erp-w-4pct.erp-w-4pct { width: 4%; }
.erp-w-50.erp-w-50.erp-w-50 { width: 50px; }
.erp-w-52.erp-w-52.erp-w-52 { width: 52px; }
.erp-w-520.erp-w-520.erp-w-520 { width: 520px; }
.erp-w-560.erp-w-560.erp-w-560 { width: 560px; }
.erp-w-58.erp-w-58.erp-w-58 { width: 58px; }
.erp-w-5pct.erp-w-5pct.erp-w-5pct { width: 5%; }
.erp-w-60.erp-w-60.erp-w-60 { width: 60px; }
.erp-w-64.erp-w-64.erp-w-64 { width: 64px; }
.erp-w-68.erp-w-68.erp-w-68 { width: 68px; }
.erp-w-7.erp-w-7.erp-w-7 { width: 7px; }
.erp-w-70.erp-w-70.erp-w-70 { width: 70px; }
.erp-w-72.erp-w-72.erp-w-72 { width: 72px; }
.erp-w-7pct.erp-w-7pct.erp-w-7pct { width: 7%; }
.erp-w-80.erp-w-80.erp-w-80 { width: 80px; }
.erp-w-84.erp-w-84.erp-w-84 { width: 84px; }
.erp-w-88.erp-w-88.erp-w-88 { width: 88px; }
.erp-w-8pct.erp-w-8pct.erp-w-8pct { width: 8%; }
.erp-w-90.erp-w-90.erp-w-90 { width: 90px; }
.erp-w-92.erp-w-92.erp-w-92 { width: 92px; }
.erp-w-96.erp-w-96.erp-w-96 { width: 96px; }
.erp-w-96vw.erp-w-96vw.erp-w-96vw { width: 96vw; }
.erp-w-98vw.erp-w-98vw.erp-w-98vw { width: 98vw; }
.erp-w-9pct.erp-w-9pct.erp-w-9pct { width: 9%; }
.erp-w-auto.erp-w-auto.erp-w-auto { width: auto; }
.erp-w-fit-content.erp-w-fit-content.erp-w-fit-content { width: fit-content; }
/* z-index */
.erp-z-1.erp-z-1.erp-z-1 { z-index: 1; }
.erp-z-10000.erp-z-10000.erp-z-10000 { z-index: 10000; }
.erp-z-1050.erp-z-1050.erp-z-1050 { z-index: 1050; }
.erp-z-1060.erp-z-1060.erp-z-1060 { z-index: 1060; }
.erp-z-1075.erp-z-1075.erp-z-1075 { z-index: 1075; }
.erp-z-1080.erp-z-1080.erp-z-1080 { z-index: 1080; }
.erp-z-1200.erp-z-1200.erp-z-1200 { z-index: 1200; }
.erp-z-2000.erp-z-2000.erp-z-2000 { z-index: 2000; }
.erp-z-9000.erp-z-9000.erp-z-9000 { z-index: 9000; }
.erp-z-9100.erp-z-9100.erp-z-9100 { z-index: 9100; }
.erp-z-9999.erp-z-9999.erp-z-9999 { z-index: 9999; }
.erp-z-99999.erp-z-99999.erp-z-99999 { z-index: 99999; }

/* ═══════════════════════════════════════════════════════════════
   나머지 팔레트 — 화면에 하드코딩돼 있던 색을 값 그대로 옮긴 것

   대부분 한두 화면에서만 쓰이던 일회성 색이라 이름에 의미가 크지 않다
   (`-x` 는 표준 팔레트가 아니라는 표시, 뒤의 숫자는 같은 계단 안의 구분).
   그래도 옮기는 이유는 둘이다:
     · 색 값이 이 파일 한 곳에 모여 테마·브랜드 변경이 1곳 수정이 된다
     · 화면에서 하드코딩 hex 가 사라진다(디자인 시스템 규칙)

   ⚠️ 여기 있는 것들은 **의미 토큰으로 합칠 후보**다. 같은 자리에 반복해서
      쓰이는 색이 보이면 --erp-danger / --erp-bg-soft 같은 이름으로 올리고
      이 블록에서 지울 것.
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* amber */
    --erp-amber-100x:          #fff8e1;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-amber-100x2:         #fffde7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-amber-100x3:         #fff3cd;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-amber-100x4:         #fff9db;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-amber-200x:          #fff9c4;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-amber-400:           #fbbf24;   /* Tailwind amber-400 */
    --erp-amber-50x:           #fffef0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-amber-50x2:          #fffdf5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-amber-900:           #78350f;   /* Tailwind amber-900 */
    /* blue */
    --erp-blue-100x:           #dde1ef;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x10:         #dce6f1;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x11:         #eef0f4;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x12:         #e0ecff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x13:         #f0f4f8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x14:         #eaebff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x15:         #e0e2ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x16:         #dde0ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x17:         #eef1f5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x18:         #eef2f7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x19:         #e4e6ef;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x2:          #e7f5ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x20:         #e8edf4;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x21:         #e8eef7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x22:         #eef1f6;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x23:         #f1f3f7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x24:         #eef1f8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x25:         #e9f3fb;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x3:          #e0e2f0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x4:          #e8edf2;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x5:          #e8eaf6;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x6:          #d0ebff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x7:          #eef0f2;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x8:          #e8edf5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-100x9:          #e8ecf0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-200x:           #c8d0dc;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-200x2:          #e1e4e8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-200x3:          #ced4da;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-200x4:          #c7d2e0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-200x5:          #c4ddf3;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-200x6:          #d0d7de;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-300x:           #90caf9;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-300x2:          #74c0fc;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-300x3:          #b6c0cc;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-400:            #60a5fa;   /* Tailwind blue-400 */
    --erp-blue-400x:           #7c86e0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-500x:           #339af0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-500x2:          #78899f;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-500x3:          #3b5bdb;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-500x4:          #2d4fd8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-500x5:          #0046ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x:            #f0f1ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x10:          #f8faff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x11:          #eef4ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x12:          #f8f9ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x13:          #eef0ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x14:          #f0f4fb;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x2:           #fafbfc;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x3:           #fafbff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x4:           #f0f4ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x5:           #f5f9ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x6:           #fbfcfe;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x7:           #f7f8ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x8:           #f9faff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-50x9:           #f5f7fa;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-600x:           #1971c2;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-600x2:          #0b5ed7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-600x3:          #3a42a0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-600x4:          #1c7ed6;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-600x5:          #1a56db;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-600x6:          #0072ce;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-600x7:          #106ebe;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-600x8:          #0a58ca;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-700x:           #283593;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-700x2:          #495057;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-700x3:          #1864ab;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-700x4:          #0d47a1;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-700x5:          #1a3a8f;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-700x6:          #1428a0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-700x7:          #005bac;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-800x:           #1e3a5f;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-800x2:          #343a40;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-800x3:          #075985;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-800x4:          #2c3e50;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-800x5:          #003a70;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-800x6:          #0f3d5e;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-800x7:          #11476b;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-800x8:          #0c4a6e;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-900:            #1e3a8a;   /* Tailwind blue-900 */
    --erp-blue-900x:           #212529;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-blue-900x2:          #1a1a2e;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    /* cyan */
    --erp-cyan-100:            #cffafe;   /* Tailwind cyan-100 */
    --erp-cyan-100x:           #e8f4fa;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-100x2:          #d9edf7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-200x:           #cce5f0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-300x:           #a5f3fc;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-50:             #ecfeff;   /* Tailwind cyan-50 */
    --erp-cyan-50x:            #f0fdff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-600:            #0891b2;   /* Tailwind cyan-600 */
    --erp-cyan-600x:           #17a2b8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-600x2:          #00a4ef;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-700:            #0e7490;   /* Tailwind cyan-700 */
    --erp-cyan-700x:           #2f5a6b;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-800x:           #37474f;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-cyan-900x:           #263238;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    /* emerald */
    --erp-emerald-300:         #6ee7b7;   /* Tailwind emerald-300 */
    --erp-emerald-400:         #34d399;   /* Tailwind emerald-400 */
    /* fuchsia */
    --erp-fuchsia-100:         #fae8ff;   /* Tailwind fuchsia-100 */
    /* gray */
    --erp-gray-100x:           #e8e8e8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-100x2:          #f2f2f2;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-200x:           #d9d9d9;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-200x2:          #e5e5e5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-300x:           #bbbbbb;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-400x:           #a3a3a3;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-50x:            #f5f5f5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-50x2:           #fdfdfd;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-50x3:           #f8f8f8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-50x4:           #f7f7f7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-600:            #4b5563;   /* Tailwind gray-600 */
    --erp-gray-600x:           #737373;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-600x2:          #777777;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-700x:           #595959;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-700x2:          #525252;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-700x3:          #5a6268;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-700x4:          #545b62;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-800x:           #444444;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-900x:           #222222;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-900x2:          #0a0a0a;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-900x3:          #171717;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-gray-900x4:          #262626;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    /* green */
    --erp-green-300x:          #a5d6a7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-green-400x:          #81c784;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-green-500:           #22c55e;   /* Tailwind green-500 */
    --erp-green-700x:          #00a651;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-green-800x:          #1b5e20;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-green-800x2:         #1d6f42;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-green-800x3:         #217346;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-green-800x4:         #145a35;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-green-800x5:         #1a7340;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-green-800x6:         #155632;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    /* indigo */
    --erp-indigo-100x:         #ede7f6;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-indigo-200x:         #d9c7f5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-indigo-500x:         #7048e8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-indigo-50x:          #f8f7ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-indigo-50x2:         #f3f0ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-indigo-50x3:         #f3edfd;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-indigo-700x:         #4a1d8c;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-indigo-800x:         #1e1b4b;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    /* orange */
    --erp-orange-100:          #ffedd5;   /* Tailwind orange-100 */
    --erp-orange-100x:         #fff3e0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-100x2:        #fff4e6;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-100x3:        #fef3e8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-100x4:        #efebe9;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-100x5:        #fff2cc;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-100x6:        #fce4d6;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-200x:         #ffd8a8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-200x2:        #ffe4c4;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-200x3:        #f5e6c8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-300:          #fdba74;   /* Tailwind orange-300 */
    --erp-orange-300x:         #ffcc80;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-300x2:        #e5d4ae;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-400:          #fb923c;   /* Tailwind orange-400 */
    --erp-orange-400x:         #f4b942;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-500:          #f97316;   /* Tailwind orange-500 */
    --erp-orange-500x:         #ff8c00;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-500x2:        #fd7e14;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-500x3:        #ffbc00;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-500x4:        #ffc107;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-500x5:        #ffb900;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-500x6:        #d9a441;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-50x:          #fffbf5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-600:          #ea580c;   /* Tailwind orange-600 */
    --erp-orange-600x:         #e8590c;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-600x2:        #c44b0c;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-600x3:        #d9480f;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-600x4:        #e67700;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-600x5:        #e07800;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-700x:         #795548;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-700x2:        #8a6d1f;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-800x:         #7a5200;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-800x2:        #856404;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-orange-900:          #7c2d12;   /* Tailwind orange-900 */
    --erp-orange-900x:         #3c2900;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    /* pink */
    --erp-pink-100:            #fce7f3;   /* Tailwind pink-100 */
    --erp-pink-50x:            #fdf0f7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-pink-700:            #be185d;   /* Tailwind pink-700 */
    /* purple */
    --erp-purple-50:           #faf5ff;   /* Tailwind purple-50 */
    --erp-purple-600:          #9333ea;   /* Tailwind purple-600 */
    --erp-purple-800:          #6b21a8;   /* Tailwind purple-800 */
    /* red */
    --erp-red-100x:            #fce4ec;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-100x2:           #ffe3e3;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-100x3:           #fdecea;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-100x4:           #fdecee;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-100x5:           #f9d7da;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-200x:            #ffc9c9;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-200x2:           #f3c7cc;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-200x3:           #f5c2c7;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-300x:            #ef9a9a;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-400:             #f87171;   /* Tailwind red-400 */
    --erp-red-400x:            #fa5252;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-500x:            #e03131;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-500x2:           #e74c3c;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-500x3:           #d32f2f;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-500x4:           #ed1c24;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-500x5:           #f25022;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-50x:             #ffebee;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-50x2:            #fff5f5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-50x3:            #fff0f0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-50x4:            #fff7fb;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-50x5:            #fdedef;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-600x:            #c0392b;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-600x2:           #c92a2a;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-600x3:           #ee0055;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-600x4:           #e60012;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-600x5:           #b02a37;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-700x:            #c00000;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-700x2:           #9b1515;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-700x3:           #bf360c;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-red-700x4:           #842029;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    /* rose */
    --erp-rose-50:             #fff1f2;   /* Tailwind rose-50 */
    --erp-rose-800:            #9f1239;   /* Tailwind rose-800 */
    /* sky */
    --erp-sky-400:             #38bdf8;   /* Tailwind sky-400 */
    /* teal */
    --erp-teal-100:            #ccfbf1;   /* Tailwind teal-100 */
    --erp-teal-100x:           #e6fcf5;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-teal-200:            #99f6e4;   /* Tailwind teal-200 */
    --erp-teal-200x:           #c3fae8;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-teal-300:            #5eead4;   /* Tailwind teal-300 */
    --erp-teal-300x:           #99e9d0;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-teal-50x:            #f0fdf9;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-teal-50x2:           #f8fffe;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-teal-600:            #0d9488;   /* Tailwind teal-600 */
    --erp-teal-700x:           #198754;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-teal-700x2:          #099268;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-teal-700x3:          #12b886;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-teal-800:            #115e59;   /* Tailwind teal-800 */
    --erp-teal-800x:           #008b85;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    /* violet */
    --erp-violet-200x:         #ddccdd;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-violet-50x:          #fdf4ff;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-violet-700x:         #86198f;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-violet-700x2:        #6a1b9a;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
    --erp-violet-800:          #5b21b6;   /* Tailwind violet-800 */
    /* yellow */
    --erp-yellow-300:          #fde047;   /* Tailwind yellow-300 */
    --erp-yellow-50:           #fefce8;   /* Tailwind yellow-50 */
    --erp-yellow-600:          #ca8a04;   /* Tailwind yellow-600 */
    --erp-yellow-700:          #a16207;   /* Tailwind yellow-700 */
    --erp-yellow-700x:         #7fba00;   /* 팔레트 밖 — 계열·밝기로 이름 생성 */
}

/* ═══════════════════════════════════════════════════════════════
   글자 크기 — 표준 8단계 밖의 값

   화면에 박혀 있던 font-size 를 값 그대로 옮긴 것이다. 이름은 크기를
   그대로 쓴다(--erp-fs-15 = 15px). 의미가 없는 대신 오해도 없다.

   ⚠️ 새 화면은 표준 단계(2xs·xs·sm·md·lg·xl·2xl·3xl)를 쓴다. 여기 있는
      값들은 **가장 가까운 표준 단계로 합칠 후보**다 — 다만 합치면 글자
      크기가 실제로 바뀌므로 화면을 보며 정해야 한다.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --erp-fs-8:          8px;
    --erp-fs-9:          9px;
    --erp-fs-9_5:        9.5px;
    --erp-fs-10_5:       10.5px;
    --erp-fs-11_5:       11.5px;
    --erp-fs-12_5:       12.5px;
    --erp-fs-13_5:       13.5px;
    --erp-fs-15:         15px;
    --erp-fs-16:         16px;
    --erp-fs-18:         18px;
    --erp-fs-19:         19px;
    --erp-fs-20:         20px;
    --erp-fs-21:         21px;
    --erp-fs-24:         24px;
    --erp-fs-26:         26px;
    --erp-fs-29:         29px;
    --erp-fs-30:         30px;
    --erp-fs-32:         32px;
    --erp-fs-33:         33px;
    --erp-fs-34:         34px;
    --erp-fs-36:         36px;
    --erp-fs-42:         42px;
    --erp-fs-44:         44px;
    --erp-fs-48:         48px;
    --erp-fs-52:         52px;
}

/* 마지막 잔여 2색 — 인라인에서 옮겨온 것. 값 그대로. */
:root {
    --erp-purple-200:   #e9d5ff;   /* Tailwind purple-200 — 통장 매칭 헤더 경계선 */
    --erp-amber-250x:   #ffeaa7;   /* 홈 읽기전용 안내 경계선 */
}

/* JS 에서 쓰던 색 — erpColor() 로 읽기 위해 토큰화. 값 그대로. */
:root {
    --erp-gray-50j:          #f9f9f9;   /* JS 2회 */
    --erp-blue-100j:         #d6d9f7;   /* JS 1회 */
    --erp-indigo-100j:       #ddd6fe;   /* JS 1회 */
    --erp-blue-400j:         #4dabf7;   /* JS 1회 */
    --erp-green-400j:        #69db7c;   /* JS 1회 */
    --erp-orange-400j:       #ffa94d;   /* JS 1회 */
    --erp-red-300j:          #f783ac;   /* JS 1회 */
    --erp-yellow-500j:       #a9e34b;   /* JS 1회 */
    --erp-cyan-400j:         #66d9e8;   /* JS 1회 */
    --erp-violet-300j:       #da77f2;   /* JS 1회 */
    --erp-amber-400j:        #ffd43b;   /* JS 1회 */
    --erp-green-600j:        #2f9e44;   /* JS 1회 */
    --erp-teal-700j:         #1c9e5e;   /* JS 1회 */
    --erp-indigo-400j:       #8b5cf6;   /* JS 1회 */
}

/* admin 화면에 남아 있던 색 — 값 그대로. */
:root {
    --erp-gray-60x:     #f8f8f8;   /* admin 안내 박스 배경 */
    --erp-gray-200y:    #dddddd;   /* admin 안내 박스 테두리 */
    --erp-ink-560:      #555555;   /* admin 안내 문구 */
    --erp-violet-500x:  #6a5acd;   /* admin 버튼(slate blue) */
    --erp-blue-700x6:   #0069c0;   /* 견적서 메일 버튼 */
    --erp-indigo-900x:  #1a237e;   /* 견적서 합계금액 강조 */
}

/* 포털 테마 색 — 기본값 안전망.
   실제 값은 core/context_processors.company_info 가 ErpSettings 에서 읽어
   `{% templatetag openvariable %} erp_primary_color {% templatetag closevariable %}` 로 내려준다.
   여기 값은 그 컨텍스트가 없을 때만 쓰이는 fallback 이며, 컨텍스트
   프로세서의 기본값과 같은 색이다. */
:root {
    --erp-theme-primary:        #ff8c00;
    --erp-theme-sales:          #d97706;
    --erp-theme-sales-bg:       #fff7ed;
    --erp-theme-tech:           #0ca678;
    --erp-theme-tech-bg:        #e6fcf5;
    --erp-theme-hr:             #2563eb;
    --erp-theme-hr-bg:          #eef3fd;
    --erp-theme-management:     #5c6bc0;
    --erp-theme-management-bg:  #f2f3fa;
    --erp-theme-groupware:      #7c3aed;
    --erp-theme-executive:      #f59e0b;
}

/* 반투명 강조색(8자리 hex — 알파 포함) */
:root {
    --erp-focus-ring-blue: #0d6efd55;  /* 계약 상세: 섹션 포커스 링 */
    --erp-violet-50a:      #f5f3ff08;  /* 파이프라인: 셀 hover 배경(거의 투명) */
}

/* display·visibility 유틸리티 — 인라인에서 옮겨 온 런타임 상태.
   보이게 할 때는 반드시 erpShow(el) 을 쓴다(erp-color.js 주석 참조).

   ⚠️ 특이도가 `.x.x.x`(0,3,0) 로는 부족하다. 이 자리는 원래 **인라인**이라
   무엇에도 이겼는데, `#id { display: … }` 같은 규칙(1,0,0)이 클래스를 이겨
   숨겨야 할 것이 보였다(홈 #pipelineDropdown, 기술 #workPeriodPopup 등).
   `:not(#erp-never)` 는 아무것도 매치하지 않으면서 특이도만 (1,0,0) 올린다.
   두 번 붙여 (2,1,0) — `#id` 규칙은 이기고, JS 가 세팅하는 인라인에는 진다.
   `!important` 는 여전히 쓰면 안 된다: erpShow/erpDisplay 가 인라인으로
   보이게 하는데, important 면 그 인라인이 져서 화면이 열리지 않는다. */
.erp-d-none:not(#erp-never):not(#erp-never)                 { display: none; }
.erp-d-table:not(#erp-never):not(#erp-never)                { display: table; }
.erp-v-hidden:not(#erp-never):not(#erp-never)            { visibility: hidden; }
.erp-v-visible:not(#erp-never):not(#erp-never)         { visibility: visible; }

/* 추출 CSS 에만 남아 있던 색 — 값 그대로 옮긴다.
   화면에서 뽑아낸 선언이 hex→토큰 치환보다 먼저 굳어 남아 있던 것들이다. */
:root {
    --erp-excel-green:      #107c41;  /* 엑셀 내려받기 버튼 */
    --erp-slate-75:         #eef2f6;  /* 옅은 표 머리 배경 */
    --erp-bs-green-500:     #28a745;  /* 부트스트랩 success */
    --erp-green-700x2:      #1d7a37;  /* 출금현황 배지 */
    --erp-green-700x3:      #1d8348;  /* 거래처원장 강조 */
    --erp-indigo-450:       #5059c9;  /* 홈 위젯 아이콘 */
    --erp-blue-25:          #e7f3ff;  /* 안내 박스 배경 */
    --erp-bs-blue-400:      #2196f3;  /* 안내 박스 테두리 */
    --erp-bs-blue-500:      #007bff;  /* 부트스트랩 primary */
    --erp-violet-25:        #efebfb;  /* 홈 섹션 배경 */
    --erp-indigo-25:        #edf2ff;  /* 대시보드 칩 배경 */
    --erp-indigo-550:       #4263eb;  /* 대시보드 칩 글자 */
    --erp-violet-900:       #4c1d95;  /* 대시보드 강조 */
    --erp-sage-600:         #5a7a5a;  /* 엑셀 편집기 헤더 */
    --erp-amber-250:        #ffe69c;  /* 경고 박스 테두리 */
    --erp-amber-950:        #664d03;  /* 경고 박스 글자 */
    --erp-violet-600x:      #6741d9;  /* 평가 폼 그라데이션 */
    --erp-red-550:          #d63031;  /* 공휴일 표시 */
    --erp-amber-300x:       #ffd54f;  /* 설정 하이라이트 */
    --erp-violet-300:       #a78bfa;  /* 통장 매칭 보조 글자 */
    --erp-amber-800x:       #b88600;  /* 숙련도 ADVANCED */
}

/* 투명도 있는 검정·흰 — 그림자·오버레이용. 값은 화면에서 쓰던 것
   그대로 옮겼다. 비슷한 값을 합치는 것은 디자인 판단이라 하지 않았다.
   그림자 체계를 손보려면 이제 여기만 고치면 된다. */
:root {
    --erp-black-a02:       rgba(0, 0, 0, 0.02);
    --erp-black-a03:       rgba(0, 0, 0, 0.03);
    --erp-black-a04:       rgba(0, 0, 0, 0.04);
    --erp-black-a05:       rgba(0, 0, 0, 0.05);
    --erp-black-a06:       rgba(0, 0, 0, 0.06);
    --erp-black-a07:       rgba(0, 0, 0, 0.07);
    --erp-black-a08:       rgba(0, 0, 0, 0.08);
    --erp-black-a09:       rgba(0, 0, 0, 0.09);
    --erp-black-a10:       rgba(0, 0, 0, 0.1);
    --erp-black-a12:       rgba(0, 0, 0, 0.12);
    --erp-black-a13:       rgba(0, 0, 0, 0.13);
    --erp-black-a14:       rgba(0, 0, 0, 0.14);
    --erp-black-a15:       rgba(0, 0, 0, 0.15);
    --erp-black-a16:       rgba(0, 0, 0, 0.16);
    --erp-black-a18:       rgba(0, 0, 0, 0.18);
    --erp-black-a20:       rgba(0, 0, 0, 0.2);
    --erp-black-a22:       rgba(0, 0, 0, 0.22);
    --erp-black-a25:       rgba(0, 0, 0, 0.25);
    --erp-black-a28:       rgba(0, 0, 0, 0.28);
    --erp-black-a30:       rgba(0, 0, 0, 0.3);
    --erp-black-a32:       rgba(0, 0, 0, 0.32);
    --erp-black-a35:       rgba(0, 0, 0, 0.35);
    --erp-black-a38:       rgba(0, 0, 0, 0.38);
    --erp-black-a40:       rgba(0, 0, 0, 0.4);
    --erp-black-a42:       rgba(0, 0, 0, 0.42);
    --erp-black-a45:       rgba(0, 0, 0, 0.45);
    --erp-black-a50:       rgba(0, 0, 0, 0.5);
    --erp-black-a55:       rgba(0, 0, 0, 0.55);
    --erp-black-a60:       rgba(0, 0, 0, 0.6);
    --erp-black-a75:       rgba(0, 0, 0, 0.75);
    --erp-black-a88:       rgba(0, 0, 0, 0.88);
    --erp-white-a04:       rgba(255, 255, 255, 0.04);
    --erp-white-a05:       rgba(255, 255, 255, 0.05);
    --erp-white-a06:       rgba(255, 255, 255, 0.06);
    --erp-white-a07:       rgba(255, 255, 255, 0.07);
    --erp-white-a08:       rgba(255, 255, 255, 0.08);
    --erp-white-a09:       rgba(255, 255, 255, 0.09);
    --erp-white-a12:       rgba(255, 255, 255, 0.12);
    --erp-white-a14:       rgba(255, 255, 255, 0.14);
    --erp-white-a15:       rgba(255, 255, 255, 0.15);
    --erp-white-a18:       rgba(255, 255, 255, 0.18);
    --erp-white-a20:       rgba(255, 255, 255, 0.2);
    --erp-white-a22:       rgba(255, 255, 255, 0.22);
    --erp-white-a25:       rgba(255, 255, 255, 0.25);
    --erp-white-a28:       rgba(255, 255, 255, 0.28);
    --erp-white-a30:       rgba(255, 255, 255, 0.3);
    --erp-white-a32:       rgba(255, 255, 255, 0.32);
    --erp-white-a40:       rgba(255, 255, 255, 0.4);
    --erp-white-a50:       rgba(255, 255, 255, 0.5);
    --erp-white-a55:       rgba(255, 255, 255, 0.55);
    --erp-white-a60:       rgba(255, 255, 255, 0.6);
    --erp-white-a70:       rgba(255, 255, 255, 0.7);
    --erp-white-a75:       rgba(255, 255, 255, 0.75);
    --erp-white-a78:       rgba(255, 255, 255, 0.78);
    --erp-white-a80:       rgba(255, 255, 255, 0.8);
    --erp-white-a85:       rgba(255, 255, 255, 0.85);
    --erp-white-a90:       rgba(255, 255, 255, 0.9);
    --erp-white-a95:       rgba(255, 255, 255, 0.95);
}

/* admin 엔지니어 배지 — 등급별 색. 값 그대로 옮겼다. */
:root {
    --erp-m-gray-700x:  #616161;
    --erp-m-gray-300x:  #e0e0e0;
    --erp-m-orange-800x: #ef6c00;
    --erp-m-amber-200x: #ffe082;
}

/* admin 화면 잔여 색 — 값 그대로. */
:root {
    --erp-m-blue-100x:  #bbdefb;
    --erp-m-orange-500x: #ff9800;
}

/* ── 행 버전 칩 (v1, v2 …) — 계약 상세 빌링 회차·매입 내역 표의 'V' 열 ──
   v1(변경 없음)은 조용한 회색, 결재로 바뀐 행은 파랑(클릭 → 변경·결재 이력 팝업),
   결재 진행 중이면 점선 주황. */
.cc-ver { display:inline-flex; align-items:center; justify-content:center; min-width:32px; padding:1px 7px; border-radius:999px; font-size:var(--erp-fs-xs); font-weight:700; line-height:1.4; background:var(--erp-bg-soft); color:var(--erp-text-faint); border:1px solid var(--erp-border); white-space:nowrap; }
.cc-ver--changed { background:var(--erp-info-bg); color:var(--erp-info-strong); border-color:transparent; cursor:pointer; }
.cc-ver--changed:hover { box-shadow:0 0 0 2px var(--erp-info-bg); }
.cc-ver--pending { background:var(--erp-warning-bg); color:var(--erp-warning-strong); border:1px dashed var(--erp-warning-strong); cursor:pointer; }
/* 섹션 헤더(기본 계약 정보·기술지원 품목·엔지니어 배정)에 얹는 섹션 단위 버전 칩 */
.cc-ver--head { vertical-align:middle; margin-left:6px; font-weight:600; }
.cc-ver-entry { border:1px solid var(--erp-border); border-radius:8px; margin-bottom:10px; overflow:hidden; }
.cc-ver-entry-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 12px; background:var(--erp-bg-soft); font-size:var(--erp-fs-sm); }
.cc-ver-entry-meta { display:grid; grid-template-columns:90px 1fr; gap:4px 10px; padding:8px 12px; font-size:var(--erp-fs-sm); color:var(--erp-text); }
.cc-ver-entry-meta dt { color:var(--erp-text-muted); font-weight:600; margin:0; }
.cc-ver-entry-meta dd { margin:0; }
/* 결재 대기 적재 직후 새로고침 — 상단 미상신 변경 바를 잠깐 강조해 시선을 끈다 */
@keyframes cc-draft-flash { 0%,100% { box-shadow:0 0 0 0 transparent; } 30% { box-shadow:0 0 0 4px var(--erp-warning-bg), 0 0 0 6px var(--erp-warning-strong); } }
.cc-draft-bar--flash { animation: cc-draft-flash 1.3s ease-in-out 2; }

/* ── 계약 문서 지도(Document Map) 모달 — 계약 → 계약서 → 매입 → 견적서·발주서·계약서 ──
   contracts/_doc_map_modal.html 전용. 레벨은 좌측 레일(border-left)+가지선으로 잇고,
   버전 행은 최신이 위(is-latest 강조), 교체돼 사라진 파일은 취소선(is-missing). */
.docmap { font-size: var(--erp-fs-sm); color: var(--erp-text); }
.docmap-contract { border: 1px solid var(--erp-border); border-radius: 10px; background: var(--erp-bg-soft); padding: 12px 14px; }
.docmap-contract-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--erp-fs-lg); font-weight: 800; color: var(--erp-text-strong); }
.docmap-contract-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: var(--erp-fs-xs); color: var(--erp-text-muted); }
.docmap-contract-meta b { font-weight: 600; color: var(--erp-text); }
.docmap-tree { margin-top: 10px; margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--erp-border); }
.docmap-node { position: relative; margin: 10px 0; }
.docmap-node::before { content: ''; position: absolute; left: -14px; top: 15px; width: 12px; height: 2px; background: var(--erp-border); }
.docmap-node-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--erp-border); border-radius: 8px; background: var(--erp-bg-card); font-weight: 700; color: var(--erp-text-strong); }
.docmap-node--l2 > .docmap-node-head { cursor: pointer; background: var(--erp-bg-soft); }
.docmap-node--l2 > .docmap-node-head:hover { border-color: var(--erp-primary); }
.docmap-caret { color: var(--erp-text-faint); transition: transform .15s; }
.docmap-node--l2.collapsed > .docmap-node-head .docmap-caret { transform: rotate(-90deg); }
.docmap-node--l2.collapsed > .docmap-doc-cols { display: none; }
.docmap-children { margin-top: 8px; margin-left: 10px; padding-left: 14px; border-left: 2px solid var(--erp-border); }
.docmap-sep { color: var(--erp-text-faint); font-weight: 400; }
.docmap-rows { padding: 6px 0 0 10px; }
.docmap-dialog { max-width: min(96vw, 1720px); }
/* 행은 한 줄 고정 — 파일명이 길면 말줄임(전체 이름은 title 툴팁), 버전·회차·상태 칩은 줄바꿈 없이 유지 */
.docmap-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 4px 6px; border-radius: 6px; font-weight: 400; min-width: 0; }
.docmap-row > * { flex: 0 0 auto; white-space: nowrap; }
/* 파일명은 줄이지 않는다(행의 60% 상한에서만 말줄임). 공간이 모자라면 메타·발송 칩이 준다 */
.docmap-row > .docmap-name { flex: 0 0 auto; max-width: 60%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.docmap-row > .docmap-meta { flex: 0 40 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.docmap-row > .docmap-fill { flex: 1 1 0; min-width: 0; }
.docmap-row > .docmap-sent { display: inline-block; flex: 0 40 auto; min-width: 48px; overflow: hidden; text-overflow: ellipsis; }
.docmap-row + .docmap-row { border-top: 1px dashed var(--erp-border); }
.docmap-row.is-latest { background: var(--erp-bg-soft); }
.docmap-row.is-missing .docmap-name { text-decoration: line-through; color: var(--erp-text-faint); }
.docmap-ver { display: inline-block; min-width: 30px; text-align: center; padding: 0 6px; border: 1px solid var(--erp-border); border-radius: 999px; font-size: var(--erp-fs-xs); font-weight: 800; color: var(--erp-text-muted); background: var(--erp-bg-card); }
.docmap-ver--latest { color: var(--erp-primary); border-color: var(--erp-primary); }
.docmap-ver--dim { font-weight: 600; }
.docmap-name { font-weight: 600; color: var(--erp-text-strong); }
a.docmap-name:hover { text-decoration: underline; color: var(--erp-primary); }
.docmap-meta { font-size: var(--erp-fs-xs); color: var(--erp-text-muted); font-weight: 400; }
.docmap-reason { max-width: 420px; }
.docmap-sub-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0 10px; padding-top: 8px; border-top: 1px solid var(--erp-border); font-weight: 700; color: var(--erp-text); }
.docmap-doc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0 10px; padding-left: 14px; border-left: 2px solid var(--erp-border); }
.docmap-doc { min-width: 0; padding: 6px 8px; border: 1px solid var(--erp-border); border-radius: 8px; background: var(--erp-bg-card); }
.docmap-doc-title { display: flex; align-items: center; gap: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--erp-border); font-weight: 700; color: var(--erp-text); }
.docmap-doc .docmap-rows { padding-left: 0; }
.docmap-empty { padding: 6px 2px; font-size: var(--erp-fs-xs); color: var(--erp-text-faint); }
.docmap-count { font-size: var(--erp-fs-xs); font-weight: 600; color: var(--erp-text-muted); }
@media (max-width: 900px) { .docmap-doc-cols { grid-template-columns: 1fr; } }

/* ── 분할 연결 목록 (한 입금 → 여러 청구) — 자금일보·입금보고서 상세 [HD-260831-008] ── */
.split-link-list { display: block; margin: 0; padding: 0; list-style: none; }
.split-link-list > li { display: block; white-space: normal; line-height: 1.5; }
.split-link-list > li + li { margin-top: 2px; }
.split-link-list .split-client { font-weight: 700; color: var(--erp-text-strong); }
.split-link-list .split-amt { font-weight: 700; color: var(--erp-text-strong); white-space: nowrap; }
.split-link-list .split-rest { color: var(--erp-warning-strong); }

/* ── 연결 상태 칩 + 연결 상세 팝업 — 세금계산서 조회의 '연결됨' 표기 [HD-260901-015] ──
   상세 페이지(경영지원 전용)로 보내는 대신 식별 정보만 보여 주는 읽기 전용 칩/모달. */
.erp-linkchip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 2px 8px; margin-bottom: 2px; border: 1px solid transparent;
    border-radius: 10px; font-size: var(--erp-fs-xs); font-weight: 600;
    line-height: 1.6; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.erp-linkchip:hover { filter: brightness(0.95); text-decoration: none; }
.erp-linkchip--buy { color: var(--erp-yellow-800); background: var(--erp-yellow-100); }
.erp-linkchip--sell { color: var(--erp-green-800); background: var(--erp-green-100); }
.erp-linkchip .erp-linkchip-txt { overflow: hidden; text-overflow: ellipsis; }

.erp-linkinfo-back {
    position: fixed; inset: 0; background: var(--erp-black-a45); z-index: 1060;
    align-items: center; justify-content: center;
}
.erp-linkinfo-box {
    width: min(760px, 94vw); max-height: 88vh; overflow-y: auto;
    background: var(--erp-bg-card); border-radius: var(--erp-radius-lg);
    box-shadow: 0 18px 48px var(--erp-black-a25); padding: 20px 22px;
}
.erp-linkinfo-card {
    border: 1px solid var(--erp-border); border-radius: var(--erp-radius-md);
    padding: 12px 14px; margin-bottom: 10px; background: var(--erp-bg-card);
}
.erp-linkinfo-card + .erp-linkinfo-card { margin-top: 0; }
.erp-linkinfo-grid {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px;
    font-size: var(--erp-fs-sm); margin-top: 8px;
}
.erp-linkinfo-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-linkinfo-grid > dt { color: var(--erp-text-muted); font-weight: 600; }
.erp-linkinfo-grid > dd { margin: 0; color: var(--erp-text-strong); min-width: 0; overflow-wrap: anywhere; }
.erp-linkinfo-hist { font-size: var(--erp-fs-xs); color: var(--erp-text-muted); }
.erp-linkinfo-hist > li + li { margin-top: 3px; }
@media (max-width: 640px) { .erp-linkinfo-grid { grid-template-columns: 1fr; } }

/* ── 검색 사용법 힌트 (세금계산서 조회 3화면 공용, partials/_taxinvoice_search_hint.html) ──
   검색창 아래에 항목별 예시를 한 줄로 깔아 "무엇을 어떻게 칠 수 있는지"가 화면에서 보이게 한다.
   placeholder 는 한 번에 한 문장만 담을 수 있고 입력을 시작하면 사라져, 여러 항목을 조합하는
   검색에서는 규칙이 전달되지 않았다. 칩을 누르면 그 예시가 검색창 뒤에 덧붙는다(제출은 안 함). */
.erp-qhint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 12px;
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-muted);
}
.erp-qhint__lead {
    font-weight: 700;
    color: var(--erp-text-muted);
    white-space: nowrap;
}
.erp-qhint__lead > i {
    color: var(--erp-warning);
    margin-right: 3px;
}
.erp-qhint__chip {
    border: 1px dashed var(--erp-border);
    background: var(--erp-bg-card);
    border-radius: 999px;
    padding: 2px 10px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
}
.erp-qhint__chip > b {
    color: var(--erp-text-strong);
    font-weight: 700;
}
.erp-qhint__chip:hover {
    border-style: solid;
    border-color: var(--erp-primary);
}
.erp-qhint__chip:hover > b { color: var(--erp-primary); }
.erp-qhint__tail { color: var(--erp-text-faint); }
.erp-qhint__tail > b {
    color: var(--erp-text-muted);
    font-weight: 700;
}

/* 좁은 화면에서는 설명 문장을 접고 예시 칩만 남긴다 — 칩만으로도 규칙이 읽힌다. */
@media (max-width: 820px) {
    .erp-qhint__tail { display: none; }
}

/* ── 헤더 크롬 버튼 (로그아웃·마이페이지·비밀번호 변경) — 화면별 .btn-logout 정의를 한곳으로 ── */
.erp-hdr-btn { background: none; border: 1px solid var(--erp-white-a50); color: white; padding: 4px 10px; border-radius: 4px; font-size: var(--erp-fs-md); cursor: pointer; transition: all 0.2s; text-decoration: none; -webkit-appearance: none; appearance: none; font-family: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.erp-hdr-btn:hover, .erp-hdr-btn:link:hover { background: white; color: var(--erp-shell-primary); }
.erp-hdr-btn:link, .erp-hdr-btn:visited { color: white; }

/* ── 로그인 화면 버튼 (Microsoft 로그인·로컬 로그인) ── */
.erp-login-btn { margin-top: 8px; padding: 12px; background: var(--erp-bg-card); color: var(--erp-text-strong); border: 1.5px solid var(--erp-border); border-radius: 8px; font-size: var(--erp-fs-lg); font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.erp-login-btn:hover { border-color: var(--erp-text-strong); background: var(--erp-bg-soft); }
.erp-login-btn--ms { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 16px; background: var(--erp-primary); color: var(--erp-bg-card); border: none; border-radius: 10px; font-size: var(--erp-fs-lg); font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px var(--erp-black-a06), 0 6px 18px color-mix(in srgb, var(--erp-primary) 35%, transparent); transition: filter 0.2s, transform 0.05s; }
.erp-login-btn--ms:hover { filter: brightness(1.06); }
.erp-login-btn--ms:active { transform: translateY(1px); }