/* ==========================================================================
   Doto Ink Skin — P0 프로토타입 (2026-08-20)
   land3(랜딩)의 잉크&라임 언어를 앱으로 확장하는 토큰 오버라이드.

   원칙:
   - 마크업 무수정 — Bootstrap 5.3 CSS 변수와 컴포넌트 변수만 재정의한다.
   - 로드 순서는 doto-components.css 뒤 (header.php) — 동률 특이도에서 이긴다.
   - 상태색(success/warning/danger/info)과 도메인 색(차트·모듈 체인·연차 간트)은
     그대로 둔다 — 잉크로 바꾸는 건 «셸과 크롬»이지 «의미»가 아니다.
   - 라임(#D9F99D)은 「현재 위치」 전용: 포커스 링 한 곳에만 쓴다.
   - 켜고 끄기: ?ink=1 / ?ink=0 (쿠키 doto_ink, header.php). 확정 전까지 opt-in.

   팔레트 (land3/assets/shared.css 와 동일):
     ink #0A0A0A · ink2 #374151 · ink3 #6B7280 · ink4 #9CA3AF
     line #E5E7EB · line2 #D1D5DB · surface #FAFAFA · surface2 #F4F5F7
     accent #D9F99D (rgb 217,249,157)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 루트 토큰 — primary 계열을 잉크로, 회색축을 land3 스케일로
   -------------------------------------------------------------------------- */
:root {
    /* primary = 잉크. .bg-primary(메인메뉴 레일)·.text-primary·.badge bg-primary·
       progress·spinner 가 rgb 변수를 참조하므로 여기서 일괄 전환된다. */
    --bs-primary: #0A0A0A;
    --bs-primary-rgb: 10, 10, 10;
    --bs-primary-text-emphasis: #1F2937;
    --bs-primary-bg-subtle: #F4F5F7;
    --bs-primary-border-subtle: #E5E7EB;

    /* 보조 회색축 — text-secondary 등이 중간 회색(#999)이라 잉크 톤과 어긋난다 */
    --bs-secondary-rgb: 107, 114, 128;   /* ink3 */

    /* bg-light = 본문 배경(main-layout) — #eee 는 잉크 톤에서 너무 어둡다 */
    --bs-light: #FAFAFA;
    --bs-light-rgb: 250, 250, 250;

    /* 면 2단: 흰 카드 ↔ 서페이스. section-panel 이 tertiary-bg 를 참조한다 */
    --bs-tertiary-bg: #FAFAFA;
    --bs-tertiary-bg-rgb: 250, 250, 250;
    --bs-secondary-bg: #F4F5F7;
    --bs-secondary-bg-rgb: 244, 245, 247;

    /* 선 = 헤어라인. 카드가 쓰는 translucent 도 실선으로 통일 */
    --bs-border-color: #E5E7EB;
    --bs-border-color-translucent: #E5E7EB;

    /* 잉크 텍스트 축 */
    --bs-body-color: #1F2937;
    --bs-body-color-rgb: 31, 41, 55;
    --bs-heading-color: #0A0A0A;
    --bs-emphasis-color: #0A0A0A;

    /* 링크 = 잉크 (land3 관례 — 링크다움은 밑줄이 담당) */
    --bs-link-color: #0A0A0A;
    --bs-link-color-rgb: 10, 10, 10;
    --bs-link-hover-color: #374151;
    --bs-link-hover-color-rgb: 55, 65, 81;

    /* 라운드 스케일 — land3 (버튼·입력 10px, 카드 14px) */
    --bs-border-radius: 0.625rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.875rem;
    --bs-border-radius-xl: 1rem;

    /* 포커스 링 = 라임. 「현재 위치」 표시의 단 한 곳 */
    --bs-focus-ring-color: rgba(217, 249, 157, 0.55);
}

/* --------------------------------------------------------------------------
   2. 버튼 — 1차 액션은 잉크 블랙, 고스트는 흰 바탕 + 헤어라인
   (승인/삭제 등 success·danger·warning 버튼은 의미색이므로 그대로)
   -------------------------------------------------------------------------- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0A0A0A;
    --bs-btn-border-color: #0A0A0A;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1F2937;
    --bs-btn-hover-border-color: #1F2937;
    --bs-btn-focus-shadow-rgb: 217, 249, 157;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #111827;
    --bs-btn-active-border-color: #111827;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #9CA3AF;
    --bs-btn-disabled-border-color: #9CA3AF;
}

.btn-outline-primary {
    --bs-btn-color: #0A0A0A;
    --bs-btn-border-color: #D1D5DB;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0A0A0A;
    --bs-btn-hover-border-color: #0A0A0A;
    --bs-btn-focus-shadow-rgb: 217, 249, 157;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0A0A0A;
    --bs-btn-active-border-color: #0A0A0A;
    --bs-btn-disabled-color: #9CA3AF;
    --bs-btn-disabled-border-color: #E5E7EB;
}

/* land3 btn-secondary: 흰 바탕 + 잉크 글자 + 헤어라인 (기존 #999 솔리드 대체) */
.btn-secondary {
    --bs-btn-color: #0A0A0A;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #D1D5DB;
    --bs-btn-hover-color: #0A0A0A;
    --bs-btn-hover-bg: #F4F5F7;
    --bs-btn-hover-border-color: #9CA3AF;
    --bs-btn-focus-shadow-rgb: 217, 249, 157;
    --bs-btn-active-color: #0A0A0A;
    --bs-btn-active-bg: #E5E7EB;
    --bs-btn-active-border-color: #9CA3AF;
    --bs-btn-disabled-color: #9CA3AF;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #E5E7EB;
}

/* 고스트 버튼(도토에서 가장 흔한 보조 액션) — 호버에 솔리드 회색 채우던 것을
   서페이스 채움으로 완화. 아이콘 톤도 잉크로 맞는다 */
.btn-outline-secondary {
    --bs-btn-color: #374151;
    --bs-btn-border-color: #D1D5DB;
    --bs-btn-hover-color: #0A0A0A;
    --bs-btn-hover-bg: #F4F5F7;
    --bs-btn-hover-border-color: #D1D5DB;
    --bs-btn-focus-shadow-rgb: 217, 249, 157;
    --bs-btn-active-color: #0A0A0A;
    --bs-btn-active-bg: #E5E7EB;
    --bs-btn-active-border-color: #D1D5DB;
    --bs-btn-disabled-color: #9CA3AF;
    --bs-btn-disabled-border-color: #E5E7EB;
}

.btn-link {
    --bs-btn-color: #0A0A0A;
    --bs-btn-hover-color: #374151;
    --bs-btn-active-color: #374151;
    --bs-btn-focus-shadow-rgb: 217, 249, 157;
}

/* Spacelab 은 변수 외에 «그라디언트 스킨층»을 따로 얹는다 (.btn-*·.navbar.bg-* 에
   background-image + text-shadow + border 리터럴). 배경색 변수만 바꾸면 이 층이
   그대로 남아 남색 광택이 비치므로 통째로 걷는다. 의미색 버튼(success 등)도
   색은 유지하고 광택만 플랫으로. */
.btn,
.navbar .nav-link,
.navbar .navbar-brand {
    text-shadow: none;
}
.btn-primary, .btn-primary:not(.disabled):hover,
.btn-secondary, .btn-secondary:not(.disabled):hover,
.btn-success, .btn-success:not(.disabled):hover,
.btn-info, .btn-info:not(.disabled):hover,
.btn-warning, .btn-warning:not(.disabled):hover,
.btn-danger, .btn-danger:not(.disabled):hover {
    background-image: none;
    border: var(--bs-border-width) solid var(--bs-btn-border-color);
}
.btn-primary:not(.disabled):hover,
.btn-secondary:not(.disabled):hover,
.btn-success:not(.disabled):hover,
.btn-info:not(.disabled):hover,
.btn-warning:not(.disabled):hover,
.btn-danger:not(.disabled):hover {
    border-color: var(--bs-btn-hover-border-color);
}
.navbar.bg-primary {
    background-image: none;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. 카드 — 그림자 대신 헤어라인
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: 0.875rem;
    --bs-card-inner-border-radius: calc(0.875rem - 1px);
    --bs-card-cap-bg: transparent;
}

/* 메인 카드 관례(card shadow-sm)의 그림자를 걷는다 — 깊이는 헤어라인+배경 2단이 담당.
   .shadow-sm 유틸 전체를 죽이지 않는 이유: 떠 있는 것(팝오버·고정 헤더)의 그림자는 남긴다 */
.card.shadow-sm {
    box-shadow: none !important;
}

