@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/flag-icons@7.2.3/css/flag-icons.min.css'); /* LNB 국기 (SVG) */

/* ═══════════════════════════════════════════════════════════════
   BATI CIS — baticis 라이트 스킨 (디자인 토큰)
   새 고객사 온보딩: 아래 :root 토큰만 바꾸면 전체 색감이 바뀝니다.
   (--brand-primary-rgb 는 R, G, B 형식으로 함께 변경)
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* 브랜드 강조색 (기본: 블루) — 올리브영 그린 예: #47A01A / 61,139,22 … */
    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-primary-active: #1e40af;
    --brand-primary-rgb: 37, 99, 235;

    /* UI 뉴트럴 토큰 */
    --ui-bg: #f6f7f9;            /* 페이지 배경 */
    --ui-surface: #ffffff;       /* 카드/패널 */
    --ui-border: #e5e7eb;
    --ui-border-strong: #d1d5db;
    --ui-text: #1f2937;
    --ui-text-muted: #6b7280;
    --ui-radius-sm: 8px;
    --ui-radius: 10px;
    --ui-radius-lg: 14px;
    --ui-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --cl-table-offset: 220px;   /* changelist 테이블 상부 크롬 높이 (탭48+타이틀+필터+여백) */

    /* Bootstrap 연결 */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-link-color: var(--brand-primary);
}

