/* ╔═══════════════════════════════════════════════════════════════╗
   ║                   DAOL PMS — custom.css                       ║
   ║  목차                                                          ║
   ║  0. THEME VARIABLES — CSS 변수 정의 (white/blue/black)        ║
   ║  1. GRID   — ax5grid 헤더 / 바디 줄무늬 / 합계 행             ║
   ║  2. FORM   — form-control, select, 달력                       ║
   ║  3. BUTTON — 커스텀 버튼 시스템 전체                           ║
   ║  4. UI     — 테마 선택기                                       ║
   ║  5. THEME-BLUE  — 사이드바 / 툴바 / 트리 오버라이드            ║
   ║  6. THEME-WHITE — 구조 배경 오버라이드                         ║
   ║  7. THEME-BLACK — 구조 배경 오버라이드                         ║
   ║                                                               ║
   ║  규칙: 모든 CSS는 이 파일에만 정의. JSP <style> 블록 추가 금지 ║
   ╚═══════════════════════════════════════════════════════════════╝ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0. THEME VARIABLES
   :root = theme-white 기본값 (쿠키 없을 때 / body 클래스 없을 때 적용)
   body.theme-blue / body.theme-black 으로 각 변수 오버라이드
   Fixed 버튼(danger/warning/purple/loading/tool-btn)은 변수 미사용
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
    /* ── Grid ────────────────────────────────────────── */
    --color-grid-header:                #dddfe4;
    --color-grid-header-hover:          #cdd0d6;
    --color-grid-row-odd:               #f7f8f9;
    --color-grid-row-even:              #ffffff;
    --color-grid-footsum:               #d4d7db;

    /* ── Button: Primary (저장/신규 주요 액션) ────────── */
    --color-btn-primary:                #4a5568;
    --color-btn-primary-hover:          #606876;
    --color-btn-primary-active:         #363d4a;
    --color-btn-primary-shadow:         #2d3341;

    /* ── Button: Default (흰색 보조 버튼) ────────────── */
    --color-btn-default-bg:             #ffffff;
    --color-btn-default-text:           #1e2532;
    --color-btn-default-border:         #d0d5df;
    --color-btn-default-hover:          #f4f5f7;
    --color-btn-default-active:         #eaecef;

    /* ── Button: Secondary ───────────────────────────── */
    --color-btn-secondary-bg:           #ffffff;
    --color-btn-secondary-text:         #4a5568;
    --color-btn-secondary-border:       #d0d5df;
    --color-btn-secondary-hover:        #f4f5f7;

    /* ── Button: Page (page-buttons / fn1 / Custom / white — 동일 그룹) */
    --color-btn-page:                   #5b8db8;
    --color-btn-page-hover:             #6fa3cc;
    --color-btn-page-active:            #4a7a9b;
    --color-btn-page-shadow:            #3a6a8b;

    /* ── Button: Nav (join-button 하단 내비게이션) ───── */
    --color-btn-nav:                    #6b7a8e;
    --color-btn-nav-hover:              #7b8a9e;
    --color-btn-nav-active:             #5a6878;
    --color-btn-nav-shadow:             #4a5868;

    /* ── Button: Success (cashiering 지불 패널) ──────── */
    --color-btn-success:                #5a6878;
    --color-btn-success-hover:          #6b7a8e;
    --color-btn-success-active:         #4a5868;
    --color-btn-success-shadow:         #3a4858;

    /* ── Button: Info (탭 액션 스카이블루) ────────────── */
    --color-btn-info:                   #5b8db8;
    --color-btn-info-hover:             #6fa3cc;
    --color-btn-info-active:            #4a7a9b;
    --color-btn-info-shadow:            #3a6a8b;

    /* ── Button: Steel (CustomPrimary 소형 폼 버튼) ──── */
    --color-btn-steel:                  #4a607a;
    --color-btn-steel-hover:            #5a728c;
    --color-btn-steel-active:           #3a5068;
    --color-btn-steel-shadow:           #3a5068;

    /* ── Button: Animated Filter ─────────────────────── */
    --color-btn-filter-from:            #6b7a8e;
    --color-btn-filter-to:              #5a6878;
    --color-btn-filter-border:          #4a5868;
    --color-btn-filter-blob:            #8a9aac;
    --color-btn-filter-highlight:       #8a9aac;
    --color-btn-filter-text-shadow:     #3a4858;
    --color-btn-filter-hover-border:    #7a8a9e;
    --color-btn-filter-disabled-from:   #b0b6c2;
    --color-btn-filter-disabled-to:     #7a8090;
    --color-btn-filter-disabled-border: #8a8f9c;
    --color-btn-filter-active-border:   #b0bcc8;

    /* ── Button: fn2 (인디고 계열 — axboot 원본 색상 기준) ───── */
    --color-btn-fn2:                     #626090;
    --color-btn-fn2-hover:               #737099;
    --color-btn-fn2-active:              #4f4d79;
    --color-btn-fn2-shadow:              #3e3d68;

    /* ── Form ────────────────────────────────────────── */
    --color-form-focus-border:          #90a4ae;
    --color-form-focus-glow:            rgba(144, 164, 174, 0.25);
    --color-form-disabled-bg:           #e8eaed;
    --color-codeval-bg:                 #4a5878;
    --color-calendar-selected:          #6b7a8e;
}

/* ── theme-white: :root 기본값 그대로 사용 (별도 변수 선언 불필요) ── */
body.theme-white {
    background-color: #f4f5f7 !important;
}

body.theme-blue {
    background-color: #f0f2ff !important;

    --color-grid-header:                #4f5b93;
    --color-grid-header-hover:          #44ADF9;
    --color-grid-row-odd:               #f4f5ff;
    --color-grid-row-even:              #ffffff;
    --color-grid-footsum:               #e4e7ff;

    --color-btn-primary:                #36322F;
    --color-btn-primary-hover:          #4a4542;
    --color-btn-primary-active:         #2A2724;
    --color-btn-primary-shadow:         #171310;

    --color-btn-default-bg:             #FFFFFF;
    --color-btn-default-text:           #1a1614;
    --color-btn-default-border:         #E0E0E0;
    --color-btn-default-hover:          #F8F8F8;
    --color-btn-default-active:         #EFEFEF;

    --color-btn-secondary-bg:           #FFFFFF;
    --color-btn-secondary-text:         #36322F;
    --color-btn-secondary-border:       #E0E0E0;
    --color-btn-secondary-hover:        #F8F8F8;

    --color-btn-page:                   #2C7BE5;
    --color-btn-page-hover:             #3D8DF5;
    --color-btn-page-active:            #1A68D1;
    --color-btn-page-shadow:            #1A68D1;

    --color-btn-nav:                    #4a5698;
    --color-btn-nav-hover:              #5a65a8;
    --color-btn-nav-active:             #363f7a;
    --color-btn-nav-shadow:             #363f7a;

    --color-btn-success:                #363f7a;
    --color-btn-success-hover:          #4a5698;
    --color-btn-success-active:         #2a3060;
    --color-btn-success-shadow:         #1e2550;

    --color-btn-info:                   #44ADF9;
    --color-btn-info-hover:             #2a9ef5;
    --color-btn-info-active:            #1397f7;
    --color-btn-info-shadow:            #0d7ed4;

    --color-btn-steel:                  #1e3a5f;
    --color-btn-steel-hover:            #2a4f7c;
    --color-btn-steel-active:           #122540;
    --color-btn-steel-shadow:           #122540;

    --color-btn-filter-from:            #5a65a8;
    --color-btn-filter-to:              #404b8c;
    --color-btn-filter-border:          #363f7a;
    --color-btn-filter-blob:            #7e8ee9;
    --color-btn-filter-highlight:       #7a85c4;
    --color-btn-filter-text-shadow:     #2a3070;
    --color-btn-filter-hover-border:    #6878d4;
    --color-btn-filter-disabled-from:   #a0a8cc;
    --color-btn-filter-disabled-to:     #7880aa;
    --color-btn-filter-disabled-border: #888fba;
    --color-btn-filter-active-border:   #c5cef0;

    --color-btn-fn2:                     #5a5f98;
    --color-btn-fn2-hover:               #6b70ab;
    --color-btn-fn2-active:              #484d86;
    --color-btn-fn2-shadow:              #383d76;

    --color-form-focus-border:          #7b9fd4;
    --color-form-focus-glow:            rgba(123, 159, 212, 0.25);
    --color-form-disabled-bg:           #e5e8f2;
    --color-codeval-bg:                 #3f4f8a;
    --color-calendar-selected:          #6675b8;
}