/* border-0 + shadow-sm 카드(111곳): 그림자를 걷으면 윤곽이 사라지므로 헤어라인 복원 */
.card.shadow-sm.border-0 {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

/* --------------------------------------------------------------------------
   4. 탭 — nav-tabs 는 언더라인으로, nav-pills 활성은 잉크로
   -------------------------------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    --bs-nav-tabs-link-active-color: #0A0A0A;
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-link-color: #6B7280;
    --bs-nav-link-hover-color: #0A0A0A;
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0.125rem;
}
.nav-tabs .nav-link {
    border: 0;
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 500;
}
.nav-tabs .nav-link:hover:not(.active) {
    background-color: #FAFAFA;
}
/* 레이아웃 흔들림 없이 활성 언더라인 — inset box-shadow 로 그린다 */
.nav-tabs .nav-link.active {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #0A0A0A;
}

/* 마스터-디테일 «상세 안» 탭 — 임직원관리·거래처관리 3화면이 부트스트랩 `nav-underline` 을
   그대로 쓰고 있어 §4 규칙이 안 걸렸다(2026-08-27 실측: 굵기 700 vs 600 · 검정 #212529 vs #0A0A0A ·
   밑줄을 border-bottom 으로 그림). 같은 「내용을 갈아 끼우는 탭」이므로 같은 문법으로 모은다.
   🔴 밑줄은 §4 와 같이 inset box-shadow 로 그리고 border-bottom 은 투명으로 눌러 «이중 밑줄»을 막는다.
   좌우 패딩은 nav-underline 이 0 이고 상세 패널이 좁아 그대로 둔다(nav-fill 이 균등 분할). */
.nav-underline {
    --bs-nav-underline-link-active-color: #0A0A0A;
    --bs-nav-link-color: #6B7280;
    --bs-nav-link-hover-color: #0A0A0A;
    gap: 0.75rem;
}
.nav-underline .nav-link {
    border-bottom-color: transparent !important;
    font-weight: 500;
}
.nav-underline .nav-link.active {
    color: #0A0A0A;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #0A0A0A;
}

.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #0A0A0A;
    --bs-nav-link-color: #374151;
    --bs-nav-link-hover-color: #0A0A0A;
}
/* 메인메뉴 레일(어두운 바탕 위 pills)은 기존 반투명 하이라이트 유지 —
   위 잉크 활성 배경이 검정 위 검정이 되는 것을 막는다 */
.main-menu .nav-pills .nav-link.active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* --------------------------------------------------------------------------
   5. 폼 — 입력 보더는 한 단계 진하게, 포커스는 라임 링
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
    border-color: #D1D5DB;
}
.form-control:focus,
.form-select:focus {
    border-color: #9CA3AF;
    box-shadow: 0 0 0 0.25rem rgba(217, 249, 157, 0.5);
}
.form-check-input {
    border-color: #D1D5DB;
}
.form-check-input:focus {
    border-color: #9CA3AF;
    box-shadow: 0 0 0 0.25rem rgba(217, 249, 157, 0.5);
}
.form-check-input:checked {
    background-color: #0A0A0A;
    border-color: #0A0A0A;
}

/* --------------------------------------------------------------------------
   6. 테이블 — 호버·스트라이프를 서페이스 톤으로, 헤더(table-light)는 플랫하게
   -------------------------------------------------------------------------- */
.table {
    --bs-table-hover-bg: #FAFAFA;
    --bs-table-striped-bg: #FAFAFA;
}
.table-light {
    --bs-table-bg: #FAFAFA;
    --bs-table-color: #374151;
    --bs-table-border-color: #E5E7EB;
}

/* --------------------------------------------------------------------------
   7. 내비 부속 — 페이지네이션·리스트그룹·드롭다운·모달
   -------------------------------------------------------------------------- */
.pagination {
    --bs-pagination-color: #374151;
    --bs-pagination-hover-color: #0A0A0A;
    --bs-pagination-hover-bg: #F4F5F7;
    --bs-pagination-focus-color: #0A0A0A;
    --bs-pagination-focus-bg: #F4F5F7;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(217, 249, 157, 0.5);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #0A0A0A;
    --bs-pagination-active-border-color: #0A0A0A;
}

.list-group {
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #0A0A0A;
    --bs-list-group-active-border-color: #0A0A0A;
}

.dropdown-menu {
    --bs-dropdown-border-radius: 0.75rem;
    --bs-dropdown-border-color: #E5E7EB;
    --bs-dropdown-link-active-color: #0A0A0A;
    --bs-dropdown-link-active-bg: #F4F5F7;
    box-shadow: 0 12px 32px -12px rgba(10, 10, 10, 0.18);
}

.modal {
    --bs-modal-border-radius: 0.875rem;
    --bs-modal-border-color: var(--bs-border-color);
}

/* --------------------------------------------------------------------------
   8. 셸 — 배경 텍스처 제거(플랫 서페이스). 레일 색은 --bs-primary-rgb 로 이미 잉크
   -------------------------------------------------------------------------- */
.bg-light-textured {
    background-image: none;
}

/* ==========================================================================
   9. P1 셸 개편 — 데스크톱: 좌측 레일 제거, 모바일 상단바를 52px 글로벌 바로 승격
   - 모듈 이동 = 상단 그리드 버튼 → #unifiedMenuOffcanvas (모바일 그리드 메뉴의 승격)
   - 서브메뉴 = 접이식 (subnav.php 의 .ink-subnav-collapse / .ink-subnav-expander,
     상태 클래스는 html.ink-subnav-collapsed — ink-shell.js 가 토글·기억)
   - 모바일(<992px)은 기존 뼈대 그대로 (색만 잉크)
   ========================================================================== */
@media (min-width: 992px) {
    /* 모바일 헤더 → 데스크톱 상단바. style.css 의 lg display:none 을 뒤 로드로 뒤집는다 */
    .mobile-header {
        display: flex;
        height: 52px;
        padding: 0 0.75rem 0 0.5rem;
        gap: 0.25rem;
    }
    .mobile-header .h5 {
        text-align: left !important;   /* .text-center 유틸(!important) 상쇄 */
        font-weight: 700;
        letter-spacing: -0.01em;
        font-size: 0.9375rem;
    }
    /* 좌측 50px 모듈 레일 제거 — 가로 공간 회수. 모듈 이동은 상단 런처가 담당.
       !important — 레일 마크업의 d-lg-flex 유틸(display:flex !important)을 이겨야 한다 */
    .main-menu {
        display: none !important;
    }
    /* fixed 상단바(52px)만큼 본문 프레임을 내린다.
       🔴 52 «정확히». 상단바 높이 52px 은 box-sizing:border-box 라 border-bottom 1px 을
       이미 품고 있다 — 53 으로 두면 남는 1px 에 main-layout 바탕(#DFE3E9)이 드러나
       서브메뉴 구간에서 헤어라인 아래 «둘째 줄»로 보인다(2026-09-07 오너 지적). */
    .main-layout {
        padding-top: 52px;
    }

    /* 서브메뉴 접기 — margin 슬라이드. main-layout 이 overflow:hidden 이라 잘려 나간다 */
    .sub-menu {
        transition: margin-left 0.25s ease;
    }
    html.ink-subnav-collapsed .sub-menu {
        margin-left: -250px;
    }
    html.ink-subnav-collapsed .ink-subnav-expander {
        display: inline-flex !important;   /* 마크업 기본 d-none(!important) 상쇄 */
    }
}

/* 접힌 서브메뉴를 펼치는 좌측 엣지 핸들 — 데스크톱 + 접힘 상태에서만 위 규칙이 보여준다 */
.ink-subnav-expander {
    position: fixed;
    left: 0;
    top: 50%;                      /* 좌측 엣지 세로 중앙 — content-header 타이틀과 겹치지 않는 자리 */
    transform: translateY(-50%);
    z-index: 1030;
    width: 24px;
    height: 40px;
    border: 1px solid var(--bs-border-color);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: #fff;
    color: var(--bs-secondary-color);
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ink-subnav-expander:hover {
    color: var(--bs-emphasis-color);
    border-color: #D1D5DB;
}

/* --------------------------------------------------------------------------
   런처 — 목업 §sh-launcher 충실 재현.
   모바일(<992px): 기존 오프캔버스 드로어 그대로 (Bootstrap 기본 400px 만 320px 로).
   데스크톱(≥992px): 오프캔버스가 아니라 «상단바 아래 팝오버» — 백드롭 없음,
   html.ink-launcher-open(ink-shell.js)이 열림 상태. id 선택자(1,0,0)라
   Bootstrap .offcanvas 기계장치(transform·visibility)를 전부 이긴다.
   -------------------------------------------------------------------------- */
#unifiedMenuOffcanvas {
    width: 320px;
}

@media (min-width: 992px) {
    #unifiedMenuOffcanvas {
        position: fixed;
        top: 60px;
        left: 8px;
        right: auto;
        bottom: auto;
        width: 324px;
        height: auto;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        background: #fff;
        border: 1px solid var(--bs-border-color);
        border-radius: 1rem;
        box-shadow: 0 24px 48px -20px rgba(10, 10, 10, 0.28);
        z-index: 1045;
        transform: translateY(-6px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    }
    html.ink-launcher-open #unifiedMenuOffcanvas {
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    /* 팝오버는 바깥 클릭·ESC 로 닫는다 — 닫기 버튼은 모바일 드로어의 것 */
    #unifiedMenuOffcanvas .btn-close {
        display: none;
    }
    #unifiedMenuOffcanvas .offcanvas-header {
        padding: 0.875rem 1rem 0.25rem;
        border-bottom: 0 !important;
    }
    #unifiedMenuOffcanvas .offcanvas-body {
        padding-top: 0.25rem;
    }
}

/* 그리드 타일 — 목업의 아이콘 타일: 서페이스 사각 타일 + 활성 = 라임 타일 + 굵은 라벨.
   런처 팝오버·모바일 드로어·subnav 주입 그리드가 전부 .unified-menu-grid 라 한 곳에서 통일 */
.unified-menu-item {
    padding: 0.5rem 0.25rem 0.4rem;
}
.unified-menu-icon {
    width: 36px;
    height: 36px;
    border-radius: 0.625rem;
    background: #F4F5F7;
    color: #374151;
    margin-bottom: 0.25rem !important;
}
.unified-menu-item:hover .unified-menu-icon {
    background: #E9EBEE;
}
.unified-menu-item.active {
    background: transparent;
}
.unified-menu-item.active .unified-menu-icon {
    background: var(--doto-ink-accent, #D9F99D);
    color: #1A2E05;
}
.unified-menu-item.active .unified-menu-label {
    font-weight: 600;
    color: #0A0A0A;
}

/* ==========================================================================
   10. P1 전면(full-bleed) 레이아웃 — 목업(도토 잉크 셸 아티팩트) 충실 재현
   「회색 프레임 위에 카드가 뜨는」 구조를 버리고, 작업면 전체가 흰 종이가 되고
   구획은 헤어라인만 긋는다. 서브메뉴는 옅은 서페이스 + 조용한 행.
   ========================================================================== */

/* 작업면 = 흰 종이 (.bg-light 유틸이 !important 라 같은 무기로 상쇄) */
.main-layout {
    background-color: #fff !important;
}

/* 서브메뉴 = 옅은 서페이스 + 우측 헤어라인.
   style.css 가 lg 에서 transparent/border:none !important 로 중립화하므로 되살린다 */
@media (min-width: 992px) {
    .sub-menu {
        /* #FAFAFA → 한 단 진하게(팔레트 surface2) — 2026-08-22 오너 「조금만 더 진하게」.
           행 채움 단계(바탕 > hover #F0F1F3 > active #E8EAED)는 그대로 성립한다. */
        background-color: #F4F5F7 !important;
        border-right: 1px solid var(--bs-border-color) !important;
    }
}

/* 서브메뉴 그룹 — 흰 패널 (2026-08-22 오너 A안).
   개편 초기에 투명 행으로 눌렀더니 그룹이 많은 모듈(ERP 5그룹)에서 경계가 뭉개졌다
   (오너: 「list-group 의 명확한 구분이 사라져 아쉽다」). 옛 카드의 그림자는 빼고
   진해진 바탕(#F4F5F7) 위 «흰 패널 + 헤어라인»의 색차가 울타리를 담당한다. */
.sub-menu .list-group {
    box-shadow: none !important;       /* shadow-sm 유틸 상쇄 */
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.625rem;
    padding: 0.25rem;
    gap: 1px;
}
.sub-menu .list-group-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem !important;
    color: #374151;
}
.sub-menu .list-group-item:hover {
    background: #F0F1F3;
    color: #0A0A0A;
    border-color: transparent;
}
/* active 는 심플하게 — 채움 필 + 굵은 글씨만. 라임 좌측 바는 뺐다(오너: AI 만든 티가 난다).
   라임은 런처 활성 타일과 포커스 링에만 남긴다.
   채움 단계: 바탕 #FAFAFA < hover #F0F1F3 < active #E8EAED (오너 「살짝 진하게」) */
.sub-menu .list-group-item.active {
    background: #E8EAED;
    border-color: transparent;
    color: #0A0A0A;
    font-weight: 600;
}

/* --- 밀도 압축 — 메뉴가 많은 모듈(ERP·이메일)에서 스크롤을 줄인다 (오너 요청) --- */
.sub-menu .offcanvas-header {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.sub-menu .offcanvas-body .p-3.flex-fill {
    padding: 0.625rem !important;          /* p-3 유틸(1rem !important) 압축 */
}
.sub-menu .list-group-item {
    padding: 0.35rem 0.625rem;
    font-size: 13.5px;
}
.sub-menu .list-group.shadow-sm {
    margin-bottom: 0.5rem !important;      /* mb-3 유틸 압축 */
}
/* 스팸함·휴지통(이메일) — 행 안에 «비우기» ⋮ 를 넣느라 p-0 래퍼 + 안쪽 a 에 기본 스킨
   행 패딩(py-2 ps-3)이 하드코딩돼 있다(emails/subnav.php). 압축된 행과 시작선·높이를 맞춘다.
   유틸(!important)을 이겨야 하므로 !important. */
.sub-menu .list-group-item.p-0 > a {
    padding: 0.35rem 0.625rem !important;
}
.sub-menu .list-group-item.p-0 .dropdown > .btn {
    padding: 0.25rem 0.625rem !important;
}
/* active 글자색 — 마크업이 기본 스킨(남색 채움) 전제로 text-white 를 하드코딩.
   잉크 active 는 연회색 필이라 다른 행과 같은 잉크색으로 상쇄한다. */
.sub-menu .list-group-item.p-0.active > a,
.sub-menu .list-group-item.p-0.active .dropdown > .btn {
    color: #0A0A0A !important;
}
.sub-menu .subnav-group-toggle,
.sub-menu p.text-muted.small {
    margin-bottom: 0.125rem !important;
}

/* --- subnav 좌우 여백 균형 ---
   🔴 실측(2026-08-27 오너 지적): 목록 상자의 왼쪽 여백 10px / 오른쪽 21px.
      내부 컨테이너가 .p-3(10px) + overflow-auto 인데 **스크롤바가 10px 자리를 상시 차지**해
      오른쪽만 두 배가 됐다. 오른쪽 패딩을 0 으로 두고 그 10px 을 scrollbar-gutter 로 «항상»
      확보한다 — 스크롤 유무와 무관하게 좌우가 10px 로 같아지고, 페이지를 옮길 때 목록이
      스크롤바 등장 때문에 움찔거리지도 않는다.
   .p-3 는 부트스트랩 유틸(자체 !important)이라 padding-right 무력화에 !important 가 필요하다.
   gutter 미지원 브라우저(구 Safari)는 아래 @supports 로 기존 동작(10px 패딩)을 남긴다. */
.sub-menu .p-3.flex-fill.overflow-auto {
    scrollbar-gutter: stable;
    padding-right: 0 !important;
}
@supports not (scrollbar-gutter: stable) {
    .sub-menu .p-3.flex-fill.overflow-auto {
        padding-right: 0.625rem !important;
    }
}

/* --- subnav 링크 기본 — 잉크 링크의 밑줄이 메뉴에선 소음이다 --- */
.sub-menu a {
    text-decoration: none;
}

/* --- .subnav-split (주 항목 + 우측 보조 컨트롤 한 행) 구조 복구 ---
   전용 CSS 가 어디에도 없어 보조 아이콘(a.subnav-split-aside)이 라벨 «아랫줄»로
   떨어지고 있었다(찌그러짐의 원인 — 잉크 이전부터). flex 한 행으로 바로잡는다 */
.sub-menu .subnav-split {
    display: flex;
    align-items: center;
    padding: 0;
}
.sub-menu .subnav-split-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.35rem 0.25rem 0.35rem 0.625rem;
    color: inherit;
    border-radius: 0.5rem 0 0 0.5rem;
}
.sub-menu .subnav-split-main:hover {
    background: #F0F1F3;
    color: #0A0A0A;
}
.sub-menu .subnav-split-main.active {
    font-weight: 600;
    color: #0A0A0A;
}
.sub-menu .subnav-split:has(.subnav-split-main.active) {
    background: #E8EAED;
}
.sub-menu .subnav-split-aside {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: #9CA3AF;
    margin-right: 0.25rem;
}
.sub-menu .subnav-split-aside:hover {
    background: #E9EBEE;
    color: #0A0A0A;
}
.sub-menu .subnav-split-aside.active {
    background: #D9F99D;
    color: #1A2E05;
}

/* 🔴 좌우 대칭 — 작업면 프레임은 «벽에 붙는다» (2026-08-27 오너 지시).
   2026-08-26 에는 여기에 +0.5rem 을 줘서 「마지막 열이 종이 끝에 닿는」 문제를 풀었는데,
   그러면 full-bleed 가 그만큼 덜 터져 **프레임까지 8px 물러섰다** — 왼쪽은 벽에 붙는데
   오른쪽만 떠서 좌우가 어긋난 상태였다(오너 지적: 이메일 받은편지함).
   실측 73화면: 67곳이 「좌0 우8」, 5곳은 아예 안 붙어 우24, 게시판만 우0
   (그 화면은 main-content 에 `px-3` 유틸이 붙어 우연히 상쇄돼 있었다 — 목표 모습의 선례).

   🔑 두 요구는 층이 다르므로 양립한다: **프레임은 0 으로 붙이고, 글자는 컨테이너 «안쪽»
      padding 이 띄운다.** 8px 을 걷은 뒤 실측한 글자 여백은 13~552px 로 안전했다.
      유일한 예외가 급여대장(4px)이라 그 표에만 마지막 열 여백을 따로 준다(§10.3).

   🔴 왼쪽은 여전히 건드리지 않는다 — 페이지 제목과 목록 첫 글자의 정렬이
      «padding-left == 컨테이너 내부 padding» 이라는 등식에 걸려 있다. */
.main-content {
    padding-right: var(--doto-content-padding-x);
}

/* 작업면 컨테이너를 페이지에 붙인다 — 좌우 패딩만큼 터뜨리고(radius·그림자·측면 보더 제거)
   위쪽 헤어라인 한 줄만 남긴다. 대상은 «화면을 가득 채우는 워크스페이스»뿐:
   마스터-디테일 컨테이너와, main-content 직계의 full-height 카드 관례.
   (대시보드 위젯·설정 카드처럼 «타일»인 카드는 그대로 카드로 둔다) */
/* 🔴 overflow-* 를 조건에 넣지 않는다 — 스크롤을 카드가 직접 받는 화면(메신저 설정=overflow-auto),
   아예 안 거는 화면(은행거래·법인카드·내 평가·문의 작성)이 조건에서 빠져 «저 페이지만 바깥 카드가
   남는» 상태였다(2026-08-26 오너 지적). 판별자는 flex-fill 하나로 충분하다 —
   화면을 가득 채우는 카드가 곧 작업면이고, 타일 카드는 flex-fill 을 쓰지 않는다. */
.main-content > .master-detail-container,
.main-content > .card.flex-fill,
.main-content > form > .card.flex-fill,
/* h-100 으로 높이를 잡는 래퍼도 같은 물건이다(회계 설정) — 타일 카드는 row > col 안에 있어
   직계 조건에서 저절로 빠지므로 h-100 을 넣어도 「연동 서비스」 카드 그리드는 영향받지 않는다. */
.main-content > .card.h-100,
.main-content > form > .card.h-100 {
    margin-left: calc(-1 * var(--doto-content-padding-x));
    margin-right: calc(-1 * var(--doto-content-padding-x));
    border-radius: 0;
    box-shadow: none !important;
    /* 보더 전량 제거 — 컨테이너 외곽선 없이 종이에 녹인다(오너 지적: 전폭인데 1px 선이 거슬림).
       위쪽 구분은 컬럼 헤더(.master-header)·표 헤더의 자체 선이 담당한다.
       !important — .card.shadow-sm.border-0 복원 규칙(§3)보다 우선해야 한다 */
    border: 0 !important;
}

/* §10.3 급여대장 — 유일하게 «숫자가 벽에 닿는» 표.
   프레임을 0 으로 붙인 뒤 실측한 글자 여백은 73화면 중 이 화면만 4px 이었다
   (금액 「2,845,080」. 다음으로 좁은 프로젝트가 13px, 대부분 17px 이상).
   표 자체가 `width:max-content` + 가로 스크롤이라 마지막 열에 숨을 줘도 레이아웃이 흔들리지 않는다. */
.payroll-ledger-table th:last-child,
.payroll-ledger-table td:last-child {
    padding-right: 1rem;
}

/* 카드가 «아닌» 작업면도 벽에 붙인다 — 칸반 보드 4화면(업무분배·영업 파이프라인 2)·
   달력(일정관리)·세로 목록 골격 3화면(내 근태현황 목록보기·업무일지·팀 업무일지).
   2026-08-27 실측에서 이 다섯만 우24 로 남아 있었다(나머지 67곳은 우8) — §10 의 판별자가
   `.card.flex-fill`·`.master-detail-container` 라 카드가 아닌 골격은 조건에서 빠졌다.

   🔴 위 블록과 «분리»한다 — 저기는 카드 외곽선(radius·shadow·border)을 걷는 선언까지 들어 있는데
      여기 대상은 애초에 카드가 아니다. 여기서는 «좌우로 터뜨리는 음수 마진»만 준다.

   🔴 **조건(클래스 조합)으로 걸지 않고 `ink-bleed` 로 지목한다.** 처음엔 «main-content 직계»면
      작업면일 거라 보고 `.flex-fill.d-flex.flex-column` 을 조건에 넣었는데, 개인메일설정이 반례였다:
      직계는 골격 div 이고 그 «안»에 카드 두 장이 나란히 놓인 화면이라 터뜨리자 **카드가 벽에 붙었다**
      (오너 지적). grep 으로 정확 문자열만 세어 4곳이라 판단한 것도 틀렸다 — `overflow-hidden` 이
      섞인 변형이 47파일에 있었다. → [[reference_direct_child_does_not_mean_workspace]]

   🛑 **칸반 보드와 달력은 여기서 «뺐다»** (2026-08-27 오너 2차 지시). 한 번 넣었다가 실화면에서
      되돌린 것이다 — 판이 아니라 **그 위의 카드가 벽에 붙어 답답해진다**(오너: 「칸반카드가 붙어
      있으니까 너무 답답하다」). 달력도 같은 이유로 격자 끝 칸이 벽에 닿았다.
      🔑 판별 기준이 여기서 갈렸다: **전폭이 이득인 것은 «한 판으로 읽는 표·목록»이고,
      «낱개 카드가 늘어선 화면»은 여백 안에 둔다.** 다시 붙이자는 제안을 하지 말 것. */
.main-content > .ink-bleed {
    margin-left: calc(-1 * var(--doto-content-padding-x));
    margin-right: calc(-1 * var(--doto-content-padding-x));
}

/* 탭 «안쪽»에 카드를 둔 설정 화면 — ERP 설정·역할 관리·회계 설정·연동 서비스(2).
   위 규칙은 main-content 직계만 잡는데, 이 화면들은 tab-content > tab-pane 이 한 겹 끼어 있어
   조건에서 빠졌다(같은 「탭 밑 흰 상자」인데 페이지마다 있고 없고가 갈렸다).
   여기서는 음수 마진을 주지 않는다 — 부모 .tab-content 가 overflow-hidden 이라 터뜨리면 잘린다.
   전폭은 tab-content 쪽에 주고(아래), 카드는 외곽선만 녹인다. */
.main-content > .tab-content > .tab-pane > .card,
.main-content > form > .tab-content > .tab-pane > .card {
    border-radius: 0;
    box-shadow: none !important;
    border: 0 !important;
}
.main-content > .tab-content,
.main-content > form > .tab-content {
    margin-left: calc(-1 * var(--doto-content-padding-x));
    margin-right: calc(-1 * var(--doto-content-padding-x));
}
/* 터뜨린 만큼 본문·푸터에서 되돌려 준다 — 안 하면 글자가 종이 가장자리에 붙는다.
   본문(card-body)은 자체 패딩이 있으므로 좌우만 컨테이너 패딩으로 맞춘다. */
.main-content > .tab-content > .tab-pane > .card > .card-body,
.main-content > form > .tab-content > .tab-pane > .card > .card-body,
.main-content > .tab-content > .tab-pane > .card > .card-footer,
.main-content > form > .tab-content > .tab-pane > .card > .card-footer {
    padding-left: var(--doto-content-padding-x);
    padding-right: var(--doto-content-padding-x);
}
/* 저장 버튼 띠 — 카드 외곽선을 걷어도 «항상 보이는 저장»의 자리는 남겨야 한다.
   위 헤어라인 한 줄로 본문과 가른다(카드 시절 border-top 이 하던 몫). */
.main-content > .tab-content > .tab-pane > .card > .card-footer,
.main-content > form > .tab-content > .tab-pane > .card > .card-footer {
    border-top: var(--bs-border-width) solid var(--bs-border-color) !important;
    background: #fff;
}

/* ==========================================================================
   11. P2 퀵 스위처(ink-palette) — Ctrl+K / 상단바 ⌕. 목업 §sh-palette 이식.
   열림 상태 = html.ink-palette-open (ink-palette.js)
   ========================================================================== */