/* ═══ 베이스 ═══ */
/* 본문 좌우 거터 — 총 ≈18px */
.content-wrapper > .content { padding-left: 4px !important; padding-right: 4px !important; }
.content-wrapper .container-fluid { padding-left: 14px; padding-right: 14px; }
.content-wrapper .row { margin-left: -14px !important; margin-right: -14px !important; }
.content-wrapper .row > [class*="col-"] { padding-left: 14px !important; padding-right: 14px !important; }
/* 좌측 시작점 통일(18px): 중첩 content(.5rem)가 가이드/필터/테이블만 8px 더 밀던 것 제거 */
section#content.content { padding-left: 0 !important; padding-right: 0 !important; }
/* jazzmin main.css 의 .content-wrapper>.content{padding:1rem 2rem} 상하분 제거 */
.content-wrapper > .content:not(.border-bottom) { padding-top: 0 !important; padding-bottom: 0 !important; }
/* 타이틀 밴드 아래 첫 블록 상단 간격 — 좌측 거터와 균형(가이드 유무 무관 공통) */
#content > .row > [class*="col-"]:first-child { margin-top: 8px; }
body {
    font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    background: var(--ui-bg);
    color: var(--ui-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.content-wrapper { background: var(--ui-bg) !important; }

/* ═══ 상단 네비바 — 흰색/얇은 보더 ═══ */
body .main-header.navbar {
    background: #fff !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
    min-height: 52px;
}
.main-header .nav-link { color: #374151 !important; }
.main-header .nav-link:hover { color: var(--brand-primary) !important; }

/* ═══ 페이지 헤더(타이틀/브레드크럼 행) ═══ */
.content-wrapper .content.border-bottom {
    background: #fff;
    border-bottom: 1px solid var(--ui-border) !important;
    margin-bottom: 6px !important;
    padding-top: 6px; padding-bottom: 6px;
    min-height: var(--lnb-header-h, 48px); display: flex; align-items: center;
}
.content-wrapper .content.border-bottom > .container-fluid { width: 100%; }
.content-wrapper .content.border-bottom .row { align-items: center; }
.content-wrapper .content.border-bottom h1 {
    font-size: 18px; font-weight: 700; color: var(--ui-text);
    border-right-color: var(--ui-border) !important;
}
.breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 12.5px; }
.breadcrumb a { color: var(--ui-text-muted) !important; }
.breadcrumb-item.active { color: var(--ui-text); }

/* ═══ 스테이지 탭 (콘텐츠 최상단 — 좌측 패널 헤더와 같은 48px 라인) ═══ */
.cis-stage-tabs-wrap {
    background: #fff; border-bottom: 1px solid var(--ui-border);
    height: var(--lnb-header-h); display: flex; align-items: stretch;
}
.cis-stage-tabs-wrap .container-fluid {
    display: flex; align-items: stretch;
    padding-left: 18px; padding-right: 18px;  /* 타이틀/콘텐츠와 동일 거터 */
}
.cis-stage-tabs { display: flex; gap: 28px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cis-stage-tabs::-webkit-scrollbar { display: none; }  /* 탭행 스크롤바 숨김 */
/* 텍스트 폭 언더라인 탭 — 박스패딩 없이 gap 으로 간격, 첫 탭이 자연히 18px 라인에 플러시 */
.cis-stage-tab {
    display: inline-flex; align-items: center; padding: 0 2px;
    text-decoration: none !important; font-size: 13.5px; font-weight: 500;
    color: var(--ui-text-muted) !important; border-bottom: 2px solid transparent; margin-bottom: -1px;
    white-space: nowrap; transition: color .12s;
}
.cis-stage-tab:first-child { margin-left: -2px; }  /* 언더라인 여유폭 2px 상쇄 → 텍스트 = 18px */
.cis-stage-tab:hover { color: var(--brand-primary) !important; }
.cis-stage-tab.active {
    font-weight: 600; color: var(--brand-primary) !important;
    border-bottom-color: var(--brand-primary);
}

/* ═══ 버튼 — 라운드/모던 ═══ */
.btn, .button {
    border-radius: var(--ui-radius-sm) !important;
    font-weight: 400; font-size: 13px;
    box-shadow: none !important;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:focus { box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .18) !important; }
.btn-primary, .button.default {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .button.default:hover {
    background: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}
.btn-outline-primary { color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--brand-primary) !important; color: #fff !important; }
.btn-outline-secondary { color: #374151 !important; border-color: var(--ui-border-strong) !important; background: #fff !important; }
.btn-outline-secondary:hover { background: #f3f4f6 !important; }
.object-tools a, .object-tools .btn { border-radius: var(--ui-radius-sm) !important; }

/* ═══ 폼 인풋 ═══ */
.form-control, select.form-control, input[type="text"], input[type="search"], input[type="number"],
input[type="date"], input[type="month"], input[type="email"], input[type="password"], select {
    border-radius: var(--ui-radius-sm);
    border: 1px solid var(--ui-border-strong);
    font-size: 13px; color: var(--ui-text);
    transition: border-color .12s, box-shadow .12s;
}
.form-control:focus, input:focus, select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .14) !important;
    outline: none;
}

/* ═══ 카드/모듈 ═══ */
.card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
}
.card-header { background: #fff; border-bottom: 1px solid var(--ui-border); font-weight: 600; border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0 !important; }
.module { border-radius: var(--ui-radius-lg); }

/* ═══ 테이블 (changelist 포함) ═══ */
.table thead th, #result_list thead th {
    background: #f9fafb !important;
    color: var(--ui-text-muted) !important;
    font-size: 11px; font-weight: 600;
    border-top: none !important;
    border-bottom: 1px solid var(--ui-border) !important;
    padding: .55rem 10px; white-space: nowrap;
}
#result_list thead th a { color: var(--ui-text-muted) !important; }
#result_list td, #result_list tbody th, .table td {
    font-size: 12px; padding: .5rem 10px;
    border-color: #f1f3f5 !important; vertical-align: middle;
    font-weight: 400; background: transparent;
}
#result_list thead th:first-child, #result_list tbody td:first-child,
#result_list tbody th:first-child { padding-left: 14px; }
#result_list tbody tr:nth-of-type(odd), .table-striped tbody tr:nth-of-type(odd) { background: #fbfcfd !important; }
#result_list tbody tr:hover, .table-hover tbody tr:hover { background: #f4f6fa !important; }
#result_list a { text-decoration: none !important; }
.paginator { font-size: 13px; }
.paginator a, .paginator .this-page {
    border-radius: 6px; padding: 4px 10px; margin: 0 1px; text-decoration: none;
}
.paginator .this-page { background: var(--brand-primary); color: #fff; }

/* ═══ 배지/알림/모달 ═══ */
.badge { border-radius: 6px; font-weight: 600; }
.alert { border-radius: var(--ui-radius); }
.modal-content { border-radius: var(--ui-radius-lg); border: 1px solid var(--ui-border); }

/* 컨텐츠 영역 링크 컬러 (버튼 제외) */
.content-wrapper a:not(.btn):not(.button):not(.cis-stage-tab):not(.paginator a) { color: var(--brand-primary); }
.content-wrapper a:not(.btn):not(.button):not(.cis-stage-tab):hover { color: var(--brand-primary-hover); }

/* ═══════════════════════════════════════════════════════════════
   LNB miller(2-pane) — 라이트 레일(컬러 칩) + 라운드 패널
   ═══════════════════════════════════════════════════════════════ */
:root { --lnb-rail-w: 76px; --lnb-panel-w: 200px; --lnb-accent: var(--brand-primary); --lnb-header-h: 48px; }

.lnb-miller-aside {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1035;
    display: flex; width: calc(var(--lnb-rail-w) + var(--lnb-panel-w));
    background: #fff; transition: width .15s ease;
}
/* 아이콘 레일 — 흰 배경 + 도메인 컬러 칩 */
.lnb-miller-aside .lnb-rail {
    width: var(--lnb-rail-w); background: #fff; border-right: 1px solid var(--ui-border);
    display: flex; flex-direction: column; align-items: center; padding: 14px 0 12px; gap: 7px; overflow-y: auto;
}
.lnb-rail-brand { display: flex; align-items: center; justify-content: center; padding: 6px 0 14px; }
.lnb-rail-brand img { width: 30px; height: 30px; object-fit: contain; }  /* 고정 비율 — 좌우 늘어짐 방지 */
.lnb-rail-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 62px; padding: 8px 2px; margin: 1px 0;
    color: var(--ui-text-muted); text-decoration: none !important;
    border-radius: var(--ui-radius); transition: background .12s;
}
.lnb-chip {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; background: #f1f5f9; color: #64748b;
}
.lnb-chip img { width: 21px; height: 21px; object-fit: contain; display: block; }
.lnb-chip-sm { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; display: inline-flex; margin-right: 8px; vertical-align: middle; }
.lnb-chip-sm img { width: 15px; height: 15px; }
/* 도메인별 칩 컬러 (batios 레퍼런스 톤) */
[data-domain="amazon"] .lnb-chip, .lnb-chip-sm[data-domain="amazon"] { background: #fff3e0; color: #f59e0b; }
[data-domain="shopee"] .lnb-chip, .lnb-chip-sm[data-domain="shopee"] { background: #ffe9e3; color: #ee4d2d; }
[data-domain="rakuten"] .lnb-chip, .lnb-chip-sm[data-domain="rakuten"] { background: #fff0f2; color: #bf0000; }
[data-domain="zozotown"] .lnb-chip, .lnb-chip-sm[data-domain="zozotown"] { background: #edf4ff; color: #111827; }
[data-domain="closing"] .lnb-chip, .lnb-chip-sm[data-domain="closing"] { background: #f3e8ff; color: #8b5cf6; }
[data-domain="master"] .lnb-chip, .lnb-chip-sm[data-domain="master"] { background: #e5f8ef; color: #10b981; }
[data-domain="system"] .lnb-chip, .lnb-chip-sm[data-domain="system"] { background: #e8eef7; color: #5b7396; }
[data-domain="etc"] .lnb-chip, .lnb-chip-sm[data-domain="etc"] { background: #eef1f4; color: #64748b; }
.lnb-rail-item .lnb-rail-label { font-size: 10.5px; line-height: 1.15; text-align: center; word-break: keep-all; color: #374151; }
.lnb-rail-item:hover { background: #f4f6f8; }
.lnb-rail-item.active { background: #eef1f5; }
.lnb-rail-item.active .lnb-rail-label { color: var(--ui-text); font-weight: 600; }

/* 레일 하단 유틸 (문서/유저/접기 — 구 네비바 이관) */
.lnb-rail-spacer { flex: 1 1 auto; }
.lnb-rail-bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 10px; }
.lnb-rail-util {
    width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; color: #8a94a6; font-size: 15px; text-decoration: none !important;
}
.lnb-rail-util:hover { background: #f3f4f6; color: var(--ui-text); }
.lnb-rail-util[data-domain].active { background: #eef1f5; color: var(--ui-text); }
/* 하단 문서(가이드) — 심플한 펼친책 아이콘 */
.lnb-rail-docs { color: #2563eb; font-size: 17px; }
.lnb-rail-docs.active { background: #eaf0fb; color: #2563eb; }
.lnb-user { position: relative; }

/* ── 문서 뷰어 full-bleed — 우측 메인을 iframe 이 가득 채움(타이틀/여백/푸터 없음) ── */
body.docs-fullbleed .content-wrapper { padding: 0 !important; height: 100vh; overflow: hidden; }
body.docs-fullbleed .main-footer { display: none !important; }
.docs-frame-wrap { width: 100%; height: 100vh; }
.docs-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.lnb-user-menu {
    display: none; position: fixed; left: calc(var(--lnb-rail-w) + 8px); bottom: 14px;
    min-width: 180px; padding: 6px; z-index: 1060;
    background: #fff; border: 1px solid var(--ui-border); border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}
.lnb-user-menu.open { display: block; }
.lnb-user-menu .lnb-user-name {
    padding: 8px 10px; font-size: 12.5px; font-weight: 700; color: #9ca3af;
    border-bottom: 1px solid #f0f2f4; margin-bottom: 4px;
}
.lnb-user-menu a, .lnb-user-menu form button {
    display: block; width: 100%; text-align: left; padding: 8px 10px;
    border: 0; background: none; border-radius: 8px; cursor: pointer;
    font-size: 13px; color: #374151 !important; text-decoration: none !important;
}
.lnb-user-menu a:hover, .lnb-user-menu form button:hover { background: #f4f6f8; }

/* 플랫폼/항목 패널 */
.lnb-miller-aside .lnb-panel {
    width: var(--lnb-panel-w); background: #fff; border-right: 1px solid var(--ui-border);
    overflow-y: auto; padding: 0 10px 10px;
}
.lnb-panel-title {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--lnb-header-h); margin: 0 -10px 8px; padding: 0 14px;
    font-weight: 700; font-size: 14px; color: var(--ui-text);
    border-bottom: 1px solid var(--ui-border);
}
.lnb-collapse-btn {
    border: 0; background: transparent; color: #9ca3af; cursor: pointer;
    border-radius: 6px; padding: 2px 7px; font-size: 13px;
}
.lnb-collapse-btn:hover { background: #f3f4f6; color: var(--ui-text); }
.lnb-panel-app { padding: 12px 8px 4px; font-size: 11px; font-weight: 700; color: #9aa0a6; }

/* 문서 그룹 접힘 (docs 도메인 전용) — 현재 문서 그룹만 open, 2뎁스 폴더는 소제목 */
.lnb-doc-group { margin: 0; }
.lnb-doc-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 5px; user-select: none; }
.lnb-doc-summary::-webkit-details-marker { display: none; }
.lnb-doc-summary::before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  font-size: 9px; transition: transform .15s ease; }
.lnb-doc-group[open] > .lnb-doc-summary::before { transform: rotate(90deg); }
.lnb-doc-summary:hover { color: #5f6b76; }
.lnb-doc-sub { padding: 8px 8px 2px 18px; font-size: 10.5px; font-weight: 700; color: #b3b9bf; }
.lnb-panel-item.sub2 { padding-left: 26px; }
.lnb-panel-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; margin: 2px 0;
    color: #1f2937 !important; text-decoration: none !important; font-size: 13.5px;
    border-radius: var(--ui-radius-sm); transition: background .12s, color .12s;
}
.lnb-panel-item .lnb-flag.fi {
    width: 20px; height: 14px; flex: none;
    border-radius: 3px; background-size: cover; background-position: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.lnb-panel-item i { width: 16px; text-align: center; color: #8a94a6; font-size: 13px; }
.lnb-panel-item.sub { padding-left: 16px; font-size: 13px; }
.lnb-panel-item:hover { background: #f4f6f8; color: #111827 !important; }
.lnb-panel-item.active {
    background: rgba(var(--brand-primary-rgb), .08);
    color: var(--brand-primary); font-weight: 600;
}
.lnb-panel-item.active i { color: var(--brand-primary); }

/* LNB(레일+패널) 풀높이 — 네비바/본문/푸터를 그 오른쪽에서 시작.
   AdminLTE .sidebar-mini.sidebar-collapse(특이도 0,3,0 !important) 대응 조합 선택자 유지. */
body.lnb-miller .main-header,
body.lnb-miller .content-wrapper,
body.lnb-miller .main-footer,
body.lnb-miller.sidebar-collapse .main-header,
body.lnb-miller.sidebar-collapse .content-wrapper,
body.lnb-miller.sidebar-collapse .main-footer {
    margin-left: calc(var(--lnb-rail-w) + var(--lnb-panel-w)) !important;
    transition: margin-left .15s ease;
}
body.lnb-miller .main-header { z-index: 1030; }
/* 접힘(rail only) */
body.lnb-miller.lnb-collapsed .lnb-miller-aside { width: var(--lnb-rail-w); }
body.lnb-miller.lnb-collapsed .lnb-panel { display: none; }
body.lnb-miller.lnb-collapsed .main-header,
body.lnb-miller.lnb-collapsed .content-wrapper,
body.lnb-miller.lnb-collapsed .main-footer,
body.lnb-miller.lnb-collapsed.sidebar-collapse .main-header,
body.lnb-miller.lnb-collapsed.sidebar-collapse .content-wrapper,
body.lnb-miller.lnb-collapsed.sidebar-collapse .main-footer { margin-left: var(--lnb-rail-w) !important; }


/* ═══ 검색조건 툴바 — 카드 없이 정렬된 컨트롤 행 (테이블과 너비 자연 일치) ═══ */
#change-list-filters { background: transparent; border: 0; padding: 0 0 4px; margin: 0; }
#changelist-search-wrapper {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
/* .cl-preface-spacer(선행요소 없을 때 타이틀↔필터바 여백)는 change_list.html 에
   인라인 height 로 지정 — CSS 캐시와 무관하게 즉시 반영. */
#changelist-search-wrapper #changelist-search {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
    flex: 1 1 auto; width: auto !important; min-width: 0;
}
#changelist-search-wrapper > div:last-child { flex: 0 0 auto; }
/* 좌우 간격만 — jazzmin 기본 change_list(마스터 페이지, 클론 래퍼 없음) 필터도
   붙지 않게 gap 부여. gap 은 높이/box-sizing 에 영향 없어 라인 정렬 안전. */
#change-list-filters .form-inline { gap: 8px; row-gap: 8px; }
/* 필터 드롭다운 폭 통일 — 기존 140px 규칙이 #change-list-filters 에만 걸려 JS
   복제 툴바(#changelist-search-wrapper)엔 안 닿아 내용길이대로 들쭉날쭉하던 것.
   클론까지 포함해 폭만 고정(높이·정렬 무관, 안전). */
#change-list-filters .select2-container,
#changelist-search-wrapper .select2-container { width: 150px !important; min-width: 150px; }
/* 날짜 인풋/라벨 — date_picker.css(뒤에 로드) 오버라이드 */
#change-list-filters .filter-label {
    font-size: 12.5px; font-weight: 600; color: var(--ui-text-muted); margin-right: 2px; white-space: nowrap;
}
#change-list-filters .filter-label .fa-search { font-size: 11px; margin-right: 2px; color: #9ca3af; }
#change-list-filters .date-range-filter input,
#change-list-filters input.flatpickr-input {
    height: 34px !important; width: 118px !important;
    padding: 4px 10px !important; font-size: 13px !important;
    border: 1px solid var(--ui-border-strong) !important; border-radius: var(--ui-radius-sm) !important;
    background: #fff !important; color: var(--ui-text) !important; box-shadow: none !important;
}
#change-list-filters .calendar-icon {
    position: static !important; top: 0 !important; left: 0 !important;
    margin: 0 !important; align-self: center;
    width: 34px !important; height: 34px !important; padding: 0 !important;
    font-size: 13px !important; line-height: 1 !important;
    border: 1px solid var(--ui-border-strong) !important; border-radius: var(--ui-radius-sm) !important;
    background: #fff !important; color: var(--ui-text-muted) !important;
}
#change-list-filters .calendar-icon:hover { background: #f3f4f6 !important; color: var(--ui-text) !important; }
#change-list-filters #searchbar {
    height: 34px; width: 200px; flex: 0 1 200px; min-width: 120px; font-size: 13px;
    border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); padding: 4px 12px;
}
/* 필터 셀렉트(select2) — 인풋과 동일한 34px/라운드/보더, 텍스트 세로중앙 */
/* 모든 필터 그룹을 함께 품는 폼에 여유를 둔다. 개별 form-group/셀렉트에는
   레이아웃을 주지 않아 필드별 높이·정렬은 기존 규격을 그대로 유지한다. */
#change-list-filters #changelist-search { padding: 8px 0; }
#change-list-filters .form-group { margin: 0; }
#change-list-filters select.form-control.search-filter { width: 140px !important; }
#change-list-filters .select2-container { width: 140px !important; }
#change-list-filters select.search-filter + .select2-container .select2-selection--single {
    height: 34px !important; background: #fff;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
}
/* select2 정석 센터링: 블록 + line-height (flex 는 select2 내부 absolute 화살표와 충돌) */
#change-list-filters .select2-container { width: 140px !important; vertical-align: middle !important; margin: 0 !important; }
#change-list-filters select.search-filter + .select2-container .select2-selection--single {
    height: 34px !important; min-height: 34px !important;
    display: block !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important; background: #fff;
}
#change-list-filters select.search-filter + .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important; padding: 0 24px 0 0 !important;
    font-size: 13px; color: var(--ui-text) !important;
}
#change-list-filters select.search-filter + .select2-container .select2-selection--single .select2-selection__arrow {
    height: 32px !important; top: 1px !important; right: 4px;
}
#change-list-filters select.search-filter + .select2-container .select2-selection__arrow { height: 32px !important; right: 6px; }
/* 펼쳐진 목록은 선택 박스와 숨쉴 간격을 두고, 검색 영역이 상단 라운드를
   덮지 않도록 드롭다운 컨테이너에서 클리핑한다. */
.select2-dropdown {
    margin-top: 2px;
    overflow: hidden;
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-border-strong);
    font-size: 13px;
}
/* Select2 기본 테마는 아래로 열릴 때 border-top/radius를 0으로 만든다.
   선택 박스와 간격을 둔 독립 목록이므로 네 모서리와 상단 보더를 복원한다. */
.select2-container--open .select2-dropdown--below {
    border-top: 1px solid var(--ui-border-strong) !important;
    border-top-left-radius: var(--ui-radius-sm) !important;
    border-top-right-radius: var(--ui-radius-sm) !important;
    border-bottom-left-radius: var(--ui-radius-sm) !important;
    border-bottom-right-radius: var(--ui-radius-sm) !important;
}
.select2-container--open .select2-dropdown--above {
    border-bottom: 1px solid var(--ui-border-strong) !important;
    border-bottom-left-radius: var(--ui-radius-sm) !important;
    border-bottom-right-radius: var(--ui-radius-sm) !important;
}
.select2-container--above .select2-dropdown { margin-top: 0; margin-bottom: 2px; }
.select2-search--dropdown { padding: 8px; background: #fff; }
.select2-search--dropdown .select2-search__field { box-sizing: border-box; }
.select2-results__option--highlighted { background: var(--brand-primary) !important; }

/* customUploadModal 등은 z-index:999999 오버레이를 사용한다. 그 안에 붙은
   Select2 결과 목록이 다른 모달/콘텐츠에 가려지지 않도록 선택 컨트롤보다 위에 둔다. */
.cis-select2-modal-dropdown {
    z-index: 1000001 !important;
}

/* 공용 검색형 셀렉트 — data-searchable-select가 붙은 스테이지/모달 선택 필드 */
.select2-container--default .select2-selection--single {
    min-height: 38px;
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    line-height: 36px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.15rem rgba(46, 125, 50, 0.16);
}

/* 검색형 셀렉트는 필터/월 입력과 같은 34px 컨트롤 규격을 사용한다. */
select[data-searchable-select] + .select2-container .select2-selection--single {
    position: relative;
    height: 34px !important;
    min-height: 34px !important;
    box-sizing: border-box;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius-sm) !important;
    background: #fff;
}
select[data-searchable-select] + .select2-container .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
    top: 0 !important;
    right: 4px;
}

/* 한글 폰트의 기준선이 Select2 선택 영역의 시각적 중앙보다 위에 잡히므로,
   placeholder와 선택값이 공유하는 rendered 줄만 보정한다. */
select[data-searchable-select] + .select2-container .select2-selection__rendered {
    box-sizing: border-box;
    height: 32px !important;
    /* 화살표와 X의 최소 안전 영역만 확보한다. */
    padding: 0 46px 0 4px !important;
    line-height: 32px !important;
    transform: translateY(3px);
}
/* Select2 기본 float 위치 대신, 선택 박스 우측의 화살표를 기준으로 X를 배치한다. */
select[data-searchable-select] + .select2-container .select2-selection__clear {
    position: absolute !important;
    top: 50%;
    /* arrow right(4px) + arrow width(20px) + 간격(8px) */
    right: 32px;
    float: none !important;
    margin: 0 !important;
    line-height: 1;
    z-index: 2;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-50%);
}

/* 우측 버튼 그룹 (Search 클론 + 다운로드) — 컴팩트 통일 (inline-flex 로 수직 중앙정렬) */
#changelist-search-wrapper #search_group { display: flex; align-items: center; gap: 10px; margin: 0; }
#changelist-search-wrapper > div:last-child { margin-left: auto !important; display: flex !important; align-items: center; gap: 10px; }
#changelist-search-wrapper #search_group .btn,
#changelist-search-wrapper #download-excel {
    height: 34px; padding: 0 16px; font-size: 13px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    border-radius: var(--ui-radius-sm) !important; white-space: nowrap;
}
/* 날짜 그룹 한 줄 수직 중앙정렬 (달력 버튼 들뜸 방지) */
#change-list-filters .date-range-filter {
    display: inline-flex !important; align-items: center !important; gap: 6px;
}
#change-list-filters .calendar-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    margin: 0 !important; vertical-align: middle;
}
#changelist-search-wrapper #download-excel {
    background: #fff; border: 1px solid var(--ui-border-strong); color: #374151;
}
#changelist-search-wrapper #download-excel:hover { background: #f3f4f6; }
#changelist-search-wrapper #download-excel .fa-download { font-size: 12px; margin-right: 4px; color: #6b7280; }
/* 건수 텍스트 — 작고 연하게 */
#search_group .small.quiet, #changelist-search-wrapper .small.quiet, .cis-count {
    font-size: 11px; color: #a3aab4; white-space: nowrap;
}
#change-list-filters { position: relative; }
.cis-count-top { position: absolute; right: 15px; bottom: -15px; font-size: 10.5px; }
#search_group .small.quiet a, .cis-count a { color: #a3aab4; text-decoration: underline; }

/* 표 모퉁이 — 카드 overflow:hidden 이 클리핑 (셀별 radius 불필요) */
#result_list tbody tr:last-child td { border-bottom: 0 !important; }

/* 대시보드 카드 버튼 (Add/Change/View) — 붙어있던 btn-group 분리 + 컴팩트 */
.card .btn-group { float: none; }
.card .btn-group .btn {
    border-radius: 6px !important; padding: 2px 12px; font-size: 12px; height: auto;
}
.card .btn-group .btn + .btn { margin-left: 6px; }

/* ═══ dev 환경 표시 — 미니멀 (라인 2px, 배너는 무배경 소형 칩) ═══ */
.dev-environment-top-bar { height: 2px !important; background: rgba(220, 53, 69, .30) !important; }
.dev-environment-banner {
    top: 12px !important; right: 10px !important;
    background: transparent !important; box-shadow: none !important;
    padding: 0 !important; gap: 5px !important;
    font-size: 10px !important; font-weight: 400 !important; color: #9ca3af !important;
}
.dev-environment-banner i { color: #cbd5e1 !important; font-size: 10px !important; }
.dev-environment-banner .server-info {
    background: #f3f4f6 !important; color: #6b7280 !important;
    border-radius: 4px !important; padding: 1px 5px !important; margin-left: 0 !important;
    font-size: 9.5px !important;
}
#dev-mode-toggle {
    background: transparent !important; border: 1px solid #e5e7eb !important;
    color: #9ca3af !important; font-size: 9.5px !important; font-weight: 400 !important;
    padding: 1px 6px !important; border-radius: 6px !important; cursor: pointer;
}

/* ═══ 페이지네이션 (jazzmin = bootstrap .pagination) ═══ */
#changelist .card { margin-bottom: 4px !important; }
#changelist .pagination { margin: 2px 0 0; }
#changelist .pagination .page-link {
    font-size: 11px; padding: 3px 8px; min-width: 25px; text-align: center;
    border-radius: 6px !important; margin: 0 1px; border-color: var(--ui-border);
    color: #6b7280; box-shadow: none !important;
}
#changelist .pagination .page-item.active .page-link {
    background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important;
}
#changelist .dataTables_info { padding-top: 5px; }
#changelist .dataTables_info .btn {
    font-size: 11px !important; padding: 2px 8px !important; line-height: 1.5 !important;
    border-radius: 6px !important; vertical-align: baseline;
}