body.theme-black {
    --color-grid-header:                #464d5b;
    --color-grid-header-hover:          #535a6a;
    --color-grid-row-odd:               #f2f3f5;
    --color-grid-row-even:              #ffffff;
    --color-grid-footsum:               #d0d3d9;

    --color-btn-primary:                #2d3a4a;
    --color-btn-primary-hover:          #3d4f62;
    --color-btn-primary-active:         #1e2838;
    --color-btn-primary-shadow:         #141d28;

    --color-btn-default-bg:             #2d3a4a;
    --color-btn-default-text:           #ffffff;
    --color-btn-default-border:         #3d4a5a;
    --color-btn-default-hover:          #3d4f62;
    --color-btn-default-active:         #1e2838;

    --color-btn-secondary-bg:           #2d3a4a;
    --color-btn-secondary-text:         #c8d0de;
    --color-btn-secondary-border:       #3d4a5a;
    --color-btn-secondary-hover:        #3d4f62;

    --color-btn-page:                   #1e4a7a;
    --color-btn-page-hover:             #2a5f98;
    --color-btn-page-active:            #163a5f;
    --color-btn-page-shadow:            #0f2d4a;

    --color-btn-nav:                    #1e2d4a;
    --color-btn-nav-hover:              #2a3d60;
    --color-btn-nav-active:             #141e33;
    --color-btn-nav-shadow:             #0f1828;

    --color-btn-success:                #1e2d4a;
    --color-btn-success-hover:          #2a3d60;
    --color-btn-success-active:         #141e33;
    --color-btn-success-shadow:         #0f1828;

    --color-btn-info:                   #1e5aa8;
    --color-btn-info-hover:             #2570cc;
    --color-btn-info-active:            #174890;
    --color-btn-info-shadow:            #0f3470;

    --color-btn-steel:                  #1a2d48;
    --color-btn-steel-hover:            #243d5f;
    --color-btn-steel-active:           #101f34;
    --color-btn-steel-shadow:           #0c1828;

    --color-btn-filter-from:            #3d4450;
    --color-btn-filter-to:              #333c48;
    --color-btn-filter-border:          #2f3844;
    --color-btn-filter-blob:            #6e7a8c;
    --color-btn-filter-highlight:       #4e5566;
    --color-btn-filter-text-shadow:     #1a2030;
    --color-btn-filter-hover-border:    #8a96a8;
    --color-btn-filter-disabled-from:   #4a5060;
    --color-btn-filter-disabled-to:     #3a4050;
    --color-btn-filter-disabled-border: #454c5a;
    --color-btn-filter-active-border:   #a0aab8;

    --color-btn-fn2:                     #484c7a;
    --color-btn-fn2-hover:               #585c8a;
    --color-btn-fn2-active:              #383c6a;
    --color-btn-fn2-shadow:              #2a2e58;

    --color-form-focus-border:          #90a4ae;
    --color-form-focus-glow:            rgba(144, 164, 174, 0.25);
    --color-form-disabled-bg:           #e8eaed;
    --color-codeval-bg:                 #4a5878;
    --color-calendar-selected:          #6b7a8e;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. GRID
   전역 적용: 모든 [data-ax5grid] 컴포넌트
   색상 계열: 헤더 인디고 / 바디 줄무늬 라벤더블루 / 합계 진한 라벤더
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1-1. 헤더 배경 ──────────────────────────────────────────── */
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] {
    background-color: var(--color-grid-header) !important;
    background-image: none !important;
    color: #fff !important;
    border-bottom: 1px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr.tr-0,
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr.tr-1,
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr.tr-2,
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr.tr-3 {
    background: transparent !important;
}

/* ── 1-2. 헤더 hover ─────────────────────────────────────────── */
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr.hover {
    background: var(--color-grid-header-hover) !important;
}
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td:hover {
    background-color: var(--color-grid-header-hover) !important;
    background-image: none !important;
}

/* ── 1-3. 헤더 셀 ────────────────────────────────────────────── */
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td {
    color: #fff !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td.hasBorder {
    border-right: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-bottom: 0 none !important;
}
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr:not(:last-child) td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
}
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td [data-ax5grid-cellHolder] {
    font-weight: 600 !important;
    color: #fff !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    top: -1px !important;
}

/* ── 1-4. 헤더 정렬 화살표 ───────────────────────────────────── */
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-column-sort]:before {
    border-bottom-color: #fff !important;
}
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-column-sort]:after {
    border-top-color: #fff !important;
}
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-column-sort][data-ax5grid-column-sort-order="asc"]:before {
    border-bottom-color: #fff !important;
}
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-column-sort][data-ax5grid-column-sort-order="desc"]:after {
    border-top-color: #fff !important;
}

/* ── 1-5. 바디 행 줄무늬 ─────────────────────────────────────── */
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel] table tr.tr-0,
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel] table tr.tr-2 {
    background: var(--color-grid-row-odd) !important;
}
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel] table tr.tr-1,
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel] table tr.tr-3 {
    background: var(--color-grid-row-even) !important;
}

/* ── 1-6. 합계 행 (footSum / Total) ─────────────────────────── */
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel][data-ax5grid-panel="bottom-left-body"] table tr,
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel][data-ax5grid-panel="bottom-body"] table tr,
[data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel][data-ax5grid-panel="bottom-right-body"] table tr {
    background: var(--color-grid-footsum) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. FORM
   input / select / textarea / bootstrap-select / ax:select / 달력
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 2-1. Focus 상태 ─────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--color-form-focus-border) !important;
    box-shadow: 0 0 0 2px var(--color-form-focus-glow) !important;
}

/* ── 2-2. Disabled / Readonly 배경색 ────────────────────────── */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--color-form-disabled-bg) !important;
    background-image: none !important;
}
.bootstrap-select.disabled > .btn.btn-select,
.bootstrap-select > .btn.btn-select[disabled],
fieldset[disabled] .bootstrap-select > .btn.btn-select {
    background-color: var(--color-form-disabled-bg) !important;
    background-image: none !important;
    opacity: 1 !important;
}


/* ── 2-4. ax:select 코드값 박스 (codeVal) ────────────────────── */
input.codeVal {
    background-color: var(--color-codeval-bg) !important;
}

/* ── 2-4. 달력 선택 날짜 (ax5-ui-calendar) ───────────────────── */
.ax5-ui-calendar .calendar-body table tbody td .calendar-item-day.selected-day,
.ax5-ui-calendar .calendar-body table tbody th .calendar-item-day.selected-day {
    background-color: var(--color-calendar-selected) !important;
    background-image: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. BUTTON
   ─────────────────────────────────────────────────────────────────
   구성
   3-1.  Base / Size / Disabled   (.custom-btn, .btn-small 등)
   3-2.  [THEMED]  btn-default / primary / secondary
   3-3.  [FIXED]   btn-danger / btn-warning
   3-4.  [FIXED]   btn-purple  (체크인, 고객통합)
   3-5.  [THEMED]  btn-success  (cashiering 지불 패널)
   3-6.  [THEMED]  btn-info     (Folio / Transaction / Posting 탭)
   3-7.  [THEMED]  btn-fn1      (모달 내 공통 찾기 버튼)
   3-8.  [THEMED]  btn-CustomPrimary (폼 내 소형 인라인 액션)
   3-9.  [THEMED]  btn-Custom / btn-white
   3-10. [THEMED]  [data-page-buttons] 전역
   3-11. [THEMED]  Join Buttons (.join-button — 하단 풋터)
   3-12. [THEMED]  btn-animated-filter (퀵필터 + 소형 변형)
   3-13. [FIXED]   btn-loading  (로딩 스피너 상태)
   3-14. [FIXED]   tool-btn     (프레임 헤더 툴 버튼)
   3-15. [THEMED]  btn-fn2      (예상금액 버튼 — posting-modal)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 3-1. Base / Size / Disabled ─────────────────────────────── */
.custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    outline: none;
    text-decoration: none;
    font-family: inherit;
    gap: 8px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.btn-small  { height: 36px; padding: 0 8px;  border-radius: 5px; font-size: 12px; }
.btn-medium { height: 44px; padding: 0 16px; border-radius: 6px; font-size: 16px; text-transform: uppercase; }
.btn-large  { height: 56px; padding: 0 24px; border-radius: 7px; font-size: 18px; }
.btn-full   { width: 100%; }
.custom-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none !important;
}

/* ── 3-2. [THEMED] Variants ──────────────────────────────────── */

/* Default */
.btn-default {
    background:       var(--color-btn-default-bg)                              !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            var(--color-btn-default-text)                            !important;
    border:           1px solid var(--color-btn-default-border)                !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-default-border) !important;
    text-shadow:      none                                                      !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn-default:hover:not([disabled]):not(.disabled):not(.focus):not(:focus) {
    background:       var(--color-btn-default-hover)                           !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    box-shadow:       inset 0px -2.5px 0px 0px var(--color-btn-default-border) !important;
}
.btn-default:active:not([disabled]):not(.disabled) {
    background:       var(--color-btn-default-active)                          !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    box-shadow:       inset 0px -1.5px 0px 0px var(--color-btn-default-border) !important;
}
.btn-default[disabled], .btn-default.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}

/* Primary */
.btn-primary {
    background:       var(--color-btn-primary)                                 !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-primary-shadow) !important;
    text-shadow:      none                                                      !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn-primary:hover:not([disabled]):not(.disabled):not(.focus):not(:focus) {
    background:       var(--color-btn-primary-hover)                           !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    box-shadow:       inset 0px -2.5px 0px 0px var(--color-btn-primary-shadow) !important;
}
.btn-primary:active:not([disabled]):not(.disabled) {
    background:       var(--color-btn-primary-active)                          !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    box-shadow:       inset 0px -1.5px 0px 0px var(--color-btn-primary-shadow) !important;
}
.btn-primary[disabled], .btn-primary.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}

/* Secondary */
.btn-secondary {
    background-color: var(--color-btn-secondary-bg);
    color:            var(--color-btn-secondary-text);
    border:           1px solid var(--color-btn-secondary-border);
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-secondary-border);
}
.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-btn-secondary-hover);
}

/* ── 3-3. [FIXED] Danger / Warning ──────────────────────────── */
.btn-danger {
    background:       #E6492D !important; background-image: none !important; filter: none !important;
    color:            #ffffff !important; border: none !important;
    box-shadow:       inset 0px -2.1px 0px 0px #D63A1F !important;
    text-shadow:      none    !important;
    -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;
}
.btn-danger:hover:not([disabled]):not(.disabled):not(.focus):not(:focus) {
    background: #F05B41 !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -2.5px 0px 0px #D63A1F !important;
}
.btn-danger:active:not([disabled]):not(.disabled) {
    background: #D63A1F !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -1px 0px 0px #b82e16 !important;
}
.btn-danger[disabled], .btn-danger.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}

.btn-warning {
    background:       #E6492D !important; background-image: none !important; filter: none !important;
    color:            #ffffff !important; border: none !important;
    box-shadow:       inset 0px -2.1px 0px 0px #D63A1F !important;
    text-shadow:      none    !important;
    -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;
}
.btn-warning:hover:not([disabled]):not(.disabled):not(.focus):not(:focus) {
    background: #F05B41 !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -2.5px 0px 0px #D63A1F !important;
}
.btn-warning:active:not([disabled]):not(.disabled) {
    background: #D63A1F !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -1.5px 0px 0px #b82e16 !important;
}
.btn-warning[disabled], .btn-warning.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}

/* ── 3-4. [FIXED] btn-purple (체크인/통합/회원복원) ─────────── */
.btn-purple {
    background:       #a855f7 !important; background-image: none !important; filter: none !important;
    color:            #ffffff !important; border: none !important; border-radius: 5px !important;
    box-shadow:       inset 0px -2.1px 0px 0px #7e22ce !important;
    text-shadow:      none !important; font-weight: 400 !important; cursor: pointer !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;
}
.btn-purple:hover:not([disabled]):not(.disabled) {
    background: #c084fc !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -2.1px 0px 0px #7e22ce !important;
}
.btn-purple:active:not([disabled]):not(.disabled) {
    background: #9333ea !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -1px 0px 0px #6b21a8 !important;
}
.btn-purple[disabled], .btn-purple.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; box-shadow: none !important;
}

/* ── 3-5. [THEMED] btn-success (cashiering 지불 패널) ────────── */
.btn-success {
    background:       var(--color-btn-success)                                  !important;
    background-image: none                                                       !important;
    filter:           none                                                       !important;
    color:            #ffffff                                                    !important;
    border:           none                                                       !important;
    border-radius:    4px                                                        !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-success-shadow)  !important;
    text-shadow:      none                                                       !important;
    font-weight:      400                                                        !important;
    cursor:           pointer                                                    !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                    !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn-success:hover:not([disabled]):not(.disabled) {
    background:       var(--color-btn-success-hover)                            !important;
    background-image: none                                                       !important;
    filter:           none                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-success-shadow)  !important;
}
.btn-success:active:not([disabled]):not(.disabled) {
    background:       var(--color-btn-success-active)                           !important;
    background-image: none                                                       !important;
    filter:           none                                                       !important;
    box-shadow:       inset 0px -1px 0px 0px var(--color-btn-success-shadow)    !important;
}
.btn-success[disabled], .btn-success.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}

/* ── 3-6. [THEMED] btn-info (탭 액션 스카이블루) ─────────────── */
.btn-info {
    background:       var(--color-btn-info)                                    !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    border-radius:    4px                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-info-shadow)    !important;
    text-shadow:      none                                                      !important;
    font-weight:      400                                                       !important;
    cursor:           pointer                                                   !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                   !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn-info:hover:not([disabled]):not(.disabled) {
    background:       var(--color-btn-info-hover)                              !important;
    background-image: none !important; filter: none !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-info-shadow)    !important;
}
.btn-info:active:not([disabled]):not(.disabled) {
    background:       var(--color-btn-info-active)                             !important;
    background-image: none !important; filter: none !important;
    box-shadow:       inset 0px -1px 0px 0px var(--color-btn-info-shadow)      !important;
}
.btn-info[disabled], .btn-info.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}

/* ── 3-7. [THEMED] btn-fn1 (모달 내 공통 찾기 버튼) ──────────── */
.btn.btn-fn1 {
    background:       var(--color-btn-page)                                    !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    border-radius:    5px                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-page-shadow)    !important;
    text-shadow:      none                                                      !important;
    font-weight:      400                                                       !important;
    cursor:           pointer                                                   !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                   !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn.btn-fn1:hover:not([disabled]):not(.disabled) {
    background: var(--color-btn-page-hover) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -2.1px 0px 0px var(--color-btn-page-shadow) !important;
}
.btn.btn-fn1:active:not([disabled]):not(.disabled) {
    background: var(--color-btn-page-active) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -1px 0px 0px var(--color-btn-page-shadow) !important;
}
.btn.btn-fn1[disabled], .btn.btn-fn1.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; box-shadow: none !important;
}

/* ── 3-8. [THEMED] btn-CustomPrimary (폼 내 소형 인라인 액션) ── */
.btn-CustomPrimary {
    background:       var(--color-btn-steel)                                   !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    border-radius:    4px                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-steel-shadow)   !important;
    text-shadow:      none                                                      !important;
    font-size:        11px                                                      !important;
    font-weight:      400                                                       !important;
    cursor:           pointer                                                   !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                   !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn-CustomPrimary:hover:not([disabled]):not(.disabled) {
    background: var(--color-btn-steel-hover) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -2.1px 0px 0px var(--color-btn-steel-shadow) !important;
}
.btn-CustomPrimary:active:not([disabled]):not(.disabled) {
    background: var(--color-btn-steel-active) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -1px 0px 0px var(--color-btn-steel-shadow) !important;
}
.btn-CustomPrimary[disabled], .btn-CustomPrimary.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}

/* ── 3-9. [THEMED] btn-Custom / btn-white ────────────────────── */
.btn-Custom {
    background:       var(--color-btn-page)                                    !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    border-radius:    4px                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-page-shadow)    !important;
    text-shadow:      none                                                      !important;
    font-size:        13px                                                      !important;
    font-weight:      600                                                       !important;
    cursor:           pointer                                                   !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                   !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn-Custom:hover:not([disabled]):not(.disabled) {
    background: var(--color-btn-page-hover) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -2.1px 0px 0px var(--color-btn-page-shadow) !important;
}
.btn-Custom:active:not([disabled]):not(.disabled) {
    background: var(--color-btn-page-active) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -1px 0px 0px var(--color-btn-page-shadow) !important;
}
.btn-Custom[disabled], .btn-Custom.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}


.btn.btn-white {
    background:       var(--color-btn-page)                                    !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    border-radius:    5px                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-page-shadow)    !important;
    text-shadow:      none                                                      !important;
    font-weight:      400                                                       !important;
    cursor:           pointer                                                   !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                   !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn.btn-white:hover:not([disabled]):not(.disabled) {
    background: var(--color-btn-page-hover) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -2.1px 0px 0px var(--color-btn-page-shadow) !important;
}
.btn.btn-white:active:not([disabled]):not(.disabled) {
    background: var(--color-btn-page-active) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -1px 0px 0px var(--color-btn-page-shadow) !important;
}
.btn.btn-white[disabled], .btn.btn-white.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; box-shadow: none !important;
}

/* ── 3-10. [THEMED] [data-page-buttons] 전역 ────────────────── */
[data-page-buttons] .btn {
    display:          inline-flex;          /* !important 제거 — 닫기 버튼 style="display:none" 유지 위해 */
    align-items:      center                                                    !important;
    justify-content:  center                                                    !important;
    height:           30px                                                      !important;
    background:       var(--color-btn-page)                                    !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    border-radius:    5px                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-page-shadow)    !important;
    text-shadow:      none                                                      !important;
    font-weight:      400                                                       !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                   !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
[data-page-buttons] .btn:hover:not([disabled]):not(.disabled),
[data-page-buttons] .btn.btn-default:hover:not([disabled]):not(.disabled),
[data-page-buttons] .btn.btn-warning:hover:not([disabled]):not(.disabled) {
    background:       var(--color-btn-page-hover)                              !important;
    background-image: none !important; filter: none !important; color: #ffffff  !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-page-shadow)    !important;
}
[data-page-buttons] .btn:active:not([disabled]):not(.disabled) {
    background:       var(--color-btn-page-active)                             !important;
    background-image: none !important; filter: none !important;
    box-shadow:       inset 0px -1px 0px 0px var(--color-btn-page-shadow)      !important;
}
[data-page-buttons] .btn[disabled], [data-page-buttons] .btn.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}
[data-page-buttons] .btn .badge-light {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* ── 3-11. [THEMED] Join Buttons (.join-button) ──────────────── */
.ax-body #ax-base-root .ax-base-footer .join-button .btn,
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn {
    display:          inline-flex                                               !important;
    align-items:      center                                                    !important;
    justify-content:  center                                                    !important;
    height:           28px                                                      !important;
    padding:          0 5px                                                     !important;
    font-size:        12px                                                      !important;
    background:       var(--color-btn-nav)                                     !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    border-radius:    5px                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-nav-shadow)     !important;
    text-shadow:      none                                                      !important;
    font-weight:      400                                                       !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                   !important;
    overflow:         hidden                                                    !important;
}
.ax-body #ax-base-root .ax-base-footer .join-button .btn > div,
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn > div {
    display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important;
}
.ax-body #ax-base-root .ax-base-footer .join-button .btn > div > div:first-child,
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn > div > div:first-child {
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.ax-body #ax-base-root .ax-base-footer .join-button .btn > div > div:last-child,
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn > div > div:last-child {
    flex-shrink: 0 !important; width: auto !important;
}
.ax-body #ax-base-root .ax-base-footer .join-button .btn:hover:not([disabled]):not(.disabled),
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn:hover:not([disabled]):not(.disabled) {
    background:       var(--color-btn-nav-hover)                               !important;
    background-image: none !important; filter: none !important; color: #ffffff  !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-nav-shadow)     !important;
}
.ax-body #ax-base-root .ax-base-footer .join-button .btn:active:not([disabled]):not(.disabled),
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn:active:not([disabled]):not(.disabled) {
    background:       var(--color-btn-nav-active)                              !important;
    background-image: none !important; filter: none !important;
    box-shadow:       inset 0px -1px 0px 0px var(--color-btn-nav-shadow)       !important;
}
.ax-body #ax-base-root .ax-base-footer .join-button .btn[disabled],
.ax-body #ax-base-root .ax-base-footer .join-button .btn.disabled,
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn[disabled],
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important;
}
.ax-body #ax-base-root .ax-base-footer .join-button .btn .badge-light,
.ax-body #ax-modal-base-root .ax-base-footer .join-button .btn .badge-light {
    background-color: rgba(255, 255, 255, 0.22) !important; color: #ffffff !important;
}

/* ── 3-12. [THEMED] btn-animated-filter ─────────────────────── */
.btn-animated-filter {
    position:      relative                                                          !important;
    display:       block                                                             !important;
    overflow:      hidden                                                            !important;
    width:         97%;
    height:        65px                                                              !important;
    min-height:    65px                                                              !important;
    padding:       0                                                                 !important;
    margin-top:    2px;
    margin-right:  3%;
    font-size:     12px                                                              !important;
    font-weight:   600                                                               !important;
    background:    linear-gradient(to bottom, var(--color-btn-filter-from) 0%, var(--color-btn-filter-to) 100%) !important;
    border-radius: 4px                                                               !important;
    border:        1px solid var(--color-btn-filter-border)                          !important;
    color:         #fff                                                              !important;
    cursor:        pointer;
    white-space:   normal                                                            !important;
    -webkit-box-sizing: border-box                                                   !important;
    box-sizing:    border-box                                                        !important;
    transition:    border-color 0.3s ease;
    -webkit-box-shadow: inset 0px 1px 0px 0px var(--color-btn-filter-highlight)      !important;
    box-shadow:    inset 0px 1px 0px 0px var(--color-btn-filter-highlight)           !important;
    outline:       0;
}
.btn-animated-filter .btn-anim-blob {
    position:         absolute !important; display: block !important;
    width:            16px     !important; height: 16px   !important;
    border-radius:    2px;
    background:       var(--color-btn-filter-blob);
    bottom:           -8px    !important; left: -8px       !important;
    transform:        rotate(-40deg) scale(0);
    transform-origin: center;
    transition:       transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events:   none;
    z-index:          0;
}
.btn-animated-filter:not([disabled]):hover .btn-anim-blob {
    transform: rotate(-40deg) scale(20);
}
.btn-animated-filter .btn-anim-inner {
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    display: -webkit-box !important; display: -webkit-flex !important;
    display: -ms-flexbox !important; display: flex !important;
    -webkit-box-align: center !important; -webkit-align-items: center !important;
    -ms-flex-align: center    !important; align-items: center         !important;
    -webkit-box-pack: center  !important; -webkit-justify-content: center !important;
    -ms-flex-pack: center     !important; justify-content: center         !important;
    padding: 0 4px; z-index: 1;
}
.btn-animated-filter .btn-anim-text {
    display:           block  !important; position: static !important;
    -webkit-transform: none   !important; transform: none  !important;
    width:             100%;
    color:             #fff   !important; text-align: center; line-height: 1.3; word-break: keep-all;
    text-shadow:       1px 1px 0px var(--color-btn-filter-text-shadow);
}
.btn-animated-filter:not([disabled]):hover .btn-anim-text { text-shadow: none; }
.btn-animated-filter:not([disabled]):hover {
    border-color: var(--color-btn-filter-hover-border) !important;
}
.btn-animated-filter[disabled] {
    cursor:       not-allowed !important;
    background:   linear-gradient(to bottom, var(--color-btn-filter-disabled-from) 0%, var(--color-btn-filter-disabled-to) 100%) !important;
    border-color: var(--color-btn-filter-disabled-border) !important;
    box-shadow:   none !important; opacity: 0.7;
}
.btn-animated-filter[disabled] .btn-anim-text { text-shadow: none; }
.btn-animated-filter-sm {
    height: 48px !important; min-height: 48px !important; width: 100% !important;
    margin-top: 0 !important; margin-right: 0 !important;
}
.btn-animated-filter.active {
    border-color: var(--color-btn-filter-hover-border) !important;
}
.btn-animated-filter.active .btn-anim-blob {
    transform: rotate(-40deg) scale(20);
}
.btn-animated-filter.active .btn-anim-text {
    text-shadow: none;
}

/* ── 3-13. [FIXED] btn-loading ───────────────────────────────── */
@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.btn-loading {
    cursor: not-allowed !important; pointer-events: none !important; position: relative !important;
}
.btn-loading::before {
    content: "" !important; display: inline-block !important;
    width: 14px !important; height: 14px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-top: 2px solid #ffffff !important;
    border-radius: 50% !important;
    animation: btn-spin 0.7s linear infinite !important;
    margin-right: 6px !important; vertical-align: middle !important;
    flex-shrink: 0 !important; opacity: 1 !important;
}
.btn-loading > * { opacity: 0.7 !important; }

/* ── 3-14. [FIXED] tool-btn ──────────────────────────────────── */
.tool-btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    background:      #788694;
    border-radius:   6px;
    box-shadow:      none;
    cursor:          pointer;
    text-decoration: none;
    flex-shrink:     0;
    overflow:        visible;
    outline:         none;
    transition:      width         0.5s cubic-bezier(0.4, 0, 0.2, 1),
                     border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                     box-shadow    0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-btn:hover, .tool-btn:focus, .tool-btn:active { outline: none; }
.tool-btn:hover { width: 80px; border-radius: 15px; box-shadow: none; }
body.lang-en .tool-btn:hover { width: 130px; }
body.lang-ja .tool-btn:hover { width: 110px; }

.tool-btn__bg {
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(45deg, var(--gf), var(--gt)); opacity: 0; transition: opacity 0.5s;
}
.tool-btn:hover .tool-btn__bg { opacity: 1; }

.tool-btn__glow {
    position: absolute; top: 8px; left: 0; right: 0; height: 100%;
    border-radius: inherit; background: linear-gradient(45deg, var(--gf), var(--gt));
    filter: blur(10px); opacity: 0; z-index: -1; pointer-events: none; transition: opacity 0.5s;
}
.tool-btn:hover .tool-btn__glow { opacity: 0.55; }

.tool-btn__icon {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-btn__icon img {
    width: 22px; height: 22px; object-fit: contain; border-radius: 0;
    filter: contrast(1.15) saturate(1.2) drop-shadow(0 0 1px rgba(0,0,0,0.4));
}
#remoteIcon, #screenSave { width: 28px !important; height: auto !important; }
#telIcon                  { width: 22px !important; height: 22px !important; }
.tool-btn:hover .tool-btn__icon { transform: scale(0); }

.tool-btn__title {
    position: absolute; z-index: 1; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #ffffff; font-size: 11px; font-weight: 600; white-space: nowrap;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
    pointer-events: none;
}
.tool-btn:hover .tool-btn__title { transform: translate(-50%, -50%) scale(1); }

/* ── 3-15. [THEMED] btn-fn2 (예상금액 버튼 — posting-modal) ───── */
.btn.btn-fn2 {
    background:       var(--color-btn-fn2)                                     !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            #ffffff                                                   !important;
    border:           none                                                      !important;
    border-radius:    5px                                                       !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-fn2-shadow)     !important;
    text-shadow:      none                                                      !important;
    font-weight:      400                                                       !important;
    padding-top:      0                                                         !important;
    margin-left:      5px                                                       !important;
    cursor:           pointer                                                   !important;
    transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1)                   !important;
    -webkit-font-smoothing: antialiased  !important;
    -moz-osx-font-smoothing: grayscale   !important;
}
.btn.btn-fn2:hover:not([disabled]):not(.disabled) {
    background: var(--color-btn-fn2-hover) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -2.1px 0px 0px var(--color-btn-fn2-shadow) !important;
}
.btn.btn-fn2:active:not([disabled]):not(.disabled) {
    background: var(--color-btn-fn2-active) !important; background-image: none !important; filter: none !important;
    box-shadow: inset 0px -1px 0px 0px var(--color-btn-fn2-shadow) !important;
}
.btn.btn-fn2[disabled], .btn.btn-fn2.disabled {
    opacity: 0.5 !important; cursor: not-allowed !important; box-shadow: none !important;
}

/* ── 3-N. 요일 토글 버튼 선택/비선택 (calendar-mgmt 등) ─────── */
/* 비선택: btn-primary → 밝은 비활성 스타일 */
[data-week-btn].btn-primary {
    background:       var(--color-btn-default-bg)                              !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
    color:            var(--color-btn-default-text)                            !important;
    border:           1px solid var(--color-btn-default-border)                !important;
    box-shadow:       inset 0px -2.1px 0px 0px var(--color-btn-default-border) !important;
    opacity:          0.75                                                      !important;
}
[data-week-btn].btn-primary:hover:not([disabled]):not(.disabled) {
    background:       var(--color-btn-default-hover)                           !important;
    background-image: none                                                      !important;
    filter:           none                                                      !important;
}
/* 선택: btn-success → 기존 스타일 유지, opacity 완전 복원 */
[data-week-btn].btn-success {
    opacity: 1 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. UI COMPONENTS
   테마 선택기 — frame.tag 헤더 툴 영역 (btnLang 좌측)
   Bootstrap dropdown 구조, role="menuitem" 제거로 언어핸들러 충돌 방지
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#themeSelector {
    background-color: #788694;
    color:            #ffffff;
    font-size:        12px;
    min-width:        90px;
    text-align:       left;
}
.theme-dropdown-menu,
body.theme-black .theme-dropdown-menu {
    background-color: #ffffff !important;
}
.theme-dropdown-menu li > button,
body.theme-black .theme-dropdown-menu li > button {
    padding:          10px 16px;
    font-size:        13px;
    line-height:      1.6;
    background-color: #ffffff !important;
    color:            #333333 !important;
}
.theme-dropdown-menu li > button:hover,
body.theme-black .theme-dropdown-menu li > button:hover {
    background-color: #f5f5f5 !important;
    color:            #333333 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. THEME-BLUE — 사이드바 / 툴바 / 트리 오버라이드
   white(:root)와 다른 blue 전용 색상만 여기서 재정의
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 5-1. 헤더 툴바 / 풋터 배경 ─────────────────────────────── */
body.theme-blue .ax-frame-header-tool,
body.theme-blue .ax-frame-foot {
    background:       #4a5878 !important;
    background-image: none    !important;
    filter:           none    !important;
    color:            #ffffff !important;
}
body.theme-blue .ax-frame-foot .ax-split-panel {
    color: #ffffff !important;
}
body.theme-blue #frameSaleDateInfo { color: #ffffff; background-color: #4a5878; text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.4); }

/* ── 5-2. 사이드바 전체 배경 ─────────────────────────────────── */
body.theme-blue .ax-frame-aside {
    background-color: #3a4a62 !important;
}

/* ── 5-3. 카테고리 라벨 (시스템관리, API서비스 등) ─────────────── */
body.theme-blue .aside-menu-item.aside-menu-item-label {
    color:            #ffffff !important;
    font-size:        12px    !important;
    font-weight:      600     !important;
    letter-spacing:   0.5px   !important;
    border-bottom:    1px solid rgba(255,255,255,0.12) !important;
    background-color: #2e3e56 !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ── 5-4. 카테고리 라벨 hover / 열림 상태 ────────────────────── */
body.theme-blue .aside-menu-item.aside-menu-item-label:hover,
body.theme-blue .aside-menu-item.aside-menu-item-label.opend {
    background-color: #4a5e7a !important;
    border-color:     #44ADF9 !important;
    color:            #ffffff !important;
}

/* ── 5-5. 트리 영역 배경 ─────────────────────────────────────── */
body.theme-blue .aside-menu-item.aside-menu-item-tree-body .tree-holder {
    background-color: #3a4a62 !important;
}

/* ── 5-6. 트리 메뉴 아이템 텍스트 ───────────────────────────── */
body.theme-blue .ax-frame-aside .ztree li a {
    color:       #ffffff !important;
    font-size:   12px    !important;
    font-weight: 400     !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ── 5-7. 트리 메뉴 hover ────────────────────────────────────── */
body.theme-blue .ax-frame-aside .ztree li a:hover {
    color:           #44ADF9 !important;
    text-decoration: none    !important;
}

/* ── 5-8. 트리 메뉴 선택(활성) 상태 ─────────────────────────── */
body.theme-blue .ax-frame-aside .ztree li a.curSelectedNode {
    background-color: rgba(68, 173, 249, 0.22) !important;
    border-radius:    3px                       !important;
    color:            #44ADF9                   !important;
    font-weight:      600                       !important;
}

/* ── 5-9. tool-btn / 언어버튼 / 테마셀렉터 ───────────────────── */
body.theme-blue .tool-btn             { background: #4a5878 !important; }
body.theme-blue #btnLang              { background-color: #4a5878 !important; color: #ffffff !important; }
body.theme-blue #themeSelector { background-color: #4a5878 !important; color: #ffffff !important; }

/* dashboard / roomAvailable-list — 토/일 헤더 */
body.theme-blue .grid-header-red  { background: #8b3040 !important; color: #ffd0da !important; }
body.theme-blue .grid-header-blue { background: #2a5aa8 !important; color: #c8dff8 !important; }

/* ── 5-11. ax:tab-layout 탭 ──────────────────────────────────── */
body.theme-blue [data-ax5layout]>[data-tab-panel-label-holder] {
    background: #f0f4ff !important; background-image: none !important;
    border: none !important;
}
body.theme-blue [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label] [data-tab-label] {
    background: var(--color-grid-header) !important; background-image: none !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.3) !important; border-right: 1px solid rgba(255,255,255,0.3) !important;
    border-bottom: 1px solid rgba(255,255,255,0.3) !important; border-left: none !important;
}
body.theme-blue [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label] [data-tab-label]:hover {
    background: var(--color-grid-header-hover) !important; background-image: none !important; color: #ffffff !important;
}
body.theme-blue [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label][data-tab-active="true"] [data-tab-label] {
    background: var(--color-grid-header-hover) !important; background-image: none !important; color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.3) !important; border-right: 1px solid rgba(255,255,255,0.3) !important;
    border-bottom: 1px solid #f0f4ff !important; border-left: none !important;
}
body.theme-blue [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label-border] {
    background: #f0f4ff !important; border: none !important;
    border-top: 2px solid #4a5878 !important;
}
body.theme-blue [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-aside] {
    border: none !important;
}

/* ── 5-10. roomRack 층 필터 버튼 (f_slide) ───────────────────── */
body.theme-blue .f_slide_wrap {
    background:  #e8ebff !important;
    border-color: #8a96d8 !important;
}
body.theme-blue .f_slide_h {
    background:    #4a5698        !important;
    background-image: none        !important;
    filter:        none           !important;
    color:         #ffffff        !important;
    border-color:  #3a4588        !important;
    text-shadow:   none           !important;
    font-weight:   600            !important;
    transition:    background 0.15s ease !important;
}
body.theme-blue .f_slide_h:hover {
    background: #5a67ac !important;
}
body.theme-blue .f_slide_content {
    background:    #eef0ff        !important;
    background-image: none        !important;
    filter:        none           !important;
    color:         #3a4878        !important;
    border-color:  #b0b8e0        !important;
    text-shadow:   none           !important;
    font-weight:   600            !important;
    transition:    background 0.15s ease, color 0.15s ease !important;
}
body.theme-blue .f_slide_content:hover {
    background: #d8dcf8 !important;
    color:      #2a3868 !important;
}
body.theme-blue .f_slide_select {
    background:    #2C7BE5        !important;
    background-image: none        !important;
    filter:        none           !important;
    color:         #ffffff        !important;
    text-shadow:   none           !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. THEME-WHITE — 구조 배경 오버라이드
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 헤더 툴바 / 풋터 */
body.theme-white .ax-frame-header-tool { background: #788694 !important; background-image: none !important; filter: none !important; }
body.theme-white .ax-frame-foot        { background: #788694 !important; background-image: none !important; filter: none !important; color: #ffffff !important; }
body.theme-white .ax-frame-foot .ax-split-panel { color: #ffffff !important; }
body.theme-white #frameSaleDateInfo    { color: #ffffff; background-color: #788694; text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.4); }

/* 메인 헤더 / 탭바 */
body.theme-white .ax-frame-header      { background-color: #eceef1 !important; }
body.theme-white .ax-frame-header-tab  { background-color: #e5e7ea !important; }

/* 사이드바 */
body.theme-white .ax-frame-aside       { background-color: #3a5064 !important; }
body.theme-white .aside-menu-item.aside-menu-item-label { background-color: transparent !important; color: #ffffff !important; border-bottom-color: rgba(255,255,255,0.07) !important; }
body.theme-white .aside-menu-item.aside-menu-item-label:hover,
body.theme-white .aside-menu-item.aside-menu-item-label.opend { background-color: #788694 !important; border-color: #44ADF9 !important; color: #ffffff !important; }
body.theme-white .aside-menu-item.aside-menu-item-tree-body .tree-holder { background-color: #435364 !important; }
body.theme-white .ax-frame-aside .ztree li a          { color: #ffffff !important; }
body.theme-white .ax-frame-aside .ztree li a:hover    { color: #44ADF9 !important; text-decoration: none !important; }
body.theme-white .ax-frame-aside .ztree li a.curSelectedNode { background-color: rgba(68,173,249,0.18) !important; color: #44ADF9 !important; }

/* tool-btn / 언어버튼 / 테마셀렉터 */
body.theme-white .tool-btn             { background: #788694 !important; }
body.theme-white #btnLang              { background-color: #788694 !important; color: #ffffff !important; }
body.theme-white #themeSelector { background-color: #788694 !important; color: #ffffff !important; }

/* 탭 활성/비활성 */
body.theme-white .ax-tab-item          { background-color: #d8dbe0 !important; }
body.theme-white .ax-tab-item.active   { background-color: #f4f5f7 !important; }

/* ax:tab-layout 탭 홀더 — 레거시 axboot 스타일 유지 */
body.theme-white [data-ax5layout]>[data-tab-panel-label-holder] {
    background: #f4f5f7 !important; background-image: none !important;
    border-top: none !important; border-bottom: none !important;
}
body.theme-white [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label] [data-tab-label] {
    background: #f2f2f2 !important; background-image: none !important;
    color: #333333 !important;
    border-top: 1px solid #cccccc !important; border-right: 1px solid #cccccc !important;
    border-bottom: 1px solid #cccccc !important; border-left: none !important;
}
body.theme-white [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label] [data-tab-label]:hover {
    background: #e6e6e6 !important; background-image: none !important; color: #333333 !important;
}
body.theme-white [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label][data-tab-active="true"] [data-tab-label] {
    background: #ffffff !important; background-image: none !important;
    color: #333333 !important;
    border-top: 1px solid #cccccc !important; border-right: 1px solid #cccccc !important;
    border-bottom: 1px solid #ffffff !important; border-left: none !important;
}
body.theme-white [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label-border] {
    background: #f4f5f7 !important; border: none !important;
    border-top: 2px solid #788694 !important;
}
body.theme-white [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-aside] {
    border: none !important;
}

/* 콘텐츠 패널 / 모달 배경 */
body.theme-blue  .ax-panel             { background-color: #f0f4ff !important; }
body.theme-blue  .ax-base-panel        { background-color: #f0f4ff !important; }
body.theme-white .ax-panel             { background-color: #f7f8fa !important; }
body.theme-white .ax-base-panel        { background-color: #f7f8fa !important; }

/* 그리드 헤더 텍스트 — 흰색 배경에 검정 글씨 */
body.theme-white [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] { border-bottom: 1px solid #d0d3d8 !important; box-shadow: none !important; }
body.theme-white .cust-history-header              { color: #1a1e28 !important; }
body.theme-white .cust-history-header > div        { border-right-color: rgba(0,0,0,0.25) !important; border-left-color: rgba(0,0,0,0.25) !important; }
body.theme-white [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td { color: #1a1e28 !important; box-shadow: none !important; }
body.theme-white [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td.hasBorder { border-right: 1px solid rgba(0,0,0,0.15) !important; border-bottom: 0 none !important; }
body.theme-white [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr:not(:last-child) td { border-bottom: 1px solid rgba(0,0,0,0.15) !important; }
body.theme-white [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td [data-ax5grid-cellHolder] { color: #1a1e28 !important; font-weight: 600 !important; }
body.theme-white [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-column-sort]:before  { border-bottom-color: #1a1e28 !important; }
body.theme-white [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-column-sort]:after   { border-top-color:    #1a1e28 !important; }
/* 합계행 컬럼 구분선 — footsum 배경(#d4d7db)과 동색 묻힘 방지 */
body.theme-white [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel] table tr td.hasBorder {
    border-right:  1px solid #b8bcc8 !important;
    border-bottom: 1px solid #b8bcc8 !important;
}

/* 드롭다운 메뉴 */
body.theme-white .dropdown-menu        { background-color: #f4f5f7 !important; border-color: #d0d3d8 !important; }
body.theme-white .dropdown-menu > li > a,
body.theme-white .dropdown-menu button { background-color: #f4f5f7 !important; color: #3a3f4a !important; }
body.theme-white .dropdown-menu > li > a:hover,
body.theme-white .dropdown-menu button:hover { background-color: #e8eaed !important; }


/* dashboard — Room Available 토/일 헤더 */
body.theme-white .grid-header-red  { background: #e8a0a0 !important; color: #7a1a1a !important; }
body.theme-white .grid-header-blue { background: #90b8d8 !important; color: #1a3a5a !important; }

/* dashboard — 메인 버튼 5개 */
body.theme-white .mainBtnImg           { background: #8a96a8; }

/* dashboard — Revenue 테이블 */
body.theme-white .RevenuTable th       { background-color: #dddfe4 !important; color: #1a1e28 !important; border-right-color: rgba(0,0,0,0.1) !important; }
body.theme-white .RevenuTable td:first-child { background: #f2f3f5 !important; }
body.theme-white .RevenuTable td       { background-color: #ffffff !important; }

/* bootstrap-select 드롭다운 — 흰 배경 + 연한 파란 hover */
body.theme-white .bootstrap-select .dropdown-menu { background-color: #ffffff !important; border-color: #ccc !important; }
body.theme-white .bootstrap-select .dropdown-menu > li > a { background-color: #ffffff !important; color: #333 !important; }
body.theme-white .bootstrap-select .dropdown-menu > li > a:hover,
body.theme-white .bootstrap-select .dropdown-menu > li > a:focus { background-color: #e3eaf8 !important; color: #333 !important; }
/* roomRack 층 필터 버튼 (f_slide) */
body.theme-white .f_slide_wrap {
    background:   #f4f5f7 !important;
    border-color: #c8cdd6 !important;
}
body.theme-white .f_slide_h {
    background:       #788694 !important;
    background-image: none    !important;
    filter:           none    !important;
    color:            #ffffff !important;
    border-color:     #606e7a !important;
    text-shadow:      none    !important;
    font-weight:      600     !important;
    transition:       background 0.15s ease !important;
}
body.theme-white .f_slide_h:hover {
    background: #5a6475 !important;
}
body.theme-white .f_slide_content {
    background:       #ffffff !important;
    background-image: none    !important;
    filter:           none    !important;
    color:            #3a4a58 !important;
    border-color:     #c8cdd6 !important;
    text-shadow:      none    !important;
    font-weight:      600     !important;
    transition:       background 0.15s ease, color 0.15s ease !important;
}
body.theme-white .f_slide_content:hover {
    background: #eceef1 !important;
    color:      #1a2a38 !important;
}
body.theme-white .f_slide_select {
    background:       #5b8db8 !important;
    background-image: none    !important;
    filter:           none    !important;
    color:            #ffffff !important;
    text-shadow:      none    !important;
}

body.theme-white .bootstrap-select .dropdown-menu > .active > a,
body.theme-white .bootstrap-select .dropdown-menu > .active > a:hover,
body.theme-white .bootstrap-select .dropdown-menu > .active > a:focus { background-color: #007bff !important; color: #ffffff !important; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. THEME-BLACK — 구조 배경 오버라이드
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.theme-black { background-color: #dcdfe5 !important; }

/* 헤더 툴바 / 풋터 */
body.theme-black .ax-frame-header-tool,
body.theme-black .ax-frame-foot        { background: #3d4450 !important; background-image: none !important; filter: none !important; color: #ffffff !important; }
body.theme-black .ax-frame-foot .ax-split-panel { color: #ffffff !important; }
body.theme-black #frameSaleDateInfo    { color: #ffffff; background-color: #3d4450; text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.4); }

/* 메인 헤더 / 탭바 */
body.theme-black .ax-frame-header      { background-color: #d0d3da !important; }
body.theme-black .ax-frame-header-tab  { background-color: #c8cbd3 !important; }

/* 사이드바 */
body.theme-black .ax-frame-aside       { background-color: #3d4450 !important; }
body.theme-black .aside-menu-item.aside-menu-item-label { background-color: #2f3844 !important; color: #ffffff !important; border-bottom-color: rgba(255,255,255,0.08) !important; }
body.theme-black .aside-menu-item.aside-menu-item-label:hover,
body.theme-black .aside-menu-item.aside-menu-item-label.opend { background-color: #4e5566 !important; border-color: #44ADF9 !important; color: #ffffff !important; }
body.theme-black .aside-menu-item.aside-menu-item-tree-body .tree-holder { background-color: #3d4450 !important; }
body.theme-black .ax-frame-aside .ztree li a          { color: #ffffff !important; }
body.theme-black .ax-frame-aside .ztree li a:hover    { color: #44ADF9 !important; text-decoration: none !important; }
body.theme-black .ax-frame-aside .ztree li a.curSelectedNode { background-color: rgba(68,173,249,0.22) !important; color: #44ADF9 !important; }

/* tool-btn / 언어버튼 / 테마셀렉터 */
body.theme-black .tool-btn             { background: #3d4450 !important; }
body.theme-black #btnLang              { background-color: #3d4450 !important; color: #ffffff !important; }
body.theme-black #themeSelector { background-color: #3d4450 !important; color: #ffffff !important; }

/* 탭 활성/비활성 */
body.theme-black .ax-tab-item          { background-color: #bfc3cb !important; }
body.theme-black .ax-tab-item.active   { background-color: #dcdfe5 !important; }

/* 콘텐츠 패널 / 모달 배경 */
body.theme-black .ax-panel             { background-color: #d8dbe1 !important; }
body.theme-black .ax-base-panel        { background-color: #d8dbe1 !important; }

/* 그리드 컨테이너 border — 배경(#d8dbe1)과 동색 묻힘 방지 */
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] { border-color: #b0b6c2 !important; }

/* 그리드 바디 셀 구분선 — #ccc가 합계행 배경(#d0d3d9)과 동색으로 묻힘 방지 */
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="body"] [data-ax5grid-panel] table tr td.hasBorder {
    border-right:  1px solid #b0b6c2 !important;
    border-bottom: 1px solid #b0b6c2 !important;
}

/* 그리드 헤더 텍스트 — 다크 배경에 밝은 글씨 (흰색 고정 유지) */
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] { border-bottom: 1px solid #2a3448 !important; }
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td { color: #ffffff !important; box-shadow: none !important; }
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td.hasBorder { border-right: 1px solid rgba(255,255,255,0.25) !important; border-bottom: 0 none !important; }
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,0.25) !important; }
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-panel] table tr td [data-ax5grid-cellHolder] { color: #ffffff !important; }
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-column-sort]:before  { border-bottom-color: #ffffff !important; }
body.theme-black [data-ax5grid] [data-ax5grid-container="root"] [data-ax5grid-container="header"] [data-ax5grid-column-sort]:after   { border-top-color:    #ffffff !important; }

/* 드롭다운 메뉴 */
body.theme-black .dropdown-menu        { background-color: #1e2538 !important; border-color: #2a3448 !important; }
body.theme-black .dropdown-menu > li > a,
body.theme-black .dropdown-menu button { background-color: #1e2538 !important; color: #c8d0de !important; }
body.theme-black .dropdown-menu > li > a:hover,
body.theme-black .dropdown-menu button:hover { background-color: #2a3448 !important; }

/* 언어/테마 선택기 드롭다운 — 블랙 테마에서도 흰색 고정 */
body.theme-black #btnLang ~ .dropdown-menu,
body.theme-black #themeSelector ~ .dropdown-menu {
    background-color: #ffffff !important;
    border-color:     #dddddd !important;
}
body.theme-black #btnLang ~ .dropdown-menu button,
body.theme-black #themeSelector ~ .dropdown-menu button {
    background-color: #ffffff !important;
    color:            #333333 !important;
}
body.theme-black #btnLang ~ .dropdown-menu button:hover,
body.theme-black #themeSelector ~ .dropdown-menu button:hover {
    background-color: #f5f5f5 !important;
    color:            #333333 !important;
}


/* ax:tab-layout 탭 */
body.theme-black [data-ax5layout]>[data-tab-panel-label-holder] {
    background: #dcdfe5 !important; background-image: none !important;
    border-top: none !important; border-bottom: none !important;
}
body.theme-black [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label] [data-tab-label] {
    background: #b8bcc8 !important; background-image: none !important;
    color: #2a3448 !important;
    border-top: 1px solid rgba(0,0,0,0.2) !important; border-right: 1px solid rgba(0,0,0,0.2) !important;
    border-bottom: 1px solid rgba(0,0,0,0.2) !important; border-left: none !important;
}
body.theme-black [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label] [data-tab-label]:hover {
    background: #c8ccd4 !important; background-image: none !important; color: #2a3448 !important;
}
body.theme-black [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label][data-tab-active="true"] [data-tab-label] {
    background: var(--color-grid-header) !important; background-image: none !important; color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.25) !important; border-right: 1px solid rgba(255,255,255,0.25) !important;
    border-bottom: 1px solid #dcdfe5 !important; border-left: none !important;
}
body.theme-black [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-label-border] {
    background: #dcdfe5 !important; border: none !important;
    border-top: 2px solid #3d4450 !important;
}
body.theme-black [data-ax5layout]>[data-tab-panel-label-holder] [data-tab-panel-aside] {
    border: none !important;
}

/* dashboard — Room Available 토/일 헤더 */
body.theme-black .grid-header-red  { background: #6b2020 !important; color: #ffb0b0 !important; }
body.theme-black .grid-header-blue { background: #1a3a6a !important; color: #90c0e8 !important; }

/* dashboard — 메인 버튼 5개 */
body.theme-black .mainBtnImg           { background: #464d5b; }

/* dashboard — Revenue 테이블 */
body.theme-black .RevenuTable th       { background-color: #464d5b !important; color: #ffffff !important; border-right-color: rgba(255,255,255,0.2) !important; }
body.theme-black .RevenuTable td:first-child { background: #f2f3f5 !important; color: #1a1e28 !important; }
body.theme-black .RevenuTable td       { background-color: #ffffff !important; color: #1a1e28 !important; }

/* bootstrap-select 드롭다운 — 흰 배경 + 연한 차콜 hover */
body.theme-black .bootstrap-select .dropdown-menu { background-color: #ffffff !important; border-color: #ccc !important; }
body.theme-black .bootstrap-select .dropdown-menu > li > a { background-color: #ffffff !important; color: #333 !important; }
body.theme-black .bootstrap-select .dropdown-menu > li > a:hover,
body.theme-black .bootstrap-select .dropdown-menu > li > a:focus { background-color: #d8dce6 !important; color: #333 !important; }
/* roomRack 층 필터 버튼 (f_slide) */
body.theme-black .f_slide_wrap {
    background:   #c4c8d0 !important;
    border-color: #9aa0ae !important;
}
body.theme-black .f_slide_h {
    background:       #464d5b !important;
    background-image: none    !important;
    filter:           none    !important;
    color:            #ffffff !important;
    border-color:     #343b48 !important;
    text-shadow:      none    !important;
    font-weight:      600     !important;
    transition:       background 0.15s ease !important;
}
body.theme-black .f_slide_h:hover {
    background: #535a6a !important;
}
body.theme-black .f_slide_content {
    background:       #d8dbe1 !important;
    background-image: none    !important;
    filter:           none    !important;
    color:            #2d3a4a !important;
    border-color:     #9aa0ae !important;
    text-shadow:      none    !important;
    font-weight:      600     !important;
    transition:       background 0.15s ease, color 0.15s ease !important;
}
body.theme-black .f_slide_content:hover {
    background: #c0c5d0 !important;
    color:      #1a2838 !important;
}
body.theme-black .f_slide_select {
    background:       #1e4a7a !important;
    background-image: none    !important;
    filter:           none    !important;
    color:            #ffffff !important;
    text-shadow:      none    !important;
}

body.theme-black .bootstrap-select .dropdown-menu > .active > a,
body.theme-black .bootstrap-select .dropdown-menu > .active > a:hover,
body.theme-black .bootstrap-select .dropdown-menu > .active > a:focus { background-color: #007bff !important; color: #ffffff !important; }

/* 어두운 버튼(btn-info, btn-success 등) 위 F키 배지 — 흰 배경으로 고정 */
body.theme-black .btn-info .badge-light,
body.theme-black .btn-success .badge-light,
body.theme-black .btn-danger .badge-light,
body.theme-black .btn-warning .badge-light,
body.theme-black .btn-fn1 .badge-light,
body.theme-black .btn-fn2 .badge-light,
body.theme-white .btn-info .badge-light,
body.theme-white .btn-success .badge-light,
body.theme-white .btn-danger .badge-light,
body.theme-white .btn-warning .badge-light,
body.theme-white .btn-fn1 .badge-light,
body.theme-white .btn-fn2 .badge-light {
    background-color: #ffffff !important; color: #333333 !important;
}

/* ── charge-settle-mgmt 커스텀 탭 ────────────────────────────── */
.tab_itemUp, .tab_item, .tab_pay, .tab_chg, .tab_memb {
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    line-height: 35px;
    font-size: 13px;
    text-align: center;
    display: block;
    float: left;
    font-weight: normal;
    transition: background-color 0.2s ease;
    cursor: pointer;
}
.tab_itemUp:hover, .tab_item:hover, .tab_pay:hover, .tab_chg:hover, .tab_memb:hover { opacity: 0.85; }
.tab_itemUp.tab-active, .tab_item.tab-active, .tab_pay.tab-active, .tab_chg.tab-active, .tab_memb.tab-active {
    background-color: #ffffff;
    font-weight: bold;
}

body.theme-blue .tab_itemUp, body.theme-blue .tab_item,
body.theme-blue .tab_pay,    body.theme-blue .tab_chg, body.theme-blue .tab_memb {
    background-color: var(--color-grid-header); border-color: rgba(255,255,255,0.25); color: #ffffff;
}
body.theme-blue .tab_itemUp.tab-active, body.theme-blue .tab_item.tab-active,
body.theme-blue .tab_pay.tab-active,    body.theme-blue .tab_chg.tab-active, body.theme-blue .tab_memb.tab-active {
    background-color: var(--color-grid-header-hover); color: #ffffff;
}

body.theme-black .tab_itemUp, body.theme-black .tab_item,
body.theme-black .tab_pay,    body.theme-black .tab_chg, body.theme-black .tab_memb {
    background-color: #d8dbe1; border-color: #b2b8c4; color: #4a5060;
}
body.theme-black .tab_itemUp.tab-active, body.theme-black .tab_item.tab-active,
body.theme-black .tab_pay.tab-active,    body.theme-black .tab_chg.tab-active, body.theme-black .tab_memb.tab-active {
    background-color: var(--color-grid-header); color: #ffffff; border-color: rgba(255,255,255,0.25);
}

/* ── charge-settle-mgmt 우측 버튼 영역 overflow 방지 ─────────── */
.right_Button { box-sizing: border-box !important; overflow: hidden !important; }
.right_Button_LeftAr,
.right_Button_RightAr { box-sizing: border-box !important; overflow: hidden !important; }

/* ── charge-settle-mgmt 세로 탭 (vtab) ──────────────────────── */
.vtab { margin: auto; width: 100%; height: 50%; overflow: hidden; }
.vtab > ul {
    float: left; text-align: left; display: block;
    margin: auto 0; padding: 0; position: relative; top: 0;
    background-color: #ECF0F5;
}
.vtab > ul > li {
    width: 100%; height: 24px; font-style: normal; font-size: 0.85em;
    background-color: #f2f2f2; line-height: 24px; list-style-type: none;
    display: block; text-align: left; padding-left: 10px; margin: auto;
    position: relative; border: 1px solid #ccc; border-bottom: 0; z-index: 2;
    cursor: pointer;
}
.vtab > ul > li:last-child { border-bottom: 1px solid #ccc; }
.vtab > ul > li.selected {
    font-weight: 600; opacity: 1; z-index: 10;
    background-color: #ffffff; position: relative; border-right: 0;
}
.vtab > div {
    height: 100%; min-height: 50px; display: flex; box-sizing: border-box; position: relative;
}
.vtab > div > div {
    height: 100%; min-height: 50px; margin-left: 8px; padding: 0;
    background-color: #fafafa; position: relative; z-index: 9;
}
.vtab > div > div:first-child {
    width: 4px; min-height: 50px; margin-left: 0; padding-left: 4px;
    border-top: 1px solid #D8D8D8; border-right: 1px solid #D8D8D8;
    background-color: #ffffff; position: relative; z-index: 9;
}

/* Blue theme */
body.theme-blue .vtab > ul { background-color: #3560a8; border-bottom: 1px solid #7a9fd0; }
body.theme-blue .vtab > ul > li {
    background-color: #3560a8;
    border-color: rgba(255,255,255,0.2);
    border-right-color: #7a9fd0;
    color: #ffffff;
}
body.theme-blue .vtab > ul > li:last-child { border-bottom-color: #7a9fd0; }
body.theme-blue .vtab > ul > li.selected {
    background-color: #ffffff; color: #1e3a5a;
    border-color: #7a9fd0; border-right: 0;
}
body.theme-blue .vtab > div > div { background-color: #ffffff; }
body.theme-blue .vtab > div > div:first-child {
    background-color: transparent;
    border-top: none; border-right: none;
    border-left: 1px solid #7a9fd0;
}

/* Black theme */
body.theme-black .vtab > ul { background-color: var(--color-grid-header); border-bottom: 1px solid #b2b8c4; }
body.theme-black .vtab > ul > li {
    background-color: var(--color-grid-header);
    border-color: rgba(255,255,255,0.2);
    border-right-color: #b2b8c4;
    color: #ffffff;
}
body.theme-black .vtab > ul > li:last-child { border-bottom-color: #b2b8c4; }
body.theme-black .vtab > ul > li.selected {
    background-color: #d8dbe1; color: #2a3448;
    border-color: #b2b8c4; border-right: 0;
}
body.theme-black .vtab > div > div { background-color: #d8dbe1; }
body.theme-black .vtab > div > div:first-child {
    background-color: transparent;
    border-top: none; border-right: none;
    border-left: 1px solid #b2b8c4;
}

/* ==============================
   Logout Button — 공통 구조
   ============================== */
.ax-frame-logout.pms-logout-btn {
    position: relative !important;
    overflow: hidden !important;
    background-image: none !important;
    border-radius: 9999px !important;
    padding: 2px 14px !important;
    margin: 4px 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.pms-logout-btn .pms-logout-label {
    display: inline-block;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.pms-logout-btn:hover .pms-logout-label {
    transform: translateY(-200%);
    opacity: 0;
}

@keyframes shiny-auto {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.pms-logout-btn .pms-logout-hover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(325deg, #0044ff 0%, #2ccfff 55%, #0044ff 90%);
    background-size: 280% auto;
    color: #ffffff !important;
    border-radius: 9999px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, border-radius 0.3s ease;
}

.pms-logout-btn:hover .pms-logout-hover {
    transform: translateY(0);
    opacity: 1;
    border-radius: 0;
    animation: shiny-auto 4s ease infinite;
}

/* ==============================
   Logout Button — theme-white
   툴바 배경: #788694 (회색조) / hover: 민트
   ============================== */
body.theme-white .ax-frame-logout.pms-logout-btn {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #3a4a56 !important;
}
body.theme-white .pms-logout-btn .pms-logout-hover {
    background-image: linear-gradient(325deg, #00b09b 0%, #96fbc4 55%, #00b09b 90%);
}

/* ==============================
   Logout Button — theme-blue
   툴바 배경: #4a5878 (네이비) / hover: 블루
   ============================== */
body.theme-blue .ax-frame-logout.pms-logout-btn {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #3a4a62 !important;
}

/* ==============================
   Logout Button — theme-black
   툴바 배경: #3d4450 (다크그레이) / hover: 진한 퍼플
   ============================== */
body.theme-black .ax-frame-logout.pms-logout-btn {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #2f3844 !important;
}
body.theme-black .pms-logout-btn .pms-logout-hover {
    background-image: linear-gradient(325deg, #4a0080 0%, #9b59b6 55%, #4a0080 90%);
}