.ink-palette {
    position: fixed;
    inset: 0;
    z-index: 1090;                      /* 오프캔버스(1045)·모달(1055) 위 */
    background: rgba(10, 10, 10, 0.32);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 9vh 16px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
}
html.ink-palette-open .ink-palette {
    opacity: 1;
    visibility: visible;
}
.ink-pal {
    width: 100%;
    max-width: 540px;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    box-shadow: 0 32px 64px -24px rgba(10, 10, 10, 0.4);
    overflow: hidden;
    transform: translateY(-8px);
    transition: transform 0.15s ease;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}
html.ink-palette-open .ink-pal {
    transform: none;
}
.ink-pal-in {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    color: #9CA3AF;
}
.ink-pal-in input {
    flex: 1;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 15px;
    color: #0A0A0A;
    background: transparent;
}
.ink-pal-in input::placeholder {
    color: #9CA3AF;
}
.ink-pal-list {
    overflow-y: auto;
    padding-bottom: 6px;
}
.ink-pal-g {
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9CA3AF;
    padding: 12px 16px 4px;
    font-weight: 600;
}
.ink-pal-it {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13.5px;
    color: #374151;
}
.ink-pal-it:hover,
.ink-pal-it.on {
    background: #F4F5F7;
    color: #0A0A0A;
}
.ink-pal-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ink-pal-label mark {
    padding: 0;
    background: rgba(217, 249, 157, 0.9);
    border-radius: 2px;
}
.ink-pal-sub {
    flex-shrink: 0;
    font-size: 11.5px;
    color: #9CA3AF;
}
.ink-pal-go {
    flex-shrink: 0;
    font-size: 11px;
    color: #D1D5DB;
    visibility: hidden;
}
.ink-pal-it.on .ink-pal-go {
    visibility: visible;
}
.ink-pal-empty {
    padding: 28px 16px;
    text-align: center;
    color: #9CA3AF;
    font-size: 13px;
}
.ink-pal-foot {
    display: flex;
    gap: 14px;
    padding: 9px 16px;
    border-top: 1px solid var(--bs-border-color);
    font-size: 11px;
    color: #9CA3AF;
    background: #FAFAFA;
    flex-shrink: 0;
}
.ink-pal-foot kbd {
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid #D1D5DB;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #fff;
    color: #6B7280;
    margin-right: 2px;
}

/* ==========================================================================
   12. P3 — 핀 독 «옆에 두기» + 집중 모드 (데스크톱 잉크 전용, ink-shell.js 배선)
   ========================================================================== */
.ink-dock {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 1035;
    display: none;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 55%;
}
/* 핀 버튼·독은 «데스크톱»의 도구지 «넓은 화면»의 도구가 아니다. 992px 이상에만 두면
   모니터 절반에 도토를 띄운 창(1920 의 절반 = 960px)에서 버튼과 독이 함께 사라진다 —
   자료를 옆에 두고 정리할 때가 바로 이 기능을 쓸 때인데 그때 없다 (문의 #411 배떡, 2026-09-08).
   그래서 넓은 화면(≥992) 에 더해, 마우스 데스크톱(hover·fine pointer)이면 576px 부터 보인다.
   폰·태블릿(hover 없음)은 종전 그대로 숨긴다 — 화면 아래 고정 칩이 내용과 손가락을 가린다.
   🔴 header.php 의 #inkPinBtn 에 d-lg-* 를 되돌려 붙이지 말 것 — 노출 조건은 여기 한 곳이다. */
#inkPinBtn { display: none; }
@media (min-width: 992px), (min-width: 576px) and (hover: hover) and (pointer: fine) {
    #inkPinBtn { display: inline-flex; }
    .ink-dock { display: flex; }
    html.ink-focus .ink-dock { display: none; }
}
.ink-dock-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #0A0A0A;
    color: #E5E7EB;
    font-size: 12px;
    border: 0;
    border-radius: 999px;
    padding: 6px 7px 6px 13px;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(10, 10, 10, 0.5);
    max-width: 240px;
}
.ink-dock-chip:hover { background: #1F2937; }
.ink-dock-t {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: #fff;
}
.ink-dock-x {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #D1D5DB;
}
.ink-dock-x:hover { background: rgba(255, 255, 255, 0.3); color: #fff; }

/* 상단바 핀 버튼 — 현재 화면이 핀돼 있으면 라임 점등 (현재 상태 표시 = 라임 허용 범위) */
#inkPinBtn.ink-pinned i {
    color: #1A2E05;
    background: #D9F99D;
    border-radius: 6px;
    padding: 3px;
    margin: -3px;
}

/* 집중 모드 — 상단바·서브메뉴·독을 걷는다. 해제 칩은 우상단 플로팅 */
@media (min-width: 992px) {
    html.ink-focus .mobile-header { display: none; }
    html.ink-focus .main-layout { padding-top: 0; }
    html.ink-focus .sub-menu { margin-left: -250px; }
    html.ink-focus .ink-subnav-expander { display: none !important; }
}
.ink-focus-exit {
    position: fixed;
    top: 10px;
    right: 14px;
    z-index: 1080;
    display: none;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--bs-border-color);
    background: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: #0A0A0A;
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    box-shadow: 0 8px 24px -10px rgba(10, 10, 10, 0.35);
}
.ink-focus-exit kbd {
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid #D1D5DB;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #FAFAFA;
    color: #6B7280;
}
@media (min-width: 992px) {
    html.ink-focus .ink-focus-exit { display: inline-flex; }
}

/* 이메일 서브메뉴의 퀵스탯 3종(안읽음·별표·내게쓴) — .subnav-triple 에 CSS 가 없어
   d-grid 1열로 세로 적층되고 있었다. 가로 3열로 (오너 지적) */
.sub-menu .subnav-triple {
    grid-template-columns: repeat(3, 1fr);
}
.sub-menu .subnav-triple .btn {
    padding: 0.375rem 0.25rem;
}

/* ==========================================================================
   13. P4 — 페이지 «안쪽» 정비 (셸이 아니라 콘텐츠 부품의 일관성)
   P1~P3 이 화면을 감싸는 틀을 바꿨다면, 여기는 그 안에 들어 있는
   상태 표시·탭·목록 행을 하나의 문법으로 모은다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1 상태 뱃지 = 도트 칩
   대상: .badge-soft-*(Spacelab 확장, 약 1,200곳) · .badge-status-*(statusBadge() 69곳)
        · .badge.bg-*-subtle(68곳)
   「연한 색 판」을 걷고 «흰 칩 + 헤어라인 + 색 도트»로. 색은 도트가 지키고
   글자는 잉크로 읽는다 — 목록에서 색 판들이 시선을 뺏던 문제를 없앤다.

   🔴 도트의 색·표시는 «CSS 변수»로 정한다(--ink-dot / --ink-dot-display).
      의미색을 셀렉터로 덮으려 하면 진다: 기본 규칙이 .badge + [class*=] + :not()
      으로 클래스 3개라, .badge.badge-soft-success(2개)는 항상 특이도에서 밀려
      «전부 회색 점»이 된다(실측으로 잡음). 변수는 상속이라 경쟁이 없고,
      예외를 추가할 때 특이도를 다시 계산하지 않아도 된다.

   🔴 .rounded-pill 제외: 알림 건수 카운터가 전부 그 형태다 — 도트를 붙이면 숫자가 밀린다.
   -------------------------------------------------------------------------- */
.badge[class*="badge-soft-"]:not(.rounded-pill),
.badge[class*="badge-status-"]:not(.rounded-pill),
.badge[class*="-subtle"]:not(.rounded-pill) {
    background-color: #fff !important;
    color: #374151 !important;
    border: 1px solid var(--bs-border-color) !important;
    font-weight: 600;
    font-size: 0.7rem;
    padding: 0.3em 0.55em;
    white-space: nowrap;
    vertical-align: baseline;
}

/* 도트 — 색과 표시 여부는 아래 변수 선언이 정한다.
   .has-dot(doto-components §2)도 같은 ::before 라 중복 없이 이 규칙으로 흡수된다 */
.badge[class*="badge-soft-"]:not(.rounded-pill)::before,
.badge[class*="badge-status-"]:not(.rounded-pill)::before,
.badge[class*="-subtle"]:not(.rounded-pill)::before {
    content: "";
    display: var(--ink-dot-display, inline-block);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: 0.08em;
    background: var(--ink-dot, #9CA3AF);
    opacity: 1;
}

/* 아이콘을 이미 단 뱃지(statusBadge 3번째 인자 등)는 도트를 뺀다 — 앞머리에 둘이 겹친다 */
.badge:has(> i) {
    --ink-dot-display: none;
}

/* 의미색 → 도트. 판이 아니라 점이 색을 맡는다 */
.badge.badge-soft-success,
.badge.badge-status-completed,
.badge.bg-success-subtle { --ink-dot: var(--bs-success); }

.badge.badge-soft-danger,
.badge.badge-status-error,
.badge.bg-danger-subtle { --ink-dot: var(--bs-danger); }

.badge.badge-soft-warning,
.badge.badge-status-warning,
.badge.bg-warning-subtle { --ink-dot: var(--bs-warning); }

.badge.badge-soft-info,
.badge.badge-status-active,
.badge.bg-info-subtle { --ink-dot: var(--bs-info); }

.badge.badge-soft-primary,
.badge.bg-primary-subtle { --ink-dot: #0A0A0A; }

.badge.badge-status-draft { --ink-dot: #9CA3AF; }
.badge.badge-status-archived { --ink-dot: #6B7280; }

/* 🔴 회색 계열은 도트를 달지 않는다 — 회색 점은 아무 정보도 주지 않으면서,
   이 클래스가 도토에서 «건수 카운터»로 가장 많이 쓰이기 때문이다(탭 건수 표준이
   badge-soft-secondary 다). 「● 27」처럼 숫자 앞에 점이 붙는 것을 막는다.
   중립이라는 뜻은 흰 칩 자체가 이미 말한다. */
.badge.badge-soft-secondary,
.badge.bg-secondary-subtle,
.badge.badge-soft-light,
.badge.bg-light-subtle { --ink-dot-display: none; }

/* --------------------------------------------------------------------------
   13.2 콘텐츠 전환 탭 통일 — pills 로 된 설정 화면 16곳을 언더라인으로
   도토에는 탭이 두 종류였다: 네모 상자형(.nav-tabs, 24파일)과 알약형(.nav-pills).
   알약형 중 «콘텐츠를 갈아 끼우는» 것만 §4 의 언더라인 문법으로 모은다.
   🔴 제외 2종: .nav-pills-sm = 상태 필터 칩(알약이 맞다) · .flex-column = 메인메뉴 레일
   -------------------------------------------------------------------------- */
.nav-pills:not(.nav-pills-sm):not(.flex-column) {
    --bs-nav-link-color: #6B7280;
    --bs-nav-link-hover-color: #0A0A0A;
    border-bottom: 1px solid var(--bs-border-color);
    gap: 0.125rem;
}
.nav-pills:not(.nav-pills-sm):not(.flex-column) .nav-link {
    border-radius: 0.5rem 0.5rem 0 0;
    font-weight: 500;
    color: #6B7280;
}
.nav-pills:not(.nav-pills-sm):not(.flex-column) .nav-link:hover:not(.active) {
    background-color: #FAFAFA;
    color: #0A0A0A;
}
/* 레이아웃 흔들림 없이 활성 언더라인 — §4 nav-tabs 와 같은 inset box-shadow */
.nav-pills:not(.nav-pills-sm):not(.flex-column) .nav-link.active {
    background-color: transparent;
    color: #0A0A0A;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #0A0A0A;
}

/* --------------------------------------------------------------------------
   13.3 목록의 안읽음 강조 — 색 판 대신 굵은 글씨
   master-detail.css 는 안읽음 행에 rgba(--bs-primary-rgb, .10) 을 깐다. 잉크에서
   primary 가 검정이 되면서 이게 «회색 줄무늬»가 됐다(오너 지적: 메일함이 무겁다).
   마크업이 이미 fw-bold/fw-semibold 를 주고 있으므로 배경은 걷어도 구분이 남는다.
   -------------------------------------------------------------------------- */
.master-list .list-item-row.unread,
.master-list .list-group-item.unread,
.master-row.is-unread {
    background-color: transparent;
}
.master-list .list-item-row.unread:hover,
.master-list .list-group-item.unread:hover,
.master-row.is-unread:hover {
    background-color: #FAFAFA;
}

/* --------------------------------------------------------------------------
   13.3-b 메일함만 예외 — 배경색을 되살린다 (문의 #342, 오너 결정 2026-08-28)
   공용 메일함은 «아무도 안 봄»(배경색)과 «남이 봤고 나는 아직»(굵기)을 한 줄에서
   동시에 말해야 한다. 굵기 하나만 남기면 두 상태가 화면에서 겹쳐 구분이 사라진다.
   되살리는 범위는 메일 목록(#emailList)뿐이라 13.3 이 걷어낸 다른 모듈의 줄무늬는
   그대로 없다.
   -------------------------------------------------------------------------- */
#emailList .list-item-row.unread,
#emailList .list-group-item.unread {
    background-color: rgba(10, 10, 10, 0.05);
}
#emailList .list-item-row.unread:hover,
#emailList .list-group-item.unread:hover {
    background-color: rgba(10, 10, 10, 0.08);
}
/* 안읽음은 제목이 검정 + 굵게로 말한다 (읽은 것은 잉크2 톤으로 물러난다) */
.master-list .list-item-row.unread .col-subject,
.master-list .list-item-row.unread .col-sender,
.master-row.is-unread .mr-title {
    color: #0A0A0A;
}

/* (13.4 밀도 토글은 2026-08-21 오너 지시로 기능째 제거) */

/* ==========================================================================
   14. P4 — subnav 3단 위계 (ERP 처럼 그룹·보조 링크가 많은 모듈에서 특히)
   오너 지적: 「ERP subnav가 정신없다. 잔량/매트릭스/분석은 폰트를 줄여야 하고
   좌측 카테고리 이름과 너무 붙는다. 위계가 안 잡혀 있다.」

   실측한 원인(subnav 폭 250px):
     그룹 라벨 「판매관리」 = 14px/400/회색   ← «분류»인데
     보조 버튼 「잔량|매트릭스|분석」 = 14px/400/잉크 + 테두리, 폭 149px(60%!), 라벨과 간격 4px
   같은 크기인데 보조 쪽이 색도 진하고 테두리까지 있어 «분류명보다 부가 링크가 먼저 읽혔다».

   바로잡는 순서(작을수록 약하게):
     1단 분류(그룹 라벨) 11.5px 회색 → 2단 항목 13.5px 잉크(활성 굵게) → 3단 보조 11px 연회색
   -------------------------------------------------------------------------- */

/* --- 1단: 분류 라벨 — 작고 조용하되 «구분표»임이 자간으로 읽히게 --- */
.sub-menu .subnav-group-toggle,
.sub-menu p.text-muted.small {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #9CA3AF;
}
.sub-menu .subnav-group-toggle:hover {
    color: #6B7280;
}
/* 접기 화살표도 라벨에 맞춰 줄인다 — 지금은 글자보다 커서 라벨이 화살표에 딸려 보인다 */
.sub-menu .subnav-chevron {
    font-size: 13px;
    opacity: 0.8;
}

/* 그룹 사이 경계 — 라벨 «위»에 숨 쉴 자리를 주면 묶음이 눈으로 갈린다.
   :first-child 제외로 첫 그룹은 위로 뜨지 않게 (자리 낭비 방지) */
.sub-menu .offcanvas-body .p-3 > .d-flex.justify-content-between:not(:first-child),
.sub-menu .offcanvas-body .p-3 > button.subnav-group-toggle:not(:first-child),
.sub-menu .offcanvas-body .p-3 > p.text-muted.small:not(:first-child) {
    margin-top: 0.625rem;
}

/* --- 3단: 보조 링크(잔량·매트릭스·분석) — 「눌리는 칩」 ---
   btn-group 의 붙임 처리(음수 마진·모서리 각지게)를 풀어 낱개 칩으로 되돌린다.
   🔴 .btn-group-sm 으로 한정 — 그룹 라벨 옆 보조 칩(headerAside)만 이 문법이다.
   subnav «상단 액션»도 btn-group(w-100)이라 넓게 잡으면 이메일 「새 메일」 같은
   그룹버튼이 회색 11px 칩으로 부서진다(2026-08-21 오너 제보로 좁힘).

   🔴 2026-08-27: 배경 없는 회색 글씨였던 것을 «옅은 채움 칩»으로 되돌린다.
      실측 11px/높이 17px/테두리 0/색 #9CA3AF — 바로 왼쪽 그룹 제목이 같은 회색 작은
      글씨라 «제목이 네 개 있는 것»으로 보였고, 누를 수 있다는 신호가 호버에만 있었다
      (오너: 「버튼처럼 안 보인다」). 잉크는 선보다 면으로 가르므로 테두리가 아니라 채움. */
.sub-menu .btn-group-sm {
    gap: 2px;
    margin-left: 0.375rem;      /* 라벨과 최소 간격 — 실측 4px 이 너무 붙었다 */
    flex-shrink: 0;
}
.sub-menu .btn-group-sm > .btn {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    /* 🔴 !important — 마크업이 `py-0 px-2`(부트스트랩 유틸, 자체 !important)를 달고 있어
       평범한 padding 은 진다. 실측: 없으면 높이가 15px 에서 안 올라간다. */
    padding: 0.2rem 0.3rem !important;    /* 세로: 높이 15px → 22px (누를 자리)
                                             가로: 좁게 — 영어에서 칩 3개(Open/Matrix/Analysis)가
                                             「Purchasing」과 한 줄에 들어가야 한다(실측 여유 2px) */
    border: 0;
    /* 🔴 !important 둘 다 필수 — 부트스트랩의 btn-group 붙임 규칙
       (`.btn-group > .btn:not(:last-child) { border-radius-right: 0 }`,
        `.btn-group > .btn:not(:first-child) { margin-left: -1px }`)이
       평범한 선언을 이긴다. 실측: 앞 두 칩의 오른쪽 모서리가 0px, 마진이 -1px 이라
       **평소엔 배경이 옅어 안 보이다가 호버로 배경이 진해지는 순간 «붙은 세그먼트»의
       각진 이음매가 드러났다**(2026-08-27 오너 지적). 이 셋은 같은 축의 상태 전환이
       아니라 각각 다른 화면으로 가는 링크라 낱개 칩이 맞는 문법이다. */
    border-radius: 0.5rem !important;
    margin-left: 0 !important;
    color: #4B5563;
    background: #F0F1F3;
}
.sub-menu .btn-group-sm > .btn:hover {
    background: #E0E2E6;
    color: #0A0A0A;
}
/* 지금 보고 있는 보조 화면 — 항목 active(§10)와 같은 채움 문법 */
.sub-menu .btn-group-sm > .btn.active {
    background: #E8EAED;
    color: #0A0A0A;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   14.2 subnav 하단 «설정 링크» — 텍스트 줄에서 «행»으로
   실측: 12px/400, 행 높이 18px(주 메뉴 항목 33px 의 절반), 호버 피드백 없음.
   글자만 있고 누를 자리가 없어서 «링크인지 설명인지» 구분이 안 됐다.
   크기는 그대로 두고(위계 유지) 행 형태만 주 메뉴와 같은 문법으로 맞춘다.
   -------------------------------------------------------------------------- */
.sub-menu .border-top a.small.d-block,
.sub-menu .border-top button.subnav-locked {
    display: flex !important;      /* d-block(!important) 상쇄 — 아이콘·라벨 한 행 정렬 */
    align-items: center;
    /* 좌측 1rem — 아이콘 시작선을 주 메뉴 항목과 같은 26px 에 세운다(2026-08-26 오너 B안).
       종전 0.5rem 이면 아이콘이 18px 에서 시작해, 주 메뉴 아이콘(26px)·주 메뉴 글자(47px)
       어느 줄기와도 안 맞는 «세 번째 줄»이 생겼다(실측: 설정 링크 글자 36.4px). */
    padding: 0.3rem 0.5rem 0.3rem 1rem;
    margin-bottom: 1px !important; /* mb-1 압축 */
    border-radius: 0.5rem;
    color: #6B7280;
    text-align: left;
    width: 100%;
}
.sub-menu .border-top a.small.d-block i,
.sub-menu .border-top button.subnav-locked i {
    /* 크기·간격도 주 메뉴와 같게 — 그래야 아이콘 «뒤»의 글자 줄기까지 함께 맞는다.
       글자 크기(12px)와 색(연회색)은 그대로 두어 «덜 중요한 링크»라는 위계는 유지한다.
       width 고정 = 글리프 폭이 제각각이어도 글자 시작선이 흔들리지 않게. */
    font-size: 13.5px;
    width: 13.5px;
    text-align: center;
    margin-right: 0.5rem !important;
    color: #9CA3AF;
    flex-shrink: 0;
}
.sub-menu .border-top a.small.d-block:hover,
.sub-menu .border-top button.subnav-locked:hover {
    background: #F0F1F3;
    color: #0A0A0A;
}
.sub-menu .border-top a.small.d-block:hover i {
    color: #374151;
}
/* 지금 보고 있는 설정 화면 — 주 메뉴 항목 active(§10)와 같은 채움 */
.sub-menu .border-top a.small.d-block.fw-semibold {
    background: #E8EAED;
    color: #0A0A0A;
}
.sub-menu .border-top a.small.d-block.fw-semibold i {
    color: #374151;
}
/* 구분선 — 설정 묶음은 «본 메뉴가 끝난 뒤»라는 것만 알리면 된다. 여백으로 충분히 갈린다 */
.sub-menu .border-top {
    border-top-color: var(--bs-border-color) !important;
    margin-top: 0.75rem !important;
    padding-top: 0.5rem !important;
}

/* ==========================================================================
   15. P4 — 뱃지 체계 4종 (오너: 「페이지마다 뱃지 표시 원칙이 다르면 안 된다」)

   실측으로 드러난 문제(실화면 12곳·964개 수집): 용도가 넷인데 표기가 하나였다.
   「상품」(분류)·「재고 없음」(경고)·「NEW」(강조)·「진행중」(상태)이 전부 같은 알약.

   확정 규칙 — «모양이 곧 종류»:
     ① 상태  = 흰 칩 + 헤어라인 + 색 «점»   (§13.1. 6 시맨틱 고정)
     ② 건수  = 알약(rounded-pill). 숫자 전용 — 다른 종류는 알약을 쓰지 않는다
     ③ 분류  = 색 없는 회색 칩(점 없음)     — 분류에는 좋고 나쁨이 없으니 색이 소음이다
     ④ 강조  = 잉크 채움, 가장 작게          — NEW·시험·최신. «한 가지 색만»
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1 건수 = 알약. 「처리해야 할 것」과 「그냥 개수」를 가른다.
   지금은 primary(103곳)·secondary·danger 가 전부 «연한 색 판»이라 무게가 같아
   개수까지 급해 보였다. 처리 필요만 채우고 나머지는 물린다.
   🔴 .filter-chip(251곳) 제외 — 알약이지만 «누르는 필터»라 다른 부품이다.
   -------------------------------------------------------------------------- */
.badge.rounded-pill:not(.filter-chip) {
    font-size: 10.5px;
    font-weight: 700;
    padding: 0.2em 0.5em;
    min-width: 1.5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* 처리해야 할 것 — 채움. 목록에서 이 숫자만 눈에 걸리면 된다 */
.badge.rounded-pill:not(.filter-chip).badge-soft-danger,
.badge.rounded-pill:not(.filter-chip).bg-danger {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.badge.rounded-pill:not(.filter-chip).badge-soft-warning {
    background-color: var(--bs-warning) !important;
    color: #1F2937 !important;
    border-color: transparent !important;
}

/* 그냥 개수 — 헤어라인 + 회색. 「몇 개인지」만 알리고 물러난다 */
.badge.rounded-pill:not(.filter-chip).badge-soft-primary,
.badge.rounded-pill:not(.filter-chip).badge-soft-secondary,
.badge.rounded-pill:not(.filter-chip).badge-soft-info,
.badge.rounded-pill:not(.filter-chip).badge-soft-success {
    background-color: #fff !important;
    color: #6B7280 !important;
    border: 1px solid var(--bs-border-color) !important;
}
/* 알림 종 옆 카운터는 채움 유지 — 여기가 물러나면 알림을 놓친다 */
.notification-badge.rounded-pill {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* --------------------------------------------------------------------------
   15.2 분류(Tag) = 색 없는 회색 칩. `badge-soft-secondary` 가 사실상 이 자리라
   §13.1 에서 이미 «도트 없는 흰 칩»이 됐다. 새 마크업은 .badge-tag 로 쓴다
   (뜻이 이름에 남아야 다음 사람이 색을 고르지 않는다).
   -------------------------------------------------------------------------- */
.badge.badge-tag {
    background-color: #fff !important;
    color: #6B7280 !important;
    border: 1px solid var(--bs-border-color) !important;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 0.3em 0.55em;
    --ink-dot-display: none;
}

/* --------------------------------------------------------------------------
   15.3 강조(Highlight) = NEW·시험·최신. 색이 아니라 «잉크 채움»으로 눈에 띈다.
   지금은 시험=warning · 최신=success · 새 기능=primary 로 제각각이라, 강조끼리도
   서로 다른 뜻처럼 보였다. 한 가지 표기로 모은다.
   -------------------------------------------------------------------------- */
.badge.badge-highlight {
    /* 알약은 «건수»의 모양이다 — subnav 처럼 마크업이 rounded-pill 을 고정으로 붙이는
       자리에서도 강조는 각진 칩으로 되돌린다(모양이 곧 종류). */
    border-radius: 0.375rem !important;
    min-width: 0 !important;
    background-color: #0A0A0A !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 600;
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    padding: 0.25em 0.5em;
    --ink-dot-display: none;
}

/* ==========================================================================
   16. 디자인 재손질 1 — 메인 대시보드 (2026-08-21 오너 지시)
   - 배경: 연회색 + 도트 그레인 — 흰 카드가 배경에서 «떠» 보이게. §8이 걷어낸
     텍스처를 전면이 아니라 대시보드에만, 잉크 톤으로 되살린 것.
   - 바닥 숨통: 데스크톱(≥1200) 잠금 그리드가 100% 높이를 꽉 채워 위젯 보더가
     브라우저 바닥에 정확히 붙었다(실측 0px). 스크롤 모드(<1200)도 동일 여백.
   ========================================================================== */
.dashboard-content-area {
    background-color: #F6F6F4;
    background-image: radial-gradient(circle, rgba(10, 10, 10, 0.07) 1px, transparent 1.2px);
    background-size: 20px 20px;
}

/* 좌우(16px)와 짝 맞춘 바닥 여백 — ≥1200에선 그리드가 그만큼 줄어 바닥에서 뜬다 */
.dashboard-main {
    padding-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   16.1b 얇은 스크롤바 — Windows 크롬의 굵은 기본 스크롤바가 잉크 화면을 가른다
   (2026-08-21 오너 「우측 끝에 항상 스크롤바」 제보 계기). 트랙은 투명, 썸만 연회색.
   데스크톱 포인터 환경에만 — 터치 스크롤은 브라우저 기본이 낫다.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    * {
        scrollbar-width: thin;                     /* Firefox·Chrome 121+ */
        scrollbar-color: #D1D5DB transparent;
    }
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    *::-webkit-scrollbar-track {
        background: transparent;
    }
    *::-webkit-scrollbar-thumb {
        background: #D1D5DB;
        border-radius: 4px;
    }
    *::-webkit-scrollbar-thumb:hover {
        background: #9CA3AF;
    }
}

/* --------------------------------------------------------------------------
   16.2 상단바 브랜드 — 데스크톱은 페이지 제목 대신 회사 로고+이름 (2026-08-21 오너 지시)
   페이지 제목은 content-header h2 가 담당(중복 제거). 마크업·폴백은 header.php,
   데이터는 primaryCompanyBrand()(대표 사업장). 모바일은 종전대로 제목.
   -------------------------------------------------------------------------- */
/* 브랜드는 «대시보드로 가는 문»이라 누를 수 있다는 신호가 필요하다 — 평소엔 글자 그대로,
   호버에서만 옅은 판이 깔린다(2026-08-27). 클릭 영역은 로고+이름 폭까지만(부모 div 가 flex-fill). */
a.ink-brand {
    padding: 0.25rem 0.5rem;
    margin-left: -0.25rem;
    border-radius: 0.5rem;
    color: inherit;
    transition: background-color 0.12s ease;
}
a.ink-brand:hover,
a.ink-brand:focus-visible {
    background-color: rgba(10, 10, 10, 0.05);
}

.ink-brand-logo {
    height: 22px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}
.ink-brand-name {
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    color: #0A0A0A;
}

/* --------------------------------------------------------------------------
   16.3 상단바 도구 버튼 — 도토AI·도움말을 «쪽지»에서 정식 버튼으로 (2026-08-26 오너 지시)

   기본 스킨의 두 버튼은 화면 오른쪽 가장자리에 반쯤 걸친 쪽지 모양이다
   (position:fixed · right:0 · translateX(6px) · 왼쪽만 둥근 모서리).
   원래는 본문이 오른쪽 16px 을 비워 줘서 아슬아슬하게 안 겹쳤는데(전자결재 실측:
   셀 오른쪽 끝 1407px · 버튼 시작 1408px), 잉크가 §10 에서 작업면을 그 16px 까지
   터뜨리면서 셀이 1423px 까지 와 «버튼이 날짜 위에 15px 올라앉았다».
   모바일 430px 은 여백이 3px 이라 더 심했다.

   여백을 도로 넓히는 대신 버튼을 상단바로 올린다 — 겹칠 자리가 아예 없어진다.
   자리(#inkAiSlot·#inkHelpSlot)는 header.php 가 비워 두고, 버튼은 각 위젯의 JS 가
   넣는다(도토AI 는 HR·급여·미사용 테넌트에서, 도움말은 도움말 없는 화면에서 안 만든다).
   -------------------------------------------------------------------------- */

/* 자리는 레이아웃에 끼어들지 않는다 — 버튼이 상단바 flex 의 직계 항목이 되게 한다.
   비어 있을 때 폭 0 을 따로 챙길 필요도 없어진다. */
.ink-tool-slot {
    display: contents;
}

/* 🔴 크기·정렬·hover 는 .topbar-icon-btn (style.css) 이 맡는다 — 여기서 다시 정하면
   상단바가 또 두 문법으로 갈린다. 실제로 그렇게 갈려서 이 두 버튼만 세로로 2px
   내려앉아 있었다 (2026-08-31 실측). 여기는 잉크 고유의 상태색만 남긴다. */
.ink-tool-btn {
    color: #374151;
}
.ink-tool-btn:hover,
.ink-tool-btn:focus-visible {
    color: #0A0A0A;
}
/* 패널이 열려 있는 동안은 «지금 이걸 보고 있다»를 상단바에서도 알린다 —
   서브메뉴 항목 active(§10)와 같은 채움 문법 */
.ink-tool-btn.is-open {
    background: #E8EAED;
    border-radius: 0.5rem;
    color: #0A0A0A;
}

/* --------------------------------------------------------------------------
   17. 오류 화면 (404·500) — pixel-squirrel.css 의 옛 스킨 잔재를 평평하게
   (2026-09-06 — 독립 골격 화면 잉크 전환)

   pixel-squirrel.css 는 잉크 이전에 쓰여 «회색 그라디언트 판 + 부트스트랩 기본 회색
   글자»를 리터럴로 박아 뒀다. 잉크는 면을 그라디언트로 칠하지 않는다(§1 서페이스 2단).

   🔴 큰 숫자(404·500)의 갈색 #b97a57 은 «건드리지 않는다» — 그건 옛 스킨 색이 아니라
      옆에 선 픽셀 다람쥐의 몸 색이다. 잉크가 바꾸는 것은 셸과 크롬이지 마스코트가 아니다.
      (같은 이유로 doto-dark.css 도 이 갈색만은 어둠용으로 «옮겼을» 뿐 지우지 않았다.)
   🔴 다크는 doto-dark.css 가 뒤에서 자기 판을 다시 깐다 — 여기 값은 밝은 축 전용이다.
   -------------------------------------------------------------------------- */
.error-page {
    background: #FAFAFA;
}
.error-page .error-message {
    color: #1F2937;
}
.error-page .error-description {
    color: #6B7280;
}

/* --------------------------------------------------------------------------
   18. 확인 다이얼로그 (SweetAlert2) — 잉크가 버튼색을 «갖는다»
   (2026-09-06 — 독립 골격 화면 잉크 전환)

   종전에는 호출부마다 confirmButtonColor 로 색을 박았고, 그 값이 옛 스킨 파랑(#446e9b)·
   설치 화면 보라(#667eea)·부트스트랩 파랑(#0d6efd) 세 갈래로 흩어져 있었다. 잉크 화면
   한가운데에서 그 버튼 하나만 다른 시대의 색으로 떠 있었다.

   🔴 색을 CSS 로 옮긴 이유는 «다크»다. 인라인으로 박힌 색은 테마를 모른다 — 호출부에서
      잉크 검정을 박으면 어두운 다이얼로그(#1A1E24) 위에서 버튼이 통째로 사라진다.
      SweetAlert2 v11 이 노출하는 변수로 옮기면 doto-dark.css 가 뒤에서 뒤집을 수 있다.
   🔴 의미색은 여전히 호출부가 갖는다 — 삭제의 빨강(#dc3545)·경고의 노랑(#ffc107)은
      크롬이 아니라 «뜻»이라 스킨이 건드리지 않는다. 호출부가 넘긴 값은 인라인이라
      아래 변수를 이긴다(그래서 그 자리는 지금도 빨갛다).
   -------------------------------------------------------------------------- */
:root {
    --swal2-confirm-button-background-color: #0A0A0A;
    --swal2-confirm-button-color: #FFFFFF;
    --swal2-deny-button-background-color: #374151;
    --swal2-deny-button-color: #FFFFFF;
    /* 취소는 잉크의 보조 버튼(흰 면 + 헤어라인)과 같은 무게로 — 되돌리는 쪽이
       실행하는 쪽보다 무거워 보이면 안 된다 */
    --swal2-cancel-button-background-color: #FFFFFF;
    --swal2-cancel-button-color: #0A0A0A;
    /* 버튼 라운드 10px = land3 스케일 (§1) */
    --swal2-confirm-button-border-radius: 10px;
    --swal2-deny-button-border-radius: 10px;
    --swal2-cancel-button-border-radius: 10px;
}
/* 취소 버튼의 헤어라인 — SweetAlert 은 border 변수를 주지 않아 box-shadow 로 그린다 */
.swal2-cancel {
    box-shadow: inset 0 0 0 1px #D1D5DB;
}
/* 라임은 «지금 여기» 전용 — 포커스 링 한 곳 (§1) */
.swal2-confirm:focus-visible,
.swal2-deny:focus-visible,
.swal2-cancel:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(217, 249, 157, 0.5);
}