/* 타이틀행 액션(change-list-actions row pb-3) 정렬 보정:
   .row 음수마진 → 우측 버튼이 테이블 모서리(18px 거터) 밖으로 삐짐, pb-3 → 수직 위쏠림 */
.content-wrapper .content.border-bottom .change-list-actions {
    padding-bottom: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
}

/* ═══ 스테이지 액션 콘솔 (설정 기반 — LNB_STAGE_CONSOLES) ═══ */
.cis-console {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px;
    background: #fff; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    padding: 13px 16px 14px; margin: 0 0 12px;
}
.cis-console-field label {
    display: block; font-size: 11.5px; font-weight: 600; color: var(--ui-text-muted);
    margin: 0 0 5px;
}
.cis-console-field .cis-req { color: #ef4444; }
.cis-console-field select.cis-console-input { min-width: 190px; height: 34px; font-size: 13px; }
.cis-console-field input.cis-console-input { height: 34px; font-size: 13px; }
.cis-console-range { display: flex; align-items: center; gap: 6px; color: var(--ui-text-muted); }
.cis-console-actions { display: flex; align-items: center; gap: 8px; margin-left: 2px; }
.cis-console-actions-secondary { flex-basis: 100%; margin-left: 0; }
.cis-console-btn { height: 34px; display: inline-flex; align-items: center; }
.cis-console-btn.btn-success { background: #10b981; border-color: #10b981; }
.cis-console-btn.btn-success:hover { background: #059669; border-color: #059669; }
.cis-console-status { font-size: 12px; color: var(--ui-text-muted); margin-left: 4px; }

/* ═══ 스테이지 가이드 (탭 아래 설명/뱃지/유의 — 설정/DB 기반) ═══ */
.cis-stage-guide {
    background: transparent; border: 0; padding: 0; margin: 0 0 12px;
}
.cis-guide-head { display: flex; align-items: center; gap: 8px; }
.cis-guide-title { font-size: 14.5px; font-weight: 700; color: var(--ui-text); }
.cis-guide-badge {
    display: inline-block; background: #e5f8ef; color: #059669;
    font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px;
}
.cis-guide-desc { margin: 6px 0 0; font-size: 12.5px; color: var(--ui-text-muted); line-height: 1.65; }
.cis-guide-warn {
    margin-top: 9px; background: #fffbeb; border: 1px solid #fde68a; color: #b45309;
    font-size: 12px; padding: 7px 11px; border-radius: 8px; display: inline-block;
}
.cis-guide-warn .fa-exclamation-triangle { color: #f59e0b; margin-right: 3px; }

/* ═══ 반응형: 필터 요소 축소 스텝 (줄바꿈 지연 — 자동접힘 1180px 과 연계) ═══ */
@media (max-width: 1600px) {
    #change-list-filters select.form-control.search-filter,
    #change-list-filters .select2-container { width: 120px !important; }
    #change-list-filters #searchbar { width: 160px; flex: 0 1 160px; }
}
@media (max-width: 1420px) {
    #change-list-filters select.form-control.search-filter,
    #change-list-filters .select2-container { width: 108px !important; }
    #change-list-filters #searchbar { width: 130px; flex: 0 1 130px; min-width: 100px; }
    #changelist-search-wrapper #changelist-search { gap: 6px; }
    #change-list-filters .date-range-filter input { width: 104px !important; }
}

/* ═══ 마감 폴리시 ═══ */
/* changelist: 외곽 카드 1개가 보더/라운딩/클리핑 담당, 스크롤은 card-body.table-responsive */
#changelist .card {
    border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow); overflow: hidden;
}
#changelist .card-body.table-responsive > table { margin-bottom: 0; }
/* submit 계열 기본 가시성 (테마 무관) */
input[type="submit"].btn:not([class*="btn-outline"]):not(.btn-danger):not(.btn-secondary) {
    background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}
/* dev 환경 상단 라인 — LNB 아래로 (레일 위 지나가지 않게) + 얇게 */
.dev-environment-top-bar { z-index: 1020 !important; height: 3px !important; }
/* 스크롤바 — 얇게 + 자동 숨김(스크롤 영역 호버 시에만 표시) */
.lnb-panel, .lnb-rail, .card-body.table-responsive {
    scrollbar-width: thin; scrollbar-color: transparent transparent;
}
.lnb-panel:hover, .lnb-rail:hover, .card-body.table-responsive:hover {
    scrollbar-color: #cfd4da transparent;
}
.lnb-panel::-webkit-scrollbar, .lnb-rail::-webkit-scrollbar,
.card-body.table-responsive::-webkit-scrollbar { width: 6px; height: 8px; }
.lnb-panel::-webkit-scrollbar-thumb, .lnb-rail::-webkit-scrollbar-thumb,
.card-body.table-responsive::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.lnb-panel:hover::-webkit-scrollbar-thumb, .lnb-rail:hover::-webkit-scrollbar-thumb,
.card-body.table-responsive:hover::-webkit-scrollbar-thumb { background: #cfd4da; }
.lnb-panel::-webkit-scrollbar-track, .lnb-rail::-webkit-scrollbar-track,
.card-body.table-responsive::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(var(--brand-primary-rgb), .18); }

/* ═══ 로그인 ═══ */
.login-logo img { max-height: 50px; }

/* ═══ 사이드바 로고 센터 정렬 (flat/tabs 모드, AdminLTE float 오버라이드) ═══ */
.brand-link .brand-image { float: none; display: block; margin: 0 auto; }

/* ═══ flatpickr 브랜드 컬러 오버라이드 ═══ */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--brand-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   공통 액션 콘솔/패널 컴포넌트 — 페이지별 하드코딩 금지, 어디서든 재사용.
   마감 콘솔·스테이지 액션 콘솔 등 상단 액션 영역 공통 서식. 디자인 토큰만 사용.
   ═══════════════════════════════════════════════════════════════════════ */
.cis-console {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.cis-console-title {
    margin: 0 0 3px;
    font-size: 15px;         /* 페이지 타이틀(18px)보다 한 단계 작게 — 위계 통일 */
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ui-text);
    display: flex; align-items: center; gap: 7px;
}
.cis-console-title .cis-console-sub { font-size: 12px; font-weight: 500; color: var(--ui-text-muted); }
.cis-console-desc {
    margin: 0 0 14px; font-size: 12px; line-height: 1.65; color: var(--ui-text-muted);
}
.cis-console-desc b { color: var(--ui-text); font-weight: 600; }
.cis-console-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.cis-panel {
    flex: 1 1 320px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    padding: 12px 14px;
}
.cis-panel-title { font-size: 12.5px; font-weight: 700; color: var(--ui-text); margin: 0 0 10px; }
.cis-field-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cis-field-row + .cis-field-row { margin-top: 8px; }
.cis-console-status { margin-top: 12px; font-size: 12.5px; color: var(--brand-primary); min-height: 1.1em; }
.cis-console-warn {
    font-size: 12.5px; color: #b45309;
    background: #fff7ed; border: 1px solid #fed7aa;
    border-radius: var(--ui-radius-sm); padding: 8px 12px;
}
/* 콘솔 내 인풋/셀렉트 통일 */
.cis-console select,
.cis-console input[type="month"],
.cis-console input[type="date"] {
    height: 34px; box-sizing: border-box;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    padding: 0 10px; font-size: 13px;
    background: #fff; color: var(--ui-text);
}
.cis-console select:focus,
.cis-console input:focus {
    outline: none; border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .15);
}
.cis-console .btn { height: 34px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }